/*
 * THE RENDERER STYLESHEET.
 *
 * Ships once, with the Worker. Every rule reads from a custom property, so a
 * customer site is re-themed by changing data — never by writing CSS.
 *
 * If you are reading this to understand the architecture: notice there is
 * nothing tenant-specific anywhere in this file.
 */

.site {
  --pad: calc(clamp(40px, 5vw, 88px) * var(--density, 1));
  --gap: calc(24px * var(--density, 1));

  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  container-type: inline-size;
}

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

.site h1, .site h2, .site h3, .site h4 {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.site h1 { font-size: calc(clamp(2.1rem, 4.6cqw, 3.6rem) * var(--head-scale)); }
.site h2 { font-size: calc(clamp(1.6rem, 3cqw, 2.4rem) * var(--head-scale)); }
.site h3 { font-size: calc(1.14rem * var(--head-scale)); }
.site h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.site p  { margin: .6em 0 0; color: var(--ink-soft); }

.site .lede { font-size: 1.08rem; max-width: 60ch; }
.site .eyebrow {
  margin: 0 0 .8em; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}

/* ---------------------------------------------------------------- layout -- */

.site .blk { padding: var(--pad) 24px; }
.site .blk.alt   { background: var(--paper-alt); }
.site .blk.band  { background: var(--brand-wash); }
.site .wrap { max-width: var(--max-width); margin-inline: auto; }
.site .wrap.narrow { max-width: min(760px, var(--max-width)); }
.site .center { text-align: center; }
.site .center .lede, .site .center .actions { margin-inline: auto; }
.site .center .actions { justify-content: center; }

.site .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 1.6); }
.site .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.site .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.site .middle { align-items: center; }

@container (max-width: 860px) {
  .site .grid-2, .site .grid-3, .site .grid-4 { grid-template-columns: 1fr; }
}

.site .blk-head { margin-bottom: calc(var(--gap) * 1.5); max-width: 62ch; }
.site .blk-head .lede { margin-top: .5em; }

/* ----------------------------------------------------------------- atoms -- */

.site .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .78em 1.4em; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  border: 1px solid transparent; transition: transform .12s ease, filter .12s ease;
  white-space: nowrap;
}
.site .btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.site .btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow); }
.site .btn-ghost   { background: transparent; color: var(--ink); border-color: var(--line); }
.site .btn-invert  { background: var(--paper); color: var(--ink); }

.site .actions { display: flex; gap: 12px; margin-top: 1.6em; flex-wrap: wrap; }
.site .link { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.site .hero-proof { margin-top: 1.4em; font-size: .85rem; opacity: .72; }

.site .art {
  border-radius: var(--radius-lg); width: 100%; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 12% 8%, hsl(var(--a) 78% 66% / .95), transparent 58%),
    radial-gradient(110% 110% at 92% 88%, hsl(var(--b) 74% 58% / .92), transparent 55%),
    linear-gradient(140deg, hsl(var(--a) 44% 88%), hsl(var(--b) 40% 74%));
}
.site .art-tag {
  position: absolute; left: 12px; bottom: 12px; font-size: .7rem; font-weight: 600;
  background: rgb(255 255 255 / .82); color: #111; padding: .3em .6em; border-radius: 99px;
}

.site .card {
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); border: var(--card-border); overflow: hidden;
}
.site .card.pad { padding: calc(var(--gap) * .9); }
.site .card.pad .art { margin-bottom: 1em; }
.site .row-card { display: flex; gap: 16px; align-items: flex-start; }

.site .ic { width: 22px; height: 22px; }
.site .svc-ic {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius); background: var(--brand-wash); color: var(--brand);
  margin-bottom: .9em;
}
.site .row-card .svc-ic, .site .svc-row .svc-ic { margin-bottom: 0; }

/* ---------------------------------------------------------------- blocks -- */

.site .hero-centered .lede { margin-top: .9em; }
.site .hero-minimal h1 { max-width: 18ch; }
.site .hero-min-row {
  display: flex; gap: var(--gap); align-items: flex-end; justify-content: space-between;
  margin-top: 2em; flex-wrap: wrap;
}
.site .hero-min-row .actions { margin-top: 0; }

.site .hero-bg { position: relative; padding: 0; isolation: isolate; }
.site .hero-bg .art { border-radius: 0; position: absolute; inset: 0; height: 100%; }
.site .hero-bg-inner {
  position: relative; padding: calc(var(--pad) * 1.15) 24px;
  background: linear-gradient(hsl(var(--ink) / .58), hsl(var(--ink) / .72));
}
.site .hero-bg-inner, .site .hero-bg-inner h1 { color: #fff; }
.site .hero-bg-inner .lede { color: rgb(255 255 255 / .88); }
.site .hero-bg-inner .eyebrow { color: rgb(255 255 255 / .8); }
.site .hero-bg-inner .btn-ghost { color: #fff; border-color: rgb(255 255 255 / .45); }

.site .trust { padding: calc(var(--pad) * .42) 24px; border-block: 1px solid var(--line); }
.site .trust-logos { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.site .trust-label { font-size: .8rem; opacity: .6; }
.site .logo { font-weight: 700; opacity: .5; font-size: 1rem; letter-spacing: -.02em; }
.site .trust-stats { display: flex; gap: 48px; flex-wrap: wrap; }
.site .trust-stats strong { display: block; font-size: 1.5rem; font-family: var(--font-head); color: var(--brand); }
.site .trust-stats span { font-size: .82rem; opacity: .66; }

.site .feat h3 { margin-top: .2em; }
.site .svc-list { display: grid; gap: 2px; }
.site .svc-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  padding: calc(var(--gap) * .8) 0; border-top: 1px solid var(--line);
}
.site .svc-row:last-child { border-bottom: 1px solid var(--line); }

.site .alt-row { margin-top: calc(var(--gap) * 1.6); }
.site .alt-row.flip > div:first-child { order: 2; }

.site .stat strong {
  display: block; font-family: var(--font-head); font-weight: var(--head-weight);
  font-size: clamp(1.8rem, 3.2cqw, 2.6rem); color: var(--brand); letter-spacing: -.03em;
}
.site .stat span { font-size: .85rem; opacity: .68; }
.site .stat-box {
  padding: calc(var(--gap) * 1.1); border-radius: var(--radius-lg);
  background: var(--brand-wash); border: var(--card-border);
}

.site blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.site .quote-card blockquote::before { content: '\201C'; }
.site .quote-card blockquote::after  { content: '\201D'; }
.site figcaption { margin-top: 1em; font-weight: 600; font-size: .9rem; }
.site figcaption span { display: block; font-weight: 400; opacity: .6; font-size: .82rem; }
.site .quote-big blockquote {
  font-family: var(--font-head); font-size: clamp(1.3rem, 2.6cqw, 1.9rem);
  line-height: 1.32; letter-spacing: var(--head-tracking);
}
.site .quote-big { margin: 0; }

.site .faq { display: grid; }
.site .faq-row { border-top: 1px solid var(--line); padding: 1.1em 0; }
.site .faq-row:last-child { border-bottom: 1px solid var(--line); }
.site .faq-row summary {
  cursor: pointer; font-weight: 600; font-family: var(--font-head);
  font-size: 1.04rem; list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.site .faq-row summary::-webkit-details-marker { display: none; }
.site .faq-row summary::after { content: '+'; color: var(--brand); font-size: 1.3rem; line-height: 1; }
.site .faq-row[open] summary::after { content: '\2212'; }
.site .faq-2 { gap: calc(var(--gap) * 1.2); }
.site .faq-item h3 { font-size: 1.02rem; }

.site .cta-band { background: var(--brand); }
.site .cta-band h2, .site .cta-band .lede { color: var(--brand-ink); }
.site .cta-band .lede { opacity: .86; margin-top: .6em; }
.site .cta-split {
  display: flex; gap: var(--gap); align-items: center; justify-content: space-between;
  padding: calc(var(--gap) * 1.2); border-radius: var(--radius-lg);
  background: var(--brand-wash); border: var(--card-border); flex-wrap: wrap;
}
.site .cta-split .actions { margin-top: 0; }

.site .foot { background: var(--paper-alt); border-top: 1px solid var(--line); }
.site .foot-grid { align-items: start; }
.site .foot-brand p { max-width: 30ch; font-size: .9rem; }
.site .foot ul { list-style: none; margin: .6em 0 0; padding: 0; display: grid; gap: .45em; }
.site .foot a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.site .foot a:hover { color: var(--brand); }
.site .foot-legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: calc(var(--gap) * 1.4); padding-top: calc(var(--gap) * .8);
  border-top: 1px solid var(--line); font-size: .82rem; opacity: .6;
}
/* ---------------------------------------------------- collection blocks -- */

.site .page-head { padding-bottom: calc(var(--pad) * .55); }
.site .page-head .lede { margin-top: .8em; }

.site .post-card { display: flex; flex-direction: column; }
.site .post-card .art { border-radius: 0; }
.site .post-body { padding: calc(var(--gap) * .8); }
.site .post-body h3 { margin: .4em 0 0; }
.site .post-meta {
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand);
}

.site .post-list { display: grid; }
.site .post-row {
  display: flex; justify-content: space-between; gap: var(--gap); align-items: baseline;
  padding: calc(var(--gap) * .85) 0; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.site .post-row:last-child { border-bottom: 1px solid var(--line); }
.site .post-row:hover h3 { color: var(--brand); }
.site .post-row .post-meta { white-space: nowrap; color: var(--ink-soft); }

.site .prose h1 { margin-top: .4em; }
.site .prose .lede { margin: .8em 0 1.6em; }
.site .prose .art { margin-bottom: 1.8em; }
.site .prose h2 { margin-top: 1.6em; font-size: calc(1.4rem * var(--head-scale)); }
.site .prose p { font-size: 1.02rem; line-height: 1.75; margin-top: .9em; }

.site .foot.simple { padding-block: calc(var(--pad) * .5); }
.site .foot-simple { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .88rem; }