/* The Full Stop family band (2026-10-29). Word for word the same in every
   product; edit in rabfiles/full-stop/family-kit/ and run install.sh.
   Stands on its own: no tokens from the host site, so it looks the same
   on all five. Light by default; dark follows each site's own switch. */
.fsf {
  --fsf-bg: #efede7; --fsf-card: #ffffff; --fsf-line: rgba(17,22,29,.09);
  --fsf-text: #11161d; --fsf-muted: #4d5561;
  --fsf-rotadone: #107f5c; --fsf-seated: #7b3fb0; --fsf-checked: #11161d; --fsf-stocked: #a3244b;
  background: var(--fsf-bg); color: var(--fsf-text);
  border-top: 1px solid var(--fsf-line);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; text-align: left;
}
section.fsf { position: relative; margin: 0; padding: 0; }  /* host sites style bare <section>s */
.fsf-line-only { --fsf-rotadone: #107f5c; --fsf-seated: #7b3fb0; --fsf-checked: #11161d; --fsf-stocked: #a3244b; }
html.dark .fsf, html.dark .fsf-line-only, .fsf-line-only.fsf-on-dark,
html:not(.rd-light-mode) .fsf[data-here="rotadone"], html:not(.rd-light-mode) .fsf-line-only[data-here="rotadone"] {
  --fsf-bg: #12161c; --fsf-card: #191e26; --fsf-line: rgba(255,255,255,.08);
  --fsf-text: #f3f2ee; --fsf-muted: #a7adb6;
  --fsf-rotadone: #2dac7f; --fsf-seated: #a77bd8; --fsf-checked: #f3f2ee; --fsf-stocked: #e0587f;
}
@media (prefers-color-scheme: dark) {
  .fsf[data-here="auto"] {
    --fsf-bg: #12161c; --fsf-card: #191e26; --fsf-line: rgba(255,255,255,.08);
    --fsf-text: #f3f2ee; --fsf-muted: #a7adb6;
    --fsf-rotadone: #2dac7f; --fsf-seated: #a77bd8; --fsf-checked: #f3f2ee; --fsf-stocked: #e0587f;
  }
}
.fsf *, .fsf *::before, .fsf *::after { box-sizing: border-box; }
.fsf-c-rotadone { --fsf-c: var(--fsf-rotadone); } .fsf-c-seated { --fsf-c: var(--fsf-seated); }
.fsf-c-checked { --fsf-c: var(--fsf-checked); } .fsf-c-stocked { --fsf-c: var(--fsf-stocked); }

.fsf-in { max-width: 1160px; margin: 0 auto; padding: 64px 24px 56px; }
.fsf-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: baseline; margin-bottom: 28px; }
.fsf-word { grid-row: span 2; font-size: 30px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--fsf-text); text-decoration: none; white-space: nowrap; }
.fsf-dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.fsf-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fsf-c); }
.fsf-h { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--fsf-text); }
.fsf-h span { color: var(--fsf-text); }
.fsf-sub { margin: 0; max-width: 640px; font-size: 15.5px; line-height: 1.55; color: var(--fsf-muted); }

.fsf-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fsf-p a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 18px 16px; border-radius: 18px;
  background: var(--fsf-card); box-shadow: 0 0 0 1px var(--fsf-line); color: var(--fsf-text); text-decoration: none;
  transition: box-shadow .25s, transform .25s; }
@media (hover: hover) { .fsf-p a:hover { box-shadow: 0 0 0 1.5px var(--fsf-c); transform: translateY(-2px); } }
.fsf-p a:focus-visible { outline: 2px solid var(--fsf-c); outline-offset: 3px; }
.fsf-p.is-here a { box-shadow: 0 0 0 1.5px var(--fsf-c); }
.fsf-p img { width: 40px; height: 40px; margin-bottom: 6px; }
.fsf-name { font-size: 23px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.fsf-name b { color: var(--fsf-c); font-weight: 800; }
.fsf-job { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--fsf-text); }
.fsf-job em { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
  color: var(--fsf-card); background: var(--fsf-c); }
.fsf-line { font-size: 14px; line-height: 1.45; color: var(--fsf-muted); }
.fsf-price { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--fsf-text); }
.fsf-foot { margin: 22px 0 0; font-size: 14.5px; color: var(--fsf-muted); }
.fsf-foot a { color: var(--fsf-text); font-weight: 600; text-decoration: none; }
.fsf-foot a:hover { text-decoration: underline; }

@media (max-width: 960px) { .fsf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .fsf-in { padding: 48px 18px 44px; }
  .fsf-head { grid-template-columns: 1fr; }
  .fsf-word { grid-row: auto; margin-bottom: 8px; }
  .fsf-list { grid-template-columns: 1fr; gap: 10px; }
  .fsf-p a { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 4px; padding: 16px; }
  .fsf-p img { grid-row: span 4; margin: 0; }
  .fsf-line { display: none; }
  .fsf-price { padding-top: 2px; font-weight: 500; color: var(--fsf-muted); }
}
@media (prefers-reduced-motion: reduce) { .fsf-p a { transition: none; } .fsf-p a:hover { transform: none; } }

/* One quiet line, for sign-in pages. Sits on the host's own background. */
.fsf-line-only { margin: 0; font-size: 13px; line-height: 1.6; color: inherit; opacity: .85;
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.fsf-line-only a { color: inherit; text-decoration: none; font-weight: 600; }
.fsf-line-only a:hover { text-decoration: underline; }
.fsf-line-only a[class] { font-weight: 800; letter-spacing: -0.03em; margin-left: 4px; }
.fsf-line-only a b { color: var(--fsf-c); }
.fsf-line-only.fsf-on-dark a { color: #f3f2ee; }
.fsf-job em { line-height: 1.35; }