/* Sports Content Playbook — shared styles (from Figma "Disseny web definitiu") */

:root {
  --bg: #121b33;
  --surface: #17213b;
  --surface-2: #1d2845;
  --surface-3: #213050;
  --gold: #f0b84a;
  --gold-light: #ffe0a0;
  --gold-mid: #f8cc75;
  --gold-tint: rgba(240, 184, 74, 0.2);
  --text: #ffffff;
  --muted: #b4c0d3;
  --muted-dim: rgba(180, 192, 211, 0.4);
  --white-dim: rgba(255, 255, 255, 0.4);
  --gold-dim: rgba(240, 184, 74, 0.4);
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.05);
  --inset-glow: inset 0 0 25px 0 rgba(255, 255, 255, 0.07);
  --fg: 255, 255, 255;          /* rgb of the text colour, for hairlines / hover washes: rgba(var(--fg), a) */
  --surface-rgb: 23, 33, 59;    /* rgb of --surface, for glass panels and fades */
  --on-gold: #121b33;           /* text on gold / bright fills (same in both themes) */
  --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.45);
  color-scheme: dark;

  --font-display: "Host Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1249px;
  --gutter: 24px;
}

:root[data-theme="light"] {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --surface-3: #e2e7f0;
  --gold: #b87a0c;
  --gold-light: #ffe0a0;
  --gold-mid: #f5c35c;
  --gold-tint: rgba(214, 150, 30, 0.14);
  --text: #121b33;
  --muted: #55617a;
  --muted-dim: rgba(85, 97, 122, 0.6);
  --white-dim: rgba(18, 27, 51, 0.45);
  --gold-dim: rgba(184, 122, 12, 0.4);
  --line: rgba(18, 27, 51, 0.12);
  --line-soft: rgba(18, 27, 51, 0.07);
  --inset-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
  --fg: 18, 27, 51;
  --surface-rgb: 255, 255, 255;
  --shadow-soft: 0 12px 34px rgba(18, 27, 51, 0.14);
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }

.gold { color: var(--gold); }

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 35px;
  padding: 0 18px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

.btn-gold {
  color: var(--on-gold);
  background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%);
  box-shadow:
    0 0 15px 0 rgba(240, 184, 74, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
}
.btn-gold:hover { box-shadow:
    0 0 24px 0 rgba(240, 184, 74, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.2); }

.btn-lg { height: 50px; padding: 0 24px; font-size: 24px; }
.btn-xl { height: 48px; font-size: 20px; width: 100%; }

/* Outline button: 1px gold gradient border */
.btn-outline {
  color: var(--gold);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--btn-fill, var(--bg)), var(--btn-fill, var(--bg))) padding-box,
    linear-gradient(to bottom, var(--gold), var(--gold-light)) border-box;
}

.btn-round {
  width: 47px;
  height: 46px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
}
.btn-round:disabled { opacity: 0.4; cursor: default; transform: none; }

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 29px;
  z-index: 50;
  width: min(1320px, 100% - 2 * var(--gutter));
  height: 58px;
  margin: 29px auto 0;
  padding: 0 11px 0 21px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 100px;
  box-shadow: 0 0 100px 0 rgba(240, 184, 74, 0.25);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand img { width: 32px; height: 32px; }
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.nav-links a { white-space: nowrap; opacity: 0.9; transition: color 0.2s, opacity 0.2s; }
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--gold); opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn-outline { --btn-fill: var(--surface); }
.nav-toggle { display: none; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block; width: 18px; height: 2px; margin: auto; background: var(--text); border-radius: 2px; position: relative; content: "";
  transition: transform 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- Hero ---------- */

.hero { position: relative; text-align: center; padding-top: 97px; }

.trust-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 50px;
  padding: 4px 22px 4px 6px;
  background: var(--surface);
  border-radius: 100px;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: -0.005em;
  text-align: left;
}
.trust-badge::before,
.trust-badge::after {
  content: "";
  position: absolute;
  width: 85px;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 184, 74, 0), var(--gold) 50%, rgba(240, 184, 74, 0));
}
.trust-badge::before { top: 0; left: 41px; }
.trust-badge::after { bottom: -1px; left: 198px; }
.trust-badge p { width: 183px; }

.logo-stack { display: flex; }
.logo-stack span {
  position: relative;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background: var(--surface);
  border: 0.5px solid var(--line);
  overflow: hidden;
}
.logo-stack span + span { margin-left: -6px; }
.logo-stack .crop { position: absolute; overflow: hidden; }
.logo-stack .crop img { position: absolute; max-width: none; }
.logo-stack .crop img.cover { inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hero h1 {
  max-width: 962px;
  margin: 62px auto 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero-sub {
  max-width: 640px;
  margin: 28px auto 0;
  color: rgba(var(--fg), 0.86);   /* brighter than --muted: it's the promise, it has to be read */
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}
.hero .btn-gold { margin-top: 68px; }

.hero-shot {
  position: relative;
  max-width: 1249px;
  margin: 92px auto 0;
  aspect-ratio: 1249 / 738;
  border: 2px solid var(--gold);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 100px 0 rgba(240, 184, 74, 0.25);
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0.6; }
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 15px;
  height: 35px;
  padding: 0 18px;
  background: #f8fafc;
  color: var(--on-gold);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 16px;
  box-shadow: 0 0 15px 0 rgba(184, 132, 31, 0.4);
  transition: transform 0.15s ease;
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.05); }
.play-btn img { width: 13px; height: 14px; transform: rotate(90deg); }

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 91px;
  padding-bottom: 60px;
}
.stat {
  position: relative;
  padding: 20px 43px 0;
  min-height: 147px;
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.stat-label {
  margin-top: 28px;
  max-width: 235px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--muted);
}
.stat:first-child .stat-num,
.stat:first-child .stat-label { color: var(--gold); }

/* ---------- Problem ---------- */

.problem { padding: 63px 0 120px; text-align: center; }
.problem .section-title { max-width: 1249px; margin-inline: auto; }
.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 116px;
  padding: 48px 0;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--inset-glow);
}
.pain { padding: 0 40px; }
.pain + .pain { border-left: 1px solid var(--line); }
.pain h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.02em;
  max-width: 236px;
  margin-inline: auto;
}
.pain p {
  max-width: 225px;
  margin: 23px auto 0;
  color: var(--muted);
}

/* ---------- Features carousel ---------- */

.features { padding-bottom: 140px; }
.features-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.features-head .section-title { max-width: 900px; }
.carousel-arrows { display: flex; gap: 19px; flex-shrink: 0; }
.carousel-arrows .prev { transform: scaleX(-1); }
.carousel-arrows .prev:hover { transform: scaleX(-1) translateY(-1px); }

.feature-track {
  display: flex;
  gap: 36px;
  margin-top: 106px;
  padding: 0 max(var(--gutter), (100vw - var(--container)) / 2) 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), (100vw - var(--container)) / 2);
  scrollbar-width: none;
}
.feature-track::-webkit-scrollbar { display: none; }
.feature-track.is-drifting { scroll-snap-type: none; } /* the slow auto-drift needs free scrolling */

.feature-card {
  position: relative;
  flex: 0 0 345px;
  height: 421px;
  padding: 0 26px 30px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--inset-glow);
  overflow: hidden;
  scroll-snap-align: start;
}
.feature-visual { position: relative; height: 237px; flex-shrink: 0; }
.feature-card h3 {
  margin-top: 30px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.feature-card p { margin-top: 18px; color: var(--muted); }

.center-abs { position: absolute; left: 50%; transform: translateX(-50%); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 35px;
  padding: 0 18px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}
.pill-top { background: linear-gradient(90deg, #f32f71, #ff685c); }
.pill-replicable { background: linear-gradient(90deg, #00d85b, #00ccdd); }
.pill-over { background: linear-gradient(90deg, #4d5bff, #7a5cff); }
.glow-top { box-shadow: 0 0 100px 0 #ff685c; }
.glow-replicable { box-shadow: 0 0 100px 0 #00d85b; }
.glow-over { box-shadow: 0 0 100px 0 #7a5cff; }
.pill-gold { background: var(--gold-tint); color: var(--gold); }
.pill-dark {
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  color: var(--muted);
}
.pill-sm { height: 22px; padding: 0 12px; font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; }
.pill img { flex-shrink: 0; }

.feature-visual .pill-top { top: 111px; }
.feature-visual .pill-replicable { top: 111px; }
.feature-visual .pill-over { top: 111px; }

/* competitors dropdown */
.mini-select {
  position: absolute;
  top: 96px;
  left: 35px;
  width: 222px;
  padding: 6px 6px 6px 6px;
  display: grid;
  gap: 6px;
  justify-items: start;
  background: var(--surface);
  border: 0.5px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: 0 0 80px 0 rgba(240, 184, 74, 0.25);
}
.mini-select .chev { position: absolute; right: 15px; top: 36px; width: 15px; height: 15px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 35px;
  padding: 0 16px 0 18px;
  border-radius: 100px;
  background: var(--gold-tint);
  color: var(--gold);
  letter-spacing: -0.005em;
}
.chip img { width: 10px; height: 10px; }

/* thumbnail grid */
.thumbs {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px 7px;
}
.thumb { position: relative; height: 93px; border-radius: 2px; overflow: hidden; }
.thumb img { position: absolute; max-width: none; }
.thumbs-fade {
  position: absolute;
  left: -13px;
  right: -13px;
  top: 146px;
  height: 82px;
  background: linear-gradient(to bottom, rgba(var(--surface-rgb), 0), var(--surface));
}

/* platforms grid */
.platforms {
  position: absolute;
  top: 29px;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px 10px;
}
.platforms span {
  height: 91px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  border-radius: 5px;
}
.platforms span.raw { background: none; border: 0; }
.platforms span.raw img { width: 100%; height: 100%; }
.platforms-fade {
  position: absolute;
  left: -13px;
  right: -13px;
  top: 129px;
  height: 92px;
  background: linear-gradient(to bottom, rgba(var(--surface-rgb), 0), var(--surface));
}

/* trends dropdown */
.trend-select {
  position: absolute;
  top: 38px;
  left: 22px;
  width: 247px;
  background: var(--surface);
  border: 0.5px solid var(--line-soft);
  border-radius: 15px;
  box-shadow: 0 0 50px 0 rgba(240, 184, 74, 0.3);
  color: var(--muted);
  overflow: hidden;
}
.trend-select .head { position: relative; height: 41px; padding: 13px 17px; }
.trend-select .head img { position: absolute; right: 19px; top: 12px; width: 15px; height: 15px; transform: scaleY(-1); }
.trend-select ul { list-style: none; margin: 0; padding: 0 0 6px; border-top: 0.5px solid var(--line); }
.trend-select li { height: 35px; padding: 9px 20px; }
.trend-select li.on { margin: 0 6px; padding-left: 14px; background: var(--gold-tint); color: var(--gold); border-radius: 100px; }

/* save tree */
.save-tree { position: absolute; inset: 0; }
.save-tree .pill-gold {
  position: absolute;
  top: 106px;
  left: 9px;
  height: 35px;
  gap: 14px;
  border: 0.5px solid var(--line);
  box-shadow: 0 0 40px 0 rgba(240, 184, 74, 0.4);
}
.save-tree .branch {
  position: absolute;
  left: 116px;
  top: 79px;
  width: 36px;
  height: 90px;
}
.save-tree .branch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 45px;
  width: 18px;
  border-top: 1px solid var(--line);
}
.save-tree .branch::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 18px;
  height: 90px;
  border: 1px solid var(--line);
  border-right: 0;
}
.save-tree .branch i {
  position: absolute;
  left: 18px;
  top: 45px;
  width: 18px;
  border-top: 1px solid var(--line);
}
.folders { position: absolute; left: 163px; top: 62px; display: grid; gap: 10px; }
.folders .pill-dark { width: 120px; justify-content: space-between; padding: 0 14px 0 18px; }

/* ---------- Magic section ---------- */

.magic { padding: 60px 0 40px; }
.magic .section-title { white-space: nowrap; }
/* the lead in one line on wide screens (wraps on phones) */
.magic .sec-head .hx-lead { max-width: none; }
@media (min-width: 720px) { .magic .sec-head .hx-lead { white-space: nowrap; } }
.magic-grid {
  display: grid;
  grid-template-columns: 366px 1fr;
  gap: 60px;
  margin-top: 88px;
  align-items: start;
}
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0 0 30px;
  cursor: pointer;
}
.step + .step { padding-top: 32px; border-top: 1px solid var(--line); }
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.03em;
  color: var(--gold-dim);
  transition: color 0.3s;
}
.step-title {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--white-dim);
  transition: color 0.3s;
}
.step-text { display: block; margin-top: 14px; color: var(--muted-dim); transition: color 0.3s; }
.step.is-active .step-num { color: var(--gold); }
.step.is-active .step-title { color: var(--text); }
.step.is-active .step-text { color: var(--muted); }
.step:hover:not(.is-active) .step-title { color: rgba(var(--fg), 0.7); }

.step-progress { display: block; height: 2px; margin-top: 18px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.step-progress i { display: block; height: 100%; width: 0; background: var(--gold); }
.step.is-active .step-progress i { animation: step-progress var(--step-ms, 8000ms) linear forwards; }
@keyframes step-progress { to { width: 100%; } }

.magic-visuals { position: relative; min-height: 600px; transition: height 0.4s ease; }
.magic-visual {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}
.magic-visual.is-active { opacity: 1; visibility: visible; transform: none; }
.magic-visual[data-step="1"] > img { width: 644px; margin-top: 0; }
.magic-visual[data-step="2"] > img { width: 765px; margin-top: -16px; }
.magic-visual[data-step="3"] .compose { position: relative; width: 717px; padding: 54px 0 0 47px; }
.magic-visual[data-step="3"] .compose > img { width: 670px; }
.magic-visual[data-step="3"] .compose .badge { position: absolute; top: 0; left: 0; width: 381px; }

/* ---------- CTA ---------- */

.cta { padding: 129px 0; }
.cta-box {
  position: relative;
  padding: 80px 24px 85px;
  text-align: center;
  border: 2px solid rgba(240, 184, 74, 0.8);
  border-radius: 30px;
  background:
    radial-gradient(130.84% 100% at 50% 0%, rgba(23, 33, 59, 0.15) 50%, rgba(240, 184, 74, 0.15) 100%),
    var(--bg);
  box-shadow: 0 0 100px 0 rgba(240, 184, 74, 0.25), inset 0 0 50px 0 rgba(240, 184, 74, 0.5);
}
.cta-box .section-title { max-width: 963px; margin-inline: auto; }
.cta-box .btn { margin-top: 63px; }

/* ---------- Testimonials ---------- */

.testimonials { padding: 97px 0 120px; text-align: center; overflow: hidden; }
.rating {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 35px;
  padding: 0 20px 0 14px;
  background: var(--surface);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.rating::before,
.rating::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 184, 74, 0), var(--gold) 50%, rgba(240, 184, 74, 0));
}
.rating::before { top: 0; left: 20px; }
.rating::after { bottom: -1px; left: 112px; }
.rating img { width: 12px; height: 12px; }
.rating span { margin-left: 24px; }
.testimonials .section-title { max-width: 1042px; margin: 63px auto 0; }

.quote-track {
  display: flex;
  gap: 37px;
  margin-top: 115px;
  padding: 0 max(var(--gutter), (100vw - 1346px) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), (100vw - 1346px) / 2);
  scrollbar-width: none;
  text-align: left;
}
.quote-track::-webkit-scrollbar { display: none; }
.quote-card {
  position: relative;
  flex: 0 0 488px;
  min-height: 449px;
  margin: 0;
  padding: 26px 38px 38px;
  display: flex;
  flex-direction: column;
  border: 0.5px solid var(--line);
  border-radius: 10px;
  background: radial-gradient(104.75% 100% at 50% 0%, rgba(23, 33, 59, 0.06) 50%, rgba(240, 184, 74, 0.06) 100%);
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.quote-card .quote-icon { width: 59px; height: 44px; opacity: 0.4; transition: opacity 0.3s; }
.quote-card.is-active .quote-icon { opacity: 1; }
.quote-card blockquote {
  margin: 39px 0 0;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--white-dim);
  transition: color 0.3s;
}
.quote-card footer {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  align-items: center;
  gap: 21px;
  color: var(--muted-dim);
  transition: color 0.3s;
}
.quote-card footer img { width: 45px; height: 52px; object-fit: contain; opacity: 0.4; transition: opacity 0.3s; }
.quote-card footer img.wide { width: 64px; height: 45px; }
.quote-card.is-active {
  border-color: rgba(240, 184, 74, 0.5);
  background: radial-gradient(104.75% 100% at 50% 0%, rgba(23, 33, 59, 0.2) 20.7%, rgba(132, 109, 67, 0.2) 60.3%, rgba(240, 184, 74, 0.2) 100%);
  box-shadow: inset 0 0 25px 0 rgba(240, 184, 74, 0.2);
}
.quote-card.is-active blockquote { color: var(--text); }
.quote-card.is-active footer { color: var(--muted); }
.quote-card.is-active footer img { opacity: 1; }
.testimonials .carousel-arrows { justify-content: center; margin-top: 50px; }

/* ---------- FAQ ---------- */

.faq { padding: 46px 0 120px; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 569px;
  gap: 60px;
  align-items: start;
}
.faq-intro p { margin-top: 33px; max-width: 612px; color: var(--muted); }
.faq-intro .actions { display: flex; gap: 6px; margin-top: 23px; }
.faq-intro .btn-outline { padding: 0 16px; }
.accordion { display: grid; gap: 9px; }
.acc-item {
  border: 0.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  transition: background 0.3s, box-shadow 0.3s;
}
.acc-item.is-open { background: var(--surface); box-shadow: var(--inset-glow); }
.acc-trigger {
  width: 100%;
  min-height: 71px;
  padding: 24px 32px 24px 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  letter-spacing: -0.005em;
}
.acc-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 6px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease;
}
.acc-icon::after { transform: rotate(90deg); }
.acc-item.is-open .acc-icon::after { transform: rotate(0deg); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { max-width: 520px; padding: 0 37px 26px; margin: 0; color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 128px;
  padding: 17px 0 40px;
  background: radial-gradient(181% 100% at 50% 0%, rgba(18, 27, 51, 0.12) 50%, rgba(129, 106, 63, 0.12) 75%, rgba(240, 184, 74, 0.12) 100%);
}
.site-footer .container { width: min(1300px, 100% - 2 * var(--gutter)); }
.footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.footer-brand { font-size: 40px; gap: 20px; letter-spacing: -0.02em; }
.footer-brand img { width: 62px; height: 62px; }
.footer-about p { margin-top: 25px; max-width: 692px; color: var(--muted); }
.footer-about .actions { display: flex; gap: 10px; margin-top: 22px; }
.footer-cols { display: grid; grid-template-columns: repeat(2, auto); column-gap: 47px; padding-top: 30px; padding-right: 66px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; align-content: start; }
.footer-cols a { font-size: 20px; letter-spacing: -0.005em; transition: color 0.2s; }
.footer-cols a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: 75px;
  padding-top: 31px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--muted);
  border-image: linear-gradient(90deg, rgba(240, 184, 74, 0), rgba(240, 184, 74, 0.5) 20%, rgba(240, 184, 74, 0.5) 80%, rgba(240, 184, 74, 0)) 1;
  border-top: 1px solid;
}
.footer-bottom nav { display: flex; gap: 33px; flex-wrap: wrap; padding-right: 66px; }
.footer-bottom a:hover { color: var(--text); }

/* ---------- Pricing ---------- */

.pricing-hero { padding-top: 83px; text-align: center; }
.pricing-hero .section-title { margin-top: 45px; }
.pricing-hero .lead { max-width: 709px; margin: 36px auto 0; color: var(--muted); }

.seat-picker {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-top: 46px;
  padding: 6px;
  background: var(--bg);
  border: 0.5px solid var(--line);
  border-radius: 1000px;
}
.seat-picker button {
  height: 36px;
  min-width: 86px;
  padding: 0 18px;
  border-radius: 100px;
  font-family: var(--font-display);
  color: var(--muted);
  letter-spacing: 0;
  transition: color 0.2s;
}
.seat-picker button:first-child { min-width: 77px; }
.seat-picker button:hover { color: var(--text); }
.seat-picker button[aria-checked="true"] {
  color: var(--on-gold);
  background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, 413px);
  justify-content: center;
  gap: 41px;
  margin-top: 57px;
  text-align: left;
}
.plan {
  min-height: 642px;
  padding: 36px 28px 28px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--inset-glow);
}
.plan h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
.plan .seats { margin-top: 14px; color: var(--muted); font-weight: 400; }
.plan hr { width: 100%; margin: 30px 0 0; border: 0; border-top: 1px solid var(--line); }
.plan .price { margin-top: 30px; font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.02em; }
.plan .price small { font-size: 28px; }
.plan .billed { margin-top: 14px; color: var(--muted); font-weight: 400; }
.plan .includes { margin-top: 35px; font-size: 14px; color: var(--muted-dim); font-weight: 400; }
.plan ul { list-style: none; margin: 18px 0 40px; padding: 0 0 0 8px; display: grid; gap: 13px; }
.plan li { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-weight: 400; }
.plan li img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.plan .btn { margin-top: auto; }

.section-rule { margin: 120px 0 0; border: 0; border-top: 1px solid var(--line); }
.section-rule + .pricing-faq, .pricing-faq { padding-top: 110px; }

/* Single pricing card with Monthly / Yearly switch */
.price-card {
  width: min(640px, 100%);
  margin: 57px auto 0;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--inset-glow), 0 0 100px 0 rgba(240, 184, 74, 0.12);
}
.price-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.price-card h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.price-card .seats { margin-top: 10px; color: var(--muted); font-weight: 400; }
.price-card hr { width: 100%; margin: 28px 0 0; border: 0; border-top: 1px solid var(--line); }

.billing-toggle {
  flex-shrink: 0;
  display: inline-flex;
  padding: 4px;
  background: var(--bg);
  border: 0.5px solid var(--line);
  border-radius: 100px;
}
.billing-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0;
  transition: color 0.2s;
}
.billing-toggle button:hover { color: var(--text); }
.billing-toggle button[aria-checked="true"] {
  color: var(--on-gold);
  background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
}
.save-badge { padding: 1px 6px; border-radius: 100px; font-size: 11px; font-weight: 600; background: var(--gold-tint); color: var(--gold); }
.billing-toggle button[aria-checked="true"] .save-badge { background: rgba(18, 27, 51, 0.16); color: var(--on-gold); }

.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 28px; }
.price-old { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: #ff685c; text-decoration: line-through; text-decoration-thickness: 3px; }
.price-now { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.price-per { color: var(--muted); font-weight: 400; }
.price-note { margin-top: 14px; color: var(--muted); font-size: 14px; font-weight: 400; }
.price-note b { color: var(--gold); font-weight: 600; }
.price-note .link-gold { font-size: inherit; }
.price-card[data-billing="yearly"] [data-when="monthly"],
.price-card[data-billing="monthly"] [data-when="yearly"] { display: none; }

.seat-off { margin-left: 4px; padding: 1px 5px; border-radius: 100px; font-size: 11px; font-weight: 600; background: var(--gold-tint); color: var(--gold); }
.seat-picker button[aria-checked="true"] .seat-off { background: rgba(18, 27, 51, 0.16); color: var(--on-gold); }
.price-volume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 400; }
.price-volume[hidden] { display: none; }
.volume-pill { padding: 3px 10px; border-radius: 100px; background: var(--gold-tint); color: var(--gold); font-size: 13px; font-weight: 600; }
.price-card:not(.is-team) [data-team-only],
.price-card.is-team [data-price-only] { display: none !important; }
.team-offer { margin-top: 28px; }
.team-eyebrow { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
.team-title { margin-top: 10px; font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; }
.team-offer .price-note { font-size: 15px; line-height: 1.5; }

.price-card .includes { margin-top: 30px; font-size: 14px; color: var(--muted-dim); font-weight: 400; }
.price-features { list-style: none; margin: 18px 0 36px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 24px; }
.price-features li { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-weight: 400; }
.price-features li img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 640px) {
  .price-card { padding: 26px 20px 22px; }
  .price-card-head { flex-direction: column; }
  .price-now { font-size: 52px; }
  .price-old { font-size: 28px; }
  .price-features { grid-template-columns: 1fr; }
}

/* ---------- Content Library (app view) ---------- */

.library-page .site-nav { position: relative; top: 0; margin-bottom: 0; }
.library {
  display: grid;
  grid-template-columns: 544px 1fr;
  min-height: 100vh;
  border-top: 1px solid var(--line-soft);
  transition: grid-template-columns 0.3s ease;
}
.library.filters-collapsed { grid-template-columns: 0 1fr; }
.filters {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 37px 40px 48px;
  background: var(--surface);
  border-right: 1px solid var(--line-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.library.filters-collapsed .filters { padding-inline: 0; overflow: hidden; border: 0; }
.filters-head { display: flex; align-items: baseline; justify-content: space-between; }
.filters-head h1 { font-family: var(--font-display); font-size: 32px; line-height: 21px; }
.link-gold { color: var(--gold); text-decoration: underline; }
.link-muted { color: var(--muted); text-decoration: underline; }

.criteria {
  position: relative;
  margin-top: 28px;
  padding: 25px 29px 28px;
  border: 0.5px solid var(--line);
  border-radius: 10px;
  background: radial-gradient(104.5% 100% at 50% 0%, rgba(29, 40, 69, 0.1) 59.8%, rgba(135, 112, 72, 0.1) 79.9%, rgba(240, 184, 74, 0.1) 100%);
  font-size: 14px;
}
.criteria[hidden] { display: none; }
.criteria h2 { font-family: var(--font-display); font-size: 16px; line-height: 21px; }
.criteria h3 { margin-top: 26px; font-family: var(--font-display); font-size: 16px; color: var(--gold); }
.criteria p { margin-top: 8px; }
.criteria .eg { margin-top: 6px; color: var(--muted); }
.criteria .close { position: absolute; top: 27px; right: 31px; width: 16px; height: 16px; }

.f-group { margin-top: 36px; }
.f-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 600;
}
.f-label .hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; }
.f-label .hint i {
  width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%;
  background: var(--muted); color: #0b1020; font-style: normal; font-weight: 700; font-size: 11px; text-decoration: none;
}
.f-row { display: flex; flex-wrap: wrap; gap: 7px 13px; }
.f-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.toggle { display: inline-flex; }
.toggle button {
  height: 22px;
  width: 51px;
  font-size: 14px;
  color: var(--muted);
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
}
.toggle button:first-child { border-radius: 100px 0 0 100px; }
.toggle button:last-child { border-radius: 0 100px 100px 0; }
.toggle button[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); border-color: transparent; }

.f-select {
  position: relative;
  width: 100%;
  min-height: 43px;
  padding: 6px 44px 6px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  border-radius: 100px;
  color: var(--muted);
  text-align: left;
}
.f-select.has-chips { padding-left: 6px; }
.f-select > img { position: absolute; right: 22px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); }
.f-select > img.cal { width: 20px; height: 20px; right: 18px; }
.f-select .chip { gap: 14px; }

.f-list {
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  border-radius: 20px;
  overflow: hidden;
  color: var(--muted);
}
.f-list .head { position: relative; height: 41px; padding: 13px 17px; }
.f-list .head img { position: absolute; right: 22px; top: 13px; width: 15px; height: 15px; transform: scaleY(-1); }
.f-list .search {
  position: relative;
  display: block;
  height: 43px;
  background: var(--surface-3);
  border-block: 0.5px solid var(--line-soft);
}
.f-list .search input {
  width: 100%;
  height: 100%;
  padding: 0 48px 0 18px;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  letter-spacing: -0.005em;
}
.f-list .search input::placeholder { color: var(--muted); }
.f-list .search img { position: absolute; right: 20px; top: 12px; width: 18px; height: 18px; }
.f-list ul { list-style: none; margin: 0; padding: 0 6px 6px; }
.f-list li button { width: 100%; height: 35px; padding: 0 14px; text-align: left; border-radius: 100px; letter-spacing: -0.005em; }
.f-list li button:hover { color: var(--text); }
.f-list li button[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); }

.tiles { display: grid; grid-template-columns: repeat(4, 108px); justify-content: space-between; gap: 11px 12px; }
.tile { display: grid; justify-items: center; gap: 11px; color: var(--muted); }
.tile .box {
  width: 108px;
  height: 103px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  border-radius: 5px;
  transition: background 0.2s;
}
.tile .box.raw { background: none; border: 0; }
.tile .box.raw img { width: 100%; height: 100%; }
.tile:hover .box { background: var(--surface-3); }
.tile[aria-pressed="true"] { color: var(--gold); }
.tile[aria-pressed="true"] .box { background: var(--gold-tint); }

.seg-btn[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); border-color: transparent; }
.seg-btn[aria-pressed="false"] { background: var(--surface-2); color: var(--muted); border: 0.5px solid var(--line-soft); }
.smart { transition: opacity 0.2s, box-shadow 0.2s; }
[data-smart]:has([aria-pressed="true"]) .smart[aria-pressed="false"] { opacity: 0.35; }
.smart[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgba(var(--fg), 0.6); }
.f-select .chip button { display: grid; place-items: center; }
.criteria .close img { width: 16px; height: 16px; }

.feed { min-width: 0; }
.feed-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 61px;
  padding: 0 38px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(50px);
}
.feed-bar .spacer { margin-left: auto; }
.feed-bar .seg { flex-wrap: nowrap; }
.feed-bar .seg .pill { padding: 0 14px; font-size: 15px; }
.feed-bar .pill { font-weight: 700; }
.feed-bar .pill-dark { color: var(--muted); gap: 18px; }
.feed-bar .collapse { gap: 11px; padding-left: 12px; color: var(--muted); }
.feed-bar .collapse img { width: 11px; height: 9px; transform: scaleX(-1); transition: transform 0.3s; }
.library.filters-collapsed .feed-bar .collapse img { transform: none; }
.feed-bar .seg button { color: var(--muted); }
.feed-bar .seg button[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); }
.feed-bar .seg button[aria-pressed="false"] { background: var(--surface-2); border: 0.5px solid var(--line-soft); }

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px 39px;
  padding: 31px 38px 80px;
  max-width: 1301px;
}
.post-head { display: flex; align-items: center; justify-content: space-between; height: 35px; }
.post-head .pill-dark { gap: 14px; transition: color 0.2s; }
.post-head .pill-dark:hover { color: var(--text); }
.post-head .pill-gold { font-weight: 700; gap: 18px; }
.post-shot { margin-top: 14px; border-radius: 4px; overflow: hidden; background: var(--surface); }
.post-shot img { width: 100%; height: auto; }
.post[hidden] { display: none; }
.posts-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--muted); }

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
  .magic-grid { grid-template-columns: minmax(0, 1fr); }
  .magic-visuals { min-height: 0; aspect-ratio: 765 / 800; max-width: 765px; width: 100%; margin-inline: auto; }
  .magic-visual img,
  .magic-visual .compose { max-width: 100%; }
  .magic-visual[data-step="3"] .compose { width: 100%; padding: 7% 0 0 6.5%; }
  .magic-visual[data-step="3"] .compose > img { width: 100%; }
  .magic-visual[data-step="3"] .compose .badge { width: 53%; }
  .faq-grid { grid-template-columns: 1fr; }
  .library { grid-template-columns: 420px 1fr; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile .box { width: 100%; }
}

@media (max-width: 1280px) {
  .library .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library.filters-collapsed .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1240px) {
  .site-nav { gap: 16px; }
  .nav-links { gap: 22px; }
}

@media (max-width: 1180px) {
  .nav-links,
  .nav-actions { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .site-nav.is-open { flex-wrap: wrap; height: auto; padding: 12px 16px 18px 20px; border-radius: 0; }
  .site-nav.is-open .nav-links,
  .site-nav.is-open .nav-actions { display: flex; width: 100%; }
  .site-nav.is-open .nav-links { flex-direction: column; align-items: flex-start; gap: 16px; margin: 12px 0 8px; }
  .site-nav.is-open .nav-toggle span { background: transparent; }
  .site-nav.is-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .site-nav.is-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
}

@media (max-width: 960px) {
  .nav-links,
  .nav-actions { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .site-nav.is-open { flex-wrap: wrap; height: auto; padding: 12px 16px 18px 20px; border-radius: 0; }
  .site-nav.is-open .nav-links,
  .site-nav.is-open .nav-actions { display: flex; width: 100%; }
  .site-nav.is-open .nav-links { flex-direction: column; align-items: flex-start; gap: 16px; margin: 12px 0 8px; }
  .site-nav.is-open .nav-toggle span { background: transparent; }
  .site-nav.is-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  .site-nav.is-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat:nth-child(3) { border-left: 0; }
  .pain-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .pain:nth-child(3) { border-left: 0; }
  .plans { grid-template-columns: minmax(0, 413px); }
  .library { grid-template-columns: 1fr; }
  .library .filters { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .library.filters-collapsed { grid-template-columns: 1fr; }
  .library.filters-collapsed .filters { display: none; }
  .feed-bar { padding: 0 var(--gutter); overflow-x: auto; }
  .library .posts,
  .library.filters-collapsed .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .posts { padding-inline: var(--gutter); }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .brand { font-size: 17px; }
  .hero { padding-top: 64px; }
  .hero h1 { margin-top: 40px; }
  .hero .btn-gold { margin-top: 40px; }
  .hero-shot { margin-top: 56px; }
  .trust-badge::after { display: none; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  .stat { min-height: 0; padding-inline: 8px; }
  .pain-grid { grid-template-columns: 1fr; margin-top: 56px; }
  .pain + .pain { border-left: 0; border-top: 1px solid var(--line); padding-top: 40px; }
  .features-head { flex-direction: column; align-items: flex-start; }
  .feature-track { margin-top: 48px; }
  .feature-card { flex-basis: 300px; padding-inline: 18px; }
  .feature-visual { transform: scale(0.87); transform-origin: top left; width: 115%; }
  .magic .section-title { white-space: normal; }
  .cta { padding: 64px 0; }
  .cta-box { padding: 56px 20px; }
  .btn-lg { font-size: 20px; }
  .quote-card { flex-basis: 85vw; padding-inline: 24px; }
  .quote-card blockquote { font-size: 17px; }
  .quote-track { margin-top: 56px; }
  .acc-trigger { padding-inline: 22px; }
  .acc-panel p { padding-inline: 22px; }
  .footer-brand { font-size: 28px; }
  .footer-brand img { width: 42px; height: 42px; }
  .footer-cols { padding-right: 0; }
  .footer-bottom nav { padding-right: 0; gap: 16px 24px; }
  .filters { padding-inline: var(--gutter); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .library .posts,
  .library.filters-collapsed .posts { grid-template-columns: 1fr; }
  .seat-picker button { min-width: 0; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Blog ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0;
}
.blog-hero { padding-top: 83px; text-align: center; }
.blog-hero .section-title { max-width: 900px; margin: 40px auto 0; }
.blog-hero .lead { max-width: 709px; margin: 32px auto 0; color: var(--muted); }
.blog-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; }
.blog-tabs button {
  height: 30px;
  padding: 0 16px;
  border-radius: 100px;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}
.blog-tabs button:hover { color: var(--text); }
.blog-tabs button[aria-selected="true"] { background: var(--gold-tint); color: var(--gold); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 46px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--inset-glow);
  transition: border-color 0.2s, transform 0.2s;
}
.blog-card:hover { border-color: rgba(240, 184, 74, 0.5); transform: translateY(-2px); }
.blog-card[hidden] { display: none; }
.blog-img {
  position: relative;
  aspect-ratio: 1200 / 630;
  border-radius: 6px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
}
.blog-img .pill { position: absolute; top: 10px; left: 10px; }
.pill-xs { height: 24px; padding: 0 12px; font-size: 13px; background: rgba(23, 33, 59, 0.85); backdrop-filter: blur(6px); }
.blog-body { display: flex; flex-direction: column; flex: 1; padding: 22px 18px 18px; }
.blog-body time { font-size: 13px; color: var(--muted); }
.blog-body h2 {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.blog-body p { margin-top: 16px; font-size: 14px; color: var(--muted); }
.blog-body .link-gold { margin-top: auto; padding-top: 22px; font-size: 14px; }
.load-more { display: flex; justify-content: center; margin-top: 46px; }
.load-more .pill { font-family: var(--font-body); font-weight: 500; font-size: 14px; height: 32px; }

.section-title-md { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; }

.blog-promo {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1fr);
  gap: 60px;
  align-items: center;
  padding: 150px 0 0;
}
.promo-text p { max-width: 520px; margin-top: 24px; color: var(--muted); }
.promo-text .btn { margin-top: 26px; }
.promo-shot {
  display: block;
  aspect-ratio: 1249 / 738;
  border: 2px solid var(--gold);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 100px 0 rgba(240, 184, 74, 0.25);
  transition: transform 0.2s;
}
.promo-shot:hover { transform: translateY(-2px); }
.promo-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.blog-news { padding-top: 160px; }
.blog-news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.news-link {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gold);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.news-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 40px;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--inset-glow);
}
.news-item { padding: 32px 30px 40px; transition: background 0.2s; }
.news-item + .news-item { border-left: 1px solid var(--line); }
.news-item:hover { background: rgba(var(--fg), 0.02); }
.news-meta { display: flex; gap: 18px; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.news-meta b { color: var(--gold); font-weight: 500; }
.news-item h3 {
  margin-top: 26px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.news-item:hover h3 { color: var(--gold); }
.news-item p { margin-top: 18px; font-size: 14px; color: var(--muted); }

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-promo { grid-template-columns: 1fr; padding-top: 100px; }
  .blog-news { padding-top: 100px; }
  .news-strip { grid-template-columns: 1fr; }
  .news-item + .news-item { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-body h2, .news-item h3 { font-size: 22px; }
}

/* ---------- Social News ---------- */

.news-filters { margin-top: 80px; }
.platform-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.platform-row .tile .box { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; }
.platform-row .tile .box.raw { background: var(--surface-2); border: 0.5px solid var(--line-soft); padding: 0; overflow: hidden; }
.platform-row .tile .box.raw img { width: 108px; height: 103px; max-width: 100%; }
.platform-row .tile[aria-pressed="true"] .box { background: var(--gold-tint); border-color: rgba(240, 184, 74, 0.5); }
.news-filter-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.news-filter-row .seg-btn { height: 32px; font-family: var(--font-body); font-weight: 500; font-size: 14px; }
.news-search { width: min(463px, 100%); }
.news-search .f-select input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; letter-spacing: -0.005em;
}
.news-search .f-select input::placeholder { color: var(--muted); }
.news-search .f-select > img { width: 18px; height: 18px; }

.news-list { display: grid; gap: 24px; margin-top: 40px; }
.news-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  align-items: center;
  padding: 34px 34px 34px 38px;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--inset-glow);
  transition: border-color 0.2s;
}
.news-row:hover { border-color: rgba(240, 184, 74, 0.5); }
.news-row[hidden] { display: none; }
.news-row h2 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.news-row p { margin-top: 18px; font-size: 14px; color: var(--muted); max-width: 640px; }
.news-row-img {
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
}

@media (max-width: 960px) {
  .platform-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news-row { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .news-row-img { order: -1; }
}
@media (max-width: 640px) {
  .news-row h2 { font-size: 22px; }
}

/* ---------- Contact ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 463px;
  gap: 60px;
  align-items: start;
  padding-top: 110px;
}
.contact-intro p { max-width: 520px; margin-top: 24px; color: var(--muted); }
.contact-intro p + p { margin-top: 12px; }
.contact-intro .btn { margin-top: 28px; }
.contact-form { display: grid; gap: 12px; padding-top: 100px; }
.field input,
.field textarea {
  width: 100%;
  min-height: 43px;
  padding: 12px 18px;
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  border-radius: 100px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  letter-spacing: -0.03em;
  outline: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 96px; border-radius: 16px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.field .is-invalid,
.field input.is-invalid { border-color: #ff685c; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { width: 14px; height: 14px; margin: 0; accent-color: var(--gold); }
.check.is-invalid { color: #ff8a80; }
.form-status { min-height: 0; font-size: 14px; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--gold); }
.form-status.err { color: #ff8a80; }
.contact-form .btn { justify-self: start; }
.contact + .testimonials { padding-top: 180px; }

@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; padding-top: 64px; }
  .contact-form { padding-top: 0; }
  .contact + .testimonials { padding-top: 100px; }
}

/* ---------- Book a call ---------- */

.book .contact-intro .section-title { margin-top: 28px; }
.book-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; max-width: 520px; }
.book-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.book-points li img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.book-points b { color: var(--text); font-weight: 600; }
.book .contact-intro .book-alt { margin-top: 32px; font-size: 14px; }
.book-form { padding-top: 60px; }

.field-select { position: relative; display: block; }
.field-select select {
  appearance: none;
  width: 100%;
  height: 43px;
  padding: 0 44px 0 18px;
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  border-radius: 100px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  letter-spacing: -0.005em;
  outline: 0;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-select select:has(option[value=""]:checked) { color: var(--muted); }
.field-select select option { background: var(--surface-2); color: var(--text); }
.field-select select:focus { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.field-select img { position: absolute; right: 22px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); pointer-events: none; }

.book-pick { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.book-pick legend { padding: 0; margin-bottom: 10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.book-pick legend small { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--muted); }
.book-options { display: flex; flex-wrap: wrap; gap: 8px; }
.book-options label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 16px;
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  border-radius: 100px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.book-options label:hover { color: var(--text); }
.book-options input { position: absolute; opacity: 0; pointer-events: none; }
.book-options label:has(input:checked) { background: var(--gold-tint); color: var(--gold); border-color: transparent; }
.book-options label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.25); }

@media (max-width: 960px) {
  .book-form { padding-top: 0; }
}

/* ---------- Home pricing tiers ---------- */

.home-pricing { padding: 0; }
.home-pricing.pricing-hero { padding-top: 0; }
.home-pricing.pricing-hero .section-title { margin-top: 0; }
.home-pricing-head { text-align: center; }
.home-pricing-head p { max-width: 600px; margin: 28px auto 0; color: var(--muted); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 405px));
  justify-content: center;
  gap: 36px;
  margin-top: 72px;
}
.tier {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, var(--surface), var(--bg));
  border: 0.5px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--inset-glow);
  transition: transform 0.2s, border-color 0.2s;
}
.tier:hover { transform: translateY(-3px); }
.tier.is-popular {
  border: 1px solid var(--gold);
  box-shadow: 0 0 100px 0 rgba(240, 184, 74, 0.2), inset 0 0 25px 0 rgba(240, 184, 74, 0.15);
}
.tier-top {
  padding: 32px 24px 28px;
  background: var(--surface);
  border-bottom: 0.5px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--inset-glow);
}
.tier-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tier h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -0.02em; }
.tier-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  border-radius: 100px;
  background: var(--gold-tint);
  border: 0.5px solid rgba(240, 184, 74, 0.5);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0;
  box-shadow: 0 0 20px 0 rgba(240, 184, 74, 0.3);
}
.tier-desc { margin-top: 14px; min-height: 40px; font-size: 14px; color: var(--muted); }
.tier hr { margin: 26px 0 0; border: 0; border-top: 1px solid var(--line); }
.tier-price { margin-top: 30px; font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.02em; }
.tier-price small { font-size: 28px; }
.tier-billed { margin-top: 12px; font-size: 14px; color: var(--muted); }
.tier-body { display: flex; flex-direction: column; flex: 1; padding: 30px 24px 24px; }
.tier-includes { font-size: 14px; color: var(--muted-dim); }
.tier-body ul { list-style: none; margin: 18px 0 36px; padding: 0; display: grid; gap: 14px; }
.tier-body li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.tier-body li img { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.tier-body .btn { margin-top: auto; }
.btn-dark {
  color: var(--text);
  background: radial-gradient(60% 100% at 50% 100%, rgba(240, 184, 74, 0.12), transparent), var(--surface-2);
  border: 0.5px solid var(--line);
  box-shadow: inset 0 1px 0 0 rgba(var(--fg), 0.08);
}
.btn-dark:hover { border-color: rgba(240, 184, 74, 0.5); }
.home-pricing-more { margin-top: 40px; text-align: center; color: var(--muted); }

@media (max-width: 960px) {
  .tier-grid { grid-template-columns: minmax(0, 460px); }
}

/* ---------- Walkthrough video ---------- */

.walkthrough { padding-bottom: 40px; }
.walk-box {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 18px 18px 18px 56px;
  border: 1px solid rgba(240, 184, 74, 0.45);
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(240, 184, 74, 0.08), transparent 60%),
    var(--bg);
  box-shadow: 0 0 120px 0 rgba(240, 184, 74, 0.18), inset 0 0 40px 0 rgba(240, 184, 74, 0.08);
}
.walk-text { position: relative; padding: 60px 0; }
.walk-hint {
  position: absolute;
  top: 6px;
  right: -20px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-family: "Caveat", cursive;
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
  transform: rotate(-8deg);
}
.walk-hint svg { width: 92px; height: 50px; transform: translateY(26px) scaleY(-1); }
.walk-text p { max-width: 440px; margin-top: 24px; color: var(--muted); }
.walk-text .btn { margin-top: 32px; }

.walk-media {
  position: relative;
  aspect-ratio: 720 / 520;
  overflow: hidden;
  border: 0.5px solid var(--line);
  border-radius: 16px;
  background: radial-gradient(90% 80% at 60% 40%, rgba(240, 184, 74, 0.12), transparent 70%), var(--surface);
  box-shadow: var(--inset-glow);
}
.walk-shot {
  position: absolute;
  left: 8%;
  right: -12%;
  top: 22%;
  bottom: -10%;
  border: 2px solid var(--gold);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 60px 0 rgba(240, 184, 74, 0.25);
}
.walk-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0.75; }
.walk-tags {
  position: absolute;
  z-index: 2;
  top: 7%;
  left: 12%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 360px;
  padding: 12px;
  background: rgba(var(--surface-rgb), 0.92);
  border: 0.5px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transform: rotate(-4deg);
}
.walk-tags .pill { height: 28px; padding: 0 14px; font-size: 14px; }
.walk-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  border-radius: 100px;
  background: var(--gold-tint);
  color: var(--muted);
  font-size: 13px;
}
.walk-score b { color: var(--gold); font-weight: 600; }
.walk-badge {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 7%;
  width: 46%;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.5));
}
.walk-play {
  position: absolute;
  z-index: 3;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 26px 0 22px;
  border-radius: 100px;
  background: rgba(var(--surface-rgb), 0.92);
  border: 1px solid rgba(240, 184, 74, 0.6);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  box-shadow: 0 0 40px 0 rgba(240, 184, 74, 0.35);
  backdrop-filter: blur(8px);
  transition: transform 0.2s, box-shadow 0.2s;
}
.walk-play img { width: 14px; height: 15px; transform: rotate(90deg); filter: brightness(0) invert(1); }
.walk-play:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 60px 0 rgba(240, 184, 74, 0.5); }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 12, 24, 0.85);
  backdrop-filter: blur(6px);
}
.video-modal[hidden] { display: none; }
.video-frame { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border: 1px solid var(--gold); border-radius: 12px; overflow: hidden; background: #000; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(var(--surface-rgb), 0.9); color: var(--text); font-size: 26px; line-height: 1;
}

@media (max-width: 960px) {
  .walk-box { grid-template-columns: 1fr; padding: 18px; gap: 8px; }
  .walk-text { padding: 56px 16px 24px; }
  .walk-hint { top: 4px; right: auto; left: 16px; }
}
@media (max-width: 640px) {
  .walk-tags { display: none; }
  .walk-shot { top: 8%; }
  .walk-play { font-size: 16px; height: 44px; }
}

/* ---------- Sign up ---------- */

.auth-page {
  min-height: 100vh;
  background: radial-gradient(70% 50% at 50% 0%, rgba(240, 184, 74, 0.12), transparent 70%), var(--bg);
}
.auth {
  width: min(440px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: 48px 0 40px;
  text-align: center;
}
.auth-logo { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 0.5px solid var(--line); box-shadow: 0 0 40px rgba(240, 184, 74, 0.3); }
.auth-logo img { width: 36px; height: 36px; }
.auth h1 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.auth-plan {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--gold-tint);
  color: var(--muted);
  font-size: 13px;
}
.auth-plan b { color: var(--gold); font-weight: 600; }
.auth-card {
  margin-top: 28px;
  padding: 40px 36px 32px;
  text-align: left;
  background: var(--surface);
  border: 0.5px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--inset-glow), 0 0 80px rgba(240, 184, 74, 0.12);
}
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-field { display: grid; gap: 8px; margin-bottom: 18px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.auth-field input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  outline: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-field input::placeholder { color: var(--muted); }
.auth-field input:focus { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.auth-field input.is-invalid { border-color: #ff685c; }
.auth-submit { width: 100%; height: 42px; margin-top: 4px; border-radius: 10px; }
.auth-submit:disabled { opacity: 0.6; cursor: wait; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: var(--muted); font-size: 13px; }
.auth-or::before,
.auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-google {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: border-color 0.2s, background 0.2s;
}
.auth-google:hover { border-color: rgba(240, 184, 74, 0.5); background: var(--surface-2); }
.auth-card .form-status { margin-top: 16px; text-align: center; }
.auth-switch { margin-top: 26px; text-align: center; font-size: 14px; color: var(--muted); }
.auth-switch a { text-decoration: none; }
.auth-legal { margin-top: 48px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.auth-legal a { text-decoration: underline; }
.auth-legal a:hover { color: var(--text); }

@media (max-width: 480px) {
  .auth-card { padding: 28px 20px 24px; }
  .auth-row { grid-template-columns: 1fr; gap: 0; }
}

#how-it-works { scroll-margin-top: 90px; }

/* ---------- Platform welcome offer ---------- */

.offer-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 12, 24, 0.6);
  backdrop-filter: blur(4px);
  animation: offer-fade 0.25s ease;
}
.offer-modal[hidden] { display: none; }
.offer-card {
  position: relative;
  width: min(672px, 100%);
  padding: 52px 40px 36px;
  background: radial-gradient(90% 60% at 50% 0%, rgba(240, 184, 74, 0.1), transparent 70%), var(--surface);
  border: 1px solid rgba(240, 184, 74, 0.45);
  border-radius: 18px;
  box-shadow: 0 0 100px 0 rgba(240, 184, 74, 0.2), var(--inset-glow), 0 30px 80px rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: offer-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.offer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}
.offer-close:hover { color: var(--text); background: var(--surface-2); }
.offer-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
.offer-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; text-align: left; }
.offer-list li { display: flex; gap: 14px; align-items: flex-start; }
.offer-list p { color: var(--muted); line-height: 1.6; letter-spacing: -0.005em; }
.offer-list b { color: var(--text); font-weight: 600; }
.offer-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23121b33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 0 12px rgba(240, 184, 74, 0.5);
}
.offer-cta { margin-top: 32px; height: 42px; padding: 0 26px; }
@keyframes offer-fade { from { opacity: 0; } }
@keyframes offer-pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } }

@media (max-width: 640px) {
  .offer-card { padding: 48px 22px 28px; }
  .offer-card h2 { font-size: 23px; }
}

/* ---------- Admin ---------- */

.admin { padding: 32px 0 80px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-user { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.admin-user .btn-outline { --btn-fill: var(--bg); }
.admin-message { margin-top: 80px; text-align: center; color: var(--muted); }
.admin-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 64px; }
.admin-count { color: var(--muted); }
.admin-table-wrap { margin-top: 28px; overflow-x: auto; background: var(--surface); border: 0.5px solid var(--line); border-radius: 12px; box-shadow: var(--inset-glow); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { padding: 14px 18px; text-align: left; font-weight: 500; color: var(--muted-dim); border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 14px 18px; border-bottom: 0.5px solid var(--line-soft); color: var(--muted); white-space: nowrap; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td:first-child { color: var(--text); }
.admin-table select {
  height: 30px; padding: 0 10px; border-radius: 100px;
  background: var(--surface-2); color: var(--text); border: 0.5px solid var(--line); font: inherit; font-size: 13px;
}

.nav-user {
  display: flex; align-items: center; gap: 9px; max-width: 200px; height: 42px; padding: 0 14px 0 5px;
  border-radius: 100px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; color: var(--text);
  white-space: nowrap; transition: background 0.2s;
}
.nav-user > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.nav-user:hover, .nav-user[aria-current="page"] { background: var(--surface-2); }
.nav-avatar, .profile-avatar {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(64% 64% at 50% 100%, #ffe0a0 0%, #f8cc75 50%, #f0b84a 100%);
  color: var(--on-gold); font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.profile-avatar { width: 72px; height: 72px; font-size: 26px; box-shadow: 0 0 40px rgba(240, 184, 74, 0.35); }
.profile { padding-top: 64px; }
.profile-h2 { margin-bottom: 20px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.profile .auth-card + .auth-card { margin-top: 20px; }
.profile input:disabled { opacity: 0.6; cursor: not-allowed; }
.form-status.ok { color: #00d85b; }
@media (max-width: 1240px) { .nav-user { max-width: 150px; } }

/* ---------- Social News: platform tiles + dynamic rows ---------- */

.ptile-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ptile {
  height: 108px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 0.5px solid var(--line-soft);
  border-radius: 14px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.ptile img { width: 30px; height: 30px; object-fit: contain; }
.ptile:hover { background: var(--surface-3); transform: translateY(-2px); }
.ptile[aria-pressed="true"] {
  background: var(--gold-tint);
  border-color: rgba(240, 184, 74, 0.6);
  color: var(--gold);
  box-shadow: 0 0 30px rgba(240, 184, 74, 0.2);
}
.ptile[aria-pressed="true"] img { filter: brightness(0) saturate(100%) invert(77%) sepia(53%) saturate(626%) hue-rotate(338deg) brightness(98%) contrast(92%); }

.news-list[aria-busy="true"] { opacity: 0.5; transition: opacity 0.2s; }
.news-list + .posts-empty { padding: 48px 0 0; }
@media (min-width: 961px) { .news-row { grid-template-columns: minmax(0, 1fr) 200px; } }
.news-row-icon {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(240, 184, 74, 0.16), transparent 70%), var(--surface-2);
  border: 0.5px solid var(--line);
}
.news-row-icon img { width: 34%; height: 34%; object-fit: contain; }
.news-source { display: inline-block; margin-top: 20px; font-size: 13px; color: var(--gold); }
.news-source:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .ptile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .news-row-icon { display: none; }
}
@media (max-width: 640px) {
  .ptile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ptile { font-size: 12px; }
}

/* ---------- Blog post ---------- */

.post { max-width: 820px; padding-top: 72px; }
.post-crumbs { font-size: 13px; color: var(--muted-dim); }
.post-crumbs a { color: var(--muted); }
.post-crumbs a:hover { color: var(--gold); }
.article-head { margin-top: 28px; }
.article-head .section-title { margin-top: 22px; }
.post-meta { margin-top: 18px; font-size: 14px; color: var(--muted); }
.post-cover { margin: 36px 0 0; border-radius: 14px; overflow: hidden; border: 0.5px solid var(--line); box-shadow: 0 0 80px rgba(240, 184, 74, 0.12); }
.post-cover img { width: 100%; height: auto; }
.post-body { margin-top: 44px; font-size: 18px; line-height: 1.7; letter-spacing: -0.005em; color: #d5dcea; font-weight: 400; }
.post-body > * + * { margin-top: 22px; }
.post-body h2 { margin-top: 52px; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.post-body h3 { margin-top: 36px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--text); }
.post-body strong { color: var(--text); font-weight: 600; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: 10px; }
.post-body li::marker { color: var(--gold); }
.post-body blockquote { margin-left: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); color: var(--text); font-style: italic; }
.post-body a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(240, 184, 74, 0.4); text-underline-offset: 3px; }
.post-body a:hover { text-decoration-color: var(--gold); }
.post-body .btn { text-decoration: none; }
.post-body .btn-gold { color: var(--on-gold); }
.post-cta {
  margin: 44px 0;
  padding: 30px 32px;
  border: 1px solid rgba(240, 184, 74, 0.5);
  border-radius: 16px;
  background: radial-gradient(100% 120% at 100% 0%, rgba(240, 184, 74, 0.12), transparent 60%), var(--surface);
  box-shadow: 0 0 60px rgba(240, 184, 74, 0.12), var(--inset-glow);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.post-body .post-cta > * + * { margin-top: 10px; }
.post-cta-kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.post-cta-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--text); }
.post-cta .btn { margin-top: 18px; }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.post-cta-end .btn-outline { --btn-fill: var(--surface); }
.post-sources { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px; }
.post-sources h2 { margin-top: 0; font-size: 18px; }
.post-sources ul { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 6px; }
.blog-card h2 a:hover { color: var(--gold); }
a.blog-img { display: block; }

@media (max-width: 640px) {
  .post { padding-top: 40px; }
  .post-body { font-size: 17px; }
  .post-body h2 { font-size: 25px; }
  .post-cta { padding: 24px 20px; }
}

.post-cover figcaption { padding: 10px 14px; font-size: 12px; color: var(--muted-dim); background: var(--surface); }
.post-cover figcaption a { color: var(--muted); text-decoration: underline; }
.post-embed { margin: 36px auto; max-width: 560px; display: grid; justify-items: center; }
.post-embed blockquote { margin: 0 !important; border: 0; padding: 0; font-style: normal; width: 100%; }
.post-embed figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.yt-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 0.5px solid var(--line); }
.yt-frame.is-vertical { aspect-ratio: 9 / 16; max-width: 340px; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-embed.post-shot { max-width: 100%; }
.post-shot img { border-radius: 10px; border: 0.5px solid var(--line); }
.auth-toggle { display: block; margin: 14px auto 0; font-size: 13px; }

/* ---------- Content Library: live data ---------- */

.f-date { display: grid; gap: 0; }
.f-date input.f-select { color-scheme: dark; font: inherit; color: var(--text); padding-right: 16px; }
.f-select-native { padding: 0; }
.f-select-native select {
  appearance: none; width: 100%; height: 43px; padding: 0 44px 0 16px; border: 0; background: none;
  color: var(--text); font: inherit; letter-spacing: -0.005em; cursor: pointer;
}
.f-select-native select option { background: var(--surface-2); }
.folder-pick { position: relative; gap: 12px; color: var(--muted); background: var(--surface-2); border: 0.5px solid var(--line-soft); cursor: pointer; }
.folder-pick select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.folder-pick.is-active { background: var(--gold-tint); color: var(--gold); border-color: transparent; }
.feed-note { margin: 20px 38px 0; padding: 12px 18px; border-radius: 10px; background: var(--gold-tint); color: var(--gold); font-size: 14px; }
.posts[aria-busy="true"] { opacity: 0.5; }
.feed .posts-empty { padding: 60px 38px; }

.lib-card { display: flex; flex-direction: column; min-width: 0; }
.lib-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; margin-top: 14px; overflow: hidden;
  border-radius: 10px; background: var(--surface-2); border: 0.5px solid var(--line); cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.lib-thumb:hover { border-color: rgba(240, 184, 74, 0.6); transform: translateY(-2px); }
.lib-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.lib-noimg { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 40%, rgba(240, 184, 74, 0.12), transparent 70%), var(--surface-2); }
.lib-platform { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(18, 27, 51, 0.85); }
.lib-platform img { width: 16px; height: 16px; object-fit: contain; }
.lib-outlier { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 100px; background: var(--gold); color: var(--on-gold); font-family: var(--font-display); font-weight: 700; font-size: 14px; box-shadow: 0 0 20px rgba(240, 184, 74, 0.5); }
.lib-format { position: absolute; bottom: 10px; left: 10px; padding: 3px 10px; border-radius: 100px; background: rgba(18, 27, 51, 0.85); font-size: 12px; color: var(--muted); }
.lib-meta { padding: 12px 2px 0; }
.lib-account { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.lib-account time { font-weight: 400; color: var(--muted); font-size: 12px; white-space: nowrap; }
.lib-stats { display: flex; gap: 14px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.lib-caption { margin-top: 8px; font-size: 13px; color: var(--muted-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.drawer { position: fixed; inset: 0; z-index: 150; background: rgba(8, 12, 24, 0.7); backdrop-filter: blur(4px); display: flex; justify-content: flex-end; }
.drawer-panel { position: relative; width: min(1040px, 100%); height: 100%; overflow-y: auto; background: var(--surface); border-left: 1px solid rgba(240, 184, 74, 0.35); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5); }
.drawer-close { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); font-size: 26px; line-height: 1; }
.drawer-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 40px; }
.dr-media { display: grid; justify-items: center; align-content: start; }
.dr-media blockquote { margin: 0 !important; width: 100%; max-width: 480px; }
.dr-account { font-weight: 600; }
.dr-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill-xs-solid { height: 26px; padding: 0 12px; font-size: 13px; }
.dr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 0; }
.dr-stats div { padding: 12px; border-radius: 10px; background: var(--surface-2); border: 0.5px solid var(--line-soft); }
.dr-stats dt { font-size: 12px; color: var(--muted); }
.dr-stats dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.dr-sec { margin-top: 24px; }
.dr-sec h3 { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.dr-sec p, .dr-sec li { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.dr-sec b { color: var(--text); font-weight: 600; }
.dr-sec blockquote { margin: 10px 0 0; padding-left: 14px; border-left: 3px solid var(--gold); color: var(--text); font-size: 17px; }
.dr-sec ul { padding-left: 18px; margin: 0; }
.dr-caption { white-space: pre-line; max-height: 220px; overflow-y: auto; }
.dr-pending { margin-top: 24px; padding: 14px 16px; border-radius: 10px; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.dr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.folder-menu {
  position: fixed; z-index: 160; width: 260px; padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid rgba(240, 184, 74, 0.4); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.folder-menu-title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.folder-menu ul { list-style: none; margin: 10px 0; padding: 0; max-height: 220px; overflow-y: auto; }
.folder-menu li button { width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--muted); font-size: 14px; }
.folder-menu li button:hover { background: var(--surface-2); color: var(--text); }
.folder-menu li button[aria-pressed="true"] { color: var(--gold); }
.folder-menu-empty { padding: 6px 2px; font-size: 13px; color: var(--muted-dim); }
.folder-menu form { display: flex; gap: 6px; }
.folder-menu input { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border-radius: 100px; border: 0.5px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; }
.folder-menu .pill { height: 32px; font-size: 13px; padding: 0 14px; }

@media (max-width: 960px) {
  .drawer-body { grid-template-columns: 1fr; padding: 56px 20px 32px; }
  .feed-note { margin-inline: var(--gutter); }
}

/* ---------- Date picker ---------- */

.dp-trigger { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.dp-trigger:hover { border-color: rgba(240, 184, 74, 0.4); }
.dp.is-open .dp-trigger { border-color: rgba(240, 184, 74, 0.7); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.dp.has-value .dp-trigger { color: var(--text); }
.dp-pop {
  position: fixed; z-index: 170; width: 300px; padding: 16px;
  background: radial-gradient(90% 50% at 50% 0%, rgba(240, 184, 74, 0.08), transparent 70%), var(--surface);
  border: 1px solid rgba(240, 184, 74, 0.4); border-radius: 16px;
  box-shadow: 0 0 60px rgba(240, 184, 74, 0.15), 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: offer-pop 0.18s ease;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; }
.dp-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.dp-title span { color: var(--gold); }
.dp-nav { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 20px; line-height: 1; transition: background 0.2s, color 0.2s; }
.dp-nav:hover { background: var(--gold-tint); color: var(--gold); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-week { margin-top: 14px; }
.dp-week span { text-align: center; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-dim); padding-bottom: 6px; }
.dp-grid { gap: 2px 0; }
.dp-day {
  height: 36px; font-size: 14px; color: var(--muted); border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.dp-day:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.dp-day:focus-visible { outline: 2px solid rgba(240, 184, 74, 0.7); outline-offset: -2px; }
.dp-day.is-out { color: var(--muted-dim); opacity: 0.6; }
.dp-day.is-today { color: var(--gold); font-weight: 600; }
.dp-day.is-range { background: var(--gold-tint); color: var(--text); border-radius: 0; }
.dp-day.is-edge { background: rgba(240, 184, 74, 0.35); color: var(--text); }
.dp-day.is-selected {
  color: var(--on-gold); font-weight: 700;
  background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%);
  box-shadow: 0 0 14px rgba(240, 184, 74, 0.45);
}
.dp-day:disabled { opacity: 0.25; cursor: default; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dp-link { font-size: 13px; color: var(--muted); text-decoration: underline; }
.dp-link:hover { color: var(--text); }
.dp-quick { display: flex; gap: 6px; }
.dp-chip { height: 26px; padding: 0 10px; border-radius: 100px; background: var(--surface-2); border: 0.5px solid var(--line-soft); font-size: 12px; color: var(--muted); }
.dp-chip:hover { background: var(--gold-tint); color: var(--gold); border-color: transparent; }

/* Filters show / hide */
.filters-head-actions { display: flex; align-items: center; gap: 14px; }
.filters-hide {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); border: 0.5px solid var(--line-soft); transition: background 0.2s, border-color 0.2s;
}
.filters-hide img { width: 11px; height: 9px; transform: scaleX(-1); }
.filters-hide:hover { background: var(--gold-tint); border-color: rgba(240, 184, 74, 0.5); }
.library { transition: grid-template-columns 0.3s ease; }
.library .filters { transition: padding 0.3s ease, opacity 0.2s ease; }
.library.filters-collapsed .filters { opacity: 0; pointer-events: none; }
.library.filters-collapsed .feed-bar .collapse { background: var(--gold-tint); color: var(--gold); border-color: rgba(240, 184, 74, 0.5); }
.filter-count {
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; display: inline-grid; place-items: center;
  border-radius: 100px; background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 700;
}
.filter-count[hidden] { display: none; }

/* ---------- Content Library v2: creator-first filters ---------- */

.fx { margin-top: 30px; }
.fx-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.fx-sub { margin: 18px 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.filters .f-row .seg-btn { height: 32px; padding: 0 14px; font-size: 14px; }

.like-mine { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 0.5px solid var(--line-soft); }
.like-mine-toggle { flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; }
.like-mine-toggle b { display: block; font-size: 15px; font-weight: 600; }
.like-mine-toggle small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.switch { position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: 100px; background: var(--surface-3); border: 0.5px solid var(--line); transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform 0.2s, background 0.2s; }
[aria-checked="true"] .switch { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(240, 184, 74, 0.45); }
[aria-checked="true"] .switch::after { transform: translateX(16px); background: var(--bg); }
.like-mine-edit { font-size: 13px; }

.icon-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.icon-row button { height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line-soft); transition: background 0.2s, border-color 0.2s; }
.icon-row button img { width: 22px; height: 22px; object-fit: contain; }
.icon-row button:hover { background: var(--surface-3); }
.icon-row button[aria-pressed="true"] { background: var(--gold-tint); border-color: rgba(240, 184, 74, 0.6); }

.fx-more { border-top: 1px solid var(--line); padding-top: 18px; }
.fx-more summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.fx-more summary::-webkit-details-marker { display: none; }
.fx-more summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--gold); margin-left: auto; }
.fx-more[open] summary::after { content: "–"; }
.fx-more summary .filter-count { margin: 0 10px 0 8px; }
.dp-wrap { margin-top: 12px; }

.need-order { display: inline-flex; padding: 4px; border-radius: 100px; background: var(--surface-2); border: 0.5px solid var(--line-soft); }
.need-order button { height: 30px; padding: 0 14px; border-radius: 100px; font-size: 13px; color: var(--muted); }
.need-order button[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); }
.moments { display: flex; gap: 10px; margin-top: 16px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.moments::-webkit-scrollbar { display: none; }
.moments button {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
  border-radius: 100px; background: var(--surface); border: 0.5px solid var(--line); font-weight: 500; font-size: 15px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.moments button span { font-size: 18px; }
.moments button:hover { transform: translateY(-1px); border-color: rgba(240, 184, 74, 0.4); }
.moments button[aria-pressed="true"] { background: var(--gold-tint); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 20px rgba(240, 184, 74, 0.25); }

/* Active filters bar */
.active-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 38px 0; padding: 10px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(100deg, rgba(240, 184, 74, 0.1), rgba(var(--fg), 0.025) 34%, rgba(var(--fg), 0.015)); border: 1px solid rgba(240, 184, 74, 0.22); box-shadow: inset 0 1px 0 rgba(var(--fg), 0.05), 0 18px 40px -28px rgba(0, 0, 0, 0.6); }
.active-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #ffd98c, #d99a2b); }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.ab-lead { display: inline-flex; align-items: center; gap: 10px; padding: 0 10px 0 6px; margin-right: 4px; border-right: 1px solid var(--line); }
.ab-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #f0b84a, #d99a2b); color: #1a1206; box-shadow: 0 6px 16px -6px rgba(240, 184, 74, 0.7); }
.ab-ic .lf-i { width: 17px; height: 17px; stroke-width: 2.4; }
.ab-tx { display: grid; line-height: 1.2; white-space: nowrap; }
.ab-tx b { font: 600 13.5px var(--font-display); color: var(--text); }
.ab-tx small { font-size: 11.5px; color: var(--muted-dim); }
.active-chip { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 6px 0 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); text-transform: none; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.active-chip:hover { border-color: rgba(240, 184, 74, 0.5); transform: translateY(-1px); }
.ac-ic, .ac-logo { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: rgba(240, 184, 74, 0.12); color: var(--gold); }
.ac-ic .lf-i { width: 16px; height: 16px; }
.ac-ic .lf-pfi { width: 16px; height: 16px; }
.ac-logo { background: #fff; }
.ac-logo img { width: 92%; height: 92%; object-fit: contain; }
.ac-logo b { font: 700 9.5px var(--font-body); color: #121b33; }
.ac-tx { display: grid; line-height: 1.15; text-align: left; white-space: nowrap; }
.ac-tx small { font: 700 9.5px var(--font-body); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-dim); }
.ac-tx b { font-size: 13px; font-weight: 600; }
.ac-x { width: 22px; height: 22px; margin-left: 2px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); transition: background 0.15s, color 0.15s; }
.ac-x svg { width: 12px; height: 12px; }
.active-chip:hover .ac-x { background: rgba(240, 184, 74, 0.2); color: var(--gold); }
.active-clear { padding: 0; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.active-clear:hover { color: var(--gold-mid); }
.active-actions { display: flex; gap: 8px; align-items: center; }
.active-actions .pill { height: 38px; font-size: 13px; font-weight: 600; padding: 0 16px; border-radius: 11px; border: 1px solid rgba(240, 184, 74, 0.45); background: transparent; color: var(--gold); }
.active-actions .pill:hover { background: var(--gold-tint); }
.saved-searches { height: 38px; padding: 0 12px; border-radius: 11px; background: var(--surface-2); border: 0.5px solid var(--line-soft); color: var(--muted); font: inherit; font-size: 13px; }

/* Clubs like mine modal */
.like-modal { justify-content: center; align-items: center; padding: 20px; }
.like-panel { width: min(480px, 100%); padding: 32px; border-radius: 18px; background: var(--surface); border: 1px solid rgba(240, 184, 74, 0.45); box-shadow: 0 0 80px rgba(240, 184, 74, 0.15), 0 30px 80px rgba(0, 0, 0, 0.5); }
.like-panel h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; }
.like-panel > p { margin: 10px 0 22px; color: var(--muted); font-size: 15px; }
.like-panel select { height: 42px; padding: 0 14px; border-radius: 10px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--text); font: inherit; text-transform: capitalize; }
.like-sizes { border: 0; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.like-sizes legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.like-sizes label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 0.5px solid var(--line-soft); cursor: pointer; font-size: 14px; }
.like-sizes label:has(input:checked) { border-color: var(--gold); background: var(--gold-tint); color: var(--gold); }
.like-sizes input { accent-color: var(--gold); }
.like-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.like-actions .btn-outline { --btn-fill: var(--surface); }

@media (max-width: 960px) {
  .active-bar { margin-inline: var(--gutter); }
}

/* Line icons */
.ico { width: 18px; height: 18px; flex-shrink: 0; }
.moments button .ico { width: 19px; height: 19px; color: var(--gold); opacity: 0.85; transition: opacity 0.2s; }
.moments button:hover .ico, .moments button[aria-pressed="true"] .ico { opacity: 1; }
.pill .ico { width: 15px; height: 15px; }
.lib-stats span { display: inline-flex; align-items: center; gap: 5px; }
.lib-stats .ico { width: 14px; height: 14px; opacity: 0.8; }
.folder-menu li button { display: flex; align-items: center; gap: 8px; }
.folder-menu li button .ico { width: 15px; height: 15px; }

/* Home: latest blog posts between the CTA and testimonials */
.home-blog { padding: 0 0 40px; }
.home-blog .blog-grid { margin-top: 40px; }

/* ---------- Content Library ← imported content ---------- */
[data-facets] .f-row { flex-wrap: wrap; }
[data-facets] .seg-btn { gap: 7px; }
[data-facets] .seg-btn img { width: 16px; height: 16px; }
.fv-count { font-size: 11px; color: var(--muted-dim); font-variant-numeric: tabular-nums; }
[aria-pressed="true"] > .fv-count { color: inherit; opacity: 0.75; }
.fv-list { max-height: 260px; overflow-y: auto; scrollbar-width: thin; padding-top: 6px !important; }
.fv-list li button { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fv-list .fv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-facets] button.is-zero { opacity: 0.38; }

.lib-format-pill { height: 30px; padding: 0 12px; font-size: 13px; }
.lib-thumb { background: #fff; }
.lib-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lib-tag {
  height: 24px; padding: 0 10px; border-radius: 100px; font-size: 12px; color: var(--muted);
  background: var(--surface-2); border: 0.5px solid var(--line-soft); transition: color 0.2s, border-color 0.2s;
}
.lib-tag:hover { color: var(--gold); border-color: rgba(240, 184, 74, 0.5); }
.dr-tags { display: grid; gap: 10px; margin: 18px 0 0; }
.dr-tag-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; }
.dr-tag-row dt { padding-top: 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dr-tag-row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dr-hint { margin-top: 10px; font-size: 12px; color: var(--muted-dim); }
/* Media-first cards */
/* Library grid: up to 3 columns with the filters open, up to 4 when they're hidden (fewer if a card would get under ~240px) */
.library .posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px, (100% - 2 * 22px) / 3)), 1fr)); max-width: none; align-items: start; gap: 22px; }
.library.filters-collapsed .posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(250px, (100% - 3 * 22px) / 4)), 1fr)); }
.lib-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  border-radius: 18px; background: var(--surface-2); border: 0.5px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s, border-color 0.35s;
}
.lib-media::before { /* loading shimmer behind the media */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 300% 100%;
  animation: lib-shimmer 1.6s linear infinite;
}
@keyframes lib-shimmer { to { background-position: -150% 0; } }
.lib-card:hover .lib-media { transform: translateY(-4px); border-color: rgba(240, 184, 74, 0.7); box-shadow: 0 0 0 1px rgba(240, 184, 74, 0.35), 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(240, 184, 74, 0.18); }
.lib-media .lib-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; background: transparent; }
/* Instagram embed page: header ≈ 54px, then the media (square-ish width × 4:5). Shift up and oversize so only the media shows. */
.lib-media .lib-frame.is-ig { left: -1px; width: calc(100% + 2px); top: -55px; height: calc(100% + 400px); }
/* Reels: Instagram letterboxes the 9:16 cover inside a 4:5 box. Zoom from the centre so it fills the card (like Instagram's own grid). */
.lib-zoom { position: absolute; inset: 0; overflow: hidden; }
.lib-media.is-reel .lib-zoom { inset: var(--inset) 0; overflow: visible; transform: scale(var(--zoom)); }
.lib-media::after { /* legibility gradient */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 15, 30, 0.55) 0%, transparent 22%, transparent 52%, rgba(10, 15, 30, 0.92) 100%);
}
.lib-top { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.lib-top > * { pointer-events: auto; }
.lib-badge {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 100px;
  background: rgba(18, 27, 51, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 500; color: #fff;
}
.lib-badge-pf { width: 28px; padding: 0; justify-content: center; }
.lib-badge-pf img { width: 15px; height: 15px; }
.lib-save { margin-left: auto; }
.lib-save .pill { height: 30px; padding: 0 12px; gap: 8px; font-size: 13px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lib-save .pill-dark { background: rgba(18, 27, 51, 0.7); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.lib-bottom { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 14px; pointer-events: none; }
.lib-bottom .lib-tags { margin: 0 0 10px; pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.lib-card:hover .lib-bottom .lib-tags, .lib-card:focus-within .lib-bottom .lib-tags { opacity: 1; transform: none; }
.lib-bottom .lib-tag { background: rgba(18, 27, 51, 0.75); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.lib-bottom .lib-tag:hover { color: var(--gold); }
.lib-who { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-when { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
@media (hover: none) { .lib-bottom .lib-tags { opacity: 1; transform: none; } }

/* Masonry: each card keeps its post's real shape */
.library .posts.masonry { display: flex; align-items: flex-start; gap: 22px; }
.mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.lib-media { aspect-ratio: 4 / 5; }
.lib-analysis {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; margin-top: 10px; padding: 0 14px;
  border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--muted);
  font-size: 13px; font-weight: 500; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.lib-analysis .ico, .lib-analysis svg { width: 16px; height: 16px; flex-shrink: 0; }
.lib-analysis span { flex: 1; text-align: left; }
.lib-analysis.is-ready { color: var(--gold); border-color: rgba(240, 184, 74, 0.35); background: linear-gradient(90deg, rgba(240, 184, 74, 0.12), rgba(240, 184, 74, 0.03)); }
.lib-analysis:hover { color: var(--text); border-color: rgba(240, 184, 74, 0.6); }

/* Analysis pop-up */
.an-modal { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 28px; background: rgba(6, 10, 22, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: an-fade 0.2s ease; }
.an-modal[hidden] { display: none; }
@keyframes an-fade { from { opacity: 0; } }
@keyframes an-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.an-panel {
  position: relative; width: min(1180px, 100%); max-height: calc(100vh - 56px); overflow: hidden; display: flex;
  border-radius: 24px; background: var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.35);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 80px rgba(240, 184, 74, 0.12); animation: an-rise 0.28s cubic-bezier(.2,.8,.2,1);
}
.an-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 0.5px solid var(--line); font-size: 24px; line-height: 1; color: var(--muted); }
.an-close:hover { color: var(--text); border-color: rgba(240, 184, 74, 0.6); }
.an-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); width: 100%; min-height: 0; }
.an-media { display: grid; justify-items: center; align-content: start; padding: 28px; overflow-y: auto; background: radial-gradient(70% 50% at 50% 0%, rgba(240, 184, 74, 0.08), transparent 70%), var(--bg); border-right: 0.5px solid var(--line); }
.an-media blockquote, .an-media iframe { margin: 0 !important; width: 100% !important; max-width: 460px !important; min-width: 0 !important; }
.an-info { overflow-y: auto; padding: 30px 32px 34px; }
.an-eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.an-head h2 { margin-top: 6px; padding-right: 40px; font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
.an-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.an-actions .ico, .an-actions svg { width: 15px; height: 15px; }
.an-summary { margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--text); }
.an-block { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); border: 0.5px solid var(--line-soft); }
.an-block h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.an-block h3 svg { width: 16px; height: 16px; }
.an-block p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.an-block b { color: var(--text); font-weight: 600; }
.an-hook-block { background: linear-gradient(135deg, rgba(240, 184, 74, 0.14), rgba(240, 184, 74, 0.02) 60%), var(--surface-2); border-color: rgba(240, 184, 74, 0.3); }
.an-hook { margin: 4px 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; color: var(--text); }
.an-hook::before { content: "“"; color: var(--gold); }
.an-hook::after { content: "”"; color: var(--gold); }
.an-chip { display: inline-flex; align-items: center; height: 26px; margin: 2px 6px 2px 0; padding: 0 11px; border-radius: 100px; background: var(--gold-tint); color: var(--gold); font-size: 12px; font-weight: 500; }
.an-template { position: relative; margin-top: 14px; padding: 12px 92px 12px 14px; border-radius: 12px; background: var(--bg); border: 0.5px dashed rgba(240, 184, 74, 0.45); }
.an-template > span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.an-template p { margin-top: 4px; color: var(--text); }
.an-copy { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 100px; background: var(--surface-3); font-size: 12px; color: var(--muted); }
.an-copy svg { width: 14px; height: 14px; }
.an-copy:hover { color: var(--gold); }
.an-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.an-facts div { padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.an-facts dt { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.an-facts dd { margin: 4px 0 0; font-size: 14px; color: var(--text); }
.an-timeline, .an-stoppers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.an-timeline li, .an-stoppers li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; position: relative; }
.an-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 30px; bottom: -12px; width: 1px; background: var(--line); }
.an-t { display: grid; place-items: center; height: 26px; border-radius: 100px; background: var(--bg); border: 0.5px solid rgba(240, 184, 74, 0.4); color: var(--gold); font-size: 12px; font-variant-numeric: tabular-nums; }
.an-timeline b, .an-stoppers b { display: block; font-size: 14px; }
.an-timeline q { display: block; margin-top: 4px; font-size: 13px; color: var(--gold-light); quotes: "“" "”"; }
.an-timeline p, .an-stoppers p { margin-top: 4px; font-size: 13px; }
.an-adapt { background: linear-gradient(135deg, rgba(0, 216, 91, 0.1), transparent 60%), var(--surface-2); border-color: rgba(0, 216, 91, 0.25); }
.an-adapt h3 { color: #4ee38a; }
.an-topics { margin-top: 14px; }
.an-empty { display: flex; gap: 14px; margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); border: 0.5px dashed rgba(240, 184, 74, 0.4); }
.an-empty svg { width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }
.an-empty p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.an-loading { height: 120px; margin-top: 22px; border-radius: 16px; background: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 300% 100%; animation: lib-shimmer 1.4s linear infinite; }
.an-caption { margin-top: 18px; color: var(--muted); font-size: 14px; }
.an-caption summary { cursor: pointer; font-weight: 600; color: var(--text); }
.an-caption p { margin-top: 8px; white-space: pre-line; line-height: 1.55; }
@media (max-width: 900px) {
  .an-modal { padding: 0; }
  .an-panel { max-height: 100vh; height: 100%; border-radius: 0; }
  .an-body { grid-template-columns: 1fr; overflow-y: auto; }
  .an-media, .an-info { overflow: visible; }
  .an-media { border-right: 0; border-bottom: 0.5px solid var(--line); }
}

/* Photos / carousels: click → details pop-up. Notches at the middle of both sides leave Instagram's carousel arrows clickable. */
.lib-hit {
  --nw: 46px; --nh: 30px;
  position: absolute; inset: 0; z-index: 2; cursor: pointer; background: transparent;
  clip-path: polygon(0 0, 100% 0, 100% calc(50% - var(--nh)), calc(100% - var(--nw)) calc(50% - var(--nh)), calc(100% - var(--nw)) calc(50% + var(--nh)), 100% calc(50% + var(--nh)), 100% 100%, 0 100%, 0 calc(50% + var(--nh)), var(--nw) calc(50% + var(--nh)), var(--nw) calc(50% - var(--nh)), 0 calc(50% - var(--nh)));
}
.lib-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---------- Save (bookmark +) and the "Save to board" picker ---------- */
.save-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border-radius: 100px;
  background: rgba(18, 27, 51, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 13px; font-weight: 500;
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.save-btn svg { width: 17px; height: 17px; }
.save-btn:hover { background: rgba(var(--surface-rgb), 0.9); border-color: rgba(240, 184, 74, 0.6); }
.save-btn:active { transform: scale(0.95); }
.save-btn.is-on { background: radial-gradient(64% 64% at 50% 100%, #ffe0a0 0%, #f8cc75 50%, #f0b84a 100%); color: var(--on-gold); border-color: transparent; box-shadow: 0 0 14px rgba(240, 184, 74, 0.45); }
.saved-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; background: var(--surface-2); border: 0.5px solid var(--line-soft); color: var(--text); }
.saved-link svg { width: 17px; height: 17px; color: var(--gold); }
.saved-link:hover { border-color: rgba(240, 184, 74, 0.6); }

.bp {
  position: fixed; z-index: 190; width: 320px; max-width: calc(100vw - 24px); padding: 14px;
  border-radius: 20px; background: var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 50px rgba(240, 184, 74, 0.12); animation: an-rise 0.18s ease;
}
.bp[hidden] { display: none; }
.bp-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.bp-head b { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.bp-x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); }
.bp-x:hover { background: var(--surface-2); color: var(--text); }
.bp-x svg { width: 16px; height: 16px; }
.bp-search { display: flex; align-items: center; gap: 8px; height: 38px; margin-bottom: 8px; padding: 0 12px; border-radius: 100px; background: var(--surface-2); color: var(--muted); }
.bp-search svg { width: 16px; height: 16px; }
.bp-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 14px; }
.bp-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.bp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px; border-radius: 14px; text-align: left; transition: background 0.15s; }
.bp-row:hover { background: var(--surface-2); }
.bp-tile {
  display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, hsl(var(--h, 40) 55% 42%), hsl(calc(var(--h, 40) + 40) 60% 28%));
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff;
}
.bp-tile-plus { background: var(--surface-2); border: 1px dashed rgba(240, 184, 74, 0.6); color: var(--gold); }
.bp-tile-plus svg { width: 20px; height: 20px; }
.bp-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-name small { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--muted); }
.bp-state { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 100px; background: var(--surface-3); font-size: 12px; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity 0.15s; }
.bp-row:hover .bp-state, .bp-row.is-on .bp-state { opacity: 1; }
.bp-row.is-on .bp-state { background: var(--gold); color: var(--on-gold); }
.bp-state svg { width: 14px; height: 14px; }
.bp-empty { padding: 12px 8px; font-size: 13px; color: var(--muted); }
.bp-create { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 6px; padding: 7px; border-radius: 14px; border-top: 0.5px solid var(--line-soft); font-size: 14px; font-weight: 600; }
.bp-create:hover { background: var(--surface-2); color: var(--gold); }
.bp-new { display: flex; gap: 8px; margin-top: 10px; }
.bp-new input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border-radius: 100px; background: var(--surface-2); border: 0.5px solid rgba(240, 184, 74, 0.5); color: var(--text); font: inherit; font-size: 14px; outline: 0; }
.bp-error { margin-top: 8px; font-size: 12px; color: #ff8a80; }

/* ---------- Saved boards page ---------- */
.sv { width: min(1400px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 56px 0 100px; }
.sv-loading { height: 280px; border-radius: 24px; background: linear-gradient(110deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: lib-shimmer 1.4s linear infinite; }
.sv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.sv-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.sv-eyebrow svg { width: 16px; height: 16px; }
.sv-head h1 { margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.03em; }
.sv-sub { margin-top: 6px; color: var(--muted); }
.sv-new { gap: 8px; }
.sv-new svg { width: 18px; height: 18px; }
.sv-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.sv-back:hover { color: var(--gold); }
.sv-back svg { width: 16px; height: 16px; }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-actions .pill { gap: 6px; }
.sv-actions svg { width: 15px; height: 15px; }
.sv-danger:hover { color: #ff8a80; border-color: rgba(255, 104, 92, 0.5); }
.sv-danger-solid { background: #e5484d; color: #fff; gap: 6px; }
.sv-confirm { font-size: 14px; color: var(--muted); }
.sv-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-rename input { height: 52px; min-width: min(420px, 100%); padding: 0 18px; border-radius: 14px; background: var(--surface-2); border: 0.5px solid rgba(240, 184, 74, 0.6); color: var(--text); font: inherit; font-size: 28px; outline: 0; }
.sv-empty { display: flex; gap: 16px; align-items: flex-start; margin-top: 30px; padding: 24px; border-radius: 20px; background: var(--surface); border: 0.5px dashed rgba(240, 184, 74, 0.4); max-width: 640px; }
.sv-empty > svg { width: 28px; height: 28px; color: var(--gold); flex-shrink: 0; }
.sv-empty p { margin-top: 6px; color: var(--muted); }
.sv-empty a { color: var(--gold); }
.sv-inline svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--gold); }

.bd-cover {
  position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; aspect-ratio: 4 / 3;
  border-radius: 22px; overflow: hidden; background: var(--surface-2); border: 0.5px solid var(--line);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s, border-color 0.35s;
}
.bd-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 60%, rgba(10, 15, 30, 0.35)); }
.bd-main { grid-row: 1 / 3; }
.bd-main, .bd-side { position: relative; overflow: hidden; background: var(--surface-3); }
.bd-fill { position: absolute; inset: 0; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); }
.mini { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mini iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.bd-cover.is-empty { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; }
.bd-cover.is-empty { background: linear-gradient(135deg, hsl(var(--h) 55% 38%), hsl(calc(var(--h) + 40) 60% 22%)); }
.bd-cover.is-empty span { font-family: var(--font-display); font-weight: 700; font-size: 64px; color: rgba(255, 255, 255, 0.9); }

.pins { display: flex; align-items: flex-start; gap: 20px; }
.pins .mcol { gap: 20px; }
.pin { transition: opacity 0.2s, transform 0.2s; }
.pin.is-leaving { opacity: 0; transform: scale(0.96); }
.pin .lib-save { margin-left: auto; }
.pin-actions { display: flex; gap: 8px; margin-top: 10px; }
.pin-details { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); font-size: 13px; color: var(--muted); }
.pin-details svg, .pin-remove svg { width: 16px; height: 16px; }
.pin-details:hover { color: var(--gold); border-color: rgba(240, 184, 74, 0.5); }
.pin-remove { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--muted); }
.pin-remove:hover { color: #ff8a80; border-color: rgba(255, 104, 92, 0.5); }

/* ---------- Member profile ---------- */
.profile-page { background: radial-gradient(60% 40% at 50% 0%, rgba(240, 184, 74, 0.1), transparent 70%), var(--bg); }
.nav-avatar.has-photo, .pf-avatar.has-photo { background-size: cover; background-position: center; color: transparent; }
.pf { width: min(1180px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 50px 0 140px; }
.pf-hero {
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); align-items: center; gap: 36px;
  padding: 34px 38px; border-radius: 28px; background: linear-gradient(135deg, rgba(240, 184, 74, 0.1), transparent 55%), var(--surface);
  border: 0.5px solid rgba(240, 184, 74, 0.3); box-shadow: var(--inset-glow), 0 0 80px rgba(240, 184, 74, 0.1);
}
.pf-id { display: flex; align-items: center; gap: 22px; min-width: 0; }
.pf-photo { position: relative; display: grid; justify-items: center; gap: 6px; flex-shrink: 0; }
.pf-avatar {
  position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(64% 64% at 50% 100%, #ffe0a0 0%, #f8cc75 50%, #f0b84a 100%); color: var(--on-gold);
  font-family: var(--font-display); font-weight: 700; font-size: 36px; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px rgba(240, 184, 74, 0.6), 0 0 40px rgba(240, 184, 74, 0.35);
}
.pf-avatar.has-photo [data-user-initials] { visibility: hidden; }
.pf-cam { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 15, 30, 0.55); color: #fff; opacity: 0; transition: opacity 0.2s; }
.pf-cam svg { width: 26px; height: 26px; }
.pf-avatar:hover .pf-cam, .pf-avatar:focus-visible .pf-cam { opacity: 1; }
.pf-photo-remove { font-size: 12px; color: var(--muted); }
.pf-photo-remove:hover { color: #ff8a80; }
.pf-photo-status { font-size: 12px; color: var(--gold); max-width: 160px; text-align: center; }
.pf-photo-status:empty { display: none; }
.pf-eyebrow { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.pf-id h1 { margin-top: 4px; font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; }
.pf-org { margin-top: 6px; color: var(--muted); }
.pf-meter { position: relative; width: 120px; height: 120px; }
.pf-meter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pf-ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.pf-ring { fill: none; stroke: var(--gold); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(240, 184, 74, 0.5)); }
.pf-meter-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pf-meter-text b { font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.pf-meter-text span { font-size: 12px; color: var(--muted); }
.pf-why b { font-family: var(--font-display); font-size: 18px; }
.pf-why p { margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.pf-why .pf-next { display: flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 500; }
.pf-next svg { width: 16px; height: 16px; }

.pf-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 34px; margin-top: 34px; align-items: start; }
.pf-nav { position: sticky; top: 110px; display: grid; gap: 4px; }
.pf-nav a { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px; color: var(--muted); font-size: 14px; transition: background 0.2s, color 0.2s; }
.pf-nav a svg { width: 17px; height: 17px; }
.pf-nav a:hover { background: var(--surface); color: var(--text); }
.pf-nav a.is-active { background: var(--gold-tint); color: var(--gold); }
.pf-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }   /* cards never wider than the column (phones) */
.pf-card { scroll-margin-top: 110px; padding: 28px 30px; border-radius: 22px; background: var(--surface); border: 0.5px solid var(--line); box-shadow: var(--inset-glow); }
.pf-card-gold { border-color: rgba(240, 184, 74, 0.4); background: linear-gradient(160deg, rgba(240, 184, 74, 0.09), transparent 45%), var(--surface); }
.pf-card header { margin-bottom: 22px; }
.pf-card h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.pf-card h2 svg { width: 20px; height: 20px; color: var(--gold); }
.pf-card header p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.pf-field { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pf-wide { grid-column: 1 / -1; }
.pf-field input, .pf-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line);
  color: var(--text); font: inherit; font-weight: 500; font-size: 15px; outline: 0; transition: border-color 0.2s, box-shadow 0.2s; resize: vertical;
}
.pf-field input:focus, .pf-field textarea:focus { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.pf-field input:disabled { opacity: 0.6; }
.pf-card > .pf-field { margin-top: 18px; }
.pf-q { margin-top: 20px; }
.pf-q > span { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pf-q > span small { font-weight: 400; color: var(--muted-dim); margin-left: 4px; }
.pf-q[hidden] { display: none; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 100px;
  background: var(--surface-2); border: 0.5px solid var(--line); color: var(--muted); font-size: 14px; transition: all 0.18s;
}
.pf-chip img { width: 15px; height: 15px; }
.pf-chip:hover { color: var(--text); border-color: rgba(240, 184, 74, 0.45); }
.pf-chip[aria-pressed="true"] { background: var(--gold-tint); border-color: rgba(240, 184, 74, 0.7); color: var(--gold); }
.pf-muted { font-size: 13px; color: var(--muted); }
.pf-picked { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pf-pick {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 5px; border-radius: 100px;
  background: var(--surface-2); border: 0.5px solid rgba(240, 184, 74, 0.45); font-size: 14px; font-weight: 500;
}
.pf-pick small { padding: 2px 7px; border-radius: 100px; background: var(--surface-3); font-size: 11px; color: var(--muted); }
.pf-pick button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); }
.pf-pick button:hover { background: var(--surface-3); color: #ff8a80; }
.pf-pick button svg { width: 14px; height: 14px; }
.pf-pick-av { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h) 55% 45%), hsl(calc(var(--h) + 40) 60% 28%)); color: #fff; font-size: 12px; font-weight: 700; }
.pf-slot { width: 42px; height: 42px; border-radius: 50%; border: 1.5px dashed var(--line); }
.pf-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 14px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--muted); }
.pf-search:focus-within { border-color: rgba(240, 184, 74, 0.6); }
.pf-search svg { width: 17px; height: 17px; }
.pf-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 15px; }
.pf-results { list-style: none; margin: 8px 0 0; padding: 6px; border-radius: 14px; background: var(--surface-2); border: 0.5px solid var(--line); max-height: 290px; overflow-y: auto; }
.pf-results button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 10px; text-align: left; font-size: 14px; }
.pf-results button:hover { background: var(--surface-3); }
.pf-results button > svg { width: 18px; height: 18px; color: var(--gold); margin: 0 7px; }
.pf-results small { margin-left: auto; font-size: 12px; color: var(--muted); }
.pf-results .pf-muted { padding: 8px 10px; }
.pf-switch { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.pf-switch input { position: absolute; opacity: 0; }
.pf-switch .switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 100px; background: var(--surface-3); transition: background 0.2s; }
.pf-switch .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.pf-switch input:checked + .switch { background: var(--gold); }
.pf-switch input:checked + .switch::after { transform: translateX(20px); }
.pf-switch input:focus-visible + .switch { outline: 2px solid var(--gold); outline-offset: 2px; }
.pf-switch small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.pf-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.pf-savebar {
  position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 22px; border-radius: 100px; background: rgba(var(--surface-rgb), 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 0.5px solid rgba(240, 184, 74, 0.45); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(240, 184, 74, 0.15); animation: an-rise 0.25s ease;
}
.pf-savebar[hidden] { display: none; }
.pf-savebar p { font-size: 14px; color: var(--muted); margin-right: 8px; white-space: nowrap; }
.pf-savebar.is-error p { color: #ff8a80; }
.pf-savebar.is-saved p { color: #00d85b; }
@media (max-width: 1000px) {
  .pf-hero { grid-template-columns: 1fr; gap: 22px; }
  .pf-meter { position: absolute; top: 24px; right: 24px; width: 84px; height: 84px; }
  .pf-hero { position: relative; }
  .pf-meter-text b { font-size: 20px; }
  .pf-layout { grid-template-columns: minmax(0, 1fr); }   /* the sections bar scrolls instead of widening the page */
  .pf-nav { position: static; display: flex; overflow-x: auto; gap: 6px; }
  .pf-nav a { flex-shrink: 0; }
}
@media (max-width: 600px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-card { padding: 22px 18px; }
  .pf-savebar { left: 12px; right: 12px; transform: none; border-radius: 18px; }
  .pf-savebar p { white-space: normal; }
}
.need-order button svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.lib-badge-fav { gap: 5px; background: rgba(240, 184, 74, 0.9); color: var(--on-gold); border-color: transparent; font-weight: 600; }
.lib-badge-fav svg { width: 13px; height: 13px; fill: currentColor; }
.pf-avatar.is-saving::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--gold); animation: pf-spin 0.8s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pf-photo-status.ok { color: #00d85b; }
.pf-photo-status.err { color: #ff8a80; }

/* ---------- Home dock (newsletter · LinkedIn · top · library) ---------- */
.dock {
  position: fixed; left: 50%; bottom: 22px; z-index: 140; display: flex; align-items: center; gap: 8px; padding: 7px;
  border-radius: 100px; background: rgba(var(--surface-rgb), 0.82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 0.5px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(240, 184, 74, 0.12);
  transform: translate(-50%, 140%); opacity: 0; transition: transform 0.55s cubic-bezier(.2,1.2,.3,1), opacity 0.35s;
}
.dock.is-in { transform: translate(-50%, 0); opacity: 1; }
.dock svg { width: 20px; height: 20px; }
.dock-news {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 100px;
  background: radial-gradient(64% 64% at 50% 100%, #ffe0a0 0%, #f8cc75 50%, #f0b84a 100%); color: var(--on-gold);
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  box-shadow: 0 0 18px rgba(240, 184, 74, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 0.2s, box-shadow 0.2s;
}
.dock-news:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(240, 184, 74, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.dock-news svg:last-child { transition: transform 0.2s; }
.dock-news:hover svg:last-child { transform: translate(2px, -2px); }
.dock-sep { width: 1px; height: 28px; margin: 0 4px; background: rgba(255, 255, 255, 0.16); }
.dock-btn { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; transition: background 0.2s, color 0.2s; }
.dock-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--gold); }
.dock-btn > svg:not(.dock-ring) { width: 19px; height: 19px; }
.dock .dock-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.dock-top:hover .dock-ring-bg { stroke: rgba(240, 184, 74, 0.25); }
.dock-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 2; }
.dock-ring-fg { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
.dock-app { background: rgba(240, 184, 74, 0.14); color: var(--gold); }
.dock-app:hover { background: rgba(240, 184, 74, 0.26); }
@media (max-width: 480px) {
  .dock { bottom: 14px; gap: 4px; padding: 5px; }
  .dock-news { height: 44px; padding: 0 16px; font-size: 15px; }
  .dock-btn { width: 44px; height: 44px; }
  .dock-sep { margin: 0 2px; }
}

/* Newsletter pop-up */
.nl-modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 24px; background: rgba(6, 10, 22, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: an-fade 0.2s ease; }
.nl-modal[hidden] { display: none; }
.nl-panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); width: min(980px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  border-radius: 28px; background: var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.45);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 100px rgba(240, 184, 74, 0.18); animation: an-rise 0.32s cubic-bezier(.2,.8,.2,1);
}
.nl-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--muted); }
.nl-close svg { width: 18px; height: 18px; }
.nl-close:hover { color: var(--text); border-color: rgba(240, 184, 74, 0.6); }
.nl-visual {
  position: relative; display: grid; place-items: center; min-height: 420px; padding: 40px 30px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 40%, rgba(240, 184, 74, 0.32), transparent 70%), linear-gradient(160deg, #1d2845, #0e1529);
}
.nl-kit {
  position: relative; display: grid; gap: 10px; width: 230px; padding: 26px 22px 22px; border-radius: 18px; transform: rotate(-4deg);
  background: linear-gradient(160deg, #213050, #121b33); border: 0.5px solid rgba(240, 184, 74, 0.5);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(240, 184, 74, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: nl-float 5s ease-in-out infinite;
}
@keyframes nl-float { 50% { transform: rotate(-2deg) translateY(-8px); } }
.nl-kit img { width: 38px; height: 36px; }
.nl-kit b { font-family: var(--font-display); font-size: 26px; line-height: 1.05; letter-spacing: -0.03em; }
.nl-kit-tag { position: absolute; top: -12px; right: 16px; padding: 5px 11px; border-radius: 100px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.nl-kit-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.nl-kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.nl-kit-grid i { aspect-ratio: 4 / 5; border-radius: 6px; background: linear-gradient(160deg, rgba(240, 184, 74, 0.35), rgba(240, 184, 74, 0.06)); }
.nl-kit-grid i:nth-child(2n) { background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)); }
.nl-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 100px;
  background: rgba(18, 27, 51, 0.85); backdrop-filter: blur(8px); border: 0.5px solid rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.nl-chip svg { width: 15px; height: 15px; color: var(--gold); }
.nl-chip-1 { top: 15%; left: 8%; animation: nl-float 6s ease-in-out infinite; }
.nl-chip-2 { bottom: 13%; right: 7%; animation: nl-float 7s ease-in-out infinite reverse; }
.nl-body { padding: 44px 44px 36px; }
.nl-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 100px; background: var(--gold-tint); color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.nl-eyebrow svg { width: 14px; height: 14px; }
.nl-body h2 { margin-top: 16px; padding-right: 30px; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
.nl-lead { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.nl-lead b { color: var(--text); }
.nl-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.nl-list li { display: flex; gap: 10px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.nl-list li b { color: var(--text); font-weight: 600; }
.nl-list svg { flex-shrink: 0; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--gold); color: var(--on-gold); stroke-width: 3; }
.nl-form { margin-top: 22px; }
.nl-fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.nl-fields input { height: 50px; padding: 0 16px; border-radius: 14px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--text); font: inherit; font-size: 15px; outline: 0; transition: border-color 0.2s, box-shadow 0.2s; }
.nl-fields input:focus { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.nl-consent { display: flex; gap: 10px; margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.nl-consent input { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--gold); }
.nl-cta { width: 100%; height: 54px; margin-top: 14px; gap: 10px; font-size: 17px; }
.nl-cta svg { width: 18px; height: 18px; }
.nl-error { margin-top: 10px; font-size: 13px; color: #ff8a80; }
.nl-trust { margin-top: 12px; text-align: center; font-size: 12px; color: var(--muted-dim); }
.nl-done { display: grid; justify-items: start; gap: 14px; padding-top: 30px; }
.nl-done-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(64% 64% at 50% 100%, #ffe0a0, #f0b84a); color: var(--on-gold); box-shadow: 0 0 40px rgba(240, 184, 74, 0.5); }
.nl-done-icon svg { width: 30px; height: 30px; stroke-width: 3; }
.nl-done h2 { margin-top: 4px; }
.nl-done p { color: var(--muted); line-height: 1.6; }
.nl-done b { color: var(--text); }
.nl-more { color: var(--gold); font-weight: 600; font-size: 14px; }
@media (max-width: 820px) {
  .nl-panel { grid-template-columns: 1fr; }
  .nl-visual { min-height: 0; padding: 34px 20px 30px; }
  .nl-chip { display: none; }
  .nl-kit { width: 200px; }
  .nl-body { padding: 28px 22px 24px; }
  .nl-fields { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .nl-modal { padding: 0; align-items: end; } .nl-panel { border-radius: 24px 24px 0 0; max-height: 92vh; } }
/* Pop-up visual: phones collage */
.nl-visual { background: #0e1529; }
.nl-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; transform: scale(1.04); }
.nl-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 21, 41, 0.15) 0%, rgba(14, 21, 41, 0.05) 45%, rgba(14, 21, 41, 0.85) 100%), linear-gradient(90deg, transparent 70%, rgba(23, 33, 59, 0.9) 100%); }
.nl-visual > :not(.nl-photo) { z-index: 1; }
.nl-badge {
  position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 2px; padding: 14px 16px 14px 74px; border-radius: 16px;
  background: rgba(18, 27, 51, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0.5px solid rgba(240, 184, 74, 0.5);
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.nl-badge span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: radial-gradient(64% 64% at 50% 100%, #ffe0a0, #f0b84a); color: var(--on-gold); font-size: 11px; letter-spacing: 0.06em; }
.nl-badge small { font-family: var(--font-body, inherit); font-weight: 400; font-size: 12px; color: var(--muted); }
.nl-chip-2 { bottom: auto; top: 30%; right: 7%; }
@media (max-width: 820px) {
  .nl-visual { min-height: 210px; }
  .nl-visual::after { background: linear-gradient(180deg, transparent 40%, rgba(23, 33, 59, 0.95) 100%); }
  .nl-badge { left: 16px; right: 16px; bottom: 14px; }
}
@media (max-width: 820px) { .nl-panel { grid-template-columns: minmax(0, 1fr); width: 100%; } .nl-fields input { min-width: 0; } }
.news-row.is-target { border-radius: 16px; box-shadow: 0 0 0 1px rgba(240, 184, 74, 0.7), 0 0 40px rgba(240, 184, 74, 0.2); transition: box-shadow 0.6s; }
.news-row { scroll-margin-top: 120px; }

/* ---------- Org: weekly content planner ---------- */
.org-page { background: radial-gradient(60% 35% at 50% 0%, rgba(240, 184, 74, 0.08), transparent 70%), var(--bg); }
.org { width: min(1500px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 46px 0 90px; }
.org-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.org-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.org-eyebrow svg { width: 16px; height: 16px; }
.org-head h1 { margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; }
.org-sub { margin-top: 6px; color: var(--muted); }
.org-week { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 100px; background: var(--surface); border: 0.5px solid var(--line); }
.org-nav-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); }
.org-nav-btn:hover { background: var(--surface-2); color: var(--gold); }
.org-nav-btn svg { width: 18px; height: 18px; }
.org-week-label { display: grid; text-align: center; min-width: 170px; }
.org-week-label b { font-family: var(--font-display); font-size: 16px; }
.org-week-label span { font-size: 12px; color: var(--muted); }

.org-bar { display: grid; grid-template-columns: minmax(260px, 1.2fr) auto auto; align-items: center; gap: 22px; margin-top: 28px; padding: 16px 20px; border-radius: 18px; background: var(--surface); border: 0.5px solid var(--line); }
.org-progress { cursor: pointer; }
.org-progress-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.org-progress-top b { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; color: var(--gold); }
.org-progress-top span { color: var(--muted); }
.org-progress-track { height: 8px; margin-top: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.org-progress-track i { display: block; height: 100%; width: 0; border-radius: 8px; transition: width 0.4s ease, background 0.4s; }
.org-progress-track i.is-low { background: #ff685c; } .org-progress-track i.is-mid { background: #f8cc75; } .org-progress-track i.is-good { background: var(--gold); } .org-progress-track i.is-done { background: #00d85b; }
.org-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.org-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.org-dot i { width: 8px; height: 8px; border-radius: 3px; background: var(--s); }
.org-dot b { padding: 1px 7px; border-radius: 100px; background: var(--surface-2); font-size: 11px; color: var(--text); }
.org-actions { display: flex; gap: 8px; }
.org-actions .pill { gap: 7px; height: 38px; }
.org-actions svg { width: 15px; height: 15px; }
.org-error { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 104, 92, 0.12); border: 0.5px solid rgba(255, 104, 92, 0.4); color: #ff8a80; font-size: 14px; }

/* status colours */
.org-s-todo { --s: #8b98ae; } .org-s-in_progress { --s: #f8cc75; } .org-s-done { --s: #00d85b; } .org-s-not_done { --s: #ff685c; }

.org-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; margin-top: 18px; align-items: start; }
.org-layout.insp-hidden { grid-template-columns: minmax(0, 1fr); }
.org-layout.insp-hidden .org-insp { display: none; }
.org-grid-wrap { overflow: auto; max-height: calc(100vh - 150px); border-radius: 18px; border: 0.5px solid var(--line); background: var(--surface); scrollbar-width: thin; }
.org-grid { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.org-grid th { position: sticky; top: 0; z-index: 3; padding: 12px 6px; background: var(--surface-2); border-bottom: 0.5px solid var(--line); font-weight: 500; }
.org-grid th span { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.org-grid th b { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 18px; }
.org-grid th.is-today b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--on-gold); }
.org-grid .org-time-h { width: 64px; left: 0; z-index: 4; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dim); }
.org-time { position: sticky; left: 0; z-index: 2; width: 64px; background: var(--surface-2); border-right: 0.5px solid var(--line-soft); font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; vertical-align: top; padding-top: 10px; }
.org-cell { position: relative; height: 84px; padding: 4px; vertical-align: top; border-right: 0.5px solid var(--line-soft); border-bottom: 0.5px solid var(--line-soft); transition: background 0.15s; }
.org-cell:hover { background: rgba(var(--fg), 0.02); }
.org-cell.is-over { background: rgba(240, 184, 74, 0.1); box-shadow: inset 0 0 0 1.5px rgba(240, 184, 74, 0.7); }
.org-cell.has-ghost { background: rgba(255, 104, 92, 0.035); }
.org-entry {
  position: relative; margin-bottom: 4px; padding: 7px 8px 7px 10px; border-radius: 10px; cursor: grab;
  background: var(--surface-2); border: 0.5px solid var(--line); border-left: 3px solid var(--s); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.org-entry:hover { border-color: rgba(240, 184, 74, 0.45); border-left-color: var(--s); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transform: translateY(-1px); }
.org-entry.is-dragging { opacity: 0.4; }
.org-entry-title { padding-right: 30px; font-size: 12px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.org-entry.org-s-done .org-entry-title { color: #7fe3a8; } .org-entry.org-s-not_done .org-entry-title { color: #ff9c94; text-decoration: line-through; }
.org-untitled { color: var(--muted-dim); font-weight: 400; }
.org-entry-meta { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.org-type { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 100px; background: var(--surface-3); font-size: 10px; font-weight: 600; color: var(--muted); }
.org-type svg { width: 11px; height: 11px; }
.org-flag { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); color: var(--muted); }
.org-flag svg { width: 10px; height: 10px; }
.org-flag-gold { background: var(--gold-tint); color: var(--gold); }
.org-entry-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.org-entry:hover .org-entry-tools { opacity: 1; }
.org-entry-tools button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--surface-3); color: var(--muted); }
.org-entry-tools button:hover { color: var(--gold); }
.org-entry-tools [data-del]:hover { color: #ff8a80; }
.org-entry-tools svg { width: 11px; height: 11px; }
.org-ghost { display: grid; gap: 1px; width: 100%; margin-bottom: 4px; padding: 6px 8px; border-radius: 10px; text-align: left; border: 1px dashed rgba(255, 104, 92, 0.6); background: rgba(255, 104, 92, 0.06); transition: background 0.15s; }
.org-ghost:hover { background: rgba(255, 104, 92, 0.14); }
.org-ghost b { font-size: 11px; font-weight: 700; color: #ff9c94; line-height: 1.25; }
.org-ghost span { font-size: 10px; color: #ff8a80; opacity: 0.85; }
.org-add { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--gold-tint); color: var(--gold); opacity: 0; transition: opacity 0.15s; }
.org-cell:hover .org-add, .org-add:focus-visible { opacity: 1; }
.org-add svg { width: 14px; height: 14px; }

.org-insp { position: sticky; top: 100px; max-height: calc(100vh - 150px); display: flex; flex-direction: column; border-radius: 18px; background: var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.3); overflow: hidden; }
.org-insp-head { padding: 16px 18px 12px; border-bottom: 0.5px solid var(--line-soft); }
.org-insp-head b { display: block; font-family: var(--font-display); font-size: 16px; }
.org-insp-head span { font-size: 12px; color: var(--muted); }
.org-insp-list { overflow-y: auto; padding: 10px; display: grid; gap: 8px; scrollbar-width: thin; }
.org-insp-item { display: flex; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); cursor: grab; transition: border-color 0.15s, transform 0.15s; }
.org-insp-item:hover { border-color: rgba(240, 184, 74, 0.6); transform: translateX(-2px); }
.org-insp-grip { color: var(--muted-dim); padding-top: 2px; }
.org-insp-grip svg { width: 14px; height: 14px; }
.org-insp-item b { display: block; font-size: 13px; }
.org-insp-item span { font-size: 11px; color: var(--gold); }
.org-insp-item p { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.org-empty { padding: 10px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.org-empty a { color: var(--gold); }

/* modals */
.org-modal { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 20px; background: rgba(6, 10, 22, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: an-fade 0.18s ease; }
.org-modal[hidden] { display: none; }
.org-panel { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 22px; background: var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.4); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55); animation: an-rise 0.25s cubic-bezier(.2,.8,.2,1); }
.org-panel-wide { width: min(720px, 100%); }
.org-m-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; border-bottom: 0.5px solid var(--line-soft); }
.org-m-head > div { flex: 1; min-width: 0; }
.org-m-head p { margin-top: 3px; font-size: 12px; color: var(--muted); }
.org-m-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--gold-tint); color: var(--gold); }
.org-m-icon svg { width: 20px; height: 20px; }
.org-m-title { width: 100%; background: none; border: 0; outline: 0; color: var(--text); font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.org-m-title::placeholder { color: var(--muted-dim); }
.org-m-h { margin: 0 !important; font-family: var(--font-display); font-size: 19px !important; font-weight: 600; color: var(--text) !important; }
.org-m-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); }
.org-m-x:hover { background: var(--surface-2); color: var(--text); }
.org-m-x svg { width: 18px; height: 18px; }
.org-m-body { padding: 6px 20px 20px; }
.org-m-label { display: flex; justify-content: space-between; margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.org-m-label span { font-weight: 400; letter-spacing: 0; color: var(--muted-dim); }
.org-m-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.org-m-status button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); transition: all 0.15s; }
.org-m-status button i { width: 8px; height: 8px; border-radius: 3px; background: var(--s); }
.org-m-status button[aria-pressed="true"] { border-color: var(--s); color: var(--text); background: color-mix(in srgb, var(--s) 14%, var(--surface-2)); }
.org-m-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.org-m-types button { display: grid; justify-items: center; gap: 4px; padding: 9px 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--muted); transition: all 0.15s; }
.org-m-types svg { width: 17px; height: 17px; }
.org-m-types button:hover { color: var(--text); }
.org-m-types button[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-tint); color: var(--gold); }
.org-m-copy { width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; outline: 0; }
.org-m-copy:focus { border-color: rgba(240, 184, 74, 0.6); }
.org-m-insp { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--gold-tint); border: 0.5px solid rgba(240, 184, 74, 0.4); }
.org-m-insp > svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.org-m-insp > div { flex: 1; min-width: 0; }
.org-m-insp b { display: block; font-size: 14px; }
.org-m-insp span { font-size: 12px; color: var(--muted); }
.org-m-insp .pill { gap: 6px; height: 32px; }
.org-m-insp .pill svg { width: 13px; height: 13px; }
.org-m-unlink { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); }
.org-m-unlink:hover { color: #ff8a80; }
.org-m-unlink svg { width: 14px; height: 14px; }
.org-m-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 18px; border-top: 0.5px solid var(--line-soft); }
.org-m-del { gap: 6px; background: transparent; border: 1px solid rgba(255, 104, 92, 0.45); color: #ff8a80; }
.org-m-del svg { width: 14px; height: 14px; }
.org-base-form { display: grid; grid-template-columns: 130px 92px 120px minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; }
.org-base-form select, .org-base-form input { height: 42px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 14px; outline: 0; min-width: 0; }
.org-base-form .btn { height: 42px; gap: 6px; padding: 0 16px; }
.org-base-form .btn svg { width: 16px; height: 16px; }
.org-base-list { margin-top: 18px; display: grid; gap: 14px; }
.org-base-day p { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.org-base-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 0.5px solid var(--line); margin-bottom: 6px; }
.org-base-item b { flex: 1; font-size: 14px; font-weight: 600; }
.org-base-time { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.org-base-item button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); }
.org-base-item button:hover { color: #ff8a80; background: var(--surface-3); }
.org-base-item button svg { width: 14px; height: 14px; }

.org-days-mobile { display: none; }
@media (max-width: 1100px) {
  .org-bar { grid-template-columns: minmax(0, 1fr); } .org-bar > * { min-width: 0; } .org-actions { flex-wrap: wrap; }
  .org-layout { grid-template-columns: minmax(0, 1fr); }
  .org-insp { position: static; max-height: 360px; }
}
@media (max-width: 760px) {
  .org-days-mobile { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 14px; }
  .org-days-mobile button { display: grid; justify-items: center; padding: 8px 0; border-radius: 12px; background: var(--surface); border: 0.5px solid var(--line); font-size: 11px; color: var(--muted); }
  .org-days-mobile button b { font-family: var(--font-display); font-size: 16px; color: var(--text); }
  .org-days-mobile button.has { box-shadow: inset 0 -3px 0 var(--gold); }
  .org-days-mobile button.is-active { background: var(--gold-tint); border-color: var(--gold); color: var(--gold); }
  .org-grid { min-width: 0; }
  .org-grid .m-hide { display: none; }
  .org-grid-wrap { max-height: none; }
  .org-add { opacity: 1; }
  .org-entry-tools { opacity: 1; }
  .org-base-form { grid-template-columns: 1fr 1fr; }
  .org-base-form input, .org-base-form .btn { grid-column: 1 / -1; }
  .org-m-types { grid-template-columns: repeat(3, 1fr); }
  .org-m-status { grid-template-columns: repeat(2, 1fr); }
  .org-week { width: 100%; justify-content: space-between; }
}

/* ---------- AI credits & unlocks ---------- */
.lib-analysis small { font-size: 11px; opacity: 0.75; font-weight: 400; }
.lib-analysis.is-locked { color: var(--muted-dim); }
.lib-analysis.is-locked svg { opacity: 0.8; }
.ai-unlock, .ai-gate, .ai-empty, .ai-working { margin-top: 22px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(140deg, rgba(240, 184, 74, 0.12), transparent 60%), var(--surface-2); border: 0.5px solid rgba(240, 184, 74, 0.4); }
.ai-unlock-top, .ai-gate, .ai-working { display: flex; gap: 14px; align-items: flex-start; }
.ai-unlock-top > svg, .ai-gate > svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--gold); }
.ai-unlock b, .ai-gate b, .ai-empty b, .ai-working b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ai-unlock p, .ai-gate p, .ai-empty p, .ai-working p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ai-unlock-btn { width: 100%; height: 50px; margin-top: 18px; gap: 8px; font-size: 16px; }
.ai-unlock-btn svg { width: 18px; height: 18px; }
.ai-balance { margin-top: 10px !important; font-size: 13px !important; text-align: center; }
.ai-balance b { display: inline; font-family: inherit; font-size: inherit; color: var(--text); }
.ai-gate .btn { margin-top: 14px; }
.ai-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ai-spinner { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(240, 184, 74, 0.25); border-top-color: var(--gold); animation: pf-spin 0.8s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
/* Org v2: plans, month view, new statuses, autosave, gate */
.org-s-idea { --s: #8b98ae; } .org-s-planned { --s: #7aa7ff; } .org-s-in_production { --s: #f8cc75; } .org-s-published { --s: #00d85b; }
.org-entry.org-s-published .org-entry-title { color: #7fe3a8; }
.org-status-chip { padding: 2px 7px; border-radius: 100px; background: color-mix(in srgb, var(--s) 18%, transparent); color: var(--s); font-size: 10px; font-weight: 700; }
.org-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.org-controls[hidden] { display: none; }
.org-plan { display: flex; gap: 8px; }
.org-plan .pill { gap: 6px; height: 40px; }
.org-plan .pill svg { width: 15px; height: 15px; }
.org-plan-pick { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; border-radius: 100px; background: var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.45); color: var(--gold); }
.org-plan-pick svg { width: 16px; height: 16px; }
.org-plan-pick select { max-width: 200px; height: 100%; padding-right: 8px; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.org-plan-pick option { background: var(--surface); }
.org-view { display: flex; padding: 4px; border-radius: 100px; background: var(--surface); border: 0.5px solid var(--line); }
.org-view button { height: 32px; padding: 0 16px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--muted); }
.org-view button[aria-selected="true"] { background: var(--gold); color: var(--on-gold); }
.org-progress[hidden] { display: none; }
.org-gate { display: flex; gap: 18px; align-items: flex-start; margin-top: 30px; padding: 28px; border-radius: 22px; background: linear-gradient(140deg, rgba(240, 184, 74, 0.12), transparent 60%), var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.45); max-width: 720px; }
.org-gate[hidden] { display: none; }
.org-gate > svg { flex-shrink: 0; width: 28px; height: 28px; color: var(--gold); }
.org-gate b { font-family: var(--font-display); font-size: 20px; }
.org-gate p { margin: 8px 0 16px; color: var(--muted); line-height: 1.6; }
[data-planner][hidden] { display: none; }
.org-month { border-radius: 18px; border: 0.5px solid var(--line); background: var(--surface); overflow: hidden; }
.org-month[hidden] { display: none; }
.org-month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 0.5px solid var(--line); }
.org-month-head span { padding: 10px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.org-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.org-mday { position: relative; min-height: 128px; padding: 30px 5px 5px; border-right: 0.5px solid var(--line-soft); border-bottom: 0.5px solid var(--line-soft); transition: background 0.15s; }
.org-mday:hover { background: rgba(var(--fg), 0.02); }
.org-mday.is-out { opacity: 0.45; }
.org-mday.is-over { background: rgba(240, 184, 74, 0.1); box-shadow: inset 0 0 0 1.5px rgba(240, 184, 74, 0.7); }
.org-mday-n { position: absolute; top: 7px; left: 9px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--muted); }
.org-mday.is-today .org-mday-n { display: grid; place-items: center; width: 24px; height: 24px; top: 4px; left: 5px; border-radius: 50%; background: var(--gold); color: var(--on-gold); }
.org-mday:hover .org-add { opacity: 1; }
.org-entry.is-compact { padding: 4px 6px 4px 8px; margin-bottom: 3px; }
.org-entry.is-compact .org-entry-title { padding-right: 0; font-size: 11px; -webkit-line-clamp: 1; }
.org-entry.is-compact .org-entry-tools { display: none; }
.org-entry-time { margin-right: 5px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.org-more { width: 100%; padding: 3px; border-radius: 8px; font-size: 11px; color: var(--gold); }
.org-more:hover { background: var(--gold-tint); }
.org-m-time { margin: 0 6px; padding: 2px 4px; border-radius: 6px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--text); font: inherit; font-size: 12px; }
.org-saved { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; color: #00d85b; }
.org-saved svg { width: 12px; height: 12px; }
.org-saved[data-state="saving"] { color: var(--muted); }
.org-saved[data-state="error"] { color: #ff8a80; }
.org-m-notes { background: rgba(122, 167, 255, 0.06); }
.org-m-insp { flex-wrap: wrap; }
.org-insp-item { position: relative; }
.org-insp-link { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); }
.org-insp-link:hover { background: var(--surface-3); color: var(--gold); }
.org-insp-link svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .org-mday { min-height: 84px; padding: 26px 3px 3px; }
  .org-entry.is-compact .org-entry-time { display: none; }
  .org-controls { width: 100%; }
}

/* ---------- Plans & packs ---------- */
.plans { display: grid; grid-template-columns: repeat(var(--plan-cols, 4), minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 40px; text-align: left; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: 22px; background: var(--surface); border: 0.5px solid var(--line); box-shadow: var(--inset-glow); }
.plan-card.is-best { border-color: rgba(240, 184, 74, 0.7); background: linear-gradient(170deg, rgba(240, 184, 74, 0.14), transparent 45%), var(--surface); box-shadow: 0 0 60px rgba(240, 184, 74, 0.18); }
.plan-flag { position: absolute; top: -12px; left: 22px; padding: 5px 12px; border-radius: 100px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.plan-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.plan-blurb { margin-top: 6px; min-height: 40px; font-size: 14px; color: var(--muted); }
.plan-price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-family: var(--font-display); font-size: 38px; font-weight: 700; letter-spacing: -0.03em; }
.plan-price span { color: var(--muted); font-size: 14px; }
.plan-features { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; flex: 1; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--text); }
.plan-features li img { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.plan-features li.is-off { color: var(--muted-dim); text-decoration: line-through; }
.plan-features li.is-off img { opacity: 0.25; filter: grayscale(1); }
.plan-features b { color: var(--gold); font-weight: 600; }
.plan-cta { width: 100%; }
.plans-team { margin-top: 22px; color: var(--muted); font-size: 15px; }
.packs-wrap { margin-top: 90px; scroll-margin-top: 110px; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 34px auto 0; }
.pack-card { padding: 24px; border-radius: 20px; background: var(--surface); border: 0.5px solid var(--line); text-align: center; }
.pack-units { color: var(--muted); }
.pack-units b { display: block; font-family: var(--font-display); font-size: 44px; color: var(--text); letter-spacing: -0.03em; }
.pack-price { margin-top: 8px; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--gold); }
.pack-each { margin: 6px 0 18px; font-size: 13px; color: var(--muted); }
.pack-card .btn { width: 100%; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* three cards (Library · Library + AI + Content Plan · Custom): three columns, a bit narrower overall; one column on small screens */
.plans.is-3 { max-width: 960px; margin-left: auto; margin-right: auto; }
@media (max-width: 1100px) { .plans.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .plans.is-3 { grid-template-columns: minmax(0, 440px); justify-content: center; } .plans.is-3.is-v2 { row-gap: 26px; } }
/* Custom: "Price to be agreed" in place of the number */
.plan-price b.plan-price-text { font-size: 28px; line-height: 1.25; }
@media (max-width: 640px) { .plans, .packs { grid-template-columns: 1fr; } }

/* ---------- Tracking radar (How it works, step 01) ---------- */
.radar { position: relative; width: min(644px, 100%); aspect-ratio: 644 / 600; }
.radar-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar-wave circle {
  fill: none; stroke: #f0b84a; stroke-width: 1.2;
  opacity: calc(0.85 - var(--i) * 0.075);
  transform-box: fill-box; transform-origin: center;
  animation: radar-wave 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.16s);
}
@keyframes radar-wave {
  0%, 100% { transform: scale(1); stroke-width: 1.2; }
  35% { transform: scale(1.035); stroke-width: 1.8; }
  65% { transform: scale(0.99); }
}
.radar-glow { transform-box: fill-box; transform-origin: center; animation: radar-glow 4.2s ease-in-out infinite; }
@keyframes radar-glow { 50% { transform: scale(1.12); opacity: 0.75; } }
.radar-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 18px; border-radius: 100px;
  background: radial-gradient(64% 64% at 50% 100%, #ffe0a0 0%, #f8cc75 50%, #f0b84a 100%); color: var(--on-gold);
  font-weight: 600; font-size: 15px; box-shadow: 0 0 30px rgba(240, 184, 74, 0.55);
}
.radar-center i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); }
.radar-center i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--bg); animation: radar-ping 1.6s ease-out infinite; }
@keyframes radar-ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
.radar-chips { position: absolute; inset: 0; }
.radar-chip {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 12px;
  background: rgba(var(--surface-rgb), 0.92); border: 0.5px solid var(--line); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap;
  width: max-content; max-width: none; box-sizing: border-box;
  transform: translate(-50%, -50%) scale(0.85); opacity: 0; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
  will-change: left, top;
}
.radar-chip.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.radar-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; }
.radar-chip > span { display: block; min-width: 0; padding-right: 2px; }
.radar-chip b { display: block; font-size: 15px; font-weight: 500; line-height: 1.25; }
.radar-chip small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .radar-chip { gap: 8px; padding: 6px 12px 6px 6px; }
  .radar-chip img { width: 30px; height: 30px; }
  .radar-chip b { font-size: 12px; } .radar-chip small { font-size: 11px; }
  .radar-center { height: 30px; padding: 0 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .radar-wave circle, .radar-glow, .radar-center i::after { animation: none; } }

/* ---------- AI scan (How it works, step 02) — coordinates from the 1530 × 1556 design ---------- */
.scan { position: relative; width: min(765px, 100%); aspect-ratio: 1530 / 1556; margin-top: -16px; container-type: inline-size; }
.scan-base { position: absolute; left: 0; top: 0; width: 62.745%; height: 100%; }
.scan-photo { position: absolute; left: 14.12%; top: 18.77%; width: 41.05%; height: 50.45%; overflow: hidden; border-radius: 2px; pointer-events: none; }
.scan-beam { position: absolute; left: 0; right: 0; top: 64.9%; height: 26%; transform: translateY(-100%); opacity: 0;
  background: linear-gradient(to bottom, rgba(240, 184, 74, 0) 0%, rgba(240, 184, 74, 0.08) 70%, rgba(240, 184, 74, 0.28) 100%); mix-blend-mode: screen; }
.scan-line { position: absolute; left: 10.65%; width: 47.97%; top: 51.8%; height: 0; z-index: 2; }
.scan-line::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(240, 184, 74, 0.5), #f0b84a 12%, #f8cc75 50%, #f0b84a 88%, #f0b84a); box-shadow: 0 0 12px rgba(240, 184, 74, 0.8); }
.scan-pill { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.7cqw;
  height: 3.7cqw; padding: 0 1.6cqw; border-radius: 100px; white-space: nowrap;
  background: radial-gradient(64% 64% at 50% 100%, #ffe0a0 0%, #f8cc75 50%, #f0b84a 100%); color: #121b33;
  font-size: 1.83cqw; font-weight: 500; box-shadow: 0 0 18px rgba(240, 184, 74, 0.6); }
.scan-pill svg { width: 1.9cqw; height: 1.9cqw; }

.scan-panel { position: absolute; left: 61.57%; width: 38.3%; box-sizing: border-box; border-radius: 1.4cqw; padding: 2.6cqw 2.6cqw; color: var(--text); }
.scan-visual { top: 12.85%; height: 23.9%; border: 1.5px solid rgba(240, 184, 74, 0.45); background: rgba(23, 33, 59, 0.55); }
.scan-filters { top: 40.49%; height: 24.2%; background: var(--surface); }
.scan-score { top: 68.3%; height: 18.9%; display: flex; align-items: center; justify-content: space-between; border: 0.5px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, var(--surface) 0%, rgba(240, 184, 74, 0.12) 160%); }
.scan-label { display: flex; align-items: center; gap: 1cqw; font-size: 1.44cqw; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.scan-label svg { width: 2.2cqw; height: 2.2cqw; }
.scan-visual-body { display: flex; gap: 4cqw; margin-top: 2.2cqw; padding-left: 1.4cqw; }
.scan-thumb { position: relative; flex-shrink: 0; width: 11.5cqw; aspect-ratio: 176 / 222; border: 1px solid #f0b84a; overflow: hidden; }
.scan-thumb img { width: 100%; height: 100%; object-fit: cover; }
.scan-thumb i { position: absolute; left: -10%; right: -10%; top: 63%; height: 1.5px; background: #f0b84a; }
.scan-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9cqw; align-content: start; }
.scan-checks li { display: flex; align-items: center; gap: 1.1cqw; font-size: 1.83cqw; color: #f0b84a; line-height: 1.2; }
.scan-checks li:not(.scan-more)::before { content: ""; width: 1.9cqw; height: 1.9cqw; border-radius: 3px; flex-shrink: 0;
  background: #f0b84a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121b33' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 72% no-repeat; }
.scan-more { padding-left: 3cqw; color: var(--muted) !important; }
.scan-chips { display: flex; flex-wrap: wrap; gap: 0.75cqw; margin-top: 2.6cqw; }
.scan-chips span { display: inline-flex; align-items: center; gap: 1.6cqw; height: 4.05cqw; padding: 0 1.6cqw; border-radius: 100px;
  background: rgba(240, 184, 74, 0.2); color: #f0b84a; font-size: 1.83cqw; white-space: nowrap; }
.scan-chips span::after { content: ""; width: 1.6cqw; height: 1.6cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b84a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.scan-score > div { padding-left: 0.6cqw; }
.scan-pct { margin-top: 1cqw; font-family: var(--font-display); font-size: 5.3cqw; font-weight: 500; line-height: 1; color: #f0b84a; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.scan-sub { margin-top: 1.2cqw; font-size: 1.83cqw; color: #f0b84a; }
.scan-brain { width: 7.2cqw; height: 7.2cqw; color: #f0b84a; margin-right: 1.5cqw; }

/* The sequence: scan up → down → rest, then the panels appear */
.scan.is-scanning .scan-line { animation: scan-move 3.4s cubic-bezier(.45,.05,.55,.95) both; }
.scan.is-scanning .scan-beam { animation: scan-beam 3.4s cubic-bezier(.45,.05,.55,.95) both; }
@keyframes scan-move { 0% { top: 51.8%; } 22% { top: 18.77%; } 64% { top: 69.22%; } 88%, 100% { top: 51.8%; } }
@keyframes scan-beam {
  0% { top: 64.9%; opacity: 0; transform: translateY(0) scaleY(-1); } 6% { opacity: 1; }
  22% { top: 0%; transform: translateY(0) scaleY(-1); } 23% { transform: translateY(-100%) scaleY(1); }
  64% { top: 100%; opacity: 1; transform: translateY(-100%); } 88% { top: 64.9%; opacity: 0.6; } 100% { top: 64.9%; opacity: 0; }
}
.scan.is-scanning .scan-panel { opacity: 0; animation: scan-panel-in 0.7s cubic-bezier(.2,.8,.2,1) forwards; }
.scan.is-scanning .scan-visual { animation-delay: 3.05s; }
.scan.is-scanning .scan-filters { animation-delay: 3.4s; }
.scan.is-scanning .scan-score { animation-delay: 3.75s; }
@keyframes scan-panel-in { from { opacity: 0; transform: translateX(3cqw); } to { opacity: 1; transform: none; } }
.scan.is-scanning .scan-checks li { opacity: 0; animation: scan-pop 0.4s ease forwards; }
.scan.is-scanning .scan-checks li:nth-child(1) { animation-delay: 3.35s; } .scan.is-scanning .scan-checks li:nth-child(2) { animation-delay: 3.5s; }
.scan.is-scanning .scan-checks li:nth-child(3) { animation-delay: 3.65s; } .scan.is-scanning .scan-checks li:nth-child(4) { animation-delay: 3.8s; }
.scan.is-scanning .scan-checks li:nth-child(5) { animation-delay: 3.95s; }
.scan.is-scanning .scan-chips span { opacity: 0; animation: scan-pop 0.4s ease forwards; }
.scan.is-scanning .scan-chips span:nth-child(1) { animation-delay: 3.65s; } .scan.is-scanning .scan-chips span:nth-child(2) { animation-delay: 3.75s; }
.scan.is-scanning .scan-chips span:nth-child(3) { animation-delay: 3.85s; } .scan.is-scanning .scan-chips span:nth-child(4) { animation-delay: 3.95s; }
.scan.is-scanning .scan-chips span:nth-child(5) { animation-delay: 4.05s; } .scan.is-scanning .scan-chips span:nth-child(6) { animation-delay: 4.15s; }
@keyframes scan-pop { from { opacity: 0; transform: translateY(0.6cqw) scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .scan.is-scanning .scan-line, .scan.is-scanning .scan-beam, .scan.is-scanning .scan-panel, .scan.is-scanning .scan-checks li, .scan.is-scanning .scan-chips span { animation: none; opacity: 1; }
}

/* Steps: pause / resume the progress */
.steps-paused .step.is-active .step-progress i { animation-play-state: paused; }
.step-pause {
  position: absolute; top: -4px; right: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); border: 0.5px solid rgba(240, 184, 74, 0.45); color: var(--gold);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, background 0.2s, transform 0.15s;
}
.step-pause.is-current { opacity: 1; pointer-events: auto; }
.step-pause svg { width: 13px; height: 13px; }
.step-pause:hover { background: var(--gold-tint); transform: scale(1.06); }
.step-pause.is-paused { background: var(--gold); color: var(--on-gold); }
.step-pause:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Daily import (How it works, step 03) — 717 × 856 composition, grid 1340 × 1604 ---------- */
.import { position: relative; width: min(717px, 100%); aspect-ratio: 717 / 856; container-type: inline-size; }
.import-grid { position: absolute; left: 6.555%; top: 6.31%; width: 93.445%; aspect-ratio: 1340 / 1604; }
.import-grid img { position: absolute; display: block; }
.magic-visual[data-step="3"] .import img { max-width: none; margin: 0; }
.import-frame { left: 0; top: 0; width: 100%; height: 100%; }
.import-card { object-fit: cover; }
.import-badge {
  position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 2.4cqw; width: 53.1%; height: 9.9cqw;
  padding: 0 3cqw 0 2.6cqw; box-sizing: border-box; border-radius: 100px; background: #17213b; border: 1px solid rgba(240, 184, 74, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.import-badge small { display: block; font-size: 1.53cqw; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.import-badge b { display: block; margin-top: 0.6cqw; font-size: 2.95cqw; font-weight: 400; color: #f0b84a; white-space: nowrap; letter-spacing: -0.01em; }
.import-badge b span { font-variant-numeric: tabular-nums; }
.import-dot { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); }
.import-dot i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #f0b84a; }
.import-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid #f0b84a; opacity: 0; }

/* sequence */
.import.is-importing .import-card { opacity: 0; animation: import-card 0.75s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(0.25s + var(--n) * 0.36s); }
@keyframes import-card {
  0% { opacity: 0; transform: translateY(5%) scale(0.95); filter: brightness(1.6); }
  60% { opacity: 1; filter: brightness(1.15); }
  100% { opacity: 1; transform: none; filter: none; }
}
.import.is-importing .import-badge { animation: import-badge 0.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes import-badge { from { opacity: 0; transform: translateY(-1.5cqw); } }
.import.is-importing:not(.is-done) .import-dot i { animation: import-pulse 0.9s ease-in-out infinite; }
@keyframes import-pulse { 50% { transform: scale(0.55); opacity: 0.6; } }
.import.is-importing:not(.is-done) .import-dot::after { animation: import-ring 1.2s ease-out infinite; }
@keyframes import-ring { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(1.7); } }
.import.is-done .import-dot::after { animation: import-burst 0.7s ease-out; }
@keyframes import-burst { from { opacity: 1; transform: scale(0.8); } to { opacity: 0; transform: scale(2.2); } }
.import.is-done .import-badge { border-color: rgba(240, 184, 74, 0.75); box-shadow: 0 0 30px rgba(240, 184, 74, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35); transition: border-color 0.5s, box-shadow 0.5s; }
@media (prefers-reduced-motion: reduce) { .import.is-importing .import-card, .import.is-importing .import-badge { animation: none; opacity: 1; } }

/* ---------- Quality review: superadmin-only removal (js/library.js) ---------- */
.lib-remove {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border-radius: 100px; border: 0.5px solid rgba(255, 255, 255, 0.14); background: rgba(18, 27, 51, 0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
.lib-remove svg { width: 15px; height: 15px; }
.lib-card:hover .lib-remove, .lib-remove:focus-visible { opacity: 1; }
.lib-remove:hover { background: #d9434b; border-color: #d9434b; }
@media (hover: none) { .lib-remove { opacity: 1; } }
.lib-card { transition: opacity 0.25s, transform 0.25s; }
.lib-card.is-removing { opacity: 0; transform: scale(0.94); }
.pill-danger { background: transparent; border: 1px solid rgba(255, 107, 107, 0.45); color: #ff8a8a; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pill-danger svg { width: 14px; height: 14px; }
.pill-danger:hover { background: rgba(217, 67, 75, 0.16); }
.rm-pop {
  position: fixed; z-index: 2000; width: min(300px, calc(100vw - 24px)); padding: 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); color: var(--text); font-size: 13px;
}
.rm-pop b { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 4px; }
.rm-pop p { margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
.rm-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rm-reasons label { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 100px; border: 1px solid var(--line); cursor: pointer; color: var(--muted); }
.rm-reasons input { position: absolute; opacity: 0; pointer-events: none; }
.rm-reasons label:has(input:checked) { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); }
.rm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rm-actions button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 100px; font: 600 13px var(--font-body); cursor: pointer; }
.rm-actions svg { width: 14px; height: 14px; }
.rm-actions [data-rm-cancel] { background: transparent; border: 1px solid var(--line); color: var(--text); }
.rm-actions [data-rm-ok] { background: #d9434b; border: 1px solid #d9434b; color: #fff; }
.rm-actions [data-rm-ok]:disabled { opacity: 0.6; }
.lib-toast {
  position: fixed; z-index: 2100; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 18px; max-width: calc(100vw - 32px);
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 100px; color: var(--text);
  font-size: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); animation: libToast 0.25s ease-out;
}
.lib-toast button { background: var(--gold); color: var(--on-gold); border: 0; border-radius: 100px; height: 30px; padding: 0 14px; font: 600 13px var(--font-body); cursor: pointer; }
@keyframes libToast { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- Post thumbnails (js/thumbs.js) ---------- */
.thumb { position: relative; display: block; flex: none; overflow: hidden; border-radius: 8px; background: var(--surface-3); }
.thumb iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }

/* ---------- Content Plan panel in the Content Library (js/plan-panel.js) ---------- */
.s-idea { --s: #8b98ae; } .s-planned { --s: #7aa7ff; } .s-in_production { --s: #f8cc75; } .s-published { --s: #00d85b; }
.plan-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; background: var(--surface-2); border: 0.5px solid var(--line-soft); color: var(--text); cursor: pointer; }
.plan-toggle svg { width: 17px; height: 17px; color: var(--gold); }
.plan-toggle:hover { border-color: rgba(240, 184, 74, 0.6); }
.plan-toggle[aria-pressed="true"] { background: var(--gold-tint); border-color: rgba(240, 184, 74, 0.6); color: var(--gold); }
.library.plan-open { grid-template-columns: 544px minmax(0, 1fr) 380px; }
.library.plan-open.filters-collapsed { grid-template-columns: 0 minmax(0, 1fr) 380px; }
@media (max-width: 1180px) { .library.plan-open { grid-template-columns: 420px minmax(0, 1fr) 340px; } .library.plan-open.filters-collapsed { grid-template-columns: 0 minmax(0, 1fr) 340px; } }

/* Card additions: grip (select / drag) + "add to plan" next to the AI button */
.lib-grip { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 100px; border: 0.5px solid rgba(255, 255, 255, 0.14); background: rgba(18, 27, 51, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; cursor: grab; }
.lib-grip svg { width: 15px; height: 15px; }
.plan-open .lib-grip, .lib-card.is-selected .lib-grip { display: inline-flex; }
.lib-card.is-selected .lib-grip { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.plan-open .lib-card[draggable="true"] { cursor: grab; }
.lib-card.is-selected .lib-media { outline: 2px solid var(--gold); outline-offset: 3px; }
.lib-card.is-dragging { opacity: 0.45; }
.lib-actions { display: flex; gap: 8px; margin-top: 10px; }
.lib-actions .lib-analysis { margin-top: 0; flex: 1; min-width: 0; }
.lib-plan-add { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.lib-plan-add svg { width: 17px; height: 17px; }
.lib-plan-add:hover { color: var(--gold); border-color: rgba(240, 184, 74, 0.6); }

.pp { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-left: 1px solid var(--line-soft); animation: ppIn 0.3s ease-out; z-index: 5; }
.pp[hidden] { display: none; }
@keyframes ppIn { from { opacity: 0; transform: translateX(24px); } }
.pp-head { display: flex; align-items: center; gap: 8px; padding: 22px 20px 14px; }
.pp-title { flex: 1; min-width: 0; }
.pp-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.pp-eyebrow svg { width: 14px; height: 14px; }
.pp-plan { margin-top: 4px; max-width: 100%; height: 34px; padding: 0 30px 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 600 15px var(--font-display); cursor: pointer; }
.pp-plan-name { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 17px; }
.pp-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.pp-icon svg { width: 16px; height: 16px; }
.pp-icon:hover { color: var(--text); border-color: var(--white-dim); }
.pp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px 12px; border-bottom: 1px solid var(--line-soft); }
.pp-seg { display: inline-flex; padding: 3px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.pp-seg button { height: 28px; padding: 0 12px; border-radius: 100px; border: 0; background: transparent; color: var(--muted); font: 600 12px var(--font-body); cursor: pointer; }
.pp-seg button[aria-selected="true"] { background: var(--gold); color: var(--on-gold); }
.pp-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pp-nav b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 2px; }
.pp-nav button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.pp-nav button svg { width: 16px; height: 16px; }
.pp-nav button:hover { color: var(--text); background: var(--surface-2); }
.pp-nav .pp-today { width: auto; padding: 0 8px; font: 600 12px var(--font-body); }
.pp-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.pp-foot { padding: 12px 20px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pp-foot span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-foot svg { width: 14px; height: 14px; color: var(--gold); }
.pp-foot b { color: var(--gold); }
.pp-foot kbd { font: 600 11px var(--font-body); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.pp-foot button { height: 28px; padding: 0 12px; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 600 12px var(--font-body); cursor: pointer; }
.pp-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--muted); font-size: 13px; }
.pp-loading.is-inline { padding: 14px 0; }
.pp-loading .ai-spinner { width: 20px; height: 20px; }
.pp-error { margin: 20px; color: #ff8a8a; font-size: 14px; }

/* Occupancy + fill my week */
.pp-occ { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.pp-occ-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.pp-occ-top b { color: var(--text); font-family: var(--font-display); font-size: 16px; margin-right: 2px; }
.pp-occ-top em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; color: #00d85b; font-weight: 600; font-size: 12px; }
.pp-occ-top em svg { width: 14px; height: 14px; }
.pp-track { height: 6px; margin-top: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.pp-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transition: width 0.4s ease; }
.pp-fill { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border-radius: 14px; border: 1px dashed rgba(240, 184, 74, 0.5); background: linear-gradient(90deg, rgba(240, 184, 74, 0.1), rgba(240, 184, 74, 0.02)); color: var(--gold); font: 600 14px var(--font-body); cursor: pointer; text-align: left; }
.pp-fill svg { width: 17px; height: 17px; flex: none; }
.pp-fill small { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; }
.pp-fill:hover { border-style: solid; }
.pp-suggest { padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid rgba(240, 184, 74, 0.35); }
.pp-suggest[hidden] { display: none; }
.pp-sg-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-weight: 600; font-size: 14px; }
.pp-sg-title svg { width: 16px; height: 16px; color: var(--gold); }
.pp-sg-title small { flex-basis: 100%; color: var(--muted); font-weight: 400; font-size: 12px; }
.pp-sg-note { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.pp-sg-list { display: grid; gap: 8px; }
.pp-sg { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; background: var(--surface); }
.pp-sg select { height: 30px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 12px var(--font-body); }
.pp-sg-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.pp-sg-btn svg { width: 14px; height: 14px; }
.pp-sg-btn:hover { color: var(--text); }
.pp-sg-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pp-sg-actions button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 600 12px var(--font-body); cursor: pointer; }
.pp-sg-actions svg { width: 14px; height: 14px; }
.pp-sg-actions .is-gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

/* Drop zones: "No date" tray + days */
.pp-tray, .pp-day { border-radius: 14px; border: 1px solid var(--line-soft); background: var(--surface-2); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.pp-tray { border-style: dashed; border-color: var(--line); }
.pp-tray > header { display: flex; align-items: center; gap: 6px; padding: 10px 12px 6px; font-size: 13px; }
.pp-tray > header svg { width: 15px; height: 15px; color: var(--gold); }
.pp-tray > header span { color: var(--gold); font-weight: 600; }
.pp-tray > header small { margin-left: auto; color: var(--muted); font-size: 11px; }
.pp-day { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.pp-day > header { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 10px 0; border-right: 1px solid var(--line-soft); }
.pp-day > header span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pp-day > header b { font-family: var(--font-display); font-size: 19px; line-height: 1.2; }
.pp-day > header em { font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--gold); }
.pp-day.is-today { border-color: rgba(240, 184, 74, 0.45); }
.pp-day.is-today > header b { color: var(--gold); }
.pp-day.is-past { opacity: 0.6; }
.pp-list { display: grid; gap: 6px; padding: 8px; min-height: 44px; align-content: start; }
.pp-drop-hint { margin: 0; align-self: center; font-size: 12px; color: var(--muted-dim); }
.pp-drop-hint:empty { display: none; }
.pp.is-receiving .pp-drop { border-color: rgba(240, 184, 74, 0.35); }
.pp.is-receiving .pp-drop-hint:empty { display: block; height: 0; }
.pp-drop.is-over { border-color: var(--gold) !important; border-style: solid; background: rgba(240, 184, 74, 0.1); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); opacity: 1; }

/* Entries */
.pp-entry { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 30px 5px 5px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-soft); cursor: grab; transition: border-color 0.15s, transform 0.15s; }
.pp-entry::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--s, var(--muted)); }
.pp-entry:hover { border-color: var(--line); }
.pp-entry.is-dragging { opacity: 0.4; }
.pp-entry.is-new { animation: ppNew 0.9s ease-out; }
@keyframes ppNew { 0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(240, 184, 74, 0.6); border-color: var(--gold); } 60% { transform: none; box-shadow: 0 0 0 6px rgba(240, 184, 74, 0); border-color: var(--gold); } }
.pp-thumb { width: 34px; height: 42px; border-radius: 7px; }
.pp-thumb-none { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--surface-3); flex: none; }
.pp-thumb-none svg { width: 15px; height: 15px; }
.pp-entry-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-entry-txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-entry-txt small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.pp-entry-txt small i { width: 6px; height: 6px; border-radius: 50%; background: var(--s, var(--muted)); }
.pp-entry-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent; color: var(--muted-dim); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.pp-entry-x svg { width: 13px; height: 13px; }
.pp-entry:hover .pp-entry-x { opacity: 1; }
.pp-entry-x:hover { color: #ff8a8a; background: rgba(217, 67, 75, 0.14); }
@media (hover: none) { .pp-entry-x { opacity: 1; } }

/* Month */
.pp-month { border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); padding: 10px; }
.pp-mhead, .pp-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pp-mhead span { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 4px; }
.pp-mday { min-height: 48px; padding: 5px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.pp-mday > span { font-size: 12px; font-weight: 600; }
.pp-mday.is-out { opacity: 0.4; }
.pp-mday.is-today { border-color: var(--gold); }
.pp-mday.is-today > span { color: var(--gold); }
.pp-mday:hover { border-color: var(--line); }
.pp-mdots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.pp-mdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--s); }
.pp-mdots em { font-style: normal; font-size: 10px; color: var(--muted); }
.pp-month-note { margin: 10px 2px 0; font-size: 12px; color: var(--muted); }

/* Gate */
.pp-gate { margin: 20px; padding: 22px; border-radius: 16px; background: var(--surface-2); border: 1px solid rgba(240, 184, 74, 0.35); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pp-gate > svg { width: 22px; height: 22px; color: var(--gold); }
.pp-gate b { font-family: var(--font-display); font-size: 17px; }
.pp-gate p { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pp-gate.is-small { margin: 0; padding: 4px; border: 0; background: none; }
.pp-gate.is-small b { font-size: 15px; }

/* Drag image */
.pp-ghost { position: fixed; top: -200px; left: -200px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 14px; background: var(--gold); color: var(--on-gold); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font-size: 13px; }
.pp-ghost svg { width: 20px; height: 20px; }
.pp-ghost span { display: flex; flex-direction: column; }
.pp-ghost small { font-size: 11px; opacity: 0.75; }

/* "+" popover with a mini calendar */
.pp-pop { position: fixed; z-index: 2000; width: 300px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); color: var(--text); }
.pp-pop.is-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.pp-pop-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.pp-pop-head b { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 15px; }
.pp-pop-head b svg { width: 16px; height: 16px; color: var(--gold); }
.pp-pop-head span { font-size: 12px; color: var(--muted); }
.pp-pop .pp-plan { width: 100%; margin: 0 0 8px; font-size: 13px; }
.pp-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.pp-cal-nav button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.pp-cal-nav button svg { width: 16px; height: 16px; }
.pp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pp-cal-h { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0 4px; }
.pp-cal button { position: relative; height: 36px; border-radius: 8px; border: 1px solid transparent; background: var(--surface); color: var(--text); font: 600 13px var(--font-body); cursor: pointer; }
.pp-cal button i { position: absolute; left: 0; right: 0; bottom: 1px; font-style: normal; font-size: 10px; line-height: 1; color: var(--gold); letter-spacing: 1px; }
.pp-cal button.is-out { opacity: 0.35; }
.pp-cal button.is-past { color: var(--muted-dim); }
.pp-cal button.is-today { border-color: var(--gold); color: var(--gold); }
.pp-cal button:hover { background: var(--gold); color: var(--on-gold); }
.pp-pop-idea { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; margin-top: 10px; border-radius: 10px; border: 1px dashed var(--line); background: transparent; color: var(--text); font: 600 13px var(--font-body); cursor: pointer; }
.pp-pop-idea svg { width: 15px; height: 15px; color: var(--gold); }
.pp-pop-idea:hover { border-color: var(--gold); }

/* Small screens: the panel becomes a full-screen sheet (drag needs a mouse; "+" works everywhere) */
@media (max-width: 960px) {
  .library.plan-open, .library.plan-open.filters-collapsed { grid-template-columns: 1fr; }
  .pp { position: fixed; inset: 0; height: auto; z-index: 1500; border-left: 0; }
}

/* ---------- Content Plan page additions: "No date" tray, reference thumbnails, date field ---------- */
.org-tray { flex: none; border-bottom: 0.5px solid var(--line-soft); }
.org-tray .org-insp-head b { display: flex; align-items: center; gap: 6px; }
.org-tray .org-insp-head b svg { width: 16px; height: 16px; color: var(--gold); }
.org-tray-list { display: grid; gap: 6px; padding: 10px 10px 0; max-height: 34vh; overflow-y: auto; scrollbar-width: thin; }
.org-tray-list .org-empty { margin: 0; padding: 12px; border-radius: 12px; border: 1px dashed var(--line); font-size: 12px; color: var(--muted); text-align: center; }
.org-tray.is-over .org-tray-list .org-empty, .org-tray.is-over { background: rgba(240, 184, 74, 0.08); }
.org-tray-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 20px); height: 34px; margin: 8px 10px 12px; border-radius: 10px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: 600 12px var(--font-body); cursor: pointer; }
.org-tray-add svg { width: 14px; height: 14px; }
.org-tray-add:hover { color: var(--gold); border-color: var(--gold); }
.org-insp-head span a { color: var(--gold); }
.org-entry.has-thumb { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 7px; align-items: start; }
.org-entry.has-thumb > :not(.org-entry-thumb):not(.org-entry-tools) { grid-column: 2; }
.org-entry-thumb { grid-row: 1 / span 2; width: 30px; height: 38px; border-radius: 6px; }
.org-m-thumb { width: 56px; height: 70px; border-radius: 10px; }
.org-m-date { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; }
.org-m-date svg { width: 13px; height: 13px; color: var(--gold); }
.org-m-date input { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--text); font: inherit; font-size: 12px; color-scheme: dark; }
.org-m-dayname { margin-right: 2px; }
.plan-open .feed-bar { flex-wrap: wrap; row-gap: 10px; height: auto; min-height: 61px; padding-block: 12px; }
.org-entry.has-thumb .org-entry-meta { flex-wrap: wrap; row-gap: 3px; }

/* ---------- Content Plan week: folding night / evening, now line, hover add, drop preview ---------- */
.org-fold td, .org-fold-open td { border-bottom: 0.5px solid var(--line-soft); background: var(--surface); }
.org-fold .org-time, .org-fold-open .org-time { padding: 0; vertical-align: middle; background: var(--surface-2); }
.org-fold .org-time button, .org-fold-open .org-time button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 44px; border: 0; background: transparent; color: var(--muted); font: 600 10px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.org-fold .org-time svg, .org-fold-open .org-time svg { width: 14px; height: 14px; color: var(--gold); }
.org-fold .org-time button:hover, .org-fold-open .org-time button:hover { color: var(--text); }
.org-fold-cell { padding: 0; }
.org-fold-cell.is-open { height: 10px; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(var(--fg), 0.025) 6px 12px) !important; }
.org-fold-btn { position: relative; display: block; width: 100%; height: 44px; padding: 0; border: 0; cursor: pointer; color: var(--muted); font: 500 12px var(--font-body);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(var(--fg), 0.025) 6px 12px); transition: background-color 0.2s; }
.org-fold-btn:hover { background-color: rgba(240, 184, 74, 0.06); color: var(--text); }
.org-fold-days { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.org-fold-days > span { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; border-right: 0.5px solid var(--line-soft); }
.org-fold-days i { width: 8px; height: 8px; border-radius: 50%; background: var(--s); box-shadow: 0 0 0 2px var(--surface); }
.org-fold-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 100px; background: var(--surface-2); border: 0.5px solid var(--line); white-space: nowrap; pointer-events: none; transition: opacity 0.2s; }
.org-fold.has-posts .org-fold-label { opacity: 0; }
.org-fold-btn:hover .org-fold-label { opacity: 1; }
.org-fold-label b { color: var(--gold); }
.org-fold-label em { font-style: normal; color: var(--gold); font-weight: 600; }
.org-fold-label em::before { content: "·"; margin-right: 8px; color: var(--muted-dim); }
.org-fold.has-posts .org-time span { color: var(--gold); }
tr[data-hour] { animation: orgRowIn 0.25s ease-out; }
@keyframes orgRowIn { from { opacity: 0; } }

.org-cell.is-today { background: rgba(240, 184, 74, 0.025); }
.org-now { position: absolute; left: 0; right: 0; z-index: 2; height: 0; border-top: 2px solid var(--gold); pointer-events: none; box-shadow: 0 0 10px rgba(240, 184, 74, 0.6); }
.org-now i { position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }

.org-add { width: auto; min-width: 24px; padding: 0 6px; gap: 3px; grid-auto-flow: column; font: 600 11px var(--font-body); }
.org-add span { display: none; }
.org-cell:hover .org-add span { display: inline; }
.org-cell:hover .org-add { background: var(--gold); color: var(--on-gold); }
.org-cell.is-over::after { content: attr(data-drop-label); position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 6px 8px; border-radius: 8px; border: 1.5px dashed var(--gold); background: rgba(240, 184, 74, 0.12); color: var(--gold); font: 600 11px var(--font-body); text-align: center; pointer-events: none; }
.org-cell.is-over .org-add { display: none; }

/* ---------- Hover preview of a planned post (js/post-preview.js) ---------- */
.pv { position: fixed; z-index: 2200; display: flex; flex-direction: column; width: max-content; max-width: 320px; min-width: 240px; border-radius: 18px; overflow: hidden;
  background: var(--surface-2); border: 1px solid rgba(240, 184, 74, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2); animation: pvIn 0.18s ease-out; }
@keyframes pvIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.pv-media { position: relative; align-self: center; max-width: 100%; background: #000; }
.pv-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.pv-thumb iframe { pointer-events: auto; }
.pv-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.pv-status { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px; border-radius: 100px; background: var(--surface); font-size: 11px; font-weight: 600; color: var(--s); }
.pv-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--s); }
.pv-title { font-family: var(--font-display); font-size: 15px; line-height: 1.3; margin-top: 2px; }
.pv-line { font-size: 12px; color: var(--muted); }
.pv-line:empty { display: none; }
.pv-copy { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--surface); font-size: 12px; line-height: 1.45; color: var(--muted); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pv-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--gold); }
.pv-link svg { width: 13px; height: 13px; }

/* "+ 10:00" no longer covers posts: when a cell has posts, the add button is a small icon in the corner */
.org-cell:has(.org-entry) .org-add span { display: none !important; }
.org-cell:has(.org-entry) .org-add { width: 22px; min-width: 22px; height: 22px; padding: 0; right: 3px; bottom: 3px; }
.org-cell:has(.org-entry:hover) .org-add { opacity: 0; }

/* ---------- Content Plan: Inspiration as saved boards → posts ---------- */
.org-board { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.org-board:hover { border-color: rgba(240, 184, 74, 0.6); transform: translateX(-2px); }
.org-board > svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.org-board.is-all { background: linear-gradient(90deg, rgba(240, 184, 74, 0.1), rgba(240, 184, 74, 0.02)); border-color: rgba(240, 184, 74, 0.3); }
.org-board-cover { position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; background: var(--surface-3); color: var(--gold); place-items: center; }
.org-board-cover > svg { grid-column: 1 / -1; grid-row: 1 / -1; width: 18px; height: 18px; }
.org-board-thumb { width: 100%; height: 100%; border-radius: 0; }
.org-board-thumb:first-child { grid-row: 1 / span 2; }
.org-board-thumb:only-child { grid-column: 1 / -1; }
.org-board-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.org-board-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-board-txt small { font-size: 11px; color: var(--muted); }
.org-board-head { display: flex; align-items: center; gap: 8px; }
.org-board-head b { display: block; font-family: var(--font-display); font-size: 15px; }
.org-board-head small { font-size: 11px; color: var(--muted); }
.org-board-back { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; border: 0.5px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; }
.org-board-back svg { width: 16px; height: 16px; }
.org-board-back:hover { border-color: var(--gold); color: var(--gold); }
.org-board-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 10px; background: var(--surface-2); border: 0.5px solid var(--line); }
.org-board-search svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.org-board-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 13px var(--font-body); outline: none; }
.org-insp-thumb { width: 44px; height: 55px; border-radius: 8px; }
.org-insp-item > div { min-width: 0; flex: 1; padding-right: 22px; }
.org-insp-date { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }

/* ---------- Content Plan: download menu ---------- */
.org-dl { position: relative; }
.org-dl-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 270px; padding: 8px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); animation: pvIn 0.15s ease-out; }
.org-dl-menu[hidden] { display: none; }
.org-dl-head { margin: 4px 8px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.org-dl-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.org-dl-menu button:hover { background: var(--surface-3); }
.org-dl-menu button > svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.org-dl-menu button span { display: flex; flex-direction: column; }
.org-dl-menu button b { font-size: 14px; }
.org-dl-menu button small { font-size: 12px; color: var(--muted); }
.org-dl-opt { display: flex; align-items: center; gap: 8px; margin: 6px 4px 2px; padding: 8px 6px 2px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); cursor: pointer; }
.org-dl-opt input { accent-color: var(--gold); }

/* ---------- Time picker (js/time-picker.js) ---------- */
.tp-btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; margin: 0 4px; padding: 0 8px 0 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 12px var(--font-body); cursor: pointer; vertical-align: middle; transition: border-color 0.15s, background 0.15s; }
.tp-btn > svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.tp-btn > svg:last-child { width: 13px; height: 13px; color: var(--muted); transition: transform 0.2s; }
.tp-btn b { font: 600 14px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tp-part { font-size: 11px; color: var(--muted); }
.tp-btn:hover, .tp-btn[aria-expanded="true"] { border-color: rgba(240, 184, 74, 0.6); background: var(--surface-3); }
.tp-btn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.tp-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tp { position: fixed; z-index: 2300; width: 312px; padding: 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid rgba(240, 184, 74, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); color: var(--text); animation: pvIn 0.16s ease-out; }
.tp-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.tp-top span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tp-top b { font: 700 30px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--gold); letter-spacing: 0.01em; }
.tp-top em { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 100px; background: var(--gold-tint); color: var(--gold); }
.tp-quick { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.tp-quick button { height: 26px; padding: 0 9px; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 11px var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.tp-quick button:hover { color: var(--text); border-color: var(--white-dim); }
.tp-quick button.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.tp-hours { display: grid; gap: 8px; }
.tp-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 6px; }
.tp-label { font-size: 11px; color: var(--muted); }
.tp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.tp-grid button, .tp-seg button { height: 32px; border-radius: 8px; border: 1px solid transparent; background: var(--surface); color: var(--text); font: 600 13px var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.12s, color 0.12s, transform 0.12s; }
.tp-grid button:hover, .tp-seg button:hover { border-color: rgba(240, 184, 74, 0.5); }
.tp-grid button.is-on, .tp-seg button.is-on { background: var(--gold); color: var(--on-gold); box-shadow: 0 4px 14px rgba(240, 184, 74, 0.35); }
.tp-grid button:active, .tp-seg button:active { transform: scale(0.94); }
.tp-grid button:focus-visible, .tp-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.tp-row:last-child .tp-grid button:not(.is-on) { color: var(--muted); background: transparent; border-color: var(--line-soft); }
.tp-min { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.tp-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.tp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 11px; color: var(--muted-dim); }
.tp-foot span { display: inline-flex; align-items: center; gap: 5px; }
.tp-foot svg { width: 13px; height: 13px; }
.tp-done { height: 30px; padding: 0 16px; border-radius: 100px; border: 0; background: var(--gold); color: var(--on-gold); font: 600 12px var(--font-body); cursor: pointer; }
.org-base-form { grid-template-columns: 130px 150px 120px minmax(0, 1fr) auto; }
.org-base-time { display: flex; }
.org-base-time .tp-btn { height: 42px; width: 100%; margin: 0; border-radius: 10px; font-size: 13px; }
@media (hover: none) { .tp-foot span { visibility: hidden; } }
.tp-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tp-quick button { padding: 0; }

/* ---------- Date picker (js/date-picker.js) — same family as the time picker ---------- */
.org-m-when { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.org-m-when .tp-btn { margin: 0; }
.org-m-when .org-saved { margin-left: 4px; }
.dp2 { width: 318px; }
.dp2-big { font-size: 26px !important; }
.dp2-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.dp2-quick button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 4px; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 11px var(--font-body); white-space: nowrap; cursor: pointer; }
.dp2-quick button svg { width: 12px; height: 12px; }
.dp2-quick button:hover { color: var(--text); border-color: var(--white-dim); }
.dp2-quick button.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.dp2-quick button.is-none { border-style: dashed; }
.dp2-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp2-nav b { font: 600 14px var(--font-display); }
.dp2-nav button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.dp2-nav button svg { width: 15px; height: 15px; }
.dp2-nav button:hover { color: var(--gold); border-color: rgba(240, 184, 74, 0.5); }
.dp2-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dp2-h { padding: 2px 0 6px; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.dp2-h.is-we { color: var(--muted-dim); }
.dp2-grid button { position: relative; height: 36px; border-radius: 9px; border: 1px solid transparent; background: var(--surface); color: var(--text); font: 600 13px var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background 0.12s, transform 0.12s, border-color 0.12s; }
.dp2-grid button:hover { border-color: rgba(240, 184, 74, 0.5); }
.dp2-grid button:active { transform: scale(0.94); }
.dp2-grid button i { position: absolute; left: 0; right: 0; bottom: 2px; font-style: normal; font-size: 9px; line-height: 1; letter-spacing: 1px; color: var(--gold); }
.dp2-grid button.is-out { background: transparent; color: var(--muted-dim); }
.dp2-grid button.is-past:not(.is-on) { color: var(--muted); }
.dp2-grid button.is-today { border-color: var(--gold); color: var(--gold); }
.dp2-grid button.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); box-shadow: 0 4px 14px rgba(240, 184, 74, 0.35); }
.dp2-grid button.is-on i { color: var(--on-gold); }
.dp2-link { border: 0; background: none; color: var(--gold); font: 600 12px var(--font-body); cursor: pointer; }

/* ---------- Payments (js/checkout.js, js/plans.js, js/profile-billing.js) ---------- */
.plan-interval { display: flex; width: max-content; margin: 0 auto 28px; padding: 4px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--line); }
.plan-interval button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 22px; border-radius: 100px; border: 0; background: transparent; color: var(--muted); font: 600 15px var(--font-body); cursor: pointer; transition: background 0.2s, color 0.2s; }
.plan-interval button[aria-selected="true"] { background: var(--gold); color: var(--on-gold); }
.plan-interval em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 100px; background: rgba(0, 216, 91, 0.16); color: #00d85b; }
.plan-interval button[aria-selected="true"] em { background: rgba(18, 27, 51, 0.15); color: var(--on-gold); }
.plan-sub { margin: 4px 0 0; min-height: 18px; font-size: 13px; color: var(--muted); }
.plan-note { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
button.plan-cta { width: 100%; cursor: pointer; font: inherit; }
.plan-cta.is-current { pointer-events: none; opacity: 0.8; }
.plan-card.is-current { border-color: rgba(0, 216, 91, 0.55); }
.plan-flag.is-current { background: #00d85b; color: var(--on-gold); }
.pack-card button { width: 100%; cursor: pointer; font: inherit; }
.is-busy { opacity: 0.85; cursor: progress !important; }
.co-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: pf-spin 0.7s linear infinite; flex: none; }
.co-toast { position: fixed; z-index: 2500; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 16px; background: var(--surface-3); border: 1px solid var(--line); color: var(--text); font-size: 14px; line-height: 1.45; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); animation: libToast 0.25s ease-out; }
.co-toast.is-ok { border-color: rgba(0, 216, 91, 0.5); }
.co-toast.is-ok > span:first-child:not(.co-spin) { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #00d85b; color: var(--on-gold); font-weight: 700; }
.co-toast.is-err { border-color: rgba(255, 107, 107, 0.6); }
.co-toast a { color: var(--gold); }
.pf-plan { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.pf-plan-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-plan-top b { font-family: var(--font-display); font-size: 20px; }
.pf-plan-int { font-size: 13px; color: var(--muted); }
.pf-plan-badge { padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.pf-plan-badge.is-active { background: rgba(0, 216, 91, 0.16); color: #00d85b; }
.pf-plan-badge.is-trial { background: var(--gold-tint); color: var(--gold); }
.pf-plan-badge.is-warn { background: rgba(255, 107, 107, 0.16); color: #ff8a8a; }
.pf-billing-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pf-billing-note b { color: var(--text); }
.pf-billing-credits { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.pf-billing-credits svg { width: 16px; height: 16px; color: var(--gold); }
.pf-billing-credits b { color: var(--text); }
.pf-billing-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pf-billing-actions .btn { gap: 8px; }
.pf-billing-actions .btn svg { width: 15px; height: 15px; }
.pf-billing-fine { margin: 0; font-size: 12px; color: var(--muted-dim); }
.pf-billing-loading { color: var(--muted); }
.pf-plan.is-empty p { margin: 0; }

/* ---------- Home stats in motion (js/stats.js): count-up, travelling highlight, animated icons ---------- */
.stats { position: relative; }
.stat:first-child .stat-num, .stat:first-child .stat-label { color: inherit; }
.stat .stat-num { color: var(--text); transition: color 0.5s ease, text-shadow 0.5s ease; font-variant-numeric: tabular-nums; }
.stat .stat-label { color: var(--muted); transition: color 0.5s ease; }
.stat.is-active .stat-num { color: var(--gold); text-shadow: 0 0 24px rgba(240, 184, 74, 0.35); }
.stat.is-active .stat-label { color: var(--gold); }
.stat { cursor: default; transition: background 0.5s ease; }
.stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  background: radial-gradient(120% 70% at 50% 0%, rgba(240, 184, 74, 0.09), transparent 70%); }
.stat.is-active::before { opacity: 1; }
.stats-bar { position: absolute; top: 0; left: 0; height: 2px; width: 25%; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, transparent);
  box-shadow: 0 0 16px rgba(240, 184, 74, 0.6); transform: translateX(var(--bar-x, 0%)); transition: transform 0.7s cubic-bezier(.65, 0, .35, 1); }
.stat-ico { display: inline-grid; place-items: center; flex: none; color: var(--muted); transition: color 0.5s ease, transform 0.5s ease; }
.stat.is-active .stat-ico { color: var(--gold); transform: scale(1.08); }
.stat-ico svg { display: block; overflow: visible; }
.ico-target svg { width: 34px; height: 34px; }
.ico-filter svg { width: 29px; height: 37px; margin-top: -7px; }
.ico-carousel svg { width: 46px; height: 34px; }
.ico-update svg { width: 30px; height: 30px; }

/* Target: radar pings + breathing core */
.t-ping { transform-origin: 17px 17px; animation: tPing 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.t-ping-2 { animation-delay: 1.2s; }
@keyframes tPing { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.3); opacity: 0; } }
.t-core { transform-origin: 17px 17px; animation: tCore 2.4s ease-in-out infinite; }
@keyframes tCore { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }

/* Filter: dots drop in, one comes out at the bottom */
.f-dot { opacity: 0; animation: fDrop 2.4s ease-in infinite; }
.f-dot-2 { animation-delay: 0.25s; } .f-dot-3 { animation-delay: 0.5s; }
@keyframes fDrop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 45% { transform: translateY(9px); opacity: 1; } 55%, 100% { transform: translateY(11px); opacity: 0; } }
.f-out { opacity: 0; animation: fOut 2.4s ease-out infinite; animation-delay: 0.9s; }
@keyframes fOut { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 60% { transform: translateY(6px); opacity: 0; } 100% { opacity: 0; } }

/* Carousel: frames slide like a feed, the play button pulses */
/* a row of post frames slides one step behind a fixed "now playing" frame; the play button pops on each new post */
.c-strip { animation: cSlide 2.6s cubic-bezier(.7, 0, .3, 1) infinite; }
@keyframes cSlide { 0%, 40% { transform: translateX(0); } 75%, 100% { transform: translateX(-18px); } }
.c-frame { transform-origin: 23px 17px; animation: cFrame 2.6s ease-in-out infinite; }
@keyframes cFrame { 0%, 40%, 100% { transform: scale(1); } 60% { transform: scale(0.94); } 80% { transform: scale(1.03); } }
.c-play { transform-origin: 23.8px 17px; animation: cPlay 2.6s ease-in-out infinite; }
@keyframes cPlay { 0%, 38%, 100% { transform: scale(1); opacity: 1; } 52%, 62% { transform: scale(0.4); opacity: 0; } 82% { transform: scale(1.15); opacity: 1; } }

/* Update: arrows turn, pause, turn */
.u-spin { transform-origin: 15px 15px; animation: uSpin 3s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes uSpin { 0%, 30% { transform: rotate(0deg); } 70%, 100% { transform: rotate(360deg); } }

/* Animations run only while the section is on screen */
.stats:not(.is-live) .stat-ico * { animation-play-state: paused; }
@media (max-width: 960px) { .stats-bar { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .stat-ico *, .stats-bar { animation: none !important; transition: none !important; }
}

/* ---------- Feature cards: pro effects (js/features-fx.js toggles .fx-live and the cursor spotlight) ---------- */
.feature-card { transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), border-color 0.4s ease, box-shadow 0.4s ease; will-change: transform; }
.feature-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(240, 184, 74, 0.1), transparent 65%); }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(240, 184, 74, 0.45); box-shadow: var(--inset-glow), 0 22px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(240, 184, 74, 0.12); }
.feature-card:hover::after { opacity: 1; }
.feature-card h3, .feature-card p { position: relative; z-index: 1; }

/* Light sweep across the coloured badges + breathing glow */
.fx-shine { overflow: hidden; z-index: 2; }
.fx-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: fxShine 3.6s ease-in-out infinite; }
@keyframes fxShine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.glow-top.fx-shine { animation: fxGlowTop 3.6s ease-in-out infinite; }
.glow-over.fx-shine { animation: fxGlowOver 3.6s ease-in-out infinite; }
.glow-replicable.fx-shine { animation: fxGlowRep 3.6s ease-in-out infinite; }
@keyframes fxGlowTop { 0%, 100% { box-shadow: 0 0 70px 0 rgba(255, 104, 92, 0.75); } 50% { box-shadow: 0 0 120px 10px rgba(255, 104, 92, 0.95); } }
@keyframes fxGlowOver { 0%, 100% { box-shadow: 0 0 70px 0 rgba(122, 92, 255, 0.75); } 50% { box-shadow: 0 0 120px 10px rgba(122, 92, 255, 0.95); } }
@keyframes fxGlowRep { 0%, 100% { box-shadow: 0 0 70px 0 rgba(0, 216, 91, 0.7); } 50% { box-shadow: 0 0 120px 10px rgba(0, 216, 91, 0.9); } }

/* Top Picks: three mini posts fan out behind the badge, sparkles */
.fx-fan { position: absolute; left: 50%; top: 58px; width: 0; height: 0; }
.fx-fan i { position: absolute; left: -32px; top: 0; width: 64px; height: 84px; border-radius: 9px; transform-origin: 50% 120%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 140, 120, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); animation: fxFan 4s cubic-bezier(.3, .7, .2, 1) infinite; }
.fx-fan i::before { content: ""; position: absolute; inset: 7px 7px 26px; border-radius: 5px; background: linear-gradient(135deg, rgba(243, 47, 113, 0.45), rgba(255, 104, 92, 0.25)); }
.fx-fan i::after { content: ""; position: absolute; left: 7px; right: 18px; bottom: 11px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
.fx-fan i:nth-child(1) { --r: -16deg; --x: -42px; }
.fx-fan i:nth-child(2) { --r: 0deg; --x: 0px; animation-delay: 0.08s; }
.fx-fan i:nth-child(3) { --r: 16deg; --x: 42px; animation-delay: 0.16s; }
@keyframes fxFan { 0%, 12% { transform: translate(0, 18px) rotate(0) scale(0.8); opacity: 0; } 35%, 80% { transform: translate(var(--x), 0) rotate(var(--r)) scale(1); opacity: 1; } 100% { transform: translate(0, 18px) rotate(0) scale(0.8); opacity: 0; } }
.fx-spark { position: absolute; width: 10px; height: 10px; opacity: 0; animation: fxSpark 4s ease-in-out infinite;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 22%, #ffd0c8 23% 27%, transparent 28% 47%, #ffd0c8 48% 52%, transparent 53% 72%, #ffd0c8 73% 77%, transparent 78% 97%, #ffd0c8 98%); }
.fx-spark.s1 { left: 22%; top: 44px; animation-delay: 0.9s; } .fx-spark.s2 { right: 20%; top: 64px; animation-delay: 1.3s; } .fx-spark.s3 { left: 64%; top: 30px; animation-delay: 1.7s; transform: scale(0.7); }
@keyframes fxSpark { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 25% { opacity: 1; transform: scale(1.1) rotate(45deg); } 50% { opacity: 0; transform: scale(0.4) rotate(90deg); } }

/* Overperforming: rising bars, a line that draws itself, delta chip */
.fx-bars { position: absolute; left: 50%; bottom: 44px; width: 210px; height: 92px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; opacity: 0.85; }
.fx-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; transform-origin: bottom; background: linear-gradient(to top, rgba(77, 91, 255, 0.08), rgba(122, 92, 255, 0.35));
  animation: fxBar 4s cubic-bezier(.3, .8, .2, 1) infinite; }
.fx-bars i:last-child { background: linear-gradient(to top, rgba(122, 92, 255, 0.25), #9b8cff); box-shadow: 0 0 24px rgba(122, 92, 255, 0.6); }
.fx-bars i:nth-child(2) { animation-delay: 0.06s; } .fx-bars i:nth-child(3) { animation-delay: 0.12s; } .fx-bars i:nth-child(4) { animation-delay: 0.18s; } .fx-bars i:nth-child(5) { animation-delay: 0.24s; } .fx-bars i:nth-child(6) { animation-delay: 0.36s; }
@keyframes fxBar { 0%, 8% { transform: scaleY(0.05); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0.05); } }
.fx-line { position: absolute; left: 50%; top: 48px; width: 220px; height: 80px; transform: translateX(-50%); }
.fx-line path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: fxDraw 4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(150, 130, 255, 0.8)); }
@keyframes fxDraw { 0%, 15% { stroke-dashoffset: 260; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 260; opacity: 0; } }
.fx-delta { position: absolute; right: 22px; top: 30px; padding: 4px 10px; border-radius: 100px; font: 700 12px var(--font-body); color: #fff;
  background: rgba(122, 92, 255, 0.35); border: 1px solid rgba(169, 160, 255, 0.6); opacity: 0; animation: fxDelta 4s ease-out infinite; }
@keyframes fxDelta { 0%, 45% { opacity: 0; transform: translateY(8px) scale(0.9); } 58%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Replicable ideas: the badge copies itself out to both sides */
.fx-copy { top: 111px; opacity: 0; box-shadow: none; animation: fxCopy 3.6s cubic-bezier(.3, .7, .2, 1) infinite; }
.fx-copy.c1 { --dx: -78px; --dy: -46px; } .fx-copy.c2 { --dx: 78px; --dy: 46px; animation-delay: 0.25s; }
@keyframes fxCopy { 0%, 20% { transform: translateX(-50%) scale(1); opacity: 0; } 30% { opacity: 0.55; } 70% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(0.7); opacity: 0.35; } 100% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(0.6); opacity: 0; } }

/* Competitors: a third club is typed in, then removed */
.fx-chip-new { overflow: hidden; max-height: 0; margin-top: -6px; opacity: 0; animation: fxChip 6s ease-in-out infinite; }
.fx-typed { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; vertical-align: bottom; border-right: 1.5px solid var(--gold); animation: fxType 6s steps(8) infinite; }
@keyframes fxChip { 0%, 15% { max-height: 0; margin-top: -6px; opacity: 0; } 22%, 78% { max-height: 35px; margin-top: 0; opacity: 1; } 86%, 100% { max-height: 0; margin-top: -6px; opacity: 0; } }
@keyframes fxType { 0%, 22% { max-width: 0; } 45%, 78% { max-width: 80px; border-color: transparent; } 100% { max-width: 80px; } }
.mini-select { transition: box-shadow 0.4s; }
.feature-card:hover .mini-select { box-shadow: 0 0 90px 0 rgba(240, 184, 74, 0.4); }

/* Never run out of ideas: endless feed scrolling up */
.fx-feed { animation: fxFeed 16s linear infinite; }
@keyframes fxFeed { from { transform: translateY(0); } to { transform: translateY(-200px); } }
.fx-feed .thumb { transition: transform 0.3s ease; }
.feature-card:hover .fx-feed { animation-duration: 8s; }

/* Platforms: icons float, a highlight moves from one to the next */
.fx-float span { animation: fxBob 3s ease-in-out infinite, fxPick 7.2s ease-in-out infinite; }
.fx-float span:nth-child(2) { animation-delay: -0.5s, 1.2s; } .fx-float span:nth-child(3) { animation-delay: -1s, 2.4s; }
.fx-float span:nth-child(4) { animation-delay: -1.5s, 3.6s; } .fx-float span:nth-child(5) { animation-delay: -2s, 4.8s; } .fx-float span:nth-child(6) { animation-delay: -2.5s, 6s; }
@keyframes fxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fxPick { 0%, 100% { border-color: var(--line-soft); box-shadow: none; } 6%, 14% { border-color: rgba(240, 184, 74, 0.7); box-shadow: 0 0 22px rgba(240, 184, 74, 0.35); } 22% { border-color: var(--line-soft); box-shadow: none; } }

/* Trends: the highlight walks down the list and lands on Halloween, which starts trending */
.fx-trend { position: relative; }
.fx-trend li { position: relative; z-index: 1; transition: color 0.3s; }
.fx-trend li.on { margin: 0; padding-left: 20px; background: none; color: var(--muted); animation: fxOnText 6s ease-in-out infinite; }
.fx-trend li:nth-of-type(1) { animation: fxT1 6s ease-in-out infinite; } .fx-trend li:nth-of-type(2) { animation: fxT2 6s ease-in-out infinite; }
@keyframes fxT1 { 0%, 4% { color: var(--muted); } 8%, 20% { color: var(--gold); } 24%, 100% { color: var(--muted); } }
@keyframes fxT2 { 0%, 22% { color: var(--muted); } 26%, 38% { color: var(--gold); } 42%, 100% { color: var(--muted); } }
@keyframes fxOnText { 0%, 40% { color: var(--muted); } 44%, 92% { color: var(--gold); } 100% { color: var(--muted); } }
.fx-hl { position: absolute; left: 6px; right: 6px; top: 0; height: 35px; border-radius: 100px; background: var(--gold-tint); animation: fxHl 6s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes fxHl { 0%, 4% { transform: translateY(0); opacity: 0; } 8%, 20% { transform: translateY(0); opacity: 1; } 26%, 38% { transform: translateY(35px); } 44%, 92% { transform: translateY(70px); opacity: 1; box-shadow: 0 0 18px rgba(240, 184, 74, 0.25); } 100% { transform: translateY(70px); opacity: 0; } }
.fx-badge { position: absolute; right: 14px; top: 8px; padding: 2px 8px; border-radius: 100px; font: 700 11px var(--font-body); font-style: normal; color: #00d85b; background: rgba(0, 216, 91, 0.14);
  opacity: 0; animation: fxBadge 6s ease-out infinite; }
@keyframes fxBadge { 0%, 48% { opacity: 0; transform: translateX(8px); } 54%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Save: the button is pressed, the branches draw in gold, the folders light up one by one */
.fx-save .pill-gold { animation: fxPress 4.4s ease-in-out infinite; }
@keyframes fxPress { 0%, 10% { transform: scale(1); } 14% { transform: scale(0.92); box-shadow: 0 0 20px 0 rgba(240, 184, 74, 0.3); } 20%, 100% { transform: scale(1); box-shadow: 0 0 46px 0 rgba(240, 184, 74, 0.5); } }
.fx-save .branch::before, .fx-save .branch::after, .fx-save .branch i { animation: fxBranch 4.4s ease-in-out infinite; }
@keyframes fxBranch { 0%, 16% { border-color: var(--line); } 26%, 80% { border-color: rgba(240, 184, 74, 0.8); } 92%, 100% { border-color: var(--line); } }
.fx-save .folders .pill-dark { animation: fxFolder 4.4s ease-in-out infinite; transition: none; }
.fx-save .folders .pill-dark:nth-child(1) { animation-delay: 0.1s; } .fx-save .folders .pill-dark:nth-child(2) { animation-delay: 0.35s; } .fx-save .folders .pill-dark:nth-child(3) { animation-delay: 0.6s; }
@keyframes fxFolder { 0%, 24% { border-color: var(--line-soft); color: var(--muted); transform: translateX(0); }
  30% { transform: translateX(4px); } 34%, 78% { border-color: rgba(240, 184, 74, 0.7); color: var(--gold); transform: translateX(0); box-shadow: 0 0 16px rgba(240, 184, 74, 0.2); }
  90%, 100% { border-color: var(--line-soft); color: var(--muted); box-shadow: none; } }

/* Only animate while the carousel is on screen; nothing for reduced motion */
[data-carousel]:not(.fx-live) .feature-card *, [data-carousel]:not(.fx-live) .feature-card *::before, [data-carousel]:not(.fx-live) .feature-card *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .feature-card *, .feature-card *::before, .feature-card *::after { animation: none !important; }
  .fx-fan, .fx-spark, .fx-copy, .fx-delta, .fx-chip-new, .fx-hl, .fx-badge { display: none; }
  .fx-trend li.on { margin: 0 6px; padding-left: 14px; background: var(--gold-tint); color: var(--gold); border-radius: 100px; }
  .fx-line path { stroke-dashoffset: 0; }
}
.feature-visual:has(.fx-feed) { overflow: hidden; margin-inline: -26px; padding-inline: 26px; }
.feature-visual:has(.fx-feed) .thumbs { left: 26px; right: 26px; }
.feature-visual:has(.fx-feed) .thumbs-fade { left: 0; right: 0; top: auto; bottom: 0; height: 90px; z-index: 1; }
.feature-visual:has(.fx-feed)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 1; background: linear-gradient(to bottom, var(--surface), rgba(23, 33, 59, 0)); }

/* ---------- Plans in motion (js/plans.js): staggered entrance, price count-up, animated best plan, hover light ---------- */
@property --plan-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plans[data-fx="wait"] .plan-card { opacity: 0; transform: translateY(28px); }
.plans[data-fx="in"] .plan-card { animation: planIn 0.8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--ci, 0) * 0.12s); }
.plans[data-fx="in"] .plan-card.is-best { animation-name: planInBest; }
@keyframes planIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes planInBest { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: scale(1.03); } }
.plans[data-fx="in"] .plan-features li { animation: planLi 0.5s ease-out both; animation-delay: calc(var(--ci, 0) * 0.12s + 0.35s + var(--li, 0) * 0.07s); }
@keyframes planLi { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.plans[data-fx="in"] .plan-features li img { animation: planTick 0.45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--ci, 0) * 0.12s + 0.4s + var(--li, 0) * 0.07s); }
@keyframes planTick { from { transform: scale(0) rotate(-45deg); } to { transform: none; } }
.plan-price b { font-variant-numeric: tabular-nums; display: inline-block; }
.plan-price.is-swapping b { animation: planSwap 0.5s cubic-bezier(.2, .8, .2, 1); }
.plan-price.is-swapping span, .plan-price.is-swapping + .plan-sub { animation: planFade 0.5s ease; }
@keyframes planSwap { from { opacity: 0; transform: translateY(-14px) rotateX(70deg); } to { opacity: 1; transform: none; } }
@keyframes planFade { from { opacity: 0; } to { opacity: 1; } }

/* Hover: lift + light following the cursor + arrow on the button */
.plan-card { transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), border-color 0.3s, box-shadow 0.3s; }
.plan-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 20%), rgba(240, 184, 74, 0.09), transparent 65%); }
.plan-card:hover { transform: translateY(-6px); border-color: rgba(240, 184, 74, 0.45); box-shadow: var(--inset-glow), 0 24px 50px rgba(0, 0, 0, 0.4); }
.plan-card:hover::after { opacity: 1; }
.plan-card > * { position: relative; z-index: 1; }
.plan-card .plan-flag { position: absolute; z-index: 3; }
.plan-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.plan-cta-arrow { display: inline-block; width: 0; opacity: 0; font-style: normal; transform: translateX(-6px); transition: width 0.25s, opacity 0.25s, transform 0.25s, margin 0.25s; }
.plan-card:hover .plan-cta-arrow, .plan-cta:focus-visible .plan-cta-arrow { width: 1em; margin-left: 8px; opacity: 1; transform: none; }

/* Best plan: slightly bigger, a gold light running round the border, shining badge and button */
.plan-card.is-best { transform: scale(1.03); z-index: 1; }
.plan-card.is-best:hover { transform: scale(1.03) translateY(-6px); }
.plan-card.is-best::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--plan-angle), transparent 0 62%, rgba(240, 184, 74, 0.2) 70%, var(--gold-light) 80%, var(--gold) 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: planBorder 4.5s linear infinite; }
@keyframes planBorder { to { --plan-angle: 360deg; } }
.plan-card.is-best { animation: planBestGlow 4.5s ease-in-out infinite; }
.plans[data-fx="in"] .plan-card.is-best { animation: planInBest 0.8s cubic-bezier(.2, .8, .2, 1) both, planBestGlow 4.5s ease-in-out 1s infinite; animation-delay: calc(var(--ci, 0) * 0.12s), 1s; }
@keyframes planBestGlow { 0%, 100% { box-shadow: 0 0 50px rgba(240, 184, 74, 0.14); } 50% { box-shadow: 0 0 90px rgba(240, 184, 74, 0.3); } }
.plan-flag:not(.is-current) { overflow: hidden; }
.plan-flag:not(.is-current)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); animation: fxShine 3.6s ease-in-out infinite; }
.plan-card.is-best .plan-cta { position: relative; overflow: hidden; animation: planCta 3.6s ease-in-out infinite; }
.plan-card.is-best .plan-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: fxShine 3.6s ease-in-out infinite 0.6s; }
@keyframes planCta { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(240, 184, 74, 0); } 80% { box-shadow: 0 0 0 6px rgba(240, 184, 74, 0.18); } 95% { box-shadow: 0 0 0 12px rgba(240, 184, 74, 0); } }

/* Monthly / yearly switch: sliding pill */
.plan-interval { position: relative; }
.plan-interval button { position: relative; z-index: 1; }
@media (max-width: 960px) { .plan-card.is-best, .plan-card.is-best:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-card *, .plan-card::before, .plan-card::after { animation: none !important; transition: none !important; }
  .plans[data-fx] .plan-card { opacity: 1 !important; transform: none !important; }
}

/* ---------- Home CTA typewriter (js/typewriter.js) ---------- */
.cta-type { display: flex; align-items: center; justify-content: center; text-align: center; }
.tw-line { display: block; }
.cta-type .tw-text { display: inline; }
.tw-caret { display: inline-block; width: 0.08em; height: 0.95em; margin-left: 0.08em; vertical-align: -0.08em; border-radius: 2px; background: var(--gold);
  box-shadow: 0 0 14px rgba(240, 184, 74, 0.7); animation: twBlink 1s steps(1) infinite; }
.cta-type.is-typing .tw-caret { animation: none; }
@keyframes twBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-caret { display: none; } }

/* ---------- Home CTA: three ways to convert ---------- */
.cta-box .cta-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 56px; }
.cta-box .cta-actions .btn { margin-top: 0; }
.cta-actions .btn-lg { height: 54px; padding: 0 26px; font-size: 18px; font-weight: 600; }
.cta-main { position: relative; overflow: hidden; gap: 10px; cursor: pointer; font-family: inherit; animation: planCta 3.6s ease-in-out infinite; }
.cta-main::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); animation: fxShine 3.6s ease-in-out infinite 0.6s; }
.cta-arrow { display: inline-block; transition: transform 0.25s ease; }
.cta-main:hover .cta-arrow { transform: translateX(4px); }
.cta-alt { border-color: rgba(240, 184, 74, 0.6); color: var(--gold); }
.cta-alt:hover { background: var(--gold-tint); }
.cta-demo { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; height: 54px; color: var(--text); font-size: 16px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(240, 184, 74, 0.5); text-underline-offset: 5px; transition: color 0.2s; }
.cta-demo:hover { color: var(--gold); }
.cta-demo-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); }
.cta-demo-ico svg { width: 16px; height: 16px; }
.cta-reassure { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 22px; color: var(--muted); font-size: 14px; }
.cta-reassure span:first-letter { color: #00d85b; }
@media (max-width: 640px) { .cta-actions { flex-direction: column; } .cta-actions .btn-lg { width: 100%; } }

/* ---------- Cover image cards (TikTok: js/covers.js) ---------- */
.lib-cover { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, #1f2b48, #0d1426); }
.lib-cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease, transform 0.6s ease; }
.lib-cover img.is-loaded { opacity: 1; }
.lib-card:hover .lib-cover img { transform: scale(1.03); }
.lib-cover.no-cover::after { content: "Video unavailable"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.lib-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(18, 27, 51, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; transition: transform 0.25s, background 0.25s; }
.lib-play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.lib-card:hover .lib-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(240, 184, 74, 0.85); }

/* ---------- Cover cards (posts with cover_url): clean image, one play icon for every video, controls on hover ---------- */
.lib-card.has-cover .lib-media { background: #0d1426; }
.lib-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.lib-card.has-cover:hover .lib-cover-img { transform: scale(1.03); }
.lib-card.has-cover .lib-media::after { background: linear-gradient(to bottom, rgba(10, 15, 30, 0.35) 0%, transparent 18%, transparent 62%, rgba(10, 15, 30, 0.85) 100%); }
/* controls appear on hover (always visible on touch screens) */
.lib-card.has-cover .lib-top > * { opacity: 0; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; }
.lib-card.has-cover:hover .lib-top > *, .lib-card.has-cover:focus-within .lib-top > *, .lib-card.has-cover .lib-top > .lib-badge-fav { opacity: 1; transform: none; }
.lib-card.has-cover.is-selected .lib-top > .lib-grip { opacity: 1; transform: none; }
.lib-card.has-cover .lib-badge-fav { width: 28px; padding: 0; justify-content: center; color: var(--gold); }
.lib-card.has-cover .lib-badge-fav svg { width: 14px; height: 14px; }
@media (hover: none) { .lib-card.has-cover .lib-top > * { opacity: 1; transform: none; } }
.lib-who { display: flex; align-items: center; gap: 7px; }
.lib-pf { width: 16px; height: 16px; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
/* one play icon for every video */
.lib-playbtn { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 58px; height: 58px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(18, 27, 51, 0.5); color: #fff; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.lib-playbtn svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; }
.lib-playbtn:hover, .lib-card:hover .lib-playbtn { background: var(--gold); border-color: var(--gold); color: var(--on-gold); transform: translate(-50%, -50%) scale(1.06); }
.lib-dur { position: absolute; right: 10px; bottom: 54px; z-index: 3; padding: 2px 7px; border-radius: 6px; background: rgba(10, 15, 30, 0.7); color: #fff; font: 600 11.5px var(--font-body); font-variant-numeric: tabular-nums; pointer-events: none; }
/* the player inside the card */
.lib-player { position: absolute; inset: 0; z-index: 5; background: #000; overflow: hidden; }
.lib-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lib-player.is-ig iframe { top: -55px; height: calc(100% + 260px); background: #fff; }
.lib-stop { position: absolute; top: 8px; right: 8px; z-index: 6; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(10, 15, 30, 0.75); color: #fff; cursor: pointer; }
.lib-stop svg { width: 15px; height: 15px; }
.lib-media.is-playing .lib-top, .lib-media.is-playing .lib-bottom, .lib-media.is-playing .lib-playbtn, .lib-media.is-playing .lib-dur { display: none; }

/* ---------- Content Library filters column (js/library.js, mockups/filters-v6.html) ---------- */
.library { grid-template-columns: 316px minmax(0, 1fr); }
.library.plan-open { grid-template-columns: 316px minmax(0, 1fr) 380px; }
@media (max-width: 1180px) { .library, .library.plan-open { grid-template-columns: 300px minmax(0, 1fr); } .library.plan-open { grid-template-columns: 300px minmax(0, 1fr) 340px; } }
.filters.lf { display: flex; flex-direction: column; height: 100vh; max-height: 100vh; overflow: hidden; padding: 22px 14px 0 18px; }
.lf-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lf-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 4px 12px 2px; }
.lf-head h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; }
.lf-act { color: var(--muted-dim); font-size: 13px; white-space: nowrap; }
.lf-clear { margin-left: auto; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.lf-clear:hover { color: var(--text); }
.lf-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); border: 0.5px solid var(--line-soft); background: var(--surface-2); }
.lf-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lf-icon:hover { color: var(--gold); border-color: rgba(240, 184, 74, 0.5); }
.lf-close { display: none; }
.lf-search { flex: none; position: relative; display: flex; align-items: center; gap: 8px; height: 42px; margin: 0 4px 6px 0; padding: 0 12px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--muted-dim); }
.lf-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lf-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 13.5px; }
.lf-search:focus-within { border-color: rgba(240, 184, 74, 0.55); }
.lf-results { flex: none; display: grid; gap: 1px; margin: -2px 4px 8px 0; padding: 6px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.lf-results[hidden] { display: none; }
.lf-hit { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border-radius: 8px; font-size: 13px; text-align: left; color: var(--text); }
.lf-hit:hover, .lf-hit.is-kb { background: rgba(var(--fg), 0.06); }
.lf-hit.is-on .lf-hv { color: var(--gold); }
.lf-hv { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-hv mark { background: none; color: var(--gold); font-weight: 600; }
.lf-hc { color: var(--muted-dim); font-size: 11px; white-space: nowrap; }
.lf-none { padding: 8px; color: var(--muted-dim); font-size: 12px; line-height: 1.4; }
.lf-jump { display: none; }
.lf-foot { display: none; }
.lf-scrim { display: none; }

/* scroll area: thin bar in SCP colours, shown while scrolling / hovering, edge fades when there's more */
.lf-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 10px 28px 0; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-bottom, 0px)), transparent 100%); }
.lf-body:hover { scrollbar-color: rgba(180, 192, 211, 0.35) transparent; }
.lf-body.is-scrolling { scrollbar-color: rgba(240, 184, 74, 0.8) transparent; }
.lf-body::-webkit-scrollbar { width: 6px; }
.lf-body::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.lf-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 100px; }
.lf-body:hover::-webkit-scrollbar-thumb { background: rgba(180, 192, 211, 0.35); }
.lf-body.is-scrolling::-webkit-scrollbar-thumb, .lf-body::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.lf-sec { padding-top: 6px; }
.lf-lbl { display: flex; align-items: center; gap: 6px; margin: 14px 2px 8px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.lf-ai { position: relative; padding: 2px 6px; border-radius: 5px; background: rgba(122, 92, 255, 0.18); color: #a99bff; font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.06em; cursor: help; }
.lf-ai b { margin-left: 2px; font-weight: 700; }
.lf-ai:hover::after, .lf-ai:focus::after { content: attr(data-tip); position: absolute; left: 0; top: 20px; z-index: 9; width: 220px; padding: 8px 10px; border-radius: 9px; background: var(--surface-3); border: 0.5px solid var(--line); color: var(--text); font-size: 11px; line-height: 1.45; letter-spacing: 0; text-transform: none; font-weight: 400; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.lf-stack { display: grid; gap: 7px; }
.lf-more-rows { display: grid; gap: 7px; }
.lf-more-rows[hidden] { display: none; }
.lf-morebtn { height: 36px; border-radius: 12px; border: 0.5px dashed rgba(var(--fg), 0.16); color: var(--gold); font-size: 12px; font-weight: 600; }
.lf-morebtn:hover { background: var(--gold-tint); }

/* dropdown rows */
.lf-row { border: 0.5px solid rgba(var(--fg), 0.16); border-radius: 13px; background: var(--surface); transition: border-color 0.2s, background 0.2s; min-width: 0; }
.lf-row:hover { border-color: rgba(var(--fg), 0.28); }
.lf-row.is-open { background: var(--surface-2); border-color: rgba(var(--fg), 0.22); }
.lf-row-gap { margin-top: 7px; }
.lf-rh { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; text-align: left; color: var(--text); }
.lf-rh .lf-i { color: var(--muted); }
.lf-t { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.lf-v { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--muted-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-v.is-set { color: var(--gold); }
.lf-badge { flex: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px; background: var(--gold); color: var(--on-gold); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.lf-chev { width: 15px; height: 15px; margin-left: auto; color: var(--muted-dim); transition: transform 0.25s; }
.lf-row.is-open .lf-chev { transform: rotate(180deg); }
.lf-rb { padding: 0 6px 8px; }
.lf-rb[hidden] { display: none; }
.lf-sub { margin: 10px 6px 6px; font-size: 11px; color: var(--muted-dim); }

/* label + count lists */
.lf-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.lf-li { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 8px 0 10px; border-radius: 9px; color: var(--text); font-size: 13px; text-align: left; transition: background 0.15s; }
.lf-li:hover { background: rgba(var(--fg), 0.05); }
.lf-lab { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-cnt { flex: none; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 100px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 500; display: grid; place-items: center; }
.lf-li.is-on { background: var(--gold-tint); }
.lf-li.is-on .lf-lab { color: var(--gold); font-weight: 600; }
.lf-li.is-on .lf-cnt { background: var(--gold); color: var(--on-gold); font-weight: 700; }
.lf-li.is-zero { color: var(--muted-dim); cursor: default; }
.lf-li.is-zero:hover { background: none; }
.lf-lead-logo { flex: none; width: 34px; height: 22px; border-radius: 5px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.lf-lead-logo img { max-width: 28px; max-height: 16px; object-fit: contain; }
.lf-lead-logo b { font-family: var(--font-display); font-size: 7.5px; font-weight: 700; color: var(--on-gold); letter-spacing: -0.02em; }
.lf-lsearch { width: 100%; height: 34px; margin: 2px 0 8px; padding: 0 10px; border-radius: 9px; border: 0.5px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; outline: none; }
.lf-lsearch:focus { border-color: rgba(240, 184, 74, 0.55); }
.lf-showall { display: block; padding: 8px 10px 2px; color: var(--gold); font-size: 12px; font-weight: 600; }

/* tiles: format, platform, sport, crests */
.lf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.lf-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lf-tile, .lf-cr { aspect-ratio: 1; min-width: 0; border-radius: 13px; border: 0.5px solid rgba(var(--fg), 0.16); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 6px 4px; color: var(--muted); font-size: 11px; text-align: center; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.lf-tile .lf-i { width: 24px; height: 24px; stroke-width: 1.5; }
.lf-tile span, .lf-cr > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-tile:hover, .lf-cr:hover { color: var(--text); border-color: rgba(var(--fg), 0.3); }
.lf-tile.is-on, .lf-cr.is-on { color: var(--gold); border-color: var(--gold); background: var(--gold-tint); }
.lf-tile.is-zero, .lf-cr.is-zero, .lf-chip.is-zero, .lf-shp.is-zero { opacity: 0.38; }
.lf-rb .lf-tiles-3 .lf-tile { aspect-ratio: auto; height: 62px; }
.lf-crests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.lf-crest, .lf-mini { flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #fff; }
.lf-crest { width: 32px; height: 32px; transition: transform 0.25s; }
.lf-crest img { width: 24px; height: 24px; object-fit: contain; }
.lf-crest b { font-family: var(--font-display); font-size: 8px; font-weight: 700; color: var(--on-gold); letter-spacing: -0.02em; }
.lf-cr:hover .lf-crest { transform: scale(1.08); }
.lf-mini { width: 18px; height: 18px; }
.lf-mini img { width: 14px; height: 14px; object-fit: contain; }
.lf-mini b { font-family: var(--font-display); font-size: 6px; font-weight: 700; color: var(--on-gold); }

/* shape, length, language */
.lf-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lf-shp { height: 54px; border-radius: 10px; border: 0.5px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 11px; }
.lf-shape { display: block; border: 1.6px solid currentColor; border-radius: 3px; }
.lf-shp.is-on { color: var(--gold); border-color: var(--gold); background: var(--gold-tint); }
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-chip { height: 30px; padding: 0 11px; border-radius: 100px; border: 0.5px solid var(--line); color: var(--muted); font-size: 12px; white-space: nowrap; }
.lf-chip em { font-style: normal; color: var(--muted-dim); margin-left: 5px; font-size: 11px; }
.lf-chip:hover { color: var(--text); }
.lf-chip.is-on { border-color: var(--gold); color: var(--gold); background: var(--gold-tint); }
.lf-chip-more { color: var(--gold); }

/* views histogram */
.lf-vq { display: flex; gap: 5px; margin: 2px 4px 8px; }
.lf-vq button { flex: 1; height: 28px; border-radius: 100px; border: 0.5px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.lf-vq button.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.lf-hist { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin: 0 6px; }
.lf-hist i { flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; background: rgba(180, 192, 211, 0.16); transition: background 0.2s; }
.lf-hist i.is-in { background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.lf-rng { position: relative; height: 24px; margin: 3px 6px 0; }
.lf-tr, .lf-fl { position: absolute; top: 10px; height: 4px; border-radius: 4px; }
.lf-tr { left: 0; right: 0; background: var(--surface-3); }
.lf-fl { background: var(--gold); }
.lf-rng input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.lf-rng input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); cursor: grab; }
.lf-rng input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); cursor: grab; }
.lf-rl { display: flex; justify-content: space-between; margin: 4px 6px 0; font-family: var(--font-display); font-size: 12px; font-weight: 600; }

/* Top Picks / Replicable ideas / Overperforming (home page badges) */
.lf-sp-top { --g: linear-gradient(90deg, #d62839, #ff4d4d); --g-soft: linear-gradient(90deg, rgba(214, 40, 57, 0.8), rgba(255, 77, 77, 0.8)); --glow: 255, 77, 77; }   /* Favs: red */
.lf-sp-rep { --g: linear-gradient(90deg, #00d85b, #00ccdd); --g-soft: linear-gradient(90deg, rgba(0, 216, 91, 0.7), rgba(0, 204, 221, 0.7)); --glow: 0, 216, 91; }
.lf-sp-over { --g: linear-gradient(90deg, #ff5f1f, #ffb02e); --g-soft: linear-gradient(90deg, rgba(255, 95, 31, 0.8), rgba(255, 176, 46, 0.8)); --glow: 255, 128, 40; }   /* Overperforming: fire orange (AI is purple) */
.lf-sp { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 10px; height: 56px; margin-bottom: 7px; padding: 0 12px; border-radius: 13px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--g-soft) border-box; color: var(--text); text-align: left; transition: transform 0.2s, box-shadow 0.3s; }
.lf-sp:hover { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--g-soft) border-box; }
.lf-sp-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--g); }
.lf-sp-ic .lf-i { width: 15px; height: 15px; stroke: #fff; stroke-width: 2.2; }
.lf-sp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lf-sp-tx b { font-weight: 600; font-size: 13.5px; }
.lf-sp-tx small { font-size: 11px; color: var(--muted-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-sp-n { flex: none; color: var(--muted-dim); font-size: 11px; }
.lf-sp-ck { display: none; width: 16px; height: 16px; stroke: #fff; stroke-width: 2.6; }
.lf-sp.is-on { background: var(--g) border-box; animation: lfGlow 3.6s ease-in-out infinite; }
.lf-sp.is-on .lf-sp-ic { background: rgba(255, 255, 255, 0.18); }
.lf-sp.is-on .lf-sp-tx small, .lf-sp.is-on .lf-sp-n { color: rgba(255, 255, 255, 0.85); }
.lf-sp.is-on .lf-sp-ck { display: block; }
.lf-sp.is-on::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: fxShine 3.6s ease-in-out infinite; }
.lf-sp.is-zero { opacity: 0.38; cursor: not-allowed; }
@keyframes lfGlow { 0%, 100% { box-shadow: 0 0 12px rgba(var(--glow), 0.35); } 50% { box-shadow: 0 0 22px 1px rgba(var(--glow), 0.6); } }
.lf-chip-sp { width: 10px; height: 10px; border-radius: 50%; background: var(--g); flex: none; }
.lf-quick { display: none; }

/* period / sort dropdowns in the feed bar */
.lf-dd { position: relative; }
.lf-dd-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; white-space: nowrap; }
.feed-bar .lf-dd-btn { gap: 8px; }
.lf-dd-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lf-dd-btn [data-period-label], .lf-dd-btn [data-order-label] { color: var(--text); font-weight: 600; }
.lf-dd-k { font-weight: 400; }
.lf-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 200px; padding: 6px; border-radius: 14px; background: var(--surface-2); border: 0.5px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.lf-menu[hidden] { display: none; }
.lf-menu-list { display: grid; gap: 1px; }
.lf-menu-list button { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px; color: var(--muted); font-size: 13.5px; text-align: left; white-space: nowrap; }
.lf-menu-list button[hidden] { display: none; }
.lf-menu-list button:hover { background: rgba(var(--fg), 0.05); color: var(--text); }
.lf-menu-list button[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); font-weight: 600; }
.lf-menu .dp-wrap { margin: 8px 4px 4px; min-width: 300px; }

/* mobile: the filters column becomes a bottom sheet */
@media (max-width: 960px) {
  .library, .library.plan-open { grid-template-columns: 1fr; }
  .filters.lf, .library .filters.lf { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; height: auto; max-height: 90vh; padding: 0 14px; border: 0; border-top: 0.5px solid var(--line); border-radius: 22px 22px 0 0; background: var(--bg); transform: translateY(102%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); opacity: 1; pointer-events: auto; }
  .filters.lf::before { content: ""; flex: none; width: 40px; height: 4px; margin: 8px auto 10px; border-radius: 4px; background: var(--line); }
  .library.filters-collapsed .filters.lf { display: flex; }
  .library.sheet-open .filters.lf { transform: none; }
  .lf-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(5, 10, 25, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .library.sheet-open .lf-scrim { opacity: 1; pointer-events: auto; }
  .lf-head .filters-hide { display: none; }
  .lf-close { display: grid; }
  .lf-jump { flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
  .lf-jump button { flex: none; height: 30px; padding: 0 12px; border-radius: 100px; border: 0.5px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; }
  .lf-jump button.is-on { border-color: var(--gold); color: var(--gold); }
  .lf-foot { flex: none; display: flex; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 0.5px solid var(--line); }
  .lf-go { flex: 1; height: 48px; justify-content: center; }
  .lf-rh, .lf-sp { min-height: 48px; }
  .lf-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px var(--gutter) 0; }
  .lf-q { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 100px; border: 1px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--g) border-box; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 12px; }
  .lf-q .lf-i { width: 13px; height: 13px; stroke-width: 2.2; }
  .lf-q.is-on { background: var(--g) border-box; }
  .lf-q.is-zero { opacity: 0.38; }
  .feed-bar .collapse img { display: none; }
  .lf-hide-sm { display: none; }
  .lf-dd-k { display: none; }
}
@media (min-width: 961px) and (max-width: 1560px) { .lf-hide-sm { display: none; } .feed-bar { gap: 8px; } }

/* Platform tiles: the official logos (assets/pf-*.svg as masks) in brand colours, glow that follows the cursor */
.lf-pf-instagram { --bc: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); --glow: 225, 48, 108; }
.lf-pf-tiktok { --bc: linear-gradient(135deg, #25f4ee 10%, #ffffff 50%, #fe2c55 90%); --glow: 254, 44, 85; }
.lf-pf-youtube { --bc: #ff0033; --glow: 255, 0, 51; }
.lf-pf-x { --bc: var(--text); --glow: var(--fg); }
.lf-pf-facebook { --bc: #1877f2; --glow: 24, 119, 242; }
.lf-pf-linkedin { --bc: linear-gradient(135deg, #0a66c2, #3d9bff); --glow: 45, 140, 255; }
.lf-pfl, .lf-pfi { display: block; flex: none; background: var(--muted); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.lf-pfl { width: 26px; height: 26px; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s; }
.lf-pfi { width: 16px; height: 16px; }
.lf-pfi.is-brand { background: var(--bc); }
.lf-pf .lf-tile { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: auto; height: 76px; gap: 8px;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s, box-shadow 0.35s, background 0.25s, color 0.25s; }
.lf-pf .lf-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 40%), rgba(var(--glow), 0.32), transparent 70%); }
.lf-pf .lf-tile::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); transition: left 0.7s ease; }
.lf-pf .lf-tile:hover { transform: translateY(-3px); color: var(--text); border-color: rgba(var(--glow), 0.55); box-shadow: 0 12px 26px -12px rgba(var(--glow), 0.7); }
.lf-pf .lf-tile:hover::before { opacity: 1; }
.lf-pf .lf-tile:hover::after { left: 130%; }
.lf-pf .lf-tile:hover .lf-pfl { background: var(--bc); transform: scale(1.14) rotate(-5deg); }
.lf-pf .lf-tile:active { transform: translateY(-1px) scale(0.98); }
.lf-pf .lf-tile.is-on { color: var(--text); border-color: rgba(var(--glow), 0.9); background: linear-gradient(180deg, rgba(var(--glow), 0.18), rgba(var(--glow), 0.04)); box-shadow: 0 0 0 3px rgba(var(--glow), 0.16), 0 10px 24px -12px rgba(var(--glow), 0.8); }
.lf-pf .lf-tile.is-on .lf-pfl { background: var(--bc); }
.lf-pf .lf-tile.is-on::before { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .lf-pf .lf-tile, .lf-pf .lf-tile:hover, .lf-pf .lf-tile:hover .lf-pfl { transform: none; } .lf-pf .lf-tile::after { display: none; } }
.lf-pfl.lf-pf-instagram { width: 34px; height: 34px; margin: -4px; }
.lf-pfi.lf-pf-instagram { width: 21px; height: 21px; margin: -2.5px; }

/* ---------- Day theme (html[data-theme="light"], js/theme.js) ---------- */
/* muted line icons drawn for the dark theme */
:root[data-theme="light"] img:is([src*="search.svg"], [src*="chevron"], [src*="calendar.svg"], [src*="folder.svg"], [src*="pf-"]) { filter: brightness(0.42); }
:root[data-theme="light"] .lf-pfl { background: #6b7690; }
:root[data-theme="light"] .lf-crest, :root[data-theme="light"] .lf-mini, :root[data-theme="light"] .lf-lead-logo { box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="light"] .site-nav, :root[data-theme="light"] .filters, :root[data-theme="light"] .feed-bar { box-shadow: 0 1px 0 var(--line-soft); }
:root[data-theme="light"] .site-nav { box-shadow: 0 8px 30px rgba(18, 27, 51, 0.08); }

/* Theme switch (injected in the nav by js/theme.js) */
/* a soft rounded square: night → a sun on dark glass (switch to day), day → a moon on white (switch to night) */
.theme-toggle { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, #2b3142, #1a1f2c); color: #d9dde6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px -6px rgba(0, 0, 0, 0.6); transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.theme-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, 0.22); }
:root[data-theme="light"] .theme-toggle { border-color: #e2e4e9; background: #fff; color: #3b3f47; box-shadow: 0 1px 2px rgba(18, 27, 51, 0.06); }
:root[data-theme="light"] .theme-toggle:hover { color: #121b33; border-color: #cfd3da; }
.theme-toggle svg { position: absolute; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; }
.theme-toggle .tt-moon { transform: translateY(120%) rotate(-90deg); opacity: 0; }
:root[data-theme="light"] .theme-toggle .tt-moon { transform: none; opacity: 1; }
:root[data-theme="light"] .theme-toggle .tt-sun { transform: translateY(-120%) rotate(90deg); opacity: 0; }
/* day / night (js/theme.js): the old colours blur out, the new ones come into focus */
::view-transition-old(root) { animation: theme-blur-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: theme-blur-in 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; mix-blend-mode: normal; }
@keyframes theme-blur-out { to { opacity: 0; filter: blur(14px); } }
@keyframes theme-blur-in { from { opacity: 0; filter: blur(14px); } }

/* ---------- Memberships: pricing switches, comparison, private plans, terms before paying ---------- */
.plan-switches { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; }
.plan-switches .plan-interval { margin: 0; }
.plans.is-solo { grid-template-columns: minmax(0, 420px); justify-content: center; }
.plans-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; }
.private-intro .eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.compare-wrap { margin-top: 80px; }
.cmp-wrap { margin-top: 30px; overflow-x: auto; border-radius: 18px; border: 0.5px solid var(--line); background: var(--surface); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; text-align: center; font-size: 14px; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 0.5px solid var(--line-soft); }
.cmp thead th { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); background: var(--surface-2); }
.cmp thead th.is-best { color: var(--gold); }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--text); }
.cmp tbody th small { display: block; font-weight: 400; color: var(--muted-dim); font-size: 12px; margin-top: 2px; }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.cmp .cmp-yes { color: #00d85b; font-weight: 700; font-size: 16px; }
.cmp .cmp-no { color: var(--muted-dim); }
.cmp .cmp-price td { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.cmp .cmp-price small { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 2px; }
.pricing-legal { text-align: center; margin: 10px auto 60px; color: var(--muted); font-size: 13px; }
.pricing-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

.co-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(5, 10, 25, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: coIn 0.2s ease; }
@keyframes coIn { from { opacity: 0; } }
.co-card { position: relative; width: min(520px, 100%); max-height: 92vh; overflow: auto; padding: 28px 26px 22px; border-radius: 22px; background: var(--surface); border: 0.5px solid var(--line); box-shadow: var(--shadow-soft); }
.co-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0.5px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.co-eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.co-card h2 { margin: 6px 0 18px; font-family: var(--font-display); font-size: 26px; }
.co-card h2 span { font-size: 14px; font-weight: 500; color: var(--muted); }
.co-terms { margin: 0; display: grid; gap: 1px; border-radius: 14px; overflow: hidden; border: 0.5px solid var(--line); }
.co-terms div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 14px; background: var(--surface-2); }
.co-terms dt { color: var(--muted); font-size: 13px; }
.co-terms dd { margin: 0; color: var(--text); font-size: 14px; font-weight: 500; }
.co-code { display: flex; gap: 8px; margin-top: 14px; }
.co-code input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 12px; border: 0.5px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; text-transform: uppercase; }
.co-code .btn { height: 42px; padding: 0 18px; font-size: 15px; }
.co-small { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.co-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.co-actions .btn { height: 46px; font-size: 16px; padding: 0 20px; }
@media (max-width: 520px) { .co-terms div { grid-template-columns: 1fr; gap: 2px; } .co-actions { flex-direction: column-reverse; } .co-actions .btn { width: 100%; } }
.plan-switches { margin: 36px auto 28px; }

/* ---------- Account → Billing & membership (js/profile-billing.js) ---------- */
.pf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 16px 0 0; border-radius: 14px; overflow: hidden; border: 0.5px solid var(--line); }
.pf-facts div { padding: 11px 14px; background: var(--surface); }
.pf-facts dt { font-size: 12px; color: var(--muted); }
.pf-facts dd { margin: 3px 0 0; font-size: 14px; color: var(--text); font-weight: 500; }
.pf-facts .link-gold { margin-left: 6px; font-size: 13px; background: none; border: 0; cursor: pointer; padding: 0; }
.pf-included { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 13.5px; color: var(--muted); }
.pf-included li { display: flex; gap: 8px; align-items: flex-start; }
.pf-included svg { width: 15px; height: 15px; color: #00d85b; flex: none; margin-top: 2px; }
.pf-quota { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--gold-tint); }
.pf-quota-top { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text); }
.pf-quota-top svg { width: 16px; height: 16px; color: var(--gold); }
.pf-quota-bar { height: 6px; margin-top: 8px; border-radius: 6px; background: rgba(var(--fg), 0.1); overflow: hidden; }
.pf-quota-bar i { display: block; height: 100%; border-radius: 6px; background: var(--gold); }
.pf-quota small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.pf-alert { display: flex; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 104, 92, 0.12); border: 0.5px solid rgba(255, 104, 92, 0.45); color: var(--text); font-size: 14px; }
.pf-alert > svg { width: 18px; height: 18px; color: #ff685c; flex: none; margin-top: 2px; }
.pf-alert-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pf-cancel { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-cancel:hover { color: #ff685c; }
.pf-danger { background: #d9434b; color: #fff; border: 0; }
.pf-change { margin-top: 16px; padding: 16px; border-radius: 16px; border: 0.5px solid var(--line); background: var(--surface); }
.pf-change-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-iv { margin: 0; }
.pf-iv button { height: 32px; padding: 0 14px; font-size: 13px; }
.pf-change-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.pf-change-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 0.5px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.pf-change-opt span { color: var(--muted); font-size: 13px; }
.pf-change-opt em { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 10px; color: var(--gold); }
.pf-change-opt.is-on { border-color: var(--gold); background: var(--gold-tint); }
.pf-change-opt:disabled { opacity: 0.55; cursor: default; }
.pf-change-terms { margin-top: 12px; font-size: 14px; color: var(--text); }
.pf-cancel-why { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pf-cancel-why textarea { display: block; width: 100%; margin-top: 6px; padding: 10px; border-radius: 10px; border: 0.5px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.pf-invoices { margin-top: 18px; border-top: 0.5px solid var(--line); padding-top: 14px; }
.pf-invoices summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--text); list-style: none; }
.pf-invoices summary::-webkit-details-marker { display: none; }
.pf-invoices summary svg { width: 16px; height: 16px; color: var(--gold); }
.pf-invoices summary span { color: var(--muted); font-weight: 400; font-size: 13px; }
.pf-invoices table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13.5px; }
.pf-invoices th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 6px 8px; }
.pf-invoices td { padding: 8px; border-top: 0.5px solid var(--line-soft); color: var(--text); }
.pf-invoices a { color: var(--gold); }
.pf-inv-st { padding: 2px 8px; border-radius: 100px; font-size: 11.5px; background: var(--surface-3); color: var(--muted); }
.pf-inv-st.is-paid { background: rgba(0, 216, 91, 0.14); color: #00b34b; }
.pf-inv-st.is-open { background: rgba(255, 104, 92, 0.14); color: #ff685c; }
.pf-billing-note.is-err { color: #ff685c; }
@media (max-width: 640px) { .pf-facts, .pf-included { grid-template-columns: 1fr; } .pf-cancel { margin-left: 0; } .pf-invoices table th:nth-child(2), .pf-invoices table td:nth-child(2) { display: none; } }

/* ---------- Legal pages (terms.html, privacy.html) ---------- */
.legal-page { width: min(780px, 100% - 2 * var(--gutter)); padding: 120px 0 96px; color: var(--muted); line-height: 1.7; font-size: 16px; }
.legal-eyebrow { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.legal-page h1 { color: var(--text); font-size: clamp(34px, 5vw, 52px); line-height: 1.1; margin: 0 0 12px; }
.legal-updated { margin: 0 0 32px; font-size: 14px; color: var(--muted-dim); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; margin: 0 0 48px; border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--fg), .02); }
.legal-toc a { font-size: 13px; color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-soft); transition: color .2s, border-color .2s, background .2s; }
.legal-toc a:hover { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-tint); }
.legal-page section { scroll-margin-top: 100px; padding: 0 0 8px; }
.legal-page h2 { color: var(--text); font-size: 22px; margin: 40px 0 12px; }
.legal-page h3 { color: var(--text); font-size: 16px; margin: 24px 0 6px; }
.legal-page p { margin: 0 0 14px; }
.legal-page ul { margin: 0 0 16px; padding-left: 20px; }
.legal-page li { margin: 0 0 8px; }
.legal-page li::marker { color: var(--gold); }
.legal-page b { color: var(--text); font-weight: 600; }
.legal-page a:not(.legal-toc a) { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-dim); }
@media (max-width: 640px) { .legal-page { padding-top: 96px; font-size: 15px; } .legal-toc { padding: 12px; } }

/* ---------- Language switch (js/i18n.js): EN | ES in the nav, on log in / sign up and in the profile ---------- */
.lang-switch { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px; height: 38px; border-radius: 100px; border: 0.5px solid var(--line); background: var(--surface-2); }
.lang-switch button { min-width: 34px; height: 30px; padding: 0 9px; border: 0; border-radius: 100px; background: none; color: var(--muted); font: 600 12px/1 var(--font-display, inherit); letter-spacing: 0.06em; cursor: pointer; transition: color 0.2s, background 0.2s; }
.lang-switch button:hover { color: var(--gold); }
.lang-switch button[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); }
.lang-float { position: fixed; top: 18px; right: 18px; z-index: 50; }
.pf-lang .lang-switch { height: 44px; }
.pf-lang .lang-switch button { min-width: 0; padding: 0 16px; height: 36px; font-size: 13px; letter-spacing: 0; }
.post-lang-note { margin: 10px 0 0; font-size: 14px; color: var(--gold); }

/* Nav that doesn't fit on one line (js/main.js adds .is-tight): same as the mobile menu */
.site-nav.is-tight:not(.is-open) .nav-links, .site-nav.is-tight:not(.is-open) .nav-actions { display: none; }
.site-nav.is-tight .nav-toggle { display: grid; place-items: center; }
.site-nav.is-tight.is-open { flex-wrap: wrap; height: auto; padding: 12px 16px 18px 20px; border-radius: 0; }
.site-nav.is-tight.is-open .nav-links, .site-nav.is-tight.is-open .nav-actions { display: flex; width: 100%; }
.site-nav.is-tight.is-open .nav-links { flex-direction: column; align-items: flex-start; gap: 16px; margin: 12px 0 8px; }
.site-nav.is-tight.is-open .nav-toggle span { background: transparent; }
.site-nav.is-tight.is-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.site-nav.is-tight.is-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Team seats: users stepper (pricing) and team panel (profile) ---------- */
.plan-seats { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 4px 4px 4px 16px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.plan-seats span { margin-right: 6px; }
.plan-seats b { min-width: 22px; text-align: center; color: var(--text); font-size: 15px; }
.plan-seats button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; transition: background 0.2s, color 0.2s; }
.plan-seats button:hover:not(:disabled) { background: var(--gold-tint); color: var(--gold); }
.plan-seats button:disabled { opacity: 0.35; cursor: default; }
.plan-seats-more { text-align: center; margin: -12px 0 24px; font-size: 14px; color: var(--muted); }
.plan-seats-more[hidden] { display: none; }
.pf-team { margin-top: 22px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(var(--fg), 0.02); }
.pf-team-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-team-head b { font-size: 15px; }
.pf-team-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pf-team-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.pf-team-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pf-team-list small { color: var(--muted); }
.pf-team-list .is-waiting small { color: var(--gold); }
.pf-team-list .is-off { opacity: 0.55; }
.pf-team-add { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-team-add input { flex: 1; min-width: 200px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.pf-team-seats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--muted); }

/* Newsletter pop-up, short version: one column, e-mail + button */
.nl-panel.is-simple { display: block; width: min(480px, 100%); text-align: center; }
.nl-panel.is-simple .nl-body { padding: 40px 32px 30px; }
.nl-panel.is-simple h2 { margin-top: 14px; padding: 0 12px; font-size: clamp(24px, 3vw, 30px); }
.nl-panel.is-simple .nl-lead { margin-top: 10px; }
.nl-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); }
.nl-icon svg { width: 22px; height: 22px; }
.nl-row { display: flex; gap: 8px; margin-top: 22px; }
.nl-row input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 14px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--text); font: inherit; font-size: 15px; outline: none; }
.nl-row input:focus { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.nl-panel.is-simple .nl-cta { width: auto; height: 50px; margin: 0; padding: 0 22px; font-size: 16px; }
.nl-panel.is-simple .nl-consent { justify-content: center; text-align: left; }
.nl-panel.is-simple .nl-done { justify-items: center; padding-top: 4px; }
@media (max-width: 480px) { .nl-row { flex-direction: column; } .nl-panel.is-simple .nl-cta { width: 100%; } }
.plan-switches .plan-seats-more { flex-basis: 100%; margin: 0; }
/* Short newsletter pop-up with the photo on the left (form on the right, centred) */
.nl-panel.is-simple.has-photo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); width: min(840px, 100%); text-align: left; }
.nl-panel.has-photo .nl-visual { min-height: 360px; }
.nl-panel.has-photo .nl-body { display: flex; flex-direction: column; justify-content: center; padding: 44px 36px 36px; }
.nl-panel.has-photo h2 { padding: 0 24px 0 0; }
.nl-panel.has-photo .nl-consent { justify-content: flex-start; }
.nl-panel.has-photo .nl-done { justify-items: start; }
@media (max-width: 820px) {
  .nl-panel.is-simple.has-photo { grid-template-columns: minmax(0, 1fr); width: min(480px, 100%); }
  .nl-panel.has-photo .nl-visual { min-height: 170px; }
}

/* ---------- Typography refinements (18 Oct 2026) ---------- */
.lead { line-height: 1.6; }
/* small reading text never under 13px (compact app labels, chips and calendars keep their sizes) */
.news-meta, .post-cover figcaption, .plan-note, .co-small, .cmp tbody th small, .cmp .cmp-price small, .pf-billing-fine, .nl-consent, .dr-hint { font-size: 13px; }
/* numbers that animate or line up don't jump around */
.stat-num, .plan-price b, .pack-price, .pf-facts dd, .cmp-price td, .bill-kpi b, .lf-cnt, .co-terms dd { font-variant-numeric: tabular-nums; }
.cmp-note { margin-top: 16px; text-align: center; font-size: 14px; color: var(--muted); }
.cmp td b { font-weight: 600; }

/* AI packs: same motion as the plan cards (rise in, count up, lift + cursor light, best value highlighted) */
.pack-card { position: relative; box-shadow: var(--inset-glow); transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), border-color 0.3s, box-shadow 0.3s; }
.pack-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 20%), rgba(240, 184, 74, 0.1), transparent 65%); }
.pack-card:hover { transform: translateY(-6px); border-color: rgba(240, 184, 74, 0.45); box-shadow: var(--inset-glow), 0 24px 50px rgba(0, 0, 0, 0.4); }
.pack-card:hover::after { opacity: 1; }
.pack-card > * { position: relative; z-index: 1; }
.pack-card .plan-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; }
.pack-card.is-best { border-color: rgba(240, 184, 74, 0.7); background: linear-gradient(170deg, rgba(240, 184, 74, 0.14), transparent 45%), var(--surface); box-shadow: 0 0 50px rgba(240, 184, 74, 0.16); }
.pack-card.is-best .btn { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.pack-units b, .pack-price { font-variant-numeric: tabular-nums; }
.packs[data-fx="wait"] .pack-card { opacity: 0; transform: translateY(28px); }
.packs[data-fx="in"] .pack-card { animation: planIn 0.8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--ci, 0) * 0.12s); }
@media (prefers-reduced-motion: reduce) { .pack-card, .pack-card::after { animation: none !important; transition: none !important; } .packs[data-fx] .pack-card { opacity: 1 !important; transform: none !important; } }

/* ---------- Book a demo: premium layout ---------- */
.contact.book { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 72px; align-items: center; }
.book-eyebrow { gap: 8px; height: 28px; padding: 0 14px; border-color: rgba(240, 184, 74, 0.45); color: var(--gold); background: var(--gold-tint); }
.book-live { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(240, 184, 74, 0.6); animation: bookLive 2s ease-out infinite; }
@keyframes bookLive { to { box-shadow: 0 0 0 9px rgba(240, 184, 74, 0); } }
.book-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; }
.book-meta li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 100px; border: 0.5px solid var(--line); background: var(--surface-2); font-size: 14px; color: var(--text); }
.book-meta svg, .book-times svg, .book-done-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.book-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; max-width: 540px; }
.book-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; border: 0.5px solid var(--line); background: rgba(var(--fg), 0.02); transition: border-color 0.3s, transform 0.3s; }
.book-steps li:hover { border-color: rgba(240, 184, 74, 0.4); transform: translateX(4px); }
.book-n { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--gold-tint); color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.book-steps b { display: block; color: var(--text); font-weight: 600; }
.book-steps p, .contact-intro .book-steps p { margin: 4px 0 0; max-width: none; font-size: 14px; color: var(--muted); }

.book-card { position: relative; border-radius: 26px; padding: 30px; background: linear-gradient(170deg, rgba(240, 184, 74, 0.1), transparent 40%), var(--surface);
  border: 0.5px solid rgba(240, 184, 74, 0.55); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 80px rgba(240, 184, 74, 0.12); }
.book-card .book-form { padding-top: 0; gap: 16px; }
.book-card-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.book-card-head p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.book-field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.book-field input, .book-field textarea { width: 100%; min-height: 46px; padding: 12px 14px; border-radius: 12px; border: 0.5px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; outline: 0; resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; }
.book-field input::placeholder, .book-field textarea::placeholder { color: var(--muted-dim); }
.book-field input:focus, .book-field textarea:focus { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.book-field input.is-invalid { border-color: #ff8a80; }
.book-card .book-pick legend { font-size: 14px; margin-bottom: 8px; }
.book-card .book-options label { height: 40px; border-radius: 12px; padding: 0 14px; }
.book-card .book-options label:has(input:checked) { background: var(--gold); color: var(--on-gold); box-shadow: 0 6px 20px rgba(240, 184, 74, 0.3); }
.book-days { display: grid; grid-template-columns: repeat(5, 1fr); }
.book-card .book-days label { flex-direction: column; justify-content: center; gap: 0; height: 64px; padding: 0; text-align: center; }
.book-days small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.book-days b { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.book-times { display: grid; grid-template-columns: 1fr 1fr; }
.book-card .book-times label { gap: 8px; justify-content: center; }
.book-card .book-times label:has(input:checked) svg { stroke: var(--on-gold); }
.book-submit { width: 100%; height: 52px; font-size: 16px; gap: 8px; }
.book-fine { margin-top: -6px; text-align: center; font-size: 13px; color: var(--muted); }
.book-done { display: grid; justify-items: center; gap: 12px; padding: 40px 10px; text-align: center; }
.book-done[hidden] { display: none; }
.book-done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--gold-tint); }
.book-done-icon svg { width: 26px; height: 26px; }
.book-done h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; }
.book-done p { color: var(--muted); max-width: 360px; }
@media (max-width: 960px) { .contact.book { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 520px) { .book-card { padding: 22px 18px; } .book-grid { grid-template-columns: 1fr; } .book-card .book-days label { height: 58px; } }

/* ---------- Home: AI analysis, Content Plan, Built for your team ---------- */
.hx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 110px 0 20px; }
.hx-flip .hx-copy { order: 2; }
.hx-eyebrow { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 100px; background: var(--gold-tint); color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hx .section-title { margin-top: 18px; }
.hx-lead { margin-top: 20px; max-width: 540px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.hx-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 580px; }
.hx-list li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 0.5px solid var(--line); background: rgba(var(--fg), 0.02); transition: border-color 0.3s, transform 0.3s; }
.hx-list li:hover { border-color: rgba(240, 184, 74, 0.45); transform: translateY(-2px); }
.hx-list b { font-weight: 600; color: var(--text); }
.hx-list b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--gold); }
.hx-list span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.hx-note { margin-top: 18px; font-size: 14px; color: var(--gold); }
.hx-visual { position: relative; }
.hx-visual::before { content: ""; position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 184, 74, 0.22), transparent); filter: blur(30px); pointer-events: none; }

/* AI analysis demo */
.ai-demo { position: relative; display: grid; grid-template-columns: 0.75fr 1fr; gap: 0; align-items: center; }
.ai-demo-post { position: relative; aspect-ratio: 9 / 15; border-radius: 22px; background: url(../assets/post-2.png) 50% 34% / 175% auto no-repeat, #111; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); border: 0.5px solid var(--line); transform: rotate(-3deg); }
.ai-demo-tag { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 100px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; }
.ai-demo-card { position: relative; margin-left: -40px; padding: 20px; border-radius: 20px; background: rgba(var(--surface-rgb), 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 0.5px solid rgba(240, 184, 74, 0.55); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(240, 184, 74, 0.14); display: grid; gap: 12px; }
.ai-demo-head { display: flex; align-items: center; gap: 8px; }
.ai-demo-head b { font-family: var(--font-display); font-size: 17px; }
.ai-demo-head small { margin-left: auto; padding: 3px 9px; border-radius: 100px; border: 0.5px solid var(--line); color: var(--muted); font-size: 12px; }
.ai-demo-spark { color: var(--gold); }
.ai-demo-row { display: grid; gap: 3px; padding-top: 10px; border-top: 0.5px solid var(--line-soft); }
.ai-demo-row span { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ai-demo-row p { font-size: 14px; line-height: 1.5; color: var(--text); }
.ai-demo-row.is-gold span { color: var(--gold); }
.ai-demo-row.is-gold p { color: var(--gold-light); }

/* Content Plan demo */
.cp-demo { position: relative; padding: 20px; border-radius: 22px; background: var(--surface); border: 0.5px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.cp-demo-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cp-demo-top b { font-family: var(--font-display); font-size: 18px; }
.cp-demo-top span { font-size: 13px; color: var(--gold); }
.cp-demo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cp-day { min-height: 190px; padding: 8px 6px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.cp-day small { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 2px; }
.cp-day.is-match { background: linear-gradient(180deg, rgba(240, 184, 74, 0.12), var(--surface-2)); }
.cp-day.is-drop { outline: 1.5px dashed rgba(240, 184, 74, 0.6); outline-offset: -3px; }
.cp-e { display: block; padding: 7px 7px; border-radius: 8px; font-style: normal; font-size: 12px; line-height: 1.3; color: var(--text); border-left: 3px solid; background: rgba(var(--fg), 0.05); overflow-wrap: anywhere; }
.cp-e.is-idea { border-color: #8b9bb4; } .cp-e.is-plan { border-color: var(--gold); } .cp-e.is-prod { border-color: #5aa9ff; } .cp-e.is-pub { border-color: #00d85b; }
.cp-e.is-ghost { border: 1px dashed rgba(255, 99, 99, 0.7); color: #ff9d9d; background: rgba(255, 99, 99, 0.06); }
.cp-drag { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); animation: cpDrag 4.5s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes cpDrag { 0%, 12% { transform: translate(130px, -70px) rotate(4deg); opacity: 0; } 25% { opacity: 1; } 55%, 100% { transform: none; opacity: 1; } }
.cp-demo-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.cp-demo-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: currentColor; }
.cp-demo-legend .is-idea::before { background: #8b9bb4; } .cp-demo-legend .is-plan::before { background: var(--gold); } .cp-demo-legend .is-prod::before { background: #5aa9ff; } .cp-demo-legend .is-pub::before { background: #00d85b; }

/* Built for your team */
.team-strip { padding: 110px 0 30px; text-align: center; }
.team-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; text-align: left; }
.team-tiles article { padding: 22px; border-radius: 18px; border: 0.5px solid var(--line); background: var(--surface); box-shadow: var(--inset-glow); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), border-color 0.3s; }
.team-tiles article:hover { transform: translateY(-5px); border-color: rgba(240, 184, 74, 0.45); }
.tt-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-tint); }
.tt-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.team-tiles h3 { margin-top: 16px; font-family: var(--font-display); font-size: 19px; }
.team-tiles p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1080px) {
  .hx { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 80px; }
  .hx-flip .hx-copy { order: 0; }
  .team-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hx-list { grid-template-columns: 1fr; }
  .ai-demo { grid-template-columns: 1fr; }
  .ai-demo-post { width: 62%; margin: 0 auto; }
  .ai-demo-card { margin: -60px 0 0; }
  .cp-demo { padding: 14px; overflow-x: auto; }
  .cp-demo-grid { min-width: 560px; }
  .team-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cp-drag { animation: none; } }
.hx-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.cp-demo-grid { gap: 5px; }
.cp-day { padding: 8px 4px; }
.cp-e { padding: 6px 6px; font-size: 11.5px; overflow-wrap: normal; word-break: normal; hyphens: auto; }
@media (max-width: 1080px) { .hx-flip { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Home v2: one story, one rhythm ---------- */
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 52px; }
.hero .hero-actions .btn-gold { margin-top: 0; }
.hero-actions .btn { min-width: 170px; }

/* section rhythm: same spacing and the same head (eyebrow + title + lead) everywhere */
.home-sec, .hx, .magic, .testimonials, .team-strip, .home-pricing, .faq { padding-top: 120px; padding-bottom: 0; }
.cta { padding: 120px 0 80px; }
.sec-head { display: grid; justify-items: center; gap: 0; text-align: center; max-width: 760px; margin: 0 auto; }
.sec-head .section-title { margin-top: 18px; }
.sec-head .hx-lead { margin-left: auto; margin-right: auto; }
.home-pricing > .hx-eyebrow { display: flex; width: max-content; margin: 0 auto 18px; height: 30px; padding: 0 16px; box-shadow: inset 0 0 0 1px rgba(240, 184, 74, 0.32); letter-spacing: 0.12em; font-size: 12px; font-weight: 700; }   /* centred pill (display: table broke the text's vertical centring) */
.home-pricing .section-title { margin-top: 18px; }
.faq-intro .hx-eyebrow { margin-bottom: 18px; }
.magic .section-title { white-space: normal; }
.magic-grid { margin-top: 56px; }

/* clients */
.clients { padding: 70px 0 0; text-align: center; }
.clients-label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.clients-row { list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 46px; margin: 22px 0 0; padding: 0; }
.clients-row li { display: flex; align-items: center; gap: 10px; opacity: 0.75; transition: opacity 0.3s; }
.clients-row li:hover { opacity: 1; }
.clients-row img { height: 34px; width: auto; filter: grayscale(1) brightness(1.6); }
.clients-row img.wide { height: 26px; }
.clients-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }

/* three tools */
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; }
.tool { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 22px; border: 0.5px solid var(--line); background: var(--surface); box-shadow: var(--inset-glow); color: inherit; overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), border-color 0.3s, box-shadow 0.3s; }
.tool::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 184, 74, 0.12), transparent 65%); }
.tool:hover { transform: translateY(-6px); border-color: rgba(240, 184, 74, 0.5); box-shadow: var(--inset-glow), 0 24px 50px rgba(0, 0, 0, 0.4); }
.tool:hover::after { opacity: 1; }
.tool-n { position: absolute; top: 22px; right: 26px; font-family: var(--font-display); font-weight: 700; font-size: 40px; color: rgba(var(--fg), 0.06); }
.tool-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gold-tint); }
.tool-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool h3 { margin-top: 20px; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; }
.tool p { margin-top: 10px; color: var(--muted); line-height: 1.6; }
.tool-tag { margin-top: auto; padding-top: 22px; font-size: 13px; color: var(--gold); }
.tool-tag::after { content: " →"; transition: margin 0.3s; }
.tool:hover .tool-tag::after { margin-left: 4px; }

/* library demo */
.lib-demo { position: relative; padding: 18px; border-radius: 22px; background: var(--surface); border: 0.5px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.lib-demo-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lib-demo-bar span { padding: 6px 12px; border-radius: 100px; font-size: 12.5px; background: var(--surface-2); border: 0.5px solid var(--line-soft); color: var(--muted); }
.lib-demo-bar span.is-on { background: var(--gold-tint); color: var(--gold); border-color: transparent; }
.lib-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lib-demo-grid figure { position: relative; margin: 0; aspect-ratio: 9 / 14; border-radius: 14px; overflow: hidden; background: var(--img) 50% 32% / 190% auto no-repeat, #0b0f1c; transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.lib-demo-grid figure:nth-child(2) { transform: translateY(18px); }
.lib-demo-grid figure:hover { transform: translateY(-6px); }
.lib-demo-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 10px; display: grid; gap: 2px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.lib-demo-grid figcaption b { font-size: 12px; color: var(--gold); }
.lib-demo-grid figcaption small { font-size: 12px; color: #fff; }

/* testimonials: three cards at once, rise in, light follows the cursor */
.testimonials .section-title { margin: 22px auto 0; }
.testimonials .rating { margin-top: 18px; }
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; text-align: left; }
.quote-grid .quote-card { flex: none; min-height: 0; padding: 28px; border-radius: 22px; cursor: default; overflow: hidden;
  border-color: var(--line); background: var(--surface); box-shadow: var(--inset-glow); transition: transform 0.4s cubic-bezier(.2, .8, .2, 1), border-color 0.3s, box-shadow 0.3s; }
.quote-grid .quote-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 184, 74, 0.12), transparent 65%); }
.quote-grid .quote-card:hover { transform: translateY(-6px); border-color: rgba(240, 184, 74, 0.5); box-shadow: inset 0 0 25px rgba(240, 184, 74, 0.15), 0 24px 50px rgba(0, 0, 0, 0.4); }
.quote-grid .quote-card:hover::after { opacity: 1; }
.quote-grid .quote-card .quote-icon { width: 40px; height: 30px; opacity: 1; }
.quote-grid .quote-card blockquote { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--text); }
.quote-grid .quote-card footer { padding-top: 26px; color: var(--muted); }
.quote-grid .quote-card footer img { opacity: 1; width: 40px; height: 44px; }
.quote-grid .quote-card footer img.wide { width: 58px; height: 40px; }
.quote-grid .quote-card footer span { font-size: 14px; line-height: 1.45; }

/* reveal on scroll (js/main.js adds .is-in) */
[data-reveal] .tool, [data-reveal] .quote-card, [data-reveal] .team-tiles article, .hx[data-reveal] .hx-copy, .hx[data-reveal] .hx-visual { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
[data-reveal].is-in .tool, [data-reveal].is-in .quote-card, [data-reveal].is-in .team-tiles article, .hx[data-reveal].is-in .hx-copy, .hx[data-reveal].is-in .hx-visual { opacity: 1; transform: none; }
[data-reveal].is-in .tool:nth-child(2), [data-reveal].is-in .quote-card:nth-child(2), [data-reveal].is-in .team-tiles article:nth-child(2), .hx[data-reveal].is-in .hx-visual { transition-delay: 0.12s; }
[data-reveal].is-in .tool:nth-child(3), [data-reveal].is-in .quote-card:nth-child(3), [data-reveal].is-in .team-tiles article:nth-child(3) { transition-delay: 0.24s; }
[data-reveal].is-in .team-tiles article:nth-child(4) { transition-delay: 0.36s; }
[data-reveal].is-in .tool:hover, [data-reveal].is-in .quote-card:hover, [data-reveal].is-in .team-tiles article:hover { transition-delay: 0s; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { [data-reveal] * { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* home-blog at the end, compact */
.home-blog-sm { padding-top: 40px; padding-bottom: 40px; }

@media (max-width: 1080px) {
  .tools, .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .home-sec, .hx, .magic, .testimonials, .team-strip, .home-pricing, .faq { padding-top: 88px; }
}
@media (max-width: 600px) {
  .clients-row { gap: 12px 26px; }
  .clients-name { font-size: 15px; }
  .hero-actions .btn { min-width: 0; flex: 1; }
}
.lib-demo-grid figure { aspect-ratio: 4 / 5; background: var(--img) 50% var(--y, 17%) / 105% auto no-repeat, #0b0f1c; }

/* ---------- Home v2.1: sections you can tell apart ---------- */
/* soft full-width bands on every other section (no hard lines: they fade in and out) */
main { position: relative; z-index: 0; }
.hx, .home-sec, .magic, .testimonials, .team-strip, .home-pricing, .faq { position: relative; padding-bottom: 110px; }
.band::before { content: ""; position: absolute; z-index: -1; top: -40px; bottom: -40px; left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.8), rgba(var(--surface-rgb), 0.55));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%); }
#what-is-scp { margin-top: 70px; }
.home-pricing { padding-top: 140px; }

/* one accent per tool: Library gold, AI blue, Content Plan green */
#library, .tool:nth-child(1) { --acc: 240, 184, 74; }
#ai-analysis, .tool:nth-child(2) { --acc: 167, 139, 250; }
#content-plan, .tool:nth-child(3) { --acc: 122, 162, 255; }
:is(#library, #ai-analysis, #content-plan) .hx-eyebrow { background: rgba(var(--acc), 0.16); color: rgb(var(--acc)); }
:is(#library, #ai-analysis, #content-plan) .hx-list b::before { background: rgb(var(--acc)); }
:is(#library, #ai-analysis, #content-plan) .hx-note { color: rgb(var(--acc)); }
:is(#library, #ai-analysis, #content-plan) .hx-list li:hover { border-color: rgba(var(--acc), 0.5); }
:is(#library, #ai-analysis, #content-plan) .hx-visual::before { background: radial-gradient(closest-side, rgba(var(--acc), 0.24), transparent); }
.tool .tool-ic { background: rgba(var(--acc), 0.16); }
.tool .tool-ic svg { stroke: rgb(var(--acc)); }
.tool .tool-tag { color: rgb(var(--acc)); }
.tool:hover { border-color: rgba(var(--acc), 0.55); }
.tool::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--acc), 0.14), transparent 65%); }
#ai-analysis .ai-demo-card { border-color: rgba(167, 139, 250, 0.55); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(167, 139, 250, 0.14); }
#ai-analysis .ai-demo-spark, #ai-analysis .ai-demo-row.is-gold span { color: rgb(167, 139, 250); }
#ai-analysis .ai-demo-row.is-gold p { color: #c9d8ff; }
:root[data-theme="light"] #ai-analysis .ai-demo-row.is-gold p { color: #3557b7; }

/* Built for your team: 2 × 2, roomy */
.team-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 48px auto 0; }
.team-tiles article { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; align-items: start; padding: 30px 32px; border-radius: 22px; }
.team-tiles .tt-ic { width: 56px; height: 56px; border-radius: 16px; grid-row: span 2; }
.team-tiles .tt-ic svg { width: 26px; height: 26px; }
.team-tiles h3 { margin-top: 2px; font-size: 21px; }
.team-tiles p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; }

/* click feedback: a gold ripple from the click point + a small press, on clickable things only */
.btn, .tool, .quote-grid .quote-card, .hx-list li, .team-tiles article, .acc-trigger { position: relative; overflow: hidden; }
.is-pressed { transform: scale(0.975) !important; transition: transform 0.12s ease !important; }
.click-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); z-index: 5;
  background: radial-gradient(circle, rgba(240, 184, 74, 0.45) 0%, rgba(240, 184, 74, 0.18) 45%, transparent 70%); animation: clickRipple 0.6s ease-out forwards; }
@keyframes clickRipple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@media (max-width: 760px) {
  .team-tiles { grid-template-columns: minmax(0, 1fr); }
  .team-tiles article { padding: 24px; grid-template-columns: 48px 1fr; column-gap: 16px; }
  .team-tiles .tt-ic { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .click-ripple { display: none; } .is-pressed { transform: none !important; } }
.ai-demo-post { background: url(../assets/ai-example-messi.jpg) 40% 50% / cover no-repeat, #111; aspect-ratio: 9 / 16; }
/* library mock-up: real top posts from the library (Messi 15.5M, Champions League 20.6M, NBA 10.6M) */
.lib-demo-grid .lib-ex-messi { background: url(../assets/lib-example-messi.jpg) 50% 12% / cover no-repeat, #0b0f1c; }
.lib-demo-grid .lib-ex-ucl { background: url(../assets/lib-example-ucl.jpg) 50% 45% / cover no-repeat, #0b0f1c; }
.lib-demo-grid .lib-ex-nba { background: url(../assets/lib-example-nba.jpg) 50% 32% / 165% auto no-repeat, #0b0f1c; }

/* ---------- Home → How it works: live Content Library ---------- */
.live-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; margin-top: 56px; }
.live-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.live-steps li { display: flex; gap: 16px; padding: 20px 22px; border-radius: 18px; border: 0.5px solid var(--line-soft); background: transparent; opacity: 0.55; transition: opacity 0.5s, border-color 0.5s, background 0.5s, transform 0.5s; }
.live-steps li.is-on { opacity: 1; border-color: rgba(240, 184, 74, 0.45); background: rgba(var(--fg), 0.03); transform: translateX(6px); }
.live-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gold-tint); color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.live-steps b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.live-steps p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }

.live-lib { position: relative; height: 640px; border-radius: 24px; overflow: hidden; background: var(--surface);
  border: 0.5px solid rgba(240, 184, 74, 0.45); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 80px rgba(240, 184, 74, 0.12); }
.live-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.live-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 100px; background: var(--surface-2); border: 0.5px solid var(--line); font-size: 13.5px; color: var(--muted); }
.live-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.live-search .is-typed { color: var(--text); }
.live-search .is-typed::after { content: ""; display: inline-block; width: 1.5px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--gold); animation: liveCaret 1s steps(1) infinite; }
@keyframes liveCaret { 50% { opacity: 0; } }
.live-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.live-count b { color: var(--gold); font-weight: 600; }
.live-chips { position: absolute; z-index: 3; left: 0; right: 0; top: 64px; display: flex; gap: 6px; padding: 0 18px 12px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 70%, transparent); }
.live-chips span { flex: none; padding: 6px 12px; border-radius: 100px; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 0.5px solid var(--line-soft); transition: background 0.35s, color 0.35s; }
.live-chips span.is-on { background: var(--gold); color: var(--on-gold); border-color: transparent; }

.live-cols { position: absolute; left: 14px; right: 14px; top: 108px; bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%); }
.live-col { overflow: hidden; }
.live-track { display: grid; gap: 12px; animation: liveScroll var(--dur, 45s) linear infinite; animation-play-state: paused; }
.live-col:nth-child(2) .live-track { margin-top: -90px; }
.is-playing .live-track { animation-play-state: running; }
@keyframes liveScroll { to { transform: translateY(calc(-50% - 6px)); } }
.live-card { position: relative; border-radius: 14px; overflow: hidden; background: #0b0f1c; border: 0.5px solid var(--line-soft); transition: opacity 0.5s, filter 0.5s, border-color 0.3s; }
.live-card.is-dim { opacity: 0.25; filter: grayscale(0.6); }
.live-img { aspect-ratio: 9 / 13; background-size: cover; background-position: 50% 35%; }
.live-sport { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, 0.6); color: #fff; backdrop-filter: blur(6px); }
.live-save { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 100px; font-size: 11px; background: rgba(255, 255, 255, 0.14); color: #fff; backdrop-filter: blur(6px); }
.live-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 8px 8px; display: grid; gap: 5px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.88)); }
.live-meta small { font-size: 11.5px; font-weight: 600; color: #fff; }
.live-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.live-tags em { font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 100px; background: rgba(240, 184, 74, 0.9); color: #1a1408; opacity: 0; transform: translateY(6px) scale(0.9); transition: opacity 0.35s, transform 0.35s; transition-delay: calc(var(--k) * 0.09s); }
.live-card.is-tagged .live-tags em { opacity: 1; transform: none; }
.live-card.is-scan { border-color: rgba(240, 184, 74, 0.9); box-shadow: 0 0 0 1px rgba(240, 184, 74, 0.6), 0 0 30px rgba(240, 184, 74, 0.35); }

.live-beam { position: absolute; z-index: 2; left: 0; right: 0; top: 46%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  box-shadow: 0 0 18px rgba(240, 184, 74, 0.8), 0 0 60px rgba(240, 184, 74, 0.35); pointer-events: none; }
.live-beam::before { content: ""; position: absolute; left: 0; right: 0; top: -60px; height: 60px; background: linear-gradient(180deg, transparent, rgba(240, 184, 74, 0.10)); }
.live-beam span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px;
  background: var(--gold); color: var(--on-gold); font-size: 13px; font-weight: 600; box-shadow: 0 6px 24px rgba(240, 184, 74, 0.5); }
.live-beam svg { width: 14px; height: 14px; fill: currentColor; }

.live-toast { position: absolute; z-index: 4; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 100px;
  background: rgba(var(--surface-rgb), 0.92); backdrop-filter: blur(12px); border: 0.5px solid rgba(240, 184, 74, 0.55); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 140%); opacity: 0; transition: transform 0.6s cubic-bezier(.2, 1.2, .3, 1), opacity 0.4s; white-space: nowrap; }
.live-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.live-toast i { width: 12px; height: 12px; border-radius: 50%; background: #00d85b; box-shadow: 0 0 0 0 rgba(0, 216, 91, 0.6); animation: bookLive 1.6s ease-out infinite; }
.live-toast small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.live-toast b { font-size: 14px; color: var(--gold); }

@media (max-width: 1080px) { .live-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .live-steps li.is-on { transform: none; } }
@media (max-width: 600px) {
  .live-lib { height: 540px; }
  .live-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-col:nth-child(3) { display: none; }
  .live-count { display: none; }
}

/* ---------- Home FAQ: numbered questions; contact / demo forms open in the same place ---------- */
.faq-home .faq-grid { align-items: start; }
.faq-home .faq-intro { position: sticky; top: 110px; }
.faq-home .faq-intro p { margin-top: 22px; }
.faq-stage { position: relative; min-height: 520px; }
.faq-pane { animation: faqIn 0.45s cubic-bezier(.2, .8, .2, 1); }
.faq-pane[hidden] { display: none !important; }
@keyframes faqIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.faq-home .acc-item { border-radius: 16px; border: 0.5px solid var(--line); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.faq-home .acc-item:hover { border-color: rgba(240, 184, 74, 0.35); }
.faq-home .acc-item.is-open { border-color: rgba(240, 184, 74, 0.55); background: linear-gradient(170deg, rgba(240, 184, 74, 0.08), transparent 55%), var(--surface); box-shadow: var(--inset-glow), 0 18px 40px rgba(0, 0, 0, 0.25); }
.faq-home .acc-trigger { gap: 16px; }
.faq-n { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--muted-dim); transition: color 0.3s; }
.faq-home .acc-item.is-open .faq-n { color: var(--gold); }
.faq-q { flex: 1; text-align: left; }
.faq-home .acc-panel p { padding-left: 67px; line-height: 1.65; }
.faq-home .acc-panel b { color: var(--text); font-weight: 600; }
.faq-form-pane { padding: 30px; border-radius: 24px; background: linear-gradient(170deg, rgba(240, 184, 74, 0.1), transparent 40%), var(--surface);
  border: 0.5px solid rgba(240, 184, 74, 0.55); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 70px rgba(240, 184, 74, 0.1); }
.faq-form-pane h3 { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.faq-form-sub { margin-top: 6px; color: var(--muted); font-size: 15px; }
.faq-form { padding-top: 22px; gap: 14px; }
.faq-back { font-size: 14px; color: var(--muted); transition: color 0.2s; }
.faq-back:hover { color: var(--gold); }
.faq-form-pane .book-days { display: grid; grid-template-columns: repeat(5, 1fr); }
.faq-form-pane .book-options label { height: 40px; border-radius: 12px; justify-content: center; }
.faq-form-pane .book-days label { flex-direction: column; height: 60px; gap: 0; }
.faq-form-pane .book-options label:has(input:checked) { background: var(--gold); color: var(--on-gold); }
.faq-form-pane .book-times { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .faq-home .faq-intro { position: static; } .faq-stage { min-height: 0; } }
@media (max-width: 520px) { .faq-form-pane { padding: 22px 16px; } .faq-home .acc-panel p { padding-left: 37px; } }

/* ---------- Home demos (js/home-demos.js): AI analysis writes itself, Content Plan fills itself ---------- */
.ai-demo-card.is-live { min-height: 380px; align-content: start; }
.ai-demo-card.is-live .ai-demo-row { opacity: 0; }
.ai-demo-card.is-live .ai-demo-row.is-shown { opacity: 1; transition: opacity 0.25s; }
.ai-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: #a78bfa; animation: liveCaret 0.8s steps(1) infinite; }
.ai-unlock-mock { display: grid; gap: 10px; justify-items: start; padding-top: 6px; }
.ai-unlock-mock[hidden], .ai-reading[hidden] { display: none; }
.ai-unlock-btn-mock { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 100px; background: #a78bfa; color: #0b1020; font-weight: 600; font-size: 14px; transition: transform 0.15s; }
.ai-unlock-btn-mock.is-press { transform: scale(0.95); }
.ai-unlock-btn-mock .rip { position: absolute; width: 260px; height: 260px; left: 70%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(255, 255, 255, 0.6), transparent 65%); animation: clickRipple 0.6s ease-out forwards; }
.ai-unlock-mock small { color: var(--muted); font-size: 12.5px; }
.ai-reading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.ai-reading i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, 0.3); border-top-color: #a78bfa; animation: aiSpin 0.8s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-demo-post::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 45%, rgba(167, 139, 250, 0.55) 50%, transparent 55%); background-size: 100% 220%; opacity: 0; pointer-events: none; }
.ai-demo.is-reading .ai-demo-post::after { opacity: 1; animation: aiScan 1.3s linear infinite; }
@keyframes aiScan { from { background-position: 0 100%; } to { background-position: 0 -120%; } }

.cp-demo { padding-top: 86px; }
.cp-tray { position: absolute; left: 20px; right: 20px; top: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); border: 0.5px dashed rgba(122, 162, 255, 0.5); }
.cp-tray > small { font-size: 12px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.cp-thumb { width: 38px; height: 50px; border-radius: 8px; background-size: cover; background-position: 50% 30%; border: 0.5px solid var(--line); flex: none; transition: opacity 0.3s, transform 0.3s; }
.cp-thumb.is-gone { opacity: 0.15; transform: scale(0.85); }
.cp-fly { position: fixed; z-index: 150; width: 38px; height: 50px; border-radius: 8px; background-size: cover; background-position: 50% 30%; pointer-events: none;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 0 2px #7aa2ff; transition: transform 0.9s cubic-bezier(.3, .9, .25, 1), opacity 0.25s; }
.cp-day { min-height: 230px; transition: background 0.3s, box-shadow 0.3s; }
.cp-day.is-target { box-shadow: inset 0 0 0 1.5px #7aa2ff; background: rgba(122, 162, 255, 0.08); }
.cp-e { transition: border-color 0.4s, background 0.4s; }
.cp-e.has-img { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 5px; align-items: center; }
.cp-e.has-img b { width: 18px; height: 24px; border-radius: 4px; background-size: cover; background-position: 50% 30%; }
.cp-e.is-new { animation: cpPop 0.45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cpPop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.cp-demo-top span.is-bump { display: inline-block; animation: cpBump 0.5s ease; }
@keyframes cpBump { 40% { transform: scale(1.15); color: #7aa2ff; } }
@media (max-width: 600px) { .cp-tray { overflow-x: auto; } }
.quote-clubs { max-width: 640px; margin: 16px auto 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.quote-clubs b { color: var(--text); font-weight: 600; }
#content-plan { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 56px; }
#content-plan .cp-e { font-size: 11px; padding: 5px 5px; }
@media (max-width: 1080px) { #content-plan { grid-template-columns: minmax(0, 1fr); } }

/* AI analysis: the photo is read (sweep + grid, detection boxes, progress) */
.ai-demo-post { overflow: hidden; }
.ai-demo-post::after { display: none; }
.ai-vision { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.ai-grid { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s;
  background-image: linear-gradient(rgba(167, 139, 250, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, 0.18) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 var(--sweep, 0%), transparent calc(var(--sweep, 0%) + 1%)); mask-image: linear-gradient(180deg, #000 var(--sweep, 0%), transparent calc(var(--sweep, 0%) + 1%)); }
.ai-sweep { position: absolute; left: -10%; right: -10%; height: 3px; top: 0; opacity: 0; background: linear-gradient(90deg, transparent, #9cb8ff, #fff, #9cb8ff, transparent);
  box-shadow: 0 0 22px 4px rgba(167, 139, 250, 0.75); }
.ai-sweep::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 90px; background: linear-gradient(0deg, rgba(167, 139, 250, 0.28), transparent); }
.ai-demo.is-reading .ai-grid { opacity: 1; animation: aiGrid 4.2s linear forwards; }
.ai-demo.is-reading .ai-sweep { opacity: 1; animation: aiSweep 2.1s ease-in-out 2 alternate; }
.ai-demo.is-read .ai-grid { opacity: 0.35; --sweep: 100%; }
@property --sweep { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@keyframes aiGrid { from { --sweep: 0%; } to { --sweep: 100%; } }
@keyframes aiSweep { from { top: 0; } to { top: 100%; } }
.ai-box { position: absolute; border: 1.5px solid #a78bfa; border-radius: 6px; opacity: 0; transform: scale(1.25); transition: opacity 0.35s, transform 0.45s cubic-bezier(.2, 1.3, .4, 1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 18px rgba(167, 139, 250, 0.45); background: rgba(167, 139, 250, 0.08); }
.ai-box em { font-style: normal; position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 4px; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: #a78bfa; color: #0b1020; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; }
.ai-box.is-on { opacity: 1; transform: none; }
.ai-demo.is-read .ai-box.is-on { opacity: 0.85; }
.ai-progress { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px;
  background: rgba(11, 16, 32, 0.78); backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
.ai-progress b { font-size: 12px; color: #ddd3ff; min-width: 34px; font-variant-numeric: tabular-nums; }
.ai-progress i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ai-progress em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a78bfa, #ddd3ff); }
.ai-demo.is-reading .ai-progress { opacity: 1; transform: none; }
.ai-demo-card.is-live { min-height: 0; transition: transform 0.7s cubic-bezier(.2, .8, .2, 1); }
.ai-demo.is-reading .ai-demo-card, .ai-demo:not(.is-read) .ai-demo-card.is-live { transform: translate(56px, 150px); }
@media (max-width: 600px) { .ai-demo.is-reading .ai-demo-card, .ai-demo:not(.is-read) .ai-demo-card.is-live { transform: translateY(40px); } }

/* Content Library demo: real crests, a cursor picks filters, the grid shows that filter's top posts */
.lib-demo { padding: 18px; overflow: hidden; }
.lib-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lib-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 100px; background: var(--surface-2); border: 0.5px solid var(--line); font-size: 13px; color: var(--muted); }
.lib-search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lib-showing { font-size: 13px; color: var(--muted); white-space: nowrap; }
.lib-showing b { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.lib-crests { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.lib-crest { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 14px; border: 0.5px solid var(--line-soft); background: var(--surface-2); cursor: default; transition: border-color 0.3s, background 0.3s, transform 0.15s; }
.lib-crest img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.lib-crest span { font-size: 10.5px; line-height: 1.15; color: var(--muted); text-align: center; }
.lib-crest.is-on { border-color: var(--gold); background: var(--gold-tint); box-shadow: 0 0 18px rgba(240, 184, 74, 0.25); }
.lib-crest.is-on span { color: var(--gold); }
.lib-crest.is-press { transform: scale(0.93); }
.lib-demo-grid { transition: opacity 0.25s, transform 0.25s; }
.lib-demo-grid.is-swap { opacity: 0; transform: translateY(8px) scale(0.98); }
.lib-demo-grid figure { animation: libIn 0.5s cubic-bezier(.2, .8, .2, 1) both; }
.lib-demo-grid figure:nth-child(2) { animation-delay: 0.07s; }
.lib-demo-grid figure:nth-child(3) { animation-delay: 0.14s; }
@keyframes libIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.lib-cursor { position: absolute; z-index: 6; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; transform: translate(70%, 60%); transition: transform 0.7s cubic-bezier(.3, .8, .3, 1), opacity 0.4s; pointer-events: none; }
.lib-demo.is-live .lib-cursor { opacity: 1; }
.lib-cursor svg { width: 22px; height: 22px; fill: #fff; stroke: #0b1020; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
.lib-cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; transform: scale(0.4); }
.lib-cursor.is-click::after { animation: libClick 0.45s ease-out; }
@keyframes libClick { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.8); } }
@media (max-width: 600px) { .lib-crests { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lib-showing { display: none; } }
.lib-crest img { width: 36px; height: 36px; padding: 5px; border-radius: 50%; background: #f4f6fb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); filter: none; }

/* Content Plan demo: week progress bar, a fuller week */
.cp-demo-top { align-items: center; gap: 16px; }
.cp-progress { flex: 1; max-width: 300px; display: grid; gap: 6px; justify-items: end; }
.cp-progress small { font-size: 12.5px; color: #7aa2ff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-progress small.is-bump { animation: cpBump 0.5s ease; }
.cp-progress i { width: 100%; height: 8px; border-radius: 8px; background: rgba(var(--fg), 0.08); overflow: hidden; }
.cp-progress em { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #3b82f6, #7aa2ff); box-shadow: 0 0 12px rgba(122, 162, 255, 0.55); transition: width 0.6s cubic-bezier(.2, .8, .2, 1); }
.cp-progress em.is-full { background: linear-gradient(90deg, #7aa2ff, #c9d8ff); }
#content-plan .cp-day { min-height: 268px; gap: 5px; }
#content-plan .cp-e.has-img { grid-template-columns: 20px minmax(0, 1fr); }
#content-plan .cp-e.has-img b { width: 20px; height: 27px; }
.cp-tray .cp-thumb { width: 34px; height: 46px; }

/* ---------- Pricing cards: what you gain, months free, reassurance ---------- */
.plan-sub b { color: var(--text); font-weight: 600; }
.plan-sub .plan-free { color: var(--gold); }
.plan-edge { margin: -0.3rem 0 1rem; text-align: center; padding: 0.45rem 0.7rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; line-height: 1.35; color: var(--gold); background: var(--gold-tint); border: 1px solid var(--gold-dim); }
.plan-price span { font-size: 0.85rem; }
.plan-assure { max-width: 860px; margin: 1.6rem auto 0; text-align: center; }
.plan-assure-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; margin: 0; font-size: 0.92rem; color: var(--muted); }
.plan-assure-row span { white-space: nowrap; }
.plan-quote { margin: 1.1rem auto 0; max-width: 620px; }
.plan-quote blockquote { margin: 0; font-size: 0.98rem; font-style: italic; color: var(--text); line-height: 1.5; }
.plan-quote figcaption { margin-top: 0.4rem; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em; }
.plan-cta { white-space: normal; text-align: center; line-height: 1.25; }

/* ---------- Home Content Plan v3: posts as small tiles (image on top, title below), more air ---------- */
#content-plan .cp-demo { padding: 92px 22px 20px; }
#content-plan .cp-demo-top { margin-bottom: 16px; }
#content-plan .cp-demo-grid { gap: 8px; }
#content-plan .cp-day { min-height: 340px; padding: 10px 6px 8px; gap: 7px; border-radius: 14px; }
#content-plan .cp-day small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
#content-plan .cp-e { position: relative; padding: 6px 6px 7px; border: 0; border-radius: 10px; font-size: 11px; font-weight: 500; line-height: 1.25;
  background: rgba(var(--fg), 0.06); box-shadow: inset 0 0 0 0.5px rgba(var(--fg), 0.08); hyphens: manual; overflow-wrap: normal; word-break: normal; }
#content-plan .cp-e.has-img { display: flex; flex-direction: column; gap: 6px; }
#content-plan .cp-e.has-img b { width: 100%; height: 38px; border-radius: 6px; background-size: cover; background-position: 50% 30%; }
/* status: a dot on the corner of the image instead of a heavy side bar */
#content-plan .cp-e::before { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--st, #8b9bb4); box-shadow: 0 0 0 2px rgba(10, 14, 26, 0.85), 0 0 8px var(--st, transparent); transition: background 0.4s, box-shadow 0.4s; }
#content-plan .cp-e.is-idea { --st: #8b9bb4; } #content-plan .cp-e.is-plan { --st: var(--gold); } #content-plan .cp-e.is-prod { --st: #5aa9ff; } #content-plan .cp-e.is-pub { --st: #00d85b; }
#content-plan .cp-e.is-ghost { padding: 8px 6px; border: 1px dashed rgba(255, 99, 99, 0.6); box-shadow: none; font-size: 10.5px; }
#content-plan .cp-e.is-ghost::before { display: none; }
#content-plan .cp-demo-legend { margin-top: 16px; }
#content-plan .cp-demo-legend span::before { border-radius: 50%; }
/* statuses as in the real Content Plan (planned blue, in production gold) + hover preview affordance */
#content-plan .cp-e.is-plan { --st: #7aa7ff; } #content-plan .cp-e.is-prod { --st: #f8cc75; }
#content-plan .cp-demo-legend .is-plan::before { background: #7aa7ff; } #content-plan .cp-demo-legend .is-prod::before { background: #f8cc75; }
#content-plan .cp-e[data-k] { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; }
#content-plan .cp-e[data-k]:hover { transform: translateY(-2px); background: rgba(var(--fg), 0.1); box-shadow: inset 0 0 0 1px rgba(122, 162, 255, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35); }
#content-plan .cp-demo-legend { align-items: center; }
#content-plan .cp-hint { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted-dim); }
@media (hover: none) { #content-plan .cp-hint { display: none; } }

/* ---------- Pricing v2 (?after): only what differs; rows aligned across cards ---------- */
.plans.is-v2 { grid-template-rows: auto auto auto auto auto auto; row-gap: 0; }
.plan-card.v2 { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; padding: 28px 22px 24px; }
.plan-card.v2 h3 { font-size: 20px; line-height: 1.2; align-self: end; }
.plan-card.v2 .plan-blurb { min-height: 0; margin-top: 6px; font-size: 14px; }
.plan-card.v2 .plan-price { margin-top: 22px; }
.plan-card.v2 .plan-sub { margin: 4px 0 18px; }
.plan-card.v2 .plan-cta { align-self: start; }
.plan-tools { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 0.5px solid var(--line-soft); display: grid; gap: 12px; }
.pt { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.pt i { width: 26px; height: 26px; border-radius: 8px; flex: none; background: rgba(var(--c), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--c), 0.45); position: relative; }
.pt i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 10px rgba(var(--c), 0.8); }
.pt em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 600; color: rgb(var(--c)); }
.pt-lib { --c: 240, 184, 74; } .pt-cp { --c: 122, 162, 255; } .pt-ai { --c: 167, 139, 250; }
.pt.is-off { color: var(--muted-dim); }
.pt.is-off i { background: rgba(var(--fg), 0.04); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.08); }
.pt.is-off i::after { background: rgba(var(--fg), 0.18); box-shadow: none; }
.plan-common { flex-basis: 100%; margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 1000px) { .plans.is-v2 { grid-template-rows: none; } .plan-card.v2 { grid-row: auto; grid-template-rows: none; } }
/* plan tools: a check instead of a dot (a faint dash when the tool isn't included) */
.pt i::after { width: 14px; height: 14px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 4px rgba(var(--c), 0.7));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.pt.is-off i::after { width: 10px; height: 2px; border-radius: 2px; -webkit-mask: none; mask: none; filter: none; }
/* under the cards: a single line */
.plan-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem; max-width: none; margin: 1.6rem auto 0; font-size: 0.92rem; color: var(--muted); }
.plan-assure span { white-space: nowrap; }
/* cards now have 7 rows (the note under the tools); nothing below the cards */
.plans.is-v2 { grid-template-rows: repeat(7, auto); }
.plan-card.v2 { grid-row: span 7; }
.plan-card.v2 .plan-note { margin: 16px 0 0; font-size: 12px; color: var(--muted-dim); }
.plan-card.v2 .plan-note:empty { margin: 0; }
.plan-card.v2 .plan-note { margin: 8px 0 0; text-align: center; }
.plan-card.v2 .plan-tools { margin-top: 18px; }
.plan-card.v2 .plan-price span, .plan-card.v2 .plan-sub { white-space: nowrap; }
/* three cards: rows stay aligned across the cards down to 861px (four cards drop that at 1000px) */
@media (min-width: 861px) and (max-width: 1000px) { .plans.is-3.is-v2 { grid-template-rows: repeat(7, auto); } .plans.is-3 .plan-card.v2 { grid-row: span 7; grid-template-rows: subgrid; } }
/* FAQ forms: an obvious way back to the questions */
.faq-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 100px; border: 0.5px solid var(--line); background: rgba(var(--fg), 0.05); color: var(--text); font-size: 13px; font-weight: 500; }
.faq-back:hover { border-color: rgba(240, 184, 74, 0.55); color: var(--gold); }
.faq-intro .actions .btn.is-active { box-shadow: 0 0 0 2px var(--bg, #0b0f1c), 0 0 0 4px rgba(240, 184, 74, 0.7); }
.faq-intro .actions { flex-wrap: wrap; }
.faq-intro .actions .faq-back-intro[hidden] { display: none; }

/* ---------- Footer v2: newsletter card, brand + live numbers, three link columns, big faded wordmark ---------- */
.site-footer.sf { position: relative; overflow: hidden; margin-top: 120px; padding: 0 0 0; background: linear-gradient(180deg, transparent, rgba(240, 184, 74, 0.05) 70%, rgba(240, 184, 74, 0.09)); }
.sf::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1100px, 90%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(240, 184, 74, 0.6), transparent); }
.sf .container { position: relative; z-index: 1; }
.sf-news { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-top: 64px; padding: 36px 40px; border-radius: 24px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(240, 184, 74, 0.14), transparent 55%), var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.3); box-shadow: var(--inset-glow), 0 24px 60px rgba(0, 0, 0, 0.3); }
.sf-news h2 { margin: 12px 0 8px; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.sf-news-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.sf-news-row { display: flex; gap: 8px; padding: 6px; border-radius: 100px; background: rgba(var(--fg), 0.05); border: 0.5px solid var(--line); transition: border-color 0.2s, box-shadow 0.2s; }
.sf-news-row:focus-within { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 4px rgba(240, 184, 74, 0.12); }
.sf-news-row input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.sf-news-row .btn { flex: none; }
.sf-news-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.sf-news-consent input { margin-top: 2px; accent-color: var(--gold); }
.sf-news-msg { margin: 10px 0 0; font-size: 13px; color: #ff8a80; }
.sf-news-msg.is-ok { color: #3ddc97; font-weight: 600; }
.sf-main { display: grid; grid-template-columns: 1.2fr 1.4fr; gap: 56px; margin-top: 72px; }
.sf-brand .footer-brand { font-size: 28px; gap: 14px; }
.sf-brand .footer-brand img { width: 44px; height: 44px; }
.sf-brand > p { margin: 18px 0 0; max-width: 420px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.sf-stats { list-style: none; display: flex; gap: 28px; margin: 26px 0 0; padding: 0; }
.sf-stats li { display: grid; gap: 2px; }
.sf-stats b { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--gold); font-variant-numeric: tabular-nums; }
.sf-stats span { font-size: 12.5px; color: var(--muted); text-transform: lowercase; }
.sf-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sf-cols h3 { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dim); }
.sf-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-cols a { font-size: 15px; color: var(--text); opacity: 0.85; transition: color 0.2s, opacity 0.2s; }
.sf-cols a:hover { color: var(--gold); opacity: 1; }
.sf-cols .sf-try { color: var(--gold); opacity: 1; font-weight: 600; }
.sf-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 64px; padding: 22px 0; border-top: 0.5px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.sf-bottom p { margin: 0; }
.sf-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.sf-bottom a { color: var(--muted); transition: color 0.2s; }
.sf-bottom a:hover { color: var(--text); }
.sf-social { display: flex; gap: 10px; margin-top: 18px; }
.sf-social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.sf-social a:hover { color: var(--gold); }
.sf-social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-word { position: relative; z-index: 0; margin: -8px 0 -0.22em; text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 8.6vw, 140px); line-height: 1; letter-spacing: -0.045em;
  background: linear-gradient(180deg, rgba(240, 184, 74, 0.22), rgba(240, 184, 74, 0.02) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 960px) {
  .sf-news { grid-template-columns: 1fr; gap: 22px; padding: 28px 24px; }
  .sf-main { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 560px) {
  .sf-cols { grid-template-columns: 1fr 1fr; }
  .sf-news-row { flex-direction: column; border-radius: 18px; }
  .sf-news-row input { padding: 12px 14px; }
  .sf-stats { gap: 20px; }
  .sf-bottom { flex-direction: column; align-items: flex-start; }
}
/* FAQ: "new posts every day" stands out */
.faq-home .acc-panel p.faq-daily { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.faq-daily b { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; background: rgba(61, 220, 151, 0.1); border: 0.5px solid rgba(61, 220, 151, 0.45); color: #3ddc97; font-size: 13.5px; font-weight: 600; }
.faq-daily b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); animation: faqLive 2s ease-out infinite; }
@keyframes faqLive { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); } }
@media (prefers-reduced-motion: reduce) { .faq-daily b::before { animation: none; } }
.faq-home .acc-panel p:has(+ .faq-daily) { padding-bottom: 0; }
/* FAQ 02: the networks with their logos */
.faq-home .acc-panel p.faq-nets { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 0; margin-top: 14px; max-width: none; }
.faq-net { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 100px; background: rgba(var(--fg), 0.05); border: 0.5px solid var(--line); font-size: 13px; font-weight: 500; color: var(--text); }
.faq-net .lf-pfi { width: 17px; height: 17px; }
.faq-net .lf-pfi.lf-pf-instagram { width: 22px; height: 22px; margin: -2.5px; }
.faq-home .acc-panel p:has(+ .faq-nets) { padding-bottom: 0; }
.faq-net { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 12px; transition: transform 0.2s, border-color 0.2s; }
.faq-net:hover { transform: translateY(-2px); border-color: rgba(var(--fg), 0.25); }
.faq-net .lf-pfi { width: 19px; height: 19px; }
.faq-net .lf-pfi.lf-pf-instagram { width: 25px; height: 25px; margin: -3px; }
/* FAQ 04: the AI analysis as three steps (AI purple) */
.faq-steps { list-style: none; counter-reset: fs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 14px 37px 4px 67px; position: relative; }
.faq-steps li { counter-increment: fs; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px; border-radius: 14px; background: rgba(167, 139, 250, 0.07); border: 0.5px solid rgba(167, 139, 250, 0.3); }
.faq-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 26px; z-index: 1; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 0.5px solid rgba(167, 139, 250, 0.45); color: rgb(167, 139, 250); font-size: 10px; }
.faq-steps li::before { content: counter(fs); position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700; color: rgba(167, 139, 250, 0.7); }
.fs-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; margin-bottom: 6px; background: rgba(167, 139, 250, 0.16); color: rgb(167, 139, 250); }
.fs-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faq-steps b { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.faq-steps small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.fs-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fs-tags em { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 100px; background: rgba(167, 139, 250, 0.14); color: #d7ccff; }
.faq-home .acc-panel p:has(+ .faq-steps) { padding-bottom: 0; }
.faq-home .acc-panel p.faq-after { margin-top: 12px; }
@media (max-width: 640px) {
  .faq-steps { grid-template-columns: 1fr; padding-left: 37px; }
  .faq-steps li:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -13px; }
}
.faq-home .acc-panel p:has(+ .faq-after) { padding-bottom: 0; }

/* ---------- Home FAQ: title on top, questions in two blocks ---------- */
.faq-split .faq-grid { grid-template-columns: 1fr; gap: 36px; }
.faq-split .faq-intro { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
.faq-split .faq-intro > :not(.actions) { grid-column: 1; }
.faq-split .faq-intro .actions { grid-column: 2; grid-row: 1 / span 3; align-self: end; justify-content: flex-end; margin: 0; }
.faq-split .faq-intro h2 br { display: none; }
.faq-split .faq-intro p { margin-top: 14px; max-width: 640px; }
.faq-split .faq-stage { min-height: 0; }
.faq-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.faq-block-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.faq-block-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(240, 184, 74, 0.45), transparent); }
.faq-split .faq-form-pane { max-width: 760px; margin: 0 auto; }
.faq-split .faq-steps { grid-template-columns: 1fr; }
.faq-split .faq-steps li:not(:last-child)::after { content: "↓"; right: auto; left: 22px; top: auto; bottom: -13px; }
.faq-split .faq-steps li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.faq-split .faq-steps .fs-ico { margin: 0; }
.faq-split .faq-steps small, .faq-split .faq-steps .fs-tags { flex-basis: 100%; padding-left: 40px; margin-top: -4px; }
@media (max-width: 960px) {
  .faq-split .faq-intro { grid-template-columns: 1fr; }
  .faq-split .faq-intro .actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 18px; }
  .faq-blocks { grid-template-columns: 1fr; }
}
.faq-split .faq-intro .hx-eyebrow { justify-self: start; }
/* the "Back to questions" button goes under Contact / Book a demo so the title stays on one line */
.faq-split .faq-intro .actions { max-width: 340px; }
.faq-split .faq-intro .faq-back-intro { order: 3; }
/* footer: the logo mark at the bottom centre instead of the big wordmark (room for the home dock underneath) */
.sf-word { display: none; }
.sf-mark { display: flex; justify-content: center; padding: 8px 0 40px; }
.sf-mark img { width: 46px; height: 46px; opacity: 0.85; filter: drop-shadow(0 0 18px rgba(240, 184, 74, 0.35)); }
body:has(.dock) .sf-mark { padding-bottom: 110px; }

/* ---------- Home stats v2: four cards, each with a small live visual ---------- */
.stats.stats-v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 72px; padding-bottom: 40px; }
.stats-v2 .stat { min-height: 0; padding: 0; border: 0; }
.stats-v2 .stat + .stat { border-left: 0; }
.stats-v2 .stat::before { display: none; }
.sv-card { position: relative; display: flex; flex-direction: column; padding: 14px 14px 20px !important; border-radius: 22px; overflow: hidden;
  background: var(--surface); border: 0.5px solid var(--line) !important; box-shadow: var(--inset-glow);
  transition: border-color 0.5s, box-shadow 0.5s, transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.sv-card.is-active { border-color: rgba(240, 184, 74, 0.55) !important; box-shadow: var(--inset-glow), 0 18px 44px -18px rgba(240, 184, 74, 0.45); transform: translateY(-3px); }
.sv-vis { position: relative; height: 92px; border-radius: 14px; overflow: hidden; margin-bottom: 18px; background: rgba(var(--fg), 0.035); border: 0.5px solid var(--line-soft); }
.stats-v2 .stat-num { padding: 0 8px; font-size: 40px; line-height: 1; }
.stats-v2 .stat-label { margin-top: 8px; padding: 0 8px; max-width: none; font-family: var(--font-body, inherit); font-size: 14.5px; line-height: 1.4; letter-spacing: 0; }
.stats-v2 .stat.is-active .stat-label { color: var(--text); }
/* 1 · crests */
.sv-crests { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sv-crests img, .sv-crests span { width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; object-fit: contain; padding: 7px; background: #fff; box-shadow: 0 0 0 3px var(--surface), 0 6px 14px rgba(0, 0, 0, 0.35); animation: svBob 3.6s ease-in-out infinite; }
.sv-crests img:first-child { margin-left: 0; }
.sv-crests img:nth-child(2) { animation-delay: 0.2s; } .sv-crests img:nth-child(3) { animation-delay: 0.4s; } .sv-crests img:nth-child(4) { animation-delay: 0.6s; } .sv-crests img:nth-child(5) { animation-delay: 0.8s; } .sv-crests img:nth-child(6) { animation-delay: 1s; }
.sv-crests span { display: grid; place-items: center; padding: 0; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: 20px; animation-delay: 1.2s; }
@keyframes svBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* 2 · filter chips lighting up in turn */
.sv-chips { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 10px; }
.sv-chips i { font-style: normal; font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 100px; color: var(--muted); background: rgba(var(--fg), 0.05); border: 0.5px solid var(--line); animation: svChip 6s ease-in-out infinite; }
.sv-chips i:nth-child(2) { animation-delay: 1s; } .sv-chips i:nth-child(3) { animation-delay: 2s; } .sv-chips i:nth-child(4) { animation-delay: 3s; } .sv-chips i:nth-child(5) { animation-delay: 4s; } .sv-chips i:nth-child(6) { animation-delay: 5s; }
@keyframes svChip { 0%, 22%, 100% { color: var(--muted); background: rgba(var(--fg), 0.05); border-color: var(--line); } 6%, 16% { color: var(--on-gold); background: var(--gold); border-color: var(--gold); } }
/* 3 · a strip of real covers */
.sv-mosaic { position: absolute; inset: 0; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.sv-track { display: flex; gap: 6px; width: max-content; animation: svMarquee 22s linear infinite; }
.sv-track i { width: 44px; height: 72px; flex: none; border-radius: 8px; background-size: cover; background-position: 50% 30%; }
@keyframes svMarquee { to { transform: translateX(-50%); } }
/* 4 · new posts arriving */
.sv-feed { list-style: none; position: absolute; inset: 0; margin: 0; padding: 8px 10px; display: grid; align-content: start; gap: 6px; }
.sv-feed li { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 9px; background: rgba(var(--fg), 0.05); font-size: 11.5px; color: var(--text); opacity: 0; animation: svFeed 8s ease-in-out infinite; }
.sv-feed li:nth-child(2) { animation-delay: 2s; } .sv-feed li:nth-child(3) { animation-delay: 4s; } .sv-feed li:nth-child(4) { animation-delay: 6s; }
.sv-feed li i { width: 20px; height: 20px; border-radius: 5px; background-size: cover; background-position: center; flex: none; }
.sv-feed li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-feed li em { font-style: normal; font-size: 10.5px; color: #3ddc97; font-weight: 600; }
.sv-feed li { position: absolute; left: 10px; right: 10px; top: 8px; }
@keyframes svFeed { 0% { opacity: 0; transform: translateY(-8px); } 4%, 24% { opacity: 1; transform: translateY(0); } 28%, 48% { opacity: 0.75; transform: translateY(26px); } 52%, 72% { opacity: 0.45; transform: translateY(52px); } 76%, 100% { opacity: 0; transform: translateY(70px); } }
.stats-v2:not(.is-live) .sv-vis * { animation-play-state: paused; }
@media (max-width: 1100px) { .stats.stats-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats.stats-v2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sv-vis * { animation: none !important; } .sv-feed li { opacity: 1; } .sv-feed li:nth-child(2) { transform: translateY(26px); } .sv-feed li:nth-child(3) { transform: translateY(52px); } }

/* ---------- Home "three tools": each card opens with a small live preview of the tool ---------- */
.tools .tool { padding: 14px 14px 26px; }
.tools .tool > :not(.tool-vis) { margin-left: 14px; margin-right: 14px; }
.tool-vis { position: relative; display: block; height: 176px; margin-bottom: 22px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(var(--acc), 0.16), transparent 60%), rgba(var(--fg), 0.03); border: 0.5px solid rgba(var(--acc), 0.25); }
.tools .tool-n { top: 200px; right: 26px; margin: 0; font-size: 34px; }
.tools .tool-ic { position: absolute; top: 202px; left: 28px; width: 38px; height: 38px; border-radius: 11px; margin: 0 !important; }
.tools .tool-ic svg { width: 19px; height: 19px; }
.tools .tool h3 { margin-top: 0; padding-left: 50px; min-height: 38px; display: flex; align-items: center; }
.tool:hover .tool-vis * { animation-duration: var(--fast, inherit); }
/* Library: a filter chip and a grid of real covers that light up */
.tv-chip { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 600; color: var(--on-gold); background: var(--gold); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
.tv-grid { position: absolute; inset: 10px 10px 10px 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; }
.tv-grid i { border-radius: 9px; background-size: cover; background-position: 50% 30%; opacity: 0.55; animation: tvLight 6s ease-in-out infinite; }
.tv-grid i:nth-child(2) { animation-delay: 1s; } .tv-grid i:nth-child(3) { animation-delay: 2s; } .tv-grid i:nth-child(4) { animation-delay: 3s; } .tv-grid i:nth-child(5) { animation-delay: 4s; } .tv-grid i:nth-child(6) { animation-delay: 5s; }
@keyframes tvLight { 0%, 30%, 100% { opacity: 0.55; transform: scale(1); box-shadow: none; } 8%, 20% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 2px rgba(var(--acc), 0.9), 0 10px 20px rgba(0, 0, 0, 0.4); } }
/* AI: the photo is scanned, the analysis writes itself */
.tv-ai { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 12px; }
.tv-ai-img { position: relative; border-radius: 10px; background-size: cover; background-position: 50% 25%; overflow: hidden; }
.tv-scan { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(var(--acc), 0.5), transparent); animation: tvScan 2.6s ease-in-out infinite; }
@keyframes tvScan { 0% { top: -30%; } 100% { top: 100%; } }
.tv-ai-rows { display: grid; align-content: center; gap: 12px; }
.tv-ai-rows > span { display: grid; gap: 5px; }
.tv-ai-rows b { font-size: 11.5px; color: rgb(var(--acc)); font-weight: 600; }
.tv-ai-rows i { display: block; height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--fg), 0.35), rgba(var(--fg), 0.12)); transform-origin: left; animation: tvType 4.5s ease-out infinite; }
.tv-ai-rows > span:nth-child(2) i { animation-delay: 0.6s; } .tv-ai-rows > span:nth-child(3) i { animation-delay: 1.2s; }
@keyframes tvType { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
/* Content Plan: the week fills up */
.tv-cp { padding: 12px 12px 30px; }
.tv-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; height: 100%; }
.tv-week > span { display: flex; flex-direction: column; gap: 4px; padding: 5px 4px; border-radius: 8px; background: rgba(var(--fg), 0.04); }
.tv-week small { font-size: 9.5px; text-align: center; color: var(--muted); margin-bottom: 2px; }
.tv-week i { height: 14px; border-radius: 4px; background: rgba(var(--acc), 0.8); opacity: 0; animation: tvPop 7s ease-out infinite; animation-delay: calc(var(--k) * 0.28s); }
.tv-week > span:nth-child(3n) i { background: #7aa7ff; } .tv-week > span:nth-child(3n+2) i { background: #f8cc75; }
@keyframes tvPop { 0% { opacity: 0; transform: translateY(-6px) scale(0.9); } 6%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tv-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px; border-radius: 6px; background: rgba(var(--fg), 0.08); overflow: hidden; }
.tv-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3b82f6, #7aa2ff);   /* Content Plan blue */ animation: tvFill 7s ease-out infinite; }
@keyframes tvFill { 0% { width: 0; } 70%, 88% { width: 100%; } 100% { width: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tool-vis * { animation: none !important; } .tv-week i { opacity: 1; } .tv-bar i { width: 100%; } }

/* ---------- Home "Built for your team": 2×2 bento, each card with a small live visual ---------- */
.team-strip .team-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin-inline: auto; }
.team-tiles article { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding: 14px 14px 22px; border-radius: 22px; overflow: hidden; }
.team-tiles article:nth-child(1) { --acc: 240, 184, 74; } .team-tiles article:nth-child(2) { --acc: 122, 162, 255; }
.team-tiles article:nth-child(3) { --acc: 61, 220, 151; } .team-tiles article:nth-child(4) { --acc: 196, 155, 255; }
.team-tiles article:hover { border-color: rgba(var(--acc), 0.55); box-shadow: var(--inset-glow), 0 22px 46px -18px rgba(var(--acc), 0.5); }
.team-tiles .tt-ic { grid-row: 2 / span 2; margin: 0 0 0 8px; background: rgba(var(--acc), 0.16); }
.team-tiles .tt-ic svg { stroke: rgb(var(--acc)); }
.team-tiles h3 { grid-column: 2; margin-top: 2px; }
.team-tiles p { grid-column: 2; padding-right: 8px; }
.tm-vis { grid-column: 1 / -1; position: relative; display: block; height: 150px; margin-bottom: 18px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(var(--acc), 0.16), transparent 60%), rgba(var(--fg), 0.03); border: 0.5px solid rgba(var(--acc), 0.25); }
/* For you: pinned clubs, their posts first */
.tm-pins { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; }
.tm-pins > span { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
.tm-pins img { width: 28px; height: 28px; object-fit: contain; }
.tm-pins b { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; color: var(--on-gold); background: var(--gold); transform: scale(0); animation: tmStar 6s ease-out infinite; }
.tm-pins > span:nth-child(2) b { animation-delay: 0.4s; } .tm-pins > span:nth-child(3) b { animation-delay: 0.8s; }
@keyframes tmStar { 0% { transform: scale(0); } 8%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
.tm-first { position: absolute; right: 14px; bottom: 14px; left: 14px; display: flex; align-items: flex-end; gap: 6px; }
.tm-first em { position: absolute; top: -26px; right: 0; font-style: normal; font-size: 11px; font-weight: 600; color: var(--gold); }
.tm-first i { flex: 1; height: 62px; border-radius: 9px; background-size: cover; background-position: 50% 30%; animation: tmRise 6s ease-out infinite; }
.tm-first i:nth-of-type(2) { animation-delay: 0.25s; } .tm-first i:nth-of-type(3) { animation-delay: 0.5s; }
@keyframes tmRise { 0%, 12% { opacity: 0; transform: translateY(14px); } 22%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Up to 5 users: avatars join, the seat stepper */
.tm-avatars { position: absolute; top: 34px; left: 0; right: 0; display: flex; justify-content: center; }
.tm-avatars i { width: 46px; height: 46px; margin-left: -10px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 700; color: #0b0f1c; background: var(--c); box-shadow: 0 0 0 3px var(--surface); opacity: 0; animation: tmJoin 6s ease-out infinite; animation-delay: calc(var(--k) * 0.35s); }
.tm-avatars i:first-child { margin-left: 0; }
@keyframes tmJoin { 0% { opacity: 0; transform: scale(0.6); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tm-seats { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 100px; background: rgba(var(--fg), 0.06); border: 0.5px solid var(--line); font-size: 12px; color: var(--muted); }
.tm-seats strong { color: var(--text); font-size: 14px; }
.tm-seats b { color: rgb(var(--acc)); font-weight: 600; }
/* Social News: headlines from each network, the Monday newsletter */
.tm-news { padding: 14px; display: grid; align-content: start; gap: 8px; }
.tm-n { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(var(--fg), 0.05); animation: tmSlide 6s ease-out infinite; }
.tm-n:nth-child(2) { animation-delay: 0.3s; } .tm-n:nth-child(3) { animation-delay: 0.6s; }
@keyframes tmSlide { 0% { opacity: 0; transform: translateX(-12px); } 8%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tm-nl .lf-pfi { width: 16px; height: 16px; }
.tm-nl .lf-pfi.lf-pf-instagram { width: 20px; height: 20px; margin: -2px; }
.tm-n i { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--fg), 0.35), rgba(var(--fg), 0.08)); }
.tm-n em { font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; color: #0b0f1c; background: rgb(var(--acc)); }
.tm-mail { position: absolute; right: 14px; bottom: 12px; font-size: 11px; font-weight: 600; color: rgb(var(--acc)); }
/* English & Español: the switch flips and the words change language */
.tm-switch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: inline-flex; padding: 3px; border-radius: 100px; background: rgba(var(--fg), 0.06); border: 0.5px solid var(--line); }
.tm-switch b { position: relative; z-index: 1; width: 40px; text-align: center; font-size: 12px; line-height: 24px; color: var(--text); }
.tm-switch i { position: absolute; top: 3px; left: 3px; width: 40px; height: 24px; border-radius: 100px; background: rgba(var(--acc), 0.55); animation: tmFlip 6s ease-in-out infinite; }
@keyframes tmFlip { 0%, 40% { transform: none; } 50%, 90% { transform: translateX(40px); } 100% { transform: none; } }
.tm-words { position: absolute; left: 14px; right: 14px; bottom: 16px; display: grid; gap: 8px; }
.tm-words > span { position: relative; height: 34px; border-radius: 10px; background: rgba(var(--fg), 0.05); overflow: hidden; }
.tm-words em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; color: var(--text); animation: tmWordA 6s ease-in-out infinite; }
.tm-words em + em { animation-name: tmWordB; color: rgb(var(--acc)); }
@keyframes tmWordA { 0%, 42% { transform: none; opacity: 1; } 50%, 92% { transform: translateY(-100%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tmWordB { 0%, 42% { transform: translateY(100%); opacity: 0; } 50%, 92% { transform: none; opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@media (max-width: 760px) { .team-strip .team-tiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tm-vis * { animation: none !important; } .tm-avatars i, .tm-pins b { opacity: 1; transform: none; } .tm-words em + em { display: none; } }
/* team v2 visuals: look like the product */
/* For you: the "For you" feed, posts from the clubs you follow, newest first */
.tm-you2 { padding: 12px; }
.ty-tabs { display: flex; gap: 6px; margin-bottom: 10px; font-size: 11.5px; }
.ty-tabs b, .ty-tabs span { padding: 4px 10px; border-radius: 100px; }
.ty-tabs b { color: var(--on-gold); background: var(--gold); font-weight: 600; }
.ty-tabs span { color: var(--muted); background: rgba(var(--fg), 0.05); }
.ty-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ty-card { position: relative; height: 92px; border-radius: 10px; overflow: hidden; opacity: 0; animation: tyIn 6.5s ease-out infinite; animation-delay: calc(var(--k) * 0.22s); }
.ty-card i { position: absolute; inset: 0; background-size: cover; background-position: 50% 30%; }
.ty-card img { position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.ty-card em { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; color: var(--on-gold); background: var(--gold); }
.ty-card.is-new { box-shadow: inset 0 0 0 2px var(--gold); }
@keyframes tyIn { 0% { opacity: 0; transform: translateX(16px); } 7%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Up to 5 users: the team panel from Account → Billing */
.tm-team { padding: 10px 12px; }
.tt-head { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 5px; margin-bottom: 7px; }
.tt-head b { font-size: 12px; } .tt-head small { font-size: 11px; color: var(--muted); }
.tt-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(var(--fg), 0.08); overflow: hidden; }
.tt-bar i { display: block; width: 80%; height: 100%; border-radius: 4px; background: rgb(var(--acc)); }
.tt-list { display: grid; gap: 4px; }
.tt-m { display: flex; align-items: center; gap: 8px; height: 19px; font-size: 11px; color: var(--text); opacity: 0; animation: tyIn 6.5s ease-out infinite; animation-delay: calc(var(--k) * 0.2s); }
.tt-m i { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 8.5px; font-weight: 700; color: #0b0f1c; background: var(--c); }
.tt-m span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-m em { font-style: normal; font-size: 10px; color: #3ddc97; }
.tt-m em::before { content: "● "; font-size: 8px; }
.tt-add { color: rgb(var(--acc)); }
.tt-add i { background: none; border: 1px dashed rgba(var(--acc), 0.7); color: rgb(var(--acc)); font-size: 12px; }
/* Social News: stories by network and topic, the Monday newsletter */
.tm-news2 { padding: 10px 12px; display: grid; align-content: start; gap: 6px; }
.tn-row, .tn-mail { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; background: rgba(var(--fg), 0.05); opacity: 0; animation: tyIn 6.5s ease-out infinite; animation-delay: calc(var(--k) * 0.22s); }
.tn-logo .lf-pfi { width: 16px; height: 16px; } .tn-logo .lf-pfi.lf-pf-instagram { width: 20px; height: 20px; margin: -2px; }
.tn-txt { flex: 1; display: grid; gap: 4px; }
.tn-txt em { font-style: normal; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--acc)); }
.tn-txt i { display: block; height: 5px; border-radius: 5px; background: rgba(var(--fg), 0.25); }
.tn-txt i + i { width: 60%; background: rgba(var(--fg), 0.12); }
.tn-row small { font-size: 10px; color: var(--muted); }
.tn-mail { background: rgba(var(--acc), 0.12); border: 0.5px solid rgba(var(--acc), 0.35); font-size: 11px; }
.tn-mail b { flex: 1; font-weight: 600; } .tn-mail small { font-size: 10px; color: var(--muted); } .tn-mail > span { color: rgb(var(--acc)); }
@media (prefers-reduced-motion: reduce) { .ty-card, .tt-m, .tn-row, .tn-mail { opacity: 1; } }
.team-tiles .tm-vis { height: 178px; }
.tm-news2 { gap: 5px; } .tn-row, .tn-mail { padding: 5px 9px; }
.ty-card { height: 112px; }

/* CTAs: "Book a demo" in the nav, help line under the plans, actions after a demo request, blog CTA */
.nav-demo { font-size: 14px; font-weight: 500; color: var(--muted); padding: 0 6px; white-space: nowrap; transition: color 0.2s; }
.nav-demo:hover { color: var(--gold); }
.plan-help { margin: 26px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.plan-help a { font-weight: 600; }
.book-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.post-cta .post-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.post-cta-more { margin-top: 12px; font-size: 14px; }
/* Demo booking with Google Calendar (config.demoBookingUrl) */
.book-cal { display: grid; gap: 12px; }
.book-cal-head { display: grid; gap: 2px; margin: 0; }
.book-cal-head b { font-size: 16px; color: var(--text); } .book-cal-head span { font-size: 13px; color: var(--muted); }
.book-cal iframe { width: 100%; height: 620px; border: 0; border-radius: 16px; background: #fff; }
.book-cal-alt { justify-self: start; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.book-cal + form:not([hidden]) { margin-top: 18px; }
.faq-form-pane .book-cal-head { display: none; }
/* Cal.com inline booking (dark, SCP gold) */
.book-cal-box { min-height: 560px; border-radius: 16px; overflow: hidden; background: #121a2e; border: 0.5px solid var(--line); }
.book-cal.is-cal .book-cal-box > * { width: calc(100% + 14px) !important; max-width: none !important; }
.book-cal.is-cal .book-cal-box iframe { width: 100% !important; }
/* calendar behind a click (no third-party request until the visitor asks for it) */
.book-cal-box:not(.is-open) { min-height: 0; }
.book-cal-gate { display: grid; justify-items: center; gap: 8px; padding: 34px 22px; text-align: center; }
.book-cal-gate b { font-size: 17px; color: var(--text); }
.book-cal-gate span:not(.book-cal-gate-ic) { max-width: 340px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.book-cal-gate .btn { margin-top: 8px; }
.book-cal-gate-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--gold-tint); }
.book-cal-gate-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.book-cal:not(.is-cal) .book-cal-box iframe { width: 100%; height: 640px; border: 0; background: #fff; }
.book-cal.is-cal .book-cal-box iframe { background: transparent; border: 0; }
/* blog: embedded posts behind a click */
.ext-gate { display: grid; justify-items: center; gap: 8px; max-width: 420px; margin: 0 auto; padding: 30px 22px; border-radius: 18px; text-align: center; background: var(--surface); border: 0.5px solid var(--line); }
.ext-gate-logo { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(var(--fg), 0.06); }
.ext-gate-logo .lf-pfi { width: 24px; height: 24px; } .ext-gate-logo .lf-pfi.lf-pf-instagram { width: 30px; height: 30px; margin: -3px; }
.ext-gate b { font-size: 16px; color: var(--text); }
.ext-gate > span:not(.ext-gate-logo) { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ext-gate .btn { margin-top: 6px; }
.ext-gate-link { font-size: 13px; color: var(--muted); }
/* the open calendar takes the full width of the demo page: month and times side by side, much shorter */
.book .book-card.is-wide { width: 100%; }
.book-cal.is-cal .book-cal-box.is-open { min-height: 0; }
/* the calendar shows straight away, without an inner frame */
.book-cal.is-cal .book-cal-box { border: 0; background: none; border-radius: 0; }
.book-cal-loading { margin: 0; padding: 40px 0; text-align: center; font-size: 13px; color: var(--muted); }
.book-cal-box.is-open .book-cal-loading { display: none; }
.book-cal.is-cal .book-cal-box > * { width: 100% !important; }
.sf-tm { margin: 0; padding: 0 0 20px; font-size: 11.5px; color: var(--muted-dim); }
/* open calendar: no outer card, the calendar sits on the page */
.book .book-card.is-wide { background: none; border: 0; box-shadow: none; padding: 0; animation: none; }
.book .book-card.is-wide::before, .book .book-card.is-wide::after { display: none; }
.book .book-card.is-wide .book-cal-head { text-align: center; }
.book .book-card.is-wide .book-cal-alt { justify-self: center; }
/* Brand: the SCP wordmark (assets/logo-scp.png) */
.brand img.brand-logo { width: auto; height: 36px; display: block; }
.footer-brand img.brand-logo, .sf-brand .footer-brand img.brand-logo { width: auto; height: 72px; }
.auth-logo img.brand-logo { width: auto; height: 64px; }
@media (max-width: 600px) { .brand img.brand-logo { height: 30px; } .sf-brand .footer-brand img.brand-logo { height: 58px; } }

/* demo page: intro on the left, the calendar on the right (wide enough for month + times side by side) */
.contact.book:has(.book-card.is-wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 800px); gap: 40px; align-items: start; }
.book .book-card.is-wide .book-cal-head { text-align: left; }
.book .book-card.is-wide .book-cal-alt { justify-self: start; }
@media (max-width: 1260px) { .contact.book:has(.book-card.is-wide) { grid-template-columns: 1fr; } }
/* demo page: the three steps as a step-by-step row under the intro and the calendar */
.book-flow { grid-column: 1 / -1; margin-top: 20px; }
.book-flow-head { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.book-steps.book-steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: none; margin: 0; counter-reset: none; position: relative; }
.book-steps-row li { position: relative; }
.book-steps-row li:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; color: var(--gold); background: var(--surface); border: 0.5px solid rgba(240, 184, 74, 0.5); z-index: 1; }
@media (max-width: 900px) {
  .book-steps.book-steps-row { grid-template-columns: 1fr; gap: 14px; }
  .book-steps-row li:not(:last-child)::after { content: "↓"; right: auto; left: 30px; top: auto; bottom: -16px; transform: none; }
}

/* Hero trust badge: two streaks of gold light running round the border (instead of the two static lines) */
@property --tb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.trust-badge, .rating { box-shadow: inset 0 0 0 0.5px rgba(240, 184, 74, 0.18); isolation: isolate; }
.trust-badge::before, .trust-badge::after, .rating::before, .rating::after {
  top: -1px; right: -1px; bottom: -1px; left: -1px; width: auto; height: auto; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from var(--tb-a), transparent 0deg 120deg, rgba(240, 184, 74, 0.6) 160deg, #ffe7b0 176deg, #fff 179deg, transparent 180deg 300deg, rgba(240, 184, 74, 0.6) 340deg, #ffe7b0 356deg, #fff 359deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tbSpin 4.5s linear infinite;
}
.trust-badge::after, .rating::after { filter: blur(5px); opacity: 0.75; z-index: -1; }
.rating::before, .rating::after { animation-duration: 3.8s; }
@keyframes tbSpin { to { --tb-a: 360deg; } }
@media (max-width: 960px) { .trust-badge::after { display: block; } }
@media (prefers-reduced-motion: reduce) { .trust-badge::before, .trust-badge::after, .rating::before, .rating::after { animation: none; } }

/* Logo intro on the first page of a visit (js/theme.js adds html.logo-intro for 2.8 s) */
.site-nav .brand { position: relative; }
html.logo-intro .site-nav .brand img.brand-logo { animation: logoIn 1s cubic-bezier(.2, .8, .2, 1) 0.15s both; }
html.logo-intro .site-nav .brand::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../assets/logo-scp.png) left center / auto 100% no-repeat; mask: url(../assets/logo-scp.png) left center / auto 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 225, 0.95) 50%, transparent 62%); background-size: 300% 100%;
  animation: logoShine 1.1s ease-in-out 1.05s both; }
@keyframes logoIn { from { clip-path: inset(0 100% 0 0); opacity: 0.3; filter: blur(3px); transform: translateX(-6px); } to { clip-path: inset(0 0 0 0); opacity: 1; filter: none; transform: none; } }
@keyframes logoShine { from { background-position: 100% 0; opacity: 1; } 90% { opacity: 1; } to { background-position: 0% 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.logo-intro .site-nav .brand img.brand-logo, html.logo-intro .site-nav .brand::after { animation: none; } html.logo-intro .site-nav .brand::after { display: none; } }
/* Footer logo: same intro as the header, played when it comes into view (js/main.js) */
.footer-brand { position: relative; }
.footer-brand.is-waiting img.brand-logo { clip-path: inset(0 100% 0 0); opacity: 0.3; }
.footer-brand.is-intro img.brand-logo { animation: logoIn 1s cubic-bezier(.2, .8, .2, 1) 0.1s both; }
.footer-brand.is-intro::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../assets/logo-scp.png) left center / auto 100% no-repeat; mask: url(../assets/logo-scp.png) left center / auto 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 225, 0.95) 50%, transparent 62%); background-size: 300% 100%;
  animation: logoShine 1.1s ease-in-out 1s both; }
body:has(.dock) .site-footer.sf { padding-bottom: 100px; }

/* Library: "Following" badge (a post from one of your favourite profiles) with an explanation on hover */
.lib-card .lib-badge-fav, .lib-card.has-cover .lib-badge-fav { position: relative; width: auto; height: 26px; padding: 0 10px 0 22px; justify-content: center; gap: 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--on-gold); background: var(--gold); border-radius: 100px; cursor: help; opacity: 1; transform: none; }
.lib-badge-fav::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--on-gold); box-shadow: 0 0 0 3px rgba(11, 15, 28, 0.15); }
.lib-tip { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 230px; padding: 10px 12px; border-radius: 12px; text-align: left; white-space: normal;
  font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.45; color: var(--text); background: #0d1426; border: 0.5px solid rgba(240, 184, 74, 0.45);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; pointer-events: none; }
.lib-badge-fav:hover .lib-tip, .lib-badge-fav:focus .lib-tip { opacity: 1; visibility: visible; transform: none; }
/* posts without a cover (X, LinkedIn, Facebook…): the same 4:5 card, the embed fills it and is cut at the bottom */
.lib-media.is-fixed { overflow: hidden; }
.lib-media.is-fixed .lib-zoom, .lib-media.is-fixed .lib-frame { height: 100%; }
.lib-media.is-fixed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(13, 20, 38, 0.85)); }

/* ---------- Library card v3: the post at its real shape + a footer joined to it ---------- */
.lib-card { border-radius: 18px; background: var(--surface); border: 0.5px solid var(--line); overflow: visible; transition: border-color 0.3s, box-shadow 0.3s, transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.lib-card:hover { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4); transform: translateY(-3px); }
.lib-card .lib-media, .lib-card:hover .lib-media { border: 0; border-radius: 18px 18px 0 0; box-shadow: none; transform: none; overflow: hidden; }
.lib-card .lib-media::after { display: none; }
/* footer: part of the same card, so it clearly belongs to the post above */
.lib-foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 12px 11px; border-top: 0.5px solid var(--line-soft); }
.lib-crest { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.lib-crest img { width: 20px; height: 20px; object-fit: contain; }
.lib-crest b { font-size: 10px; color: #0b0f1c; }
.lib-foot-who { min-width: 0; display: grid; }
.lib-foot-who b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-foot-who small { font-size: 11px; color: var(--muted); }
.lib-foot-views { display: grid; text-align: right; }
.lib-foot-views b { font-size: 13px; color: var(--gold); font-variant-numeric: tabular-nums; }
.lib-foot-views small { font-size: 10.5px; color: var(--muted); }
/* on the cover: network (top left), Following, format · length (bottom right) */
.lib-corner { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.lib-pfchip { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(8, 12, 24, 0.55); backdrop-filter: blur(8px); }
.lib-pfchip .lf-pfi { width: 15px; height: 15px; } .lib-pfchip .lf-pfi.lf-pf-instagram { width: 19px; height: 19px; margin: -2px; }
.lib-card.is-embed .lib-corner { display: none; }
.lib-fmt { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 8px;
  font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(8, 12, 24, 0.6); backdrop-filter: blur(8px); pointer-events: none; }
.lib-fmt svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.lib-card .lib-dur { display: none; }
/* "Following" shows its name, then folds into a star (the explanation stays on hover) */
.lib-corner .lib-badge-fav { position: relative; height: 28px; padding: 0 10px 0 8px; gap: 5px; border-radius: 100px; display: inline-flex; align-items: center; width: auto;
  font-size: 11px; font-weight: 700; color: var(--on-gold); background: var(--gold); cursor: help; opacity: 1; transform: none; animation: favFold 0.5s cubic-bezier(.4, 0, .2, 1) 1.8s forwards; }
.lib-corner .lib-badge-fav::before { display: none; }
.lib-corner .lib-badge-fav > svg { width: 13px; height: 13px; fill: currentColor; stroke: none; flex: none; }
.lib-fav-lbl { display: inline-block; max-width: 80px; overflow: hidden; white-space: nowrap; animation: favLabel 0.5s cubic-bezier(.4, 0, .2, 1) 1.8s forwards; }
@keyframes favLabel { to { max-width: 0; opacity: 0; } }
@keyframes favFold { to { padding: 0 7px; gap: 0; } }
.lib-corner .lib-badge-fav:hover .lib-fav-lbl, .lib-corner .lib-badge-fav:focus .lib-fav-lbl { animation: none; max-width: 80px; opacity: 1; }
.lib-corner .lib-badge-fav:hover, .lib-corner .lib-badge-fav:focus { animation: none; padding: 0 10px 0 8px; gap: 5px; }
@media (prefers-reduced-motion: reduce) { .lib-fav-lbl, .lib-corner .lib-badge-fav { animation-duration: 0.01s; animation-delay: 0s; } }
/* actions: a rail on the right, on hover (always shown on touch screens) */
.lib-rail { position: absolute; top: 10px; right: 10px; z-index: 4; display: grid; gap: 6px; opacity: 0; transform: translateX(8px); transition: opacity 0.22s, transform 0.22s; }
.lib-card:hover .lib-rail, .lib-card:focus-within .lib-rail { opacity: 1; transform: none; }
@media (hover: none) { .lib-rail { opacity: 1; transform: none; } }
.lib-rail > button, .lib-rail > a { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 11px; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(8, 12, 24, 0.62); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); transition: background 0.2s, color 0.2s; }
.lib-rail > button:hover, .lib-rail > a:hover, .lib-rail .save-btn.is-on { background: var(--gold); color: var(--on-gold); }
.lib-rail svg { width: 16px; height: 16px; }
.lib-rail .save-btn span { display: none; }
.lib-rail .lib-grip { cursor: grab; }
.lib-rail [data-tip]::after { content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--text); background: #0d1426; border: 0.5px solid rgba(240, 184, 74, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.lib-rail [data-tip]:hover::after { opacity: 1; }
.lib-rail .save-btn::after { content: attr(title); position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--text); background: #0d1426; border: 0.5px solid rgba(240, 184, 74, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.lib-rail .save-btn:hover::after { opacity: 1; }
/* the old controls are gone */
.lib-card .lib-top, .lib-card .lib-bottom, .lib-card .lib-actions { display: none; }
/* X / LinkedIn / Facebook as posted: the embed is fully interactive (text, video), sized to the post */
.lib-card.is-embed .lib-media { background: #000; }
.lib-card.is-embed .lib-media.is-sized .lib-zoom, .lib-card.is-embed .lib-media.is-sized .lib-frame { height: 100%; }
.lib-card.is-embed .lib-rail { top: 50px; }
/* embeds have a light colour scheme: matching it keeps the iframe transparent (no white band), the card colour shows behind */
.lib-card.is-embed .lib-frame { color-scheme: light; background: transparent; }
.lib-card.is-embed .lib-media { background: var(--surface); }
.lib-card.is-embed .lib-media { border-radius: 18px; }
/* footer avatar: photo (Instagram) fills the circle · crest inside a neutral circle · initials gold on dark; always a thin ring */
.lib-foot .lib-crest { width: 32px; height: 32px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 2px 6px rgba(0, 0, 0, 0.3); }
.lib-foot .lib-crest img { width: 82%; height: 82%; object-fit: contain; }
.lib-foot .lib-crest.is-photo { background: #0d1426; }
.lib-foot .lib-crest.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.lib-foot .lib-crest.is-initials { background: #0d1426; box-shadow: inset 0 0 0 1px rgba(240, 184, 74, 0.55); }
.lib-foot .lib-crest.is-initials b { font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: 0.02em; }
/* the whole card opens the post's detail */
.lib-card .lib-hit { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.lib-card .lib-playbtn { z-index: 3; }
.lib-foot { cursor: pointer; }
.lib-card .lib-hit.lib-hit-top { inset: 0 0 auto 0; height: 34%; }
.lib-card .lib-hit.lib-hit-bottom { inset: auto 0 0 0; height: 24%; }
/* Top Picks / Replicable / Overperforming: just the title; what it means shows on hover */
.lf-sp { position: relative; }
.lf-sp-pop { position: absolute; z-index: 300; display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 10px 12px; border-radius: 12px;
  background: #0d1426; border: 0.5px solid rgba(240, 184, 74, 0.45); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); animation: pvIn 0.16s ease-out; }
.lf-sp-pop[hidden] { display: none; }
.lf-sp-pop p { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.lf-sp-pop button { flex: none; width: 22px; height: 22px; border: 0; border-radius: 7px; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: rgba(var(--fg), 0.06); }
.lf-sp-pop button:hover { color: var(--text); background: rgba(var(--fg), 0.12); }
.lf-sp-pop button svg { width: 13px; height: 13px; }

/* ---------- Profile: more air between questions and sections ---------- */
.pf-card { padding: 34px 36px 36px; }
.pf-card header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 0.5px solid var(--line-soft); }
.pf-card header p { margin-top: 6px; line-height: 1.5; }
.pf-card .pf-q { margin-top: 0; padding: 18px 0; }
.pf-card .pf-q + .pf-q, .pf-card .pf-q + .pf-grid, .pf-card .pf-grid + .pf-q { border-top: 0.5px solid var(--line-soft); }
.pf-card .pf-q > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--text); }
.pf-card .pf-q > span small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.pf-card .pf-grid { gap: 20px; margin: 4px 0 0; padding-top: 18px; }
.pf-card .pf-row { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Account: language, then password with its button underneath */
#security .pf-grid { grid-template-columns: minmax(0, 420px); border-top: 0.5px solid var(--line-soft); }
#security .pf-field { gap: 10px; font-size: 14px; color: var(--text); }
/* filters: values with no post for the current selection are hidden in lists, chips and crests
   (the format and network tiles stay, dimmed, so their grid doesn't jump) */
.lf-li.is-zero, .lf-chip.is-zero, .lf-shp.is-zero, .lf-cr.is-zero { display: none; }
/* Instagram carousels: an arrow on the right (as on Instagram) plays the carousel in the card, swipeable */
.lib-carbtn { position: absolute; right: 10px; top: 50%; z-index: 3; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #0b0f1c; background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); transition: transform 0.2s, background 0.2s; }
.lib-carbtn:hover { transform: scale(1.1); background: #fff; }
.lib-carbtn svg { width: 16px; height: 16px; }
.lib-cardots { position: absolute; left: 50%; bottom: 12px; z-index: 2; transform: translateX(-50%); display: flex; gap: 4px; pointer-events: none; }
.lib-cardots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.lib-cardots i:first-child { background: #fff; }
.lib-media.is-playing .lib-carbtn, .lib-media.is-playing .lib-cardots { display: none; }
.lib-carbtn { transition: transform 0.2s, background 0.2s, right 0.22s; }
.lib-card:hover .lib-carbtn, .lib-card:focus-within .lib-carbtn { right: 56px; }
@media (hover: none) { .lib-carbtn { right: 56px; } }
.lf-views-note { margin: 8px 2px 2px; font-size: 11.5px; color: var(--muted); }

/* Top Picks / Replicable / Overperforming explainer: a small card in the filter's colours */
.lf-sp-pop { display: block; width: 280px; padding: 0; overflow: hidden; border-radius: 16px; border: 0.5px solid rgba(var(--glow, 240, 184, 74), 0.45);
  background: radial-gradient(120% 90% at 0% 0%, rgba(var(--glow, 240, 184, 74), 0.16), transparent 60%), #0e1529;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2); }
.lf-sp-pop.is-side::before { content: ""; position: absolute; left: -6px; top: 22px; width: 12px; height: 12px; transform: rotate(45deg); background: #10182d;
  border-left: 0.5px solid rgba(var(--glow, 240, 184, 74), 0.45); border-bottom: 0.5px solid rgba(var(--glow, 240, 184, 74), 0.45); }
.lf-sp-pop .sp-h { display: flex; align-items: center; gap: 10px; padding: 14px 12px 0 14px; }
.lf-sp-pop .sp-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--g); color: #fff; flex: none; box-shadow: 0 6px 16px -6px rgba(var(--glow), 0.9); }
.lf-sp-pop .sp-ic svg { width: 16px; height: 16px; }
.lf-sp-pop .sp-h b { flex: 1; font-family: var(--font-display); font-size: 15px; letter-spacing: -0.01em; }
.lf-sp-pop .sp-x { width: 26px; height: 26px; border: 0; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: transparent; }
.lf-sp-pop .sp-x:hover { color: var(--text); background: rgba(var(--fg), 0.08); }
.lf-sp-pop .sp-x svg { width: 14px; height: 14px; }
.lf-sp-pop .sp-lead { margin: 10px 14px 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.lf-sp-pop ul { list-style: none; margin: 10px 14px 0; padding: 0; display: grid; gap: 6px; }
.lf-sp-pop li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.lf-sp-pop li svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: rgb(var(--glow, 240, 184, 74)); }
.lf-sp-pop .sp-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 14px; border-top: 0.5px solid var(--line-soft); background: rgba(var(--fg), 0.03); }
.lf-sp-pop .sp-f span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lf-sp-pop .sp-go { width: auto; height: auto; flex: none; display: inline-flex; align-items: center; white-space: nowrap; border: 0; padding: 7px 14px; border-radius: 100px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: #fff; background: var(--g); }
.lf-sp-pop .sp-go:hover { filter: brightness(1.08); }
.lf-sp-pop > p:not(.sp-lead), .lf-sp-pop > button:not(.sp-go):not(.sp-x) { display: none; }
.lf-row.is-disabled { opacity: 0.4; } .lf-row.is-disabled .lf-rh { cursor: not-allowed; }
.lf-sp-info { flex: none; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; display: grid; place-items: center; font: italic 700 11px/1 Georgia, serif;
  color: var(--muted); border: 1px solid rgba(var(--fg), 0.25); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.lf-sp-info:hover { color: var(--text); border-color: rgba(var(--fg), 0.6); }
.pp-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.pp-title .pp-eyebrow { flex-basis: 100%; }
.pp-rename { width: 28px; height: 28px; }
.pp-rename svg { width: 14px; height: 14px; }

/* Library: one calendar for the date range (js/range-cal.js) */
.rcal-wrap { padding: 10px 6px 4px; border-top: 0.5px solid var(--line-soft); margin-top: 6px; }
.rcal { width: 280px; }
.rcal-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 0 4px 8px; font-size: 13px; color: var(--muted); }
.rcal-sum b { color: var(--text); font-weight: 600; }
.rcal-sum i { font-style: normal; color: var(--gold); }
.rcal-clear { border: 0; background: none; padding: 4px 6px; border-radius: 8px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.rcal-clear:hover { color: var(--text); background: rgba(var(--fg), 0.06); }
.rcal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 8px; }
.rcal-head b { font-size: 14px; }
.rcal-head button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: rgba(var(--fg), 0.05); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.rcal-head button:hover:not(:disabled) { background: rgba(var(--fg), 0.12); }
.rcal-head button:disabled { opacity: 0.3; cursor: default; }
.rcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.rcal-grid small { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0 6px; }
.rcal-grid button { position: relative; height: 34px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; border-radius: 9px; }
.rcal-grid button:hover:not(:disabled) { background: rgba(var(--fg), 0.08); }
.rcal-grid button:disabled { color: var(--muted-dim); cursor: default; }
.rcal-grid button.is-today { box-shadow: inset 0 0 0 1px rgba(240, 184, 74, 0.5); }
.rcal-grid button.is-in { background: rgba(240, 184, 74, 0.16); border-radius: 0; }
.rcal-grid button.is-start, .rcal-grid button.is-end { background: var(--gold); color: var(--on-gold); font-weight: 700; }
.rcal-grid button.is-start:not(.is-end) { border-radius: 9px 0 0 9px; }
.rcal-grid button.is-end:not(.is-start) { border-radius: 0 9px 9px 0; }
.rcal-grid button.is-preview { background: rgba(240, 184, 74, 0.55); }

/* ---------- Content Plan side panel: nothing wider than the panel, more visual ---------- */
.pp-list { grid-template-columns: minmax(0, 1fr); }
.pp-entry { min-width: 0; padding: 6px 30px 6px 9px; gap: 10px; border-radius: 12px; }
.pp-entry::before { top: 10px; bottom: 10px; }
.pp-entry-txt b { font-size: 12.5px; }
.pp-thumb, .pp-thumb-img { width: 38px; height: 48px; border-radius: 8px; flex: none; }
.pp-thumb-img { display: block; background-size: cover; background-position: 50% 30%; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
/* days: compact when empty, a counter when not */
.pp-day > header { position: relative; }
.pp-day .pp-n { margin-top: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: var(--on-gold); background: var(--gold); }
.pp-day.is-empty > header { flex-direction: row; gap: 4px; padding: 8px 0; justify-content: center; }
.pp-day.is-empty > header span { font-size: 10px; }
.pp-day.is-empty > header b { font-size: 15px; }
.pp-day.is-empty > header em { display: none; }
.pp-day.is-empty .pp-list { min-height: 0; padding: 8px 10px; }
.pp-day.is-empty .pp-drop-hint { font-size: 11.5px; }
.pp-day.is-empty { grid-template-columns: 64px minmax(0, 1fr); }
/* week progress: a dot per day */
.pp-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.pp-dots button { display: grid; justify-items: center; gap: 4px; padding: 4px 0 2px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; transition: background 0.15s; }
.pp-dots button:hover { background: rgba(var(--fg), 0.05); }
.pp-dots button:hover small, .pp-dots button.is-focus small { color: var(--text); }
.pp-dots button.is-focus { background: rgba(240, 184, 74, 0.12); }
.pp-dots button.is-focus small { color: var(--gold); font-weight: 700; }
.pp-dots i { width: 100%; height: 8px; border-radius: 6px; background: rgba(var(--fg), 0.08); }
.pp-dots button.is-on i { background: linear-gradient(90deg, #f0b84a, #f8cc75); box-shadow: 0 0 10px rgba(240, 184, 74, 0.35); }
.pp-dots button.is-today i { outline: 1px solid rgba(240, 184, 74, 0.6); outline-offset: 2px; }
.pp-dots small { font-size: 10px; color: var(--muted); }

/* Library loading: skeleton cards with a shimmer + a thin gold bar on top while posts load */
.lib-skel { position: relative; margin-bottom: 18px; border-radius: 18px; overflow: hidden; background: var(--surface); border: 0.5px solid var(--line); }
.lib-skel i { position: absolute; inset: 0 0 46px 0; background: rgba(var(--fg), 0.04); }
.lib-skel span { position: absolute; left: 12px; right: 40%; bottom: 16px; height: 10px; border-radius: 6px; background: rgba(var(--fg), 0.06); }
.lib-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: skelShine 1.3s ease-in-out infinite;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.06) 50%, transparent 80%); }
@keyframes skelShine { to { transform: translateX(100%); } }
/* While posts load: a thin gold line running along the bottom edge of the sticky bar above the posts (the filter bar,
   or the top bar when there's no filter bar), so it's always in view, full width and never past the column */
.feed-bar::after, .lfb::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) no-repeat; background-size: 35% 100%; background-position: -60% 0; transition: opacity 0.2s; }
.feed:has([data-posts][aria-busy="true"]) .lfb:not([hidden])::after,
.feed:has([data-posts][aria-busy="true"]):has(.lfb[hidden]) .feed-bar::after { opacity: 1; animation: loadBar 1.1s ease-in-out infinite; }
@keyframes loadBar { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .lib-skel::after, .feed-bar::after, .lfb::after { animation: none; } }

/* Content Plan panel: drop on a time (hours appear under the day being dragged over) + time of each post */
.pp-times { display: none; grid-column: 1 / -1; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 0 8px 8px; }
.pp-times small { grid-column: 1 / -1; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pp.is-receiving .pp-day.is-over .pp-times { display: grid; animation: ppTimesIn 0.15s ease-out; }
.pp-times span { display: grid; place-items: center; height: 26px; border-radius: 7px; border: 1px dashed rgba(240, 184, 74, 0.35); font: 600 11.5px var(--font-body); font-variant-numeric: tabular-nums; color: var(--muted); }
.pp-times span.is-over { color: #0b1020; background: var(--gold) !important; border-style: solid; box-shadow: none; transform: scale(1.08); }
@keyframes ppTimesIn { from { opacity: 0; transform: translateY(-3px); } }
.pp-time { appearance: none; -webkit-appearance: none; margin-left: 2px; padding: 1px 6px; border: 1px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--text); font: 600 11px var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.pp-time:hover, .pp-time:focus-visible { border-color: rgba(240, 184, 74, 0.5); outline: none; }
.pp-time option { background: #0d1426; color: #fff; }

/* Content Plan panel: one day opened big (click a day in the week bar) */
.pp-focus { display: grid; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-soft); background: var(--surface-2); }
.pp-focus.is-today { border-color: rgba(240, 184, 74, 0.45); }
.pp-focus > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; text-align: center; }
.pp-focus > header span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.pp-focus > header span em { font-style: normal; font-weight: 700; color: var(--gold); }
.pp-focus > header b { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1.15; }
.pp-focus > header small { font-size: 12px; color: var(--muted); }
.pp-big-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-big { position: relative; display: grid; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-soft); cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.pp-big:hover { transform: translateY(-2px); border-color: rgba(240, 184, 74, 0.45); }
.pp-big-img { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; background: var(--surface-3, #121a30) center / cover no-repeat; color: var(--muted); overflow: hidden; }
.pp-big-img svg { width: 26px; height: 26px; }
.pp-big-txt { display: grid; gap: 3px; padding: 8px 10px 10px; min-width: 0; }
.pp-big-txt b { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-big-txt small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-big-txt small i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--s, var(--muted)); }
.pp-big-time { position: absolute; top: 8px; left: 8px; margin: 0; padding: 3px 8px; font-size: 12px; background: rgba(8, 12, 24, 0.78); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pp-big .pp-entry-x { position: absolute; top: 8px; right: 8px; transform: none; background: rgba(8, 12, 24, 0.78); color: #fff; opacity: 0; transition: opacity 0.15s; }
.pp-big:hover .pp-entry-x, .pp-big:focus-within .pp-entry-x { opacity: 1; }
.pp-focus-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; margin: 0; padding: 26px 10px; border: 1.5px dashed rgba(240, 184, 74, 0.3); border-radius: 12px; text-align: center; font-size: 12.5px; color: var(--muted); }
.pp-focus-empty svg { width: 22px; height: 22px; color: var(--gold); }
.pp.is-receiving .pp-focus .pp-times { display: grid; padding: 0; }
.pp-focus-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 0; border-radius: 10px; background: rgba(var(--fg), 0.05); color: var(--muted); font: 600 12px var(--font-body); cursor: pointer; }
.pp-focus-back:hover { color: var(--text); background: rgba(var(--fg), 0.08); }
.pp-focus-back svg { width: 14px; height: 14px; }
@media (hover: none) { .pp-big .pp-entry-x { opacity: 1; } }
/* one day open in the panel: wider panel, 3 cards a row */
.library.plan-open.plan-day { grid-template-columns: 316px minmax(0, 1fr) 540px; }
.library.plan-open.plan-day.filters-collapsed { grid-template-columns: 0 minmax(0, 1fr) 540px; }
.library.plan-open.plan-day .pp-big-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .library.plan-open.plan-day { grid-template-columns: 300px minmax(0, 1fr) 440px; }
  .library.plan-open.plan-day.filters-collapsed { grid-template-columns: 0 minmax(0, 1fr) 440px; }
  .library.plan-open.plan-day .pp-big-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Content Plan panel: "Saving… / Saved" next to the plan name */
.pp-saved { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #00d85b; background: rgba(0, 216, 91, 0.1); white-space: nowrap; }
.pp-saved[hidden] { display: none; }
.pp-saved svg { width: 13px; height: 13px; }
.pp-saved.is-saving { color: var(--muted); background: rgba(var(--fg), 0.06); }
.pp-saved .ai-spinner { width: 11px; height: 11px; border-width: 2px; }
/* Content Plan panel: plan menu (switch / rename / new) in the site's style instead of the browser's select */
.pp-planpick { position: relative; min-width: 0; max-width: 100%; }
.pp-plan-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 4px; height: 36px; padding: 0 10px 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pp-plan-btn b { font: 600 15px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-plan-btn svg { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
.pp-plan-btn:hover { border-color: rgba(240, 184, 74, 0.5); }
.pp-plan-btn[aria-expanded="true"] { border-color: var(--gold); background: rgba(240, 184, 74, 0.08); }
.pp-plan-btn[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--gold); }
.pp-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 270px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); animation: ppMenuIn 0.14s ease-out; }
.pp-menu[hidden] { display: none; }
@keyframes ppMenuIn { from { opacity: 0; transform: translateY(-4px); } }
.pp-menu-cap { margin: 4px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pp-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--line-soft); }
.pp-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: 500 13.5px var(--font-body); text-align: left; cursor: pointer; }
.pp-menu-item:hover, .pp-menu-item:focus-visible { background: rgba(var(--fg), 0.06); outline: none; }
.pp-menu-item.is-on { background: rgba(240, 184, 74, 0.1); font-weight: 600; }
.pp-menu-item.is-gold { color: var(--gold); font-weight: 600; }
.pp-menu-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-menu-dot { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--gold); }
.pp-menu-dot svg { width: 15px; height: 15px; }
.pp-menu-item:not(.is-on):not(.is-gold) .pp-menu-dot svg { color: var(--muted); }
.pp-menu-form { display: grid; gap: 8px; padding: 8px; }
.pp-menu-form label { font-size: 12px; font-weight: 600; color: var(--muted); }
.pp-menu-form input { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 14px var(--font-body); }
.pp-menu-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.pp-menu-form div { display: flex; justify-content: flex-end; gap: 6px; }
.pp-menu-form .btn { padding: 8px 14px; font-size: 13px; }
.pp-menu-cancel { padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; }
.pp-menu-cancel:hover { color: var(--text); }

/* Library filters, new layout: sections as questions + Matchday timeline */
.lf-sec-v2 + .lf-sec-v2 { margin-top: 10px; padding-top: 14px; border-top: 0.5px solid var(--line-soft); }
.lf-sec-v2 .lf-lbl { margin-bottom: 2px; font-size: 12px; }
.lf-q { margin: 0 2px 10px; font-size: 12px; color: var(--muted); }
.lf-sub-top { margin-top: 2px; }
.lf-md { margin-bottom: 8px; padding: 12px; border-radius: 14px; border: 0.5px solid var(--line); background: linear-gradient(180deg, rgba(240, 184, 74, 0.06), transparent 70%); }
.lf-md-h { display: flex; align-items: baseline; gap: 8px; }
.lf-md-h .lf-i { align-self: center; width: 16px; height: 16px; color: var(--gold); }
.lf-md-h b { font-family: var(--font-display); font-size: 14px; }
.lf-md-h small { margin-left: auto; font-size: 11px; color: var(--muted-dim); }
.lf-md-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); margin: 14px 0 10px; }
.lf-md-steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(240, 184, 74, 0.25), rgba(240, 184, 74, 0.6), rgba(240, 184, 74, 0.25)); }
.lf-md-steps button { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 0 4px; border: 0; background: none; color: var(--muted); font: 600 12px var(--font-body); cursor: pointer; }
.lf-md-steps i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid rgba(240, 184, 74, 0.5); transition: transform 0.15s, background 0.15s; }
.lf-md-steps button:hover { color: var(--text); }
.lf-md-steps button:hover i { transform: scale(1.15); }
.lf-md-steps .is-cur { color: var(--gold); }
.lf-md-steps .is-cur i { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(240, 184, 74, 0.18); }
.lf-md-steps .has-on:not(.is-cur) i { background: rgba(240, 184, 74, 0.55); }
.lf-md-steps em { position: absolute; top: -8px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: #0b1020; font: 700 10px/16px var(--font-body); font-style: normal; }
.lf-md-chips { min-height: 30px; animation: ppTimesIn 0.15s ease-out; }
.lf-md .lf-sub { margin: 12px 2px 6px; }
.lf-md-opp { margin-top: 10px; }

/* Library filters: clubs like mine, Content Plan hints, sponsors card, sentence search */
.lf-like, .lf-hint { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 8px; padding: 10px 12px; border-radius: 12px; border: 0.5px dashed rgba(240, 184, 74, 0.45); background: rgba(240, 184, 74, 0.05); color: var(--text); text-align: left; text-decoration: none; }
.lf-like > .lf-i:first-child, .lf-hint > .lf-i { flex: none; width: 18px; height: 18px; color: var(--gold); }
.lf-like span, .lf-hint span { display: grid; gap: 1px; min-width: 0; flex: 1; }
.lf-like b, .lf-hint b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-like small, .lf-hint small { font-size: 11px; color: var(--muted); }
.lf-hint em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gold); }
.lf-like .lf-sp-ck { width: 16px; height: 16px; opacity: 0; color: var(--gold); }
.lf-like.is-on, .lf-hint.is-on { border-style: solid; border-color: var(--gold); background: var(--gold-tint); }
.lf-like.is-on .lf-sp-ck { opacity: 1; }
.lf-spons { margin-top: 10px; background: linear-gradient(180deg, rgba(0, 216, 91, 0.06), transparent 70%); }
.lf-spons .lf-md-h .lf-i { color: #00d85b; }
.lf-spons .lf-stack { margin-top: 10px; }
.lf-hit-all { align-items: flex-start; border-bottom: 0.5px solid var(--line-soft); }
.lf-hit-all > .lf-i { color: var(--gold); margin-top: 2px; }
.lf-hit-all .lf-hv { display: grid; gap: 6px; }
.lf-hit-all b { color: var(--gold); }
.lf-hit-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.lf-hit-tags i { padding: 2px 8px; border-radius: 100px; background: rgba(var(--fg), 0.07); font-style: normal; font-size: 11px; color: var(--text); }
/* "Content Creators" under Replicable ideas: gold gradient */
.lf-sp-creators { --g: linear-gradient(90deg, #d99a2b, #f0b84a 45%, #ffd98a); --g-soft: linear-gradient(90deg, rgba(217, 154, 43, 0.85), rgba(255, 217, 138, 0.85)); --glow: 240, 184, 74; }
.lf-sp-creators .lf-sp-ic { color: #1a1206; }
.lf-sp-creators.is-on, .lf-sp-creators.is-on .lf-sp-tx b { color: #1a1206; }
.lf-sp-creators.is-on .lf-sp-n { color: rgba(26, 18, 6, 0.75); }
.lf-sp-creators.is-on .lf-sp-ic { background: rgba(26, 18, 6, 0.12); }
.lf-hit-tags i.is-views { background: var(--gold-tint); color: var(--gold); font-weight: 600; }
/* Content Creators explainer: gold, with dark text on the gold parts */
.lf-sp-pop.lf-sp-creators .sp-ic, .lf-sp-pop.lf-sp-creators .sp-go { color: #1a1206; }

/* Home: the video (poster in the hero, player in a modal) */
.hero-shot { aspect-ratio: 16 / 9; }
.hero-shot img { opacity: 0.85; object-position: center; }
.hv-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(5, 8, 18, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s; }
.hv-modal.is-open { opacity: 1; }
.hv-box { position: relative; width: min(1280px, 100%, calc((100vh - 48px) * 16 / 9)); }
.hv-modal.is-vertical .hv-box { width: min(100%, calc((100vh - 48px) * 9 / 16)); }
.hv-box video { display: block; width: 100%; border-radius: 14px; background: #000; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(240, 184, 74, 0.35); }
.hv-x { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--gold); color: #1a1206; font: 700 16px var(--font-body); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
@media (max-width: 700px) { .hv-x { top: 8px; right: 8px; } }

/* ===== Main menu v2 (js/nav-menu.js): wide pill tabs with drop-down panels ===== */
.site-nav { width: 100%; max-width: none; margin: 0; top: 0; height: 76px; padding: 0 16px 0 24px; gap: 14px; border-radius: 0; border: 0; box-shadow: none; background: transparent; }
/* no bar behind the menu: the tabs and buttons carry their own surfaces (readable over any section) */
.mm-btn-tab { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-nav .lang-switch, .site-nav .theme-toggle { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 1180px) { .site-nav.is-open { background: var(--surface); } }
.site-nav.is-tight.is-open { background: var(--surface); }
.nav-links.mm { flex: 1; margin-left: 8px; gap: 8px; font-size: 15px; }
.mm-tab { position: relative; flex: 1; min-width: 0; }
.mm-btn-tab { width: 100%; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--fg), 0.05), rgba(var(--fg), 0.015)); color: var(--text); font: 500 15px var(--font-body); white-space: nowrap; cursor: pointer; opacity: 1 !important; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.mm-btn-tab:hover, .mm-tab.is-open .mm-btn-tab, .mm-btn-tab[aria-current="page"] { border-color: rgba(240, 184, 74, 0.45); background: linear-gradient(180deg, rgba(var(--fg), 0.09), rgba(var(--fg), 0.03)); color: var(--text) !important; }
.mm-chev { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.mm-tab.is-open .mm-chev { transform: rotate(180deg); }
.mm-panel { position: absolute; top: calc(100% + 12px); left: 0; z-index: 60; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s; }
.mm-tab.is-open .mm-panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.18s, transform 0.18s; }
.mm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* hover bridge */
.mm-grid { width: 640px; } .mm-about { width: 560px; } .mm-contact { width: 360px; }
.mm-eyebrow, .mm-hello { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.mm-title { margin: 0 0 6px; font: 600 24px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
.mm-title em { font-style: normal; color: var(--gold); }
.mm-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
.mm-grid .mm-title { margin-bottom: 18px; }
.mm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.mm-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 4px 8px; }
.mm-item, .mm-link { display: flex; gap: 14px; align-items: flex-start; padding: 10px; border-radius: 12px; color: var(--text); opacity: 1 !important; transition: background 0.15s; }
.mm-item:hover, .mm-link:hover { background: rgba(var(--fg), 0.05); color: var(--text) !important; }
.mm-item > span:last-child, .mm-link { display: grid; gap: 3px; }
.mm-item b, .mm-link b { font-size: 15px; font-weight: 600; }
.mm-item small, .mm-link small { font-size: 13px; line-height: 1.4; color: var(--muted); white-space: normal; }
.mm-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--fg), 0.04); color: var(--text); }
.mm-ic svg, .mm-featured svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-item:hover .mm-ic { border-color: rgba(240, 184, 74, 0.5); color: var(--gold); }
.mm-featured { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(240, 184, 74, 0.35); background: rgba(240, 184, 74, 0.05); color: var(--text); opacity: 1 !important; }
.mm-featured:hover { border-color: var(--gold); color: var(--text) !important; }
.mm-featured > span { display: grid; gap: 3px; flex: 1; }
.mm-featured i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.mm-featured b { font-size: 15px; } .mm-featured small { font-size: 13px; color: var(--muted); }
.mm-featured svg { color: var(--gold); }
/* box without a description line (Resources): a little less padding so it sits level with the links above */
.mm-featured-sm { margin-top: 10px; padding: 13px 18px; }
.mm-featured-sm > span { gap: 4px; }
/* main call to action: white pill with the arrow in a circle */
.nav-actions .nav-cta { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 6px 0 22px; border-radius: 100px; background: #fff; color: #0b1020; border: 0; font-weight: 600; box-shadow: none; }
.nav-actions .nav-cta:hover { background: #fff; color: #0b1020; transform: translateY(-1px); }
.nav-cta-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: #1a1206; }
.nav-cta-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] .nav-actions .nav-cta { background: #0b1020; color: #fff; }
/* narrow screens (and a nav that doesn't fit, js/main.js .is-tight): stacked tabs, panels open in place */
@media (max-width: 1180px) {
  .site-nav.is-open .nav-links.mm { flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 8px; margin: 12px 0 8px; }
  .site-nav .mm-tab { flex: none; width: 100%; }
  .site-nav .mm-panel { position: static; width: auto; margin-top: 8px; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .site-nav .mm-tab.is-open .mm-panel { display: block; }
  .site-nav .mm-cols { grid-template-columns: 1fr; }
  .site-nav.is-open .nav-actions { flex-wrap: wrap; }
}
.site-nav.is-tight.is-open .nav-links.mm { flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 8px; margin: 12px 0 8px; }
.site-nav.is-tight .mm-tab { flex: none; width: 100%; }
.site-nav.is-tight .mm-panel { position: static; width: auto; margin-top: 8px; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
.site-nav.is-tight .mm-tab.is-open .mm-panel { display: block; }
.site-nav.is-tight .mm-cols { grid-template-columns: 1fr; }
/* menu tabs as in the reference: slate fill, thin light border, small chevron; a little wider */
.nav-links.mm { gap: 10px; }
.mm-tab { flex: 1 1 270px; min-width: 150px; max-width: 340px; }
.mm-btn-tab { height: 52px; padding: 0 22px; gap: 9px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(180deg, #243247, #1d293b); color: #f1f4f9; font: 500 16px var(--font-body); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.mm-btn-tab:hover, .mm-tab.is-open .mm-btn-tab, .mm-btn-tab[aria-current="page"] { border-color: rgba(255, 255, 255, 0.3); background: linear-gradient(180deg, #2a3a52, #223044); color: #fff !important; }
.mm-chev { width: 13px; height: 13px; stroke-width: 2.6; }
:root[data-theme="light"] .mm-btn-tab { background: linear-gradient(180deg, #ffffff, #f2f4f8); border-color: rgba(18, 27, 51, 0.14); color: #121b33; }
:root[data-theme="light"] .mm-btn-tab:hover, :root[data-theme="light"] .mm-tab.is-open .mm-btn-tab { border-color: rgba(18, 27, 51, 0.3); background: #fff; color: #121b33 !important; }
@media (max-width: 1180px) { .site-nav .mm-tab { max-width: none; min-width: 0; } }
.site-nav.is-tight .mm-tab { max-width: none; min-width: 0; }
/* menu fills the whole width: the tabs share all the space between the logo and the buttons */
.mm-tab { flex: 1 1 0; min-width: 120px; max-width: none; }
.mm-tab:last-child .mm-panel { left: 0; right: auto; }   /* Contact opens from its left edge like the others */

/* ===== Lead flow (js/lead-flow.js): one question per screen ===== */
.lead { --lead-pad: 32px; display: flex; flex-direction: column; min-height: 520px; color: var(--text); }
.lead-top { padding: 0 0 18px; }
.lead-progress { height: 6px; border-radius: 3px; background: rgba(var(--fg), 0.1); overflow: hidden; }
.lead-progress i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #d99a2b, #f0b84a, #ffe3a3); transition: width 0.25s ease; }
.lead-meta { display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin-top: 10px; }
.lead-back { border: 0; background: none; color: var(--muted); font: 600 14px var(--font-body); padding: 6px 0; cursor: pointer; }
.lead-back:hover { color: var(--text); }
.lead-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.lead-stage { flex: 1; display: flex; flex-direction: column; outline: none; transition: opacity 0.16s ease, transform 0.2s ease; }
.lead-stage.is-out { opacity: 0; transform: translateX(-14px); }
.lead-stage.is-in { opacity: 1; transform: none; }
.lead-kicker { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.lead-q { margin: 0 0 22px; font: 700 clamp(24px, 3.2vw, 32px)/1.15 var(--font-display); letter-spacing: -0.02em; outline: none; }
.lead-opts { display: grid; gap: 10px; }
.lead-opts.is-6 { grid-template-columns: 1fr 1fr; }
.lead-opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(var(--fg), 0.03); color: var(--text); font: 600 16px/1.3 var(--font-body); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.lead-opt:hover { border-color: rgba(240, 184, 74, 0.6); background: rgba(240, 184, 74, 0.06); transform: translateY(-1px); }
.lead-opt:focus-visible { outline: 3px solid rgba(240, 184, 74, 0.6); outline-offset: 2px; }
.lead-opt[aria-checked="true"] { border-color: var(--gold); background: rgba(240, 184, 74, 0.14); }
.lead-key { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.lead-opt[aria-checked="true"] .lead-key { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.lead-ic { flex: none; font-size: 22px; line-height: 1; }
.lead-hint { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-dim, var(--muted)); }
.lead-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.lead-summary li { padding: 6px 12px; border-radius: 100px; background: rgba(var(--fg), 0.06); font-size: 13px; color: var(--muted); }
.lead-text { margin: 0 0 22px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.lead-ctas { display: grid; gap: 10px; }
.lead-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 24px; border-radius: 100px; border: 1.5px solid var(--line); background: transparent; color: var(--text); font: 700 16px var(--font-body); text-decoration: none; cursor: pointer; transition: border-color 0.15s, transform 0.15s, filter 0.15s; }
.lead-btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.lead-btn.is-primary { border: 0; background: linear-gradient(90deg, #d99a2b, #f0b84a, #ffd98a); color: #1a1206; }
.lead-btn.is-primary:hover { filter: brightness(1.05); }
.lead-btn:focus-visible, .lead-link:focus-visible, .lead-back:focus-visible { outline: 3px solid rgba(240, 184, 74, 0.6); outline-offset: 2px; }
.lead-btn.is-loading { pointer-events: none; opacity: 0.7; }
.lead-btn.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: leadSpin 0.7s linear infinite; }
.lead-msg { margin-top: 10px; }
.lead-link { margin-top: 16px; border: 0; background: none; color: var(--muted); font: 600 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: center; }
.lead-link:hover { color: var(--gold); }
.lead-form { display: grid; gap: 12px; }
.lead-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.lead-field input, .lead-field textarea { width: 100%; box-sizing: border-box; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: rgba(var(--fg), 0.04); color: var(--text); font: 500 16px var(--font-body); }
.lead-field textarea { resize: vertical; min-height: 96px; }
.lead-field input:focus, .lead-field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.18); }
.lead-field [aria-invalid="true"], .lead-check input[aria-invalid="true"] { border-color: #ff6b81; outline-color: #ff6b81; }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-privacy { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.lead-privacy a { color: var(--gold); }
.lead-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--text); cursor: pointer; }
.lead-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #f0b84a; }
.lead-error { margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 59, 92, 0.12); color: #ff8a9c; font-size: 14px; font-weight: 600; }
.lead-cal { min-height: 440px; border-radius: 16px; overflow: auto; }
.lead-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 300px; color: var(--muted); font-weight: 600; }
.lead-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(240, 184, 74, 0.25); border-top-color: var(--gold); animation: leadSpin 0.8s linear infinite; }
@keyframes leadSpin { to { transform: rotate(360deg); } }
.lead-err-box { padding: 24px; border-radius: 16px; border: 1px solid var(--line); text-align: center; }
.lead-err-box p { margin: 0 0 16px; font-weight: 600; }
.lead-done { margin: auto 0; text-align: center; }
.lead-done-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: rgba(0, 216, 91, 0.15); color: #00d85b; font-size: 30px; font-weight: 700; }
.lead-when { margin: -8px 0 14px; font: 700 20px var(--font-display); color: var(--gold); text-transform: capitalize; }
.lead-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* modal */
.lead-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(5, 8, 18, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s ease; }
.lead-modal.is-open { opacity: 1; }
.lead-box { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 48px); overflow: auto; padding: 28px 32px 32px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7); transform: translateY(12px) scale(0.98); transition: transform 0.2s ease; }
.lead-modal.is-open .lead-box { transform: none; }
.lead-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(var(--fg), 0.08); color: var(--text); font-size: 15px; cursor: pointer; }
.lead-x:hover { background: rgba(var(--fg), 0.14); }
.lead-box .lead-top { padding-right: 46px; }
.lead-lock, .lead-lock body { overflow: hidden; }
/* inline (book-a-call.html, contact.html) */
.lead-inline { width: 100%; padding: 28px 32px 32px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6); box-sizing: border-box; }
@media (max-width: 640px) {
  .lead-modal { padding: 0; place-items: stretch; }
  .lead-box { width: 100%; max-height: none; height: 100dvh; border-radius: 0; padding: 18px 18px 22px; }
  .lead { min-height: calc(100dvh - 40px); }
  .lead-opts.is-6 { grid-template-columns: 1fr; gap: 8px; }
  .lead-opt { min-height: 54px; padding: 10px 14px; font-size: 15px; }
  .lead-hint { display: none; }
  .lead-inline { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { .lead-stage, .lead-modal, .lead-box, .lead-progress i { transition: none; } }

/* Sign up / log in: centred on the screen, clean logo, moving light background (js/auth-bg.js) */
.auth-page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden; }
.auth-page .auth { position: relative; z-index: 1; padding: 32px 0; }
.auth-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.auth-bg.is-on { opacity: 1; }
.auth-logo { width: auto; height: auto; border-radius: 0; background: none; border: 0; box-shadow: none; }
.auth-logo img.brand-logo { height: 58px; width: auto; filter: drop-shadow(0 6px 24px rgba(240, 184, 74, 0.28)); }
.auth-page .auth-card { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
@media (max-height: 760px) { .auth-page { place-items: start center; } }
/* Sign up / log in: tunnel of SCP posts (js/auth-tunnel.js) under the light ribbon (js/auth-bg.js) */
.atn-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #070b17; opacity: 0; transition: opacity 1.2s ease; }
.atn-scene.is-on { opacity: 1; }
.atn-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.atn-row { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.atn-t { position: absolute; left: 0; top: 0; display: block; box-sizing: border-box; border-radius: 7%; border: 1px solid rgba(255, 255, 255, 0.07); opacity: var(--o, 1); }
.atn-t.is-photo { border: 0; background: #17213b center / cover no-repeat; filter: brightness(0.7) saturate(0.9); }
.atn-t.is-accent { border: 0; background: linear-gradient(135deg, #f0b84a, #b07cff 55%, #5b4dff); opacity: calc(var(--o, 1) * 0.85); }
.atn-fog { position: absolute; inset: 0; background: radial-gradient(40% 52% at 50% 46%, rgba(7, 11, 23, 0.94) 0%, rgba(7, 11, 23, 0.7) 50%, rgba(7, 11, 23, 0) 88%), radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(7, 11, 23, 0.6)); }
.auth-page .auth-bg { z-index: 1; mix-blend-mode: screen; }
.auth-page .auth-bg.is-on { opacity: 0.55; }
.auth-page .auth { z-index: 2; }
:root[data-theme="light"] .atn-scene { filter: invert(0.92) hue-rotate(180deg); }
.auth h1 .gold { display: block; white-space: nowrap; }
.auth-page .auth h1, .auth-page .auth-legal { text-shadow: 0 2px 14px rgba(5, 8, 18, 0.95), 0 0 2px rgba(5, 8, 18, 0.9); }
.auth-page .auth-legal { padding: 8px 14px; border-radius: 12px; background: rgba(7, 11, 23, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.auth-card { position: relative; }
.auth-lang { position: absolute; top: 0; left: calc(100% + 12px); }
.auth-lang .lang-switch { flex-direction: column; height: auto; border-radius: 18px; }
@media (max-width: 620px) { .auth-lang { position: static; display: flex; justify-content: flex-end; margin: -24px -18px 10px 0; } .auth-lang .lang-switch { flex-direction: row; height: 38px; border-radius: 100px; } }
.auth-signed { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: rgba(240, 184, 74, 0.08); border: 1px solid rgba(240, 184, 74, 0.25); font-size: 13px; line-height: 1.5; color: var(--muted); }
.auth-signout { border: 0; padding: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
.auth-signout:hover { color: var(--text); }
.auth-reset-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Offer bar (js/promo-bar.js): top centre, above the menu; the code copies on click */
.promo-bar { position: relative; z-index: 51; display: flex; justify-content: center; padding: 8px 16px; background: #070b14; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #b9c2d2; font-size: 14px; line-height: 1.4; text-align: center; }
.promo-bar p { margin: 0; display: flex; align-items: center; justify-content: center; gap: 4px 10px; flex-wrap: wrap; }
.promo-bar b { color: #fff; font-weight: 600; }
.promo-code { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px 3px 10px; border-radius: 7px; border: 1px solid rgba(240, 184, 74, 0.45); background: rgba(240, 184, 74, 0.1); color: var(--gold, #f0b84a); font: inherit; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.promo-code:hover { background: rgba(240, 184, 74, 0.18); border-color: rgba(240, 184, 74, 0.7); }
.promo-code code { font: 600 13px/1 var(--font-body); letter-spacing: 0.06em; color: inherit; }
.promo-code svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.promo-code.is-done { border-color: rgba(47, 217, 122, 0.6); color: #2fd97a; background: rgba(47, 217, 122, 0.1); }
:root[data-theme="light"] .promo-bar { background: #121b33; }
@media (max-width: 560px) { .promo-bar { font-size: 13px; padding: 7px 12px; } }

/* Content Library, wide screens: the filter bar above the posts (js/library.js renderBar) — one button per section,
   its filters in a wide panel; the column keeps the one-click shortcuts */
.lfb { position: sticky; top: 61px; z-index: 6; padding: 12px 38px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.lfb[hidden] { display: none; }
.lfb-row { display: flex; gap: 10px; }
.lfb-btn { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--fg), 0.05), rgba(var(--fg), 0.015)); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.lfb-btn:hover, .lfb-btn.is-open { border-color: rgba(240, 184, 74, 0.45); background: linear-gradient(180deg, rgba(var(--fg), 0.09), rgba(var(--fg), 0.03)); }
.lfb-btn.is-set { border-color: rgba(240, 184, 74, 0.6); }
.lfb-btn > svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lfb-tx { display: grid; min-width: 0; line-height: 1.2; }
.lfb-tx b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfb-tx small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfb-btn.is-set .lfb-tx small { color: var(--gold); }
.lfb-btn em { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(90deg, #d99a2b, #f0b84a); color: #1a1206; font: 700 11.5px/1 var(--font-body); font-style: normal; }
.lfb-chev { flex: none; width: 15px; height: 15px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.lfb-btn.is-open .lfb-chev { transform: rotate(180deg); }
.lfb-panel { position: absolute; left: 38px; right: 38px; top: calc(100% - 4px); display: flex; flex-direction: column; max-height: min(70vh, 720px); border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55); animation: lfb-in 0.18s ease; }
@keyframes lfb-in { from { opacity: 0; transform: translateY(-6px); } }
.lfb-body { overflow-y: auto; padding: 18px 20px 6px; columns: 3 280px; column-gap: 22px; }
.lfb-body > * { break-inside: avoid; margin-bottom: 12px; }
.lfb-body .lf-sub { margin-top: 0; }
.lfb-foot { display: flex; justify-content: flex-end; padding: 10px 16px; border-top: 0.5px solid var(--line-soft); }
@media (max-width: 1280px) { .lfb, .lfb-panel { padding-left: 20px; padding-right: 20px; } .lfb-panel { left: 20px; right: 20px; padding: 0; } .lfb-tx small { display: none; } }

/* Content Library: filters for creators' posts, under the gold "Content Creators" button when it's on */
.lf-cc-sub { margin: -2px 0 8px; padding: 10px 12px 12px; border-radius: 0 0 14px 14px; border: 0.5px solid rgba(240, 184, 74, 0.35); border-top: 0; background: linear-gradient(180deg, rgba(240, 184, 74, 0.08), transparent 80%); }
.lf-cc-sub .lf-sub { margin: 10px 2px 6px; }

/* Content Library: a format chosen → its proportions open right under the format tiles */
.lf-fmt-ar { margin: 8px 0 4px; padding: 8px 10px 10px; border-radius: 12px; border: 0.5px solid rgba(240, 184, 74, 0.3); background: rgba(240, 184, 74, 0.05); animation: lfFmtIn 0.2s ease; }
.lf-fmt-ar .lf-sub { margin: 0 2px 8px; }
@keyframes lfFmtIn { from { opacity: 0; transform: translateY(-4px); } }
.lf-fmt-ar .lf-shp { height: 64px; gap: 3px; }
.lf-fmt-ar .lf-shp em { font-style: normal; font-size: 10px; color: var(--muted-dim); }
/* Content Library: language list with a flag beside each language */
.lf-lead-flag { width: 28px; height: 20px; border-radius: 4px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18); }
.lf-lead-flag img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
/* Content Library: Length timeline (same look as Views) */
.lf-dur .lf-hist i { cursor: help; }
.lf-dur-ticks { margin: 4px 0 0; font-size: 11px; color: var(--muted); }

/* Content Library: "My AI analyses" — violet glowing button, an AI "scan" over the library while it's on */
.ai-mine { position: relative; overflow: hidden; gap: 8px; border: 0 !important; color: #fff !important; font-weight: 700;
  background: linear-gradient(110deg, #7c5cff, #a78bfa 45%, #c4b5fd 60%, #8b6cf6) !important; box-shadow: 0 0 0 1px rgba(163, 189, 255, 0.4), 0 8px 26px -8px rgba(167, 139, 250, 0.85); }   /* the AI purple of the menu (167, 139, 250) */
.ai-mine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: aiShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes aiShine { 55%, 100% { transform: translateX(120%); } }
.ai-mine [data-icon] svg, .ai-mine svg { width: 16px; height: 16px; }
.ai-mine b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.22); font-size: 11.5px; }
.ai-mine b:empty { display: none; }
.ai-mine[aria-pressed="true"] { box-shadow: 0 0 0 2px #e4dcff, 0 10px 34px -6px rgba(167, 139, 250, 1); }
.ai-mine[hidden] { display: none; }
.library.ai-mode .feed { position: relative; background:
    radial-gradient(1200px 500px at 50% -10%, rgba(123, 92, 255, 0.18), transparent 70%),
    linear-gradient(rgba(150, 120, 255, 0.07) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(150, 120, 255, 0.07) 1px, transparent 1px) 0 0 / 34px 34px; }
.library.ai-mode .feed::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(150, 110, 255, 0.16) 70%, rgba(190, 160, 255, 0.55) 99%, transparent); animation: aiScan 6s linear infinite; }
@keyframes aiScan { from { transform: translateY(-160px); } to { transform: translateY(100vh); } }
.library.ai-mode .posts { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ai-mine::after, .library.ai-mode .feed::before { animation: none; display: none; } }
.ai-strip { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 38px 0; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(160, 125, 255, 0.4); background: linear-gradient(90deg, rgba(110, 77, 255, 0.16), rgba(160, 120, 255, 0.06)); }
.ai-strip[hidden] { display: none; }
.ai-strip-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 100px; background: rgba(0, 0, 0, 0.2); }
.ai-strip-tabs button { height: 30px; padding: 0 14px; border: 0; border-radius: 100px; background: none; color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; }
.ai-strip-tabs button[aria-selected="true"] { background: linear-gradient(110deg, #5b3df5, #9b6bff); color: #fff; }
.ai-strip-tabs em { font-style: normal; opacity: 0.75; margin-left: 4px; }
.ai-strip-tip { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.ai-strip-tip svg { width: 14px; height: 14px; color: #b79bff; }
.ai-strip-end { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 12.5px; color: var(--muted); }
.ai-strip-end a { color: #c4adff; }
.ai-strip-end .pill svg { width: 15px; height: 15px; }
.lib-ai-peek { display: grid; gap: 6px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; cursor: pointer; border: 1px solid rgba(160, 125, 255, 0.35);
  background: linear-gradient(180deg, rgba(123, 92, 255, 0.14), rgba(123, 92, 255, 0.04)); }
.lib-ai-peek q { font-weight: 700; font-size: 13.5px; line-height: 1.35; color: var(--text); }
.lib-ai-peek p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.lib-ai-peek small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #b79bff; }
.lib-ai-peek small svg { width: 12px; height: 12px; }
.ai-team-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(123, 92, 255, 0.12); color: #c4adff; font-size: 13px; }
.ai-team-note svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .ai-strip { margin: 12px 16px 0; } .ai-strip-end { margin-left: 0; } }

/* Content Library: "How do you tell it?" — tones as cards with the cover of their most viewed post */
.lf-tones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 2px 6px; }
.lf-tone { display: grid; gap: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.lf-tone:hover { border-color: rgba(240, 184, 74, 0.5); transform: translateY(-1px); }
.lf-tone.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.lf-tone.is-zero { opacity: 0.45; }
.lf-tone-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, rgba(240, 184, 74, 0.18), rgba(123, 92, 255, 0.18)); }
.lf-tone-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: lfFmtIn 0.3s ease; }
.lf-tone-img i { position: absolute; left: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 15px; background: rgba(7, 11, 23, 0.72); }
.lf-tone-tx { display: grid; padding: 0 2px 2px; line-height: 1.25; }
.lf-tone-tx b { font-size: 12.5px; font-weight: 600; }
.lf-tone-tx small { font-size: 11px; color: var(--muted); }
.lfb-body .lf-tones { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
/* Filter search: a team as club and as opponent in one row, "as opponent" beside it */
.lf-hit-wrap { display: flex; align-items: center; gap: 6px; }
.lf-hit-wrap .lf-hit { flex: 1; min-width: 0; }
.lf-hit-alt { flex: none; height: 26px; padding: 0 9px; border-radius: 100px; border: 0.5px solid var(--line); background: none; color: var(--muted); font: 600 11.5px var(--font-body); white-space: nowrap; cursor: pointer; }
.lf-hit-alt:hover, .lf-hit-alt.is-on { color: var(--gold); border-color: rgba(240, 184, 74, 0.6); }
.lf-hit-alt em { font-style: normal; opacity: 0.7; margin-left: 2px; }
/* Content Library: Format as icons in one row, the name on hover */
.lf-fmt-tiles { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; }
.lf-fmt-tiles .lf-tile { position: relative; aspect-ratio: auto; height: 48px; padding: 0; }
.lf-fmt-tiles .lf-tile .lf-i { width: 22px; height: 22px; }
.lf-fmt-tiles [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translate(-50%, 4px); z-index: 20; white-space: nowrap;
  padding: 5px 9px; border-radius: 8px; background: #0b111d; border: 0.5px solid var(--line); color: #fff; font: 600 12px var(--font-body); pointer-events: none; opacity: 0; transition: opacity 0.15s, transform 0.15s; }
.lf-fmt-tiles [data-tip]:hover::after, .lf-fmt-tiles [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Content Library head (content-library.html .lib-head): search bar + "My space" on top, the filter bar under them
   reaching the right edge; the Content Plan starts right below it */
.lib-head { position: sticky; top: 0; z-index: 7; background: var(--surface); }
.lib-head .feed-bar { position: relative; top: auto; z-index: auto; }
.lib-head .lfb { position: relative; top: auto; }
.my-space { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.my-space-t { font: 700 10.5px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dim); white-space: nowrap; }
.my-space-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.my-space-btns .pill { height: 38px; }
@media (min-width: 961px) {
  .library { grid-template-rows: auto 1fr; }
  .library > .filters { grid-column: 1; grid-row: 1 / span 2; }
  .library > .lib-head { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; }
  .library > .feed { grid-column: 2; grid-row: 2; }
  .library > .pp { grid-column: 3; grid-row: 2; top: var(--lib-head-h, 150px); height: calc(100vh - var(--lib-head-h, 150px)); }
  /* one row: the filter bar (Occasion, Goal, Sponsors, Get inspired by) next to "My space"; period and sort live in the
     filters column, so the feed-bar (only the phones' "Hide filters" pill) isn't shown */
  .lib-head .feed-bar { display: none; }
  .lib-head .my-space { grid-column: 3; grid-row: 1; border-left: 1px solid var(--line-soft); }
  .lib-head .lfb { grid-column: 2; grid-row: 1; }
  .lib-head .lf-sortbar { grid-column: 1; grid-row: 1; }
  /* "My space" stays in this row, also with the Content Plan open */
  .lib-head .my-space { flex-direction: row; align-items: center; gap: 10px; }
}

/* Content Plan side panel: key dates marked on their day (js/key-dates.js) */
.pp-kd { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 100px; background: var(--gold-tint); color: var(--gold); font: 600 10.5px var(--font-body); white-space: nowrap; }
.pp-kd svg { width: 11px; height: 11px; }
.pp-focus .pp-kd { margin-top: 4px; }
.pp-mday { position: relative; }
.pp-mkd { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; color: var(--gold); font-style: normal; }
.pp-mkd svg { width: 11px; height: 11px; }

/* Menu → Platform: the three pillars as cards — the home's colours and little visuals, one short line each */
.mm-pillars { width: 820px; }
.mm-phead { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.mm-pillars .mm-title { margin-bottom: 0; }
.mm-pcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mm-pillar { display: grid; align-content: start; gap: 6px; min-width: 0; white-space: normal; padding: 10px 10px 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(var(--fg), 0.03); color: var(--text); opacity: 1 !important; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.mm-pillar:hover { border-color: rgba(var(--acc), 0.6); background: rgba(var(--acc), 0.06); color: var(--text) !important; transform: translateY(-2px); }
.mm-pillar .tool-vis { height: 104px; margin: 0 0 6px; border-radius: 12px; }
.nav-links .mm-pillar { white-space: normal; }   /* .nav-links a keeps tab labels on one line */
.mm-pillar-h { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.mm-pillar .mm-ic { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(var(--acc), 0.16); color: rgb(var(--acc)); }
.mm-pillar .mm-ic svg { width: 17px; height: 17px; }
.mm-pillar-h b { font-size: 15.5px; font-weight: 600; }
.mm-pmore { display: flex; gap: 8px; }
.mm-pmore a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--line); color: var(--text); font-size: 13.5px; opacity: 1 !important; }
.mm-pmore a:hover { border-color: rgba(240, 184, 74, 0.55); color: var(--gold) !important; }
.mm-pmore svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1180px) { .mm-pillars { width: auto; } .mm-pcols { grid-template-columns: 1fr; } .mm-pillar .tool-vis { display: none; } }

/* Content Plan page: key dates (js/key-dates.js) on their day — a link to that date's posts in the library */
.org-kd { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 100px; background: var(--gold-tint); color: var(--gold); font: 600 11px var(--font-body); white-space: nowrap; text-decoration: none; max-width: 100%; overflow: hidden; }
.org-kd span { overflow: hidden; text-overflow: ellipsis; }
.org-kd:hover { background: rgba(240, 184, 74, 0.28); color: var(--gold); }
.org-kd svg { flex: none; width: 12px; height: 12px; }
th .org-kd { display: flex; justify-content: center; margin: 4px auto 0; width: fit-content; }
.org-kd-m { display: flex; width: fit-content; margin: 2px 0 4px; }

/* Filters column: the feed-bar "Hide filters" pill is gone on wide screens (phones keep it to open the filters sheet);
   while the column is hidden, a floating button where its hide button was opens it again */
.filters-show { display: none; position: fixed; left: 14px; top: 18px; z-index: 9; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); border: 0.5px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.filters-show .filter-count { position: absolute; top: -7px; right: -9px; margin: 0; }
@media (min-width: 961px) {
  .feed-bar .collapse { display: none; }
  .library.filters-collapsed .filters-show { display: grid; }
  .library.filters-collapsed .feed-bar { padding-left: 64px; }
  .library.filters-collapsed .lib-head .lf-sortbar { padding-left: 64px; }   /* room for the floating "show filters" arrow */
}

/* Content Library: "Saved boards" side panel (js/boards-panel.js) — same column as the Content Plan */
.boards-open .lib-grip { display: none !important; }
.saved-link[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.sbp-scroll { gap: 12px; }
.sbp-bar { min-height: 40px; font-size: 13px; color: var(--muted); }
.sbp-bar b { color: var(--text); font-weight: 600; }
.sbp-add { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 14px; border: 1px dashed var(--line); background: none; color: var(--gold); font: 600 13.5px var(--font-body); cursor: pointer; }
.sbp-add:hover { background: var(--gold-tint); }
.sbp-add svg, .sbp-board-h > svg, .sbp-none svg { width: 16px; height: 16px; }
.sbp-new { display: flex; gap: 8px; }
.sbp-new .input { flex: 1; min-width: 0; }
.sbp-board { flex: none; position: relative; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--surface-2); transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.sbp-board-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sbp-board-h > svg { margin-left: auto; color: var(--muted); transition: transform 0.2s; }
.sbp-board.is-open .sbp-board-h > svg { transform: rotate(180deg); }
.sbp-covers { display: flex; flex: none; }
.sbp-covers i { width: 34px; height: 44px; border-radius: 7px; margin-right: -10px; border: 2px solid var(--surface-2); background: var(--surface) center / cover no-repeat; display: grid; place-items: center; color: var(--muted); }
.sbp-covers i svg { width: 14px; height: 14px; }
.sbp-name { display: grid; min-width: 0; margin-left: 10px; }
.sbp-name b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbp-name small { font-size: 12px; color: var(--muted); }
.sbp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 12px 12px; }
.sbp-item { position: relative; }
.sbp-item i { display: block; aspect-ratio: 4 / 5; border-radius: 8px; background: var(--surface) center / cover no-repeat; }
.sbp-item button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(7, 11, 23, 0.75); color: #fff; opacity: 0; cursor: pointer; transition: opacity 0.15s; }
.sbp-item:hover button { opacity: 1; }
.sbp-item button svg { width: 12px; height: 12px; }
.sbp-empty, .sbp-none { margin: 0; font-size: 12.5px; color: var(--muted); }
.sbp-none { display: flex; gap: 8px; padding: 12px; }
.sbp-drop-hint { display: none; margin: 0; padding: 0 12px 10px; font-size: 12px; color: var(--gold); }
.sbp.is-receiving .sbp-board { border-style: dashed; border-color: rgba(240, 184, 74, 0.4); }
.sbp.is-receiving .sbp-drop-hint { display: block; }
.sbp-board.is-over { border-color: var(--gold) !important; border-style: solid !important; background: var(--gold-tint); transform: scale(1.01); }
.sbp-board.is-saved { animation: bpSaved 0.6s ease; }
@keyframes bpSaved { 30% { box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.5); } }
/* the boards panel as wide as the Content Plan (its day view) and filling its column */
.library.plan-open.boards-open { grid-template-columns: 316px minmax(0, 1fr) var(--side-w, 540px); }
.library.plan-open.boards-open.filters-collapsed { grid-template-columns: 0 minmax(0, 1fr) var(--side-w, 540px); }
@media (max-width: 1180px) { .library.plan-open.boards-open { grid-template-columns: 300px minmax(0, 1fr) 440px; } .library.plan-open.boards-open.filters-collapsed { grid-template-columns: 0 minmax(0, 1fr) 440px; } }
.library > .sbp { width: auto; justify-self: stretch; }
.sbp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Content Library: "Favs" (the favourite profiles from the profile) in Top Picks' place */
.lf-sp-favs .lf-sp-tx { display: grid; line-height: 1.2; }
.lf-sp-favs .lf-sp-tx small { font-size: 11px; font-weight: 500; opacity: 0.75; }
a.lf-sp-favs { text-decoration: none; }

/* "My AI analyses": analyses left on the button (red at 0) and the "buy more" tab under it */
.ai-mine b.is-out { background: #ff5a5f; color: #fff; }
.my-space-btns { position: relative; }
.ai-out { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 300px; display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(160, 125, 255, 0.45);
  background: var(--surface); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7), 0 0 40px -10px rgba(123, 92, 255, 0.5); white-space: normal; animation: lfFmtIn 0.18s ease; }
.ai-out b { font-size: 14px; }
.ai-out p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ai-out .btn { justify-content: center; gap: 6px; }
.ai-out .btn svg { width: 15px; height: 15px; }

/* Filters column: period ("All time") and sort, above Favs */
.lf-sortbar { display: flex; gap: 8px; margin: 0 10px 14px 0; }
.lf-sortbar .lf-dd { flex: 0 1 auto; min-width: 0; }
.lf-sortbar .lf-dd:last-child { flex: 1 1 0; }
.lf-sortbar .lf-dd-btn { width: 100%; justify-content: space-between; gap: 6px; padding: 0 10px; color: var(--muted); font-weight: 700; font-size: 13px; }
.lf-sortbar .lf-dd-btn > span:not(.lf-dd-k) { overflow: hidden; text-overflow: ellipsis; }
.lf-sortbar .lf-dd:first-child .lf-menu { left: 0; right: auto; }

/* Menu → Platform: the free-trial link hangs under the panel as a small tab, below Content Plan (right edge) */
.mm-ptab { position: absolute; top: calc(100% - 1px); right: 40px; display: flex; padding: 4px 8px 8px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; background: var(--surface); }
.mm-ptab::before, .mm-ptab::after { content: ""; position: absolute; top: 0; width: 16px; height: 16px; pointer-events: none; }
.mm-ptab::before { left: -16px; background: radial-gradient(circle at 0 100%, transparent 15px, var(--line) 15.5px, var(--line) 16px, var(--surface) 16.5px); }
.mm-ptab::after { right: -16px; background: radial-gradient(circle at 100% 100%, transparent 15px, var(--line) 15.5px, var(--line) 16px, var(--surface) 16.5px); }
.mm-ptab a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 100px; color: var(--text); font-size: 13.5px; font-weight: 500; opacity: 1 !important; white-space: nowrap; }
.mm-ptab a:hover { color: var(--gold) !important; background: var(--gold-tint); }
.mm-ptab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1180px) {
  .site-nav .mm-ptab { position: static; margin-top: 10px; border: 1px solid var(--line); border-radius: 100px; justify-content: center; }
  .site-nav .mm-ptab::before, .site-nav .mm-ptab::after { display: none; }
}

/* Filter bar panels (js/library.js lfpHtml): groups on the left, options as cards with the cover of their most viewed
   post on the right, a search box on top and what's chosen + "Show N posts" at the bottom */
.lfb-panel.lfp { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: min(640px, calc(100vh - var(--lib-head-h, 150px) - 24px)); max-height: none; overflow: hidden; }
.lfp-top { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.lfp-search { flex: 0 1 380px; min-width: 200px; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.lfp-search:focus-within { border-color: rgba(240, 184, 74, 0.55); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.12); }
.lfp-search .lf-i { width: 16px; height: 16px; stroke: var(--muted); flex: none; }
.lfp-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 13.5px var(--font-body); }
.lfp-search input::placeholder { color: var(--muted-dim); }
.lfp-now { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lfp-now-l { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.lfp-now-l .lf-i { width: 14px; height: 14px; }
.lfp-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 100px; border: 1px solid var(--line); background: rgba(var(--fg), 0.03); color: var(--muted); font: 500 13px var(--font-body); white-space: nowrap; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.lfp-pill:hover { color: var(--text); border-color: rgba(var(--fg), 0.22); }
.lfp-pill.is-on { background: var(--gold-tint); border-color: rgba(240, 184, 74, 0.6); color: var(--gold); }
.lfp-pill em { font-style: normal; font-size: 11px; color: var(--muted-dim); }
.lfp-pill .lf-i { width: 14px; height: 14px; }
.lfp-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; }
.lfp-rail { display: grid; align-content: start; gap: 2px; padding: 10px; border-right: 1px solid var(--line-soft); overflow-y: auto; scrollbar-width: thin; }
.lfp-r { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 11px; color: var(--muted); text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; }
.lfp-r:hover { background: rgba(var(--fg), 0.04); color: var(--text); }
.lfp-r.is-on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.lfp-r.is-on::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #d99a2b, #f0b84a); }
.lfp-ric { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--fg), 0.05); }
.lfp-r.is-on .lfp-ric { background: var(--gold-tint); color: var(--gold); }
.lfp-ric .lf-i { width: 16px; height: 16px; }
.lfp-rtx { display: grid; min-width: 0; line-height: 1.25; }
.lfp-rtx b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfp-rtx small { font-size: 11.5px; color: var(--muted-dim); }
.lfp-r em { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(90deg, #d99a2b, #f0b84a); color: #1a1206; font: 700 11px/1 var(--font-body); font-style: normal; }
.lfp-main { overflow-y: auto; padding: 20px 24px 24px; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.lfp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.lfp-head h3 { font: 600 21px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
.lfp-head p { margin-top: 4px; font-size: 13px; color: var(--muted); }
.lfp-head > span { font-size: 12.5px; color: var(--muted-dim); white-space: nowrap; }
.lfp-sub { margin: 20px 0 10px; font: 700 10.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dim); }
.lfp-main > .lfp-sub:first-child { margin-top: 0; }
.lfp-phases { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.lfp-phases button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 9px; color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; }
.lfp-phases button i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.lfp-phases button.is-live i { border-color: #ff5d5d; background: #ff5d5d; box-shadow: 0 0 0 3px rgba(255, 93, 93, 0.25); }
.lfp-phases button.is-on { background: var(--gold); color: #1a1206; }
.lfp-phases button.is-on:not(.is-live) i { background: #1a1206; border-color: #1a1206; }
.lfp-phases em { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.18); font: 700 10.5px/1 var(--font-body); font-style: normal; }
.lfp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lfp-cards-logo { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.lfp-card { position: relative; display: grid; grid-template-rows: 96px auto; border-radius: 13px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.lfp-card:hover { transform: translateY(-2px); border-color: rgba(var(--fg), 0.22); }
.lfp-img { position: relative; display: grid; place-items: center; background: linear-gradient(135deg, rgba(240, 184, 74, 0.14), rgba(var(--fg), 0.03)) center / cover no-repeat; color: var(--gold); }
.lfp-img[style] { background-size: cover; }
.lfp-img .lf-i { width: 28px; height: 28px; opacity: 0.8; }
.lfp-img[style]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(var(--surface-rgb), 0.85)); }
.lfp-meta { display: grid; gap: 2px; min-width: 0; padding: 9px 11px 11px; }
.lfp-meta b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.lfp-meta small { font-size: 11.5px; color: var(--muted-dim); }
.lfp-ck { position: absolute; top: 8px; right: 8px; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, 0.65); background: rgba(18, 27, 51, 0.45); backdrop-filter: blur(6px); color: #1a1206; }
.lfp-ck .lf-i { width: 13px; height: 13px; stroke-width: 3; opacity: 0; }
.lfp-card.is-on, .lfp-logo.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 14px 30px -14px rgba(240, 184, 74, 0.55); }
.lfp-card.is-on .lfp-ck, .lfp-logo.is-on .lfp-ck { background: var(--gold); border-color: var(--gold); }
.lfp-card.is-on .lfp-ck .lf-i, .lfp-logo.is-on .lfp-ck .lf-i { opacity: 1; }
.lfp-hot { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 2px 8px; border-radius: 100px; background: rgba(18, 27, 51, 0.72); backdrop-filter: blur(6px); color: var(--gold-mid); font: 700 10.5px var(--font-body); }
.lfp-card.is-low, .lfp-logo.is-low { opacity: 0.6; }
.lfp-card.is-zero, .lfp-logo.is-zero { opacity: 0.35; pointer-events: none; }
.lfp-logo { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 36px 8px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.lfp-logo:hover { border-color: rgba(var(--fg), 0.22); transform: translateY(-1px); }
.lfp-logo .lfp-meta { padding: 0; }
.lfp-logo .lfp-meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfp-logo .lfp-ck { top: 50%; transform: translateY(-50%); border-color: var(--line); background: transparent; }
.lfp-lg { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; background: #fff; color: #121b33; }
.lfp-lg img { width: 92%; height: 92%; object-fit: contain; }
.lfp-lg.is-photo img { width: 100%; height: 100%; object-fit: cover; }   /* Instagram profile pictures fill the square */
.lfp-lg b { font: 700 12px var(--font-body); }
.lfp-lg-ic { background: var(--gold-tint); color: var(--gold); }
.lfp-lg-ic .lf-i { width: 21px; height: 21px; }
.lfp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lfp-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--line); background: rgba(var(--fg), 0.03); color: var(--muted); font: 500 13px var(--font-body); cursor: pointer; }
.lfp-chip i { width: 8px; height: 8px; border-radius: 50%; }
.lfp-chip em { font-style: normal; font-size: 11px; color: var(--muted-dim); }
.lfp-chip:hover { color: var(--text); }
.lfp-chip.is-on { background: var(--gold-tint); border-color: rgba(240, 184, 74, 0.6); color: var(--gold); }
.lfp-opp { max-width: 460px; }
.lfp-tip { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: var(--muted-dim); }
.lfp-tip .lf-i { width: 14px; height: 14px; }
.lfp-none { padding: 40px 0; text-align: center; color: var(--muted-dim); }
.lfp-foot { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; border-top: 1px solid var(--line-soft); background: rgba(var(--fg), 0.02); }
.lfp-sel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.lfp-hint { font-size: 13px; color: var(--muted-dim); white-space: nowrap; }
.lfp-tag { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 5px 0 12px; border-radius: 100px; background: var(--gold-tint); border: 1px solid rgba(240, 184, 74, 0.45); color: var(--gold); font: 600 12.5px var(--font-body); white-space: nowrap; }
.lfp-tag button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: inherit; cursor: pointer; }
.lfp-tag button:hover { background: rgba(240, 184, 74, 0.25); }
.lfp-tag svg { width: 12px; height: 12px; }
.lfp-clear { color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.lfp-go { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 20px; border-radius: 100px; background: linear-gradient(90deg, #d99a2b, #f0b84a 60%, #ffd98c); color: #1a1206; font: 700 14px var(--font-body); white-space: nowrap; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(240, 184, 74, 0.7); transition: transform 0.15s; }
.lfp-go:hover { transform: translateY(-1px); }
.lfp-go svg { width: 16px; height: 16px; }
@media (min-width: 961px) {
  /* the panel opens across the whole head (posts + My space), not only under the bar */
  .lib-head .lfb { position: static; }
  .lib-head .lfb-panel.lfp { left: 16px; right: 16px; top: calc(100% + 6px); }
}
/* active filters: the chips wrap in their own area, the saved-search actions stay on the right */
.active-bar { flex-wrap: nowrap; }
.active-chips { flex: 1 1 0; }
.active-actions { flex: none; }
.saved-searches { max-width: 180px; }
.active-actions .pill svg { width: 15px; height: 15px; }
@media (max-width: 960px) { .active-bar { flex-wrap: wrap; } .active-chips { flex-basis: 100%; } .active-actions { width: 100%; } .saved-searches { flex: 1; max-width: none; } }
.active-actions .ab-save { width: 38px; padding: 0; justify-content: center; }

/* Posts load only on ▶ (every network): a poster first — stored cover, YouTube / TikTok image, or a drawn card */
.lib-card.is-poster .lib-media { background: #0d1426; }
.lib-card.is-poster .lib-cover { position: absolute; inset: 0; background: transparent; }
.lib-card.is-poster .lib-cover.no-cover, .an-poster .lib-cover.no-cover { display: none; }
.lib-cover.no-cover img, .an-poster .no-cover img { display: none; }
.lib-card.is-poster .lib-cover.no-cover::after, .an-poster .lib-cover.no-cover::after { content: none; }
.lib-playbtn.is-view svg { margin-left: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lib-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 56px 18px 48px; overflow: hidden;
  background: radial-gradient(120% 70% at 20% 0%, rgba(240, 184, 74, 0.12), transparent 60%), linear-gradient(180deg, #17203d, #0d1426); color: var(--text); }
.lib-ph b { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.lib-ph p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.lib-card.is-poster .lib-media.is-playing .lib-ph, .lib-card.is-poster .lib-media.is-playing .lib-cover { visibility: hidden; }

.an-poster { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 0.5px solid var(--line); background: #0d1426; }
.an-poster.is-vertical { aspect-ratio: 9 / 16; max-width: 340px; }
.an-poster .lib-cover { position: absolute; inset: 0; background: transparent; }
.an-poster .lib-cover img { opacity: 1; }
.an-poster.is-live { background: #000; }
.an-poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.an-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(18, 27, 51, 0.6); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: transform 0.2s, background 0.2s; }
.an-play::after { content: ""; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 13px 0 13px 20px; border-color: transparent transparent transparent #fff; }
.an-play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(240, 184, 74, 0.85); }
.an-embed { max-width: 420px; margin: 0 auto; }

/* Home: less space between How it works and What you get */
.magic#how-it-works { padding-bottom: 40px; }
#how-it-works + #what-is-scp { padding-top: 56px; }
@media (max-width: 960px) { .magic#how-it-works { padding-bottom: 24px; } #how-it-works + #what-is-scp { padding-top: 40px; } }
/* Favs popover: what the profile already has */
.lf-sp-pop .sp-status li b { color: var(--text); font-weight: 600; }
.lf-sp-pop .sp-status li.is-miss svg { color: #ff8a6b; }
.lf-sp-pop a.sp-go { text-decoration: none; }

/* Card footer avatar: reset the filter-grid crest style (padding, white disc, shadow) that shrank logos and photos */
.lib-foot .lib-crest { padding: 0; gap: 0; border: 0; cursor: inherit; transform: none; }
.lib-foot .lib-crest img { padding: 0; border-radius: 0; background: none; box-shadow: none; filter: none; display: block; }
.lib-foot .lib-crest:not(.is-photo) img { width: 74%; height: 74%; object-fit: contain; }
.lib-foot .lib-crest.is-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Logos fill their white square / circle with no margin (filter panels, filter chips, filter column, card footer) */
.lfp-lg img, .ac-logo img { width: 100%; height: 100%; object-fit: contain; }
.lf-crest img { width: 100%; height: 100%; object-fit: contain; }
.lf-mini img { width: 100%; height: 100%; object-fit: contain; }
.lib-foot .lib-crest:not(.is-photo) img { width: 100%; height: 100%; object-fit: contain; }

/* card footer: views (gold) and likes side by side */
.lib-foot-stats { display: flex; gap: 12px; }
.lib-foot-stats:empty { display: none; }
.lib-foot-views:not(.is-views) b { color: var(--text); }
/* Inspiration → Club: the squad as chips; filters column: "Who publishes" */
.lfp-squad { margin: -4px 0 14px; }
.lf-who { margin-top: 12px; }
.lf-who .lf-sub { margin: 0 0 8px; }

/* Home CTA ("Find your next winning post idea…"): a frame of light — two gold lights travel round the edge and a warm
   glow drifts along the top and bottom inside (instead of the static gold border) */
@property --cta-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cta-box { isolation: isolate; border: 1px solid rgba(240, 184, 74, 0.28); overflow: hidden;
  box-shadow: 0 0 90px -10px rgba(240, 184, 74, 0.22), inset 0 0 40px 0 rgba(240, 184, 74, 0.18); }
.cta-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--cta-a), transparent 0deg, rgba(255, 217, 140, 0.95) 22deg, rgba(240, 184, 74, 0.4) 50deg, transparent 80deg,
    transparent 180deg, rgba(255, 217, 140, 0.95) 202deg, rgba(217, 154, 43, 0.4) 230deg, transparent 260deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: cta-turn 7s linear infinite; }
.cta-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 70px at var(--x1, 30%) 0%, rgba(240, 184, 74, 0.32), transparent 70%),
    radial-gradient(35% 60px at var(--x2, 70%) 100%, rgba(217, 154, 43, 0.3), transparent 70%),
    radial-gradient(30% 50px at var(--x3, 85%) 100%, rgba(255, 217, 140, 0.18), transparent 70%);
  animation: cta-drift 9s ease-in-out infinite alternate; }
.cta-box > * { position: relative; z-index: 1; }
@property --x1 { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --x2 { syntax: "<percentage>"; inherits: false; initial-value: 70%; }
@property --x3 { syntax: "<percentage>"; inherits: false; initial-value: 85%; }
@keyframes cta-turn { to { --cta-a: 360deg; } }
@keyframes cta-drift { 0% { --x1: 20%; --x2: 75%; --x3: 40%; } 50% { --x1: 60%; --x2: 30%; --x3: 80%; } 100% { --x1: 85%; --x2: 55%; --x3: 15%; } }
@media (prefers-reduced-motion: reduce) { .cta-box::before, .cta-box::after { animation: none; } }

/* Content Creators → Accounts dropdown: a star marks up to 5 favourites (first in the list) */
.lf-accts { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; margin-top: 6px; scrollbar-width: thin; }
.lf-acct { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.lf-acct:hover { background: rgba(var(--fg), 0.04); }
.lf-acct.is-on { background: var(--gold-tint); }
.lf-star { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted-dim); cursor: pointer; transition: color 0.15s, transform 0.15s; }
.lf-star:hover { color: var(--gold); transform: scale(1.1); }
.lf-star .lf-i { width: 15px; height: 15px; }
.lf-star.is-on { color: var(--gold); }
.lf-star.is-on .lf-i { fill: currentColor; }
.lf-acct-b { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 2px; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; }
.lf-acct-b span { display: grid; min-width: 0; line-height: 1.2; }
.lf-acct-b span small { font-size: 11px; color: var(--muted-dim); }
.lf-acct-b em { font-style: normal; font-size: 11.5px; color: var(--muted-dim); }
.lf-acct.is-on .lf-acct-b { color: var(--gold); }

/* Inspiration panel: the rail in blocks (Where it's played · What's published · Who publishes it) */
.lfp-rh { margin: 14px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lfp-rh:first-child { margin-top: 2px; }

/* Filter bar (js/library.js renderBar): an outlined capsule — no fill, the platform's hairline; the open section under
   a lens in surface-2 (like the "My space" pills) that glides between them; white type, no icons */
.lfb-row.lfb-glass { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; padding: 5px; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.lfb-glass .lfb-lens { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n, 3)); border-radius: 999px; pointer-events: none;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.14);
  transform: translateX(calc(var(--x, 0) * 100%)) scale(0.96); opacity: 0;
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease; will-change: transform; }
.lfb-glass .lfb-lens.is-on { transform: translateX(calc(var(--x, 0) * 100%)); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lfb-glass .lfb-lens { transition: opacity 0.2s; } }
.lfb-glass .lfb-btn { z-index: 1; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text); text-align: center; transition: background 0.3s; }
.lfb-glass .lfb-btn:hover { background: rgba(var(--fg), 0.04); }
.lfb-glass .lfb-btn.is-open, .lfb-glass .lfb-btn.is-open:hover { background: transparent; }
.lfb-glass .lfb-btn.is-set { border: 0; }
.lfb-glass .lfb-tx b { font: 600 15px var(--font-display); letter-spacing: -0.01em; }
.lfb-glass .lfb-btn em { min-width: 20px; height: 20px; background: rgba(var(--fg), 0.14); color: var(--text); font-weight: 700; }
/* its panel: groups on the left, every option an example post (its most viewed), what's found on the right */
.lfp-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lfp-card { display: block; aspect-ratio: 4 / 5; }
.lfp-card .lfp-img { position: absolute; inset: 0; background: var(--surface-2) center / cover no-repeat; color: var(--muted); }
.lfp-card .lfp-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 12, 26, 0.92)); }
.lfp-img.is-loading { background-image: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: lfp-shimmer 1.2s linear infinite; }
.lfp-img.is-loading > * { opacity: 0.4; }
@keyframes lfp-shimmer { to { background-position: -200% 0; } }
.lfp-img-logo { width: 54px; height: 54px; object-fit: contain; }
.lfp-card .lfp-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px 11px; }
.lfp-card .lfp-meta b { color: #fff; font: 600 13.5px/1.25 var(--font-display); }
.lfp-card .lfp-meta small { color: rgba(255, 255, 255, 0.7); }
@media (prefers-reduced-motion: reduce) { .lfp-img.is-loading { animation: none; } }
/* Filters column without group headings: room between the groups (Who publishes · Views · networks · formats · rows) */
.lf-sec-v2 > .lf-who { margin: 18px 0 16px; }
.lf-sec-v2 .lf-grp + .lf-grp { margin-top: 18px; }
.lf-grp .lf-fmt-tiles { margin-bottom: 18px; }
.lf-grp > .lf-row-gap + .lf-row-gap { margin-top: 10px; }
/* Content Creators → Followers: a range slider (as Views) */
.lf-fol-h { display: flex; align-items: center; justify-content: space-between; }
.lf-fol-clear { color: #4f8cff; font: 500 12.5px var(--font-body); cursor: pointer; }
/* Content Library → Content Creators: one card per creator (js/library.js crRow) — header, collabs, 3 posts */
.cr-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cr-switch button { height: 34px; padding: 0 16px; border-radius: 9px; color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; transition: background 0.2s, color 0.2s; }
.cr-switch button.is-on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.12); }
.cr-loading { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.cr-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: border-color 0.2s, box-shadow 0.2s; }
.cr-card:hover { border-color: rgba(240, 184, 74, 0.35); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.8); }
.cr-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ava name stat" "collabs collabs collabs" "acts acts acts"; align-items: center; gap: 10px 12px; }
.cr-ava { grid-area: ava; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface-3); color: var(--gold); font: 700 16px var(--font-display); }
.cr-ava img { width: 100%; height: 100%; object-fit: cover; }
.cr-name { grid-area: name; display: grid; min-width: 0; }
.cr-name b { font: 600 17px var(--font-display); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-name small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cr-name .lf-pfi { width: 13px; height: 13px; }
.cr-stat { grid-area: stat; display: grid; text-align: right; }
.cr-stat b { font: 600 18px var(--font-display); color: var(--text); }
.cr-stat small, .cr-collabs small { font-size: 12.5px; color: var(--muted); }
.cr-collabs { grid-area: collabs; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 34px; }
.cr-logos { display: flex; }
.cr-logos i { width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; color: #121b33; border: 2px solid var(--surface); font: 700 11px var(--font-body); font-style: normal; }
.cr-logos i:first-child { margin-left: 0; }
.cr-logos img { width: 100%; height: 100%; object-fit: contain; }
.cr-acts { grid-area: acts; display: flex; align-items: center; gap: 8px; }
.cr-acts .save-btn { position: static; }
.cr-see { margin-left: auto; white-space: nowrap; }
.cr-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cr-post { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--line-soft); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.cr-post:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.8); }
.cr-vid { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #121b33; }
.cr-vid svg { width: 15px; height: 15px; }
/* Saved boards → saved creators */
.sv-cr { margin-top: 34px; }
.sv-cr h2 { font: 600 20px var(--font-display); margin-bottom: 12px; }
.sv-cr h2 span { font: 500 14px var(--font-body); color: var(--muted); margin-left: 6px; }
.sv-cr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.sv-cr-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.sv-cr-card .cr-stat { text-align: right; }
.sv-cr-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.sv-cr-acts .save-btn { position: static; }
.cr-post.is-empty { background-image: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: lfp-shimmer 1.6s linear infinite; }
/* Content Library: endless scroll — the "Load more" button only shows if the automatic loading can't start */
.load-more [data-more] { opacity: 0; pointer-events: none; }
.posts[aria-busy="true"] ~ .load-more::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--gold); animation: lm-spin 0.8s linear infinite; }
@keyframes lm-spin { to { transform: rotate(360deg); } }
/* creators' header and cards: room between the active bar, the switch, the count and the cards, and inside the cards */
.cr-switch { padding: 5px; border-radius: 14px; }
.cr-switch button { height: 40px; padding: 0 22px; border-radius: 10px; font-size: 13.5px; }
.cr-loading { margin: 0 0 22px 4px; font-size: 13.5px; }
.cr-grid { gap: 24px; }
.cr-card { padding: 24px; gap: 20px; border-radius: 20px; }
.cr-top { gap: 18px 16px; }
.cr-ava { width: 56px; height: 56px; }
.cr-name { gap: 3px; }
.cr-acts { gap: 10px; padding-top: 2px; }
.cr-posts { gap: 10px; }
/* filters column → Content Creators: each section (Accounts · Followers · Language · Gender · Content type · Creator type · Country) with room */
.lf-cc-sub { padding: 14px 14px 18px; }
.lf-cc-sub > .lf-row-gap, .lf-cc-sub > .lf-stack { margin-top: 18px; }
.lf-cc-sub > :first-child { margin-top: 4px; }
.lf-cc-sub > .lf-sub { margin: 22px 0 10px; }
.lf-cc-sub .lf-stack > * + * { margin-top: 12px; }
/* the creators' filters: their own box under the gold button, not stuck to it */
.lf-cc-sub { margin: 12px 0 14px; border-radius: 14px; border: 1px solid rgba(240, 184, 74, 0.28); background: linear-gradient(180deg, rgba(240, 184, 74, 0.06), rgba(var(--surface-rgb), 0.4) 70%); }
/* creators: boxes / list */
.cr-layout { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cr-layout button { width: 38px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; }
.cr-layout button svg { width: 17px; height: 17px; }
.cr-layout button.is-on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.12); }
.cr-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cr-grid.is-list .cr-card { flex-direction: row; align-items: center; gap: 24px; padding: 18px 20px; }
.cr-grid.is-list .cr-top { flex: 1; min-width: 0; grid-template-columns: auto minmax(0, 1.2fr) minmax(90px, 0.6fr) minmax(0, 1.2fr) auto; grid-template-areas: "ava name stat collabs acts"; }
.cr-grid.is-list .cr-stat { text-align: left; }
.cr-grid.is-list .cr-see { margin-left: 0; }
.cr-grid.is-list .cr-posts { flex: none; width: 300px; }
@media (max-width: 1280px) { .cr-grid.is-list .cr-card { flex-direction: column; align-items: stretch; } .cr-grid.is-list .cr-posts { width: auto; } .cr-grid.is-list .cr-top { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ava name stat" "collabs collabs acts"; } }
/* creators' view: the same side margins as the posts' grid (not stuck to the filters column's line) */
.cr-list { padding-inline: 38px; margin-top: 30px; }
.cr-list { padding-bottom: 60px; }
@media (max-width: 960px) { .cr-list { padding-inline: var(--gutter); } }
/* Content Creators' box in the filters column: Creators / Posts and boxes / list on top, above Accounts */
.lf-cc-view { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.lf-cc-view .cr-switch, .lf-cc-view .cr-layout { padding: 3px; border-radius: 11px; }
.lf-cc-view .cr-switch button { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.lf-cc-view .cr-layout button { width: 32px; height: 32px; border-radius: 8px; }
.lf-cc-view .cr-layout button svg { width: 15px; height: 15px; }
/* boxes / list: greyed out while the posts are shown (it only applies to the creators) */
.cr-layout.is-off { opacity: 0.4; }
.cr-layout.is-off button { cursor: default; }
.cr-layout.is-off button.is-on { background: transparent; box-shadow: none; }
.lf-fol-box { padding: 2px 2px 0; }
.lf-cc-sub > .lf-cc-chips { margin-top: 18px; }
/* panel → right column: the count and 4 of the most viewed posts with the filters chosen, live */
.lfp-body { grid-template-columns: 220px minmax(0, 1fr) 250px; }
.lfp-res { display: flex; flex-direction: column; gap: 4px; padding: 20px 18px; border-left: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(240, 184, 74, 0.07), transparent 55%); overflow-y: auto; }
.lfp-res small { font-size: 12.5px; color: var(--muted); }
.lfp-res > b { font: 600 30px/1.1 var(--font-display); color: var(--text); letter-spacing: -0.01em; }
.lfp-res-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.lfp-res-mini span { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--line-soft); }
.lfp-res-mini span:not([style]) { background-image: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: lfp-shimmer 1.4s linear infinite; }
.lfp-res-mini em { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 999px; background: rgba(8, 12, 26, 0.78); color: #fff; font: 600 10px var(--font-body); font-style: normal; }
.lfp-res .lfp-go { margin-top: auto; width: 100%; justify-content: center; }
.lfp-go-foot { display: none; }
@media (max-width: 1280px) { .lfp-body { grid-template-columns: 200px minmax(0, 1fr); } .lfp-res { display: none; } .lfp-go-foot { display: inline-flex; } }
/* panels: competitions / clubs / brands as small logo tiles (sports: .lfp-cards-sport, further down) */
.lfp-cards.lfp-cards-logo { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 8px; }
/* panel chips the chosen filters leave without posts: switched off */
.lfp-chip.is-off { opacity: 0.35; cursor: default; pointer-events: none; }
/* My space: the same buttons as Favs / Replicable ideas — a gradient outline, the icon in a gradient tile, filled when on */
.my-space-btns .pill { --g: linear-gradient(90deg, #d99a2b, #f0b84a); --g-soft: linear-gradient(90deg, rgba(217, 154, 43, 0.75), rgba(240, 184, 74, 0.75)); --glow: 240, 184, 74;
  position: relative; overflow: hidden; height: 46px !important; gap: 10px; padding: 0 14px 0 9px; border-radius: 13px; border: 1px solid transparent !important; box-shadow: none !important;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--g-soft) border-box !important; color: var(--text) !important; font: 600 13.5px var(--font-body); transition: transform 0.2s, background 0.2s; }
.my-space-btns .pill:hover { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--g-soft) border-box !important; }
.my-space-btns .pill > [data-icon] { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--g); }
.my-space-btns .pill > [data-icon] svg { width: 15px !important; height: 15px !important; color: #fff !important; stroke: #fff; }
/* the same two-tone gradients as the filters column's buttons (Favs red, Replicable green→cyan, Creators gold) */
.my-space-btns .ai-mine { --g: linear-gradient(90deg, #7c3aed, #d946ef); --g-soft: linear-gradient(90deg, rgba(124, 58, 237, 0.8), rgba(217, 70, 239, 0.8)); --glow: 167, 139, 250; }
.my-space-btns .ai-mine b { background: rgba(167, 139, 250, 0.22); color: #ddd3ff; }
.my-space-btns .plan-toggle { --g: linear-gradient(90deg, #2563eb, #38bdf8); --g-soft: linear-gradient(90deg, rgba(37, 99, 235, 0.8), rgba(56, 189, 248, 0.8)); --glow: 122, 162, 255; }
.my-space-btns .saved-link { --g: linear-gradient(90deg, #d99a2b, #f0b84a 45%, #ffd98a); --g-soft: linear-gradient(90deg, rgba(217, 154, 43, 0.85), rgba(255, 217, 138, 0.85)); --glow: 240, 184, 74; }
.my-space-btns .pill[aria-pressed="true"] { background: var(--g) border-box !important; color: #fff !important; box-shadow: 0 10px 26px -12px rgba(var(--glow), 0.9) !important; }
.my-space-btns .pill[aria-pressed="true"] > [data-icon] { background: rgba(255, 255, 255, 0.2); }
.my-space-btns .pill[aria-pressed="true"] b { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* My space: filled with their gradient, as the filters column's buttons look when on; the open one adds a ring */
.my-space-btns .pill, .my-space-btns .pill:hover { background: var(--g) border-box !important; color: #fff !important; }
.my-space-btns .pill:hover { filter: brightness(1.08); }
.my-space-btns .pill > [data-icon] { background: rgba(255, 255, 255, 0.2); }
.my-space-btns .pill b, .my-space-btns .ai-mine b { background: rgba(255, 255, 255, 0.22); color: #fff; }
.my-space-btns .pill[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 10px 26px -10px rgba(var(--glow), 0.95) !important; }
.my-space-btns .saved-link, .my-space-btns .saved-link:hover { color: #1a1206 !important; }
.my-space-btns .saved-link > [data-icon] svg { color: #1a1206 !important; stroke: #1a1206; }
.lf-sp-over.is-zero { opacity: 0.6; cursor: default; }
/* Softer, more modern gradients for the coloured buttons (filters column specials + My space): a diagonal two-tone a
   little less saturated, and a light sheen at the top */
.lf-sp-top { --g: linear-gradient(135deg, #e5484d, #ff8a7a); --g-soft: linear-gradient(135deg, rgba(229, 72, 77, 0.7), rgba(255, 138, 122, 0.7)); --glow: 229, 72, 77; }
.lf-sp-rep { --g: linear-gradient(135deg, #16b364, #3ccfc0); --g-soft: linear-gradient(135deg, rgba(22, 179, 100, 0.65), rgba(60, 207, 192, 0.65)); --glow: 22, 179, 100; }
.lf-sp-creators { --g: linear-gradient(135deg, #d6a03c, #f4cf7a); --g-soft: linear-gradient(135deg, rgba(214, 160, 60, 0.75), rgba(244, 207, 122, 0.75)); --glow: 240, 184, 74; }
.lf-sp-over { --g: linear-gradient(135deg, #f2711c, #fbbf4a); --g-soft: linear-gradient(135deg, rgba(242, 113, 28, 0.7), rgba(251, 191, 74, 0.7)); --glow: 242, 113, 28; }
.my-space-btns .ai-mine { --g: linear-gradient(135deg, #8b5cf6, #c38cf9); --glow: 139, 92, 246; }
.my-space-btns .plan-toggle { --g: linear-gradient(135deg, #3b82f6, #6cb8f8); --glow: 59, 130, 246; }
.my-space-btns .saved-link { --g: linear-gradient(135deg, #d6a03c, #f4cf7a); --glow: 240, 184, 74; }
.lf-sp.is-on, .my-space-btns .pill, .my-space-btns .pill:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%) border-box, var(--g) border-box !important; }
.lf-sp.is-on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -14px rgba(var(--glow), 0.9); }
.my-space-btns .pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -14px rgba(var(--glow), 0.9) !important; }
/* My AI analyses: its shine sweeping across and its glow, in the current purple */
.my-space-btns .ai-mine::after { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: aiShine 3.2s ease-in-out infinite; pointer-events: none; }
.my-space-btns .ai-mine { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 1px rgba(195, 140, 249, 0.4), 0 8px 26px -8px rgba(139, 92, 246, 0.85) !important; }
@media (prefers-reduced-motion: reduce) { .my-space-btns .ai-mine::after { animation: none; display: none; } }
/* My space: the icon is the button's direct <svg> (js/icons.js swaps the span): white on purple / blue, dark on gold */
.my-space .my-space-btns .pill > svg { width: 17px; height: 17px; color: #fff !important; stroke: currentColor; }
.my-space .my-space-btns .saved-link, .my-space .my-space-btns .saved-link:hover,
.my-space .my-space-btns .saved-link > svg, .my-space .my-space-btns .saved-link span { color: #1a1206 !important; }
/* Post detail with its AI analysis: dressed as AI (purple, a light running round the edge, a soft glow) and laid out
   horizontally on a wide screen — the post on the left, the analysis on the right with its blocks in two columns;
   one column on a phone */
@property --an-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.an-panel { width: min(1440px, 100%); border: 1px solid rgba(167, 139, 250, 0.32);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 90px rgba(139, 92, 246, 0.2);
  background: radial-gradient(120% 60% at 100% 0%, rgba(139, 92, 246, 0.1), transparent 60%), var(--surface); }
.an-panel::before { content: ""; position: absolute; inset: -1px; z-index: 4; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--an-a), transparent 0deg 250deg, rgba(167, 139, 250, 0.9) 300deg, #e879f9 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: an-orbit 6s linear infinite; }
@keyframes an-orbit { to { --an-a: 360deg; } }
.an-body { grid-template-columns: minmax(300px, 0.62fr) minmax(0, 1.38fr); }
.an-media { background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), transparent 40%), var(--bg); }
.an-ai-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; margin-bottom: 10px; border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #c38cf9); color: #fff; font: 700 11.5px var(--font-body); letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px -8px rgba(139, 92, 246, 0.9); position: relative; overflow: hidden; }
.an-ai-badge svg { width: 13px; height: 13px; }
.an-ai-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: aiShine 3.2s ease-in-out infinite; }
.an-grid { columns: 2 320px; column-gap: 16px; margin-top: 18px; }
.an-grid > .an-block { break-inside: avoid; margin: 0 0 16px; }
.an-block { background: linear-gradient(160deg, rgba(139, 92, 246, 0.1), transparent 55%), var(--surface-2); border-color: rgba(167, 139, 250, 0.22); }
.an-block h3 { color: #c4b5fd; }
.an-hook-block { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(217, 70, 239, 0.05) 65%), var(--surface-2); border-color: rgba(167, 139, 250, 0.45); }
.an-hook::before, .an-hook::after { color: #c084fc; }
.an-chip { background: rgba(139, 92, 246, 0.16); border-color: rgba(167, 139, 250, 0.4); color: #ddd3ff; }
.an-template { border-color: rgba(167, 139, 250, 0.35); }
.an-copy:hover { color: #c4b5fd; }
.an-timeline q { color: #ddd3ff; }
.an-t { border-color: rgba(167, 139, 250, 0.35); color: #c4b5fd; }
.an-close:hover { border-color: rgba(167, 139, 250, 0.7); }
.an-loading { background: linear-gradient(110deg, var(--surface-2) 30%, rgba(139, 92, 246, 0.18) 50%, var(--surface-2) 70%); background-size: 200% 100%; }
@media (max-width: 960px) { .an-body { grid-template-columns: 1fr; } .an-grid { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .an-panel::before, .an-ai-badge::after { animation: none; } }
/* Post detail: tags, the analysis' topics and the caption in a drop-down under the post */
.an-more { width: 100%; max-width: 460px; margin-top: 16px; border-radius: 14px; border: 1px solid rgba(167, 139, 250, 0.25); background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), transparent 55%), var(--surface-2); }
.an-more > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font: 600 14px var(--font-body); color: var(--text); }
.an-more > summary::-webkit-details-marker { display: none; }
.an-more > summary svg { width: 16px; height: 16px; color: #c4b5fd; }
.an-more > summary span { flex: 1; }
.an-more > summary svg:last-child { transition: transform 0.25s; color: var(--muted); }
.an-more[open] > summary svg:last-child { transform: rotate(180deg); }
.an-more-body { padding: 0 14px 14px; display: grid; gap: 12px; }
.an-more .an-topics { margin-top: 0; }
.an-more .dr-tags { margin: 0; }
.an-cap b { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.an-cap p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); white-space: pre-line; }
.an-actions .an-remove { width: 38px; padding: 0; justify-content: center; }
/* analysis block titles (HOOK, WHY IT WORKS…): a bit more presence — bigger, bolder, brighter, the icon in a small purple tile */
.an-block h3 { font-size: 14.5px; font-weight: 700; letter-spacing: 0.09em; color: #e4dcff; margin-bottom: 12px; gap: 10px; }
.an-block h3 svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: linear-gradient(135deg, #8b5cf6, #c38cf9); color: #fff; box-shadow: 0 6px 14px -8px rgba(139, 92, 246, 0.9); }
.an-adapt h3 svg { background: linear-gradient(135deg, #16b364, #3ccfc0); box-shadow: 0 6px 14px -8px rgba(22, 179, 100, 0.9); }
.an-summary { font-size: 15px; line-height: 1.55; }   /* same size as the rest of the analysis */
.an-actions .an-pdf { gap: 6px; }
/* post detail: as wide as the screen */
.an-modal { padding: 16px; }
.an-panel { width: 100%; max-height: calc(100vh - 32px); }
.an-grid { columns: 3 320px; }
@media (max-width: 960px) { .an-modal { padding: 0; } .an-panel { max-height: 100vh; } .an-grid { columns: 1; } }
.an-cap-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.an-more .an-cap-copy { position: static; transform: none; }
/* the analysis' blocks: a responsive grid that fills the width — cards of a row share their height.
   Wide: Hook · Why it works · Angle / Format across (its facts in a row) / Slide by slide · Scroll stoppers / How to adapt.
   Medium: two columns. Phone: one. */
.an-grid { columns: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.an-grid > .an-block { margin: 0; grid-column: span 4; }
.an-grid > .an-b-format, .an-grid > .an-b-adapt { grid-column: 1 / -1; }
.an-grid > .an-b-slides, .an-grid > .an-b-stop { grid-column: span 6; }
.an-b-format .an-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.an-chip { height: auto; min-height: 26px; padding-block: 3px; line-height: 1.35; white-space: normal; }
@media (max-width: 1400px) {
  .an-grid > .an-block { grid-column: span 6; }
  .an-grid > .an-b-format, .an-grid > .an-b-adapt { grid-column: 1 / -1; }
}
@media (max-width: 960px) { .an-grid { grid-template-columns: minmax(0, 1fr); } .an-grid > .an-block { grid-column: 1 / -1 !important; } }
.an-grid { grid-auto-flow: row dense; }   /* Angle fills the place next to Hook and Why it works */
/* "Tags and caption" drop-down, redesigned: the caption first as a quote card (copy in its corner), then the AI topics,
   then the tags as small cards (label above, chips below) in a grid */
.an-more-body { gap: 16px; }
.an-more .an-cap { margin: 0; padding: 14px 14px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); position: relative; }
.an-more .an-cap::before { content: "“"; position: absolute; right: 14px; bottom: -14px; font: 700 64px/1 var(--font-display); color: rgba(167, 139, 250, 0.18); pointer-events: none; }
.an-cap figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.an-cap figcaption span { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #c4b5fd; }
.an-cap figcaption span svg { width: 14px; height: 14px; }
.an-cap-copy { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(167, 139, 250, 0.4); background: rgba(139, 92, 246, 0.12); color: #ddd3ff; font: 600 12px var(--font-body); cursor: pointer; transition: background 0.2s; }
.an-cap-copy:hover { background: rgba(139, 92, 246, 0.25); }
.an-cap-copy svg { width: 13px; height: 13px; }
.an-more .an-cap p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-line; }
.an-more-sec { display: grid; gap: 8px; }
.an-more-sec[hidden] { display: none; }
.an-more-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.an-more-h small { font: 500 11px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted-dim); }
.an-more .an-topics .an-chip::before { content: "#"; opacity: 0.6; margin-right: 1px; }
.an-tags { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 0; }
.an-tags .dr-tag-row { grid-template-columns: 1fr; gap: 6px; padding: 9px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line-soft); }
.an-tags .dr-tag-row dt { padding: 0; font-size: 10px; color: var(--muted-dim); }
.an-tags .dr-tag-row dd { gap: 4px; }
.an-tags { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
/* features not in the member's plan: visible with a lock; the plan to get them on the pricing page */
.my-space-btns .pill.is-locked { filter: saturate(0.55); opacity: 0.85; }
.my-space-btns .pill.is-locked::before { content: ""; position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(8, 12, 26, 0.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 8px no-repeat; z-index: 2; }
.my-space-btns .ai-mine.is-locked b { display: none; }
.ai-out.is-locked b { display: flex; align-items: center; gap: 6px; }
.ai-out.is-locked b svg { width: 14px; height: 14px; }
.plan-card.is-wanted { box-shadow: 0 0 0 2px var(--gold), 0 24px 60px -24px rgba(240, 184, 74, 0.6); }
/* superadmin: View as a plan */
.view-as { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 10px; border-radius: 999px; border: 1px solid var(--line); font: 600 12px var(--font-body); color: var(--muted); }
.view-as select { height: 26px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text); font: 600 12px var(--font-body); padding: 0 8px; }
.view-as-bar { position: fixed; left: 50%; bottom: 16px; z-index: 400; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #c38cf9); color: #fff; font: 500 13px var(--font-body); box-shadow: 0 14px 34px -12px rgba(139, 92, 246, 0.9); }
.view-as-bar button { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.22); color: #fff; font: 600 12px var(--font-body); cursor: pointer; }
/* Content Plan: a post analysed with AI stands out in the AI purple (outline, soft tint, a sparkle) */
.pp-entry.is-ai, .pp-big.is-ai { position: relative; border-color: rgba(167, 139, 250, 0.65) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(217, 70, 239, 0.06) 70%), var(--surface-2) !important;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 8px 20px -12px rgba(139, 92, 246, 0.9); }
.pp-entry.is-ai::after, .pp-big.is-ai::after { content: "✦ AI"; position: absolute; top: 4px; right: 26px; padding: 1px 6px; border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #c38cf9); color: #fff; font: 700 9.5px var(--font-body); letter-spacing: 0.04em; pointer-events: none; }
.org-entry.is-ai { position: relative; border-color: rgba(167, 139, 250, 0.65) !important; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(217, 70, 239, 0.05) 70%), var(--surface-2) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.3); }
.org-entry.is-ai::after { content: "✦ AI"; position: absolute; bottom: 6px; right: 8px; padding: 1px 6px; border-radius: 999px; background: linear-gradient(135deg, #8b5cf6, #c38cf9); color: #fff; font: 700 9.5px var(--font-body); pointer-events: none; }
p.lead { display: block; min-height: 0; }   /* the intro paragraphs share the name with the lead form box (js/lead-flow.js): not its 520 px */
/* The library's "save to board" picker: names in capitals (the Saved page shows them as normal sentences) */
.bp-name, .sbp-name b, .sbp-new input, [data-bp-name] { text-transform: uppercase; }
.bp-name small { text-transform: none; }
/* Main menu buttons (test, 25/10): one outlined capsule like the Content Library's filter bar instead of five boxes —
   the options without boxes; hover a soft fill, the open one / current page a raised fill and a gold chevron */
@media (min-width: 961px) {
  .site-nav:not(.is-open) .nav-links.mm { padding: 4px; gap: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
  .site-nav:not(.is-open) .mm-btn-tab { height: 42px; justify-content: center; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #dfe5f1; font-family: var(--font-display); font-weight: 600; transition: background 0.25s, color 0.2s; }
  .site-nav:not(.is-open) .mm-btn-tab:hover { background: rgba(var(--fg), 0.06); border-color: transparent; }
  .site-nav:not(.is-open) .mm-tab.is-open .mm-btn-tab, .site-nav:not(.is-open) .mm-btn-tab[aria-current="page"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.14); color: #fff !important; }
  .site-nav:not(.is-open) .mm-tab.is-open .mm-chev, .site-nav:not(.is-open) .mm-btn-tab:hover .mm-chev { stroke: var(--gold); }
}
/* Language and day / night in the nav: the same outlined capsule as the main menu buttons (above) */
@media (min-width: 961px) {
  .site-nav .nav-actions .lang-switch { height: 50px; padding: 4px; gap: 2px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  .site-nav .nav-actions .lang-switch button { height: 42px; min-width: 42px; padding: 0 12px; color: #dfe5f1; font-size: 13px; transition: background 0.25s, color 0.2s; }
  .site-nav .nav-actions .lang-switch button:hover { background: rgba(var(--fg), 0.06); color: #fff; }
  .site-nav .nav-actions .lang-switch button[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(var(--fg), 0.14); color: var(--gold); }
  .site-nav .nav-actions .theme-toggle { width: 50px; height: 50px; border: 0; border-radius: 999px; background: transparent; color: #dfe5f1; box-shadow: inset 0 0 0 1px var(--line); }
  .site-nav .nav-actions .theme-toggle:hover { background: rgba(var(--fg), 0.06); color: #fff; }
  :root[data-theme="light"] .site-nav:not(.is-open) .mm-btn-tab, :root[data-theme="light"] .site-nav .nav-actions .lang-switch button, :root[data-theme="light"] .site-nav .nav-actions .theme-toggle { background: transparent; color: #3b3f47; box-shadow: none; }
  :root[data-theme="light"] .site-nav .nav-actions .theme-toggle { box-shadow: inset 0 0 0 1px var(--line); }
  :root[data-theme="light"] .site-nav:not(.is-open) .mm-btn-tab:hover, :root[data-theme="light"] .site-nav .nav-actions .lang-switch button:hover, :root[data-theme="light"] .site-nav .nav-actions .theme-toggle:hover { background: rgba(18, 27, 51, 0.05); color: #121b33; }
  :root[data-theme="light"] .site-nav:not(.is-open) .mm-tab.is-open .mm-btn-tab, :root[data-theme="light"] .site-nav:not(.is-open) .mm-btn-tab[aria-current="page"], :root[data-theme="light"] .site-nav .nav-actions .lang-switch button[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 27, 51, 0.16), 0 1px 2px rgba(18, 27, 51, 0.06); color: #121b33 !important; }
}
/* Contact drop-down: a short list (demo or support, write to us) + social icons at the bottom */
/* Pricing tab: the free-trial badge (without a plan) */
.mm-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--gold-tint); color: var(--gold); font: 700 10.5px var(--font-body); letter-spacing: 0.02em; white-space: nowrap; }
/* Content Plan side panel (js/plan-panel.js .pp, not the Saved boards panel .sbp): its accents in the Content Plan blue,
   like its button in My space — the gold variables re-pointed, plus the few gold tones written by hand */
.pp:not(.sbp), .pp-ghost, .pp-pop { --gold: #7aa2ff; --gold-light: #a9c4ff; --gold-mid: #6cb8f8; --gold-tint: rgba(122, 162, 255, 0.18); --gold-dim: rgba(122, 162, 255, 0.4); }
:root[data-theme="light"] .pp:not(.sbp), :root[data-theme="light"] .pp-ghost, :root[data-theme="light"] .pp-pop { --gold: #2563eb; --gold-tint: rgba(37, 99, 235, 0.12); --on-gold: #fff; }
.pp:not(.sbp) .pp-fill { border: 1px dashed rgba(122, 162, 255, 0.5); background: linear-gradient(90deg, rgba(122, 162, 255, 0.1), rgba(122, 162, 255, 0.02)); }
.pp:not(.sbp) .pp-suggest { border: 1px solid rgba(122, 162, 255, 0.35); }
.pp:not(.sbp) .pp-day.is-today { border-color: rgba(122, 162, 255, 0.45); }
.pp:not(.sbp).is-receiving .pp-drop { border-color: rgba(122, 162, 255, 0.35); }
.pp:not(.sbp) .pp-drop.is-over { background: rgba(122, 162, 255, 0.1); box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.15); }
.pp:not(.sbp) .pp-gate { border: 1px solid rgba(122, 162, 255, 0.35); }
.pp:not(.sbp) .pp-dots button.is-focus { background: rgba(122, 162, 255, 0.12); }
.pp:not(.sbp) .pp-dots button.is-on i { background: linear-gradient(90deg, #3b82f6, #6cb8f8); box-shadow: 0 0 10px rgba(122, 162, 255, 0.35); }
.pp:not(.sbp) .pp-dots button.is-today i { outline: 1px solid rgba(122, 162, 255, 0.6); }
.pp:not(.sbp) .pp-times span { border: 1px dashed rgba(122, 162, 255, 0.35); }
.pp:not(.sbp) .pp-time:hover, .pp:not(.sbp) .pp-time:focus-visible { border-color: rgba(122, 162, 255, 0.5); }
.pp:not(.sbp) .pp-focus.is-today { border-color: rgba(122, 162, 255, 0.45); }
.pp:not(.sbp) .pp-big:hover { border-color: rgba(122, 162, 255, 0.45); }
.pp:not(.sbp) .pp-focus-empty { border: 1.5px dashed rgba(122, 162, 255, 0.3); }
.pp:not(.sbp) .pp-plan-btn:hover { border-color: rgba(122, 162, 255, 0.5); }
.pp:not(.sbp) .pp-plan-btn[aria-expanded="true"] { background: rgba(122, 162, 255, 0.08); }
.pp:not(.sbp) .pp-menu-item.is-on { background: rgba(122, 162, 255, 0.1); }
.pp:not(.sbp) .pp-menu-form input:focus { box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.15); }
/* Content Library: the three-tab bar (Get inspired by, Match Day, Brands & sponsors) narrower, centred in its row */
.lfb-row.lfb-glass { max-width: 690px; margin-inline: auto; }
/* the three-tab bar and the My space buttons: the same height as the nav's Admin / Log out buttons (35 px), on wide screens */
@media (min-width: 961px) {
  .lfb-row.lfb-glass { padding: 3px; }
  .lfb-glass .lfb-lens { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 3)); }
  .lfb-glass .lfb-btn { height: 29px; }
  .my-space-btns .pill { height: 35px !important; gap: 8px; padding: 0 12px 0 6px; border-radius: 11px; }
  .my-space-btns .pill > [data-icon] { width: 23px; height: 23px; border-radius: 7px; }
  .my-space-btns .pill > [data-icon] svg { width: 13px !important; height: 13px !important; }
}
/* Content Library head: period (calendar icon; the label only when a period is chosen) and Sort, left of the filter bar */
.lib-head .lf-sortbar { align-items: center; margin: 0; padding: 0 0 0 20px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.lib-head .lf-sortbar .lf-dd { flex: none; }
@media (min-width: 961px) {
  .lib-head .lfb { padding-left: 14px; padding-right: 14px; } .lib-head .lfb-panel { left: 14px; right: 14px; }
  .lib-head .lfb-glass .lfb-btn { padding: 0 8px; } .lib-head .lfb-glass .lfb-tx b { font-size: 14px; }
}
.lib-head .lf-sortbar .lf-dd-btn { height: 35px; }
.lib-head .lf-sortbar .lf-menu { left: 0; right: auto; }   /* both menus open from the button's left edge */
.lib-head .lf-sortbar [data-period-label]:empty { display: none; }
.lib-head .lf-sortbar [data-order-label] { display: none; }   /* the button says just "Sort"; the choice shows in its menu */
.lib-head .lf-sortbar .lf-dd-k { display: inline; color: var(--text); font-weight: 600; }
@media (max-width: 960px) { .lib-head .lf-sortbar { padding: 10px 16px 0; border-bottom: 0; } }
/* Links to a section (#faq, #pricing…): land right under the sticky menu (76 px + air), not hidden behind it
   (js/main.js keeps it there while the blocks above finish loading) */
section[id], :target { scroll-margin-top: 92px; }
/* Quick contact (js/lead-flow.js, "Contact"): big question + options as floating bubbles, one tap goes on */
.lead-q-big { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; text-align: center; margin: 6px auto 26px; max-width: 520px; }
.lead-bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; padding: 6px 4px 18px; }
.lead-bubble { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 18px; border-radius: 999px; border: 1.5px solid rgba(var(--fg), 0.12);
  background: linear-gradient(180deg, rgba(var(--fg), 0.07), rgba(var(--fg), 0.02)); color: var(--text); font: 600 16px var(--font-body); cursor: pointer;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: leadIn 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, leadFloat 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 50ms), calc(var(--i) * -0.7s); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s; }
.lead-bubble-ic { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -6px; border-radius: 50%; background: rgba(240, 184, 74, 0.14); color: var(--gold); transition: background 0.15s, color 0.15s; }
.lead-bubble-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lead-bubble[aria-checked="true"] .lead-bubble-ic { background: rgba(18, 27, 51, 0.15); color: #121b33; }
.lead-bubble:hover, .lead-bubble:focus-visible { border-color: var(--gold); background: linear-gradient(180deg, rgba(240, 184, 74, 0.18), rgba(240, 184, 74, 0.06)); box-shadow: 0 18px 36px -16px rgba(240, 184, 74, 0.55); outline: none; animation-play-state: paused; }
.lead-bubble[aria-checked="true"] { border-color: var(--gold); background: linear-gradient(135deg, #f0b84a, #f8cc75); color: #121b33; animation-play-state: paused; }
@keyframes leadFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes leadIn { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .lead-bubble { animation: none; } }
.lead-phone { max-width: 420px; margin: 0 auto; }
.lead-tel { display: flex; gap: 8px; }
.lead-tel select, .lead-tel input { height: 54px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(var(--fg), 0.04); color: var(--text); font: 600 17px var(--font-body); padding: 0 14px; }
.lead-tel select { flex: none; width: 104px; }
.lead-tel input { flex: 1; min-width: 0; letter-spacing: 0.02em; }
.lead-tel input:focus, .lead-tel select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.18); }
.lead-phone .lead-btn { width: 100%; justify-content: center; }
@media (max-width: 560px) { .lead-bubble { height: 50px; padding: 0 18px 0 14px; font-size: 15px; } }
.lead:has(.lead-bubbles), .lead:has(.lead-phone) { min-height: 0; }   /* the quick contact is short: no empty space under it */
/* Quick contact: no box — the question and the bubbles float over the page, blurred behind */
.lead-modal.is-quick { background: rgba(5, 8, 18, 0.45); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.lead-modal.is-quick .lead-box { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.lead-modal.is-quick .lead-q-big { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.lead-modal.is-quick .lead-bubble { background: rgba(14, 21, 41, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, 0.16); }
.lead-modal.is-quick .lead-bubble[aria-checked="true"] { background: linear-gradient(135deg, #f0b84a, #f8cc75); }
.lead-modal.is-quick .lead-tel select, .lead-modal.is-quick .lead-tel input { background: rgba(14, 21, 41, 0.6); border-color: rgba(255, 255, 255, 0.18); }
.lead-modal.is-quick .lead-x { background: rgba(14, 21, 41, 0.6); border: 1px solid rgba(255, 255, 255, 0.16); }
@media (max-width: 760px) { .lead-modal.is-quick { place-items: center; padding: 16px; } }
.lead-modal.is-quick .lead-box { width: min(900px, 100%); }   /* wide enough for the 6 options in 2 rows */
.lead-modal.is-quick .lead-progress, .lead-modal.is-quick .lead-meta { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
.lead-break { flex-basis: 100%; height: 0; }   /* quick contact: forces the second row */
/* Quick contact, phone step: one capsule (code | number), more air between the field, the consent and the button */
.lead-modal .lead-phone { max-width: 480px; gap: 22px; margin-top: 4px; }
.lead-modal.is-quick .lead-tel { gap: 0; align-items: center; height: 64px; padding: 0 6px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(14, 21, 41, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.15s, box-shadow 0.15s; }
.lead-modal.is-quick .lead-tel:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(240, 184, 74, 0.16), 0 18px 40px -20px rgba(240, 184, 74, 0.45); }
.lead-modal.is-quick .lead-tel select, .lead-modal.is-quick .lead-tel input { height: 100%; border: 0; background: transparent; box-shadow: none !important; }
.lead-modal.is-quick .lead-tel select { width: auto; padding: 0 34px 0 22px; appearance: none; -webkit-appearance: none; cursor: pointer; font: 600 18px var(--font-body); color: var(--text);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b84a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat; }
.lead-modal.is-quick .lead-tel select option { background: #17213b; color: #fff; }
.lead-modal.is-quick .lead-tel input { padding: 0 20px 0 18px; border-left: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; font: 500 18px var(--font-body); letter-spacing: 0.03em; }
.lead-modal.is-quick .lead-tel input::placeholder { color: var(--muted); opacity: 0.8; letter-spacing: 0; }
.lead-modal.is-quick .lead-tel input:focus, .lead-modal.is-quick .lead-tel select:focus { outline: none; }
.lead-modal .lead-phone .lead-check { justify-content: center; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.lead-modal .lead-phone .lead-check a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lead-modal .lead-phone .lead-btn { height: 60px; margin-top: 2px; font-size: 17px; }
.lead-modal .lead-phone .lead-error { margin: -8px 0 0; text-align: center; }
@media (max-width: 560px) { .lead-modal.is-quick .lead-tel { height: 58px; } .lead-modal.is-quick .lead-tel select { padding: 0 30px 0 16px; font-size: 16px; } .lead-modal.is-quick .lead-tel input { font-size: 16px; } }
@media (max-width: 640px) { .lead-modal.is-quick { background: rgba(5, 8, 18, 0.86); } .lead-modal.is-quick .lead-box { height: auto; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; } }   /* phones: a darker veil so the page behind never competes with the form */
/* Book a demo, direct: no steps — the title and Cal.com's calendar float over the blurred page */
.lead.is-direct-demo .lead-top { display: none; }
.lead-center { text-align: center; max-width: 520px; margin-left: auto; margin-right: auto; }
.lead-modal.is-demo .lead-box { width: min(1000px, 100%); }
.lead-modal.is-demo .lead-cal { min-height: 520px; }
/* Book a demo — our own calendar (js/lead-flow.js demoPick / demoForm): floating day bubbles, time bubbles, a short form */
.dp { display: grid; gap: 22px; justify-items: center; margin-top: 6px; }
.dp-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.dp-day { display: grid; justify-items: center; gap: 2px; width: 74px; height: auto; min-height: 84px; padding: 10px 0 12px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 21, 41, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); cursor: pointer;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9); animation: leadIn 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i) * 30ms);
  transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.dp-day small { font: 600 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dp-day b { font: 700 24px/1.1 var(--font-display); }
.dp-day:hover, .dp-day:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; }
.dp-day[aria-checked="true"] { border-color: var(--gold); background: linear-gradient(160deg, #f0b84a, #f8cc75); color: #121b33; }
.dp-day[aria-checked="true"] small { color: rgba(18, 27, 51, 0.7); }
.dp-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 680px; }
.dp-time { height: 46px; min-width: 92px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(14, 21, 41, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); font: 600 16px var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer;
  animation: leadIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, leadFloat 5s ease-in-out infinite; animation-delay: calc(var(--i) * 25ms), calc(var(--i) * -0.6s);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.dp-time:hover, .dp-time:focus-visible { border-color: var(--gold); background: rgba(240, 184, 74, 0.16); box-shadow: 0 16px 34px -16px rgba(240, 184, 74, 0.55); outline: none; animation-play-state: paused; }
.dp-tz { margin: 0; font-size: 12.5px; color: var(--muted); }
.dp-when { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: -10px 0 22px; }
.dp-when span { padding: 10px 18px; border-radius: 999px; background: rgba(240, 184, 74, 0.14); border: 1px solid rgba(240, 184, 74, 0.4); color: var(--gold-light, #ffe0a0); font-weight: 600; text-transform: capitalize; }
.dp-change { border: 0; background: none; color: var(--muted); font: 600 14px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dp-change:hover { color: var(--text); }
.dp-in { height: 60px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.16); background: rgba(14, 21, 41, 0.62); color: var(--text); font: 500 17px var(--font-body);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dp-in::placeholder { color: var(--muted); }
.dp-in:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(240, 184, 74, 0.16); }
@media (prefers-reduced-motion: reduce) { .dp-day, .dp-time { animation: none; } }
@media (max-width: 560px) { .dp-day { width: 64px; } .dp-day b { font-size: 20px; } .dp-time { min-width: 80px; height: 44px; font-size: 15px; } }
.dp-form { width: min(440px, 100%); margin: 0 auto; }
.dp-msg { height: auto; min-height: 120px; padding: 16px 22px; border-radius: 24px; resize: vertical; line-height: 1.5; }
.lead-modal .dp-form .lead-check + .lead-check { margin-top: -10px; }
.dp-when span { text-transform: none; } .dp-when span::first-letter { text-transform: uppercase; }
@media (max-width: 640px) { .lead-modal.is-quick { overflow-y: auto; place-items: start center; } .lead-modal.is-quick .lead-box { justify-content: flex-start; padding-top: 56px; } .dp-days { gap: 8px; } }   /* phones: taller than the screen → scroll from the top */
@media (max-width: 640px) { .dp-days { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; } .dp-days::-webkit-scrollbar { display: none; } .dp-day { flex: none; scroll-snap-align: start; } .dp { gap: 16px; } }   /* phones: one swipeable row of days */
/* Book a demo: 7 days per row (2 rows), then Morning / Afternoon before the times */
.dp-days { display: grid; grid-template-columns: repeat(7, 74px); justify-content: center; }
.dp-parts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dp-part { display: grid; justify-items: center; gap: 3px; min-width: 180px; height: auto; padding: 14px 26px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 21, 41, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.dp-part b { font: 700 17px var(--font-display); }
.dp-part small { font-size: 12.5px; color: var(--muted); }
.dp-part:hover:not(:disabled), .dp-part:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; }
.dp-part[aria-checked="true"] { border-color: var(--gold); background: rgba(240, 184, 74, 0.16); box-shadow: 0 16px 34px -16px rgba(240, 184, 74, 0.55); }
.dp-part[aria-checked="true"] b { color: var(--gold); }
.dp-part:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 640px) { .dp-days { display: flex; } .dp-part { min-width: 0; flex: 1; padding: 12px 10px; } }
.dp-back { border: 0; background: none; color: var(--muted); font: 600 14px var(--font-body); cursor: pointer; padding: 4px 8px; border-radius: 999px; }
.dp-back:hover, .dp-back:focus-visible { color: var(--gold); outline: none; }
.lead-logo { display: block; width: 140px; height: auto; margin: 0 auto 34px; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5)); }   /* quick contact / demo: SCP logo on top */
@media (max-width: 640px) { .lead-logo { width: 110px; margin-bottom: 16px; } }
/* Menu → Contact: "Follow us" cards (brand-coloured icon, what you get, arrow) instead of two bare icons */
.mm-follow-h { margin: 14px 4px 8px; padding-top: 14px; border-top: 1px solid var(--line); font: 700 11px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.mm-follow { display: grid; gap: 8px; }
.mm-fl { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--fg), 0.03);
  color: var(--text); opacity: 1 !important; overflow: hidden; transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.mm-fl::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.mm-fl-instagram::before { background: linear-gradient(120deg, rgba(254, 218, 117, 0.12), rgba(250, 126, 30, 0.12), rgba(214, 41, 118, 0.14), rgba(150, 47, 191, 0.14)); }
.mm-fl-linkedin::before { background: linear-gradient(120deg, rgba(10, 102, 194, 0.2), rgba(10, 102, 194, 0.05)); }
.mm-fl:hover { transform: translateY(-1px); color: var(--text) !important; }
.mm-fl:hover::before { opacity: 1; }
.mm-fl-instagram:hover { border-color: rgba(214, 41, 118, 0.5); }
.mm-fl-linkedin:hover { border-color: rgba(10, 102, 194, 0.6); }
.mm-fl-ic { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; }
.mm-fl-instagram .mm-fl-ic { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow: 0 8px 20px -10px rgba(214, 36, 159, 0.8); }
.mm-fl-linkedin .mm-fl-ic { background: #0a66c2; box-shadow: 0 8px 20px -10px rgba(10, 102, 194, 0.9); }
.mm-fl-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-fl-tx { position: relative; display: grid; gap: 2px; flex: 1; min-width: 0; }
.mm-fl-tx b { font-size: 14.5px; font-weight: 600; }
.mm-fl-tx small { font-size: 12.5px; color: var(--muted); white-space: normal; }
.mm-fl > svg { position: relative; flex: none; width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s, transform 0.2s; }
.mm-fl:hover > svg { stroke: var(--gold); transform: translate(2px, -2px); }
:root[data-theme="light"] .mm-fl { background: #fff; }
.plan-value { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.35); font-size: 13.5px; color: var(--text); }
.plan-value b { color: #c4b5fd; }
.plan-gets { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 0.5px solid var(--line-soft); display: grid; gap: 10px; }
.plan-gets li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--text); }
.plan-gets li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(240, 184, 74, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b84a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* Pricing: the yearly saving at a glance (js/plans.js planCard) */
.plan-was { align-self: center; margin-right: 2px; color: var(--muted); font-size: 18px; font-weight: 500; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 104, 92, 0.8); }
.plan-save { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; width: 100%; margin: 12px 0 0; padding: 9px 14px; border-radius: 12px;
  background: rgba(0, 216, 91, 0.1); border: 1px solid rgba(0, 216, 91, 0.35); color: #3ee98a; font: 500 13px var(--font-body); text-align: left; }
.plan-save b { font-weight: 700; }
.plan-save span { padding: 2px 9px; border-radius: 999px; background: rgba(0, 216, 91, 0.16); font-size: 12px; font-weight: 600; white-space: nowrap; }
.plan-save.is-nudge { height: auto; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.plan-save.is-nudge:hover { background: rgba(0, 216, 91, 0.16); border-color: rgba(0, 216, 91, 0.6); transform: translateY(-1px); }
:root[data-theme="light"] .plan-save { color: #0a8a41; background: rgba(10, 157, 74, 0.08); border-color: rgba(10, 157, 74, 0.35); }
:root[data-theme="light"] .plan-save span { background: rgba(10, 157, 74, 0.12); }
.plan-save + .plan-value { margin-top: 14px; }
.plan-bulk { margin: 10px 0 14px; padding: 8px 12px; border-radius: 10px; border: 1px dashed rgba(167, 139, 250, 0.45); color: #c4b5fd; font-size: 12.5px; }
.plan-bulk.is-on { border-style: solid; background: rgba(167, 139, 250, 0.14); color: #ddd6fe; font-weight: 600; }
:root[data-theme="light"] .plan-bulk { color: #6b46c1; border-color: rgba(107, 70, 193, 0.4); }
:root[data-theme="light"] .plan-bulk.is-on { background: rgba(107, 70, 193, 0.08); color: #553c9a; }
/* pricing: "Total" before the big number with more than one user; the saving pills in gold (green = the trial's state only) */
.plan-total { align-self: center; margin-right: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--fg), 0.08); color: var(--muted); font: 600 11px var(--font-body); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.plan-save { background: rgba(240, 184, 74, 0.1); border-color: rgba(240, 184, 74, 0.38); color: var(--gold-light, #ffe0a0); }
.plan-save span { background: rgba(240, 184, 74, 0.18); }
.plan-save.is-nudge:hover { background: rgba(240, 184, 74, 0.16); border-color: rgba(240, 184, 74, 0.6); }
:root[data-theme="light"] .plan-save { color: #8a5a06; background: rgba(214, 150, 30, 0.1); border-color: rgba(214, 150, 30, 0.4); }
:root[data-theme="light"] .plan-save span { background: rgba(214, 150, 30, 0.16); }
.hero h1 .gold { white-space: nowrap; }   /* "on Monday" / "el lunes" stays on one line */

/* Pricing, 4 cards: every card has the same 7 rows (name · price · line · extras · button · note · what you get), so the buttons line up */
.plan-card.v2 .plan-price span, .plan-card.v2 .plan-sub { white-space: normal; }
.plan-card.v2 .plan-sub { line-height: 1.45; }
.plan-extras { display: grid; align-content: start; gap: 10px; margin-bottom: 16px; }
.plan-extras:empty { margin: 0; }
.plan-extras .plan-save, .plan-extras .plan-value, .plan-extras .plan-bulk { margin: 0; }
.plan-card.v2 .plan-cta { align-self: start; width: 100%; justify-content: center; text-align: center; }
.plan-card.v2 .plan-gets { align-content: start; }

/* ---------- My Club (my-club.html, js/my-club.js): club card (identity, tabs, section and team), people strip, then the Content Library ---------- */
.mc { padding: 24px 32px 20px; border-top: 1px solid var(--line-soft); }
.mc-loading, .mc-empty { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 120px; color: var(--muted); text-align: center; }
.mc-empty p { margin: 0; max-width: 520px; }
.mc-card { position: relative; padding: 22px 24px 20px; border-radius: 24px; isolation: isolate; overflow: hidden;
  background: radial-gradient(80% 140% at 0% 0%, rgba(240, 184, 74, 0.13), transparent 55%), radial-gradient(60% 120% at 100% 100%, rgba(122, 162, 255, 0.08), transparent 60%), rgba(var(--surface-rgb, 23, 33, 59), 0.72);
  border: 1px solid rgba(240, 184, 74, 0.22); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.mc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, rgba(240, 184, 74, 0.55), transparent 35%, transparent 70%, rgba(240, 184, 74, 0.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mc-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mc-logo { position: relative; flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(240, 184, 74, 0.35);
  box-shadow: 0 0 0 6px rgba(240, 184, 74, 0.06), 0 14px 34px -12px rgba(240, 184, 74, 0.45); }
.mc-logo { overflow: hidden; }
.mc-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }   /* the club picture fills the tile */
.mc-logo span { font: 700 24px var(--font-display); letter-spacing: -0.02em; background: linear-gradient(135deg, #ffe0a0, #f0b84a 55%, #d99a2b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-title { flex: 1; min-width: 200px; }
.mc-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.mc-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.mc-title h1 { margin: 4px 0 0; font: 600 clamp(26px, 3vw, 38px)/1.05 var(--font-display); letter-spacing: -0.025em; }
.mc-profiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mc-prof { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--fg), 0.04); color: var(--muted); font-size: 12.5px; text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.mc-prof:hover { color: var(--text); border-color: rgba(240, 184, 74, 0.5); background: rgba(240, 184, 74, 0.08); }
.mc-prof svg, .mc-seg-b svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; }
.mc-clubpick { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.mc-clubpick select { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--fg), 0.05); color: var(--text); font: inherit; }
.mc-seg, .mc-teams { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.mc-seg { padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); border: 1px solid var(--line-soft); }
.mc-seg-b { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted); font: 600 13.5px var(--font-body); white-space: nowrap; cursor: pointer; transition: color 0.15s, background 0.2s, border-color 0.2s; }
.mc-seg-b:hover { color: var(--text); background: rgba(var(--fg), 0.05); }
.mc-seg-b i { font-style: normal; font-size: 11px; color: var(--muted); opacity: 0.8; }
.mc-seg .mc-seg-b[aria-pressed="true"] { color: var(--text); background: linear-gradient(180deg, rgba(240, 184, 74, 0.22), rgba(240, 184, 74, 0.1)); border-color: rgba(240, 184, 74, 0.55); box-shadow: 0 6px 18px -10px rgba(240, 184, 74, 0.8); }
.mc-seg .mc-seg-b[aria-pressed="true"] svg { color: var(--gold); }
.mc-teams .mc-seg-b { height: 34px; border-color: var(--line); background: rgba(var(--fg), 0.03); border-radius: 999px; font-weight: 500; }
.mc-teams .mc-seg-b[aria-pressed="true"] { color: #121b33; background: var(--gold); border-color: var(--gold); font-weight: 600; }
.mc-teams .mc-seg-b[aria-pressed="true"] i { color: rgba(18, 27, 51, 0.7); }
.mc-hint { color: var(--muted); font-size: 13px; }
.mc-people { margin-top: 20px; }
.mc-people-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mc-people-h b { font: 600 15px var(--font-display); }
.mc-n { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: rgba(240, 184, 74, 0.14); color: var(--gold); font-size: 12px; font-weight: 700; text-align: center; }
.mc-tip { color: var(--muted); font-size: 12.5px; }
.mc-search { display: flex; align-items: center; gap: 6px; height: 34px; margin-left: auto; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--fg), 0.04); }
.mc-search svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; }
.mc-search input { width: 180px; border: 0; background: none; color: var(--text); font: 13.5px var(--font-body); outline: none; }
.mc-clear { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(240, 184, 74, 0.45); background: rgba(240, 184, 74, 0.1); color: var(--gold); font: 600 12.5px var(--font-body); cursor: pointer; }
.mc-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.mc-person { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--fg), 0.05), rgba(var(--fg), 0.02)); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s, background 0.2s; }
.mc-person:hover { transform: translateY(-2px); border-color: rgba(240, 184, 74, 0.45); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.8); }
.mc-person[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(180deg, rgba(240, 184, 74, 0.18), rgba(240, 184, 74, 0.06)); box-shadow: 0 10px 26px -14px rgba(240, 184, 74, 0.8); }
.mc-person.is-empty { opacity: 0.55; }
.mc-ph { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: linear-gradient(140deg, rgba(240, 184, 74, 0.7), rgba(240, 184, 74, 0.1)); }
.mc-person.is-brand .mc-ph { border-radius: 14px; }
.mc-ph img, .mc-av { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: #17213b; font: 700 13px var(--font-body); color: var(--gold); }
.mc-person.is-brand .mc-ph img { object-fit: contain; padding: 4px; background: #fff; }
.mc-tick { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #121b33; box-shadow: 0 0 0 2px #121b33; transform: scale(0); transition: transform 0.2s cubic-bezier(.2, .9, .3, 1.4); }
.mc-tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mc-person[aria-pressed="true"] .mc-tick { transform: scale(1); }
.mc-person-tx { display: grid; gap: 2px; line-height: 1.2; }
.mc-person-tx b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.mc-person-tx small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mc-person-tx em { font-style: normal; font-weight: 700; color: var(--gold); }
.mc-none { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.mc-mode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.mc-mode-sw { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); }
.mc-mode-sw button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; }
.mc-mode-sw button[aria-pressed="true"] { background: rgba(240, 184, 74, 0.16); color: var(--text); box-shadow: inset 0 0 0 1px rgba(240, 184, 74, 0.5); }
.mc-mode small { color: var(--muted); font-size: 12.5px; }
:root[data-theme="light"] .mc-card { background: radial-gradient(80% 140% at 0% 0%, rgba(240, 184, 74, 0.16), transparent 55%), #fff; box-shadow: 0 20px 50px -30px rgba(18, 27, 51, 0.35); }
:root[data-theme="light"] .mc-seg, :root[data-theme="light"] .mc-mode-sw { background: rgba(18, 27, 51, 0.04); }
:root[data-theme="light"] .mc-ph img, :root[data-theme="light"] .mc-av { background: #eef1f6; }
@media (max-width: 760px) {
  .mc { padding: 16px 12px 14px; }
  .mc-card { padding: 18px 16px 16px; border-radius: 20px; }
  .mc-logo { width: 60px; height: 60px; border-radius: 18px; }
  .mc-side { width: 100%; align-items: stretch; margin-left: 0; }
  .mc-top { gap: 14px; }
  .mc-side { min-width: 0; }
  .mc-mode-sw { width: 100%; } .mc-mode-sw button { flex: 1; height: auto; min-height: 32px; padding: 6px 8px; font-size: 12.5px; }
  .mc-seg, .mc-teams { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .mc-seg::-webkit-scrollbar, .mc-teams::-webkit-scrollbar { display: none; }
  .mc-search { margin-left: 0; width: 100%; } .mc-search input { width: 100%; }
  .mc-tip { display: none; }
}
.mc-net { color: var(--gold); } .mc-net svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- My Club inside the Content Library: the club card sits in the posts column, a gold "club mode" (like the AI
   mode's purple) tells it apart from the main library, and the top bar says where you are ---------- */
.my-club-page .mc { padding: 18px 38px 4px; border-top: 0; position: relative; z-index: 1; }
.my-club-page .mc-card { padding: 16px 18px 14px; border-radius: 20px; }
.my-club-page .mc-top { gap: 14px; }
.my-club-page .mc-logo { width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 0 0 4px rgba(240, 184, 74, 0.06), 0 10px 26px -12px rgba(240, 184, 74, 0.5); }
.my-club-page .mc-title h1 { font-size: clamp(22px, 2.2vw, 28px); }
.my-club-page .mc-profiles { margin-top: 6px; gap: 4px; }
.my-club-page .mc-prof { height: 24px; padding: 0 9px 0 7px; font-size: 11.5px; }
.my-club-page .mc-side { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.my-club-page .mc-seg-b { height: 34px; padding: 0 12px; }
.my-club-page .mc-teams .mc-seg-b { height: 32px; }
.my-club-page .mc-people { margin-top: 14px; }
.my-club-page .mc-chips { padding-bottom: 6px; }
/* the club mode: a soft gold light behind the posts (no grid) */
.my-club-page .feed { position: relative; background:
    radial-gradient(1200px 460px at 50% -10%, rgba(240, 184, 74, 0.13), transparent 70%),
    radial-gradient(700px 520px at 100% 30%, rgba(240, 184, 74, 0.05), transparent 70%),
    radial-gradient(700px 520px at 0% 70%, rgba(255, 224, 160, 0.035), transparent 70%); }
.my-club-page .posts { position: relative; z-index: 1; }
:root[data-theme="light"] .my-club-page .feed { background:
    radial-gradient(1200px 460px at 50% -10%, rgba(214, 150, 30, 0.12), transparent 70%),
    radial-gradient(700px 520px at 100% 30%, rgba(214, 150, 30, 0.05), transparent 70%); }
/* the main library's shortcuts that don't apply to a club: quick bar, smart picks (Favs, Replicable ideas, Creators, Overperforming) */
.my-club-page .lib-head .lfb, .my-club-page .lf-quick { display: none !important; }
.my-club-page [data-facets] > .lf-sec:has(.lf-sp) { display: none; }
/* top bar: club · tab · section / team */
.mc-crumb { display: none; }
.my-club-page .mc-crumb { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 18px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(90deg, rgba(240, 184, 74, 0.1), transparent 70%); }
@media (min-width: 961px) { .my-club-page .lib-head .mc-crumb { grid-column: 2; grid-row: 1; } }
@media (max-width: 960px) { .my-club-page .mc-crumb { display: none; } .my-club-page .mc { padding: 14px 16px 4px; } .my-club-page .mc-side { justify-content: stretch; } }
@media (max-width: 760px) {
  .my-club-page .mc-prof { width: 30px; height: 30px; padding: 0; justify-content: center; } .my-club-page .mc-prof span { display: none; }   /* phones: the club's profiles as icons */
  .my-club-page .mc-logo { width: 52px; height: 52px; }
}

/* smaller cards: no extras box, tighter padding and spacing */
.plan-extras:empty { margin: 0; }
.plan-card.v2 { padding: 22px 20px 20px; }
.plan-card.v2 .plan-price { margin-top: 14px; }
.plan-card.v2 .plan-price b { font-size: 34px; }
.plan-card.v2 .plan-price b.plan-price-text { font-size: 26px; }
.plan-card.v2 .plan-sub { margin: 4px 0 16px; }
.plan-card.v2 .plan-gets { margin-top: 16px; padding-top: 14px; gap: 8px; }
.plan-card.v2 .plan-gets li { font-size: 13.5px; }
/* the button at the bottom of each card (after the list), all at the same height */
.plan-card.v2 .plan-gets { align-self: start; margin-bottom: 4px; }
.plan-card.v2 .plan-cta { align-self: end; margin-top: 18px; }

/* ---------- Profile → About you, premium (profile.html .pf-about, js/profile.js) ---------- */
.pf-about { position: relative; overflow: visible; background: radial-gradient(70% 60% at 0% 0%, rgba(240, 184, 74, 0.08), transparent 60%), var(--surface); }
.pf-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 0.5px solid var(--line-soft); }
.pf-head-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--gold);
  background: linear-gradient(160deg, rgba(240, 184, 74, 0.2), rgba(240, 184, 74, 0.05)); border: 1px solid rgba(240, 184, 74, 0.35); box-shadow: 0 10px 24px -14px rgba(240, 184, 74, 0.7); }
.pf-head-ic svg { width: 22px; height: 22px; }
.pf-head > div { flex: 1; min-width: 0; }
.pf-sec-prog { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 0.5px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pf-sec-prog b { color: var(--text); }
.pf-sec-prog.is-done { color: #3ee98a; border-color: rgba(0, 216, 91, 0.4); background: rgba(0, 216, 91, 0.1); }
.pf-sec-prog svg { width: 14px; height: 14px; }
.pf-about .pf-grid { margin-top: 22px; gap: 16px 18px; }
/* fields with an icon */
.pf-in { position: relative; display: flex; align-items: center; }
.pf-in > svg { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--muted-dim); pointer-events: none; transition: color 0.2s; }
.pf-in input { padding-left: 42px; height: 48px; }
.pf-in:focus-within > svg { color: var(--gold); }
.pf-in.is-locked input:disabled { opacity: 1; color: var(--muted); background: rgba(var(--fg), 0.03); cursor: default; padding-right: 130px; }
.pf-verified { position: absolute; right: 40px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 216, 91, 0.12); color: #3ee98a; font-size: 11.5px; font-weight: 700; }
.pf-verified svg { width: 12px; height: 12px; }
.pf-lock { position: absolute; right: 14px; display: grid; color: var(--muted-dim); } .pf-lock svg { width: 15px; height: 15px; }
/* country: flag + searchable list */
.pf-country { position: relative; }
.pf-country-btn { width: 100%; height: 48px; gap: 10px; padding: 0 14px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--text); font: 500 15px var(--font-body); text-align: left; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.pf-country-btn:hover, .pf-country-btn[aria-expanded="true"] { border-color: rgba(240, 184, 74, 0.6); box-shadow: 0 0 0 3px rgba(240, 184, 74, 0.15); }
.pf-country-btn > svg { width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
.pf-country-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-country-v.is-ph { color: var(--muted-dim); }
.pf-country-dd { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); padding: 8px; border-radius: 14px; background: var(--surface); border: 0.5px solid var(--line); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.7); }
.pf-country-dd .pf-search { margin-bottom: 6px; }
.pf-country-dd ul { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.pf-country-dd li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: 500 14px var(--font-body); text-align: left; cursor: pointer; }
.pf-country-dd li button:hover, .pf-country-dd li button[aria-selected="true"] { background: var(--gold-tint); }
.pf-country-dd li button svg { width: 15px; height: 15px; margin-left: auto; color: var(--gold); }
/* role: small cards with an icon */
.pf-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-chip.pf-role { position: relative; height: auto; min-height: 58px; padding: 10px 14px; border-radius: 14px; gap: 12px; justify-content: flex-start; text-align: left; font-weight: 500; color: var(--text); }
.pf-role-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--fg), 0.06); color: var(--muted); transition: all 0.18s; }
.pf-role-ic svg { width: 17px; height: 17px; }
.pf-role-ck { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #121b33; transform: scale(0); transition: transform 0.2s cubic-bezier(.2, .9, .3, 1.4); }
.pf-role-ck svg { width: 11px; height: 11px; stroke-width: 3; }
.pf-chip.pf-role:hover { transform: translateY(-1px); }
.pf-chip.pf-role[aria-pressed="true"] { color: var(--text); box-shadow: 0 10px 24px -16px rgba(240, 184, 74, 0.9); }
.pf-chip.pf-role[aria-pressed="true"] .pf-role-ic { background: rgba(240, 184, 74, 0.2); color: var(--gold); }
.pf-chip.pf-role[aria-pressed="true"] .pf-role-ck { transform: scale(1); }
.pf-about .pf-q { margin-top: 24px; }
.pf-about .pf-q > span small { display: block; margin: 3px 0 0; }
/* autosave: the bar only says Saving… / Saved ✓ (buttons only if something fails) */
.pf-savebar.is-auto .btn, .pf-savebar.is-auto [data-pf-discard] { display: none; }
.pf-savebar.is-auto { padding-right: 18px; }
.pf-savebar.is-saved p::before { content: "✓ "; }
@media (max-width: 700px) {
  .pf-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-about { padding: 22px 18px; }
  .pf-head { flex-wrap: wrap; row-gap: 8px; } .pf-head > div { flex: 1 1 calc(100% - 64px); } .pf-sec-prog { margin-left: 60px; }
  .pf-in.is-locked input:disabled { padding-right: 42px; } .pf-verified { display: none; }
}

/* ---------- Profile page, premium (profile.html, js/profile.js): glass hero with the plan, side menu with each section's
   state, every section with an icon head and its progress, cards with icons, segmented controls, logos ---------- */
.pf-hero { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid rgba(240, 184, 74, 0.32);
  background: radial-gradient(80% 140% at 0% 0%, rgba(240, 184, 74, 0.15), transparent 55%), radial-gradient(60% 120% at 100% 100%, rgba(122, 162, 255, 0.08), transparent 60%), var(--surface);
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.pf-avatar { box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px rgba(240, 184, 74, 0.75), 0 14px 40px -10px rgba(240, 184, 74, 0.55); }
.pf-plan-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; height: 30px; padding: 0 12px 0 5px; border-radius: 999px; background: rgba(0, 216, 91, 0.1); border: 1px solid rgba(0, 216, 91, 0.35); color: #c6ffde; font-size: 12.5px; }
.pf-plan-chip[hidden] { display: none; }
.pf-plan-chip i { font-style: normal; padding: 2px 9px; border-radius: 999px; background: #00d85b; color: #062312; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.pf-plan-chip.is-warn { background: rgba(255, 104, 92, 0.1); border-color: rgba(255, 104, 92, 0.4); color: #ffd0cb; } .pf-plan-chip.is-warn i { background: #ff685c; color: #2b0805; }
:root[data-theme="light"] .pf-plan-chip { color: #0a6d33; }
.pf-next-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(240, 184, 74, 0.55); background: rgba(240, 184, 74, 0.1); color: var(--gold); font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.pf-next-btn:hover { background: rgba(240, 184, 74, 0.2); }
/* side menu in a card, a dot per section (green = complete, gold = something missing) */
.pf-nav { padding: 8px; border-radius: 20px; background: var(--surface); border: 0.5px solid var(--line); box-shadow: var(--inset-glow); }
.pf-nav a { height: 40px; font-size: 13.5px; }
.pf-nav a.is-active { color: var(--text); background: linear-gradient(90deg, rgba(240, 184, 74, 0.2), rgba(240, 184, 74, 0.04)); box-shadow: inset 3px 0 0 var(--gold); }
.pf-nav a.is-active svg { color: var(--gold); }
.pf-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #00d85b; box-shadow: 0 0 8px rgba(0, 216, 91, 0.7); flex: none; }
.pf-dot.is-todo { background: var(--gold); box-shadow: 0 0 8px rgba(240, 184, 74, 0.7); }
.pf-dot.is-off { background: var(--surface-3); box-shadow: none; }
/* every card in the new style */
.pf-card.pf-about { scroll-margin-top: 100px; }
.pf-card.pf-about > .pf-q:first-of-type, .pf-card.pf-about > .pf-grid:first-of-type { margin-top: 20px; }
.pf-card .pf-head h2 { font-size: 21px; }
.pf-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-role-ic img { width: 19px; height: 19px; }
/* segmented controls (team size, audience, frequency) */
.pf-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.2); border: 0.5px solid var(--line); }
.pf-chip.pf-seg-b { height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: none; font-weight: 600; font-size: 13.5px; }
.pf-chip.pf-seg-b:hover { background: rgba(var(--fg), 0.05); }
.pf-chip.pf-seg-b[aria-pressed="true"] { color: #121b33; background: linear-gradient(180deg, #ffd27a, #f0b84a); box-shadow: 0 8px 20px -10px rgba(240, 184, 74, 0.8); }
:root[data-theme="light"] .pf-seg { background: rgba(18, 27, 51, 0.04); }
/* sports with their icon; logos on favourites and competitions; x/5 counter */
.pf-sport-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-pick-av.is-logo { object-fit: contain; background: #fff; padding: 3px; }
.pf-pick-count { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.pf-meter5 { display: inline-flex; gap: 3px; } .pf-meter5 i { width: 16px; height: 5px; border-radius: 3px; background: rgba(var(--fg), 0.12); } .pf-meter5 i.on { background: var(--gold); box-shadow: 0 0 6px rgba(240, 184, 74, 0.5); }
/* newsletter: the switch as a panel + a preview of the e-mail */
.pf-card.pf-about .pf-switch { margin-top: 20px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); transition: border-color 0.2s, background 0.2s; }
.pf-card.pf-about .pf-switch:has(input:checked) { border-color: rgba(240, 184, 74, 0.45); background: linear-gradient(90deg, rgba(240, 184, 74, 0.13), rgba(240, 184, 74, 0.03)); }
.pf-switch .switch::after { background: #fff; } .pf-switch input:checked + .switch::after { background: #121b33; }
.pf-nl-prev { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 14px; border-radius: 16px; border: 0.5px dashed var(--line); }
.pf-nl-prev[hidden] { display: none; }
.pf-nl-prev p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pf-nl-mail { flex: none; display: grid; gap: 6px; width: 150px; padding: 12px; border-radius: 12px; background: #f4f6fa; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8); transform: rotate(-2deg); }
.pf-nl-mail i { display: block; height: 5px; border-radius: 3px; background: #d6dbe6; } .pf-nl-mail .w60 { width: 60%; } .pf-nl-mail .w70 { width: 70%; }
.pf-nl-mail .pf-nl-logo { width: 40%; height: 7px; background: #121b33; }
.pf-nl-th { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .pf-nl-th i { height: auto; aspect-ratio: 4 / 5; border-radius: 5px; background: linear-gradient(160deg, #1d2845, #f0b84a); }
.pf-nl-mail .pf-nl-btn { width: 50%; height: 10px; border-radius: 5px; background: #f0b84a; }
/* billing: the plan as a pricing-like card, facts as tiles */
.pf-billing .pf-plan { padding: 20px; border-radius: 20px; border: 1px solid rgba(240, 184, 74, 0.38); background: radial-gradient(80% 120% at 100% 0%, rgba(240, 184, 74, 0.13), transparent 60%), var(--surface-2); }
.pf-billing .pf-plan.is-empty { border-color: var(--line); background: var(--surface-2); }
.pf-billing .pf-plan-top b { font-size: 21px; }
.pf-billing .pf-plan-int b { color: var(--text); font-size: 15px; }
.pf-billing .pf-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; overflow: visible; }
.pf-billing .pf-facts div { border-radius: 12px; background: rgba(var(--fg), 0.04); border: 0.5px solid var(--line-soft); }
.pf-billing .pf-billing-actions .btn { height: 40px; }
/* account: language as a segmented control, password with show / hide and strength */
.pf-lang .lang-switch { height: 46px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.2); }
.pf-lang .lang-switch button { height: 36px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; }
.pf-lang .lang-switch button[aria-pressed="true"] { color: #121b33; background: linear-gradient(180deg, #ffd27a, #f0b84a); }
.pf-in input[name="password"] { padding-right: 46px; }
.pf-eye { position: absolute; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--muted); }
.pf-eye:hover { color: var(--gold); background: rgba(var(--fg), 0.05); } .pf-eye svg { width: 17px; height: 17px; }
.pf-str { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; } .pf-str[hidden] { display: none; }
.pf-str i { height: 5px; border-radius: 3px; background: rgba(var(--fg), 0.12); transition: background 0.2s; }
.pf-str[data-n="1"] i:nth-child(-n+1) { background: #ff685c; } .pf-str[data-n="2"] i:nth-child(-n+2) { background: #f0b84a; }
.pf-str[data-n="3"] i:nth-child(-n+3) { background: #3ee98a; } .pf-str[data-n="4"] i { background: #00d85b; }
.pf-str-t { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--muted); } .pf-str-t[data-n="3"], .pf-str-t[data-n="4"] { color: #3ee98a; } .pf-str-t[data-n="1"], .pf-str-t[data-n="0"] { color: #ff8a80; }
@media (max-width: 1000px) { .pf-nav { padding: 6px; border-radius: 16px; } .pf-dot { margin-left: 6px; } .pf-billing .pf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pf-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-nl-prev { flex-direction: column; align-items: flex-start; } .pf-billing .pf-facts { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .pf-id { flex-direction: column; align-items: flex-start; gap: 14px; }   /* phones: photo on top (the ring sits beside it), name and plan below, full width */
  .pf-plan-chip { height: auto; min-height: 30px; padding: 5px 12px 5px 5px; line-height: 1.35; }
}
/* saved boards: covers are the posts' pictures (js/saved.js mini), filling each tile */
.mini-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Home → Content Library demo: its crests are tiles (logo + name). The library cards' small round .lib-crest (footer)
   shares the class name and was shrinking them to 28px circles and hiding the names */
.lib-crests .lib-crest { width: auto; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; padding: 12px 4px 10px; text-align: center;
  border-radius: 14px; background: var(--surface-2); border: 0.5px solid var(--line-soft); }
/* the whole crest inside the white circle: a square logo's corners must stay inside the circle (content ≤ 70% of it) */
.lib-crests .lib-crest img { box-sizing: border-box; width: 46px; height: 46px; padding: 10px; border-radius: 50%; object-fit: contain; object-position: center; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); flex: none; }
.lib-crests .lib-crest span { display: block; width: 100%; font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; }
.lib-crests .lib-crest.is-on { border-color: var(--gold); background: var(--gold-tint); box-shadow: 0 0 18px rgba(240, 184, 74, 0.25); }
.lib-crests .lib-crest.is-on img { box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(240, 184, 74, 0.4); }
.lib-crests .lib-crest.is-on span { color: var(--gold); }

/* Blog post (blog-tools/build.mjs): key takeaways on top, FAQ and author at the end — clear answers that Google and AI
   assistants can quote */
.post-tldr { margin: 0 0 30px; padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(240, 184, 74, 0.35); background: linear-gradient(135deg, rgba(240, 184, 74, 0.1), transparent 70%), var(--surface); }
.post-tldr-k { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.post-tldr ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.post-tldr li { position: relative; padding-left: 24px; line-height: 1.55; }
.post-tldr li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.post-faq { margin-top: 40px; }
.post-faq details { border-bottom: 0.5px solid var(--line); padding: 16px 0; }
.post-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.post-faq summary::-webkit-details-marker { display: none; }
.post-faq summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; transition: transform 0.2s; }
.post-faq details[open] summary::after { transform: rotate(45deg); }
.post-faq details p { margin: 10px 0 0; color: var(--muted); line-height: 1.65; }
.post-author { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 0.5px solid var(--line); }
.post-author-av { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(64% 64% at 50% 100%, #ffe0a0, #f0b84a); color: var(--on-gold); font: 700 18px var(--font-display); }
.post-author p { margin: 0; display: grid; gap: 2px; } .post-author span { color: var(--muted); font-size: 14px; }

/* ---------- Social News → one news item (news/<slug>.html, built by blog-tools/build.mjs) ---------- */
.news-page-pf { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface-2); border: 0.5px solid var(--line-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold, #f0b84a); }
.news-page-pf img { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.news-page-src { margin-top: 26px; }
.news-more { margin-top: 70px; }
.news-row h2 a { color: inherit; text-decoration: none; } .news-row h2 a:hover { color: var(--gold, #f0b84a); }

/* ---------- Social News: network filter — each logo in its brand colour, with a glow on hover; the chosen one keeps it ---------- */
.news-filters .ptile { --c: #f0b84a; position: relative; overflow: hidden; height: 116px; gap: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), var(--surface-2); }
.news-filters .ptile[data-platform="instagram"] { --c: #e1306c; } .news-filters .ptile[data-platform="tiktok"] { --c: #25f4ee; }
.news-filters .ptile[data-platform="x"] { --c: #d7dbe3; } .news-filters .ptile[data-platform="youtube"] { --c: #ff2d3f; }
.news-filters .ptile[data-platform="facebook"] { --c: #1877f2; } .news-filters .ptile[data-platform="linkedin"] { --c: #2a86e0; }
.news-filters .ptile[data-platform="snapchat"] { --c: #fffc00; } .news-filters .ptile[data-platform="whatsapp"] { --c: #25d366; }
.news-filters .ptile[data-platform="pinterest"] { --c: #e60023; } .news-filters .ptile[data-platform="threads"] { --c: #c9cfda; }
.news-filters .ptile[data-platform="ai"] { --c: #a78bfa; }
.news-filters .ptile::before { content: ""; position: absolute; inset: auto 50% 46% auto; width: 120px; height: 120px; transform: translate(50%, 30%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 38%, transparent), transparent); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.news-filters .ptile img { position: relative; width: 26px; height: 26px; padding: 10px; box-sizing: content-box; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 0.5px solid var(--line-soft); transition: transform 0.25s, background 0.25s, box-shadow 0.25s, filter 0.25s; }
.news-filters .ptile span { position: relative; }
.news-filters .ptile:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-3px); }
.news-filters .ptile:hover::before, .news-filters .ptile[aria-pressed="true"]::before { opacity: 1; }
.news-filters .ptile:hover img { transform: scale(1.08) rotate(-4deg); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 8px 22px -8px var(--c); }
.news-filters .ptile[aria-pressed="true"] { color: #fff; border-color: var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 80%), var(--surface-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 14px 34px -14px var(--c); }
.news-filters .ptile[aria-pressed="true"] img { filter: none; transform: scale(1.08); background: color-mix(in srgb, var(--c) 26%, transparent); border-color: color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 0 22px -2px var(--c); animation: ptile-pulse 2.6s ease-in-out infinite; }
.news-filters .ptile[data-platform="all"][aria-pressed="true"] img { filter: brightness(0) saturate(100%) invert(77%) sepia(53%) saturate(626%) hue-rotate(338deg) brightness(98%) contrast(92%); }
@keyframes ptile-pulse { 0%, 100% { box-shadow: 0 0 14px -4px var(--c); } 50% { box-shadow: 0 0 28px 0 var(--c); } }
@media (prefers-reduced-motion: reduce) { .news-filters .ptile[aria-pressed="true"] img { animation: none; } }
:root[data-theme="light"] .news-filters .ptile[aria-pressed="true"] { color: var(--text); }

/* ---------- Social News: a news item — the source's picture, network, date, title, 2 paragraphs, read more ---------- */
.news-row.nwc { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; padding: 22px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60%), var(--surface); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.news-row.nwc:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -30px rgba(240, 184, 74, 0.45); }
.nwc-img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: radial-gradient(60% 60% at 50% 40%, rgba(240, 184, 74, 0.16), transparent 70%), var(--surface-2); border: 0.5px solid var(--line-soft); }
.nwc-img > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.news-row.nwc:hover .nwc-img > img { transform: scale(1.04); }
.nwc-pf { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(10, 15, 30, 0.72); backdrop-filter: blur(8px); border: 0.5px solid rgba(255, 255, 255, 0.14); }
.nwc-pf img { width: 18px; height: 18px; object-fit: contain; }
.nwc-img.is-empty .nwc-pf { inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); }
.nwc-img.is-empty .nwc-pf img { width: 30px; height: 30px; }
.nwc-body { min-width: 0; padding: 4px 6px 4px 0; }
.nwc .news-meta { flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.nwc .news-meta b { padding: 3px 9px; border-radius: 999px; background: var(--gold-tint); font-weight: 600; letter-spacing: 0.06em; }
.nwc .news-meta span::before { content: "·"; margin-right: 14px; color: var(--line); }
.nwc h2 { margin-top: 14px; font-size: 24px; line-height: 1.2; }
.nwc h2 a { color: inherit; text-decoration: none; } .nwc h2 a:hover { color: var(--gold); }
.nwc p { margin-top: 12px; font-size: 14.5px; line-height: 1.65; max-width: 720px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nwc-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.nwc-more { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #101828; background: linear-gradient(135deg, #ffd27a, #f0b84a); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.nwc-more:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(240, 184, 74, 0.8); }
.nwc .news-source { margin-top: 0; color: var(--muted); } .nwc .news-source:hover { color: var(--gold); }
.news-page-cover img { aspect-ratio: auto; max-height: 520px; object-fit: cover; }
@media (max-width: 960px) { .news-row.nwc { grid-template-columns: 1fr; gap: 18px; padding: 16px; } .nwc h2 { font-size: 21px; } }

/* ---------- Social News: the section badge at the top (where you are) ---------- */
.sec-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(240, 184, 74, 0.16), rgba(240, 184, 74, 0.04)); border: 1px solid rgba(240, 184, 74, 0.45);
  box-shadow: 0 0 0 4px rgba(240, 184, 74, 0.06), 0 14px 34px -18px rgba(240, 184, 74, 0.7); font-size: 14px; }
.sec-pill-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #ffd27a, #f0b84a); }
.sec-pill-ic img { width: 16px; height: 16px; filter: brightness(0); }
.sec-pill-k { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.sec-pill b { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--gold); letter-spacing: -0.01em; }
.sec-pill-live { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid rgba(240, 184, 74, 0.3); color: var(--muted); font-size: 12px; }
.sec-pill-live i { width: 7px; height: 7px; border-radius: 50%; background: #2bd576; box-shadow: 0 0 0 0 rgba(43, 213, 118, 0.6); animation: sec-live 2s infinite; }
@keyframes sec-live { 0% { box-shadow: 0 0 0 0 rgba(43, 213, 118, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(43, 213, 118, 0); } }
@media (max-width: 520px) { .sec-pill-k { display: none; } .sec-pill-live { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .sec-pill-live i { animation: none; } }
:root[data-theme="light"] .sec-pill b { color: #8a5a00; }
/* the source's picture on the right (on top on mobile) */
.news-row.nwc { grid-template-columns: minmax(0, 1fr) 320px; }
.nwc-img { order: 2; } .nwc-body { padding: 4px 0 4px 8px; }
@media (max-width: 960px) { .news-row.nwc { grid-template-columns: 1fr; } .nwc-img { order: -1; } .nwc-body { padding: 0; } }
/* network filter: the whole button lights up in the network's colour (hover = softer, chosen = full, it stays) */
.news-filters .ptile::before { inset: -40%; width: auto; height: auto; transform: none; border-radius: 0;
  background: radial-gradient(60% 60% at 50% 30%, color-mix(in srgb, var(--c) 55%, transparent), transparent 75%); }
.news-filters .ptile:hover { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, var(--surface-2)), color-mix(in srgb, var(--c) 10%, var(--surface-2)));
  border-color: var(--c); color: #fff; box-shadow: 0 16px 36px -16px var(--c); }
.news-filters .ptile:hover img { filter: brightness(0) invert(1); background: color-mix(in srgb, var(--c) 45%, transparent); border-color: rgba(255, 255, 255, 0.35); }
.news-filters .ptile[aria-pressed="true"] { color: #fff; border-color: color-mix(in srgb, var(--c) 80%, #fff);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff 6%), color-mix(in srgb, var(--c) 42%, var(--surface-2)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 0 34px -4px var(--c), 0 18px 40px -16px var(--c); transform: translateY(-3px); }
.news-filters .ptile[aria-pressed="true"] span { font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.news-filters .ptile[aria-pressed="true"] img, .news-filters .ptile[data-platform="all"][aria-pressed="true"] img { filter: brightness(0) invert(1); background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.45); }
/* light brand colours (Snapchat, X, Threads, TikTok): dark text and logo so they read well */
.news-filters .ptile:is([data-platform="snapchat"], [data-platform="x"], [data-platform="threads"], [data-platform="tiktok"], [data-platform="all"])[aria-pressed="true"] { color: #0d1424; }
.news-filters .ptile:is([data-platform="snapchat"], [data-platform="x"], [data-platform="threads"], [data-platform="tiktok"], [data-platform="all"])[aria-pressed="true"] span { text-shadow: none; }
.news-filters .ptile:is([data-platform="snapchat"], [data-platform="x"], [data-platform="threads"], [data-platform="tiktok"], [data-platform="all"])[aria-pressed="true"] img { filter: brightness(0); background: rgba(255, 255, 255, 0.35); border-color: rgba(0, 0, 0, 0.15); }
.news-filters .ptile[data-platform="all"] { --c: #f0b84a; }
.news-row.nwc { align-items: center; } @media (max-width: 960px) { .news-row.nwc { align-items: start; } }
/* the Instagram logo file is gold: in the filter it's grey like the others until hovered or chosen */
.news-filters .ptile[data-platform="instagram"]:not([aria-pressed="true"]):not(:hover) img { filter: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(531%) hue-rotate(184deg) brightness(91%) contrast(88%); }
/* "All": the SCP logo's gold gradient */
.news-filters .ptile[data-platform="all"]:hover { background: linear-gradient(160deg, rgba(255, 224, 160, 0.22), rgba(240, 184, 74, 0.08)), var(--surface-2); }
.news-filters .ptile[data-platform="all"][aria-pressed="true"] { background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%);
  border-color: var(--gold-light); box-shadow: 0 0 0 1px rgba(255, 224, 160, 0.5), 0 0 34px -4px rgba(240, 184, 74, 0.8), 0 18px 40px -16px rgba(240, 184, 74, 0.9); }

/* ---------- Saved boards (saved.html · js/saved.js): header, summary, search, "All saves", plan, boards, smart boards, ideas ---------- */
.sv3-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sv3-head h1 { margin: 18px 0 6px; font-family: var(--font-display); font-weight: 500; font-size: clamp(38px, 5vw, 56px); letter-spacing: -0.035em; line-height: 1; }
.sv3-head h1 span { background: linear-gradient(180deg, var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-pill-ic svg { width: 16px; height: 16px; color: #101828; }
.sv3-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.sv3-stats > div { padding: 16px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--surface); border: 0.5px solid var(--line); box-shadow: var(--inset-glow); }
.sv3-stats small { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.sv3-stats b { display: block; margin-top: 6px; font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.sv3-cap::first-letter { text-transform: uppercase; }
.sv3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sv3-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.sv3-chip img { width: 13px; height: 13px; object-fit: contain; }
.sv3-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 30px 0 18px; }
.sv3-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--surface); border: 0.5px solid var(--line); color: var(--muted); transition: border-color 0.2s; }
.sv3-search:focus-within { border-color: rgba(240, 184, 74, 0.6); }
.sv3-search svg { width: 17px; height: 17px; } .sv3-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 14px; }
.sv3-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 0.5px solid var(--line); }
.sv3-seg button { height: 36px; padding: 0 16px; border-radius: 999px; color: var(--muted); font-size: 13px; }
.sv3-seg button[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); }
.sv3-feat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.sv3-all { position: relative; display: block; height: 330px; border-radius: 24px; overflow: hidden; border: 0.5px solid rgba(240, 184, 74, 0.4); color: #fff; transition: transform 0.3s, box-shadow 0.3s; }
.sv3-all:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -30px rgba(240, 184, 74, 0.7); }
.sv3-all-pics { position: absolute; inset: 0; display: grid; gap: 3px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; background: var(--surface-2); }
.sv3-all-pics > .mini { position: relative; inset: auto; } .sv3-all-pics > .mini:first-child { grid-row: 1 / span 2; }
.sv3-all-pics.n1 { grid-template-columns: 1fr; } .sv3-all-pics.n2 { grid-template-columns: 2fr 1fr; } .sv3-all-pics.n3 { grid-template-columns: 2fr 1fr; }
.sv3-all-cap { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 70px 24px 22px; background: linear-gradient(180deg, transparent, rgba(8, 12, 24, 0.94)); }
.sv3-all-cap b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.02em; }
.sv3-all-cap small { color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.sv3-glass { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sv3-plan { display: grid; align-content: space-between; gap: 14px; padding: 26px; border-radius: 24px; background: radial-gradient(80% 90% at 100% 0%, rgba(240, 184, 74, 0.28), transparent 60%), linear-gradient(160deg, #18233f, #0f1730); border: 1px solid rgba(240, 184, 74, 0.35); }
.sv3-plan small { color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.sv3-plan h3 { margin: 10px 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; color: #fff; }
.sv3-plan p { margin: 0; color: var(--muted); font-size: 14px; }
.sv3-plan .btn { justify-self: start; }
.sv3-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sv3-week > span { position: relative; aspect-ratio: 3 / 4; border-radius: 9px; overflow: hidden; background: var(--surface-2); border: 0.5px dashed var(--line); display: grid; place-items: end center; }
.sv3-week i { font-style: normal; font-size: 10px; color: var(--muted); padding-bottom: 5px; }
.sv3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.sv3-b { position: relative; padding: 10px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--surface); border: 0.5px solid var(--line); transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, border-color 0.3s; }
.sv3-b:hover, .sv3-b:focus-within { transform: translateY(-4px); border-color: rgba(240, 184, 74, 0.55); box-shadow: 0 26px 56px -30px rgba(240, 184, 74, 0.6); }
.sv3-b.is-pinned { border-color: rgba(240, 184, 74, 0.45); }
.sv3-b .bd-cover { border-radius: 15px; aspect-ratio: 4 / 3.1; }
.sv3-b-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sv3-pin { position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #101828; background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%); }
.sv3-pin svg { width: 12px; height: 12px; }
.sv3-b-acts { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s; }
.sv3-b:hover .sv3-b-acts, .sv3-b:focus-within .sv3-b-acts, .sv3-b:has(.sv3-menu) .sv3-b-acts { opacity: 1; transform: none; }
.sv3-b-acts button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(10, 15, 30, 0.78); backdrop-filter: blur(8px); border: 0.5px solid rgba(255, 255, 255, 0.16); color: #fff; }
.sv3-b-acts button:hover { background: var(--gold); color: #101828; } .sv3-b-acts svg { width: 15px; height: 15px; }
.sv3-b-meta { display: grid; gap: 5px; padding: 12px 6px 4px; }
.sv3-b-meta b { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }
.sv3-b-meta small { display: flex; gap: 6px; color: var(--muted); font-size: 13px; } .sv3-b-meta small span + span::before { content: "·"; margin-right: 6px; }
.sv3-b-meta .sv3-chips { margin-top: 2px; }
.sv3-bic { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--gold-tint); color: var(--gold); font-style: normal; }
.sv3-bic svg { width: 16px; height: 16px; }
.sv3-bic.is-lg { width: 44px; height: 44px; margin-right: 12px; border-radius: 14px; vertical-align: middle; } .sv3-bic.is-lg svg { width: 24px; height: 24px; }
.sv3-menu { position: absolute; top: 58px; right: 14px; z-index: 5; width: 230px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 0.5px solid var(--line); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7); display: grid; gap: 4px; }
.sv3-menu-k { margin: 0 4px 2px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sv3-icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 0.5px solid var(--line); }
.sv3-icons button { display: grid; place-items: center; height: 36px; border-radius: 10px; color: var(--muted); }
.sv3-icons button:hover { background: var(--surface-3); color: var(--text); } .sv3-icons button[aria-pressed="true"] { background: var(--gold-tint); color: var(--gold); }
.sv3-icons svg { width: 17px; height: 17px; }
.sv3-menu a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--text); }
.sv3-menu a:hover { background: var(--surface-3); } .sv3-menu a svg { width: 16px; height: 16px; color: var(--muted); }
.sv3-menu a.is-danger, .sv3-menu a.is-danger svg { color: #ff8a80; }
.sv3-new { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 22px; border-radius: 22px; text-align: center; border: 1.5px dashed rgba(240, 184, 74, 0.45); background: radial-gradient(70% 60% at 50% 0%, rgba(240, 184, 74, 0.12), transparent), var(--surface); }
.sv3-new:focus-within { border-color: var(--gold); }
.sv3-new-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--gold-tint); color: var(--gold); } .sv3-new-ic svg { width: 26px; height: 26px; }
.sv3-new > b { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.sv3-new-in { display: flex; gap: 6px; width: 100%; }
.sv3-new-in input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--text); font: inherit; font-size: 14px; outline: 0; }
.sv3-new-in input:focus { border-color: rgba(240, 184, 74, 0.6); } .sv3-new-in .btn { height: 40px; padding: 0 16px; }
.sv3-sug { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sv3-sug button { padding: 5px 11px; border-radius: 999px; border: 0.5px solid var(--line); font-size: 12px; color: var(--muted); }
.sv3-sug button:hover { color: var(--gold); border-color: rgba(240, 184, 74, 0.55); }
.sv3-none { margin-top: 18px; color: var(--muted); }
.sv3-h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 46px 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; }
.sv3-h2 small { color: var(--muted); font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.sv3-smart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sv3-sm { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 0.5px solid var(--line); color: inherit; transition: border-color 0.2s, transform 0.2s; }
.sv3-sm:hover { border-color: rgba(var(--c), 0.6); transform: translateY(-2px); }
.sv3-sm-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: rgba(var(--c), 0.16); color: rgb(var(--c)); } .sv3-sm-ic svg { width: 20px; height: 20px; }
.sv3-sm > span:nth-child(2) { flex: 1; display: grid; gap: 2px; } .sv3-sm b { font-size: 15px; } .sv3-sm small { color: var(--muted); font-size: 12.5px; }
.sv3-sm > svg { width: 16px; height: 16px; color: var(--muted); }
.sv3-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sv3-recs .sv-loading { grid-column: 1 / -1; height: 200px; }
.sv3-rec { display: grid; gap: 4px; padding: 8px 8px 12px; border-radius: 18px; background: var(--surface); border: 0.5px solid var(--line); color: inherit; transition: border-color 0.2s, transform 0.2s; }
.sv3-rec:hover { border-color: rgba(240, 184, 74, 0.55); transform: translateY(-3px); }
.sv3-rec-img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--surface-2); margin-bottom: 6px; }
.sv3-rec-img > img { width: 100%; height: 100%; object-fit: cover; }
.sv3-rec-img i { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(10, 15, 30, 0.75); backdrop-filter: blur(6px); }
.sv3-rec-img i img { width: 15px; height: 15px; }
.sv3-rec b { padding: 0 4px; font-size: 14px; } .sv3-rec small { padding: 0 4px; color: var(--muted); font-size: 12px; }
.pin-cover { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); border: 0.5px solid var(--line); color: var(--muted); }
.pin-cover:hover { color: var(--gold); border-color: rgba(240, 184, 74, 0.5); } .pin-cover svg { width: 16px; height: 16px; }
.sv3-toast { position: fixed; left: 50%; bottom: 28px; z-index: 99; transform: translateX(-50%); padding: 12px 18px; border-radius: 999px; background: var(--surface-2); border: 0.5px solid rgba(240, 184, 74, 0.5); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8); font-size: 14px; }
@media (max-width: 960px) { .sv3-feat { grid-template-columns: 1fr; } .sv3-smart { grid-template-columns: 1fr; } .sv3-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv3-all { height: 260px; } }
@media (hover: none) { .sv3-b-acts { opacity: 1; transform: none; } }
/* boards look like folders: a tab on top, the folder icon by the name, "Your folders" heading with the count */
.sv3-b { margin-top: 14px; border-top-left-radius: 0; }
.sv3-b::before { content: ""; position: absolute; left: -0.5px; top: -14px; width: 42%; height: 15px; border-radius: 14px 14px 0 0; background: inherit; border: 0.5px solid var(--line); border-bottom: 0; clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
.sv3-b:hover::before, .sv3-b:focus-within::before, .sv3-b.is-pinned::before { border-color: rgba(240, 184, 74, 0.55); }
.sv3-b.is-pinned::before { background: linear-gradient(90deg, rgba(240, 184, 74, 0.35), rgba(240, 184, 74, 0.12)), var(--surface); }
.sv3-new { margin-top: 14px; }
.sv3-folders-h { align-items: center; margin-top: 34px; }
.sv3-folders-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%); color: #101828; }
.sv3-folders-ic svg { width: 19px; height: 19px; }
.sv3-count { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--gold-tint); color: var(--gold); font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.sv3-b::before { background: var(--surface-2); }
.sv3-all-pics.n4 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .sv3-all-pics.n4 > .mini:first-child { grid-row: 1 / span 3; }
.sv3-all-pics.n2 > .mini:first-child, .sv3-all-pics.n1 > .mini:first-child { grid-row: 1 / span 2; }
.sv3-all-pics.n3 > .mini:first-child { grid-row: 1 / span 2; }
/* "All saves": the caption only over the big picture, so the small ones stay visible */
.sv3-all-cap { right: auto; width: 50%; box-sizing: border-box; padding: 60px 20px 20px; flex-direction: column; align-items: flex-start; gap: 10px; border-bottom-left-radius: 24px; }
.sv3-all-pics.n1 ~ .sv3-all-cap { width: 100%; }
/* "New board" card: everything inside the card — the name field with the gold Create button in it, then name ideas */
.sv3-new { min-width: 0; align-content: center; gap: 14px; padding: 22px 18px; box-sizing: border-box; overflow: hidden; }
.sv3-new-t { display: grid; gap: 3px; } .sv3-new-t b { font-family: var(--font-display); font-weight: 500; font-size: 19px; } .sv3-new-t small { color: var(--muted); font-size: 12.5px; }
.sv3-new-in { position: relative; display: block; width: 100%; }
.sv3-new-in input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 108px 0 16px; border-radius: 999px; }
.sv3-new-go { position: absolute; top: 4px; right: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #101828;
  background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%); box-shadow: 0 6px 18px -8px rgba(240, 184, 74, 0.9); }
.sv3-new-go svg { width: 15px; height: 15px; } .sv3-new-go:hover { filter: brightness(1.06); }
.sv3-sug { gap: 6px; } .sv3-sug small { width: 100%; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.sv3-sug button { padding: 5px 10px; font-size: 12px; background: rgba(255, 255, 255, 0.03); }

/* Menu → Resources: cards like Platform — your boards (members), the newest article, the newest news item, a question */
.mm-res .mm-pcols { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.mm-rv { background: radial-gradient(80% 90% at 50% 0%, rgba(var(--acc), 0.22), transparent 70%), var(--surface-2); background-size: cover; background-position: center; }
.mm-rv-folder { position: absolute; inset: 12px 14px 0; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; border-radius: 9px 9px 0 0; overflow: hidden; }
.mm-rv-folder i { background: rgba(255, 255, 255, 0.06) center / cover no-repeat; } .mm-rv-folder i:first-child { grid-row: 1 / span 2; }
.mm-rv-tag:empty { display: none; }
.mm-rv-tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(10, 15, 30, 0.78); backdrop-filter: blur(6px); color: rgb(var(--acc)); font-size: 11px; font-weight: 700; }
.mm-rv-cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 5px; padding: 10px; }
.mm-rv-cap em { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--acc), 0.28); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; }
.mm-rv-cap b { color: #fff; font-size: 12px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-rv-cap b:empty { display: none; }
.mm-live { width: 6px; height: 6px; border-radius: 50%; background: #2bd576; box-shadow: 0 0 0 3px rgba(43, 213, 118, 0.25); }
.mm-rv-faq { display: grid; align-content: center; gap: 7px; padding: 12px; }
.mm-rv-q, .mm-rv-a { max-width: 92%; padding: 6px 10px; font-size: 11px; line-height: 1.35; white-space: normal; }
.mm-rv-q { justify-self: start; border-radius: 12px 12px 12px 4px; background: rgba(var(--acc), 0.22); color: var(--text); }
.mm-rv-a { justify-self: end; border-radius: 12px 12px 4px 12px; background: rgba(255, 255, 255, 0.07); color: var(--muted); }
.mm-res { width: 860px; } .mm-res .mm-featured { margin-top: 14px; }
@media (max-width: 1180px) { .mm-res { width: auto; } .mm-res .mm-pcols { grid-template-columns: 1fr; } }
.mm-live { background: #ff5c5c; box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.3); }
/* My Club: "where you are" sits in the library's top bar like its other controls — same background, a soft pill */
.my-club-page .mc-crumb { background: var(--surface); padding: 8px 12px; }
/* Menu → Resources → FAQ: a little list of questions, the first one open */
.mm-rv-faq { display: grid; align-content: center; gap: 5px; padding: 10px; }
.mm-rv-acc { display: grid; gap: 4px; padding: 6px 9px; border-radius: 9px; background: rgba(var(--fg), 0.04); border: 1px solid transparent; white-space: normal; }
.mm-rv-acc b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.mm-rv-acc b i { display: grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; background: rgba(var(--acc), 0.18); color: rgb(var(--acc)); font-style: normal; font-size: 11px; line-height: 1; }
.mm-rv-acc small { font-size: 10px; line-height: 1.35; color: var(--muted); }
.mm-rv-acc.is-open { background: rgba(var(--acc), 0.1); border-color: rgba(var(--acc), 0.3); }
.mm-pillar:hover .mm-rv-acc.is-open { border-color: rgba(var(--acc), 0.55); }
.mm-rv-faq { gap: 6px; padding: 9px; }
.mm-rv-acc b { white-space: nowrap; } .mm-rv-acc b > i { margin-left: auto; }
.mm-rv-acc small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-rv-faq { gap: 5px; padding: 6px 8px; } .mm-rv-acc { padding: 5px 8px; gap: 3px; }

/* Pricing: an icon by each plan's name; "My Club" first — the private plan for a club, gold-lit, price to be agreed */
.plan-card.v2 h3 { display: flex; align-items: center; gap: 10px; }
.plan-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(240, 184, 74, 0.12); color: var(--gold); border: 0.5px solid rgba(240, 184, 74, 0.3); }
.plan-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan-card.is-best .plan-ic { background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%); color: #101828; border: 0; }
.plan-card.is-club { position: relative; background: radial-gradient(90% 60% at 0% 0%, rgba(240, 184, 74, 0.16), transparent 60%), linear-gradient(180deg, #172446, #0f1730); border-color: rgba(240, 184, 74, 0.45); }
.plan-card.is-club .plan-ic { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(160deg, rgba(255, 224, 160, 0.25), rgba(240, 184, 74, 0.08)); border-color: rgba(240, 184, 74, 0.55); }
.plan-card.is-club .plan-price-text { background: linear-gradient(180deg, var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-flag.is-club { background: transparent; color: var(--gold); border: 1px solid rgba(240, 184, 74, 0.6); box-shadow: none; }
.plan-card.is-club .plan-cta { border-color: rgba(240, 184, 74, 0.7); color: var(--gold); }
.plan-card.is-club .plan-cta:hover { background: var(--gold-tint); }
:root[data-theme="light"] .plan-card.is-club { background: radial-gradient(90% 60% at 0% 0%, rgba(240, 184, 74, 0.2), transparent 60%), var(--surface); }
/* Pricing: the number of users can be typed (no limit) */
.plan-seats input { width: 46px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; text-align: center; outline: 0; -moz-appearance: textfield; }
.plan-seats input:focus { background: var(--gold-tint); color: var(--gold); }
.plan-seats input::-webkit-outer-spin-button, .plan-seats input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* "For clubs" tag: a solid dark pill with a gold edge, so the card's border doesn't cross it */
.plan-flag.is-club { background: linear-gradient(180deg, #1d2b52, #121b36); color: var(--gold-light); border: 1px solid rgba(240, 184, 74, 0.75); box-shadow: 0 6px 18px -8px rgba(240, 184, 74, 0.6); }
:root[data-theme="light"] .plan-flag.is-club { background: #fff8e8; color: #8a5a00; }
/* Pricing: key points that read very clearly — bigger, bright, the key words in bold, a solid gold tick */
.plan-card.v2 .plan-gets { gap: 13px; padding-top: 18px; }
.plan-card.v2 .plan-gets li { padding-left: 32px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.plan-gets li b { color: var(--text); font-weight: 600; }
.plan-gets li span { color: var(--muted); }
.plan-gets li::before { top: 1px; width: 21px; height: 21px; background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%); box-shadow: 0 4px 12px -4px rgba(240, 184, 74, 0.7); }
.plan-gets li::after { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
:root[data-theme="light"] .plan-gets li b { color: #101828; }
/* Pricing: no empty gap under the price when there's no line under it (one user, monthly) */
.plan-card.v2 .plan-sub:empty, .plan-card.v2 .plan-extras:empty { margin: 0; min-height: 0; }
.plan-card.v2 .plan-price { margin-top: 18px; }
.plan-card.v2 .plan-gets { margin-top: 18px; }
/* Pricing (yearly): the old price crossed out with a red diagonal line over the number */
.plan-was { position: relative; display: inline-block; text-decoration: none; padding: 0 2px; }
.plan-was::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; border-radius: 2px; background: rgba(255, 104, 92, 0.9); transform: rotate(-16deg); transform-origin: center; }
/* Pricing (yearly): what it equals per month shows over the price on hover / tap */
.plan-price b.has-tip { position: relative; cursor: help; }
.plan-price b.has-tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); z-index: 5; padding: 7px 12px; border-radius: 10px; white-space: nowrap;
  background: var(--surface-2); border: 1px solid rgba(240, 184, 74, 0.5); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7); color: var(--text); font: 600 12.5px/1.2 var(--font-body); letter-spacing: 0;
  opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; }
.plan-price b.has-tip:hover::after, .plan-price b.has-tip:focus::after { opacity: 1; transform: translate(-50%, 0); }
.plan-price b.has-tip:focus { outline: 0; }
/* Monthly / yearly: "Yearly" chosen feels like a deal — gold gradient with a passing shine and glow, the "2 months free" badge
   turns into a bright green ticket with a gift icon that pops in */
.plan-interval button[data-interval-pick="year"][aria-selected="true"] { overflow: hidden; color: #101828;
  background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%);
  box-shadow: 0 0 0 1px rgba(255, 224, 160, 0.6), 0 10px 28px -8px rgba(240, 184, 74, 0.85); animation: ivGlow 2.4s ease-in-out infinite; }
.plan-interval button[data-interval-pick="year"][aria-selected="true"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: ivShine 2.8s ease-in-out infinite; }
.plan-interval button[data-interval-pick="year"][aria-selected="true"] em { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; color: #fff; text-transform: uppercase; letter-spacing: 0.04em;
  background: linear-gradient(135deg, #12c766, #00a84f); box-shadow: 0 4px 12px -4px rgba(0, 168, 79, 0.9); animation: ivPop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.plan-interval button[data-interval-pick="year"][aria-selected="true"] em::before { content: ""; width: 12px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes ivShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes ivGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 224, 160, 0.6), 0 10px 28px -8px rgba(240, 184, 74, 0.85); } 50% { box-shadow: 0 0 0 1px rgba(255, 224, 160, 0.9), 0 12px 34px -6px rgba(240, 184, 74, 1); } }
@keyframes ivPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plan-interval button[data-interval-pick="year"][aria-selected="true"], .plan-interval button[data-interval-pick="year"][aria-selected="true"]::before, .plan-interval button[data-interval-pick="year"][aria-selected="true"] em { animation: none; } }
/* Pricing: next to the users, what paying yearly saves (for all of them) — it pops each time the number changes */
.plan-save-live { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 100px; border: 1px solid rgba(0, 216, 91, 0.35); background: rgba(0, 216, 91, 0.1); color: #7cf0b0; font: 600 13.5px var(--font-body); white-space: nowrap; animation: saveIn 0.45s cubic-bezier(.2, 1.5, .4, 1) both; }
.plan-save-live b { color: #fff; font-weight: 800; font-size: 15px; }
.plan-save-live.is-on { background: linear-gradient(135deg, #12c766, #00a84f); border-color: transparent; color: #eafff3; box-shadow: 0 10px 26px -10px rgba(0, 168, 79, 0.9); }
button.plan-save-live { cursor: pointer; } button.plan-save-live:hover { background: rgba(0, 216, 91, 0.18); }
@keyframes saveIn { 0% { transform: scale(0.85); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
:root[data-theme="light"] .plan-save-live { color: #04773a; } :root[data-theme="light"] .plan-save-live b { color: #04773a; } :root[data-theme="light"] .plan-save-live.is-on b, :root[data-theme="light"] .plan-save-live.is-on { color: #fff; }
@media (prefers-reduced-motion: reduce) { .plan-save-live { animation: none; } }
/* Pricing: more air between the monthly / yearly / users bar and the plans (the flags above the cards need room) */
.plan-switches { margin-bottom: 58px; }
/* Pricing: "Not sure which plan…?" as a clear bar under the plans with a big gold button */
.plan-help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; width: fit-content; max-width: 100%; margin: 48px auto 0; padding: 12px 12px 12px 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--surface); border: 1px solid var(--line); box-shadow: var(--inset-glow); font-size: 15px; color: var(--muted); }
.plan-help-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold-tint); color: var(--gold); flex: none; }
.plan-help-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan-help-tx { color: var(--text); font-weight: 500; }
.plan-help-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: 14.5px; color: #101828 !important; text-decoration: none !important;
  background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%); box-shadow: 0 10px 26px -12px rgba(240, 184, 74, 0.9); transition: transform 0.2s, box-shadow 0.2s; }
.plan-help-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(240, 184, 74, 1); }
@media (max-width: 640px) { .plan-help { border-radius: 22px; padding: 16px; text-align: center; } .plan-help-btn { width: 100%; justify-content: center; } }
/* Comparison: the My Club column (gold-lit, "Custom plan", Book a demo) */
.cmp .is-club { background: linear-gradient(180deg, rgba(240, 184, 74, 0.07), rgba(240, 184, 74, 0.03)); }
.cmp thead th.is-club { color: var(--gold); }
.cmp-custom { font-family: var(--font-display); font-weight: 600; font-size: 15px; background: linear-gradient(180deg, var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmp-cta td, .cmp-cta th { padding-top: 14px; padding-bottom: 16px; }
.cmp-club-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(240, 184, 74, 0.7); color: var(--gold); font-size: 13px; font-weight: 600; white-space: nowrap; }
.cmp-club-btn:hover { background: var(--gold-tint); }

/* Profile → Billing → Change your plan: clear choice cards with a radio, a summary of what you pay, the text as a note */
.pf-change { padding: 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--surface); }
.pf-change-head > div:first-child { display: grid; gap: 3px; } .pf-change-head b { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.pf-change-head small { color: var(--muted); font-size: 13px; }
.pf-change-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 16px; }
.pf-change-opt { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s; }
.pf-change-opt:not(:disabled):hover { border-color: rgba(240, 184, 74, 0.55); transform: translateY(-1px); }
.pf-opt-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); transition: border-color 0.2s, background 0.2s; }
.pf-opt-tx { display: grid; gap: 3px; min-width: 0; } .pf-opt-tx b { font-size: 15px; line-height: 1.25; }
.pf-opt-price { color: var(--muted); font-size: 13px; } .pf-opt-price strong { color: var(--text); font-size: 15px; }
.pf-change-opt em { position: static; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--gold-tint); font-size: 11px; font-weight: 700; }
.pf-change-opt.is-on { border-color: var(--gold); background: linear-gradient(135deg, rgba(240, 184, 74, 0.16), rgba(240, 184, 74, 0.05)); box-shadow: 0 12px 30px -16px rgba(240, 184, 74, 0.8); }
.pf-change-opt.is-on .pf-opt-radio { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 0 4px, transparent 5px); }
.pf-change-terms { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--surface-2); border: 0.5px solid var(--line); display: grid; gap: 12px; }
.pf-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pf-sum > span { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 0.5px solid var(--line-soft); }
.pf-sum small { color: var(--muted); font-size: 12px; } .pf-sum b { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.pf-sum > span.is-big { border-color: rgba(0, 216, 91, 0.35); background: rgba(0, 216, 91, 0.07); } .pf-sum > span.is-big b { font-size: 22px; color: #7cf0b0; }
.pf-change-terms > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; } .pf-change-terms > p b { color: var(--text); }
.pf-change-terms .pf-billing-actions { justify-content: flex-end; }
:root[data-theme="light"] .pf-sum > span.is-big b { color: #04773a; }
/* Profile hero: the plan as a small card — icon, plan name, state (trial · until · days left), "See plan" */
.pf-plan-chip { height: auto; gap: 12px; margin-top: 14px; padding: 10px 10px 10px 10px; border-radius: 16px; max-width: 100%; color: var(--text);
  background: linear-gradient(135deg, rgba(240, 184, 74, 0.12), rgba(240, 184, 74, 0.03)); border: 1px solid rgba(240, 184, 74, 0.35); }
.pf-pc-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: radial-gradient(64% 64% at 50% 100%, var(--gold-light) 0%, var(--gold-mid) 50%, var(--gold) 100%); color: #101828; }
.pf-pc-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-pc-tx { display: grid; gap: 3px; min-width: 0; }
.pf-pc-tx b { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.2; }
.pf-pc-tx small { display: inline-flex; align-items: center; gap: 6px; color: #7cf0b0; font-size: 12.5px; }
.pf-plan-chip .pf-pc-tx small i { width: 7px; height: 7px; padding: 0; border-radius: 50%; background: #2bd576; box-shadow: 0 0 0 3px rgba(43, 213, 118, 0.2); }
.pf-pc-go { flex: none; margin-left: 6px; padding: 7px 12px; border-radius: 999px; background: var(--gold-tint); color: var(--gold); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pf-pc-go:hover { background: rgba(240, 184, 74, 0.25); }
.pf-plan-chip.is-warn { background: rgba(255, 104, 92, 0.08); border-color: rgba(255, 104, 92, 0.45); }
.pf-plan-chip.is-warn .pf-pc-tx small { color: #ff9b92; } .pf-plan-chip.is-warn .pf-pc-tx small i { background: #ff685c; box-shadow: 0 0 0 3px rgba(255, 104, 92, 0.2); }
:root[data-theme="light"] .pf-pc-tx small { color: #04773a; }
@media (max-width: 520px) { .pf-plan-chip { flex-wrap: wrap; } .pf-pc-go { margin-left: 50px; } }
@media (min-width: 700px) { .pf-pc-tx small { white-space: nowrap; } }

/* Profile hero: the completion ring — gold gradient, a soft halo turning around it, glowing and breathing at 100% */
.pf-meter { isolation: isolate; }
.pf-meter-glow { position: absolute; inset: -10px; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 224, 160, 0.55) 70%, rgba(240, 184, 74, 0.9) 78%, transparent 92%);
  filter: blur(10px); opacity: 0.55; animation: pfSpin 4.5s linear infinite; }
.pf-meter::after { content: ""; position: absolute; inset: 12px; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(240, 184, 74, 0.14), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px rgba(240, 184, 74, 0.12); }
.pf-ring { stroke: url(#pf-ring-g); filter: drop-shadow(0 0 7px rgba(240, 184, 74, 0.6)); }
.pf-meter.is-full .pf-meter-glow { opacity: 0.9; animation-duration: 3s; }
.pf-meter.is-full svg { animation: pfBreath 2.6s ease-in-out infinite; }
.pf-meter.is-full .pf-meter-text b { background: linear-gradient(180deg, #fff, var(--gold-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes pfSpin { to { transform: rotate(360deg); } }
@keyframes pfBreath { 0%, 100% { filter: drop-shadow(0 0 0 rgba(240, 184, 74, 0)); } 50% { filter: drop-shadow(0 0 12px rgba(240, 184, 74, 0.55)); } }
@media (prefers-reduced-motion: reduce) { .pf-meter-glow, .pf-meter.is-full svg { animation: none; } }
/* the text beside it: title, readable paragraph, "complete" as a green pill */
.pf-why > b { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; }
.pf-why > p:not(.pf-next) { color: var(--muted); line-height: 1.6; max-width: 520px; }
.pf-done-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(0, 216, 91, 0.12); border: 1px solid rgba(0, 216, 91, 0.35); color: #7cf0b0; font-size: 13px; font-weight: 600; }
.pf-done-pill svg { width: 15px; height: 15px; }
:root[data-theme="light"] .pf-done-pill { color: #04773a; }
/* the ring's glow is round: the SVG doesn't clip it, and the 100% "breath" is a round light, not a filter on the square SVG */
.pf-meter svg { overflow: visible; }
.pf-meter.is-full svg { animation: none; }
.pf-meter.is-full::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 50%; animation: pfBreathRound 2.6s ease-in-out infinite; }
@keyframes pfBreathRound { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 184, 74, 0); } 50% { box-shadow: 0 0 26px 4px rgba(240, 184, 74, 0.45); } }
@media (prefers-reduced-motion: reduce) { .pf-meter.is-full::before { animation: none; } }
.pf-card[hidden], .pf-nav a[hidden] { display: none !important; }
[data-nl-later] { display: none !important; }
/* Profile side menu: Billing and Account don't count for the ring — a line separates them from the profile's sections */
.pf-nav a[href="#billing"] { position: relative; margin-top: 15px; }
.pf-nav a[href="#billing"]::before { content: ""; position: absolute; left: 12px; right: 12px; top: -8px; height: 1px; background: var(--line); }

/* Profile → Account: two boxes side by side — language and password — each with its icon, title and a short line */
.pf-acc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.pf-acc-box { display: grid; align-content: start; gap: 16px; padding: 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--surface-2); border: 0.5px solid var(--line); }
.pf-acc-h { display: flex; align-items: flex-start; gap: 12px; }
.pf-acc-h b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.pf-acc-h small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.pf-acc-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--gold-tint); color: var(--gold); border: 0.5px solid rgba(240, 184, 74, 0.3); }
.pf-acc-ic svg { width: 18px; height: 18px; }
.pf-acc .lang-switch { display: flex; width: 100%; }
.pf-acc .lang-switch button { flex: 1; justify-content: center; }
.pf-acc .pf-row { margin-top: 0; } .pf-acc .pf-row .btn { height: 42px; padding: 0 20px; }
@media (max-width: 860px) { .pf-acc { grid-template-columns: 1fr; } }


/* ================= Day colours: "ink" — warm off-white, black for what matters, gold only as an accent =================
   (mockups/light-ink.html "Propuesta final"). Night colours don't change. Base tokens, then the finishing touches. */
:root[data-theme="light"] {
      --bg: #f6f5f1; --surface: #ffffff; --surface-2: #f1f0eb; --surface-3: #e7e5de;
      --text: #0c0c0d; --muted: #5b5b60; --muted-dim: rgba(12,12,13,.45); --white-dim: rgba(12,12,13,.5);
      --line: rgba(12,12,13,.12); --line-soft: rgba(12,12,13,.07); --fg: 12, 12, 13;
      --gold: #0c0c0d; --gold-light: #3a3a3e; --gold-mid: #1d1d20; --gold-tint: rgba(12,12,13,.06); --gold-dim: rgba(12,12,13,.3);
      --on-gold: #ffffff; --inset-glow: inset 0 1px 0 0 rgba(255,255,255,1); --shadow-soft: 0 14px 40px rgba(12,12,13,.10);
    }
    :root[data-theme="light"] body { background: var(--bg); }
        /* main buttons: solid black, white text */
    :root[data-theme="light"] .btn-gold, :root[data-theme="light"] .nav-cta, :root[data-theme="light"] .plan-help-btn, :root[data-theme="light"] .nwc-more {
      background: #0c0c0d !important; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(12,12,13,.6) !important; }
    :root[data-theme="light"] .btn-outline { border-color: #0c0c0d !important; color: #0c0c0d !important; background: transparent !important; }
    :root[data-theme="light"] .link-gold, :root[data-theme="light"] .news-link { color: #0c0c0d !important; text-decoration: underline; text-decoration-color: #f0b84a; text-decoration-thickness: 2px; text-underline-offset: 4px; }
    :root[data-theme="light"] .eyebrow, :root[data-theme="light"] .hx-eyebrow { background: #0c0c0d !important; color: #fff !important; border-color: #0c0c0d !important; }
    :root[data-theme="light"] .plan-card.is-best { border-color: #0c0c0d !important; box-shadow: 0 24px 50px -24px rgba(12,12,13,.35) !important; background: #fff !important; }
    :root[data-theme="light"] .plan-flag { background: #0c0c0d !important; color: #fff !important; }
    :root[data-theme="light"] .plan-gets li::before { background: #0c0c0d !important; box-shadow: none !important; }
    :root[data-theme="light"] .plan-gets li::after { filter: invert(1); }
    :root[data-theme="light"] .site-nav, :root[data-theme="light"] .nav-links { background: rgba(255,255,255,.85) !important; }

/* finishing touches: black logo, glass menu, white cards with soft shadows, chosen things in black, black footer */
:root[data-theme="light"] { --bg: #f7f6f3; --surface-2: #f2f1ed; --line: rgba(12,12,13,.10); --line-soft: rgba(12,12,13,.06); --shadow-soft: 0 1px 2px rgba(12,12,13,.04), 0 12px 32px -12px rgba(12,12,13,.14); }
    :root[data-theme="light"] .site-nav .brand-logo { filter: brightness(0); }
    :root[data-theme="light"] .nav-links { background: rgba(255,255,255,.7) !important; backdrop-filter: blur(14px); border: 1px solid rgba(12,12,13,.08) !important; box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 10px 30px -18px rgba(12,12,13,.25) !important; }
    :root[data-theme="light"] .mm-panel { background: #fff !important; border-color: rgba(12,12,13,.08) !important; box-shadow: 0 30px 60px -28px rgba(12,12,13,.3) !important; }
    :root[data-theme="light"] h1, :root[data-theme="light"] .section-title { letter-spacing: -0.035em; }
    :root[data-theme="light"] .lead, :root[data-theme="light"] p { color: #4a4a50; }
    /* cards: white, soft shadow, no heavy border */
    :root[data-theme="light"] .plan-card, :root[data-theme="light"] .news-row, :root[data-theme="light"] .blog-card, :root[data-theme="light"] .sv3-b, :root[data-theme="light"] .tool-card {
      background: #fff !important; border-color: rgba(12,12,13,.07) !important; box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 18px 40px -24px rgba(12,12,13,.22) !important; }
    /* chosen things: black with white text (filters, monthly / yearly, tabs) */
    :root[data-theme="light"] .plan-interval button[aria-selected="true"], :root[data-theme="light"] .seg-btn[aria-pressed="true"], :root[data-theme="light"] .pill[aria-pressed="true"] {
      background: #0c0c0d !important; color: #fff !important; box-shadow: none !important; animation: none !important; }
    :root[data-theme="light"] .plan-interval button[aria-selected="true"] em { background: #f0b84a !important; color: #0c0c0d !important; }
    :root[data-theme="light"] .plan-interval button[aria-selected="true"]::before { display: none; }
    /* the only gold that stays: the highlighter, the Recommended seal, the price of the best plan underlined */
    :root[data-theme="light"] .plan-card.is-best .plan-flag { background: #f0b84a !important; color: #0c0c0d !important; }
    :root[data-theme="light"] .plan-ic { background: #f2f1ed !important; color: #0c0c0d !important; border-color: rgba(12,12,13,.1) !important; }
    :root[data-theme="light"] .plan-card.is-best .plan-ic { background: #0c0c0d !important; color: #f0b84a !important; }
    :root[data-theme="light"] .plan-card.is-best .plan-price b { text-decoration: underline; text-decoration-color: #f0b84a; text-decoration-thickness: 3px; text-underline-offset: 6px; }
    :root[data-theme="light"] .sec-pill { background: #fff !important; border-color: rgba(12,12,13,.1) !important; box-shadow: 0 8px 24px -14px rgba(12,12,13,.3) !important; }
    :root[data-theme="light"] .sec-pill b { color: #0c0c0d !important; } :root[data-theme="light"] .sec-pill-ic { background: #0c0c0d !important; } :root[data-theme="light"] .sec-pill-ic img, :root[data-theme="light"] .sec-pill-ic svg { filter: invert(1); }
    /* the footer: black, closing the page with weight */
    :root[data-theme="light"] .site-footer.sf { background: #0c0c0d !important; color: #fff; margin-top: 140px; }
    :root[data-theme="light"] .site-footer.sf, :root[data-theme="light"] .site-footer.sf p, :root[data-theme="light"] .site-footer.sf span, :root[data-theme="light"] .site-footer.sf a, :root[data-theme="light"] .site-footer.sf h2, :root[data-theme="light"] .site-footer.sf h3 { color: #e9e9ec !important; }
    :root[data-theme="light"] .site-footer.sf .sf-news { background: #17171a !important; border-color: rgba(255,255,255,.08) !important; box-shadow: none !important; }
    :root[data-theme="light"] .site-footer.sf .btn-gold { background: #f0b84a !important; color: #0c0c0d !important; }
    :root[data-theme="light"] .site-footer.sf input { background: #0c0c0d !important; color: #fff !important; border-color: rgba(255,255,255,.15) !important; }
    :root[data-theme="light"] .site-footer.sf .sf-stats b { color: #f0b84a !important; }
/* day colours: the "All" network tile chosen = black with white text and logo */
:root[data-theme="light"] .news-filters .ptile[data-platform="all"][aria-pressed="true"] { background: #0c0c0d !important; border-color: #0c0c0d !important; color: #fff !important; box-shadow: 0 14px 30px -16px rgba(12,12,13,.6) !important; }
:root[data-theme="light"] .news-filters .ptile[data-platform="all"][aria-pressed="true"] img { filter: brightness(0) invert(1) !important; background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.25) !important; box-shadow: none !important; }
:root[data-theme="light"] .news-filters .ptile[data-platform="all"][aria-pressed="true"]::before { opacity: 0 !important; }
/* day colours: what had a gold fill now has a black one — its text and icons go white; the dark "plan your week" card keeps gold */
:root[data-theme="light"] :is(.sv3-pin, .sv3-folders-ic, .sv3-new-go, .sec-pill-ic, .pf-pc-ic, .sv3-plan .btn-gold) { color: #fff !important; }
:root[data-theme="light"] :is(.sv3-folders-ic, .sec-pill-ic, .pf-pc-ic) svg { color: #fff !important; stroke: currentColor; }
:root[data-theme="light"] .sv3-plan small { color: #f0b84a !important; }
:root[data-theme="light"] .sv3-plan .btn-gold { background: #f0b84a !important; color: #0c0c0d !important; }
:root[data-theme="light"] .sec-pill-ic img { filter: brightness(0) invert(1) !important; }
/* day colours — profile: white hero, chosen tiles / chips in black, section icons neutral */
:root[data-theme="light"] .pf-hero { background: #fff !important; border-color: rgba(12,12,13,.08) !important; box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 18px 40px -24px rgba(12,12,13,.22) !important; }

:root[data-theme="light"] :is(.pf-chip, .pf-seg-b)[aria-pressed="true"] { background: #0c0c0d !important; border-color: #0c0c0d !important; color: #fff !important; }
:root[data-theme="light"] .pf-head-ic { background: #f2f1ed !important; color: #0c0c0d !important; border-color: rgba(12,12,13,.08) !important; box-shadow: none !important; }
:root[data-theme="light"] .pf-nav a[aria-current="page"], :root[data-theme="light"] .pf-nav a.is-active { background: #0c0c0d !important; color: #fff !important; }
:root[data-theme="light"] .pf-nav a.is-active svg { color: #fff !important; }
/* day colours — the big CTA box: white and bright (no navy tint), soft shadow, the turning gold edge kept thin, lighter glows */
:root[data-theme="light"] .cta-box { background: radial-gradient(120% 90% at 50% 0%, #ffffff 55%, #fbf6ea 100%) !important; border-color: rgba(12,12,13,.08) !important;
  box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 30px 70px -36px rgba(12,12,13,.28) !important; }
:root[data-theme="light"] .cta-box::after { opacity: .45; }
:root[data-theme="light"] .cta-box::before { opacity: .7; }
/* day colours — My Club: a white club card with a soft shadow (no gold wash), chosen tabs / sections / profiles / people in black */
:root[data-theme="light"] .mc-card { background: #fff !important; border-color: rgba(12,12,13,.08) !important; box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 22px 50px -28px rgba(12,12,13,.25) !important; }
:root[data-theme="light"] .mc-card::before { opacity: .35; }
:root[data-theme="light"] .mc-logo { background: #f7f6f3 !important; border-color: rgba(12,12,13,.1) !important; box-shadow: 0 10px 24px -14px rgba(12,12,13,.35) !important; }
:root[data-theme="light"] .mc-seg-b[aria-pressed="true"], :root[data-theme="light"] .mc-mode-sw button[aria-pressed="true"] {
  background: #0c0c0d !important; color: #fff !important; box-shadow: 0 8px 20px -10px rgba(12,12,13,.5) !important; border-color: #0c0c0d !important; }
:root[data-theme="light"] .mc-seg-b[aria-pressed="true"] i { background: rgba(255,255,255,.18) !important; color: #fff !important; }
:root[data-theme="light"] .mc-person[aria-pressed="true"], :root[data-theme="light"] .mc-prof[aria-pressed="true"], :root[data-theme="light"] .mc-prof.is-on { border-color: #0c0c0d !important; box-shadow: 0 0 0 1px #0c0c0d !important; background: #fff !important; }
/* My Club: the club picker — a button with the crest and name, a list of clubs with their crests (no system menu) */
.mc-clubpick { position: relative; }
.mc-cp-btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--fg), 0.05); color: var(--text); font: 600 14px var(--font-body); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.mc-cp-btn:hover, .mc-cp-btn[aria-expanded="true"] { border-color: rgba(240, 184, 74, 0.6); }
.mc-cp-btn small { color: var(--muted); font-size: 12px; font-weight: 500; }
.mc-cp-btn > svg, .mc-cp-list svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mc-cp-btn[aria-expanded="true"] > svg { transform: rotate(180deg); }
.mc-cp-crest { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; overflow: hidden; background: #fff; color: #121b33; font: 700 10px var(--font-display); }
.mc-cp-crest img { width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; }
.mc-cp-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 240px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6); }
.mc-cp-list[hidden] { display: none; }
.mc-cp-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 14px var(--font-body); text-align: left; cursor: pointer; }
.mc-cp-list button:hover { background: rgba(var(--fg), 0.06); }
.mc-cp-list button span:not(.mc-cp-crest) { flex: 1; }
.mc-cp-list button[aria-selected="true"] { background: var(--gold-tint); color: var(--gold); font-weight: 600; }
:root[data-theme="light"] .mc-cp-list { background: #fff; box-shadow: 0 24px 50px -22px rgba(12,12,13,.35); }
:root[data-theme="light"] .mc-cp-btn { background: #fff; } :root[data-theme="light"] .mc-cp-btn:hover, :root[data-theme="light"] .mc-cp-btn[aria-expanded="true"] { border-color: #0c0c0d; }
:root[data-theme="light"] .mc-cp-list button[aria-selected="true"] { background: #0c0c0d; color: #fff; }
/* day colours — "My space" buttons keep their own gradients (AI purple, Plan blue, Saved boards gold), also when open */
:root[data-theme="light"] .my-space-btns .pill[aria-pressed="true"] { background: var(--g) border-box !important; color: #fff !important; }
:root[data-theme="light"] .my-space-btns .saved-link[aria-pressed="true"] { background: #0c0c0d !important; color: #fff !important; }
:root[data-theme="light"] .my-space-btns .saved-link[aria-pressed="true"] * { color: #fff !important; }
/* My Club: the club picker's list opens over everything (the club card no longer clips it) */
.mc-card:has(.mc-cp-list:not([hidden])) { overflow: visible; z-index: 20; }
.mc-cp-list { z-index: 60; }
/* day colours — the contact / demo flow: a bright frosted backdrop, black logo and progress, white bubbles, chosen one in black */
:root[data-theme="light"] .lead-modal { background: rgba(247, 246, 243, 0.78); }
:root[data-theme="light"] .lead-modal.is-quick { background: rgba(247, 246, 243, 0.86); }
:root[data-theme="light"] .lead-box { background: #fff; border-color: rgba(12,12,13,.08); box-shadow: 0 40px 90px -40px rgba(12,12,13,.35); }
:root[data-theme="light"] .lead-modal.is-quick .lead-box { background: transparent; box-shadow: none; }
:root[data-theme="light"] .lead-logo { filter: brightness(0); }
:root[data-theme="light"] .lead-progress { background: rgba(12,12,13,.08); }
:root[data-theme="light"] .lead-progress i { background: #0c0c0d; }
:root[data-theme="light"] .lead-x { background: #fff; color: #0c0c0d; box-shadow: 0 6px 18px -8px rgba(12,12,13,.35); }
:root[data-theme="light"] .lead-bubble { background: #fff; border-color: rgba(12,12,13,.1); color: #0c0c0d; box-shadow: 0 1px 2px rgba(12,12,13,.05), 0 14px 30px -18px rgba(12,12,13,.35); }
:root[data-theme="light"] .lead-bubble-ic { background: #f2f1ed; color: #0c0c0d; }
:root[data-theme="light"] .lead-bubble:hover, :root[data-theme="light"] .lead-bubble:focus-visible { border-color: #0c0c0d; background: #fff; box-shadow: 0 18px 36px -18px rgba(12,12,13,.45); }
:root[data-theme="light"] .lead-bubble[aria-checked="true"] { background: #0c0c0d; border-color: #0c0c0d; color: #fff; }
:root[data-theme="light"] .lead-bubble[aria-checked="true"] .lead-bubble-ic { background: rgba(255,255,255,.16); color: #fff; }
:root[data-theme="light"] .lead-opt:hover, :root[data-theme="light"] .lead-opt[aria-checked="true"], :root[data-theme="light"] .lead-opt[aria-pressed="true"] { border-color: #0c0c0d; }
:root[data-theme="light"] .lead-btn.is-primary { background: #0c0c0d; border-color: #0c0c0d; color: #fff; }
:root[data-theme="light"] .lead-tel input:focus, :root[data-theme="light"] .lead-tel select:focus { border-color: #0c0c0d; box-shadow: 0 0 0 3px rgba(12,12,13,.08); }
:root[data-theme="light"] .lead-kicker, :root[data-theme="light"] .lead-when { color: #0c0c0d; }
/* day colours — booking a demo: white day / time / part-of-day cards with soft shadows, the chosen one in black, light fields */
:root[data-theme="light"] :is(.lead-modal .dp-day, .dp-time, .dp-part, .dp-in) { background: #fff !important; border-color: rgba(12,12,13,.1) !important; color: #0c0c0d; box-shadow: 0 1px 2px rgba(12,12,13,.05), 0 14px 30px -20px rgba(12,12,13,.35) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="light"] :is(.lead-modal .dp-day, .dp-time, .dp-part):hover, :root[data-theme="light"] :is(.lead-modal .dp-day, .dp-time, .dp-part):focus-visible { border-color: #0c0c0d !important; }
:root[data-theme="light"] .lead-modal .dp-day[aria-checked="true"], :root[data-theme="light"] .dp-part[aria-checked="true"] { background: #0c0c0d !important; border-color: #0c0c0d !important; color: #fff; }
:root[data-theme="light"] .lead-modal .dp-day[aria-checked="true"] small, :root[data-theme="light"] .dp-part[aria-checked="true"] small { color: rgba(255,255,255,.7); }
:root[data-theme="light"] .dp-part[aria-checked="true"] b { color: #fff; }
:root[data-theme="light"] .dp-time:hover { background: #0c0c0d !important; color: #fff; }
:root[data-theme="light"] .dp-in:focus { border-color: #0c0c0d !important; box-shadow: 0 0 0 4px rgba(12,12,13,.08) !important; }
:root[data-theme="light"] .dp-when span { background: #0c0c0d; border-color: #0c0c0d; color: #fff; }
/* day colours — contact flow: no dark shadow behind the titles, the phone capsule white and readable */
:root[data-theme="light"] .lead-modal.is-quick .lead-q-big { text-shadow: none; }
:root[data-theme="light"] .lead-modal.is-quick .lead-tel { background: #fff; border-color: rgba(12,12,13,.14); box-shadow: 0 1px 2px rgba(12,12,13,.05), 0 16px 34px -22px rgba(12,12,13,.4); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-theme="light"] .lead-modal.is-quick .lead-tel:focus-within { border-color: #0c0c0d; box-shadow: 0 0 0 4px rgba(12,12,13,.08); }
:root[data-theme="light"] .lead-modal.is-quick .lead-tel select, :root[data-theme="light"] .lead-modal.is-quick .lead-tel input { background-color: transparent; color: #0c0c0d; }
:root[data-theme="light"] .lead-modal.is-quick .lead-tel select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .lead-modal.is-quick .lead-tel select option { background: #fff; color: #0c0c0d; }
:root[data-theme="light"] .lead-modal.is-quick .lead-tel input { border-left-color: rgba(12,12,13,.12); }
:root[data-theme="light"] .lead-modal.is-quick .lead-tel input::placeholder { color: #8a8a90; }
:root[data-theme="light"] .lead-modal.is-quick .lead-x { background: #fff; border-color: rgba(12,12,13,.1); color: #0c0c0d; }
:root[data-theme="light"] .lead-check input { accent-color: #0c0c0d; }
/* day colours — the menu's featured strip ("What is SCP?"): light box, dark eyebrow and title, black arrow */
:root[data-theme="light"] .mm-featured { background: #f7f6f3 !important; border-color: rgba(12,12,13,.1) !important; color: #0c0c0d !important; }
:root[data-theme="light"] .mm-featured i { color: #6b6b72 !important; }
:root[data-theme="light"] .mm-featured b, :root[data-theme="light"] .mm-featured svg { color: #0c0c0d !important; }
:root[data-theme="light"] .mm-featured:hover { background: #fff !important; border-color: #0c0c0d !important; }
/* day colours — the Newsletter button in the dock: gold stays, text and icons in black */
:root[data-theme="light"] .dock-news, :root[data-theme="light"] .dock-news span { color: #0c0c0d !important; }
:root[data-theme="light"] .dock-news svg { color: #0c0c0d !important; stroke: #0c0c0d !important; }
/* menu's main button: the same height as the other buttons in the bar, a small gold arrow disc that slides on hover */
.nav-actions .nav-cta { height: 36px; gap: 9px; padding: 0 4px 0 16px; font-size: 14px; letter-spacing: -0.005em; transition: transform 0.2s, box-shadow 0.2s; }
.nav-actions .nav-cta:hover { box-shadow: 0 10px 24px -12px rgba(240, 184, 74, 0.7); }
.nav-actions .btn-outline { height: 36px; }
.nav-cta-ic { width: 28px; height: 28px; background: #f0b84a !important; color: #1a1206 !important; transition: transform 0.2s; }
.nav-cta-ic svg { width: 14px; height: 14px; }
.nav-actions .nav-cta:hover .nav-cta-ic { transform: translateX(2px) rotate(45deg); }
:root[data-theme="light"] .nav-actions .nav-cta:hover { box-shadow: 0 10px 24px -12px rgba(12, 12, 13, 0.6) !important; }

/* day colours — highlighted words (mockups/highlight.html, option 5): black text with a gold shine crossing it now and then,
   instead of the flat highlighter block */
:root[data-theme="light"] .gold, :root[data-theme="light"] .section-title span.gold, :root[data-theme="light"] h1 .gold, :root[data-theme="light"] h2 .gold, :root[data-theme="light"] .sv3-head h1 span {
  color: transparent !important; -webkit-text-fill-color: transparent;
  background-color: transparent !important; background-image: linear-gradient(90deg, #0c0c0d 0%, #0c0c0d 35%, #c8891c 50%, #0c0c0d 65%, #0c0c0d 100%) !important; background-size: 300% 100% !important; background-position: 100% 0;
  -webkit-background-clip: text !important; background-clip: text !important; animation: goldSweep 3.2s ease-in-out infinite; }
@keyframes goldSweep { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="light"] .gold, :root[data-theme="light"] .sv3-head h1 span { animation: none; background-position: 50% 0 !important; } }
/* "Visit the news / blog / All articles" links: a clear pill button (one border, no double underline), filled on hover */
.news-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid rgba(240, 184, 74, 0.6); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; text-decoration: none !important; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.news-link:hover { background: var(--gold); color: #101828; border-color: var(--gold); transform: translateY(-1px); }
:root[data-theme="light"] .news-link { border-color: rgba(12,12,13,.25); color: #0c0c0d !important; text-decoration: none !important; background: #fff; }
:root[data-theme="light"] .news-link:hover { background: #0c0c0d; border-color: #0c0c0d; color: #fff !important; }
/* Profile hero: the plan card stays inside its column (it was running into the ring) — its line wraps; a bit more air around the ring */
.pf-hero { column-gap: 44px; }
.pf-id, .pf-id > div:last-child { min-width: 0; }
.pf-plan-chip { box-sizing: border-box; max-width: 100%; }
.pf-pc-tx small { white-space: normal !important; line-height: 1.4; }
:root[data-theme="light"] .pf-plan-chip { background: #f7f6f3; border-color: rgba(12,12,13,.08); }
:root[data-theme="light"] .pf-pc-go { background: #fff; color: #0c0c0d; border: 1px solid rgba(12,12,13,.12); }
:root[data-theme="light"] .pf-pc-go:hover { background: #0c0c0d; color: #fff; }
/* day colours — profile tiles (role, organisation…) chosen: black with white text, the icon in a light tile, a gold tick */
:root[data-theme="light"] .pf-role[aria-pressed="true"] { background: #0c0c0d !important; border-color: #0c0c0d !important; color: #fff !important; box-shadow: 0 12px 26px -14px rgba(12,12,13,.55) !important; }
:root[data-theme="light"] .pf-role[aria-pressed="true"] .pf-role-ic { background: rgba(255,255,255,.14) !important; color: #fff !important; border-color: rgba(255,255,255,.2) !important; }
:root[data-theme="light"] .pf-role[aria-pressed="true"] .pf-role-ck { background: #f0b84a !important; color: #0c0c0d !important; }
:root[data-theme="light"] .pf-role .pf-role-ic { background: #f2f1ed; color: #0c0c0d; }
:root[data-theme="light"] .pf-role[aria-pressed="true"] .pf-role-ic img { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
:root[data-theme="light"] .pf-role[aria-pressed="true"] .pf-role-ic svg, :root[data-theme="light"] .pf-role[aria-pressed="true"] .pf-role-ic i { color: #fff !important; stroke: currentColor; opacity: 1 !important; }
:root[data-theme="light"] .pf-role[aria-pressed="true"] .pf-role-ic :is(i, span)[style*="mask"] { background: #fff !important; }
/* day colours — chosen chips (e.g. favourite network): their logos and icons in white on the black */
:root[data-theme="light"] :is(.pf-chip, .pf-seg-b)[aria-pressed="true"] img { filter: brightness(0) invert(1) !important; opacity: 1 !important; }
:root[data-theme="light"] :is(.pf-chip, .pf-seg-b)[aria-pressed="true"] svg { color: #fff !important; opacity: 1 !important; }
/* day colours — switches (newsletter…): bigger and clear — off grey with a white knob, on green with a white knob and a tick */
:root[data-theme="light"] .pf-switch .switch { width: 52px; height: 30px; background: #dcdad3 !important; border: 0 !important; box-shadow: inset 0 1px 2px rgba(12,12,13,.12) !important; }
:root[data-theme="light"] .pf-switch .switch::after { top: 3px; left: 3px; width: 24px; height: 24px; background: #fff center / 13px no-repeat !important; box-shadow: 0 2px 6px rgba(12,12,13,.25); }
:root[data-theme="light"] .pf-switch input:checked + .switch { background: #12c766 !important; box-shadow: 0 6px 16px -6px rgba(18,199,102,.7) !important; }
:root[data-theme="light"] .pf-switch input:checked + .switch::after { transform: translateX(22px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312c766' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important; }
:root[data-theme="light"] .pf-switch input:focus-visible + .switch { outline-color: #0c0c0d; }
:root[data-theme="light"] .pf-switch:has(input:checked) { border-color: rgba(18,199,102,.35) !important; }
/* day colours — Billing & membership: a white plan card with a black header strip, clear facts, readable quota, white team box */
:root[data-theme="light"] .pf-billing .pf-plan { background: #fff !important; border: 1px solid rgba(12,12,13,.08) !important; box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 18px 40px -26px rgba(12,12,13,.28) !important; }
:root[data-theme="light"] .pf-billing .pf-plan-top b { color: #0c0c0d; font-size: 21px; }
:root[data-theme="light"] .pf-plan-badge.is-trial { background: #0c0c0d !important; color: #fff !important; }
:root[data-theme="light"] .pf-plan-badge.is-active { background: rgba(18,199,102,.14) !important; color: #078a44 !important; }
:root[data-theme="light"] .pf-billing .pf-billing-note { color: #4a4a50; } :root[data-theme="light"] .pf-billing .pf-billing-note b { color: #0c0c0d; }
:root[data-theme="light"] .pf-facts { border: 0 !important; gap: 8px !important; background: transparent !important; }
:root[data-theme="light"] .pf-facts div { background: #f7f6f3 !important; border-radius: 12px; border: 1px solid rgba(12,12,13,.05); }
:root[data-theme="light"] .pf-facts dt { color: #6b6b72 !important; } :root[data-theme="light"] .pf-facts dd { color: #0c0c0d !important; font-weight: 600 !important; }
:root[data-theme="light"] .pf-included { color: #2c2c30 !important; } :root[data-theme="light"] .pf-included svg { color: #12c766 !important; }
:root[data-theme="light"] .pf-quota { background: #f7f6f3 !important; border: 1px solid rgba(12,12,13,.06); }
:root[data-theme="light"] .pf-quota-top svg { color: #c8891c !important; }
:root[data-theme="light"] .pf-quota-bar { background: rgba(12,12,13,.08) !important; } :root[data-theme="light"] .pf-quota-bar i, :root[data-theme="light"] .pf-quota-bar span { background: #0c0c0d !important; }
:root[data-theme="light"] .pf-team { background: #fff !important; border: 1px solid rgba(12,12,13,.08) !important; box-shadow: 0 10px 26px -20px rgba(12,12,13,.3) !important; }
:root[data-theme="light"] .pf-billing-actions .btn-outline { background: #fff !important; }
:root[data-theme="light"] .pf-billing-actions .btn-outline:hover { background: #0c0c0d !important; color: #fff !important; }
:root[data-theme="light"] .pf-billing .pf-invoices { background: #fff; border-radius: 16px; }
/* day colours — "Complete" / "Verified" / "On" badges: a deeper, readable green */
:root[data-theme="light"] .pf-sec-prog.is-done, :root[data-theme="light"] .pf-verified, :root[data-theme="light"] .pf-done-pill {
  color: #fff !important; background: #12a85a !important; border-color: #12a85a !important; box-shadow: 0 6px 14px -8px rgba(18,168,90,.8); }
:root[data-theme="light"] .pf-sec-prog.is-done svg, :root[data-theme="light"] .pf-verified svg, :root[data-theme="light"] .pf-done-pill svg { color: #fff !important; }
/* day colours — the profile ring: clean ink style — black progress on a light track, no gold halo, a solid black number,
   and when complete a green tick badge on the ring */
:root[data-theme="light"] .pf-meter-glow { display: none; }
:root[data-theme="light"] .pf-meter::after { background: #fff; box-shadow: inset 0 0 0 1px rgba(12,12,13,.06); }
:root[data-theme="light"] .pf-meter.is-full::before { animation: none; box-shadow: none; }
:root[data-theme="light"] .pf-ring-bg { stroke: #ebe9e3; }
:root[data-theme="light"] .pf-ring { stroke: #0c0c0d !important; filter: none !important; }
:root[data-theme="light"] .pf-meter-text b, :root[data-theme="light"] .pf-meter.is-full .pf-meter-text b { background: none !important; -webkit-text-fill-color: #0c0c0d; color: #0c0c0d !important; }
:root[data-theme="light"] .pf-meter-text span { color: #6b6b72; }
:root[data-theme="light"] .pf-meter.is-full .pf-meter-text::after { content: ""; position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: #12a85a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(18,168,90,.8); }
/* Profile → Country: the arrow sits on the right (it was drawn over the name, where the field icons go) */
.pf-country-btn { justify-content: space-between; gap: 10px; }
.pf-country-btn > svg { position: static !important; transform: none !important; margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--muted); }
.pf-country-btn[aria-expanded="true"] > svg { transform: rotate(180deg) !important; }

/* ---------- Profile: every section built like "Billing & membership" — each block of questions is its own card
   (white with a soft shadow by day, a raised panel by night), stacked with air between them ---------- */
.pf-card:not(.pf-billing) > :is(.pf-grid, .pf-q, .pf-switch, .pf-field) { margin: 0 0 14px !important; padding: 18px 20px !important; border-radius: 18px; border: 1px solid var(--line-soft) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--surface-2); }
.pf-card:not(.pf-billing) > :is(.pf-grid, .pf-q, .pf-switch, .pf-field):last-child { margin-bottom: 0 !important; }
.pf-card:not(.pf-billing) > .pf-grid { padding-top: 18px !important; }
.pf-card .pf-q + .pf-q, .pf-card .pf-q + .pf-grid, .pf-card .pf-grid + .pf-q { border-top: 1px solid var(--line-soft); }
.pf-card:not(.pf-billing) > .pf-q > span { margin-bottom: 14px; }
:root[data-theme="light"] .pf-card:not(.pf-billing) > :is(.pf-grid, .pf-q, .pf-switch, .pf-field) { background: #fff !important; border-color: rgba(12,12,13,.08) !important;
  box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 18px 40px -26px rgba(12,12,13,.28) !important; }
:root[data-theme="light"] .pf-card:not(.pf-billing) .pf-grid .pf-in, :root[data-theme="light"] .pf-card:not(.pf-billing) .pf-country-btn { background: #f7f6f3; }
:root[data-theme="light"] .pf-acc-box { background: #fff !important; border-color: rgba(12,12,13,.08) !important; box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 18px 40px -26px rgba(12,12,13,.28) !important; }

/* "Get the Content Plan" → the plans that include it, in short, under the button (js/checkout.js plansPicker) */
.pp-plans { display: grid; gap: 10px; width: 100%; margin-top: 12px; }
.pp-plans-msg { margin: 0; color: var(--muted); font-size: 13px; }
.pp-pick { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface-1, rgba(255,255,255,.03)); border: 1px solid var(--line-soft); }
.pp-pick-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-plans .pp-pick-top b { font-family: var(--font-display); font-size: 15px; }
.pp-pick-top span { color: var(--muted); font-size: 13px; }
.pp-pick-top strong { color: var(--text); font-size: 16px; }
.pp-pick p { grid-column: 1; margin: 0 !important; color: var(--muted); font-size: 13px; line-height: 1.4; }
.pp-pick .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.pp-plans-all { justify-self: start; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.pp-plans-all:hover { color: var(--text); }
@media (max-width: 560px) { .pp-pick { grid-template-columns: 1fr; } .pp-pick .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; } }
:is(.pp, .ai-out) .pp-pick { grid-template-columns: 1fr; } :is(.pp, .ai-out) .pp-pick .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
:root[data-theme="light"] .pp-pick { background: #fff; border-color: rgba(12,12,13,.08); box-shadow: 0 1px 2px rgba(12,12,13,.04), 0 12px 30px -22px rgba(12,12,13,.3); }

/* Menu "My Club" (the top plan): premium touch — on hover a gold border runs round the button, the name turns gold metal and
   a little crown appears; on click a gold halo pulses out */
@property --mc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mm-club .mm-btn-tab { position: relative; isolation: isolate; transition: color .2s, transform .15s, background .25s; }
.mm-club .mm-btn-tab::before { content: ""; position: absolute; inset: 0; z-index: 1; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--mc-a), #7a5512, #f0b84a, #fff1c9, #f0b84a, #7a5512 50%, #f0b84a, #fff1c9, #f0b84a, #7a5512);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.mm-club .mm-btn-tab::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgba(240,184,74,.55); }
.mm-club .mm-btn-tab:hover::before, .mm-club .mm-btn-tab:focus-visible::before, .mm-club .mm-btn-tab[aria-current="page"]::before { opacity: 1; animation: mmClubSpin 2.4s linear infinite; }
@keyframes mmClubSpin { to { --mc-a: 360deg; } }
.mm-club .mm-btn-tab > span:first-child { transition: color .2s; }
.mm-club .mm-btn-tab:hover > span:first-child, .mm-club .mm-btn-tab:focus-visible > span:first-child, .mm-club .mm-btn-tab[aria-current="page"] > span:first-child {
  background: linear-gradient(100deg, #b07a1c, #f6d58a 45%, #fff3cf 52%, #d9a03a 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mm-club .mm-btn-tab > span:first-child::before { content: ""; display: inline-block; width: 0; height: 13px; margin-right: 0; vertical-align: -1px; opacity: 0; transition: width .25s, margin .25s, opacity .25s;
  background: linear-gradient(135deg, #f6d58a, #c8891c); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7l5 4 5-7 5 7 5-4-2 12H4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7l5 4 5-7 5 7 5-4-2 12H4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.mm-club .mm-btn-tab:hover > span:first-child::before, .mm-club .mm-btn-tab:focus-visible > span:first-child::before, .mm-club .mm-btn-tab[aria-current="page"] > span:first-child::before { width: 15px; margin-right: 7px; opacity: 1; }
.site-nav .mm-club .mm-btn-tab:hover, .site-nav .mm-club .mm-btn-tab:focus-visible { box-shadow: 0 10px 26px -12px rgba(240,184,74,.75) !important; }
.site-nav .mm-club .mm-btn-tab:active { transform: scale(.96); }
.site-nav .mm-club .mm-btn-tab:active::after { animation: mmClubPulse .6s ease-out; }
@keyframes mmClubPulse { from { box-shadow: 0 0 0 0 rgba(240,184,74,.6); } to { box-shadow: 0 0 0 14px rgba(240,184,74,0); } }
:root[data-theme="light"] .site-nav .mm-club .mm-btn-tab:hover, :root[data-theme="light"] .site-nav .mm-club .mm-btn-tab:focus-visible { background: linear-gradient(180deg, #fffaf0, #fff3dc) !important; }
:root[data-theme="light"] .mm-club .mm-btn-tab:hover > span:first-child, :root[data-theme="light"] .mm-club .mm-btn-tab[aria-current="page"] > span:first-child { background-image: linear-gradient(100deg, #6b4a0c, #b07a1c 45%, #e0a43a 52%, #7a5512 75%); }
@media (prefers-reduced-motion: reduce) { .mm-club .mm-btn-tab::before, .mm-club .mm-btn-tab:active::after { animation: none !important; } }


/* Menu Resources: the newest news item / article big on the left (tabs switch), the sections as a list on the right */
.mm-res { width: 860px; }
.mm-res-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.mm-rfeat { position: relative; min-height: 250px; border-radius: 16px; overflow: hidden; background: #141a26 center/cover; }
.mm-rfeat-tabs { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; gap: 6px; }
.mm-rfeat-tabs button { padding: 5px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 600 12px var(--font-body); cursor: pointer; transition: background .2s, color .2s; }
.mm-rfeat-tabs button:hover { background: rgba(255,255,255,.3); }
.mm-rfeat-tabs button[aria-selected="true"] { background: #fff; color: #0c0c0d; }
.mm-rfeat-link { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: #fff !important; text-decoration: none; }
.mm-rfeat-link em { align-self: flex-start; margin-bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgb(255, 92, 92); font-style: normal; font-size: 11px; font-weight: 700; }
.mm-rfeat-link em:empty { display: none; }
.mm-rfeat-link b { white-space: normal; font: 600 19px/1.25 var(--font-display); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mm-rfeat-link span { margin-top: 10px; font-size: 13px; font-weight: 600; opacity: .85; transition: opacity .2s; }
.mm-rfeat-link:hover span { opacity: 1; }
.mm-rlist { display: grid; gap: 4px; align-content: start; }
.mm-rrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--text) !important; text-decoration: none; transition: background .15s; }
.mm-rrow:hover { background: var(--surface-2); }
.mm-rrow .mm-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--acc), .14); color: rgb(var(--acc)); }
.mm-rrow .mm-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-rrow-t { flex: 1; min-width: 0; }
.mm-rrow-t b { display: block; font-size: 15px; font-weight: 600; }
.mm-rrow-t small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-rarrow { color: var(--muted); transition: transform .2s, color .2s; } .mm-rrow:hover .mm-rarrow { transform: translateX(3px); color: var(--text); }
.mm-rcount { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--text); color: var(--bg, #0c0c0d); font-size: 11px; font-weight: 700; }
.mm-rfaq { display: block; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--text) !important; text-decoration: none; }
.mm-rfaq b { display: block; margin-bottom: 3px; font-size: 13px; }
.mm-rfaq small { white-space: normal; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
:root[data-theme="light"] .mm-rrow:hover, :root[data-theme="light"] .mm-rfaq { background: #f4f3f0; }
:root[data-theme="light"] .mm-rcount { background: #0c0c0d; color: #fff; }
@media (max-width: 1180px) { .mm-res { width: auto; } .mm-res-grid { grid-template-columns: 1fr; } .mm-rfeat { min-height: 190px; } }
.site-nav.is-tight .mm-res-grid { grid-template-columns: 1fr; }

/* Day colours: the footer is black, so the newsletter field is a light pill on it (white field, black text, the gold button) */
:root[data-theme="light"] .sf-news-row { background: #fff !important; border: 0 !important; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
:root[data-theme="light"] .site-footer.sf .sf-news-row input { background: none !important; border: 0 !important; color: #0c0c0d !important; }
:root[data-theme="light"] .sf-news-row input::placeholder { color: #8a8a90; }
:root[data-theme="light"] .sf-news-row:focus-within { box-shadow: 0 0 0 4px rgba(240,184,74,.35) !important; }

/* Day colours: the "You are in" pill icon (svg) stays white on its black disc — the invert filter is only for <img> icons */
:root[data-theme="light"] .sec-pill-ic svg { filter: none !important; }

/* Cookie notice (js/consent.js): a card bottom-right with a cookie icon; Reject and Accept the same size side by side;
   "Settings" opens the two kinds with switches */
.ck { position: fixed; right: 20px; bottom: 20px; z-index: 9990; width: min(380px, calc(100vw - 32px)); padding: 20px; border-radius: 22px; color: var(--text); font-size: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 50%), var(--surface); border: 1px solid rgba(240,184,74,.28);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.75), 0 0 0 6px rgba(240,184,74,.05); animation: ckIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes ckIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ck-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ck-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(240,184,74,.14); color: var(--gold); }
.ck-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-t { margin: 0; font: 600 17px var(--font-display); letter-spacing: -.01em; }
.ck-p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.ck-p a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(240,184,74,.6); text-underline-offset: 3px; }
.ck-opts { display: none; gap: 8px; margin-bottom: 14px; }
.ck.is-settings .ck-opts { display: grid; }
.ck-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); cursor: pointer; }
.ck-opt b { display: block; font-size: 14px; } .ck-opt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ck-opt input { flex: none; width: 38px; height: 22px; margin: 0; appearance: none; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .2s; }
.ck-opt input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ck-opt input:checked { background: #22c55e; } .ck-opt input:checked::after { transform: translateX(16px); }
.ck-opt input:disabled { opacity: .55; cursor: default; }
.ck-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-b { height: 42px; padding: 0 14px; border-radius: 999px; border: 0; font: 600 14px var(--font-body); cursor: pointer; transition: transform .15s, filter .15s; }
.ck-b:hover { transform: translateY(-1px); filter: brightness(1.06); }
[data-ck-no] { background: rgba(var(--fg), .1); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
[data-ck-yes] { background: linear-gradient(180deg, #f6cf7d, #f0b84a); color: #1a1205; }
.ck-link { grid-column: 1 / -1; justify-self: center; margin-top: 4px; padding: 4px 8px; border: 0; background: none; color: var(--muted); font: 500 13px var(--font-body); cursor: pointer; }
.ck-link:hover { color: var(--text); }
.ck-save { display: none; }
.ck.is-settings .ck-save { display: block; grid-column: 1 / -1; background: var(--text); color: var(--bg, #0b1020); }
.ck.is-settings .ck-link { display: none; }
@media (max-width: 560px) { .ck { right: 16px; left: 16px; bottom: 16px; width: auto; } }
:root[data-theme="light"] .ck { background: #fff; border-color: rgba(12,12,13,.08); box-shadow: 0 30px 70px -28px rgba(12,12,13,.4); }
:root[data-theme="light"] .ck-ic { background: #0c0c0d; color: #fff; }
:root[data-theme="light"] [data-ck-no] { background: #f1f0ec; color: #0c0c0d; box-shadow: none; }
:root[data-theme="light"] [data-ck-yes] { background: #0c0c0d; color: #fff; }
:root[data-theme="light"] .ck-opt { background: #f7f6f3; border-color: rgba(12,12,13,.06); }
:root[data-theme="light"] .ck.is-settings .ck-save { background: #0c0c0d; color: #fff; }
.sf-bottom button[data-cookie-settings], .sf-bottom a[data-cookie-settings] { cursor: pointer; }

/* 404 page: text on the left, the week's most viewed posts on the right ("This page doesn't exist. These posts do.") */
.nf { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 48px; min-height: 70vh; padding: 140px 24px 80px; }
.nf-code { margin: 0; font: 700 26px var(--font-display); letter-spacing: .02em; color: var(--gold); }
.nf h1 { margin: 8px 0 14px; font: 700 clamp(34px, 4.4vw, 52px)/1.05 var(--font-display); letter-spacing: -0.03em; }
.nf-sub { margin: 0 0 24px; max-width: 440px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.nf-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.nf-more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; font-size: 14px; }
.nf-more a { color: var(--muted); } .nf-more a:hover { color: var(--text); }
.nf-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nf-post { position: relative; aspect-ratio: 9 / 14; border-radius: 18px; overflow: hidden; background: #111 center / cover; color: #fff !important; text-decoration: none; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); transition: transform .25s; }
.nf-post:nth-child(2) { transform: translateY(-18px); }
.nf-post:hover { transform: translateY(-6px); } .nf-post:nth-child(2):hover { transform: translateY(-24px); }
.nf-post::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.82)); }
.nf-post span { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-post em { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-style: normal; font-size: 12px; font-weight: 700; }
.nf-cap { margin: 16px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
@media (max-width: 860px) { .nf { grid-template-columns: 1fr; gap: 32px; padding-top: 120px; } .nf-post:nth-child(2) { transform: none; } }


/* Sign-up: the plan picked on pricing as a small card (icon, plan, billing + free trial tags, "Change") */
.auth-plan:not([hidden]) { display: flex !important; align-items: center; gap: 14px; padding: 14px 16px !important; border-radius: 16px !important; text-align: left !important;
  background: linear-gradient(180deg, rgba(240, 184, 74, .1), rgba(240, 184, 74, .03)) !important; border: 1px solid rgba(240, 184, 74, .35) !important; }
.auth-plan-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(180deg, #ffe7ad, #f4c463 45%, #d79a2b); color: #1a1205; }
.auth-plan-ic svg { width: 20px; height: 20px; fill: currentColor; }
.auth-plan-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.auth-plan-t small { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.auth-plan-t b { color: var(--text) !important; font: 600 15px/1.3 var(--font-display); }
.auth-plan-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.auth-plan-tags i { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--muted); font-style: normal; font-size: 12px; font-weight: 600; }
.auth-plan-tags i.is-trial { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .35); color: #4ade80; }
.auth-plan-x { flex: none; align-self: flex-start; color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-plan-x:hover { color: var(--gold); }

/* Log in → "Forgot your password?" as its own step (js/signup.js): title, one line, the email, one button; then "check your inbox" */
.auth-forgot { display: grid; gap: 14px; }
.auth-forgot form { display: grid; gap: 14px; }
.auth-forgot-t { margin: 0; font: 600 20px/1.2 var(--font-display); color: var(--text); text-align: center; }
.auth-forgot-sub { margin: -6px 0 4px; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
.auth-forgot-sub b { color: var(--text); }
.auth-sent { display: grid; justify-items: center; gap: 12px; text-align: center; }
.auth-sent-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(34, 197, 94, .14); color: #4ade80; box-shadow: 0 0 0 6px rgba(34, 197, 94, .06); }
.auth-sent-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-back { justify-self: center; margin-top: 2px; padding: 6px 10px; border: 0; background: none; color: var(--muted); font: 600 13.5px var(--font-body); cursor: pointer; }
.auth-back:hover { color: var(--text); }

/* Content Library without a plan (js/library-lock.js): posts blurred; a card centred on the screen — real posts and the
   message on the left, the plans (one click to start the trial) on the right */
.lib-locked .feed > :not(.lib-lock) { filter: blur(10px) saturate(.8); opacity: .55; pointer-events: none; user-select: none; }
.lib-lock { position: fixed; z-index: 60; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr 1fr; width: min(840px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto;
  border-radius: 24px; background: var(--surface); border: 1px solid rgba(240,184,74,.35); box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 8px rgba(240,184,74,.05); }
.lib-lock-vis { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 380px; padding: 30px; color: #fff;
  background: linear-gradient(180deg, rgba(8,12,24,.15) 15%, rgba(8,12,24,.95) 78%), url("../assets/admin-login.webp") center / cover; }
.lib-lock-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: auto; border-radius: 50%; border: 1px solid rgba(240,184,74,.6); background: rgba(8,12,24,.5); color: var(--gold); box-shadow: 0 0 40px -8px rgba(240,184,74,.5); }
.lib-lock-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lib-lock-vis h2 { margin: 0; font: 600 clamp(24px, 3vw, 30px)/1.12 var(--font-display); letter-spacing: -.02em; }
.lib-lock-vis p { margin: 0; color: #c9d1e0; font-size: 15px; line-height: 1.5; }
.lib-lock-plans { display: grid; gap: 10px; align-content: center; padding: 26px; }
.lib-lock-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.lib-lock-plan.is-best { border-color: rgba(240,184,74,.55); background: linear-gradient(180deg, rgba(240,184,74,.08), transparent 60%), var(--surface-2); }
.lib-lock-plan span { min-width: 0; } .lib-lock-plan b { display: block; font-size: 14.5px; line-height: 1.3; } .lib-lock-plan small { color: var(--muted); font-size: 12.5px; }
.lib-lock-note { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
@media (max-width: 720px) { .lib-lock { grid-template-columns: 1fr; } .lib-lock-vis { min-height: 220px; } }
:root[data-theme="light"] .lib-lock { background: #fff; border-color: rgba(240,184,74,.5); box-shadow: 0 30px 70px -30px rgba(12,12,13,.35); }
:root[data-theme="light"] .lib-lock-plan { background: #f7f6f3; border-color: rgba(12,12,13,.06); }

/* Content Library → "My space" folds its three buttons away to the right (js/my-space.js); the arrow shows the way */
.my-space-t { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; }
.my-space-t:hover { color: var(--text); }
.my-space-t svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(0deg); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.my-space.is-closed .my-space-t svg { transform: rotate(180deg); }
.my-space-t.is-kick svg { animation: myKick .45s ease; }
@keyframes myKick { 40% { translate: 5px 0; } }
.my-space-btns { max-width: 900px; overflow: hidden; transition: max-width .4s cubic-bezier(.2,.8,.2,1), opacity .25s, transform .4s cubic-bezier(.2,.8,.2,1); }
.my-space.is-closed .my-space-btns { max-width: 0; max-height: 0; opacity: 0; transform: translateX(40px); pointer-events: none; }

/* Nav logo never squashed: it keeps its proportions and size, the menu gives way instead */
.site-nav .brand { flex: none; }
.site-nav .brand img.brand-logo { flex-shrink: 0; width: auto !important; max-width: none; object-fit: contain; }


/* Saved boards without a plan (js/saved-lock.js): an invitation card with the plans, then three example boards */
.sv-locked [data-saved] { display: none !important; }
.sv-lock { padding: 120px 0 80px; display: grid; justify-items: center; gap: 18px; }
.sv-lock-card { display: grid; justify-items: center; gap: 12px; width: min(560px, 100%); padding: 32px 28px; border-radius: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(240,184,74,.08), transparent 50%), var(--surface); border: 1px solid rgba(240,184,74,.35); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.sv-lock-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(180deg, #ffe7ad, #f4c463 45%, #d79a2b); color: #1a1205; }
.sv-lock-ic svg { width: 24px; height: 24px; fill: currentColor; }
.sv-lock-card h1 { margin: 4px 0 0; font: 600 clamp(26px, 3.2vw, 34px)/1.15 var(--font-display); letter-spacing: -.02em; }
.sv-lock-card p { margin: 0 0 6px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.sv-lock-card .pp-plans { text-align: left; }
.sv-lock-eg { margin: 22px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sv-lock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(900px, 100%); opacity: .75; pointer-events: none; }
.sv-lock-board { position: relative; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); }
.sv-lock-board em { position: absolute; z-index: 1; top: 20px; left: 20px; padding: 3px 9px; border-radius: 999px; background: rgba(8,12,24,.7); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sv-lock-pics { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 170px; margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
.sv-lock-pics i { background: #222 center / cover; } .sv-lock-pics i:first-child { grid-row: span 2; }
.sv-lock-board b { display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; } .sv-lock-board small { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .sv-lock-grid { grid-template-columns: 1fr; } .sv-lock { padding-top: 100px; } }
:root[data-theme="light"] .sv-lock-card, :root[data-theme="light"] .sv-lock-board { background: #fff; border-color: rgba(12,12,13,.08); }

/* Nav on a crowded computer screen (js/main.js "is-snug"): tighter tabs, no name next to the avatar, no "View as" label —
   so the full menu stays instead of the menu button */
.site-nav.is-snug .mm-btn-tab { padding-left: 10px !important; padding-right: 10px !important; }
.site-nav.is-snug .nav-links, .site-nav.is-snug .mm { gap: 0 !important; }
.site-nav.is-snug [data-user-name] { display: none !important; }
.site-nav.is-snug .view-as > span { display: none; }
.site-nav.is-snug .view-as select { max-width: 150px; }
.site-nav.is-snug .nav-actions { gap: 6px !important; }

/* Content Library → "My space" centred: the title over the middle of its buttons */
.my-space { align-items: center; }
.my-space-t { align-self: center; }

/* Locked library plans: "arrow in a circle" buttons (like the menu's "Try it free") — white + gold circle on the recommended */
.lock-go { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px 0 15px; border: 0; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text);
  font: 700 13px var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background .2s; }
.lock-go i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); font-style: normal; transition: transform .2s; }
.lock-go:hover { background: rgba(255,255,255,.12); } .lock-go:hover i { transform: translateX(2px) rotate(-45deg); }
.lock-go.is-best { background: #f1f4f9; color: #0b1020; } .lock-go.is-best i { background: #f0b84a; color: #1a1205; } .lock-go.is-best:hover { background: #fff; }
:root[data-theme="light"] .lock-go { background: #f1f0ec; color: #0c0c0d; } :root[data-theme="light"] .lock-go.is-best { background: #0c0c0d; color: #fff; }

/* "My space" folded: the filter bar (Get inspired by, Match Day, Brands & sponsors) takes the whole width */
.lib-head:has(.my-space.is-closed) .lfb-row.lfb-glass { max-width: none; }

/* Locked library: the reassurances as three small ticks, and "Are you a club?" as a quiet row to My Club */
.lib-lock-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.lib-lock-perks li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.lib-lock-perks li::before { content: "✓"; color: #4ade80; font-weight: 800; font-size: 12px; }
.lib-lock-club { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 4px 0; border-top: 1px solid var(--line-soft); color: var(--text) !important; text-decoration: none; }
.lib-lock-club-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(240,184,74,.12); color: var(--gold); }
.lib-lock-club-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.lib-lock-club > span:nth-child(2) { flex: 1; min-width: 0; } .lib-lock-club b { display: block; font-size: 13.5px; } .lib-lock-club small { color: var(--muted); font-size: 12.5px; }
.lib-lock-club i { font-style: normal; color: var(--muted); transition: transform .2s, color .2s; } .lib-lock-club:hover i { transform: translateX(3px); color: var(--gold); }



/* Menu "Pricing" ↔ "7 days free": the two take turns in the same place (a soft flip every few seconds) */
.mm-btn-tab.mm-flip { display: grid !important; grid-template-areas: "x"; place-items: center; }
.mm-btn-tab.mm-flip > * { grid-area: x; margin: 0 !important; }
@property --flip { syntax: "<number>"; inherits: true; initial-value: 0; }
.mm-btn-tab.mm-flip { animation: mmFlip 6s ease-in-out infinite; }   /* one clock for both words: always in step */
.mm-btn-tab.mm-flip > span:first-child { opacity: calc(1 - var(--flip)); transform: translateY(calc(var(--flip) * -60%)); }
.mm-btn-tab.mm-flip > .mm-badge { opacity: var(--flip); transform: translateY(calc((1 - var(--flip)) * 60%)); }
@keyframes mmFlip { 0%, 42% { --flip: 0; } 50%, 92% { --flip: 1; } 100% { --flip: 0; } }
.mm-btn-tab.mm-flip:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mm-btn-tab.mm-flip { animation: none; } .mm-btn-tab.mm-flip > .mm-badge { display: none; } }
/* "7 days free" in the menu: solid green (free, go) with a pulsing dot, so it draws the eye and stands apart from the gold */
.mm-btn-tab.mm-flip > .mm-badge { height: 26px; padding: 0 12px 0 10px; gap: 7px; background: #22c55e; color: #052e16; font: 800 11.5px var(--font-body); letter-spacing: .01em; box-shadow: 0 6px 18px -6px rgba(34, 197, 94, .9); }
.mm-btn-tab.mm-flip > .mm-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #052e16; animation: mmPulse 1.6s infinite; }
@keyframes mmPulse { 0% { box-shadow: 0 0 0 0 rgba(5, 46, 22, .6); } 70% { box-shadow: 0 0 0 7px rgba(5, 46, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(5, 46, 22, 0); } }

/* My Club for non-clients (js/my-club.js offer): the locked-library card, as the premium plan — gold crown, what's included, book a demo */
.mc-offer-crown svg { fill: currentColor; stroke: none; }
.mc-offer-tag { margin: 0; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mc-offer-list { display: grid; gap: 0; margin: 2px 0 8px; padding: 0; list-style: none; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); overflow: hidden; }
.mc-offer-list li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.mc-offer-list li + li { border-top: 1px solid var(--line-soft); }
.mc-offer-list b { color: var(--text); font-weight: 700; }
.mc-offer-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(240,184,74,.14); color: var(--gold); }
.mc-offer-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] .mc-offer-list { background: #f7f6f3; border-color: rgba(12,12,13,.06); }
.mc-offer-go { justify-self: start; height: 44px; padding-left: 18px; font-size: 14px; }
.mc-offer .lib-lock-perks { justify-content: flex-start; }


/* Menu → My Club panel: the premium plan for clubs and an invitation to try it 7 days */
.mm-clubp { display: grid; grid-template-columns: 260px 1fr; gap: 0; width: 640px; padding: 0 !important; overflow: hidden; }
.mm-clubp-vis { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 230px; padding: 22px; color: #fff;
  background: linear-gradient(180deg, rgba(8,12,24,.1) 15%, rgba(8,12,24,.95) 80%), url("../assets/admin-login.webp") center / cover; }
.mm-clubp-crown { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: auto; border-radius: 50%; background: rgba(8,12,24,.55); box-shadow: inset 0 0 0 1px rgba(240,184,74,.6); }
.mm-clubp-crown svg { width: 19px; height: 19px; fill: #f0b84a; filter: drop-shadow(0 0 6px rgba(240,184,74,.6)); }
.mm-clubp-t { margin: 0; font: 600 19px/1.2 var(--font-display); } .mm-clubp-s { margin: 0; color: #c9d1e0; font-size: 13px; line-height: 1.45; }
.mm-clubp-body { display: grid; align-content: center; gap: 14px; padding: 22px 24px; }
.mm-clubp-body ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mm-clubp-body li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--text); } .mm-clubp-body li::before { content: "✓"; color: var(--gold); font-weight: 800; }
.mm-clubp-go { justify-self: start; }
@media (max-width: 1180px) { .mm-clubp { width: auto; grid-template-columns: 1fr; } .mm-clubp-vis { min-height: 150px; } }
/* My Club tab: a small gold crown before the label (premium) */
.mm-crown { width: 14px; height: 14px; fill: #f0b84a; filter: drop-shadow(0 0 4px rgba(240,184,74,.45)); flex: none; }
/* My Club offer: the SCP box in 3D (front and spine from the product photo, a designed back): it floats, sways and every few
   seconds makes a full turn on itself, light sweeping across the front, over a night sky of drifting stars (js/my-club.js stars) */
.mc-offer .lib-lock-vis { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(55% 40% at 50% 40%, rgba(240,184,74,.22), transparent 70%), radial-gradient(100% 80% at 50% 35%, #2a3b6b, #16213f 60%, #0f1730); }
.mc-stars { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mc-offer .lib-lock-vis::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(8,12,24,.92) 85%); }
.mc-offer .lib-lock-ic { margin-bottom: 0; }
.mc-box { --w: 168px; --h: 274px; --d: 54px; position: relative; margin: auto; padding: 22px 0 34px; perspective: 1100px; }
.mc-box-fl { animation: mcFloat 4s ease-in-out infinite; transform-style: preserve-3d; }
.mc-box-in { position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; animation: mcTurn 11s infinite; }
.mc-box-sh { position: absolute; left: 50%; bottom: 8px; width: calc(var(--w) * 1.2); height: 20px; margin-left: calc(var(--w) * -.6); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); animation: mcShadow 4s ease-in-out infinite; }
.mc-box i { position: absolute; top: 0; left: 0; width: var(--w); height: var(--h); backface-visibility: hidden; background: #131a31; font-style: normal; }
.mc-box i::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mc-box .f { background: url("../assets/box-front.webp") center / 100% 100%; transform: translateZ(calc(var(--d) / 2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mc-box .f::after { background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.28) 47%, rgba(255,255,255,.05) 53%, transparent 62%) 0 0 / 320% 100%; animation: mcGloss 5.5s ease-in-out infinite; }
.mc-box .l, .mc-box .r { left: calc((var(--w) - var(--d)) / 2); width: var(--d); background: url("../assets/box-spine.webp") center / 100% 100%; }
.mc-box .l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); } .mc-box .l::after { background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.1)); }
.mc-box .r { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); } .mc-box .r::after { background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.4)); }
.mc-box .t, .mc-box .u { top: calc((var(--h) - var(--d)) / 2); height: var(--d); background: linear-gradient(90deg, #1a2342, #0f1530); }
.mc-box .t { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.mc-box .u { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #070a14; }
.mc-box .b { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 20px 14px 0; transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: radial-gradient(80% 45% at 50% 30%, rgba(240,184,74,.2), transparent 70%), linear-gradient(160deg, #1d2748, #0d1229 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mc-box .b img { width: 78%; height: auto; }
.mc-box-st { display: grid; gap: 6px; width: 100%; margin-top: 14px; }
.mc-box-st span { display: flex; flex-direction: column; align-items: center; padding-top: 6px; border-top: 1px solid rgba(240,184,74,.25); color: #c9d1e0; font: 600 8.5px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.mc-box-st b { font: 700 17px/1.1 var(--font-display); letter-spacing: -.01em; text-transform: none; background: linear-gradient(180deg, #ffe7ad, #f4c463 45%, #d79a2b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-box-band { position: absolute; left: 0; right: 0; bottom: 16px; padding: 8px 6px; background: linear-gradient(180deg, #ffe7ad, #f4c463 45%, #d79a2b); color: #141a33; font: 800 8.5px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
/* sway to one side and back, then a full turn on itself (ending where it started) */
@keyframes mcTurn {
  0% { transform: rotateX(-9deg) rotateY(-30deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  20% { transform: rotateX(-6deg) rotateY(22deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  40% { transform: rotateX(-9deg) rotateY(-30deg); animation-timing-function: cubic-bezier(.7,0,.25,1); }
  72%, 100% { transform: rotateX(-9deg) rotateY(330deg); }
}
@keyframes mcFloat { 50% { transform: translateY(-12px); } }
@keyframes mcShadow { 50% { transform: scale(.78); opacity: .55; } }
@keyframes mcGloss { 0%, 15% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
@media (max-width: 720px) { .mc-box { --w: 120px; --h: 196px; --d: 38px; padding: 12px 0 26px; } .mc-box .b { padding-top: 16px; } .mc-box-st { margin-top: 12px; gap: 5px; } .mc-box-st span:nth-child(3) { display: none; } .mc-box-st b { font-size: 14px; } .mc-box-st span, .mc-box-band { font-size: 6.5px; } .mc-box-band { bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .mc-box-fl, .mc-box-sh, .mc-box .f::after { animation: none; } .mc-box-in { animation: none; transform: rotateX(-9deg) rotateY(-28deg); } }
/* Locked library card: the posts behind the message scroll slowly up and down, as if someone were browsing the feed */
.lib-lock:not(.mc-offer) .lib-lock-vis { position: relative; overflow: hidden; isolation: isolate; background: #080c18; }
.lib-lock:not(.mc-offer) .lib-lock-vis::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(8,12,24,.15) 15%, rgba(8,12,24,.95) 78%); }
.lib-lock:not(.mc-offer) .lib-lock-vis::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 160%; background: url("../assets/admin-login.webp") center / cover; animation: lockScroll 16s ease-in-out infinite alternate; }
@keyframes lockScroll { to { transform: translateY(-37.5%); } }
@media (prefers-reduced-motion: reduce) { .lib-lock:not(.mc-offer) .lib-lock-vis::before { animation: none; } }
/* Light theme: the text over the dark photos (My Club menu panel, locked library card) stays light, not the light theme's grey */
:root[data-theme="light"] .mm-clubp-vis .mm-clubp-t, :root[data-theme="light"] .lib-lock-vis h2 { color: #fff; }
:root[data-theme="light"] .mm-clubp-vis .mm-clubp-s, :root[data-theme="light"] .lib-lock-vis p { color: #c9d1e0; }
/* Light theme: the icon in the circle (crown, padlock) sits on a dark photo, so it keeps the real gold */
:root[data-theme="light"] .lib-lock-ic { color: #f0b84a; border-color: rgba(240,184,74,.7); box-shadow: 0 0 40px -8px rgba(240,184,74,.6); }
/* Saved boards without a plan: "Try it free for 7 days" on its own line, under the button */
.sv-lock-card .sv-lock-free { margin: 10px 0 0; font-size: 13px; }
/* Menu Resources: "Saved boards" stands out a little, in the Content Library's gold (gold icon, soft gold row, gold count) */
.mm-rrow.mm-rrow-gold { background: linear-gradient(90deg, rgba(240,184,74,.1), rgba(240,184,74,.02)); box-shadow: inset 0 0 0 1px rgba(240,184,74,.28); }
.mm-rrow.mm-rrow-gold:hover { background: linear-gradient(90deg, rgba(240,184,74,.16), rgba(240,184,74,.05)); }
.mm-rrow-gold .mm-ic { background: linear-gradient(180deg, #ffe7ad, #f4c463 45%, #d79a2b); color: #1a1205; }
.mm-rrow-gold .mm-rcount { background: linear-gradient(90deg, #d99a2b, #f0b84a); color: #1a1205; }
:root[data-theme="light"] .mm-rrow.mm-rrow-gold { background: linear-gradient(90deg, #fff6e2, #fffbf2); box-shadow: inset 0 0 0 1px rgba(215,154,43,.35); }
/* Saved boards: the boards' names in capitals (as in the library's side panel) */
.sv3-b-meta > b { text-transform: uppercase; letter-spacing: .04em; }
/* Saved boards: the networks' icons a little bigger and all in one colour (the logo used as a mask) */
.sv3-net { flex: none; width: 15px; height: 15px; background: var(--text); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
/* My Club (members): the filters in the Content Library's glass bar — Club · Players · Sponsors (whose posts) and
   Section · Team — each opening its panel under the bar; the club itself as a thin strip above the posts */
.my-club-page .lib-head .mc-crumb { display: block; min-width: 0; padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.mcb-row .lfb-btn.is-cur .lfb-tx b { color: var(--gold); }
.mcb-row .lfb-btn.is-cur::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.mcb-pan { position: absolute; z-index: 30; left: 14px; right: 14px; top: calc(100% + 6px); max-height: min(62vh, 560px); overflow-y: auto; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 30px 60px -28px rgba(0,0,0,.7); animation: mcbIn .18s ease; }
@keyframes mcbIn { from { opacity: 0; transform: translateY(-4px); } }
.mcb-pan .mc-people { margin: 0; }
.mcb-k { margin: 0 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mcb-pan .mc-seg, .mcb-pan .mc-teams { display: flex; flex-wrap: wrap; gap: 8px; }
.mcb-pan .mc-hint { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.my-club-page .mc-strip { padding: 10px 14px; }
.mc-strip .mc-top { align-items: center; flex-wrap: wrap; }
.mc-strip .mc-logo { width: 46px !important; height: 46px !important; border-radius: 13px !important; }
.mc-strip .mc-title h1 { font-size: clamp(19px, 1.8vw, 23px) !important; }
.mc-strip .mc-profiles { margin: 0 0 0 8px; }
.mc-strip .mc-side { margin-left: auto; }
@media (max-width: 960px) {
  .my-club-page .lib-head .mc-crumb { display: block; padding: 10px 12px; contain: inline-size; }   /* its width never comes from the bar (which scrolls) */
  .mcb-row { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; grid-template-columns: repeat(var(--n), minmax(max-content, 1fr)) !important; }
  .mcb-row .lfb-lens { display: none; }
  .mcb-row .lfb-btn.is-open { background: rgba(var(--fg), .08); }
  .mcb-pan { left: 12px; right: 12px; }
  .mc-strip .mc-profiles { display: none; }
}
/* Menu "Saved boards": the bookmark filled, as on the saved boards page (the thin outline looked broken at this size) */
.mm-rrow-gold .mm-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px -8px rgba(240,184,74,.8); }
.mm-rrow-gold .mm-ic svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
/* Resources: Blog · Social News · Jobs as tabs above each page — they also say where you are (no "You are in" pill):
   plain text on a thin line, the current one in the text colour with a gold underline and a gold icon; a live dot on
   Social News (updated every day) */
.res-tabs { display: flex; justify-content: center; padding-top: 30px; }
.res-tabs-row { display: inline-flex; gap: 34px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.res-tabs-row a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 2px 14px; color: var(--muted); font: 600 16px var(--font-display); text-decoration: none; white-space: nowrap; transition: color .2s; }
.res-tabs-row a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.res-tabs-row a:hover { color: var(--text); }
.res-tabs-row a[aria-current="page"] { color: var(--text); }
.res-tabs-row a[aria-current="page"] svg { color: var(--gold); }
.res-tabs-row a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #ffe7ad, #d79a2b); }
.res-live { width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: #22c55e; animation: mmPulse 1.6s infinite; }
.res-tabs + .blog-hero { padding-top: 34px; }
@media (max-width: 720px) {
  .res-tabs { padding-top: 18px; }
  .res-tabs-row { gap: 20px; }
  .res-tabs-row a { padding-bottom: 12px; font-size: 14.5px; } .res-tabs-row a svg { display: none; }
  .res-tabs + .blog-hero { padding-top: 22px; }
}

/* Jobs (jobs.html): the filters and one row per offer — logo, company and when, the title, a short summary, tags, Apply */
.jobs-filters { display: grid; gap: 12px; margin-bottom: 22px; }
.jobs-filters .f-row { display: flex; flex-wrap: wrap; gap: 8px; }
.jobs-list { display: grid; gap: 12px; }
.jobs-loading { color: var(--muted); text-align: center; padding: 40px 0; }
.job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); transition: border-color .2s, transform .2s; }
.job:hover { border-color: rgba(240,184,74,.45); transform: translateY(-1px); }
.job-logo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-soft); font: 700 16px var(--font-display); color: var(--gold); }
.job-logo img { width: 100%; height: 100%; object-fit: cover; }
.job-co { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.job-co span { color: var(--muted-dim); font-weight: 500; }
.job h2 { margin: 3px 0 0; font: 600 19px/1.25 var(--font-display); letter-spacing: -.01em; }
.job-sum { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.job-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.job-tags span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.job-tags .is-area { background: var(--gold-tint); color: var(--gold); }
.job-go { white-space: nowrap; }
@media (max-width: 720px) {
  .job { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 14px; }
  .job-logo { width: 46px; height: 46px; align-self: start; }
  .job-go { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
/* Social News platform filter: the chosen tile cleaner and lighter — a soft glow instead of the strong halo, and on "All"
   flat light gold with a light icon tile (no dark brown square) */
.news-filters .ptile[aria-pressed="true"] { transform: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 12px 26px -16px var(--c); }
.news-filters .ptile[aria-pressed="true"]::before { opacity: 0; }
.news-filters .ptile[data-platform="all"][aria-pressed="true"] { background: linear-gradient(180deg, #ffe7ad, #f6cd74 55%, #efb64a); border-color: rgba(255, 231, 173, .9);
  box-shadow: 0 0 0 1px rgba(255, 231, 173, .35), 0 12px 26px -14px rgba(240, 184, 74, .85); color: #1a1205; }
.news-filters .ptile[data-platform="all"][aria-pressed="true"] img { background: transparent; border-color: transparent; box-shadow: none; animation: none; opacity: .85; }
/* Social News: the home's SCP video in the Content Library promo (poster + "Play Now", js/hero-video.js) */
.promo-video { position: relative; aspect-ratio: 16 / 9; }
.promo-video > img { object-position: center; }
.promo-video .play-btn { white-space: nowrap; }
.promo-video .play-btn img { width: 13px; height: 14px; object-fit: contain; }
/* Blog categories: outlined chips (secondary to the Resources tabs above); the chosen one in gold with a dot */
.blog-tabs { gap: 10px; margin-top: 36px; }
.blog-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--fg), .02); color: var(--muted); font: 600 14px var(--font-body); transition: color .2s, border-color .2s, background .2s; }
.blog-tabs button:hover { color: var(--text); border-color: rgba(var(--fg), .22); background: rgba(var(--fg), .05); }
.blog-tabs button[aria-selected="true"] { color: var(--gold); border-color: rgba(240, 184, 74, .6); background: var(--gold-tint); box-shadow: 0 6px 18px -12px rgba(240, 184, 74, .8); }
.blog-tabs button[aria-selected="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (max-width: 720px) { .blog-tabs { gap: 8px; margin-top: 26px; } .blog-tabs button { height: 36px; padding: 0 14px; font-size: 13px; } }
/* Jobs: a big search (job, company, city) with a clear button and how many jobs it finds, the areas below */
.jobs-bar { display: flex; align-items: center; gap: 16px; }
.jobs-q { flex: 1; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 8px 0 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.jobs-q:focus-within { border-color: rgba(240,184,74,.6); box-shadow: 0 0 0 4px rgba(240,184,74,.12); }
.jobs-q svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.jobs-q input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--text); font: 500 16px var(--font-body); }
.jobs-q input::placeholder { color: var(--muted-dim); }
.jobs-q input::-webkit-search-cancel-button { display: none; }
.jobs-q-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--fg), .06); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.jobs-q-x:hover { color: var(--text); background: rgba(var(--fg), .12); }
.jobs-n { flex: none; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) { .jobs-bar { flex-direction: column; align-items: stretch; gap: 8px; } .jobs-q { height: 50px; } .jobs-n { padding-left: 4px; } }

/* Jobs: room to breathe — the search centred and narrower, a clear gap under the intro, the areas centred under it */
.jobs-filters { max-width: 860px; margin: 44px auto 36px; gap: 18px; }
.jobs-filters .f-row[data-jobs-area] { justify-content: center; }
.jobs-list { max-width: 1040px; margin-inline: auto; }
@media (max-width: 720px) { .jobs-filters { margin: 28px auto 24px; gap: 14px; } .jobs-filters .f-row[data-jobs-area] { justify-content: flex-start; } }
/* Blog: the latest news as three cards with their photo on top */
.news-strip { gap: 18px; background: none; border: 0; box-shadow: none; }
.news-item { display: flex; flex-direction: column; padding: 0 0 24px; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.news-item + .news-item { border-left: 1px solid var(--line); }
.news-item:hover { background: var(--surface); border-color: rgba(240, 184, 74, .45); transform: translateY(-2px); }
.news-pic { display: block; aspect-ratio: 16 / 9; margin-bottom: 18px; background: var(--surface-2) url("../assets/pf-all.svg") center / 34px no-repeat; }
.news-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-item .news-meta, .news-item h3, .news-item p { padding-inline: 22px; }
.news-item h3 { margin-top: 12px; font-size: 21px; line-height: 1.2; }
.news-item p { margin-top: 10px; }
@media (max-width: 960px) { .news-strip { grid-template-columns: 1fr; } }
/* Light theme: the video's "Play" button keeps dark text on its white pill */
:root[data-theme="light"] .play-btn { color: #0b1020; }
/* Content Library: the filters' search as a pill (like the other buttons) with four real filters to try under it */
.lf-search { height: 44px; padding: 0 16px; gap: 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); transition: border-color .2s, box-shadow .2s, color .2s; }
.lf-search:hover { border-color: rgba(var(--fg), .22); }
.lf-search:focus-within { border-color: rgba(240, 184, 74, .65); color: var(--gold); box-shadow: 0 0 0 4px rgba(240, 184, 74, .12); }
.lf-search-ic { display: grid; place-items: center; flex: none; }
.lf-search-ic svg { width: 17px; height: 17px; stroke-width: 2.2; }
.lf-search input { font-size: 13.5px; font-weight: 500; }
.lf-search input::placeholder { color: var(--muted); }
.lf-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 4px 10px 0; min-height: 26px; }
.lf-sugg.is-in .lf-sugg-b { animation: lfSugg .45s ease both; }
.lf-sugg.is-in .lf-sugg-b:nth-child(2) { animation-delay: .06s; } .lf-sugg.is-in .lf-sugg-b:nth-child(3) { animation-delay: .12s; } .lf-sugg.is-in .lf-sugg-b:nth-child(4) { animation-delay: .18s; }
@keyframes lfSugg { from { opacity: 0; transform: translateY(4px); } }
.lf-sugg-b { height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(var(--fg), .04); color: var(--muted); font: 600 11.5px var(--font-body); white-space: nowrap; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.lf-sugg-b:hover { color: var(--gold); border-color: rgba(240, 184, 74, .5); background: var(--gold-tint); }
.lf-search:has(input:not(:placeholder-shown)) ~ .lf-sugg { display: none; }   /* typing: the results instead */
@media (prefers-reduced-motion: reduce) { .lf-sugg.is-in .lf-sugg-b { animation: none; } }
/* Filters panel, Sport: small buttons with the sport's icon (no cover photo), name and posts, a check when chosen */
.lfp-cards.lfp-cards-sport { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lfp-sport { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 34px 0 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.lfp-sport:hover { border-color: rgba(var(--fg), .22); transform: translateY(-1px); }
.lfp-sp-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(240, 184, 74, .12); color: var(--gold); }
.lfp-sp-ic .lf-i { width: 20px; height: 20px; }
.lfp-sport .lfp-meta { padding: 0; }
.lfp-sport .lfp-meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfp-sport .lfp-meta small { font-size: 11px; }
.lfp-sport .lfp-ck { top: 50%; right: 10px; transform: translateY(-50%); width: 18px; height: 18px; border-color: var(--line); background: transparent; }
.lfp-sport.is-on { border-color: var(--gold); background: linear-gradient(180deg, rgba(240, 184, 74, .1), transparent), var(--surface-2); }
.lfp-sport.is-on .lfp-sp-ic { background: linear-gradient(180deg, #ffe7ad, #f4c463 45%, #d79a2b); color: #1a1205; }
.lfp-sport.is-on .lfp-ck { background: var(--gold); border-color: var(--gold); }
.lfp-sport.is-on .lfp-ck .lf-i { opacity: 1; }
.lfp-sport.is-low { opacity: .6; } .lfp-sport.is-zero { opacity: .35; pointer-events: none; }

/* Filters panel, a group with one option (Memes, Media): the filter switched on and its five latest posts */
.lfp-single { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.lfp-single .lfp-ck { position: static; flex: none; width: 24px; height: 24px; border-color: var(--line); background: transparent; }
.lfp-single b { display: block; font-size: 14px; } .lfp-single small { color: var(--muted); font-size: 12px; }
.lfp-single:hover { border-color: rgba(240, 184, 74, .45); }
.lfp-single.is-on { border-color: var(--gold); background: linear-gradient(180deg, rgba(240, 184, 74, .1), transparent), var(--surface-2); }
.lfp-single.is-on .lfp-ck { background: var(--gold); border-color: var(--gold); } .lfp-single.is-on .lfp-ck .lf-i { opacity: 1; }
.lfp-late { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lfp-late-t { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--line-soft); overflow: hidden; }
.lfp-late-t em { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(8, 12, 24, .75); color: #fff; font: 700 10.5px var(--font-body); font-style: normal; }
.lfp-late-t.is-loading { background-image: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: lfp-shimmer 1.2s linear infinite; }
@media (max-width: 720px) { .lfp-late { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lfp-late-t:nth-child(n+4) { display: none; } }
/* Light theme: the chosen Match Day phase (Before / Live / After) on its dark fill keeps light text */
:root[data-theme="light"] .lfp-phases button.is-on { color: #fff; }
:root[data-theme="light"] .lfp-phases button.is-on:not(.is-live) i { background: #fff; border-color: #fff; }
:root[data-theme="light"] .lfp-phases button.is-on em { background: rgba(255, 255, 255, .2); }
/* The post cards' button tooltips sit on dark navy in both themes: white text (in the light theme it went dark on dark) */
.lib-rail [data-tip]::after, .lib-rail .save-btn::after { color: #f1f4f9; }
/* Light theme: the account initials keep the real gold on their dark navy circle */
:root[data-theme="light"] .lib-foot .lib-crest.is-initials b { color: #f0b84a; }
/* Filters panel, Memes / Media: the "filter on" option clearer — a round check that shows its tick, gold edge when on */
.lfp-single .lfp-ck { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); }
.lfp-single .lfp-ck .lf-i { width: 14px; height: 14px; stroke: #1a1205; stroke-width: 3; opacity: 0; }
.lfp-single.is-on .lfp-ck { background: linear-gradient(180deg, #ffe7ad, #f4c463 45%, #d79a2b); border-color: transparent; }
.lfp-single.is-on .lfp-ck .lf-i { opacity: 1; }
:root[data-theme="light"] .lfp-single.is-on { border-color: #d79a2b; background: #fff8ea; }
/* "Popular" on the filter cards: gold on a dark pill in both themes (in the light theme its gold turned black on dark) */
.lfp-hot { color: #ffd98c; background: rgba(12, 16, 30, .78); box-shadow: inset 0 0 0 1px rgba(240, 184, 74, .45); }
/* No plan + library gate on: the wall of covers behind the "unlock" card (js/library.js lockBackdrop) */
.lib-ghosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 18px 38px; filter: blur(10px) saturate(.8); opacity: .55; pointer-events: none; user-select: none; }
.lib-ghosts span { aspect-ratio: 4 / 5; border-radius: 16px; background: var(--surface-2) center / cover no-repeat; }
@media (max-width: 720px) { .lib-ghosts { grid-template-columns: repeat(2, 1fr); padding: 14px 16px; } }
/* An open board's name in capitals too, like on its card (not "All saves" or the smart boards) */
[data-board-title].is-board { text-transform: uppercase; letter-spacing: .01em; }
/* Social News platform filter, as in the reference: a clean dark tile with the plain white logo at rest; on hover (and
   when chosen) it fills with the platform's own gradient and grows a little */
.news-filters .ptile-grid .ptile { --g: linear-gradient(135deg, #2a3550, #1a2236); background: var(--surface-2); border: 1px solid transparent; box-shadow: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .25s, box-shadow .25s, color .2s; }
.news-filters .ptile-grid .ptile::before { display: none; }
.news-filters .ptile-grid .ptile[data-platform] img { background: none; border: 0; box-shadow: none; filter: brightness(0) invert(1); opacity: .9; transform: none; animation: none; }
.news-filters .ptile-grid .ptile[data-platform]:is(:hover, [aria-pressed="true"]) { background: var(--g); border-color: transparent; color: #fff; transform: scale(1.06); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .8); }
.news-filters .ptile-grid .ptile[data-platform]:is(:hover, [aria-pressed="true"]) img { filter: brightness(0) invert(1); opacity: 1; }
.news-filters .ptile-grid .ptile[data-platform]:is(:hover, [aria-pressed="true"]) span { color: #fff; text-shadow: none; }
.news-filters .ptile-grid .ptile[data-platform="all"] { --g: linear-gradient(135deg, #ffe7ad, #f4c463 50%, #d79a2b); }
.news-filters .ptile-grid .ptile[data-platform="instagram"] { --g: linear-gradient(135deg, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5); }
.news-filters .ptile-grid .ptile[data-platform="tiktok"] { --g: linear-gradient(135deg, #25f4ee 0%, #000 48%, #000 55%, #fe2c55 100%); }
.news-filters .ptile-grid .ptile[data-platform="x"] { --g: linear-gradient(135deg, #5a5a5a 0%, #000 65%); }
.news-filters .ptile-grid .ptile[data-platform="youtube"] { --g: linear-gradient(135deg, #ff4b4b, #c4000b); }
.news-filters .ptile-grid .ptile[data-platform="facebook"] { --g: linear-gradient(135deg, #4f8ff7, #1259c3); }
.news-filters .ptile-grid .ptile[data-platform="linkedin"] { --g: linear-gradient(135deg, #3aa0f0, #0a4f9c); }
.news-filters .ptile-grid .ptile[data-platform="snapchat"] { --g: linear-gradient(135deg, #fffc00, #f2c400); }
.news-filters .ptile-grid .ptile[data-platform="whatsapp"] { --g: linear-gradient(135deg, #5ff07f, #128c7e); }
.news-filters .ptile-grid .ptile[data-platform="pinterest"] { --g: linear-gradient(135deg, #ff4d5a, #bd081c); }
.news-filters .ptile-grid .ptile[data-platform="threads"] { --g: linear-gradient(135deg, #4a4a4a, #000 70%); }
.news-filters .ptile-grid .ptile[data-platform="ai"] { --g: linear-gradient(135deg, #c4b5fd, #7c3aed 55%, #4c1d95); }
/* light backgrounds (All, Snapchat): dark logo and label */
.news-filters .ptile-grid .ptile:is([data-platform="all"], [data-platform="snapchat"]):is(:hover, [aria-pressed="true"]) img { filter: brightness(0); }
.news-filters .ptile-grid .ptile:is([data-platform="all"], [data-platform="snapchat"]):is(:hover, [aria-pressed="true"]) span { color: #1a1205; }
:root[data-theme="light"] .news-filters .ptile-grid .ptile:not(:hover):not([aria-pressed="true"]) img { filter: brightness(0); opacity: .75; }
@media (prefers-reduced-motion: reduce) { .news-filters .ptile-grid .ptile { transition: background .2s; } .news-filters .ptile-grid .ptile:is(:hover, [aria-pressed="true"]) { transform: none; } }