/* ==========================================================================
   Massthread — shared stylesheet for the static site
   Cinute InfoMedia · massthread.com
   No build step, no JavaScript. Palette matches the app's globals.css so the
   marketing site and the product read as one brand.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  --bg: #fbfaff;
  --surface: #ffffff;
  --surface-2: #f4f2fb;
  --border: #e7e3f3;
  --border-strong: #d5cfe8;
  --text: #1d1b2e;
  --muted: #6b6484;
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --on-accent: #ffffff;
  --ring: rgb(109 40 217 / 0.18);
  --wash: rgb(109 40 217 / 0.14);
  --shadow: 0 1px 2px rgb(20 25 50 / 0.04), 0 1px 3px rgb(20 25 50 / 0.06);
  --grain-opacity: 0.035;
  --grain-blend: multiply;

  /* The wave, sampled left to right. Decoration only — never a button. */
  --g1: #6d28d9;
  --g2: #d8408a;
  --g3: #f97316;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1560px;
  --measure: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121120;
    --surface: #1a1a2a;
    --surface-2: #21203a;
    --border: #2e2c46;
    --border-strong: #3c3a58;
    --text: #f2f1f7;
    --muted: #a09cb4;
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --on-accent: #1a1a2a;
    --ring: rgb(167 139 250 / 0.22);
    --wash: rgb(167 139 250 / 0.16);
    --shadow: none;
    --grain-opacity: 0.055;
    --grain-blend: overlay;
    --g1: #a78bfa;
    --g2: #f472b6;
    --g3: #fb923c;
  }
}

:root[data-theme="dark"] {
  --bg: #121120;
  --surface: #1a1a2a;
  --surface-2: #21203a;
  --border: #2e2c46;
  --border-strong: #3c3a58;
  --text: #f2f1f7;
  --muted: #a09cb4;
  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --on-accent: #1a1a2a;
  --ring: rgb(167 139 250 / 0.22);
  --wash: rgb(167 139 250 / 0.16);
  --shadow: none;
  --grain-opacity: 0.055;
  --grain-blend: overlay;
  --g1: #a78bfa;
  --g2: #f472b6;
  --g3: #fb923c;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The 1px wave hairline. Present on all three pages — this is the detail
   that ties the legal pages to the landing page. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 10;
  background: linear-gradient(90deg, transparent, var(--g1), var(--g2), var(--g3), transparent);
}

/* Grain — one inline SVG turbulence, ~300 bytes, kills the flat-CSS feel. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

p { margin: 0 0 1.15em; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 16px;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .wrap { padding-inline: 32px; }
}

@media (min-width: 1400px) {
  .wrap { padding-inline: 48px; }
}

/* --- Top bar ------------------------------------------------------------ */
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--text); }

.wordmark-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  vertical-align: 1px;
  background: linear-gradient(100deg, var(--g1), var(--g2) 55%, var(--g3));
}

.topnav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
}
.topnav a { color: var(--muted); text-decoration: none; }
.topnav a:hover { color: var(--accent); }
.topnav .mail { display: none; }

@media (min-width: 640px) {
  .topnav .mail { display: inline; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 36px 0 72px;
  isolation: isolate;
}

@media (min-width: 768px) {
  .hero { padding: 44px 0 104px; }
}

/* Soft broadcast wash — no hard edge, so it never reads as a shape. */
.hero::before {
  content: "";
  position: absolute;
  inset: -120px 0 auto 0;
  height: 620px;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% -10%, var(--wash), transparent 70%);
}

/* The thread fan: one narrative leaving, many platforms arriving. */
.threads {
  position: absolute;
  inset: 0 0 auto 0;
  height: 620px;
  z-index: -1;
  width: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 78%, transparent);
}

/* On a narrow screen the fan crosses the headline, so quieten it there. */
@media (max-width: 767px) {
  .threads { opacity: 0.45; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pill-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}
.pill-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: pulse-ring 2.6s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

h1.headline {
  margin: 22px 0 0;
  font-size: clamp(2.5rem, 6.2vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

.gradient-text {
  color: var(--accent); /* fallback first */
  background: linear-gradient(100deg, var(--g1), var(--g2) 55%, var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sub {
  margin: 22px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 519px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

.note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  max-width: 52ch;
}

.proof {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
  max-width: 62ch;
}
.proof strong { color: var(--text); font-weight: 600; }

/* --- Sections ----------------------------------------------------------- */
.section { padding: 64px 0; }

@media (min-width: 768px) {
  .section { padding: 96px 0; }
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
}

.steps {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px 28px;
  box-shadow: var(--shadow);
}

.card-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.4;
  letter-spacing: -0.03em;
}

.card h3 {
  margin: 16px 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.plans {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 15px;
  color: var(--muted);
}

.plan-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.plan-sep { color: var(--border-strong); }

/* --- Footer ------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 56px;
  font-size: 14px;
  color: var(--muted);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--accent); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.footer-legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.7;
}

/* --- Centred hero ------------------------------------------------------- */
.hero-centered { text-align: center; }

.hero-centered h1.headline,
.hero-centered .sub,
.hero-centered .note,
.hero-centered .proof {
  margin-left: auto;
  margin-right: auto;
}

.hero-centered h1.headline { max-width: 20ch; }
.hero-centered .sub { max-width: 78ch; }
.hero-centered .cta-row { justify-content: center; }
.hero-centered .proof { max-width: 70ch; text-align: center; }

/* --- Section headings ---------------------------------------------------- */
.section-head {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: 44px;
}

.section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.section-head p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.section-alt {
  background: var(--surface-2);
  border-block: 1px solid var(--border);
}

/* --- Feature grid -------------------------------------------------------- */
.features {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px 26px;
  box-shadow: var(--shadow);
}

.feature-mark {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--g1), var(--g2) 55%, var(--g3));
  margin-bottom: 16px;
}

.feature h3 {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}

/* --- Platform groups ----------------------------------------------------- */
.platform-groups {
  display: grid;
  gap: 28px 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .platform-groups { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .platform-groups { grid-template-columns: repeat(4, 1fr); }
}

.platform-group h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.platform-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.9;
}

/* --- Trust strip --------------------------------------------------------- */
.trust {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  padding: 30px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .trust { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.trust h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.trust p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* --- FAQ ----------------------------------------------------------------- */
.faq {
  max-width: 46rem;
  margin-inline: auto;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq details:first-of-type { border-top: 1px solid var(--border); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 36px 20px 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
}

.faq details[open] summary::after { content: "\2212"; }

.faq details p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

/* --- Closing call to action ---------------------------------------------- */
.cta-band {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 56px 24px 60px;
  background: var(--surface-2);
}

.cta-band h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin-inline: auto;
}

.cta-band p {
  margin: 16px auto 0;
  max-width: 52ch;
  color: var(--muted);
}

.cta-band .cta-row { justify-content: center; margin-top: 28px; }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal-head {
  padding: 48px 0 8px;
}

@media (min-width: 768px) {
  .legal-head { padding: 72px 0 8px; }
}

.legal-head h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.updated {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: 24px 0 88px;
  align-items: start;
}

/* Single column: pull the contents list above the policy text. It stays
   second in the DOM for print and screen readers, but a table of contents
   sitting underneath 30-odd sections of legal text is no use to anyone.
   The explicit grid placement at >=1024px below overrides this. */
.legal-layout > aside { order: -1; }

@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
  }

  /* The contents list sits on the left, but stays SECOND in the DOM so that
     screen readers and the print stylesheet still get the policy text first.
     The sticky element has to be the grid item itself — its containing block
     is the full-height grid area, which is what gives sticky room to travel.
     Making the inner card sticky does nothing, because align-items:start
     shrinks the item to the height of its own content. */
  .legal-layout > aside {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Full width on desktop — the column itself is the measure. The selector
     is deliberately more specific than the plain `.prose` rule below, which
     appears later in this file and would otherwise win. */
  .legal-layout > article {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
  }
}

.prose {
  max-width: var(--measure);
  font-size: 17px;
  line-height: 1.72;
  min-width: 0;
}

.prose section { scroll-margin-top: 6rem; }

.prose h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.prose section:first-of-type h2 { margin-top: 1.5rem; }

.prose h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.prose ul,
.prose ol { padding-left: 1.5rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--muted); }

.prose dt { font-weight: 600; margin-top: 1em; }
.prose dd { margin: 0.25em 0 0; color: var(--muted); }

/* Deep links visibly land. */
.prose section:target > h2 {
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  animation: target-fade 1.2s ease-out;
}

@keyframes target-fade {
  from { background: linear-gradient(90deg, rgb(109 40 217 / 0.1), transparent); }
  to   { background: transparent; }
}

/* --- Table of contents -------------------------------------------------- */
.toc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
}

/* The aside is what sticks (see .legal-layout above), not this card. */

.toc > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
}
.toc > summary::-webkit-details-marker { display: none; }

.toc ol {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.toc li { margin-bottom: 2px; }

.toc a {
  display: block;
  padding: 4px 0 4px 10px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
}
.toc a:hover { border-left-color: var(--accent); color: var(--accent); }

/* --- Tables ------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.6em;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 540px;
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

thead th {
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
}

tbody td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: baseline;
}

tbody td:first-child { font-weight: 500; }

@media (max-width: 639px) {
  .table-scroll { overflow-x: visible; }
  table { min-width: 0; }
  thead { display: none; }
  tbody, tr, td { display: block; }
  tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  tbody td {
    border-bottom: 0;
    padding: 0.35rem 0;
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.5rem;
  }
  tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* --- Callout ------------------------------------------------------------ */
.callout {
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 1.6em 0;
}

.callout p:last-child,
.callout ul:last-child { margin-bottom: 0; }

.callout-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.addr {
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.addr strong { color: var(--text); font-weight: 600; }

/* --- Motion & print ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  body::before,
  body::after,
  .threads,
  .toc,
  .topnav { display: none !important; }
  .legal-layout { display: block; }
  .prose { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
  body { background: #fff; color: #000; font-size: 11pt; }
}