/* Public site styles. Palette comes from packages/tokens/theme.css — this file
   only does layout and type, so the site and the app never drift apart. */

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

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

body {
  margin: 0;
  background: var(--loop-bg);
  color: var(--loop-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.021em;
  font-weight: 620;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 5.4vw, 3.65rem);
}
h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
h3 {
  font-size: 1.12rem;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--loop-accent-text);
  text-decoration-color: rgb(var(--loop-accent-rgb) / 0.4);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}

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

.wrap {
  width: min(100% - 2.5rem, 1120px);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--loop-surface);
  border: 1px solid var(--loop-border-strong);
  border-radius: 8px;
}

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

/* ── header ───────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgb(var(--loop-bg-rgb) / 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--loop-border);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
  flex-wrap: wrap;
  padding-block: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--loop-text);
  text-decoration: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-text strong {
  font-size: 1.06rem;
  letter-spacing: -0.015em;
}
.brand-text small {
  font-size: 0.72rem;
  color: var(--loop-muted);
  letter-spacing: 0.02em;
}

.site-nav {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--loop-muted);
  text-decoration: none;
  font-size: 0.94rem;
  padding-block: 0.25rem;
  border-bottom: 1.5px solid transparent;
}
.site-nav a:hover {
  color: var(--loop-text);
}
.site-nav a[aria-current="page"] {
  color: var(--loop-text);
  border-bottom-color: var(--loop-accent);
}

/* ── sections ─────────────────────────────────────────────────────────────── */

section {
  padding-block: clamp(3.2rem, 7vw, 5.6rem);
}

section + section {
  border-top: 1px solid var(--loop-border);
}

.eyebrow {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--loop-accent-text);
  margin-bottom: 0.9rem;
}

.lede {
  font-size: clamp(1.06rem, 1.9vw, 1.22rem);
  color: var(--loop-muted);
  max-width: 62ch;
}

.section-head {
  max-width: 66ch;
  margin-bottom: 2.6rem;
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 10vw, 7.5rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% 30% 40% -20%;
  background: radial-gradient(closest-side, rgb(var(--loop-accent-rgb) / 0.13), transparent);
  pointer-events: none;
}

.hero > * {
  position: relative;
}

.hero p.lede {
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 560;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--loop-accent);
  color: rgb(var(--loop-bg-rgb));
}
.btn-primary:hover {
  background: var(--loop-accent-strong);
}

.btn-ghost {
  border-color: var(--loop-border-strong);
  color: var(--loop-text);
}
.btn-ghost:hover {
  border-color: var(--loop-accent);
  background: var(--loop-surface);
}

/* ── stats ────────────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 3.4rem;
  background: var(--loop-border);
  border: 1px solid var(--loop-border);
  border-radius: 14px;
  overflow: hidden;
}

.stat {
  background: var(--loop-bg);
  padding: 1.5rem 1.4rem;
}
.stat b {
  display: block;
  font-size: 1.95rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat span {
  font-size: 0.83rem;
  color: var(--loop-muted);
  letter-spacing: 0.02em;
}

/* ── cards ────────────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}

.card {
  background: var(--loop-surface);
  border: 1px solid var(--loop-border);
  border-radius: 14px;
  padding: 1.6rem 1.5rem;
}

.card h3 {
  margin-bottom: 0.45rem;
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--loop-muted);
  font-size: 0.95rem;
}

.card-num {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--loop-subtle);
  margin-bottom: 0.9rem;
}

/* ── split layout ─────────────────────────────────────────────────────────── */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.checks li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--loop-muted);
  font-size: 0.97rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--loop-accent);
}
.checks strong {
  color: var(--loop-text);
  font-weight: 560;
}

/* ── brand marks ──────────────────────────────────────────────────────────── */

/* Client marks span an orange badge, dark-teal wordmarks and thin script — no
   single dark treatment keeps them all legible, and seven separate white tiles
   punch holes in the page. One calm light band instead. Every logo file is the
   same 300x100 canvas with the mark centred, so spacing needs no per-logo work. */
.brand-band {
  background: #f6f5f2;
  border-radius: 16px;
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.4rem, 3vw, 2.4rem);
}

/* Flex, not grid: seven logos leave an orphan row on any column count, and
   flex-wrap centres that last row instead of stranding it on the left. */
.brand-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.4rem;
}

/* Fixed basis so the wrap point is predictable: four per row, then a centred
   row of three — rather than whatever ragged split intrinsic widths produce. */
.brand-row li {
  flex: 0 0 232px;
  display: grid;
  place-items: center;
}

.brand-row img {
  width: 190px;
  max-width: 100%;
  height: auto;
}


/* ── channels ─────────────────────────────────────────────────────────────── */

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--loop-border);
  border: 1px solid var(--loop-border);
  border-radius: 14px;
  overflow: hidden;
}
.channel {
  background: var(--loop-bg);
  padding: 1.4rem;
}
.channel b {
  display: block;
  font-weight: 580;
  margin-bottom: 0.2rem;
}
.channel span {
  font-size: 0.87rem;
  color: var(--loop-muted);
}

/* ── platform mock ────────────────────────────────────────────────────────── */

.mock {
  border: 1px solid var(--loop-border-strong);
  border-radius: 14px;
  background: var(--loop-bg-2);
  overflow: hidden;
  box-shadow: 0 22px 50px -30px rgb(0 0 0 / 0.9);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--loop-border);
  background: var(--loop-surface);
}
.mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--loop-border-strong);
}
.mock-title {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--loop-muted);
}

.mock-body {
  padding: 1.25rem;
  display: grid;
  gap: 0.9rem;
}

.mock-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.mock-tile {
  background: var(--loop-surface);
  border: 1px solid var(--loop-border);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
}
.mock-tile span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--loop-subtle);
}
.mock-tile b {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 96px;
  padding: 0.9rem;
  background: var(--loop-surface);
  border: 1px solid var(--loop-border);
  border-radius: 10px;
}
.mock-chart i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: rgb(var(--loop-accent-rgb) / 0.55);
}

.mock-note {
  font-size: 0.78rem;
  color: var(--loop-subtle);
  margin-top: 0.85rem;
}

/* ── prose (legal pages) ──────────────────────────────────────────────────── */

.prose {
  max-width: 74ch;
}
.prose h2 {
  margin-top: 2.6rem;
  font-size: 1.32rem;
}
.prose h3 {
  margin-top: 1.8rem;
}
.prose ul {
  padding-left: 1.15rem;
  color: var(--loop-muted);
}
.prose li {
  margin-bottom: 0.5rem;
}
.prose p {
  color: var(--loop-muted);
}
.prose strong {
  color: var(--loop-text);
}
.page-meta {
  font-size: 0.87rem;
  color: var(--loop-subtle);
}

/* ── contact ──────────────────────────────────────────────────────────────── */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}
.contact-list dt,
.contact-list b {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--loop-subtle);
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.contact-list a,
.contact-list address {
  font-size: 1.02rem;
  font-style: normal;
  color: var(--loop-text);
  line-height: 1.55;
}
.contact-list a {
  color: var(--loop-accent-text);
}

/* ── cta ──────────────────────────────────────────────────────────────────── */

.cta {
  background: var(--loop-surface);
  border: 1px solid var(--loop-border);
  border-radius: 16px;
  padding: clamp(1.9rem, 4vw, 3rem);
  text-align: center;
}
.cta h2 {
  margin-bottom: 0.4rem;
}
.cta p {
  color: var(--loop-muted);
  max-width: 52ch;
  margin-inline: auto;
}
.cta .hero-actions {
  justify-content: center;
}

/* ── footer ───────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--loop-border);
  background: var(--loop-bg-2);
  padding-top: 3.4rem;
  margin-top: 0;
}

.foot-grid {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-bottom: 2.6rem;
}

.foot-brand {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.foot-legal {
  font-size: 0.9rem;
  color: var(--loop-muted);
  margin: 0;
  max-width: 34ch;
}
.foot-legal strong {
  color: var(--loop-text);
}

.foot-h {
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--loop-subtle);
  margin-bottom: 0.9rem;
  font-weight: 600;
}

.foot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.92rem;
}
.foot-list a {
  color: var(--loop-muted);
  text-decoration: none;
}
.foot-list a:hover {
  color: var(--loop-text);
}
.foot-addr {
  color: var(--loop-muted);
  line-height: 1.55;
}

.foot-bottom {
  border-top: 1px solid var(--loop-border);
  padding-block: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.foot-bottom p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--loop-subtle);
  max-width: 62ch;
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .mock-row {
    grid-template-columns: 1fr;
  }
  .head-inner {
    min-height: 0;
  }
}

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