@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/geist-400.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/geist-600.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/geist-700.woff2") format("woff2");
}
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/fonts/geist-800.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/geist-mono-400.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/geist-mono-500.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/geist-mono-600.woff2") format("woff2");
}
:root {
--bg: #ffffff;
--ink: #0a0a0b;
--muted: #474751; 
--line: #e6e6ec; 
--soft: #fafafb; 
--pink: #ff2e9a; 
--pink-text: #d6006e; 
--band-muted:#b4b4be; 
--svc-outbound-eng: #E8930C; 
--svc-inbound-eng: #1E2A78; 
--svc-outbound-dm: #7C3AED; 
--svc-inbound-dm: #FACC15; 
--svc-email: #15803D; 
--svc-newsletter: #B08968; 
--svc-outbound-eng-ink: #8A5300;
--svc-inbound-eng-ink: #1E2A78;
--svc-outbound-dm-ink: #5B21B6;
--svc-inbound-dm-ink: #0a0a0b;
--svc-email-ink: #146B2F;
--svc-newsletter-ink: #0a0a0b;
--svc-outbound-eng-lit: #E8930C; 
--svc-inbound-eng-lit: #7B88DE; 
--svc-outbound-dm-lit: #A375F2; 
--svc-inbound-dm-lit: #FACC15; 
--svc-email-lit: #1BA44E; 
--svc-newsletter-lit: #B08968; 
--svc-outbound-eng-card: #EB950C; 
--svc-inbound-eng-card: #9AA4E6; 
--svc-outbound-dm-card: #BA97F5; 
--svc-inbound-dm-card: #FACC15; 
--svc-email-card: #20C15C; 
--svc-newsletter-card: #C1A288; 
--font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-body: "Geist", var(--font-fallback);
--font-head: "Geist", var(--font-fallback);
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fs-100: 1rem; 
--fs-200: 1.0625rem; 
--fs-300: 1.25rem; 
--fs-400: 1.35rem; 
--fs-500: clamp(1.8rem, 3.4vw, 2.4rem); 
--fs-600: clamp(2.5rem, 5.5vw, 3.8rem); 
--lh-tight: 1.05;
--lh-body: 1.6;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 1rem;
--space-4: 1.5rem;
--space-5: 2.5rem;
--space-6: 4rem;
--measure: 72ch; 
--maxw: 1520px; 
--gutter: clamp(20px, 4vw, 64px); 
--radius: 0px; 
--radius-sm: 0px;
--shadow: none;
--shadow-pink: 0 8px 24px rgba(255, 46, 154, 0.32);
--header-h: calc(45px + 2rem);
--banner-h: calc(198.66px + 0.87rem); 
--glow-pink: 0 0 14px rgba(255, 46, 154, 0.55), 0 0 34px rgba(255, 46, 154, 0.32);
--glow-pink-lg: 0 0 20px rgba(255, 46, 154, 0.70), 0 0 46px rgba(255, 46, 154, 0.42);
--shadow-pink-lg: 0 12px 30px rgba(255, 46, 154, 0.44);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, calc(13.6px + 0.4vw), 20px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
margin: 0;
overflow-x: clip; 
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-200);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--pink); color: #fff; }
main {
max-width: var(--measure);
margin-inline: auto;
padding: var(--space-6) var(--space-4);
}
h1, h2, h3 {
font-family: var(--font-head);
line-height: var(--lh-tight);
font-weight: 800;
letter-spacing: -0.04em;
margin: 0 0 var(--space-3);
color: var(--ink);
}
h1, h2, h3, h4, .lead { text-wrap: balance; }
body.home .hero h1 { text-wrap: wrap; } 
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
th, td, .checks-count { font-variant-numeric: tabular-nums; }
h1 { font-size: var(--fs-600); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-size: var(--fs-500); margin-top: var(--space-5); }
h3 { font-size: var(--fs-400); margin-top: var(--space-4); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 var(--space-3); max-width: var(--measure); }
a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--pink);
text-decoration-thickness: 2px;
text-underline-offset: 0.2em;
}
a:hover { color: var(--pink-text); text-decoration-color: var(--pink-text); }
:focus-visible {
outline: 2px solid var(--pink);
outline-offset: 2px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: #fff; 
color: var(--ink);
padding: var(--space-2) var(--space-3);
font-weight: 600;
text-decoration: none;
}
.skip-link:focus {
left: 0;
}
ul, ol { padding-left: var(--space-4); }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--pink-text); font-weight: 600; }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code {
background: var(--soft);
border: 1px solid var(--line);
padding: 0.1em 0.4em;
}
hr {
border: 0;
height: 1px;
background: var(--line);
margin: var(--space-5) 0;
}
.muted { color: var(--muted); }
.lead { font-size: var(--fs-300); color: var(--muted); line-height: 1.5; }
.kicker {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pink-text);
margin: 0 0 var(--space-3);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 var(--space-4);
}
.tri {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 9px solid var(--pink);
}
.hl {
position: relative;
display: inline-block;
z-index: 0;
color: inherit;
}
.hl::before {
content: "";
position: absolute;
left: -0.06em;
right: -0.06em;
top: 14%;
bottom: 12%;
background: var(--pink);
transform: skewX(-10deg);
z-index: -1;
}
.secondary-cta { color: var(--muted); font-size: var(--fs-100); margin-top: var(--space-3); }
.secondary-cta a { font-weight: 600; color: var(--ink); }
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin: var(--space-4) 0;
border: 1px solid var(--line);
font-size: var(--fs-100);
}
th, td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
th {
background: var(--soft);
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink);
}
tbody tr:last-child td { border-bottom: 0; }
.site-header {
position: sticky;
top: 0;
z-index: 50;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: #0B0B0B;
}
.site-header > .wrap {
padding-block: var(--space-3);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.brand {
display: inline-block;
width: 92px;
height: 44px;
background-image: url("/images/wreckedify-neon-mark.webp"); 
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
text-indent: -9999px;
overflow: hidden;
white-space: nowrap;
flex: none;
}
.brand:hover { text-decoration: none; }
.site-nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
margin: 0;
padding: 0;
}
.site-nav li { margin: 0; }
.site-nav li::marker { content: none; }
.site-nav a {
font-family: var(--font-mono);
color: #fff;
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
padding-top: 3px;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
transition: color 0.15s ease;
}
.site-nav a:hover { color: #fff; text-decoration: none; border-bottom-color: #fff; }
.site-nav a[aria-current="page"] {
color: #fff; 
border-bottom-color: var(--pink);
}
.site-nav a.nav-cta {
background: #12B4EC;
color: #0b0b0b;
border-bottom: 0;
padding: 10px 18px;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
text-transform: none;
letter-spacing: 0;
box-shadow: 0 8px 24px rgba(18, 180, 236, 0.32);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.site-nav a.nav-cta:hover { color: #0b0b0b; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(18, 180, 236, 0.44); }
.bp-hero-dark {
margin-top: 0; 
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
color: #fff;
padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.bp-hero-dark + .blueprint-band { margin-top: 0; }
.bp-hero-inner {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(var(--space-4), 5vw, var(--space-6));
align-items: center;
}
.neon-blue {
color: #12B4EC;
text-shadow: 0 0 10px rgba(18, 180, 236, 0.55),
0 0 26px rgba(18, 180, 236, 0.32);
}
body.blueprint .bp-hero-dark h1 { color: #12B4EC; max-width: 18ch; }
body.blueprint .bp-hero-dark .eyebrow { color: var(--blueprint-azure); }
.bp-hero-dark .eyebrow .tri { border-bottom-color: var(--blueprint-azure); }
.bp-hero-dark .lead { color: #e9e9ef; font-size: var(--fs-300); max-width: 42ch; }
.bp-hero-dark p { color: var(--band-muted); }
.bp-hero-dark .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: var(--space-4) 0 var(--space-2); }
body.blueprint .bp-hero-dark a:not(.btn) { color: #fff; text-decoration-color: var(--blueprint-azure); }
body.blueprint .bp-hero-dark .secondary-cta { color: var(--band-muted); }
.bp-hero-card {
border: 1px solid #3a3a48;
border-top: 4px solid #12B4EC;
background: #24242f;
padding: var(--space-4);
}
.bp-hero-card .bp-card-price {
font-family: var(--font-mono);
font-size: 2rem;
font-weight: 800;
color: #fff;
margin: 0 0 var(--space-1);
}
.bp-hero-card .bp-card-term { font-size: 1rem; font-weight: 600; color: var(--band-muted); }
.bp-hero-card .bp-card-gate {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #12B4EC;
margin: 0 0 var(--space-3);
}
.bp-hero-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3a3a48; }
.bp-hero-facts li {
border-bottom: 1px solid #3a3a48;
padding: var(--space-2) 0;
font-size: var(--fs-100);
color: #fff;
margin: 0;
}
.bp-hero-facts li::marker { content: none; }
main section { margin-top: var(--space-6); }
main section > h2 { margin-top: 0; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
padding: 12px 22px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-primary {
background: var(--pink);
color: #0b0b0b;
box-shadow: var(--shadow-pink);
}
.btn-primary:hover {
background: var(--pink);
color: #0b0b0b;
transform: translateY(-2px);
box-shadow: var(--shadow-pink-lg);
text-decoration: none;
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn-ghost:hover {
background: var(--ink);
color: #fff;
transform: translateY(-2px);
text-decoration: none;
}
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.faq h3 {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--line);
font-size: var(--fs-400);
}
.faq h2 + h3, .faq h3:first-of-type { border-top: 0; padding-top: 0; }
form.apply-form {
display: grid;
gap: var(--space-3);
max-width: var(--measure);
margin-top: var(--space-4);
}
form.apply-form label > .req-row { display: flex; align-items: baseline; gap: 0.3em; }
form.apply-form .req { color: var(--pink-text); font-weight: 700; }
form.apply-form label {
display: grid;
gap: var(--space-1);
font-weight: 600;
font-size: var(--fs-100);
}
form.apply-form input,
form.apply-form textarea,
form.apply-form select {
font: inherit;
color: var(--ink);
background: #fff;
border: 1px solid #8f8f98; 
padding: var(--space-2) var(--space-3);
}
form.apply-form input:focus-visible,
form.apply-form textarea:focus-visible,
form.apply-form select:focus-visible {
outline: 2px solid var(--pink-text);
outline-offset: 2px;
border-color: var(--pink-text);
}
form.apply-form textarea { min-height: 7rem; resize: vertical; }
form.apply-form button {
justify-self: start;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
color: #0b0b0b; 
background: var(--pink);
border: 0;
padding: 14px 28px;
cursor: pointer;
box-shadow: var(--shadow-pink);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
form.apply-form button:hover { transform: translateY(-2px); box-shadow: var(--shadow-pink-lg); }
form.apply-form button:active { transform: translateY(0); }
.hp { position: absolute; left: -9999px; } 
form.apply-form .field-help { font-weight: 400; color: var(--muted); }
article { max-width: var(--measure); }
.breadcrumb {
font-family: var(--font-mono);
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
margin-bottom: var(--space-3);
}
.breadcrumb a { color: var(--muted); text-decoration-color: var(--line); }
.breadcrumb a:hover { color: var(--ink); }
.byline {
font-family: var(--font-mono);
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
margin-top: 0;
}
.answer {
font-size: var(--fs-300);
line-height: 1.5;
color: var(--ink);
border-left: 3px solid var(--pink);
background: var(--soft);
padding: var(--space-3) var(--space-4);
margin: var(--space-4) 0 var(--space-5);
}
article h2 {
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
article h2#related, article h2#apply { border-top: 0; }
.toc {
border: 1px solid var(--line);
background: #fff;
padding: var(--space-3) var(--space-4);
margin: var(--space-4) 0 var(--space-5);
}
.toc-title {
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin: 0 0 var(--space-2);
}
.toc ul { margin: 0; padding-left: var(--space-4); }
.toc li { margin-bottom: var(--space-1); }
.dek {
font-size: var(--fs-200);
color: var(--muted);
margin: 0 0 var(--space-4);
}
figure.shot {
margin: var(--space-5) 0;
max-width: var(--measure);
}
figure.shot img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--line);
background: var(--soft);
}
figure.shot figcaption {
font-size: var(--fs-100);
color: var(--muted);
margin-top: var(--space-2);
padding-left: var(--space-3);
border-left: 2px solid var(--line);
}
article blockquote {
margin: var(--space-4) 0;
padding-left: var(--space-4);
border-left: 3px solid var(--pink);
max-width: var(--measure);
}
article blockquote p { margin-bottom: 0; }
article pre {
background: var(--soft);
border: 1px solid var(--line);
padding: var(--space-3);
margin: var(--space-4) 0;
overflow-x: auto;
max-width: var(--measure);
}
article pre code { background: none; border: 0; padding: 0; }
article ol { margin-bottom: var(--space-4); }
.related, .cta {
border: 1px solid var(--line);
background: #fff;
padding: var(--space-4) var(--space-4) var(--space-3);
}
.related h2, .cta h2 { font-size: var(--fs-400); margin-top: 0; padding-top: 0; border-top: 0; }
.related ul { padding-left: var(--space-4); margin-bottom: 0; }
.cta { border-top: 3px solid var(--pink); background: var(--soft); }
.work-grid {
list-style: none;
padding: 0;
margin: var(--space-4) 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.work-card {
margin: 0;
border: 0;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #fff;
padding: var(--space-4);
transition: background 0.18s ease;
}
.work-card:hover { background: var(--soft); }
#work .work-grid {
display: block;
border-top: 1px solid var(--line);
border-left: 0;
margin-top: var(--space-5);
}
#work .work-card {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--space-5);
align-items: start;
border-right: 0;
padding: var(--space-4) var(--space-3);
}
#work .work-card h3 { margin: 0; }
#work .work-card p { font-size: var(--fs-200); }
@media (max-width: 700px) {
#work .work-card { grid-template-columns: 1fr; gap: var(--space-2); }
#work .work-card p { font-size: var(--fs-100); }
}
.work-card h3 { margin: 0 0 var(--space-2); font-size: 1.1875rem; color: var(--ink); }
.work-card p { margin: 0; color: var(--muted); font-size: var(--fs-100); line-height: 1.55; max-width: none; }
.bp-pages .work-card img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--line);
margin-bottom: var(--space-3);
}
.form-sent { display: none; margin-top: var(--space-4); font-size: var(--fs-200); }
.form-sent.is-shown, .form-sent:target { display: block; }
form.apply-form[hidden] { display: none; }
body.blueprint .page-top a:not(.btn) { color: var(--on-dark); text-decoration-color: var(--blueprint-azure); }
.framework-intro { max-width: var(--measure); }
.pillars {
list-style: none;
counter-reset: pillar;
padding: 0;
margin: var(--space-5) 0 var(--space-4);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
counter-increment: pillar;
margin: 0;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #fff;
padding: var(--space-4);
transition: background 0.18s ease;
}
.pillar:hover { background: var(--soft); }
.pillar::before {
content: "0" counter(pillar);
display: block;
font-family: var(--font-mono);
font-size: 0.8125rem;
letter-spacing: 0.05em;
color: var(--muted);
margin-bottom: var(--space-3);
}
.pillar h3 { margin: 0 0 var(--space-1); font-size: 1.1875rem; color: var(--ink); }
.pillar p { margin: 0; color: var(--muted); font-size: var(--fs-100); line-height: 1.55; max-width: none; }
.framework-close { margin-top: var(--space-4); }
body.insights-hub main { max-width: none; margin: 0; padding: 0; }
body.insights-hub .wrap > .article-list { margin-top: var(--space-6); }
body.insights-hub .wrap > .related { margin-bottom: var(--space-6); }
.hub-hero {
margin-top: 0;
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
color: #fff;
padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
.hub-hero h1 { color: #fff; margin-top: 0; }
.hub-hero .lead { color: #e9e9ef; max-width: 60ch; }
.hub-hero .lead a { color: #fff; text-decoration-color: var(--pink); }
.article-list {
list-style: none;
padding: 0;
margin: var(--space-5) 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
border: 0;
}
.article-card {
border: 1px solid var(--line);
border-top: 4px solid var(--ink);
background: #fff;
padding: var(--space-4);
margin: 0;
display: flex;
flex-direction: column;
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.article-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 10, 11, 0.10); }
.article-card:hover { background: var(--soft); }
.article-card h2 {
margin: 0 0 var(--space-1);
font-size: var(--fs-400);
border-top: 0;
padding-top: 0;
}
.article-card h2 a { color: var(--ink); text-decoration: none; }
.article-card h2 a:hover { color: var(--pink-text); }
.article-meta {
display: inline-block;
align-self: flex-start;
width: fit-content;
background: var(--pink-text); 
color: #fff;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 9px;
margin: 0 0 var(--space-3);
}
.brand-banner {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
margin-bottom: var(--space-6);
padding: var(--space-4) 0 var(--space-5);
background: var(--ink);
text-align: center;
}
.brand-banner:has(+ .blueprint-band) { margin-bottom: 0; }
.brand-banner + .blueprint-band { margin-top: 0; }
.brand-banner h2 {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--band-muted);
margin: 0 0 var(--space-4);
}
.brand-banner > p {
color: var(--band-muted);
max-width: var(--measure);
margin: 0 auto var(--space-4);
padding: 0 var(--space-4);
}
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-inner {
display: flex;
width: max-content;
animation: brand-marquee 40s linear infinite;
}
.marquee:hover .marquee-inner { animation-play-state: paused; }
.marquee-track {
display: flex;
align-items: center;
gap: var(--space-6);
padding-left: 0;
padding-right: var(--space-6);
margin: 0;
list-style: none;
}
.marquee-track li { margin: 0; display: flex; align-items: center; }
.marquee-track img {
height: 44px;
width: auto;
object-fit: contain;
display: block;
}
.marquee-track img[src*="dry-guyz"] { height: 90px; }
.marquee-track img[src*="jfc"] { height: 84px; }
.marquee-track img[src*="the-collective-flow"] { height: 54px; }
.marquee-track img[src*="chatsheet"] { height: 20px; }
@keyframes brand-marquee { to { transform: translateX(-50%); } }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
body.home main { max-width: none; padding: 0; margin: 0; }
body.home main section { margin-top: 0; }
.hero {
position: relative;
overflow: hidden;
text-align: left;
}
body.home .hero { padding: clamp(12px, 1.5svh, 60px) 0 clamp(8px, 1svh, 40px); } 
body.home .hero .eyebrow { margin-bottom: 8px; }
body.home .hero::before,
body.home .hero::after {
content: "";
position: absolute;
top: -60px;
width: 2px;
height: 350px; 
background: var(--line);
transform: rotate(28deg);
transform-origin: top;
pointer-events: none;
}
body.home .hero::before { right: 4vw; }
body.home .hero::after { right: calc(4vw + 100px); width: 1px; }
.hero-inner { position: relative; z-index: 1; }
body.home .hero h1 {
font-size: clamp(2.6rem, 8vw, 7.2rem);
font-weight: 800;
line-height: 0.93;
letter-spacing: -0.045em;
margin: 0 0 12px; 
max-width: none;
text-wrap: balance;
}
.hero .lead {
font-size: clamp(1.15rem, 1.6vw, 1.3rem); 
color: var(--muted);
max-width: 600px;
margin: 0 0 var(--space-5);
line-height: 1.45; 
}
.hero-cta {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 14px;
margin: 0 0 var(--space-4);
}
.cred {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--muted);
max-width: 640px;
line-height: 1.9;
letter-spacing: 0.01em;
margin-top: var(--space-5);
}
.cred b, .cred strong { color: var(--ink); font-weight: 600; }
.prose { max-width: var(--measure); }
.home-section { padding: clamp(4rem, 8vw, 7rem) 0 0; }
.home-section:last-of-type { padding-bottom: clamp(4rem, 8vw, 7rem); }
.sec-head { max-width: 680px; margin-bottom: var(--space-5); }
.sec-head h2 {
font-size: clamp(2.2rem, 4.4vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.02;
margin: 0 0 var(--space-3);
}
.sec-head p { color: var(--muted); font-size: var(--fs-300); margin: 0; }
.grid4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.grid4 .card {
padding: 34px 28px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background 0.18s ease;
}
.grid4 .card:hover { background: var(--soft); }
.num {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--muted);
letter-spacing: 0.05em;
margin-bottom: var(--space-3);
}
.grid4 h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 9px; }
.grid4 p { color: var(--muted); font-size: var(--fs-100); line-height: 1.55; margin: 0; max-width: none; }
.path-cta { margin-top: var(--space-4); }
body.posttrace main { max-width: none; margin: 0; padding: 0; }
body.posttrace .pt-hero {
margin-top: 0;
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
color: #fff;
padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
body.posttrace .pt-hero h1 {
color: #fff;
font-size: clamp(3rem, 7vw, 6rem);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 0.98;
max-width: 16ch;
margin: 0 0 var(--space-3);
}
body.posttrace .pt-hero .eyebrow { color: var(--pink); }
body.posttrace .pt-hero .lead { font-size: var(--fs-300); color: #e9e9ef; max-width: 54ch; margin: 0 0 var(--space-3); }
body.posttrace .pt-hero .pt-hero-sub { color: var(--band-muted); max-width: 54ch; margin: 0 0 var(--space-5); }
body.posttrace .pt-hero .loop-price { color: #fff; }
body.posttrace .pt-hero .loop-term { color: var(--band-muted); }
body.posttrace .pt-hero .loop-gate { color: var(--pink); }
body.posttrace .pt-hero .hero-cta { margin-bottom: var(--space-3); }
body.posttrace .pt-hero .secondary-cta { color: var(--band-muted); }
body.posttrace .pt-hero .secondary-cta a { color: #fff; text-decoration-color: var(--pink); }
body.posttrace .pt-hero + .pt-band { margin-top: 0; }
body.posttrace .pt-hero-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 901px) {
body.posttrace .pt-hero-inner {
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(var(--space-4), 5vw, var(--space-6));
align-items: center;
}
body.posttrace .pt-hero h1 { font-size: clamp(3rem, 6vw, 5rem); max-width: none; }
}
.pt-hero-copy { min-width: 0; }
.pt-hero-card {
min-width: 0;
background: #24242f;
border: 1px solid #3a3a48;
border-top: 4px solid var(--pink);
padding: var(--space-4);
}
.pt-hero-card .pt-card-key {
display: inline-block; background: var(--pink); color: var(--ink);
font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.2rem 0.5rem; margin: 0;
}
.pt-hero-card .pt-card-sub {
font-family: var(--font-mono); font-size: 0.8125rem; color: #c9c9d2;
margin: 0.5rem 0 var(--space-3); max-width: none;
}
.pt-hero-card .ptr-legend { margin-top: var(--space-3); }
.pt-hero-card .loop-price { margin: var(--space-3) 0 var(--space-1); }
body.posttrace .pt-hero-card .loop-price { color: var(--pink); }
body.posttrace .pt-hero-card .loop-gate {
color: #c9c9d2; margin: 0;
text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8125rem; line-height: 1.5;
}
.pt-close,
.hl-close { padding: clamp(3.5rem, 7vw, 5.5rem) 0; text-align: center; }
.pt-close .kicker,
.hl-close .kicker { color: var(--pink); margin-bottom: 18px; }
.pt-close h2,
.hl-close h2 {
color: #fff;
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.02;
margin: 0 auto var(--space-3);
max-width: 20ch;
}
.pt-close p,
.hl-close p { color: var(--band-muted); max-width: 58ch; margin: 0 auto var(--space-4); }
.pt-close .pt-close-cta,
.hl-close .hl-close-cta { margin-bottom: var(--space-3); }
.pt-close .pt-close-alt,
.hl-close .hl-close-alt { font-size: var(--fs-100); margin-bottom: 0; }
.pt-close .pt-punch,
.hl-close .hl-punch {
color: #fff;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 800;
letter-spacing: -0.03em;
margin: var(--space-5) auto var(--space-4);
}
.pt-close .pt-close-alt a,
.hl-close .hl-close-alt a { color: #fff; text-decoration-color: var(--pink); }
.pt-band,
.hl-band {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
color: #fff;
padding: clamp(3.5rem, 7vw, 5.5rem) 0;
text-align: center;
}
.pt-band .kicker,
.hl-band .kicker { color: var(--pink); }
.pt-band h2,
.hl-band h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.04;
max-width: 22ch;
margin: 0 auto var(--space-4);
color: #fff;
}
.pt-band p,
.hl-band p { color: rgba(255, 255, 255, 0.78); max-width: 60ch; margin: 0 auto var(--space-3); }
.pt-band .pt-punch,
.hl-band .hl-punch {
color: #fff;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 800;
letter-spacing: -0.03em;
margin-top: var(--space-5);
}
.pt-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
margin: var(--space-5) 0 0;
}
.pt-grid.is-tight { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pt-cell {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: var(--space-4);
background: #fff;
transition: background 0.18s ease;
}
.pt-cell:hover { background: var(--soft); }
.pt-cell .num { color: var(--pink-text); margin-bottom: var(--space-2); }
.pt-cell h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.pt-cell p { font-size: var(--fs-100); line-height: 1.55; color: var(--muted); margin: 0; max-width: none; }
.pt-grid.is-tight .pt-cell { padding: var(--space-3) var(--space-4); }
.pt-grid.is-tight .pt-cell h3 { font-size: 1rem; }
.pt-grid.is-tight .pt-cell p { font-size: 1rem; }
.pt-callout {
border: 1px solid var(--ink);
border-top: 4px solid var(--pink);
padding: var(--space-4) var(--space-5);
margin: var(--space-5) 0 0;
}
.pt-callout p {
margin: 0;
font-size: var(--fs-400);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.35;
max-width: 60ch;
}
.pt-asks {
list-style: none;
padding: 0;
margin: var(--space-3) 0 0;
border-top: 1px solid var(--line);
}
.pt-asks li {
font-family: var(--font-mono);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--ink);
margin: 0;
padding: var(--space-3) 0 var(--space-3) var(--space-4);
border-bottom: 1px solid var(--line);
position: relative;
}
.pt-asks li::before {
content: "›";
position: absolute;
left: 0;
color: var(--pink-text);
font-weight: 700;
}
.pt-lead-in { font-weight: 700; margin-top: var(--space-5); }
.pt-subhead { font-size: 1.0625rem; font-weight: 700; margin: var(--space-5) 0 var(--space-3); }
.pt-punch,
.hl-punch {
font-size: var(--fs-400);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.35;
margin-top: var(--space-4);
}
.pt-agencies {
border: 1px solid var(--line);
padding: var(--space-4);
margin-top: var(--space-5);
}
.pt-agencies p { margin: 0; color: var(--muted); font-size: var(--fs-100); max-width: 62ch; }
.faq-item { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.faq-item > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary h3 {
display: inline;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
}
.faq-item > summary::after { content: "+"; font-family: var(--font-mono); color: var(--pink-text); flex: none; }
.faq-item[open] > summary::after { content: "–"; }
.faq-item > p { color: var(--muted); margin: var(--space-3) 0 0; max-width: 68ch; }
.connector {
border: 1px solid var(--ink);
border-top: 4px solid var(--pink);
background: var(--soft);
padding: clamp(2rem, 4vw, 3.5rem);
}
.connector h2 { margin-top: 0; }
.connector p { max-width: 62ch; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: var(--space-4) 0; max-width: 62ch; }
.steps > li {
counter-increment: step;
position: relative;
padding: var(--space-3) 0 var(--space-3) 3.25rem;
border-top: 1px solid var(--line);
margin: 0;
}
.steps > li:first-child { border-top: 0; }
.steps > li::before {
content: "0" counter(step);
position: absolute;
left: 0;
top: var(--space-3);
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--pink-text);
letter-spacing: 0.05em;
}
.band {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
color: #fff;
}
.posttrace-band {
padding: clamp(3.5rem, 7vw, 5.5rem) 0;
text-align: center;
}
.posttrace-band h2 {
color: #fff;
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.06;
margin: 0 auto var(--space-4);
max-width: 24ch;
}
.neon { color: var(--pink); }
.neon .pt-trace {
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.55),
0 0 26px rgba(255, 255, 255, 0.32);
}
.posttrace-band h2 .neon,
.band .neon,
.closing .neon,
body.posttrace .pt-hero .neon,
.loop-hero .neon,
.pt-band .neon {
text-shadow: 0 0 10px rgba(255, 46, 154, 0.55),
0 0 26px rgba(255, 46, 154, 0.32);
}
.posttrace-band p {
color: #e9e9ef;
font-size: 1.25rem;
line-height: 1.5;
max-width: 60ch;
margin: 0 auto var(--space-4);
}
.posttrace-band .pt-chat {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: 44rem;
margin: 0 auto var(--space-4);
text-align: left;
}
.posttrace-band .pt-ask,
.posttrace-band .pt-answer {
margin: 0;
max-width: 90%;
padding: var(--space-2) var(--space-3);
font-size: 1rem;
line-height: 1.45;
color: #fff;
}
.posttrace-band .pt-ask {
align-self: flex-end;
background: #23232a;
}
.posttrace-band .pt-answer {
align-self: flex-start;
background: #141418;
border-left: 3px solid var(--pink);
}
.posttrace-band .pt-body {
max-width: 64rem;
margin: 0 auto var(--space-4);
}
@media (min-width: 901px) {
.posttrace-band .pt-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
align-items: center;
}
.posttrace-band .pt-body > * { margin: 0; max-width: none; }
}
.posttrace-band .pt-mcp {
max-width: 62ch;
margin: 0 auto var(--space-4);
text-align: left;
}
.posttrace-band .pt-mcp p {
font-size: 1.0625rem;
line-height: 1.55;
color: #c7c7d2;
margin: 0 0 var(--space-3);
max-width: none;
}
.posttrace-band .pt-mcp p:last-child { margin-bottom: 0; }
.pt-system { margin: 0; padding: 0; text-align: center; }
.pt-system--home .pt-system-crop { max-width: 38rem; margin-inline: auto; }
.pt-system--page .pt-system-crop { max-width: 46rem; margin-inline: auto; }
.pt-system-stripe {
background: var(--bg);
padding-block: clamp(1.5rem, 3vw, 2.25rem);
margin-block: clamp(2.5rem, 5vw, 3.5rem) var(--space-3);
}
.pt-system-crop { box-shadow: 0 18px 50px rgba(10, 10, 11, 0.22); }
.pt-system-crop {
position: relative;
width: 100%;
aspect-ratio: 1080 / 1040;
overflow: hidden;
background: #060606;
border: 1px solid #1d1d26;
border-top: 4px solid var(--pink);
}
.pt-system-video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1080 / 1350;
transform: translateY(-17.185%);
}
.pt-system figcaption {
margin: var(--space-3) auto 0;
max-width: 46ch;
font-size: 1rem;
line-height: 1.5;
color: var(--muted);
}
.posttrace-band .pt-system figcaption { color: #c7c7d2; margin-bottom: var(--space-5); }
.posttrace-band .posttrace-more { margin-bottom: 0; }
.posttrace-band .posttrace-more .btn-primary { box-shadow: var(--glow-pink); }
.posttrace-band .posttrace-more .btn-primary:hover { box-shadow: var(--glow-pink-lg); }
.closing {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
color: #fff;
clip-path: polygon(0 54px, 100% 0, 100% 100%, 0 100%);
margin-top: var(--space-6);
padding: 150px 0 120px;
text-align: center;
overflow: hidden;
}
.ribbon {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: #12B4EC;
color: #0b0b0b;
padding: var(--space-4) 0;
}
body.home .ribbon { margin-top: 6.5rem; }
.ribbon .ribbon-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.ribbon p {
margin: 0;
font-size: var(--fs-300);
font-weight: 700;
letter-spacing: -0.01em;
max-width: 44ch;
}
.closing-blue {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
margin-top: var(--space-6);
background: #12B4EC;
color: #0b0b0b;
padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(5rem, 9vw, 7rem);
text-align: center;
}
.closing-blue h2 {
color: #0b0b0b;
font-size: clamp(2.2rem, 5vw, 3.4rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.04;
margin: 0 auto var(--space-4);
max-width: 20ch;
}
.closing-blue p { color: #0b0b0b; max-width: 60ch; margin: 0 auto var(--space-4); }
.closing-blue .closing-blue-cta { margin-bottom: var(--space-3); }
.closing-blue .closing-blue-alt { font-size: var(--fs-100); margin-bottom: 0; }
.closing-blue .closing-blue-alt a { color: #0b0b0b; font-weight: 700; }
body.home .closing-blue { margin-top: var(--space-6); } 
.closing-blue + .closing,
.blueprint-band + .closing { margin-top: -54px; } 
.closing-logo,
.neon-mark {
display: block;
width: min(320px, 62vw);
height: auto;
margin: 0 auto var(--space-4);
pointer-events: none;
}
.closing .kicker { color: var(--pink); margin-bottom: 22px; }
.closing .closing-alt { margin: var(--space-3) 0 0; font-size: var(--fs-100); color: var(--band-muted); }
.closing .closing-alt a { color: #fff; font-weight: 700; text-decoration-color: var(--pink); }
.closing-blue a:not(.btn):hover,
.blueprint-band a:not(.btn):hover {
color: #0b0b0b;
text-decoration-color: #0b0b0b;
text-decoration-thickness: 2px;
}
.closing .closing-alt a:hover { color: #fff; text-decoration-color: #fff; }
.closing-blue :focus-visible,
.blueprint-band :focus-visible,
.ribbon :focus-visible { outline-color: #0b0b0b; }
.closing-blue a:not(.btn),
.blueprint-band a:not(.btn) { text-decoration-color: #0b0b0b; }
.closing h2 {
color: #fff;
font-size: clamp(2.6rem, 6vw, 5rem);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 0.98;
margin: 0 0 var(--space-3);
}
.closing p {
color: #9a9aa5;
font-size: var(--fs-300);
margin: 0 auto var(--space-5);
font-family: var(--font-mono);
letter-spacing: 0.02em;
max-width: none;
}
body.blueprint {
--blueprint-azure: #12B4EC; 
--blueprint-azure-ink: #0B7BA3;
}
.blueprint-band {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: #12B4EC;
color: #0b0b0b;
padding: clamp(3.5rem, 7vw, 5.5rem) 0;
text-align: center;
}
.blueprint-band h2 {
color: #0b0b0b;
font-size: clamp(2.6rem, 5.5vw, 4rem);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1.0;
margin: 0 auto var(--space-2);
max-width: 16ch;
}
.blueprint-band .blueprint-sub {
font-size: var(--fs-300);
font-weight: 600;
color: #0b0b0b;
max-width: 32ch;
margin: 0 auto var(--space-4);
}
.blueprint-band p { color: #0b0b0b; max-width: 54ch; margin: 0 auto var(--space-3); }
.blueprint-band .blueprint-whole { font-size: var(--fs-400); font-weight: 700; margin-top: var(--space-4); }
.blueprint-band .blueprint-credit {
font-size: var(--fs-100);
max-width: 46ch;
margin: var(--space-4) auto 0;
}
.blueprint-band-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--space-4); }
.btn-azure { background: #12B4EC; color: #0b0b0b; box-shadow: 0 8px 24px rgba(18, 180, 236, 0.32); }
.btn-azure:hover { background: #12B4EC; color: #0b0b0b; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(18, 180, 236, 0.44); text-decoration: none; }
.btn-azure:active, .btn-ink:active { transform: translateY(0); }
.btn-ink { background: #0b0b0b; color: #fff; }
.btn-ink-outline { background: transparent; color: #0b0b0b; border-color: #0b0b0b; }
.btn-outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-light:hover { background: #fff; color: #0b0b0b; transform: translateY(-2px); text-decoration: none; }
.btn-outline-light:active { transform: translateY(0); }
.btn-ink-outline:hover { background: #0b0b0b; color: #fff; transform: translateY(-2px); text-decoration: none; }
.btn-ink-outline:active { transform: translateY(0); }
.btn-ink:hover { background: #0b0b0b; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); text-decoration: none; }
body.process main,
body.about main,
body.st-louis main { max-width: none; margin: 0; padding: 0; }
body.st-louis .pt-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
body.st-louis .pt-grid > .pt-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.about .svc-hero .founder-grid { align-items: center; }
body.about .svc-hero .founder-photo { max-width: 340px; justify-self: end; }
.svc-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1rem, 3vw, 2rem); }
.svc-hero h1 {
font-size: clamp(2.6rem, 6vw, 4.5rem);
letter-spacing: -0.05em;
line-height: 1.0;
margin: 0 0 var(--space-3);
max-width: 18ch;
}
.svc-hero .lead { max-width: 58ch; }
.svc-band { padding: clamp(3.5rem, 7vw, 5.5rem) 0; text-align: center; }
.svc-band .kicker { color: var(--pink); margin-bottom: 18px; }
.svc-band h2 {
color: #fff;
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.02;
margin: 0 auto var(--space-3);
max-width: 18ch;
}
.svc-band p { color: var(--band-muted); max-width: 58ch; margin: 0 auto; font-size: var(--fs-300); }
body.loop main,
body.table main,
body.circuit main,
body.gateway main { max-width: none; margin: 0; padding: 0; }
.loop-hero {
margin-top: 0; 
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
color: #fff;
padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.loop-hero .eyebrow { color: var(--pink); }
.loop-hero h1 { color: #fff; }
.loop-hero .lead { color: #fff; }
.loop-hero .loop-price { color: #fff; }
.loop-hero .loop-term { color: var(--band-muted); }
.loop-hero .loop-gate { color: var(--pink); }
.loop-hero .secondary-cta { color: var(--band-muted); }
.loop-hero .secondary-cta a { color: #fff; text-decoration-color: var(--pink); }
.loop-hero + .band { margin-top: 0; }
.loop-hero-inner {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(var(--space-4), 5vw, var(--space-6));
align-items: center;
}
.loop-hero h1 {
font-size: clamp(3rem, 7vw, 5rem);
letter-spacing: -0.05em;
line-height: 0.98;
margin: 0 0 var(--space-3);
}
.loop-hero .lead { max-width: 30ch; margin-bottom: var(--space-3); }
.loop-hero-sub {
color: var(--band-muted);
max-width: 52ch;
margin: 0 0 var(--space-4);
}
.loop-hero .loop-cta { margin: 0 0 var(--space-2); }
.loop-hero-card {
border: 1px solid #e6e6ec;
border-top: 4px solid var(--ink);
padding: var(--space-4);
background: #fafafb;
}
.loop-hero-card .loop-price { margin-bottom: var(--space-1); }
.loop-hero-card .loop-gate { margin-bottom: var(--space-3); }
.loop-hero-facts {
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
border-top: 1px solid #e6e6ec;
}
.loop-hero-facts li {
border-bottom: 1px solid #e6e6ec;
padding: var(--space-2) 0;
font-size: var(--fs-100);
margin: 0;
}
.loop-hero-facts li::marker { content: none; }
.loop-hero-card {
background: #24242f;
border: 1px solid #3a3a48;
border-top: 4px solid var(--pink);
}
.loop-hero-card .loop-price { color: #fff; }
.loop-hero-card .loop-term { color: var(--band-muted); }
.loop-hero-card .loop-hero-facts { border-top-color: #3a3a48; }
.loop-hero-card .loop-hero-facts li { color: #fff; border-bottom-color: #3a3a48; }
.loop-hero-studio {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #ff45a5;
margin: 0;
}
.loop-band { padding: clamp(3.5rem, 7vw, 5.5rem) 0; text-align: center; }
.loop-band .kicker { color: var(--pink); margin-bottom: 18px; }
.loop-band h2 {
color: #fff;
font-size: clamp(1.9rem, 4.4vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.05;
margin: 0 auto var(--space-4);
max-width: 22ch;
}
.loop-band p { color: var(--band-muted); max-width: 60ch; margin: 0 auto var(--space-3); }
.loop-band .pt-punch { color: var(--pink); margin-bottom: 0; }
.month-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--space-4);
margin: var(--space-5) 0 0;
padding: 0;
}
.month-stat {
border-top: 4px solid var(--ink);
border-right: 1px solid #e6e6ec;
border-bottom: 1px solid #e6e6ec;
border-left: 1px solid #e6e6ec;
padding: var(--space-3);
}
.month-stat::marker { content: none; }
.month-num {
font-family: var(--font-mono);
font-size: clamp(1.9rem, 3.4vw, 2.6rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
margin: 0 0 var(--space-1);
}
.month-label {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pink-text);
margin: 0 0 var(--space-2);
}
.month-note { font-size: var(--fs-100); color: var(--muted); margin: 0; max-width: none; }
.loop-price {
font-family: var(--font-mono);
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 var(--space-2);
}
.loop-term { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.loop-gate {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--pink-text);
margin: 0 0 var(--space-4);
}
.loop-cta { margin: var(--space-4) 0 var(--space-2); }
body.pricing main { max-width: none; padding-inline: 0; }
body.pricing h1 { max-width: 20ch; }
body.pricing .lead { max-width: 68ch; }
.pricing-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
gap: var(--space-4);
margin: var(--space-6) 0 0;
padding: 0;
}
.price-col {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid #e6e6ec;
border-top: 4px solid var(--ink);
padding: var(--space-4) var(--space-3);
}
.price-col::marker { content: none; }
.price-step {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 var(--space-1);
}
.price-name {
font-size: var(--fs-400);
font-weight: 800;
letter-spacing: -0.03em;
margin: 0 0 var(--space-2);
}
.price-amount {
font-family: var(--font-mono);
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 var(--space-2);
line-height: 1.1;
}
.price-term {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
color: var(--muted);
}
.price-gate {
display: inline-block;
align-self: flex-start;
background: var(--pink);
color: #fff;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 5px 10px;
margin: 0 0 var(--space-3);
}
.price-blurb { font-size: var(--fs-100); margin: 0 0 var(--space-3); }
.price-list {
margin: 0 0 var(--space-3);
padding-left: 1.05rem;
font-size: var(--fs-100);
}
.price-list li { margin-bottom: var(--space-2); }
.price-cta { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; margin: auto 0 0; padding-top: var(--space-3); }
.price-cta .btn { width: 100%; }
.price-cta a:not(.btn) { font-weight: 600; align-self: flex-start; }
.price-col.is-free {
border: 1px dashed #b9b9c4;
border-top: 4px solid #b9b9c4;
background: #fafafb;
}
.price-col.is-free .price-name, .price-col.is-free .price-amount { color: var(--muted); }
.price-col.is-free .price-gate { background: var(--muted); color: #fff; }
.price-col.is-blueprint {
background: #12B4EC;
border-color: #12B4EC;
border-top-color: var(--ink);
color: #0b0b0b;
}
.price-col.is-blueprint .price-step,
.price-col.is-blueprint .price-gate { background: var(--ink); color: #fff; }
.price-col.is-blueprint .price-term,
.price-col.is-blueprint .price-name,
.price-col.is-blueprint .price-blurb,
.price-col.is-blueprint .price-list,
.price-col.is-blueprint li { color: #0b0b0b; }
.price-col.is-blueprint .price-badge {
display: inline-block;
align-self: flex-start;
background: var(--ink);
color: #fff;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 10px;
margin: 0 0 var(--space-2);
}
.price-studio {
margin: 0 0 var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid #e6e6ec;
font-size: var(--fs-100);
color: var(--muted);
}
.price-studio a { font-weight: 600; }
.leaks .leak-list {
list-style: none;
margin: var(--space-6) 0 0;
padding: 0;
display: grid;
gap: var(--space-5);
}
.leaks .leak {
border-top: 2px solid var(--ink);
padding-top: var(--space-3);
max-width: 68ch;
}
.leaks .leak-num {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--pink-text);
margin: 0 0 var(--space-2);
}
.leaks .leak h3 {
font-size: var(--fs-400);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 var(--space-2);
}
.leaks .leak p { margin: 0 0 var(--space-2); }
.leaks .leak-verdict {
border-left: 3px solid var(--pink);
padding-left: var(--space-3);
margin-top: var(--space-3);
}
.leaks .leak-verdict strong { font-weight: 800; }
.leaks .leak-close {
font-size: var(--fs-400);
font-weight: 700;
letter-spacing: -0.02em;
margin: var(--space-6) 0 var(--space-4);
max-width: 34ch;
}
.leaks .leak-cta { margin: 0; }
.who .who-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
margin-top: var(--space-6);
}
.who .who-card {
border: 1px solid #e6e6ec;
border-top: 4px solid var(--ink);
padding: var(--space-4);
display: flex;
flex-direction: column;
}
.who .who-card h3 {
font-size: var(--fs-300);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 var(--space-2);
}
.who .who-card p { margin: 0 0 var(--space-3); }
.who .who-stamp {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--pink-text);
margin: auto 0 0;
padding-top: var(--space-2);
border-top: 1px solid #e6e6ec;
}
.who .who-close {
border-left: 3px solid var(--pink);
padding-left: var(--space-3);
margin-top: var(--space-5);
font-size: var(--fs-300);
font-weight: 600;
max-width: 56ch;
}
.ladder .rung {
border: 1px solid #e6e6ec;
border-top: 4px solid var(--ink);
padding: var(--space-4);
margin-top: var(--space-4);
}
.ladder .sec-head + .rung { margin-top: var(--space-6); }
.ladder .funnel + .rung { margin-top: var(--space-6); }
.ladder .funnel {
list-style: none;
margin: var(--space-5) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
.ladder .funnel-step {
position: relative;
display: flex;
flex-direction: column;
gap: 3px;
border: 1px solid #e6e6ec;
border-top: 4px solid var(--ink);
padding: var(--space-3) var(--space-2);
text-align: center;
}
.ladder .funnel-step + .funnel-step::before {
content: "\2192";
position: absolute;
top: 50%;
left: calc(-1 * var(--space-5));
width: var(--space-5);
transform: translateY(-50%);
text-align: center;
color: var(--muted);
font-size: 1.25rem;
line-height: 1;
}
.ladder .funnel-label {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.ladder .funnel-name { font-weight: 800; letter-spacing: -0.02em; }
.ladder .funnel-price {
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.95rem;
}
.ladder .funnel-gate {
display: inline-block;
background: var(--pink);
color: #fff;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 8px;
margin-top: var(--space-1);
align-self: center;
}
.ladder .funnel-free {
border: 1px dashed #b9b9c4;
border-top: 4px solid #b9b9c4;
background: #fafafb;
}
.ladder .funnel-free .funnel-name,
.ladder .funnel-free .funnel-price { color: var(--muted); }
.ladder .funnel-free .funnel-gate { background: var(--muted); color: #fff; }
.ladder .funnel-key {
background: #12B4EC;
border-color: #12B4EC;
border-top-color: var(--ink);
color: #0b0b0b;
}
.ladder .funnel-key .funnel-label,
.ladder .funnel-key .funnel-gate { background: var(--ink); color: #fff; }
.ladder .funnel-key .funnel-price { font-size: 1.15rem; }
.ladder .rung-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.ladder .rung-head h3 {
font-size: var(--fs-400);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
}
.ladder .rung-price {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 700;
margin: 0;
white-space: nowrap;
}
.ladder .rung-gate {
display: inline-block;
background: var(--pink);
color: #0a0a0b;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
margin: 0 0 var(--space-3);
}
.ladder .rung > p { max-width: 64ch; }
.ladder .rung-list { margin: var(--space-3) 0 0; padding-left: 1.1rem; }
.ladder .rung-list li { margin-bottom: var(--space-2); max-width: 64ch; }
.ladder .rung-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: var(--space-4) 0 0;
}
.ladder .ladder-pricing-link { margin: var(--space-5) 0 0; font-weight: 600; }
.ladder .rung-free {
border: 1px dashed #b9b9c4;
border-top: 4px solid #b9b9c4;
background: #fafafb;
}
.ladder .rung-free .rung-head h3 { font-weight: 700; }
.ladder .rung-free .rung-gate { background: var(--muted); color: #fff; }
.ladder .rung-free p { color: var(--muted); }
.ladder .rung-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
margin: var(--space-3) 0 0;
}
.ladder .rung-links a { font-weight: 600; }
.ladder .rung-blueprint {
background: #12B4EC;
border-color: #12B4EC;
border-top-color: var(--ink); 
color: #0b0b0b;
}
.ladder .rung-blueprint p,
.ladder .rung-blueprint li,
.ladder .rung-blueprint h3 { color: #0b0b0b; }
.ladder .rung-blueprint .rung-gate { background: var(--ink); color: #fff; }
.ladder .rung-sub {
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid #e6e6ec;
}
.ladder .rung-sub h4 {
font-size: var(--fs-300);
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 var(--space-2);
}
.ladder .rung-sub p { max-width: 64ch; margin: 0; }
.pull-quote {
margin: var(--space-4) 0 0;
padding-left: var(--space-3);
border-left: 3px solid var(--pink);
}
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p {
margin: 0 0 var(--space-2);
font-size: var(--fs-300);
line-height: 1.45;
color: var(--ink);
}
.pull-quote figcaption {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pink-text);
}
.house-standard {
background: var(--ink);
color: #fff;
padding: var(--space-3) var(--space-4);
margin: var(--space-4) 0 0;
font-weight: 600;
max-width: none;
}
.founding-note {
border-left: 3px solid #e6e6ec;
padding-left: var(--space-3);
margin: var(--space-4) 0 0;
color: var(--muted);
font-size: var(--fs-100);
max-width: 64ch;
}
body.blueprint main { max-width: none; margin: 0; padding: 0; }
body.blueprint .kicker { color: var(--blueprint-azure-ink); }
body.blueprint .connector { border-top: 4px solid #12B4EC; }
.bp-hero { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(1.5rem, 4vw, 3rem); }
.bp-hero h1 {
font-size: clamp(3rem, 7vw, 6rem);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 0.98;
margin: 0 0 var(--space-3);
max-width: 14ch;
color: var(--blueprint-azure);
}
.bp-hero .lead { max-width: 40ch; }
.bp-hero .bp-price-row {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.95rem;
margin: var(--space-4) 0 var(--space-2);
}
.bp-hero .bp-price-row .price { font-size: 1.6rem; }
body.blueprint main a:not(.btn) { color: var(--blueprint-azure-ink); text-decoration-color: var(--blueprint-azure-ink); }
body.blueprint main a:not(.btn):hover { color: var(--blueprint-azure-ink); }
body.blueprint .closing .kicker { color: var(--pink); }
body.blueprint .closing .closing-alt a,
body.blueprint .closing .closing-alt a:hover { color: #fff; text-decoration-color: var(--pink); }
body.blueprint .price { color: var(--blueprint-azure-ink); font-weight: 800; }
body.blueprint .eyebrow .tri { border-bottom-color: var(--blueprint-azure-ink); }
.checks-count { color: var(--blueprint-azure-ink); font-weight: 800; }
.checks-grid {
position: relative;
left: 50%;
transform: translateX(-50%);
width: min(1080px, 92vw);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
margin: var(--space-5) 0 0;
}
.check-cat {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: var(--space-3) var(--space-4);
}
.check-cat h3 { font-size: 1rem; margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
.check-cat h3 .cat-count { color: var(--blueprint-azure-ink); }
.check-cat p { font-size: 1rem; line-height: 1.5; color: var(--muted); margin: 0; max-width: none; }
.founder-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
.founder-grid.has-photo { grid-template-columns: 1fr 300px; align-items: stretch; }
.founder-photo { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.founder-grid.has-photo .founder-photo {
height: 100%;
object-fit: cover;
object-position: 50% 22%; 
}
.site-footer {
border-top: 1px solid var(--line);
margin-top: var(--space-6);
color: var(--muted);
background: #fff;
}
body.home .site-footer { margin-top: 0; border-top: 0; }
main:has(> .closing:last-child) { padding-bottom: 0; }
main:has(> .closing:last-child) + .site-footer { margin-top: 0; border-top: 0; }
.site-footer > .wrap {
padding-block: var(--space-5);
display: grid;
gap: var(--space-3);
}
.site-footer a { color: var(--muted); text-decoration-color: var(--line); }
.site-footer a:hover { color: var(--ink); text-decoration-color: var(--pink); }
.site-footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
}
.site-footer li { margin: 0; }
.site-footer li::marker { content: none; }
.site-footer nav a, .site-footer ul a {
font-family: var(--font-mono);
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
}
.site-footer nav a:hover, .site-footer ul a:hover { color: var(--ink); }
.tagline {
font-family: var(--font-mono);
color: var(--muted);
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 900px) {
main { padding: var(--space-5) var(--space-4); }
main section { margin-top: var(--space-5); }
.wrap { padding-inline: 24px; }
.site-nav ul { gap: var(--space-2) var(--space-3); }
.grid4 { grid-template-columns: 1fr 1fr; }
body.home .hero h1 { font-size: clamp(3rem, 13vw, 5rem); }
body.home .hero::before { right: -20px; }
body.home .hero::after { right: 60px; }
.founder-grid.has-photo { grid-template-columns: 1fr; align-items: start; }
.founder-grid.has-photo .founder-photo { height: auto; object-fit: unset; max-width: 420px; }
.who .who-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loop-hero-inner { grid-template-columns: 1fr; gap: var(--space-4); }
.bp-hero-inner { grid-template-columns: 1fr; gap: var(--space-4); }
.loop-hero .lead { max-width: 44ch; }
.ladder .funnel { grid-template-columns: 1fr; gap: var(--space-4); }
.article-list { grid-template-columns: 1fr; }
.ladder .funnel-step + .funnel-step::before {
content: "\2193";
top: calc(-1 * var(--space-4));
left: 50%;
width: auto;
height: var(--space-4);
transform: translateX(-50%);
display: flex;
align-items: center;
}
}
@media (max-width: 640px) {
:root {
--fs-400: 1.25rem;
--fs-300: 1.15rem;
}
main { padding: var(--space-5) var(--space-3); }
main section { margin-top: var(--space-5); }
html { scroll-padding-top: 7.5rem; } 
.site-header > .wrap { padding-block: var(--space-3); gap: var(--space-2); }
.site-nav { width: 100%; }
.site-nav ul { justify-content: flex-start; gap: var(--space-2) var(--space-3); }
.wrap { padding-inline: 20px; }
body.home .hero { padding-top: var(--space-6); }
body.home .hero::before, body.home .hero::after { display: none; }
body.home .hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
.hero .lead { font-size: 1.05rem; }
.hero-cta { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.hero-cta .btn { width: 100%; max-width: 340px; }
.grid4 { grid-template-columns: 1fr; }
.closing { padding: 110px 0 90px; clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%); }
.closing-blue + .closing,
.blueprint-band + .closing { margin-top: -34px; }
table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
th, td { padding: var(--space-2); }
.toc, .note, .related, .cta, .article-card, .work-card, .pillar, .answer, .connector { padding: var(--space-3); }
.site-footer > .wrap { padding-block: var(--space-4); }
.who .who-card, .ladder .rung { padding: var(--space-3); }
.ladder .rung-head { gap: 0; }
.ladder .rung-cta { flex-direction: column; align-items: stretch; }
.ladder .rung-cta .btn { width: 100%; max-width: 340px; }
.leaks .leak-cta .btn { width: 100%; max-width: 340px; }
.house-standard { padding: var(--space-3); }
.pricing-grid { grid-template-columns: 1fr; }
.price-col { padding: var(--space-3); }
.month-grid { gap: var(--space-3); }
body.loop .loop-hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
body.home .ribbon { margin-top: var(--space-6); }
.ribbon .ribbon-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.ribbon .btn { width: 100%; max-width: 340px; }
}
@media (max-width: 640px) {
body.posttrace .pt-hero h1 { font-size: clamp(2.2rem, 10.5vw, 3.2rem); max-width: none; }
body.posttrace .pt-hero .lead { font-size: 1.05rem; }
.pt-band h2,
.hl-band h2 { font-size: clamp(1.7rem, 7.5vw, 2.4rem); max-width: none; }
.pt-band .pt-punch,
.hl-band .hl-punch { font-size: clamp(1.35rem, 6vw, 1.8rem); }
.pt-callout { padding: var(--space-4) var(--space-3); }
.pt-callout p, .pt-punch, .hl-punch { font-size: 1.15rem; }
.pt-asks li { font-size: 1rem; }
}
@media (max-width: 400px) {
body.home .hero h1 { font-size: clamp(2.2rem, 12vw, 3rem); }
.site-nav ul { gap: var(--space-1) var(--space-2); }
.site-nav a { font-size: 0.8125rem; }
}
@media (max-width: 640px) {
.brand-banner { padding: var(--space-3) 0 var(--space-4); }
.marquee-track { gap: var(--space-5); padding-right: var(--space-5); }
.marquee-track img { height: 34px; }
.marquee-track img[src*="dry-guyz"] { height: 70px; }
.marquee-track img[src*="jfc"] { height: 66px; }
.marquee-track img[src*="the-collective-flow"] { height: 42px; }
.marquee-track img[src*="chatsheet"] { height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
.marquee { overflow-x: clip; overflow-y: visible; -webkit-mask-image: none; mask-image: none; }
.marquee-inner { animation: none; width: 100%; min-width: 0; }
.marquee-track[aria-hidden="true"] { display: none; }
.marquee-track {
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4) var(--space-5);
padding-right: 0;
}
}
body.hitlist {
--hitlist-red: #c8102e; 
}
body.hitlist main { max-width: none; margin: 0; padding: 0; }
body.hitlist .kicker { color: var(--muted); }
body.hitlist .tri { border-bottom-color: var(--ink); }
body.hitlist .pt-cell .num { color: var(--muted); }
body.hitlist .hl-band .kicker,
body.hitlist .hl-close .kicker { color: var(--band-muted); }
body.hitlist .hl-close .hl-close-alt a { text-decoration-color: currentColor; }
body.hitlist .faq-item > summary::after { color: var(--muted); }
body.hitlist .who .who-stamp { color: var(--muted); }
body.hitlist .pt-asks li::before { color: var(--ink); }
.hl-hero {
position: relative;
overflow: hidden;
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.hl-hero::before,
.hl-hero::after {
content: "";
position: absolute;
top: -60px;
width: 2px;
height: 620px;
background: var(--line);
transform: rotate(28deg);
transform-origin: top;
pointer-events: none;
}
.hl-hero::before { right: 8vw; }
.hl-hero::after { right: calc(8vw + 110px); width: 1px; }
.hl-hero > .wrap { position: relative; z-index: 1; }
.hl-hero h1 {
font-size: clamp(3.2rem, 9vw, 7rem);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 0.92;
text-transform: uppercase;
margin: 0 0 var(--space-4);
max-width: none;
}
.hl-slab {
display: inline-block;
background: var(--hitlist-red);
color: var(--ink);
padding: 0.06em 0.34em 0.1em 0.22em;
margin-top: 0.06em;
transform: skewX(-11deg);
}
.hl-slab i { display: inline-block; font-style: normal; transform: skewX(11deg); }
.hl-dot { color: var(--ink); margin-left: -0.06em; }
.hl-hero .lead {
font-size: clamp(1.35rem, 2.6vw, 1.85rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--ink);
max-width: 40ch;
margin: 0 0 var(--space-3);
}
.hl-hero-sub { max-width: 52ch; margin: 0 0 var(--space-4); }
.hl-kill { color: var(--hitlist-red); font-weight: 700; }
.hl-hero .loop-price {
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 var(--space-4);
}
.hl-hero .loop-term {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-left: 10px;
}
.hl-hero .hero-cta { margin: 0 0 var(--space-3); }
.hl-hero .secondary-cta { max-width: 52ch; }
.btn-red {
background: var(--hitlist-red, #c8102e);
color: #fff;
box-shadow: 0 8px 24px rgba(200, 16, 46, 0.28);
}
.btn-red:hover {
background: var(--hitlist-red, #c8102e);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(200, 16, 46, 0.4);
text-decoration: none;
}
.btn-red:active { transform: translateY(0); }
.hl-quote {
margin: var(--space-5) 0 0;
padding-left: var(--space-4);
border-left: 3px solid var(--ink);
}
.hl-quote p {
margin: 0 0 var(--space-2);
font-size: var(--fs-300);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--ink);
}
.hl-quote p:last-child { margin-bottom: 0; font-weight: 400; color: var(--muted); }
.hl-chip {
display: inline-flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: var(--space-5);
}
.hl-chip span {
display: inline-block;
background: var(--ink);
color: #fff;
font-weight: 800;
font-size: 1rem;
letter-spacing: -0.01em;
padding: 9px 22px;
transform: skewX(-11deg);
}
.hl-chip span i { display: inline-block; font-style: normal; transform: skewX(11deg); }
.hl-chip em {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
@media (max-width: 640px) {
.hl-hero h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
.hl-hero .lead { font-size: 1.2rem; max-width: none; }
.hl-hero::before, .hl-hero::after { display: none; }
}
.hma-proof { display: none; }
.hma-proof.is-live { display: block; }
.hma-proof {
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--line);
padding: var(--space-5) 0;
margin: var(--space-6) 0;
}
.hma-proof .proof-quote {
font-size: var(--fs-400);
line-height: 1.4;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 var(--space-4);
max-width: 42ch;
}
.hma-proof .proof-number {
font-family: var(--font-mono);
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
margin: 0 0 var(--space-2);
}
.hma-proof .proof-name {
font-family: var(--font-mono);
font-size: var(--fs-100);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin: 0;
}
.chip-card { border: 1px solid var(--ink); background: #fff; padding: 0; }
.menu-grid .chip-card { display: flex; flex-direction: column; }
.menu-grid .chip-card > .chip-head { flex: 1 0 auto; }
.chip-card > .chip-head {
padding: var(--space-4);
border-bottom: 1px solid var(--line);
}
.chip-card > .chip-head .kicker { margin-bottom: var(--space-2); }
.chip-row {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-4);
border-bottom: 1px solid var(--line);
}
.chip-row:last-child { border-bottom: 0; }
.chip-row:hover { box-shadow: inset 0 0 0 999px rgba(127,127,140,0.14); }
.chip-dot {
width: 0.75rem; height: 0.75rem;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
}
.chip-dot--red { background: #c8102e; }
.chip-dot--blue { background: #12b4ec; }
.chip-dot--black { background: var(--ink); }
.chip-row .chip-name {
font-weight: 700;
font-size: var(--fs-200);
letter-spacing: -0.01em;
white-space: nowrap;
}
.chip-row .chip-vol {
font-family: var(--font-mono);
font-size: var(--fs-100);
color: var(--muted);
white-space: nowrap;
}
.chip-row .chip-price {
font-family: var(--font-mono);
font-size: 1.125rem;
font-weight: 800;
letter-spacing: -0.02em;
white-space: nowrap;
}
.chip-row .chip-price .per { font-size: var(--fs-100); font-weight: 500; color: var(--muted); }
.chip-note {
font-size: var(--fs-100);
color: var(--muted);
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--line);
margin: 0;
}
@media (max-width: 640px) {
.chip-row { grid-template-columns: auto 1fr; row-gap: var(--space-2); }
.chip-row .chip-price { grid-column: 2; }
.chip-row .btn { grid-column: 1 / -1; width: 100%; text-align: center; }
}
.two-price { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.two-price .tp-main {
font-family: var(--font-mono);
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0;
}
.two-price .tp-main .per { font-size: 1rem; font-weight: 500; color: var(--muted); }
.two-price .tp-alt {
font-family: var(--font-mono);
font-size: var(--fs-100);
color: var(--muted);
margin: 0;
}
.two-price .tp-alt strong { color: var(--ink); font-weight: 700; }
.what-you-see {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--line);
border-bottom: 0;
}
.what-you-see > div {
padding: var(--space-4);
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
}
.what-you-see > div:last-child { border-right: 0; }
.what-you-see h3 {
font-family: var(--font-mono);
font-size: var(--fs-100);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin: 0 0 var(--space-3);
font-weight: 500;
}
.what-you-see p { font-size: var(--fs-100); line-height: 1.55; margin: 0; color: var(--ink); max-width: none; }
@media (max-width: 700px) {
.what-you-see { grid-template-columns: 1fr; }
.what-you-see > div { border-right: 0; }
}
.free-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
gap: var(--space-4);
align-items: start;
border: 1px solid var(--ink);
padding: var(--space-4);
}
.free-strip .fs-label .kicker { margin: 0 0 var(--space-2); }
.free-strip .fs-label p { font-size: var(--fs-100); color: var(--muted); margin: 0; max-width: none; }
.free-strip .fs-items {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
list-style: none;
margin: 0;
padding: 0;
}
.free-strip .fs-items h3 { font-size: var(--fs-200); font-weight: 700; margin: 0 0 var(--space-1); letter-spacing: -0.01em; }
.free-strip .fs-items p { font-size: var(--fs-100); color: var(--muted); margin: 0; max-width: none; }
.free-strip .fs-foot {
grid-column: 1 / -1;
border-top: 1px solid var(--line);
padding-top: var(--space-3);
font-size: var(--fs-100);
color: var(--muted);
margin: 0;
}
@media (max-width: 900px) {
.free-strip { grid-template-columns: 1fr; }
.free-strip .fs-items { grid-template-columns: 1fr; gap: var(--space-3); }
}
.tier-stack { display: grid; gap: 0; border: 1px solid var(--ink); background: #fff; }
.tier-stack .ts-row {
padding: var(--space-4);
border-bottom: 1px solid var(--line);
display: grid;
gap: var(--space-2);
}
.tier-stack .ts-row:last-of-type { border-bottom: 0; }
.tier-stack .ts-row:hover { box-shadow: inset 0 0 0 999px rgba(127,127,140,0.14); }
.tier-stack .ts-name { font-weight: 700; font-size: var(--fs-200); letter-spacing: -0.01em; margin: 0; }
.tier-stack .ts-line { font-size: var(--fs-100); color: var(--muted); margin: 0; max-width: none; }
.tier-stack .ts-foot {
border-top: 1px solid var(--ink);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-100);
color: var(--muted);
margin: 0;
}
.credit-callout {
border-left: 3px solid var(--pink);
background: var(--soft);
padding: var(--space-3) var(--space-4);
margin: var(--space-4) 0;
}
.credit-callout p { margin: 0; font-size: var(--fs-100); line-height: 1.55; max-width: none; }
.credit-callout strong { font-weight: 700; }
.menu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
list-style: none;
margin: 0;
padding: 0;
}
.menu-col-heads {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
}
.menu-col-heads li {
font-family: var(--font-mono);
font-size: var(--fs-100);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
border-bottom: 1px solid var(--ink);
padding-bottom: var(--space-2);
}
@media (max-width: 900px) {
.menu-grid, .menu-col-heads { grid-template-columns: 1fr; }
.menu-col-heads { display: none; }
}
.svc-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
list-style: none;
margin: 0;
padding: 0;
}
.svc-strip li {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: var(--space-4);
}
.svc-strip a { text-decoration: none; color: inherit; display: block; }
.svc-strip a:hover { background: var(--soft); text-decoration: none; }
.svc-strip h3 { font-size: var(--fs-200); font-weight: 700; margin: 0 0 var(--space-1); letter-spacing: -0.01em; }
.svc-strip p { font-size: var(--fs-100); color: var(--muted); margin: 0; max-width: none; }
@media (max-width: 900px) { .svc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc-strip { grid-template-columns: 1fr; } }
@media (min-width: 561px) { .svc-strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pricing-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pricing-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pricing-grid--3 { grid-template-columns: 1fr; } }
.loop-hero + .band.loop-band { padding-top: clamp(2.5rem, 5vw, 4rem); }
.loop-band .neon-mark { margin: var(--space-5) auto 0; }
.loop-hero-card .two-price .tp-alt { color: #c9c9d2; }
.loop-hero-card .two-price .tp-alt strong { color: #fff; }
.loop-hero-card .two-price .tp-main { color: #fff; }
.loop-hero-card .two-price .tp-main .per { color: #c9c9d2; }
.loop-hero + .band.loop-band { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.band.loop-band + .home-section { margin-top: 0; padding-top: clamp(2.5rem, 5vw, 4.5rem); }
body.loop main section,
body.table main section,
body.circuit main section,
body.gateway main section { margin-top: 0; }
.what-you-see--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .what-you-see--2 { grid-template-columns: 1fr; } }
body.svc-outbound-eng { --svc: var(--svc-outbound-eng); --svc-ink: var(--svc-outbound-eng-ink); --svc-on: #0a0a0b; --svc-lit: var(--svc-outbound-eng-lit); --svc-card: var(--svc-outbound-eng-card); }
body.svc-inbound-eng { --svc: var(--svc-inbound-eng); --svc-ink: var(--svc-inbound-eng-ink); --svc-on: #ffffff; --svc-lit: var(--svc-inbound-eng-lit); --svc-card: var(--svc-inbound-eng-card); }
body.svc-outbound-dm { --svc: var(--svc-outbound-dm); --svc-ink: var(--svc-outbound-dm-ink); --svc-on: #ffffff; --svc-lit: var(--svc-outbound-dm-lit); --svc-card: var(--svc-outbound-dm-card); }
body.svc-inbound-dm { --svc: var(--svc-inbound-dm); --svc-ink: var(--svc-inbound-dm-ink); --svc-on: #0a0a0b; --svc-lit: var(--svc-inbound-dm-lit); --svc-card: var(--svc-inbound-dm-card); }
body.svc-email { --svc: var(--svc-email); --svc-ink: var(--svc-email-ink); --svc-on: #ffffff; --svc-lit: var(--svc-email-lit); --svc-card: var(--svc-email-card); }
body.svc-newsletter { --svc: var(--svc-newsletter); --svc-ink: var(--svc-newsletter-ink); --svc-on: #0a0a0b; --svc-lit: var(--svc-newsletter-lit); --svc-card: var(--svc-newsletter-card); }
body[class*="svc-"] .home-section .steps > li::before,
body[class*="svc-"] .home-section .kicker,
body[class*="svc-"] .pair-cols .kicker,
body[class*="svc-"] .home-section .num,
body[class*="svc-"] .home-section .eyebrow .tri,
body[class*="svc-"] .home-section .pt-punch { color: var(--svc-ink); }
body[class*="svc-"] .svc-band .kicker,
body[class*="svc-"] .svc-band h2,
body[class*="svc-"] .svc-band p { color: var(--svc-on); }
body[class*="svc-"] .svc-band .btn-ink-outline {
background: transparent;
color: var(--svc-on);
border: 2px solid var(--svc-on);
}
body[class*="svc-"] .svc-band .btn-ink-outline:hover {
background: var(--svc-on);
color: var(--svc);
}
body[class*="svc-"] .svc-dark .kicker { color: var(--svc-card, var(--svc-lit)); }
body[class*="svc-"] .closing .kicker { color: var(--pink); }
body[class*="svc-"] .closing a:not(.btn) { color: #fff; text-decoration-color: var(--pink); }
body[class*="svc-"] .eyebrow .tri { border-bottom-color: var(--svc-ink); }
body[class*="svc-"] .svc-hero .kicker,
body[class*="svc-"] .svc-hero .eyebrow { color: var(--svc-on); }
body[class*="svc-"] .svc-hero .eyebrow .tri { border-bottom-color: var(--svc-on); }
.svc-cap { height: 8px; background: var(--svc, var(--ink)); display: block; }
.svc-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-100);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--svc-ink, var(--muted));
margin: 0 0 var(--space-2);
}
.svc-eyebrow--out::before { content: "\2191\00a0"; }
.svc-eyebrow--in::before { content: "\2193\00a0"; }
.chip-card.svc-outbound-eng-card { --svc: var(--svc-outbound-eng); --svc-ink: var(--svc-outbound-eng-ink); --svc-on: #0a0a0b; }
.chip-card.svc-inbound-eng-card { --svc: var(--svc-inbound-eng); --svc-ink: var(--svc-inbound-eng-ink); --svc-on: #ffffff; }
.chip-card.svc-outbound-dm-card { --svc: var(--svc-outbound-dm); --svc-ink: var(--svc-outbound-dm-ink); --svc-on: #ffffff; }
.chip-card.svc-inbound-dm-card { --svc: var(--svc-inbound-dm); --svc-ink: var(--svc-inbound-dm-ink); --svc-on: #0a0a0b; }
.chip-card.svc-email-card { --svc: var(--svc-email); --svc-ink: var(--svc-email-ink); --svc-on: #ffffff; }
.chip-card.svc-newsletter-card { --svc: var(--svc-newsletter); --svc-ink: var(--svc-newsletter-ink); --svc-on: #0a0a0b; }
.chip-card[class*="-card"] {
background: var(--svc);
border-color: var(--svc);
color: var(--svc-on);
}
.chip-card[class*="-card"] > .chip-head,
.chip-card[class*="-card"] .chip-row { border-bottom-color: color-mix(in srgb, var(--svc-on) 22%, transparent); }
.chip-card[class*="-card"] .kicker,
.chip-card[class*="-card"] .price-blurb,
.chip-card[class*="-card"] .chip-vol,
.chip-card[class*="-card"] .chip-name,
.chip-card[class*="-card"] .chip-price,
.chip-card[class*="-card"] .per { color: var(--svc-on); }
.chip-card[class*="-card"] h3 a,
.chip-card[class*="-card"] h3 a:hover { color: var(--svc-on); text-decoration: none; }
.chip-card[class*="-card"] .chip-dot { box-shadow: 0 0 0 2px var(--svc-on); }
.svc-hero-dark {
margin-top: 0;
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}
.svc-hero-dark > .wrap { max-width: var(--maxw); }
body[class*="svc-"] .svc-hero-dark h1 { color: var(--svc-lit); max-width: 18ch; }
body[class*="svc-"] .svc-hero-dark .eyebrow { color: var(--svc-lit); }
body[class*="svc-"] .svc-hero-dark .eyebrow .tri { border-bottom-color: var(--svc-lit); }
.svc-hero-dark .lead { color: #e9e9ef; font-size: var(--fs-300); max-width: 42ch; }
.svc-hero-dark p { color: var(--band-muted); }
.svc-hero-dark .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: var(--space-4) 0 var(--space-2); }
body[class*="svc-"] .svc-hero-dark a:not(.btn) { color: #fff; text-decoration-color: var(--svc-lit); }
body[class*="svc-"] .svc-hero-dark .secondary-cta { color: var(--band-muted); }
.svc-hero-inner {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(var(--space-4), 5vw, var(--space-6));
align-items: center;
}
.svc-hero-card {
border: 1px solid #3a3a48;
border-top: 4px solid var(--svc-card, var(--svc-lit));
background: #24242f;
padding: var(--space-4);
}
.svc-hero-card .svc-card-lede {
font-family: var(--font-mono);
font-size: 1.6rem;
font-weight: 800;
color: #fff;
margin: 0 0 var(--space-1);
line-height: 1.1;
}
.svc-hero-card .svc-card-head {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--svc-card, var(--svc-lit));
margin: 0 0 var(--space-3);
}
.svc-card-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-2) var(--space-3);
padding: var(--space-3) 0;
border-top: 1px solid #3a3a48;
}
.svc-card-row .chip-dot { margin: 0; }
.svc-hero-card .chip-dot { box-shadow: 0 0 0 2px #e9e9ef; }
.svc-card-row .svc-card-name { color: #fff; font-weight: 700; margin: 0; }
.svc-card-row .svc-card-count {
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--band-muted);
margin: 0;
grid-column: 2;
}
.svc-card-row .btn {
grid-row: span 2;
grid-column: 3;
align-self: center;
padding: 0.55rem 0.9rem;
font-size: 1rem;
white-space: nowrap;
}
.svc-hero-card .svc-card-note {
color: var(--band-muted);
font-size: 1rem;
margin: var(--space-3) 0 0;
border-top: 1px solid #3a3a48;
padding-top: var(--space-3);
}
@media (max-width: 900px) {
.svc-hero-inner { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 420px) {
.svc-card-row { grid-template-columns: auto 1fr; }
.svc-card-row .btn { grid-row: auto; grid-column: 1 / -1; width: 100%; text-align: center; }
}
body[class*="svc-"] .svc-hero-dark .btn {
background: var(--svc-lit);
color: #0a0a0b;
box-shadow: none;
}
body[class*="svc-"] .svc-hero-card .btn {
background: var(--svc-card, var(--svc-lit));
color: #0a0a0b;
box-shadow: none;
}
body[class*="svc-"] .svc-hero-dark .btn:hover {
background: var(--svc-lit);
color: #0a0a0b;
transform: translateY(-2px);
text-decoration: none;
}
body[class*="svc-"] .svc-hero-dark .btn-ink-outline {
background: transparent;
color: #fff;
border: 2px solid #fff;
}
body[class*="svc-"] .svc-hero-dark .btn-ink-outline:hover {
background: #fff;
color: #0a0a0b;
}
.svc-band {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--svc, var(--ink));
color: var(--svc-on, #fff);
padding: clamp(3rem, 6vw, 5rem) 0;
text-align: center;
}
.svc-hero-dark + .svc-band { margin-top: 0; }
body[class*="svc-"] main > section { margin-top: 0; }
body[class*="svc-"] main > .home-section { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.svc-band > .wrap { max-width: 62ch; }
.svc-band h2, .svc-band p, .svc-band .kicker { color: var(--svc-on, #fff); }
.svc-band h2 { font-size: var(--fs-600); margin: 0 0 var(--space-3); }
.svc-band p { margin: 0 auto var(--space-3); max-width: 54ch; }
.svc-band .svc-band-payoff { font-size: var(--fs-400); font-weight: 700; margin-top: var(--space-4); margin-bottom: 0; }
.svc-band a:not(.btn) { color: var(--svc-on, #fff); text-decoration-color: var(--svc-on, #fff); }
.svc-band + .closing { margin-top: -54px; } 
body[class*="svc-"] main { max-width: none; margin: 0; padding: 0; }
body[class*="svc-"] main a:not(.btn) { color: var(--svc-ink); text-decoration-color: var(--svc-ink); }
body[class*="svc-"] .connector { border-top: 4px solid var(--svc); }
.vol-rows { border-top: 1px solid var(--line); margin-top: var(--space-4); }
.vol-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--line);
}
.vol-row .vol-name { font-weight: 800; font-size: var(--fs-300); min-width: 9ch; margin: 0; }
.vol-row .vol-count { color: var(--muted); margin: 0; flex: 1 1 14ch; }
.vol-row .vol-price { font-family: var(--font-mono); font-size: var(--fs-400); font-weight: 700; margin: 0; }
.vol-row .btn { margin-left: auto; }
.vol-note { color: var(--muted); font-size: var(--fs-100); margin-top: var(--space-3); }
@media (max-width: 640px) {
.vol-row { align-items: flex-start; }
.vol-row .btn { margin-left: 0; width: 100%; text-align: center; }
}
body[class*="svc-"] main > .home-section,
body.pricing main > .home-section, 
body.table main > .home-section,
body.loop main > .home-section,
body.circuit main > .home-section,
body.gateway main > .home-section { padding: clamp(2.5rem, 4vw, 3rem) 0; }
.pt-grid.is-two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .pt-grid.is-two { grid-template-columns: 1fr; } }
.pair-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-4), 5vw, var(--space-6));
align-items: start;
}
.pair-cols h3 { font-size: var(--fs-400); margin: 0 0 var(--space-3); }
.pair-cols p { margin: 0 0 var(--space-3); }
.pair-cols .kicker { margin-bottom: var(--space-2); }
@media (max-width: 800px) { .pair-cols { grid-template-columns: 1fr; gap: var(--space-5); } }
.steps-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
list-style: none;
padding: 0;
margin: var(--space-4) 0 0;
counter-reset: step;
}
.steps-row > li { border-top: 3px solid var(--svc, var(--ink)); padding-top: var(--space-3); }
.steps-row > li strong { display: block; margin-bottom: var(--space-1); }
.steps-row > li span { color: var(--muted); font-size: 1rem; }
@media (max-width: 860px) { .steps-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps-row { grid-template-columns: 1fr; } }
.strip-note {
background: var(--soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
main > .strip-note { padding: var(--space-4) 0; }
.strip-note .strip-head { font-weight: 800; margin: 0; }
.strip-note .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.strip-note p { margin: 0; }
.strip-note .strip-head { font-weight: 800; }
.panel-section { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-cols { columns: 2; column-gap: clamp(var(--space-4), 5vw, var(--space-6)); }
.faq-cols h3 { break-after: avoid; margin-top: 0; }
.faq-cols > div,
.faq-cols > .faq-item { break-inside: avoid; margin-bottom: var(--space-4); }
@media (max-width: 800px) { .faq-cols { columns: 1; } }
.svc-dark {
position: relative;
left: 50%;
width: 100vw;
margin-left: -50vw;
background: var(--ink);
color: #fff;
padding: clamp(3rem, 6vw, 4.5rem) 0;
}
body[class*="svc-"] main > .svc-dark { padding: clamp(2.75rem, 5vw, 3.25rem) 0; }
.svc-dark h2 { color: #fff; }
.svc-dark p { color: #e9e9ef; max-width: 60ch; }
body[class*="svc-"] .svc-dark .kicker { color: var(--svc-lit); }
.svc-proof { display: none; }
.svc-proof blockquote { font-size: var(--fs-400); font-weight: 700; margin: 0 0 var(--space-3); }
.svc-proof .svc-proof-num { font-family: var(--font-mono); font-size: var(--fs-500); color: var(--svc-ink); }
.svc-proof .svc-proof-name { color: var(--muted); font-size: var(--fs-100); }
.pricing-grid--3 > li > .chip-card,
.pricing-grid--3 > .chip-card,
.pricing-grid--3 > li > .tier-stack {
border: 0;
border-top: 6px solid var(--ink);
background: var(--soft);
}
.pricing-grid--3 > .chip-card:first-child { border-top-color: var(--blueprint-azure, #12B4EC); }
.pricing-grid--3 > li:last-child > .tier-stack { border-top-color: var(--pink); }
.pricing-grid--3 > .chip-card > .chip-head { border-bottom: 1px solid var(--line); }
.pricing-grid--3 .tp-main {
font-family: var(--font-mono);
font-size: clamp(2.4rem, 4vw, 3.2rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
margin: 0 0 var(--space-2);
}
.tier-stack { padding: 0; }
.tier-stack .ts-row { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.tier-stack .ts-row:last-child { border-bottom: 0; }
.tier-stack .ts-name {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-2);
font-size: var(--fs-400);
font-weight: 800;
margin: 0 0 var(--space-2);
}
.tier-stack .ts-name a { text-decoration: none; }
.tier-stack .ts-price {
font-family: var(--font-mono);
font-size: var(--fs-500);
font-weight: 800;
letter-spacing: -0.02em;
margin-left: auto;
}
.tier-stack .ts-line { margin: 0; color: var(--muted); font-size: var(--fs-100); line-height: 1.45; }
.chip-card[class*="-card"] h3 {
font-size: clamp(1.25rem, 2vw, var(--fs-500));
margin: 0 0 var(--space-3);
line-height: 1.15;
overflow-wrap: anywhere;
}
.credit-callout,
:not(.band):not(.svc-band):not(.svc-dark) > .wrap > .pt-callout,
.founding-note {
background: var(--soft);
border: 0;
border-left: 4px solid var(--pink);
padding: var(--space-4);
margin: var(--space-3) 0;
}
.credit-callout p { color: var(--ink); }
:not(.band):not(.svc-band):not(.svc-dark) > .wrap > .pt-callout { color: var(--ink); }
.founding-note { color: var(--muted); }
.tier-stack .ts-light { background: var(--soft); }
.tier-stack .ts-mid { background: #24242f; color: #fff; }
.tier-stack .ts-dark { background: var(--ink); color: #fff; }
.tier-stack .ts-mid .ts-name a,
.tier-stack .ts-dark .ts-name a { color: #fff; }
.tier-stack .ts-mid .ts-line,
.tier-stack .ts-dark .ts-line { color: #c9c9d2; }
.tier-stack .ts-mid .ts-price,
.tier-stack .ts-dark .ts-price { color: #fff; }
.tier-stack .ts-name { display: block; font-size: var(--fs-400); margin: 0 0 var(--space-1); }
.tier-stack .ts-price { display: inline; margin-left: var(--space-2); font-size: var(--fs-400); }
body.pricing main > section:first-of-type { padding-top: var(--space-4); }
.pricing-grid--3 { align-items: stretch; }
.pricing-grid--3 > li { display: flex; }
.pricing-grid--3 > li > .tier-stack { flex: 1 1 auto; display: flex; flex-direction: column; }
.tier-stack .ts-row { flex: 0 0 auto; }
.tier-stack .ts-light,
.tier-stack .ts-mid,
.tier-stack .ts-dark { flex: 1 1 0; min-height: 0; }
.tier-stack .ts-light { background: #e7e7ec; }
.pricing-grid--3 > .chip-card { display: flex; flex-direction: column; }
.pricing-grid--3 > .chip-card > .chip-note { flex: 1 1 auto; display: flex; flex-direction: column; }
.pricing-grid--3 > .chip-card > .chip-note > p:last-child { margin-top: auto; }
.tier-stack .ts-light .ts-line { color: #5d5d68; }
body.pricing .credit-callout,
body.pricing .pt-callout,
body.pricing .founding-note { max-width: none; width: 100%; }
.chip-card[class*="-card"] .chip-row {
gap: var(--space-2);
grid-template-columns: auto minmax(0, 1fr) max-content max-content;
}
.chip-card[class*="-card"] .chip-name { min-width: 0; white-space: nowrap; font-size: 1rem; }
.chip-card[class*="-card"] .chip-vol { white-space: nowrap; font-size: 0.8125rem; }
.chip-card[class*="-card"] .chip-price { white-space: nowrap; font-size: 1rem; }
.chip-card[class*="-card"] .chip-row { padding: var(--space-3); }
body.pricing .free-strip {
border: 0;
border-top: 6px solid var(--ink);
background: var(--soft);
padding: var(--space-5);
}
body.pricing .free-strip hr,
body.pricing .free-strip > hr { display: none; }
body.pricing main > .home-section + .home-section { padding-top: 0; }
body.pricing #plans { padding-bottom: var(--space-4); }
body.pricing #plans .founding-note { margin-bottom: 0; }
body.pricing #menu > .wrap > .kicker:first-child { margin-top: 0; }
body.pricing .pricing-grid--3 > .chip-card,
body.pricing .pricing-grid--3 > li > .tier-stack {
display: flex;
flex-direction: column;
}
body.pricing .pricing-grid--3 > .chip-card > .chip-note {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: var(--space-4);
}
body.pricing .pricing-grid--3 .loop-hero-facts {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 0;
}
body.pricing .pricing-grid--3 .loop-hero-facts li {
flex: 1 1 auto;
display: flex;
align-items: center;
min-height: 0;
}
body.pricing .pricing-grid--3 > .chip-card > .chip-note > p:last-child {
margin: var(--space-4) 0 0;
}
body.pricing .pricing-grid--3 .btn {
display: block;
width: 100%;
text-align: center;
}
body.pricing .tier-stack .ts-head {
flex: 0 0 auto;
padding: var(--space-4);
border-bottom: 1px solid var(--line);
}
body.pricing .tier-stack .ts-head .kicker { margin: 0; }
body.pricing .tier-stack .ts-foot {
flex: 0 0 auto;
border-top: 1px solid var(--line);
padding: var(--space-4);
margin: 0;
}
body.pricing .tier-stack .ts-foot p { margin: 0; }
body.pricing .tier-stack .ts-row {
display: block;
position: relative;
text-decoration: none;
color: var(--ink);
transition: background-color .15s ease;
}
body.pricing .tier-stack .ts-row .ts-name { padding-right: 1.9rem; }
body.pricing .tier-stack .ts-row::after {
content: "\2192";
position: absolute;
top: var(--space-3);
right: var(--space-4);
font-family: var(--font-mono);
font-weight: 700;
opacity: 0.4;
transition: transform .15s ease, opacity .15s ease;
}
body.pricing .tier-stack .ts-row:hover::after,
body.pricing .tier-stack .ts-row:focus-visible::after { opacity: 1; transform: translateX(4px); }
body.pricing .tier-stack .ts-row:focus-visible {
outline: 3px solid var(--pink);
outline-offset: -3px;
}
body.pricing .tier-stack .ts-row:hover { box-shadow: none; }
body.pricing .tier-stack .ts-light:hover { background: #d9d9e1; }
body.pricing .tier-stack .ts-mid:hover { background: #34343f; }
body.pricing .tier-stack .ts-dark:hover { background: #1f1f27; }
body.pricing .note-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-5);
margin: var(--space-5) 0 0;
padding-top: var(--space-4);
border-top: 1px solid var(--line);
}
body.pricing .note-row > * {
background: none;
border: 0;
padding: 0;
margin: 0;
width: auto;
max-width: none;
color: var(--muted);
font-size: var(--fs-100);
font-weight: 400;
letter-spacing: 0;
line-height: 1.55;
}
body.pricing .note-row p {
margin: 0 0 var(--space-2);
max-width: none;
font-size: var(--fs-100);
font-weight: 400;
letter-spacing: 0;
line-height: 1.55;
color: var(--muted);
}
body.pricing .note-row p:last-child { margin-bottom: 0; }
body.pricing .note-row strong { font-weight: 700; color: var(--ink); }
.menu-grid .chip-card > .chip-head { position: relative; }
body.pricing .free-strip .fs-items { align-items: stretch; }
body.pricing .free-strip .fs-items > li {
display: flex;
flex-direction: column;
background: #fff;
border-top: 4px solid var(--ink);
padding: var(--space-4);
}
body.pricing .free-strip .fs-items > li > p:first-of-type { flex: 1 1 auto; }
body.pricing .free-strip .fs-items > li .btn { align-self: flex-start; }
body.pricing .free-strip .fs-foot { margin-top: var(--space-4); border-top: 0; }
@media (max-width: 900px) {
body.pricing .note-row { grid-template-columns: 1fr; }
}
body.pricing main > section[aria-label="Free"] { padding-top: 0; }
body.pricing .pricing-grid--3 .two-price { margin-bottom: 0; }
body.pricing .tier-stack .ts-mid,
body.pricing .tier-stack .ts-mid .ts-name,
body.pricing .tier-stack .ts-dark,
body.pricing .tier-stack .ts-dark .ts-name { color: #fff; }
body.pricing .tier-stack .ts-mid .ts-line,
body.pricing .tier-stack .ts-dark .ts-line { color: #c9c9d2; }
body.pricing .pricing-grid--3 .loop-hero-facts { border-top: 0; }
body.pricing .free-strip { display: block; }
body.pricing .free-strip .fs-label {
margin-bottom: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--line);
}
body.pricing .free-strip .fs-items > li > p:not(:last-child) { margin-bottom: var(--space-3); }
body.pricing .free-strip .fs-items > li .btn { width: 100%; text-align: center; }
body.pricing .free-strip .fs-foot {
border-top: 1px solid var(--line);
padding-top: var(--space-3);
margin-top: var(--space-4);
}
body.pricing .free-strip .fs-foot { max-width: none; }
body.pricing main > section:first-of-type { padding-top: 0; }
body.pricing h1 { font-size: clamp(2rem, 3.4vw, 2.5rem); margin: 0.25rem 0 0; }
body.pricing #plans > .wrap > .kicker { margin-bottom: 0.4rem; }
body.pricing .lead { margin: 0.6rem 0 0; }
body.pricing .pricing-grid--3 { margin-top: var(--space-5); }
body.pricing .pricing-grid--3 {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.28fr);
}
body.pricing .pricing-grid--3 > .chip-card > .chip-head { padding: var(--space-3) var(--space-4); }
body.pricing .pricing-grid--3 > .chip-card > .chip-note { padding: var(--space-3) var(--space-4); }
body.pricing .pricing-grid--3 h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 0 0 0.2rem; }
body.pricing .pricing-grid--3 .tp-main { font-size: clamp(1.9rem, 3vw, 2.4rem); margin: 0; }
body.pricing .pricing-grid--3 .tp-alt { font-size: 1rem; margin-top: 0.35rem; }
body.pricing .pricing-grid--3 .loop-hero-facts li { padding: 0.55rem 0; }
body.pricing .pricing-grid--3 > .chip-card > .chip-note > p:last-child { margin: var(--space-3) 0 0; }
body.pricing .pricing-grid--3 .btn-lg { padding: 0.8rem 1rem; font-size: 1rem; }
body.pricing .tier-stack .ts-head { padding: var(--space-3) var(--space-4); }
body.pricing .tier-stack .ts-row { padding: var(--space-3) var(--space-4); }
body.pricing .tier-stack .ts-foot { padding: var(--space-3) var(--space-4); }
body.pricing .tier-stack .ts-name { font-size: 1.125rem; margin: 0 0 0.2rem; }
body.pricing .tier-stack .ts-price { font-size: 1.125rem; }
body.pricing .tier-stack .ts-line { font-size: 1rem; line-height: 1.45; }
body.pricing .tier-stack .ts-row::after { top: var(--space-3); }
body.pricing .pricing-grid--3 { margin-top: var(--space-4); }
body.pricing .pricing-grid--3 > .chip-card > .chip-head { padding: 0.85rem var(--space-4); }
body.pricing .pricing-grid--3 > .chip-card > .chip-note { padding: 0.5rem var(--space-4) 0.85rem; }
body.pricing .pricing-grid--3 h2 { font-size: clamp(1.4rem, 2.3vw, 1.75rem); }
body.pricing .pricing-grid--3 .tp-main { font-size: clamp(1.7rem, 2.7vw, 2.1rem); }
body.pricing .pricing-grid--3 .loop-hero-facts li { padding: 0.4rem 0; font-size: 1rem; }
body.pricing .pricing-grid--3 > .chip-card > .chip-note > p:last-child { margin: 0.85rem 0 0; }
body.pricing .pricing-grid--3 .btn-lg { padding: 0.7rem 1rem; font-size: 1rem; }
body.pricing .tier-stack .ts-head { padding: 0.7rem var(--space-4); }
body.pricing .tier-stack .ts-row { padding: 0.7rem var(--space-4); }
body.pricing .tier-stack .ts-foot { padding: 0.7rem var(--space-4); }
body.pricing .tier-stack .ts-line { line-height: 1.4; }
body.pricing .tier-stack .ts-row::after { top: 0.7rem; }
body.pricing h1 { margin-top: 0; }
body.pricing .lead { font-size: 1rem; line-height: 1.5; }
body.pricing .pricing-grid--3 { margin-top: 1rem; }
body.pricing .pricing-grid--3 .loop-hero-facts li { padding: 0.3rem 0; }
body.pricing .tier-stack .ts-head,
body.pricing .tier-stack .ts-row,
body.pricing .tier-stack .ts-foot { padding-top: 0.6rem; padding-bottom: 0.6rem; }
body.pricing .tier-stack .ts-row::after { top: 0.6rem; }
body.pricing main { padding-top: var(--space-3); }
body.pricing main > section:first-of-type { margin-top: 0; }
body.pricing .pricing-grid--3 .loop-hero-facts li { font-size: var(--fs-100); }
body.pricing .tier-stack .ts-line { font-size: var(--fs-100); }
body.pricing .pricing-grid--3 > .chip-card > .chip-note { padding-bottom: 0.6rem; }
@media (max-width: 900px) {
body.pricing .pricing-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
body.pricing .pricing-grid--3 { grid-template-columns: 1fr; }
}
body.pricing #blueprint-band { padding-top: var(--space-4); }
body.pricing #plans,
body.pricing #posttrace-band,
body.pricing #menu { padding-top: var(--space-5); }
body.pricing #free { padding-top: var(--space-5); padding-bottom: var(--space-5); }
body.pricing #plans > .wrap > .kicker { margin: 0 0 var(--space-3); }
.bp-band,
.ptr-band {
display: grid;
gap: var(--space-4) var(--space-5);
align-items: center;
background: var(--ink);
border-top: 6px solid var(--pink);
padding: var(--space-4);
color: #fff;
}
.bp-band { border-top-color: var(--blueprint-azure, #12B4EC);
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr) minmax(0, 0.8fr); }
.ptr-band { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr) minmax(0, 0.7fr); }
.bp-band .kicker,
.ptr-band .kicker { color: #c9c9d2; margin: 0 0 0.4rem; }
.band-title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 0; line-height: 1.1; }
.band-price {
font-family: var(--font-mono); font-size: clamp(1.7rem, 2.8vw, 2.1rem);
font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff;
margin: 0.3rem 0 0;
}
.band-alt { font-family: var(--font-mono); font-size: 0.8125rem; color: #c9c9d2; margin: 0.35rem 0 0; }
.band-alt strong { color: #fff; }
.bb-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--space-4); }
.bp-band .bb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-facts li {
font-size: 1rem; line-height: 1.4; color: #e9e9ef;
padding: 0.4rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); margin: 0;
}
.bb-facts li::marker { content: none; }
.bb-act .btn { display: block; width: 100%; text-align: center; }
.bb-credit { font-size: 1rem; line-height: 1.45; color: #c9c9d2; margin: 0.6rem 0 0; max-width: none; }
.ptr-band-body { display: grid; gap: var(--space-3); }
.pt-payback { font-size: 1rem; line-height: 1.5; color: #fff; margin: 0; max-width: none; }
.plan-grid {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4); align-items: stretch;
}
.plan {
display: flex; flex-direction: column;
border-top: 6px solid var(--pink);
padding: var(--space-3) var(--space-4) var(--space-4);
}
.plan-table { background: #e7e7ec; color: var(--ink); }
.plan-loop { background: #383843; color: #fff; }
.plan-circuit { background: #24242f; color: #fff; }
.plan-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.plan-price {
font-family: var(--font-mono); font-size: 1.75rem; font-weight: 800;
letter-spacing: -0.03em; line-height: 1; margin: 0.25rem 0 0;
}
.plan-price .per { font-size: 1rem; font-weight: 500; }
.plan-alt { font-family: var(--font-mono); font-size: 0.8125rem; margin: 0.3rem 0 0; }
.plan-lead { font-size: 1rem; line-height: 1.4; margin: 0.6rem 0 0; max-width: none; }
.plan-rows { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.plan-rows li {
font-size: 1rem; line-height: 1.35; margin: 0;
padding: 0.35rem 0; border-bottom: 1px solid var(--line);
}
.plan-rows li::marker { content: none; }
.plan-cta { margin: var(--space-3) 0 0; padding-top: 0; }
.plan-cta .btn { display: block; width: 100%; text-align: center; padding: 0.7rem 1rem; font-size: 1rem; }
.plan-table .plan-alt,
.plan-table .plan-lead { color: #4a4a55; }
.plan-table .plan-rows li { color: #3a3a45; border-bottom-color: #cfcfd8; }
.plan-loop .plan-alt, .plan-circuit .plan-alt,
.plan-loop .plan-lead, .plan-circuit .plan-lead { color: #c9c9d2; }
.plan-loop .plan-rows li, .plan-circuit .plan-rows li { color: #e9e9ef; border-bottom-color: rgba(255,255,255,0.16); }
.plan-loop .plan-rows li:last-child, .plan-circuit .plan-rows li:last-child { border-bottom: 0; }
.plan-table .plan-rows li:last-child { border-bottom: 0; }
.plan-table .plan-btn { box-shadow: none; }
.plan-loop .neon,
.plan-circuit .neon,
.ptr-band .neon {
text-shadow: 0 0 10px rgba(255, 46, 154, 0.55),
0 0 26px rgba(255, 46, 154, 0.32);
}
.promise-strip {
font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: var(--ink);
border-left: 4px solid var(--pink); padding: var(--space-3) var(--space-4);
margin: var(--space-4) 0 0; max-width: none; background: var(--soft);
}
.founding-line {
font-size: 1rem; line-height: 1.5; color: var(--muted);
margin: var(--space-3) 0 0; max-width: none;
}
.menu-grid a.chip-row { text-decoration: none; color: inherit; cursor: pointer; }
.menu-grid a.chip-row:hover { text-decoration: none; }
.menu-grid a.chip-row:focus-visible { outline: 3px solid var(--svc-on, var(--ink)); outline-offset: -3px; }
.chip-more-wrap { margin: 0; padding: var(--space-3); }
.chip-card[class*="-card"] .chip-more {
font-size: 1rem; font-weight: 600; color: var(--svc-on);
text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 900px) {
.bp-band, .ptr-band { grid-template-columns: 1fr; }
.plan-grid { grid-template-columns: 1fr; }
}
body.pricing main > section:first-of-type { padding-bottom: 0; }
body.pricing h1 { font-size: clamp(1.9rem, 3.1vw, 2.25rem); }
body.pricing #blueprint-band { padding-top: var(--space-3); padding-bottom: var(--space-3); }
body.pricing #plans { padding-top: var(--space-3); }
body.pricing #plans > .wrap > .kicker { margin: 0 0 0.5rem; }
.bp-band, .ptr-band { padding: var(--space-3) var(--space-4); gap: var(--space-3) var(--space-4); }
.bp-band .bb-facts li { padding: 0.25rem 0; line-height: 1.35; }
.bp-band .bb-facts li:nth-last-child(-n+2) { border-bottom: 0; }
.bb-credit { font-size: 1rem; margin: 0.45rem 0 0; }
.plan { padding: var(--space-3) var(--space-4); }
.plan-lead { margin: 0.45rem 0 0; }
.plan-rows { margin-top: 0.55rem; }
.plan-rows li { padding: 0.24rem 0; line-height: 1.3; }
.plan-cta { margin: 0.7rem 0 0; }
.plan-cta .btn { padding: 0.6rem 1rem; font-size: 1rem; }
.band-title { color: #fff; }
body.pricing main > section { margin-top: 0; }
body.pricing #plans,
body.pricing #posttrace-band { padding-top: var(--space-4); }
body.pricing #menu,
body.pricing #free { padding-top: var(--space-5); }
.bp-band .band-price, .ptr-band .band-price { margin-top: 0.15rem; }
.bp-band .band-alt, .ptr-band .band-alt { margin-top: 0.2rem; }
.bp-band .kicker, .ptr-band .kicker { margin-bottom: 0.25rem; }
body.pricing main > section:first-of-type { padding-top: 0.5rem; }
body.pricing .lead { margin-top: 0.45rem; }
body.pricing #blueprint-band { padding-bottom: 0.75rem; }
.plan-rows li { padding: 0.19rem 0; }
.plan-cta { margin-top: 0.6rem; }
.bp-band .band-title, .ptr-band .band-title { font-size: clamp(1.3rem, 2.1vw, 1.6rem); }
.bp-band .band-price, .ptr-band .band-price { font-size: clamp(1.5rem, 2.4vw, 1.85rem); }
.bp-band, .ptr-band { padding: 0.8rem var(--space-4); }
.plan-name { font-size: 1.2rem; }
.plan-price { font-size: 1.55rem; }
body.pricing h1 { font-size: clamp(1.8rem, 2.9vw, 2.1rem); }
.bb-lead { min-width: 0; }
.ptr-band .btn-ink-outline { color: #fff; border-color: #fff; background: transparent; }
.ptr-band .btn-ink-outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.plan-rows { flex: 1 1 auto; }
.plan-cta { margin-top: auto; padding-top: 0.6rem; }
.ptr-band {
background: var(--pink);
border-top: 0;
color: var(--ink);
}
.ptr-band .kicker,
.ptr-band .band-title,
.ptr-band .band-save,
.ptr-band .band-price-line,
.ptr-band .band-price-line strong,
.ptr-band .save-tier,
.ptr-band .save-note,
.ptr-band .bb-facts li { color: var(--ink); }
.ptr-band .band-title { text-shadow: none; }
.ptr-band .bb-facts li { border-bottom-color: rgba(10, 10, 11, 0.28); }
.ptr-band .band-save {
font-family: var(--font-mono);
font-size: clamp(1.7rem, 2.8vw, 2.15rem);
font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
margin: 0.35rem 0 0; max-width: none;
}
.ptr-band .band-save-unit {
display: block; font-family: var(--font-body);
font-size: 1rem; font-weight: 600; letter-spacing: 0;
line-height: 1.3; margin-top: 0.2rem;
}
.ptr-band .band-price-line {
font-family: var(--font-mono); font-size: 0.8125rem;
margin: 0.5rem 0 0; max-width: none;
}
.save-chart { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.save-row {
display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
align-items: center; gap: 0.6rem; margin: 0;
}
.save-row::marker { content: none; }
.save-tier { font-size: 1rem; font-weight: 700; }
.save-bar {
display: flex; align-items: center; justify-content: flex-end;
background: var(--ink); border-radius: 0; box-shadow: none;
min-height: 26px; padding: 0 0.55rem;
}
.save-val {
font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700;
color: #fff; white-space: nowrap;
}
.save-note { font-size: 1rem; line-height: 1.4; margin: 0.65rem 0 0; max-width: none; }
.ptr-band .btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.ptr-band .btn-ink:hover { background: #fff; color: var(--ink); border-color: #fff; }
.plan-table .neon { color: var(--pink-text); text-shadow: none; }
.ptr-band {
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
align-items: start;
gap: var(--space-4);
padding: var(--space-4);
}
.ptr-band .bb-lead { display: flex; flex-direction: column; }
.ptr-band .band-title,
.ptr-band .band-save { color: #fff; }
.ptr-band .kicker { color: var(--ink); }
.ptr-band .band-save {
font-family: var(--font-head);
font-size: clamp(1.7rem, 2.7vw, 2.05rem);
font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
margin: 0.4rem 0 0;
}
.ptr-band .band-save-unit {
display: block; font-family: var(--font-head);
font-size: 1rem; font-weight: 600; letter-spacing: 0;
line-height: 1.3; margin-top: 0.25rem; color: #fff;
}
.ptr-band .band-price-line {
font-family: var(--font-mono); font-size: 1rem; font-weight: 500;
color: var(--ink); margin: 0.65rem 0 0; max-width: none;
}
.ptr-band .band-price-line strong { font-weight: 800; }
.ptr-band .bb-lead .btn { margin-top: var(--space-3); align-self: flex-start; }
.btn-on-pink {
background: #fff; color: var(--pink-text); border-color: #fff; font-weight: 700;
}
.btn-on-pink:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ptr-panel { background: #fff; padding: var(--space-3) var(--space-4); }
.ptr-panel .save-tier,
.ptr-panel .bb-facts li { color: var(--ink); }
.ptr-panel .save-note { color: var(--muted); }
.ptr-panel .bb-facts li { border-bottom-color: var(--line); }
.ptr-panel .bb-facts li:last-child { border-bottom: 0; }
.ptr-panel .save-note { margin: 0.6rem 0 0; }
.ptr-panel .bb-facts { margin-top: 0.6rem; }
.ptr-band .band-save-unit { font-size: 1.1875rem; font-weight: 700; }
.ptr-band { align-items: stretch; }
.ptr-band .bb-lead { justify-content: space-between; }
.ptr-card {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
background: var(--ink);
border-top: 2px solid var(--pink);
border-radius: 0;
box-shadow: none;
}
.ptr-chart { padding: var(--space-4); min-width: 0; }
.ptr-rail {
padding: var(--space-4);
border-left: 1px solid #232028;
display: flex; flex-direction: column;
}
.ptr-eyebrow {
font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase;
margin: 0 0 var(--space-2);
}
.ptr-title {
font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: -0.02em;
line-height: 1.15; color: #fff; margin: 0;
}
.ptr-sub {
font-family: var(--font-mono); font-size: 0.8125rem; color: #c9c9d2;
margin: 0.35rem 0 var(--space-3); max-width: none;
}
.ptr-svg { display: block; width: 100%; height: auto; }
.ptr-svg text { font-family: var(--font-mono); font-size: 12px; }
.ptr-svg .ptr-xcap { font-size: 10px; letter-spacing: 0.12em; }
.ptr-svg .ptr-end { font-size: 12px; font-weight: 700; }
.ptr-legend { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 4px; }
.ptr-legend li {
font-family: var(--font-mono); font-size: 0.8125rem; color: #e9e9ef;
margin: 0; display: flex; align-items: center; gap: 0.5rem;
}
.ptr-legend li::marker { content: none; }
.ptr-swatch { display: inline-block; width: 18px; height: 3px; flex: 0 0 18px; }
.ptr-facts { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.ptr-facts li {
font-size: 1rem; line-height: 1.4; color: #c9c9d2; margin: 0;
padding: 0.3rem 0; border-top: 1px solid #232028;
}
.ptr-facts li::marker { content: none; }
.ptr-rail h3 {
font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em;
color: #fff; text-shadow: none; margin: 0 0 var(--space-3);
}
.ptr-stat { border-top: 1px solid #232028; padding: 0.6rem 0; }
.ptr-stat-key {
font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase; color: #c9c9d2; margin: 0;
}
.ptr-stat-val {
font-family: var(--font-mono); font-size: 1.25rem; font-weight: 800;
letter-spacing: -0.02em; color: #fff; margin: 0.15rem 0 0; max-width: none;
}
.ptr-stat-unit { font-size: 1rem; font-weight: 500; color: #c9c9d2; }
.ptr-stat-key.is-pill {
display: inline-block; background: var(--pink); color: var(--ink);
padding: 0.2rem 0.5rem; margin-bottom: 0.2rem;
}
.ptr-stat-val + .ptr-stat-val { margin-top: 0.3rem; }
.ptr-stat.is-price .ptr-stat-key,
.ptr-stat.is-price .ptr-stat-val,
.ptr-stat.is-price .ptr-stat-unit { color: var(--pink); }
.ptr-fine {
font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5;
color: #c9c9d2; margin: var(--space-3) 0 0; max-width: none;
}
.btn-glow {
background: var(--pink); color: var(--ink); border-color: var(--pink);
border-radius: 0; font-weight: 700;
display: block; width: 100%; text-align: center;
box-shadow: var(--glow-pink);
}
.ptr-rail .btn-glow { margin-top: auto; }
.ptr-rail .ptr-facts { margin-bottom: var(--space-4); }
.btn-glow:hover {
background: var(--pink); color: var(--ink); border-color: var(--pink);
box-shadow: var(--glow-pink-lg);
}
@media (max-width: 900px) {
.ptr-card { grid-template-columns: 1fr; }
.ptr-rail { border-left: 0; border-top: 1px solid #232028; }
}
.ptr-card .neon {
text-shadow: 0 0 10px rgba(255, 46, 154, 0.55),
0 0 26px rgba(255, 46, 154, 0.32);
}
.ptr-facts li { padding: 0.25rem 0; }
body.home .hero .eyebrow { margin-bottom: 6px; } 
body.home .hero .lead { margin-bottom: 10px; }
body.home .hero .hero-cta { margin-bottom: 12px; }
body.home .hero .secondary-cta { margin-bottom: 10px; }
body.home .hero .cred { margin-top: 12px; }
body.home .brand-banner { padding: 20px 0 24px; }
body.home .hero-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 44px; 
align-items: start;
max-width: max(calc(8.89 * clamp(2.6rem, 8vw, 7.2rem)), 1024px);
}
body.home .hero-cols .lead { max-width: 600px; }
body.home .hero-cols .cred {
margin: 0;
max-width: none;
align-self: start;
}
body.home .hero-pitch > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
body.home .hero-cols { grid-template-columns: 1fr; gap: 0; }
body.home .hero-cols .cred { margin-top: 12px; }
}
body.home .brand-banner { padding: 26px 0 30px; }
body.home .brand-banner h2 { margin-bottom: 28px; }
body.home .marquee-track img { height: 56px; }
body.home .marquee-track img[src*="dry-guyz"] { height: 114px; }
body.home .marquee-track img[src*="jfc"] { height: 106px; }
body.home .marquee-track img[src*="the-collective-flow"] { height: 68px; }
body.home .marquee-track img[src*="chatsheet"] { height: 25px; }
.h1-line { display: inline-block; }
@media (min-width: 901px) {
body.home .hero {
min-height: calc(100svh - var(--header-h) - var(--banner-h));
display: flex;
flex-direction: column;
justify-content: center;
}
}
.src-list {
list-style: none;
counter-reset: src;
padding: 0;
margin: var(--space-5) 0 0;
border-top: 1px solid var(--line);
}
.src-list > li {
counter-increment: src;
display: grid;
grid-template-columns: 3.5rem 1fr;
gap: var(--space-3);
align-items: baseline;
padding: var(--space-4) 0;
border-bottom: 1px solid var(--line);
margin: 0;
}
.src-list > li::before {
content: counter(src, decimal-leading-zero);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--pink-text);
}
body.blueprint .src-list > li::before { color: var(--blueprint-azure-ink); }
.src-list h3,
.src-list p { grid-column: 2; }
.src-list h3 {
font-size: 1.1875rem;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 var(--space-2);
}
.src-list p {
font-size: var(--fs-100);
line-height: 1.6;
color: var(--muted);
margin: 0;
max-width: 74ch;
}
@media (max-width: 560px) {
.src-list > li { grid-template-columns: 2.25rem 1fr; gap: var(--space-2); }
.src-list > li::before { font-size: 1.125rem; }
}
body.home .hero .lead strong { color: var(--ink); font-weight: 600; }
body.home .hero .eyebrow { margin-bottom: 6px; }
body.home .hero h1 { margin-bottom: 6px; }
body.home .hero .lead { margin-bottom: 6px; }
body.home .hero .secondary-cta { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
.pt-system-crop { aspect-ratio: auto; }
.pt-system-video { transform: none; }
}
.plan-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.plan-grid--4 .plan { padding: 0.75rem 0.9rem 0.9rem; }
body.pricing #plans { padding-top: 0.75rem; }
body.pricing #plans > .wrap > .kicker { margin-bottom: 0.35rem; }
body.pricing #blueprint-band { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.plan-grid--4 .plan-cta .btn { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.plan-grid--4 .plan-rows li { font-size: 1rem; }
@media (max-width: 1100px) { .plan-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .plan-grid--4 { grid-template-columns: 1fr; } }
.plan-gateway { background: var(--ink); color: #fff; }
.plan-gateway .plan-lead { color: #c9c9d2; }
.plan-gateway .plan-rows li { color: #e9e9ef; border-bottom-color: rgba(255,255,255,0.16); }
.plan-gateway .plan-rows li:last-child { border-bottom: 0; }
.plan-gateway .neon {
text-shadow: 0 0 10px rgba(255, 46, 154, 0.55),
0 0 26px rgba(255, 46, 154, 0.32);
}
.ptr-card--terms { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.ptr-main { padding: var(--space-4); min-width: 0; }
.ptr-terms { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.ptr-terms li {
font-size: 1rem; line-height: 1.5; color: #e9e9ef; margin: 0;
padding: 0.6rem 0; border-top: 1px solid #232028;
}
.ptr-terms li::marker { content: none; }
.ptr-terms li strong { color: #fff; font-weight: 800; }
@media (max-width: 900px) { .ptr-card--terms { grid-template-columns: 1fr; } }
@media (min-width: 901px) {
.menu-grid--2, .menu-col-heads--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.menu-inside { margin: var(--space-4) 0 0; font-size: var(--fs-100); color: var(--muted); }
.svc-card-row--plan { grid-template-columns: 1fr auto; }
.svc-card-row--plan .svc-card-count { grid-column: 2; text-align: right; }
@media (min-width: 601px) and (max-width: 1080px) {
.site-nav ul { column-gap: var(--space-3); }
.site-nav a { letter-spacing: 0.01em; }
}
.plan-rows li { line-height: 1.25; padding: 0.15rem 0; }
@media (min-width: 901px) {
body.home .hero-pitch { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); align-items: center; }
body.home .hero-pitch > :not(.hero-cta):not(.secondary-cta) { grid-column: 1 / -1; }
body.home .hero-pitch > .secondary-cta { margin: 0; }
}
:root {
--on-dark: #ffffff;
--on-dark-soft: #c9c9d2; 
--glow-top: radial-gradient(70% 90% at 88% -10%, rgba(255, 46, 154, 0.20), transparent 60%),
radial-gradient(60% 80% at -5% 110%, rgba(18, 180, 236, 0.12), transparent 60%);
}
.glass {
position: relative;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 30px 70px -36px rgba(255, 46, 154, 0.45);
}
.glass::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
background: linear-gradient(135deg, rgba(255, 46, 154, 0.9), rgba(255, 46, 154, 0) 38%, rgba(18, 180, 236, 0) 62%, rgba(18, 180, 236, 0.75));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
}
body.home .hero {
--hero-h1: min(9.2vw, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 9));
background: var(--glow-top), var(--ink);
color: var(--on-dark);
}
body.home .hero::before, body.home .hero::after { background: rgba(255, 255, 255, 0.10); }
body.home .hero .eyebrow { color: var(--on-dark); }
body.home .hero h1 { font-size: var(--hero-h1); color: var(--on-dark); }
body.home .hero h1 .hl { color: var(--ink); }
body.home .hero-cols { max-width: calc(8.89 * var(--hero-h1)); }
@media (min-width: 901px) {
body.home .hero-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); gap: var(--space-5); }
}
body.home .hero-cols .lead { max-width: 46rem; color: var(--on-dark-soft); text-wrap: pretty; }
body.home .hero .lead strong { color: var(--on-dark); }
body.home .hero .secondary-cta { color: var(--on-dark-soft); }
body.home .hero .secondary-cta a { color: var(--on-dark); }
body.home .hero-cols .cred { padding: var(--space-4); color: var(--on-dark-soft); align-self: start; }
body.home .hero .cred b, body.home .hero .cred strong { color: var(--on-dark); }
body.home .brand-banner { border-top: 1px solid rgba(255, 255, 255, 0.08); }
body.pricing main > section:first-of-type,
body.pricing #blueprint-band { background: var(--ink); color: var(--on-dark); }
body.pricing main { padding-top: 0; }
body.pricing main > section:first-of-type { background: radial-gradient(70% 120% at 88% -20%, rgba(255, 46, 154, 0.20), transparent 60%), var(--ink); padding-top: var(--space-5); }
body.pricing #blueprint-band { background: radial-gradient(50% 120% at -5% 120%, rgba(18, 180, 236, 0.14), transparent 60%), var(--ink); padding-bottom: var(--space-5); }
body.pricing main > section:first-of-type h1 { color: var(--on-dark); }
body.pricing main > section:first-of-type .lead { color: var(--on-dark-soft); }
body.pricing main > section:first-of-type .kicker { color: var(--pink); }
body.pricing #plans { padding-top: var(--space-5); }
.page-top {
background: var(--glow-top), var(--ink);
color: var(--on-dark);
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50%);
padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
margin-bottom: var(--space-5);
}
.page-top > :first-child { margin-top: 0; }
.page-top > :last-child { margin-bottom: 0; }
main:has(> .page-top:first-child),
main:has(> article:first-child > .page-top:first-child) { padding-top: 0; }
.page-top h1 { color: var(--on-dark); }
.page-top .lead, .page-top .muted, .page-top .byline,
.page-top .secondary-cta { color: var(--on-dark-soft); }
.page-top a { color: var(--on-dark); }
.page-top .breadcrumb a { color: var(--pink); }
main > .svc-hero:first-child {
background: var(--glow-top), var(--ink);
color: var(--on-dark);
}
main > .svc-hero:first-child h1,
main > .svc-hero:first-child .eyebrow { color: var(--on-dark); }
main > .svc-hero:first-child h1 .hl { color: var(--ink); }
main > .svc-hero:first-child .lead,
main > .svc-hero:first-child p:not(.eyebrow):not(.lead) { color: var(--on-dark-soft); }
main > .svc-hero:first-child a:not(.btn) { color: var(--on-dark); }
main:has(> .svc-hero:first-child) { padding-top: 0; }
.hl-hero { background: var(--glow-top), var(--ink); color: var(--on-dark); }
.hl-hero::before, .hl-hero::after { background: rgba(255, 255, 255, 0.10); }
.hl-hero h1, .hl-hero .eyebrow, .hl-hero .lead, .hl-hero .loop-price, .hl-dot { color: var(--on-dark); }
.hl-hero-sub, .hl-hero .secondary-cta, .hl-hero .loop-term { color: var(--on-dark-soft); }
.hl-hero a:not(.btn) { color: var(--on-dark); }
main > .svc-hero:first-child, main > .hl-hero:first-child { margin-top: 0; }
.hl-hero .hl-kill { background: var(--hitlist-red); color: #fff; padding: 0 0.22em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
main > .svc-hero:first-child + section, main > .hl-hero:first-child + section { margin-top: 0; }
:root { --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-swipe: cubic-bezier(0.7, 0, 0.2, 1); }
@media (prefers-reduced-motion: no-preference) {
@keyframes hma-rise {
from { opacity: 0; transform: translateY(0.35em); filter: blur(8px); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes hma-sweep {
from { transform: skewX(-10deg) scaleX(0); }
to { transform: skewX(-10deg) scaleX(1); }
}
body.home .hero .eyebrow { animation: hma-rise 0.7s var(--ease-out) both; }
body.home .hero .h1-line { animation: hma-rise 0.9s var(--ease-out) 0.08s both; }
body.home .hero .h1-line + .h1-line { animation-delay: 0.2s; }
body.home .hero .hl::before { transform-origin: left center; animation: hma-sweep 0.7s var(--ease-swipe) 0.6s both; }
body.home .hero-pitch > *, body.home .hero-cols > .cred { animation: hma-rise 0.8s var(--ease-out) 0.45s both; }
body.home .hero-pitch > :nth-child(2) { animation-delay: 0.53s; }
body.home .hero-pitch > :nth-child(3), body.home .hero-cols > .cred { animation-delay: 0.62s; }
body.home .hero-pitch > :nth-child(4) { animation-delay: 0.68s; }
.page-top h1, main > section:first-child h1:not(body.home h1) { animation: hma-rise 0.8s var(--ease-out) both; }
main > section:first-child h1 .hl::before { transform-origin: left center; animation: hma-sweep 0.7s var(--ease-swipe) 0.45s both; }
.rv {
opacity: 0;
transform: translateY(28px);
filter: blur(6px);
transition: opacity 0.8s var(--ease-out) var(--rv-delay, 0s),
transform 0.8s var(--ease-out) var(--rv-delay, 0s),
filter 0.8s var(--ease-out) var(--rv-delay, 0s);
}
.rv.in { opacity: 1; transform: none; filter: none; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -75%;
width: 50%;
background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
transform: skewX(-20deg);
transition: left 0.75s var(--ease-out);
pointer-events: none;
}
.btn:hover::after, .btn:focus-visible::after { left: 130%; }
.article-card, .plan, .chip-card, .work-card, .board-blueprint, .board-posttrace {
transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.2s ease;
}
.article-card:hover, .plan:hover, .chip-card:hover, .work-card:hover,
.board-blueprint:hover, .board-posttrace:hover {
transform: translateY(-6px);
box-shadow: 0 26px 44px -24px rgba(10, 10, 11, 0.45);
}
}
.pull-line {
position: relative;
font-size: clamp(1.6rem, 2.8vw, 2.6rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.18;
max-width: 28ch;
text-wrap: balance;
margin: var(--space-6) 0 0;
padding-top: var(--space-4);
}
.pull-line::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 56px; height: 4px;
background: var(--pink);
}
.quiet-note { color: var(--muted); max-width: 62ch; margin: var(--space-4) 0 0; }
.statement {
margin: var(--space-6) calc(50% - 50vw);
max-width: none;
padding: clamp(4rem, 9vw, 8rem) calc(50vw - 50%);
background: radial-gradient(60% 120% at 100% 0%, rgba(255, 46, 154, 0.18), transparent 60%), var(--ink);
background-color: var(--ink);
color: var(--on-dark);
font-size: clamp(2.2rem, 4.6vw, 4.8rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.04;
text-wrap: balance;
}
@media (min-width: 901px) {
.wrap.split {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(2rem, 5vw, 6rem);
align-items: start;
}
.wrap.split > .sec-head { grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h) + 2rem); margin: 0; }
.wrap.split > :not(.sec-head) { grid-column: 2; }
}
.wrap.split .prose p { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5; max-width: 34ch; }
.wrap.split .prose p:first-child { margin-top: 0; }
#have-wanted .what-you-see { border: 0; gap: 0; }
#have-wanted .what-you-see > div { border: 0; padding: clamp(1.75rem, 3.5vw, 3rem); }
#have-wanted .what-you-see > div:first-child { background: #ececf1; }
#have-wanted .what-you-see > div:last-child { background: var(--ink); color: var(--on-dark); }
#have-wanted .what-you-see > div:last-child h3 { color: var(--pink); }
#have-wanted .what-you-see > div:last-child p { color: var(--on-dark); }
#have-wanted .what-you-see p { font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
#have-wanted .what-you-see > div:first-child p { color: #5a5a64; }
@media (min-width: 901px) {
.pt-grid.bento { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.pt-grid.bento > :first-child { grid-row: span 2; }
}
.pt-grid.bento > :first-child { background: var(--ink); color: var(--on-dark); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.75rem, 3.5vw, 3rem); }
.pt-grid.bento > :first-child h3 { color: var(--on-dark); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.15; letter-spacing: -0.025em; }
.pt-grid.bento > :first-child p { color: var(--on-dark-soft); font-size: 1.125rem; }
.pt-grid.bento > :first-child:hover { background: var(--ink); }
.pt-grid.bento > :not(:first-child) h3 { font-size: 1.25rem; }
@media (min-width: 901px) {
.steps.steps-across { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); max-width: none; }
.steps.steps-across > li { border-top: 3px solid var(--ink); padding: var(--space-4) 0 0; }
.steps.steps-across > li:first-child { border-top: 3px solid var(--ink); }
.steps.steps-across > li::before { position: static; display: block; font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 600; line-height: 1; margin-bottom: var(--space-3); color: var(--pink-text); }
}
body.home #apply { background: #f4f4f7; padding-block: clamp(3rem, 5vw, 4.5rem); }
body.home .ladder .founding-note { background: none; border: 0; padding: 0; color: var(--muted); max-width: 62ch; margin-top: 0; }
section > .wrap:has(> .pull-line:last-child) { padding-bottom: clamp(3rem, 6vw, 5rem); } 
.pull-line + p { margin-top: var(--space-4); }
.sec-head--pill { text-align: center; margin-inline: auto; max-width: 46rem; }
.sec-pill {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
border: 1px solid var(--line); background: var(--soft); border-radius: 999px;
padding: 0.35rem 0.85rem; margin: 0 0 var(--space-3); max-width: none; color: var(--ink);
}
.sec-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.sec-head--pill h2 {
background: linear-gradient(180deg, var(--ink) 35%, #5a5a64);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-head--pill p:not(.sec-pill) { margin-inline: auto; max-width: 40ch; }
.sec-head--split { max-width: none; }
.sec-rule {
display: flex; align-items: center; gap: 0.6rem; max-width: none;
font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink); margin: 0 0 var(--space-4);
}
@media (min-width: 901px) {
.sec-head--split .sec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: end; }
}
.sec-head--split .sec-row p { max-width: 40ch; }
.sec-head h2.sec-light { font-size: clamp(3.2rem, 7.4vw, 7rem); font-weight: 300; letter-spacing: -0.055em; line-height: 0.95; }
.sec-head h2.sec-light b { font-weight: 800; }
.sec-head--split .sec-row { padding-top: var(--space-4); }
.sec-label { display: inline; }
@media (min-width: 901px) {
.pt-system-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.pt-system-row > .pt-system { position: sticky; top: calc(var(--header-h) + 1.5rem); margin: 0; max-width: none; }
.pt-system-row > .src-list { margin-top: 0; }
}
.pt-system-crop.is-expandable { position: relative; cursor: zoom-in; }
.pt-system-crop.is-expandable::after {
content: "\2922  Expand";
position: absolute; right: 0.75rem; bottom: 0.75rem;
font: 600 0.9375rem/1 var(--font-body); color: var(--ink); background: #fff;
padding: 0.55rem 0.8rem; opacity: 0; transform: translateY(6px);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
pointer-events: none;
}
.pt-system-crop.is-expandable:hover::after { opacity: 1; transform: none; }
.pt-system-crop.is-expandable video { transition: filter 0.3s ease; }
.pt-system-crop.is-expandable:hover video { filter: brightness(1.12); }
.pt-system-expand {
display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--space-3);
font: 600 1rem/1 var(--font-body); color: var(--ink); background: var(--bg);
border: 1px solid var(--ink); padding: 0.7rem 1rem; cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.pt-system-expand::before { content: "\2922"; font-size: 1.1em; }
.pt-system-expand:hover, .pt-system-expand:focus-visible { background: var(--ink); color: var(--on-dark); }
.pt-system-expand[hidden] { display: none; }
.pt-system-dialog {
border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
width: 100vw; height: 100vh; display: none; align-items: center; justify-content: center;
}
.pt-system-dialog[open] { display: flex; }
.pt-system-dialog::backdrop { background: rgba(10, 10, 11, 0.92); backdrop-filter: blur(6px); }
.pt-system-dialog-video { height: 92vh; width: auto; max-width: 96vw; object-fit: contain; display: block; }
.pt-system-close {
position: fixed; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; z-index: 1;
font: 600 1rem/1 var(--font-body); color: var(--ink); background: #fff; border: 0; padding: 0.75rem 1.1rem; cursor: pointer;
}
.pt-system-close:focus-visible { outline: 3px solid var(--azure, #12b4ec); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
.pt-system-dialog[open] { animation: hma-rise 0.45s var(--ease-out) both; }
}
body.posttrace .pt-hero-card.glass { padding: clamp(1.75rem, 3.5vw, 3rem); }
body.posttrace .pt-hero-card .loop-price { font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; margin: 0 0 var(--space-4); }
body.posttrace .pt-hero-card .loop-price .loop-term { font-size: 1rem; letter-spacing: 0.1em; vertical-align: middle; }
body.posttrace .pt-hero-card .loop-gate { font-family: var(--font-body); font-size: 1.0625rem; color: var(--on-dark-soft); }
body.posttrace .pt-hero-card .loop-gate + .loop-gate { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.1); }
body.pricing .pricing-top { background: var(--glow-top), var(--ink); color: var(--on-dark); padding-bottom: clamp(3rem, 6vw, 5rem); }
body.pricing .pricing-top .lead a { color: #fff; text-decoration-color: var(--pink); }
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: var(--space-5); }
.board > * { min-width: 0; }
.board-blueprint, .board-plans { grid-column: 1 / -1; }
.board-posttrace, .board-menu { grid-column: 1 / -1; }
@media (min-width: 1100px) {
.board-posttrace { grid-column: 1 / span 5; }
.board-menu { grid-column: 6 / -1; }
}
body.pricing .board #plans { margin: 0; padding: 0; }
.board .plan-grid--4 { margin: 0; }
.board .plan .plan-lead { margin-bottom: var(--space-3); }
.board-menu { display: flex; flex-direction: column; }
.board-menu > .kicker { color: var(--pink); margin: 0 0 var(--space-2); }
.board-menu > h2 { color: var(--on-dark); font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin: 0 0 var(--space-2); }
.board-menu > p:not(.kicker) { color: var(--on-dark-soft); max-width: none; }
.board-menu > p a { color: var(--on-dark); }
.board-menu .menu-grid { margin-top: var(--space-3); }
.board-menu .menu-inside { margin-top: var(--space-3); }
.compare-scroll { overflow-x: auto; border: 1px solid var(--line); margin-top: var(--space-4); -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 1rem; }
.compare th, .compare td { padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.4; }
.compare thead th, .compare thead td { background: var(--ink); color: var(--on-dark); border-bottom: 0; vertical-align: bottom; }
.compare .cmp-name { display: block; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
.compare .cmp-price { display: block; font-family: var(--font-mono); font-weight: 600; margin-top: 0.3rem; color: var(--pink); }
.compare .cmp-price .per { color: var(--on-dark-soft); font-weight: 500; }
.compare tbody th { font-weight: 600; width: 24%; }
.compare tbody td { color: #2f2f36; }
.compare tbody tr:nth-child(even) { background: #fafafb; }
.compare tbody tr:hover { background: #f1f1f5; }
.compare tbody th, .compare thead td { position: sticky; left: 0; z-index: 1; }
.compare tbody th { background: inherit; background-color: #fff; }
.compare tbody tr:nth-child(even) th { background-color: #fafafb; }
.compare .yes, .compare .no { display: inline-block; position: relative; width: 16px; height: 16px; vertical-align: middle; }
.compare .yes::before { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 6px; border-left: 2.5px solid var(--pink-text); border-bottom: 2.5px solid var(--pink-text); transform: rotate(-45deg); }
.compare .no::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 2px; background: #c9c9d3; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#compare .pull-line { margin-top: var(--space-6); }
.board-label { grid-column: 1 / -1; color: var(--pink); margin: var(--space-3) 0 0; }
@media (min-width: 1100px) {
.board-posttrace { grid-column: 1 / span 4; }
.board-menu { grid-column: 5 / -1; }
}
body.pricing #compare { padding-top: clamp(3.5rem, 7vw, 6rem); }
.compare { margin: 0; table-layout: fixed; }
.compare th, .compare td { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1rem; }
.compare thead tr > :first-child, .compare tbody th { width: 24%; }
.compare .cmp-name { font-size: 1.125rem; }
.compare .cmp-price { font-family: var(--font-mono); }
.board .chip-card .chip-head { padding-top: 3rem; }
body.pricing #compare { padding-top: clamp(3rem, 5vw, 4.5rem); }
.board-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.board-row > * { grid-column: auto; min-width: 0; margin: 0; }
.board .ptr-card.glass { border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); }
.board .board-posttrace { grid-column: 1 / -1; }
@media (min-width: 900px) { .board-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board .ptr-card .ptr-rail { display: flex; flex-direction: column; }
.board .ptr-card .ptr-rail .btn { margin-top: auto; }
.board .chip-card { display: flex; flex-direction: column; height: 100%; }
.board .chip-card .chip-more-wrap { margin-top: auto; }
.board-notes { margin-top: var(--space-4); display: grid; gap: 0.35rem; max-width: 72ch; }
.board-notes p { margin: 0; color: var(--on-dark-soft); max-width: none; }
.board-notes .kicker { color: var(--pink); }
.board-notes a { color: var(--on-dark); }
.board-row .chip-card > .chip-head { flex: 1 0 auto; position: relative; }
.board-row a.chip-row { text-decoration: none; color: inherit; cursor: pointer; }
.board-row a.chip-row:hover { text-decoration: none; }
.board-row a.chip-row:focus-visible { outline: 3px solid var(--svc-on, var(--ink)); outline-offset: -3px; }
.board-row a.chip-row * { text-decoration: none; }
.board-notes .board-notes-title { color: var(--on-dark); font-weight: 700; font-size: 1.125rem; }
body.pricing .board-row #menu { padding: 0; margin: 0; }
body.pricing .board #posttrace-band { padding-top: 0; }
body.pricing .board #blueprint-band {
padding: var(--space-4);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}
body.pricing main > section.pricing-top { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.board .chip-card.svc-outbound-eng-card { --tile: var(--svc-outbound-eng-card); }
.board .chip-card.svc-email-card { --tile: var(--svc-email-card); }
.board .chip-card.svc-outbound-eng-card,
.board .chip-card.svc-email-card {
--svc-on: #ffffff;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(--tile);
box-shadow: 0 30px 60px -36px var(--tile);
color: var(--on-dark);
}
.board .chip-card h3, .board .chip-card h3 a { color: var(--tile); }
.board .chip-card .price-blurb { color: var(--on-dark-soft); }
.board .chip-card .chip-row { border-bottom-color: rgba(255, 255, 255, 0.1); border-top-color: rgba(255, 255, 255, 0.1); }
.board .chip-card .chip-row:hover { box-shadow: inset 3px 0 0 var(--tile), inset 0 0 0 999px rgba(255, 255, 255, 0.05); }
.board .chip-card .chip-more { color: var(--tile); }
.is-card-link { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
.plan, .article-card, .chip-card, .work-card, .board-blueprint, .board-posttrace { position: relative; }
.plan::after, .article-card::after, .chip-card::after, .work-card::after,
.board-blueprint::after, .board-posttrace::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
}
}
.loop-hero-card.glass { border: 1px solid rgba(255, 255, 255, 0.08); border-top-width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); }
@media (min-width: 901px) {
.pt-grid.bento.bento--jobs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; }
.pt-grid.bento.bento--jobs > :first-child { grid-row: auto; grid-column: span 2; }
.pt-grid.bento.bento--jobs > :last-child:nth-child(6) { grid-column: span 2; }
.pt-grid.bento.bento--jobs > :nth-child(4):nth-last-child(2),
.pt-grid.bento.bento--jobs > :last-child:nth-child(5) { grid-column: span 2; }
.pt-grid.bento.bento--jobs > :last-child:nth-child(8) { grid-column: 1 / -1; }
}
.pt-grid.bento.bento--jobs > :first-child { justify-content: flex-start; }
.pt-grid.bento.bento--jobs > :first-child .num { color: var(--pink); }
@media (min-width: 901px) {
.loop-band.band-split { text-align: left; }
.loop-band.band-split .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.loop-band.band-split .wrap > .kicker, .loop-band.band-split .wrap > h2 { grid-column: 1; text-align: left; }
.loop-band.band-split .wrap > h2 { grid-row: 2 / span 20; margin: 0; }
.loop-band.band-split .wrap > :not(.kicker):not(h2) { grid-column: 2; margin-left: 0; margin-right: 0; text-align: left; }
}
.loop-hero ~ .home-section .founding-note { background: none; border: 0; padding: 0; color: var(--muted); max-width: 62ch; }
.loop-band.band-split .wrap > .kicker { margin-left: 0; margin-right: 0; max-width: none; justify-self: start; }
@media (min-width: 901px) {
.loop-hero ~ .home-section .month-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}
.what-you-see--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.svc-hero-card.glass {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid var(--svc-card, var(--svc-lit));
box-shadow: 0 30px 60px -36px var(--svc-card, var(--svc-lit));
}
.pt-grid.lead-dark > :first-child { background: var(--ink); color: var(--on-dark); }
.pt-grid.lead-dark > :first-child:hover { background: var(--ink); }
.pt-grid.lead-dark > :first-child h3 { color: var(--on-dark); }
.pt-grid.lead-dark > :first-child p { color: var(--on-dark-soft); }
.pt-grid.lead-dark > :first-child .num { color: var(--svc-card, var(--pink)); }
.pt-callout { background: none; border: 0; border-left: 0; padding: var(--space-4) 0 0; position: relative; max-width: 46rem; margin-top: var(--space-5); }
.pt-callout::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px; background: var(--pink); }
.pt-callout, .pt-callout p { font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
:not(.band):not(.svc-band):not(.svc-dark) > .wrap > .pt-callout { background: none; border-left: 0; padding: var(--space-4) 0 0; margin: var(--space-5) 0 0; }
:not(.band):not(.svc-band):not(.svc-dark) > .wrap > .pt-callout p { color: var(--ink); }
.pt-callout p { margin: 0; max-width: none; }
.bp-hero-card.glass { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--blueprint-azure, #12B4EC); box-shadow: 0 30px 60px -36px rgba(18, 180, 236, 0.7); }
@media (min-width: 901px) {
.wrap.split-flat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: start; grid-auto-flow: dense; }
.wrap.split-flat > .kicker, .wrap.split-flat > h2 { grid-column: 1; }
.wrap.split-flat > h2 { margin-top: 0; }
.wrap.split-flat > :not(.kicker):not(h2) { grid-column: 2; margin-top: 0; }
.wrap.split-flat > h2 + * { grid-row: 1 / span 2; }
}
@media (min-width: 901px) {
body.process #the-steps .rung { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2rem, 4vw, 4rem); grid-auto-flow: dense; align-items: start; }
body.process #the-steps .rung > .rung-gate, body.process #the-steps .rung > .rung-head { grid-column: 1; }
body.process #the-steps .rung > :not(.rung-gate):not(.rung-head) { grid-column: 2; margin-top: 0; max-width: none; }
}
:not(.band):not(.svc-band):not(.svc-dark) > .wrap > .pt-callout { margin-bottom: var(--space-5); }
@media (min-width: 901px) {
body.process #the-steps .rung > .rung-gate { justify-self: start; width: auto; }
body.process #the-steps .rung > .rung-head + * { grid-row: 1 / span 2; }
}
@media (min-width: 901px) {
body.process #the-steps .rung { grid-template-rows: auto 1fr; }
body.process #the-steps .rung > .rung-head { align-self: start; }
}
.blueprint-band.bb-sheet {
text-align: left;
padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(2.5rem, 5vw, 3.75rem);
background-color: #12B4EC;
background-image:
radial-gradient(120% 90% at 30% 35%, rgba(18,180,236,0) 45%, rgba(6,80,125,.42) 100%),
linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.bb-sheet .bb-tag {
display: flex; justify-content: space-between; gap: 1rem;
font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; 
color: #0b0b0b; border-bottom: 1.5px solid #0b0b0b; 
padding-bottom: 0.65rem; margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.bb-sheet h2 {
font-size: clamp(3.4rem, 11vw, 10rem);
letter-spacing: -0.07em; line-height: 0.88;
max-width: none; margin: 0 0 1.6rem;
}
.bb-sheet .bb-lede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3.5rem; align-items: start; }
.bb-sheet .bb-lede p { margin: 0; max-width: 54ch; }
.bb-sheet .blueprint-sub { max-width: 32ch; }
.bb-sheet .bb-stats {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
margin-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid #0b0b0b;
}
.bb-sheet .bb-stat { padding: 1.1rem 1.25rem 0 0; margin-right: 1.25rem; border-right: 1px solid rgba(11,11,11,.25); }
.bb-sheet .bb-stat b { display: block; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.bb-sheet .bb-stat span {
display: block; margin-top: 0.4rem;
font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace);
font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; 
}
.bb-sheet .bb-go { padding-top: 1.1rem; display: grid; gap: 0.6rem; justify-items: start; align-self: end; }
.bb-sheet .bb-go .blueprint-credit { margin: 0; max-width: none; }
@media (max-width: 760px) {
.bb-sheet .bb-lede { grid-template-columns: 1fr; }
.bb-sheet .bb-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-sheet .bb-stat:nth-child(3) { border-right: 0; margin-right: 0; }
.bb-sheet .bb-go { grid-column: 1 / -1; padding-top: 1.5rem; }
}
body.blueprint .bp-sheet-dark {
background-color: var(--ink);
background-image:
radial-gradient(110% 90% at 25% 30%, rgba(10,10,11,0) 40%, rgba(10,10,11,.85) 100%),
linear-gradient(rgba(18,180,236,.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(18,180,236,.16) 1px, transparent 1px),
linear-gradient(rgba(18,180,236,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(18,180,236,.06) 1px, transparent 1px);
background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
padding-top: clamp(2rem, 4vw, 3rem);
}
.bp-sheet-dark .bb-tag {
display: flex; justify-content: space-between; gap: 1rem;
font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
color: #9fdcf3; border-bottom: 1.5px solid rgba(18,180,236,.55);
padding-bottom: 0.65rem; margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
body.blueprint .bp-sheet-dark .bp-hero-card.glass {
background: linear-gradient(180deg, rgba(10,10,11,.8), rgba(10,10,11,.66)); 
border: 1.5px solid rgba(18,180,236,.6);
border-top: 1.5px solid rgba(18,180,236,.6);
box-shadow: 0 30px 60px -36px rgba(18,180,236,.7);
}
.bp-sheet-dark .bp-hero-facts { border-top: 0; margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); }
.bp-sheet-dark .bp-hero-facts li {
font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.45;
border-top: 1px solid rgba(18,180,236,.4); border-bottom: 0;
padding: 0.85rem var(--space-4);
}
.blueprint-band.bb-sheet--split h2 {
font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.045em; line-height: 1.02; margin: 0;
}
.bb-sheet--split .bb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.bb-sheet--split .bb-split-body p { margin: 0 0 1rem; max-width: 54ch; }
.bb-sheet--split .bb-split-body p:last-child { margin-bottom: 0; }
.blueprint-band.bb-sheet > .wrap > p { margin: 0; max-width: 54ch; }
.bb-sheet .bb-go .btn + .btn { margin-top: 0.1rem; }
@media (max-width: 760px) {
.bb-sheet--split .bb-split { grid-template-columns: 1fr; }
}
.bp-sheet-dark .bb-tag-wrap { position: relative; z-index: 1; } 
.closing-blue,
.ribbon,
.blueprint-band:not(.bb-sheet) {
background-color: #12B4EC;
background-image:
radial-gradient(120% 90% at 30% 35%, rgba(18,180,236,0) 45%, rgba(6,80,125,.42) 100%),
linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.closing-blue,
.blueprint-band:not(.bb-sheet) { text-align: left; }
.closing-blue > .wrap,
.blueprint-band:not(.bb-sheet) > .wrap {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-auto-flow: row dense;
column-gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.closing-blue > .wrap::before,
.blueprint-band:not(.bb-sheet) > .wrap::before {
content: "Wreckedify";
grid-column: 1 / -1;
font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
color: #0b0b0b; border-bottom: 1.5px solid #0b0b0b;
padding-bottom: 0.65rem; margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.closing-blue > .wrap::after,
.blueprint-band:not(.bb-sheet) > .wrap::after {
content: "The Blueprint";
position: absolute; top: 0; right: var(--gutter);
font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
color: #0b0b0b;
}
.closing-blue > .wrap > *,
.blueprint-band:not(.bb-sheet) > .wrap > * { grid-column: 2; margin-left: 0; margin-right: 0; max-width: 54ch; }
.closing-blue > .wrap > .kicker,
.blueprint-band:not(.bb-sheet) > .wrap > .kicker { grid-column: 1; }
.closing-blue > .wrap > h2,
.blueprint-band:not(.bb-sheet) > .wrap > h2 {
grid-column: 1; grid-row: span 8;
font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.045em; line-height: 1.02;
max-width: 18ch; margin: 0;
}
.closing-blue > .wrap > p,
.blueprint-band:not(.bb-sheet) > .wrap > p { margin-top: 0; margin-bottom: 1rem; }
.blueprint-band:not(.bb-sheet) .blueprint-band-cta { justify-content: flex-start; }
@media (max-width: 760px) {
.closing-blue > .wrap,
.blueprint-band:not(.bb-sheet) > .wrap { grid-template-columns: 1fr; }
.closing-blue > .wrap > *,
.blueprint-band:not(.bb-sheet) > .wrap > * { grid-column: 1; }
.closing-blue > .wrap > h2,
.blueprint-band:not(.bb-sheet) > .wrap > h2 { grid-row: auto; margin-bottom: 1.25rem; }
}
.closing-blue > .wrap > .kicker { grid-row: 1; align-self: start; margin: 0; }
.closing-blue > .wrap:has(> .kicker) > h2 { grid-row: 1 / span 8; padding-top: 2.4rem; }
@media (max-width: 760px) {
.closing-blue > .wrap > .kicker { grid-row: auto; margin-bottom: 0.75rem; }
.closing-blue > .wrap:has(> .kicker) > h2 { grid-row: auto; padding-top: 0; }
}
.closing-blue > .wrap::before,
.blueprint-band:not(.bb-sheet) > .wrap::before { grid-row: 1; }
.closing-blue > .wrap > .kicker { grid-row: 2; }
.closing-blue > .wrap:has(> .kicker) > h2 { grid-row: 2 / span 8; }
.board .chip-card .chip-row:hover { box-shadow: none; }
.board .chip-card.is-card-link:hover .chip-head h3 a { text-decoration: underline; text-underline-offset: 0.2em; }
body.pricing .board #blueprint-band.bb-sheet-card {
color: #0b0b0b;
border: 0;
background-color: #12B4EC;
background-image:
radial-gradient(120% 90% at 30% 35%, rgba(18,180,236,0) 45%, rgba(6,80,125,.42) 100%),
linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
body.pricing .board #blueprint-band.bb-sheet-card .kicker,
body.pricing .board #blueprint-band.bb-sheet-card .band-title,
body.pricing .board #blueprint-band.bb-sheet-card .band-price,
body.pricing .board #blueprint-band.bb-sheet-card .bb-facts li,
body.pricing .board #blueprint-band.bb-sheet-card .bb-credit { color: #0b0b0b; text-shadow: none; }
body.pricing .board #blueprint-band.bb-sheet-card .bb-facts li { border-bottom-color: rgba(11, 11, 11, 0.22); }
body.pricing .board #posttrace-band.pt-screen {
position: relative;
background-color: #0b0b0e;
background-image:
radial-gradient(60% 120% at 100% 0%, rgba(255, 46, 154, 0.20), transparent 62%),
radial-gradient(45% 90% at 0% 100%, rgba(255, 46, 154, 0.08), transparent 60%),
linear-gradient(rgba(255, 46, 154, 0.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 46, 154, 0.11) 1px, transparent 1px),
linear-gradient(rgba(255, 46, 154, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 46, 154, 0.045) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
border: 1px solid rgba(255, 46, 154, 0.8);
box-shadow: 0 0 22px rgba(255, 46, 154, 0.35), 0 0 60px -10px rgba(255, 46, 154, 0.25),
inset 0 0 48px rgba(255, 46, 154, 0.07);
}
body.pricing .board #posttrace-band.pt-screen:hover {
box-shadow: 0 0 28px rgba(255, 46, 154, 0.45), 0 26px 60px -20px rgba(255, 46, 154, 0.35),
inset 0 0 48px rgba(255, 46, 154, 0.09);
}
.pt-screen .ptr-rail { position: relative; }
.pt-screen-mark {
display: block;
width: 96px; height: auto;
margin: 0 0 var(--space-2) auto;
}
@media (max-width: 900px) { .pt-screen-mark { display: none; } }