/* SUBTXT v0.1: structural layer over the base CSS.
   Brand tokens (colour/type) are deliberately neutral until the Figma brand file is readable. */
:root {
  --sx-ink: var(--ink, #121111);
  --sx-line: var(--line-2, #0000001f);
  --sx-card: var(--card, #f4f2f0);
  --sx-ph: repeating-linear-gradient(135deg, #00000008 0 12px, #00000012 12px 24px);
}

.sx-wordmark { font: 700 20px/1 var(--font-geist, system-ui), sans-serif; letter-spacing: .08em; color: currentColor; }

/* placeholder tile: content Matt still has to supply */
.sx-ph {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px;
  background: var(--sx-ph), var(--sx-card); border: 1px dashed #0000003d; border-radius: inherit;
  color: #00000080; font: 500 11px/1.3 var(--font-geist-mono, ui-monospace), monospace; text-transform: uppercase;
  letter-spacing: .06em; text-align: center; padding: 12px;
}
.sx-ph--card { min-height: 260px; border-radius: 20px; }
.hero-card .sx-ph { position: absolute; inset: 0; }
.sx-src { display: block; margin-top: 6px; font-size: 12px; opacity: .55; }

.sx-sub { max-width: 760px; margin: 18px auto 0; text-align: center; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; opacity: .8; }

/* engine: stats bento */
.sx-engine { text-align: center; }
.sx-engine__title { text-transform: uppercase; }
.sx-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; max-width: 980px; margin: 40px auto 24px; }
.sx-bento__tile { background: var(--sx-card); border: 1px solid var(--sx-line); border-radius: 28px; padding: 28px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; min-height: 160px; }
.sx-bento__tile strong { font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; }
.sx-bento__tile span { margin-top: 8px; opacity: .65; }
.sx-bento__tile--hero { grid-row: span 2; }
.sx-bento__tile--hero strong { font-size: clamp(48px, 7vw, 96px); }
.sx-engine__note { max-width: 640px; margin: 0 auto 24px; opacity: .8; }

/* why: replaces testimonials */
.sx-why { text-align: center; }
.sx-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 36px auto 28px; text-align: left; }
.sx-why__col { border-radius: 28px; padding: 28px; border: 1px solid var(--sx-line); }
.sx-why__col h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; opacity: .6; }
.sx-why__col li { list-style: none; padding: 12px 0; border-top: 1px solid var(--sx-line); }
.sx-why__col--them li { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }
.sx-why__col--us { background: var(--sx-ink); color: #fff; }
.sx-why__col--us h3 { opacity: .8; }
.sx-why__col--us li { border-color: #ffffff1f; }
.sx-stat { max-width: 640px; margin: 0 auto; }
.sx-stat strong { display: block; font-size: 56px; line-height: 1.1; }

/* offerings: replaces pricing */
.sx-offers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.sx-offer { display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.sx-offer__tag { font: 500 11px/1 var(--font-geist-mono, ui-monospace), monospace; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }
.sx-offer.pr-card--feat { grid-column: span 2; }

.sx-proof figcaption { margin-top: 10px; font-size: 12px; opacity: .6; }
.sx-contact { margin: 0 auto; max-width: 980px; padding: 80px 24px; text-align: center; border: 1px dashed #0000003d; border-radius: 28px; font: 500 13px var(--font-geist-mono, ui-monospace), monospace; text-transform: uppercase; opacity: .6; }
.sx-foot { display: grid; gap: 20px; padding: 40px 0; }
.sx-foot__tag { font-size: 22px; }
.sx-foot__links { display: flex; flex-wrap: wrap; gap: 10px 22px; opacity: .75; }
.sx-foot__legal { font-size: 12px; opacity: .5; }

@media (max-width: 860px) {
  .sx-bento, .sx-why__grid { grid-template-columns: 1fr; }
  .sx-bento__tile--hero { grid-row: auto; }
  .sx-offers__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .sx-offers__grid { grid-template-columns: 1fr; } .sx-offer.pr-card--feat { grid-column: auto; } }
.sx-logo{font:800 22px/1 var(--font-geist,system-ui),sans-serif;letter-spacing:.06em;opacity:.55;white-space:nowrap;padding:0 28px}
.fl-footer__hero:before{background:none!important}
.sx-foot{max-width:1200px;margin:0 auto;padding:40px 24px}