/* FollowerCRM — every page a signed-out visitor can reach: the homepage, the
   privacy policy, the terms, and the data-deletion receipt.

   Loaded alongside application.css, never instead of it: these pages are built
   out of the workspace's own cards, buttons, stats and badges so that what a
   visitor sees is literally the surface they are signing up for, in whichever
   of the four finishes they pick.

   This sheet defines NO tokens. Every colour here resolves to a variable set
   by application.css's [data-theme] blocks — that is what lets the finish
   switch work on this page at all, and re-declaring :root here is exactly the
   bug that once dragged the marketing palette onto every app page. */

/* ---------- Shell ---------- */

.site { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 5rem; }

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: .7rem 1.5rem;
}

.site-head .brand { padding: 0; }
.site-head-right { display: flex; align-items: center; gap: .5rem; }

/* ---------- Theme switch ---------- */

.theme-switch {
  display: flex;
  gap: 2px;
  margin: 0 .35rem 0 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

.theme-option { position: relative; display: block; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.theme-face {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 540;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--muted);
  transition: background .12s ease, color .12s ease;
}

/* The chip is painted in the theme it selects, so the control shows the choice
   rather than only naming it. --sw-* comes from [data-finish] in the app sheet. */
.theme-chip {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw-accent) 50% 100%);
  box-shadow: inset 0 0 0 1px var(--sw-border);
}

/* A 24px chip is a fine target for a cursor and a poor one for a thumb. The
   pad is vertical only, so neighbouring options never overlap. */
@media (pointer: coarse) {
  .theme-option::after { content: ""; position: absolute; inset: -11px 0; }
}

.theme-option:hover .theme-face { color: var(--text); }
.theme-option input:checked + .theme-face { color: var(--text); background: var(--surface); box-shadow: var(--shadow-xs); }
.theme-option input:focus-visible + .theme-face { outline: 2px solid var(--focus); outline-offset: 2px; }

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

.hero { max-width: 44rem; margin: 0 auto; padding: 4rem 0 2.25rem; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1.35rem;
  padding: .3rem .7rem .3rem .55rem;
  font-size: .8rem;
  font-weight: 560;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.hero h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 5.4vw, 3.35rem);
  font-weight: 680;
  line-height: 1.08;
  letter-spacing: -.033em;
  text-wrap: balance;
}

.lede {
  margin: 0 auto;
  max-width: 40rem;
  font-size: 1.075rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.7rem; }
.hero-note { margin: 1rem 0 0; }

/* ---------- The picture of the workspace ---------- */

.shot-frame { margin: 1rem 0 4.5rem; }

.shot {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  /* It is a picture, not a control: nothing inside is focusable or clickable. */
  user-select: none;
}

.shot-rail {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1rem .7rem;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.shot-main { min-width: 0; padding: 1.4rem; display: grid; gap: 1rem; }
.shot-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.shot-note { margin: .75rem 0 0; text-align: center; }

/* ---------- Bands ---------- */

.band { margin: 0 0 4.25rem; }
.band > h2 {
  max-width: 34rem;
  margin: 0 0 1.4rem;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 660;
  letter-spacing: -.026em;
  text-wrap: balance;
}

/* ---------- Steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }

.step { display: flex; flex-direction: column; }
.step h3 { margin: .75rem 0 .3rem; font-size: 1.02rem; }
.step p { margin: 0; font-size: .9rem; color: var(--muted); }

.step-no {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

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

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.feature { display: flex; gap: .8rem; }
.feature h3 { margin: 0 0 .2rem; font-size: .95rem; }
.feature p { margin: 0; font-size: .875rem; color: var(--muted); }

.feature-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

/* ---------- Free ---------- */

.free-band { margin-bottom: 3rem; }
.free { text-align: center; padding: 2.75rem 1.75rem; border-color: var(--accent-line); }
.free h2 { margin: 0 0 .7rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 680; letter-spacing: -.03em; }

.specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  text-align: left;
  border-top: 1px solid var(--border);
}
.specs dt { font-size: .72rem; font-weight: 620; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); }
.specs dd { margin: .3rem 0 0; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }

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

.site-foot { border-top: 1px solid var(--border); background: var(--surface); }
.site-foot-inner { max-width: 1120px; margin: 0 auto; padding: 1.6rem 1.5rem 2.4rem; text-align: center; }
.site-foot p { margin: 0 0 .45rem; }
.site-foot p:last-child { margin: 0; max-width: 52ch; margin-inline: auto; }

/* ---------- Documents ---------- */

/* A policy is read, not scanned: one column at a comfortable measure, inside
   the same container the marketing page uses. */
.doc { max-width: 46rem; padding-bottom: 4rem; }
.doc-head { padding: 3.25rem 0 2rem; }
.doc-head h1 {
  margin: 0 0 .6rem;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  font-weight: 680;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.doc-head .lede { margin: 1.1rem 0 0; max-width: none; font-size: 1.02rem; }
.doc-date { margin: 0; }

/* The eyebrow names the document rather than selling anything, so it drops the
   live dot and the accent tint the homepage's offer badge carries. */
.eyebrow-plain {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--border);
  padding-inline: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .72rem;
}

.doc-summary { margin-bottom: 1rem; border-color: var(--accent-line); }
.doc-summary h2 { font-size: .95rem; font-weight: 620; letter-spacing: -.01em; margin: 0 0 .75rem; }

.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: .9rem; color: var(--muted); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: .78rem;
  height: .42rem;
  border: 2px solid var(--accent);
  border-top: 0;
  border-right: 0;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.doc-toc { margin-bottom: 1rem; }
.doc-toc-label {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 620;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--subtle);
}
.doc-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem 1.5rem;
}
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: block;
  padding: .3rem 0;
  font-size: .875rem;
  color: var(--muted);
}
.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  display: inline-block;
  width: 2rem;
  font-variant-numeric: tabular-nums;
  color: var(--subtle);
}
.doc-toc a:hover { color: var(--accent-text); }

.clause { padding-top: 2.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border); }
/* An anchored jump must not land the heading under the sticky bar. */
.clause, .doc-summary, #top { scroll-margin-top: 5rem; }

.clause-no {
  margin: 0 0 .3rem;
  font-size: .78rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--subtle);
}
.clause-title { margin: 0 0 .9rem; font-size: 1.3rem; font-weight: 660; letter-spacing: -.022em; }
.clause p { color: var(--muted); }
.clause-lede { font-size: 1.02rem; color: var(--text); }

/* The clause someone arrived looking for: the deletion routes, the way out of
   the agreement. It is marked, not decorated. */
.clause-hot { border-top-color: var(--accent); }
.clause-hot .clause-no { color: var(--accent-text); }

.roll { display: grid; gap: 1.15rem; margin: 1.35rem 0; }
.roll > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .25rem 1.25rem; }
.roll dt { font-size: .875rem; font-weight: 620; color: var(--text); }
.roll dd { margin: 0; font-size: .92rem; color: var(--muted); }

.deny { margin: 1.35rem 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.deny li { position: relative; padding-left: 1.6rem; color: var(--muted); }
.deny li::before {
  content: "×";
  position: absolute;
  left: .2rem;
  top: -.06em;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--danger);
}

.levers { counter-reset: lever; margin: 1.35rem 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.levers > li {
  position: relative;
  padding: 1.1rem 1.25rem 1.1rem 3.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
.levers > li::before {
  counter-increment: lever;
  content: counter(lever);
  position: absolute;
  left: 1.25rem;
  top: 1.1rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.levers h3 { margin: .15rem 0 .35rem; font-size: 1rem; }
.levers p { margin: 0; font-size: .92rem; color: var(--muted); }

.doc-note {
  margin: 1.35rem 0 0;
  padding: .85rem 1.05rem;
  font-size: .875rem;
  color: var(--muted);
  background: var(--surface-2);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.doc-note:last-child { margin-bottom: 0; }

.contact-line { margin: 1.5rem 0 0; }

/* Scope names and settings paths quoted inside prose. */
.doc code {
  padding: .1rem .35rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  overflow-wrap: anywhere;
}

.code-block {
  margin: 0;
  padding: .7rem .85rem;
  font-size: .82rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  word-break: break-all;
}

/* ---------- Narrow ---------- */

@media (max-width: 62rem) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-toc ol { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Below the rail's own breakpoint the picture would be showing a layout the
     app no longer uses at that width. It sheds the rail and the second column
     rather than misrepresenting itself. */
  .shot { grid-template-columns: minmax(0, 1fr); }
  .shot-rail { display: none; }
  .shot-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .hero { padding-top: 2.75rem; }
  .site-signin { display: none; }
  /* The document's own contents card sits at the top of the page and carries
     every section link, this one included, so the bar sheds it rather than
     crowding the wordmark out. */
  .site-jump { display: none; }
  /* The names come off the bar and the painted chips stay -- but they stay in
     the accessibility tree, because they are the radios' only labels. */
  .theme-name {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .theme-face { padding: .34rem .38rem; }
}

@media (max-width: 34rem) {
  .site, .site-head-inner, .site-foot-inner { padding-inline: 1rem; }
  /* The label above its text, rather than an 11rem column squeezing the
     definition into three words a line. */
  .roll > div { grid-template-columns: minmax(0, 1fr); }
  .contact-line .btn { width: 100%; }
  .site-head-inner { gap: .5rem; }
  .site-head-right { gap: .35rem; }
  .theme-switch { margin-right: 0; }
  /* The wordmark and the finish switch are what the sticky bar is for at this
     width. The offer is not lost with it: the hero's own Connect button is
     full-width a hundred pixels below, and the page carries two more. */
  .site-head .btn-primary { display: none; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { width: 100%; }
  .free { padding: 2rem 1.1rem; }
  .shot-main { padding: 1rem; }
}