/* ============================================================
TextGopher marketing site - one stylesheet, mobile-first.
Brand: warm earth. Terracotta clay, cream paper, deep brown ink.
No frameworks, no external assets; system font stack.
============================================================ */
:root {
/* palette */
--clay: #b3591e;
--clay-dark: #964a15;
--clay-deep: #7c3c10;
--clay-tint: #f3e0d1;
--cream: #f7f4ef;
--paper: #fffdf9;
--sand: #efe8dc;
--ink: #2b2620;
--ink-soft: #6b6257;
--line: #e4dccd;
--fur: #8a6844;
--fur-light: #dcc7a8;
--moss: #567a46;
/* type + rhythm */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 2px 6px rgba(43, 38, 32, 0.05), 0 14px 34px rgba(43, 38, 32, 0.08);
--shadow-lift: 0 4px 10px rgba(43, 38, 32, 0.07), 0 24px 54px rgba(43, 38, 32, 0.13);
--wrap: 72rem;
--wrap-narrow: 46rem;
}
/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--clay-dark); }
a:hover { color: var(--clay); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap-narrow { max-width: var(--wrap-narrow); }
/* ---------- type ---------- */
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 1rem; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.5rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
.eyebrow {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--clay);
margin: 0 0 0.75rem;
}
/* ---------- buttons ---------- */
.btn {
display: inline-block;
font: inherit;
font-weight: 700;
text-decoration: none;
text-align: center;
border: 2px solid transparent;
border-radius: 999px;
padding: 0.7rem 1.5rem;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease,
border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--clay); color: #fff; box-shadow: 0 3px 10px rgba(179, 89, 30, 0.32); }
.btn-primary:hover { background: var(--clay-dark); color: #fff; }
.btn-outline { border-color: var(--clay); color: var(--clay-dark); background: transparent; }
.btn-outline:hover { background: var(--clay-tint); color: var(--clay-deep); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { color: var(--clay-dark); }
.btn-cream { background: var(--cream); color: var(--clay-deep); }
.btn-cream:hover { background: #fff; color: var(--clay-deep); }
.btn-lg { padding: 0.9rem 2rem; font-size: 1.1rem; }
.btn-sm { padding: 0.45rem 1.1rem; font-size: 0.9375rem; }
.btn-block { display: block; width: 100%; }
/* ---------- cross-promo ribbon (link to the real-estate site) ---------- */
.crosspromo {
background: var(--clay-tint);
color: var(--clay-deep);
font-size: 0.92rem;
text-align: center;
padding: 0.5rem 1rem;
}
.crosspromo a { color: var(--clay-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.crosspromo a:hover { color: var(--clay); }
/* ---------- nav ---------- */
.site-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(247, 244, 239, 0.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
display: flex;
align-items: center;
gap: 0.5rem 1.25rem;
min-height: 4.25rem;
flex-wrap: wrap;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.wordmark {
display: flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
color: var(--ink);
flex-shrink: 0;
}
.wordmark-mascot { width: 2.2rem; flex: none; }
.wordmark-mascot svg { width: 100%; height: auto; }
.wordmark-text { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark-text em { font-style: normal; color: var(--clay); }
.wordmark-tm {
font-size: 0.5em;
font-weight: 600;
vertical-align: super;
line-height: 0;
margin-left: 0.08em;
}
.nav-links { display: none; gap: 1.75rem; margin-left: auto; }
.nav-links a {
text-decoration: none;
color: var(--ink-soft);
font-weight: 600;
font-size: 0.9875rem;
}
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 0.85rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.nav-login {
text-decoration: none;
color: var(--ink-soft);
font-weight: 600;
font-size: 0.9375rem;
white-space: nowrap;
display: inline;
}
.nav-login:hover { color: var(--ink); }
.nav-actions .btn { white-space: nowrap; }
@media (max-width: 30rem) {
.wordmark-text { font-size: 1.05rem; }
.wordmark-mascot { width: 1.85rem; }
.nav-actions { gap: 0.6rem; }
}
@media (min-width: 48rem) {
.nav-links { display: flex; }
.nav-actions { margin-left: 0; }
}
/* ---------- sections ---------- */
main section { padding: 4.5rem 0; }
@media (min-width: 48rem) { main section { padding: 6.5rem 0; } }
section > .wrap > h2 { max-width: 38rem; }
/* anchor offset under sticky nav — every id the nav or footer links to, or the
section lands under the sticky header. #tracking and #industries are linked
from the footer and header on every marketing page. */
#how, #pricing, #faq, #demo, #plans, #control, #revenue,
#tracking, #industries { scroll-margin-top: 5.5rem; }
/* ---------- hero ---------- */
.hero { padding-top: 3.5rem; }
.hero-inner {
display: grid;
gap: 3.5rem;
align-items: center;
}
.hero-copy .hero-sub {
font-size: 1.2rem;
color: var(--ink-soft);
max-width: 34rem;
margin-bottom: 1.75rem;
}
.hero-sub strong { color: var(--clay-deep); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.hero-fineprint { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-soft); }
@media (min-width: 56rem) {
.hero { padding-top: 4.5rem; }
.hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; }
}
/* the phone demo */
.hero-demo {
position: relative;
max-width: 24rem;
margin: 0 auto;
padding-top: 4.3rem; /* room for the mascot peeking over the top */
padding-bottom: 3.2rem; /* room for the lead card overlapping the bottom */
}
.hero-mascot {
position: absolute;
top: 0;
left: 9%;
width: 7rem;
transform: rotate(-8deg);
z-index: 0;
}
.phone {
position: relative;
z-index: 1;
background: var(--ink);
border-radius: 2.6rem;
padding: 0.55rem;
box-shadow: var(--shadow-lift);
}
.phone-notch {
position: absolute;
top: 0.55rem;
left: 50%;
transform: translateX(-50%);
width: 38%;
height: 1.4rem;
background: var(--ink);
border-radius: 0 0 1rem 1rem;
z-index: 2;
}
.phone-header {
background: #fff;
border-radius: 2.1rem 2.1rem 0 0;
padding: 1.9rem 1rem 0.7rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
border-bottom: 1px solid #efe9df;
}
.phone-avatar {
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: var(--clay);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
display: grid;
place-items: center;
}
.phone-contact { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.phone-thread {
background: #fff;
border-radius: 0 0 2.1rem 2.1rem;
padding: 1rem 0.85rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.sms {
margin: 0;
max-width: 82%;
padding: 0.55rem 0.8rem;
border-radius: 1.15rem;
font-size: 0.8125rem;
line-height: 1.45;
}
.sms.in {
align-self: flex-start;
background: var(--sand);
color: var(--ink);
border-bottom-left-radius: 0.35rem;
}
.sms.out {
align-self: flex-end;
background: var(--clay);
color: #fff;
border-bottom-right-radius: 0.35rem;
}
/* Staggered arrival of the conversation: the no-JS fallback. With JS the
thread types itself out (see marketing.js), so the stagger only applies
when the html element never received the .js class. */
@media (prefers-reduced-motion: no-preference) {
html:not(.js) .hero .phone-thread .sms {
opacity: 0;
transform: translateY(8px);
animation: sms-in 0.45s ease forwards;
}
html:not(.js) .hero .phone-thread .sms:nth-child(1) { animation-delay: 0.25s; }
html:not(.js) .hero .phone-thread .sms:nth-child(2) { animation-delay: 0.85s; }
html:not(.js) .hero .phone-thread .sms:nth-child(3) { animation-delay: 1.45s; }
html:not(.js) .hero .phone-thread .sms:nth-child(4) { animation-delay: 2.05s; }
html:not(.js) .hero .phone-thread .sms:nth-child(5) { animation-delay: 2.65s; }
html:not(.js) .hero .phone-thread .sms:nth-child(6) { animation-delay: 3.25s; }
html:not(.js) .hero .phone-thread .sms:nth-child(7) { animation-delay: 3.85s; }
html:not(.js) .lead-card { opacity: 0; animation: sms-in 0.5s ease 4.5s forwards; }
}
@keyframes sms-in {
to { opacity: 1; transform: translateY(0); }
}
/* the contractor's side: lead alert card */
.lead-card {
position: relative;
z-index: 2;
margin: -2.1rem 0 0 auto;
width: min(16.5rem, 88%);
background: var(--paper);
border: 1px solid var(--line);
border-left: 4px solid var(--clay);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lift);
padding: 0.8rem 1rem;
}
.lead-card p { margin: 0; }
.lead-card-title {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.3rem;
}
.lead-tag {
background: var(--clay);
color: #fff;
font-size: 0.66rem;
padding: 0.12rem 0.5rem;
border-radius: 999px;
letter-spacing: 0.08em;
}
.lead-card-line { font-size: 0.9rem; font-weight: 600; }
.lead-card-meta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.25rem; }
@media (min-width: 56rem) {
.lead-card { margin-right: -2.5rem; }
}
/* ---------- problem stats ---------- */
.problem { background: var(--paper); border-block: 1px solid var(--line); }
.stat-grid {
display: grid;
gap: 1.25rem;
margin-top: 2.5rem;
}
.stat-card {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.75rem 1.5rem 1.5rem;
}
.stat-figure {
font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--clay);
line-height: 1;
margin: 0 0 0.6rem;
font-variant-numeric: tabular-nums;
}
.stat-text { margin: 0; color: var(--ink-soft); }
@media (min-width: 48rem) {
.stat-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
/* ---------- how it works ---------- */
.steps {
list-style: none;
margin: 3rem 0 0;
padding: 0;
display: grid;
gap: 2.5rem;
counter-reset: step;
}
.step { position: relative; padding-left: 4.25rem; }
.step-num {
position: absolute;
left: 0;
top: 0;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--clay);
color: #fff;
font-weight: 800;
font-size: 1.2rem;
display: grid;
place-items: center;
box-shadow: 0 3px 10px rgba(179, 89, 30, 0.3);
}
.step h3 { margin-bottom: 0.4rem; }
.step p { margin: 0; color: var(--ink-soft); max-width: 30rem; }
/* The gopher tunnel: a dashed line connecting the steps. Drawn with a
repeating gradient so the dashes can crawl along the tunnel; the crawl
only runs when motion is welcome. */
.step:not(:last-child)::before {
content: "";
position: absolute;
left: 1.4375rem;
top: 3.4rem;
bottom: -2.3rem;
width: 3px;
background-image: repeating-linear-gradient(
180deg, var(--fur-light) 0 0.5rem, transparent 0.5rem 1rem);
}
@media (min-width: 56rem) {
.steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.step { padding-left: 0; padding-top: 4.25rem; }
.step:not(:last-child)::before {
left: 3.4rem;
right: -1.6rem;
top: 1.4375rem;
bottom: auto;
width: auto;
height: 3px;
background-image: repeating-linear-gradient(
90deg, var(--fur-light) 0 0.5rem, transparent 0.5rem 1rem);
}
}
/* ---------- pricing ---------- */
.founding-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1rem;
background: var(--ink);
color: var(--cream);
border-radius: var(--radius-sm);
padding: 0.85rem 1.25rem;
margin: 2.25rem 0 2rem;
}
.founding-strip p { margin: 0; font-size: 0.95rem; }
.founding-strip strong { color: #f0b489; }
.founding-badge {
flex: none;
background: var(--clay);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 999px;
}
.promo-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: rgba(255, 255, 255, 0.14);
padding: 0.1rem 0.45rem;
border-radius: 6px;
letter-spacing: 0.06em;
}
.billing-toggle {
display: inline-flex;
background: var(--sand);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.25rem;
margin-bottom: 2rem;
}
.billing-toggle button {
font: inherit;
font-size: 0.9375rem;
font-weight: 700;
color: var(--ink-soft);
background: transparent;
border: 0;
border-radius: 999px;
padding: 0.45rem 1.2rem;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.billing-toggle button[aria-pressed="true"] {
background: var(--paper);
color: var(--ink);
box-shadow: 0 1px 4px rgba(43, 38, 32, 0.14);
}
.toggle-note { font-size: 0.75rem; font-weight: 700; color: var(--moss); margin-left: 0.25rem; }
.plan-grid {
display: grid;
gap: 1.5rem;
align-items: stretch;
}
.plan-card {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2rem 1.75rem 1.75rem;
display: flex;
flex-direction: column;
}
.plan-highlight {
border: 2px solid var(--clay);
box-shadow: var(--shadow-lift);
}
.plan-flag {
position: absolute;
top: -0.85rem;
left: 50%;
transform: translateX(-50%);
background: var(--clay);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3rem 0.9rem;
border-radius: 999px;
white-space: nowrap;
}
.plan-name { margin-bottom: 0.15rem; }
.plan-blurb { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.25rem; }
.plan-price { margin-bottom: 1.25rem; min-height: 4.6rem; }
.price-figure {
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.price-per { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); }
.price-note { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.15rem; }
/* the toggle: server renders both prices; a data attribute picks one */
.plan-grid .price-annual { display: none; }
.plan-grid[data-billing="annual"] .price-annual { display: block; }
.plan-grid[data-billing="annual"] .price-monthly { display: none; }
.plan-features {
list-style: none;
margin: 0 0 1.75rem;
padding: 0;
flex-grow: 1;
}
.plan-features li {
position: relative;
padding: 0.32rem 0 0.32rem 1.7rem;
font-size: 0.9675rem;
}
.plan-features li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0.32rem;
color: var(--moss);
font-weight: 800;
}
.plan-fineprint {
text-align: center;
font-size: 0.8rem;
color: var(--ink-soft);
margin: 0.85rem 0 0;
}
.pricing-more { margin-top: 2.25rem; font-weight: 600; }
@media (min-width: 56rem) {
.plan-grid { grid-template-columns: repeat(3, 1fr); }
.plan-highlight { transform: scale(1.03); }
}
/* ---------- comparison table (pricing page) ---------- */
.page-head { padding-bottom: 3.5rem; }
.page-head .page-sub { font-size: 1.15rem; color: var(--ink-soft); max-width: 42rem; margin-bottom: 0.5rem; }
.page-head h1 { max-width: 46rem; }
.compare { background: var(--paper); border-block: 1px solid var(--line); }
.table-scroll { overflow-x: auto; margin-top: 2rem; -webkit-overflow-scrolling: touch; }
.compare-table {
width: 100%;
min-width: 40rem;
border-collapse: collapse;
font-size: 0.95rem;
}
.compare-table th, .compare-table td {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.compare-table thead th {
font-size: 1.05rem;
letter-spacing: -0.01em;
border-bottom: 2px solid var(--ink);
}
.compare-table tbody th[scope="row"] { font-weight: 600; color: var(--ink-soft); width: 34%; }
.compare-table td { font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-table .col-highlight { background: var(--clay-tint); }
.th-flag {
display: inline-block;
background: var(--clay);
color: #fff;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 0.18rem 0.55rem;
border-radius: 999px;
vertical-align: middle;
margin-left: 0.35rem;
}
.row-note { font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); }
.check { color: var(--moss); font-weight: 800; font-size: 1.05rem; }
.dash { color: var(--line); }
/* ---------- FAQ accordion ---------- */
.faq-list { margin-top: 2rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q { margin: 0; font-size: inherit; }
.faq-q button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
font: inherit;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.01em;
text-align: left;
color: var(--ink);
background: transparent;
border: 0;
padding: 1.15rem 0.25rem;
cursor: pointer;
}
.faq-q button:hover { color: var(--clay-dark); }
.faq-chevron {
flex: none;
width: 0.65rem;
height: 0.65rem;
border-right: 2.5px solid var(--clay);
border-bottom: 2.5px solid var(--clay);
transform: rotate(45deg);
transition: transform 0.25s ease;
margin-right: 0.25rem;
}
.faq-item.open .faq-chevron { transform: rotate(225deg); }
.faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
margin: 0;
padding: 0 2.5rem 1.25rem 0.25rem;
color: var(--ink-soft);
}
/* ---------- final CTA ---------- */
.cta-final {
background: var(--clay);
background: linear-gradient(160deg, var(--clay) 0%, var(--clay-deep) 100%);
color: var(--cream);
}
.cta-final-inner { text-align: center; }
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(247, 244, 239, 0.85); font-size: 1.15rem; margin-bottom: 1.75rem; }
.cta-mascot { width: 5.5rem; margin: 0 auto 1.25rem; }
/* the hat blends into the terracotta band - swap it to cream there */
.cta-mascot .hat { fill: var(--cream); }
.cta-mascot .hat-brim { fill: #e2d5bd; }
/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding: 3.5rem 0 2rem; }
.footer-inner {
display: grid;
gap: 2.25rem;
padding-bottom: 2.5rem;
}
.footer-brand .wordmark-text { color: var(--cream); }
.footer-brand p { color: rgba(247, 244, 239, 0.6); margin: 0.5rem 0 0; font-size: 0.95rem; }
.footer-col h4 {
margin: 0 0 0.75rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(247, 244, 239, 0.5);
}
.footer-col a {
display: block;
color: rgba(247, 244, 239, 0.85);
text-decoration: none;
padding: 0.22rem 0;
font-size: 0.95rem;
}
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-legal {
border-top: 1px solid rgba(247, 244, 239, 0.15);
padding-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2rem;
justify-content: space-between;
}
.footer-legal p { margin: 0; font-size: 0.82rem; color: rgba(247, 244, 239, 0.5); }
@media (min-width: 48rem) {
.footer-inner { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
}
/* ---------- legal pages ---------- */
.legal { padding: 4rem 0 5.5rem; }
.legal h1 { margin-bottom: 0.35rem; }
.legal-date { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; }
.legal p, .legal li { color: #474037; }
.legal ul { padding-left: 1.35rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.6rem; }
/* ============================================================
Enhancements: self-typing threads, reveals, live demo tabs,
testimonials + marquee, and the signup page. Same brand, same
tokens; every animation collapses under prefers-reduced-motion.
============================================================ */
/* ---------- self-typing SMS threads ---------- */
.sms.typing {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 1.9rem;
padding: 0.55rem 0.85rem;
}
.typing-dot {
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: var(--ink-soft);
}
.sms.out .typing-dot { background: rgba(255, 255, 255, 0.85); }
@media (prefers-reduced-motion: no-preference) {
.typing-dot { animation: typing-bounce 1s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes typing-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
.js .phone-thread .sms { transition: opacity 0.3s ease, transform 0.3s ease; }
.js .sms-enter { opacity: 0; transform: translateY(8px); }
.js .lead-card { transition: opacity 0.5s ease, transform 0.5s ease; }
.js .lead-card.is-waiting { opacity: 0; transform: translateY(8px); }
}
.thread-controls { margin: 0.9rem 0 0; text-align: center; }
.hero-demo .thread-controls { margin-top: 0.75rem; }
.thread-replay {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font: inherit;
font-size: 0.85rem;
font-weight: 700;
color: var(--ink-soft);
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.35rem 0.95rem;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.thread-replay:hover { color: var(--clay-dark); border-color: var(--clay); }
/* ---------- scroll reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
.js .reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.js .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .reveal:nth-child(4) { transition-delay: 0.24s; }
.js .reveal.revealed { opacity: 1; transform: translateY(0); }
}
/* ---------- live demo ---------- */
.demo { background: var(--paper); border-block: 1px solid var(--line); }
.section-sub { color: var(--ink-soft); font-size: 1.05rem; max-width: 40rem; margin: 0 0 1.5rem; }
.demo-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.75rem 0 2rem; }
.demo-tabs button {
font: inherit;
font-size: 0.9375rem;
font-weight: 700;
color: var(--ink-soft);
background: var(--cream);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.5rem 1.25rem;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.demo-tabs button:hover { color: var(--clay-dark); border-color: var(--clay); }
.demo-tabs button[aria-selected="true"] {
background: var(--clay);
border-color: var(--clay);
color: #fff;
box-shadow: 0 3px 10px rgba(179, 89, 30, 0.3);
}
.demo-stage { display: flex; flex-direction: column; align-items: center; }
.demo-thread {
height: 24rem;
overflow-y: auto;
overscroll-behavior: contain;
}
/* ---------- testimonials + trade marquee ---------- */
.quote-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.quote-card {
margin: 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.75rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
}
/* placeholder cards stay visually honest until real quotes land */
.quote-card[data-placeholder] { border-style: dashed; box-shadow: none; background: transparent; }
.quote-card blockquote {
margin: 0 0 1.25rem;
color: var(--ink-soft);
font-size: 0.975rem;
flex-grow: 1;
}
.quote-card blockquote::before {
content: "\201C";
display: block;
font-size: 2.6rem;
line-height: 1;
color: var(--clay-tint);
font-weight: 800;
margin-bottom: 0.25rem;
}
.quote-card figcaption strong { display: block; }
.quote-card figcaption span { color: var(--ink-soft); font-size: 0.85rem; }
@media (min-width: 48rem) {
.quote-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.trade-marquee {
position: relative;
overflow: hidden;
margin-top: 3.25rem;
border-block: 1px solid var(--line);
padding: 0.9rem 0;
}
.marquee-track { display: flex; width: max-content; }
.marquee-run {
flex: none;
white-space: nowrap;
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 0.02em;
color: var(--ink-soft);
}
.marquee-run i { font-style: normal; color: var(--clay); padding: 0 0.7rem; }
@media (prefers-reduced-motion: no-preference) {
.js .marquee-track { animation: marquee-scroll 30s linear infinite; }
}
.trade-marquee.paused .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.marquee-toggle {
position: absolute;
top: 50%;
right: 0.35rem;
transform: translateY(-50%);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
color: var(--ink-soft);
background: var(--cream);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.25rem 0.75rem;
cursor: pointer;
}
.marquee-toggle:hover { color: var(--clay-dark); border-color: var(--clay); }
/* ---------- founding strip link ---------- */
.founding-link {
margin-left: auto;
color: #f0b489;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
white-space: nowrap;
}
.founding-link:hover { color: #fff; text-decoration: underline; }
/* ---------- signup ---------- */
.signup-grid { display: grid; gap: 2rem; margin-top: 2.5rem; align-items: start; }
@media (min-width: 56rem) {
.signup-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem; }
}
.signup-card, .summary-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2rem 1.75rem;
}
.summary-card { padding: 1.75rem 1.5rem; }
.signup-heading { font-size: 1.05rem; margin: 0 0 1rem; }
.signup-card .signup-heading:not(:first-child) { margin-top: 2rem; }
.signup-card .billing-toggle { margin-bottom: 1rem; }
.plan-picker { display: grid; gap: 0.6rem; }
.plan-option {
display: flex;
align-items: center;
gap: 0.8rem;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.8rem 1rem;
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.plan-option:hover { border-color: var(--clay); }
.plan-option.selected, .plan-option:has(input:checked) {
border-color: var(--clay);
box-shadow: 0 0 0 1px var(--clay);
background: #fff;
}
.plan-option input { accent-color: var(--clay); flex: none; width: 1.05rem; height: 1.05rem; }
.plan-option-body { flex: 1; min-width: 0; }
.plan-option-name { display: block; font-weight: 700; }
.plan-option-meta { display: block; color: var(--ink-soft); font-size: 0.85rem; }
.plan-option-price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-picker .price-annual { display: none; }
.plan-picker[data-billing="annual"] .price-annual { display: inline; }
.plan-picker[data-billing="annual"] .price-monthly { display: none; }
.summary-card .price-annual { display: none; }
.summary-card[data-billing="annual"] .price-annual { display: block; }
.summary-card[data-billing="annual"] .price-monthly { display: none; }
.summary-plan-name { font-weight: 800; font-size: 1.15rem; margin: 0 0 0.35rem; }
.summary-price { margin-bottom: 1rem; }
.summary-price .price-figure { font-size: 2.2rem; }
.summary-card .plan-features { margin-bottom: 0; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.35rem; }
.field-optional { font-weight: 500; color: var(--ink-soft); font-size: 0.8rem; }
.field input, .field select {
width: 100%;
font: inherit;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.65rem 0.8rem;
}
.field select { appearance: auto; }
.field input:focus-visible, .field select:focus-visible {
outline: 3px solid rgba(179, 89, 30, 0.4);
outline-offset: 0;
border-color: var(--clay);
}
.field-hint { font-size: 0.8rem; color: var(--ink-soft); margin: 0.35rem 0 0; }
.field-error { font-size: 0.85rem; font-weight: 600; color: #a13022; margin: 0.35rem 0 0; }
.field.invalid input, .field.invalid select { border-color: #a13022; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 32rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-alert {
background: #f7e5df;
border: 1px solid #dfb3a4;
color: #7c2d1d;
border-radius: var(--radius-sm);
padding: 0.8rem 1rem;
font-size: 0.95rem;
margin: 0 0 1.25rem;
}
.signup-card .btn[disabled] { opacity: 0.65; cursor: default; }
.signup-summary .founding-strip { margin: 1.25rem 0 0; }
.signup-trust { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.signup-trust li {
position: relative;
padding: 0.3rem 0 0.3rem 1.7rem;
font-size: 0.9rem;
color: var(--ink-soft);
}
.signup-trust li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0.3rem;
color: var(--moss);
font-weight: 800;
}
/* ============================================================
v2 copy restructure: pain, opportunity summary, distinction,
control cards, custom plan card, founding promo badge, and the
plain-language pricing facts. Same palette, type, and card
language as v1; no existing component styles changed.
============================================================ */
/* ---------- pain (replaces the stat grid) ---------- */
.pain-copy { max-width: 38rem; margin-top: 1.75rem; }
.pain-copy p { color: var(--ink-soft); font-size: 1.1rem; margin: 0 0 1rem; }
.pain-question {
font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--clay);
margin: 1.75rem 0 0;
}
/* ---------- demo: opportunity summary card ---------- */
.demo-stage { gap: 2rem; }
.demo-phone-col { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 24rem; }
.opportunity-card {
width: min(24rem, 100%);
background: var(--paper);
border: 1px solid var(--line);
border-left: 4px solid var(--clay);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lift);
padding: 1.25rem 1.4rem;
}
.opportunity-title {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
}
.opportunity-fields { margin: 0; }
.opportunity-fields > div {
display: grid;
grid-template-columns: 7.5rem 1fr;
gap: 0.75rem;
padding: 0.45rem 0;
border-bottom: 1px solid var(--line);
}
.opportunity-fields dt { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.opportunity-fields dd { margin: 0; font-size: 0.9rem; font-weight: 600; }
.opportunity-action {
margin: 0.9rem 0 0;
font-weight: 800;
color: var(--clay-deep);
}
.opportunity-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
@media (min-width: 56rem) {
.demo-stage { flex-direction: row; justify-content: center; align-items: flex-start; gap: 3rem; }
.opportunity-card { margin-top: 2.5rem; }
}
/* ---------- competitive distinction ---------- */
.distinct-copy { max-width: 38rem; margin-top: 1.75rem; }
.distinct-copy p { color: var(--ink-soft); font-size: 1.1rem; margin: 0 0 1rem; }
.distinct-copy p:last-child { margin-bottom: 0; }
/* ---------- control and safety ---------- */
.control { background: var(--paper); border-block: 1px solid var(--line); }
.control-grid {
display: grid;
gap: 1.25rem;
margin-top: 2.5rem;
}
.control-card {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.75rem 1.5rem 1.5rem;
}
.control-card h3 { margin-bottom: 0.5rem; }
.control-card p { margin: 0; color: var(--ink-soft); }
@media (min-width: 48rem) {
.control-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
/* ---------- founding promo badge on the Solo card ---------- */
.plan-promo {
display: block;
background: var(--ink);
color: var(--cream);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
margin: 0 0 1.25rem;
font-size: 0.85rem;
line-height: 1.55;
}
.plan-promo .founding-badge { display: inline-block; margin: 0 0.35rem 0.3rem 0; }
.plan-promo strong { color: #f0b489; }
/* ---------- custom plan card (no public price) ---------- */
.price-figure-custom {
display: block;
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ink-soft);
}
/* ---------- plain-language pricing facts ---------- */
.pricing-facts { margin-top: 2.5rem; }
.pricing-facts-title { font-size: 1.15rem; margin: 0 0 1.25rem; }
.facts-grid {
display: grid;
gap: 1rem;
margin: 0;
}
.fact {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 1rem 1.15rem;
}
.fact dt { font-weight: 800; font-size: 0.9375rem; margin-bottom: 0.3rem; }
.fact dd { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
@media (min-width: 40rem) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .facts-grid { grid-template-columns: repeat(3, 1fr); } }
/* ---------- test-before-trust: /demo live page + homepage promo ---------- */
.live-steps {
list-style: none;
margin: 2.5rem 0 0;
padding: 0;
display: grid;
gap: 1.5rem;
}
.live-step {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.5rem 1.4rem;
}
.live-step[hidden] { display: none; }
.live-step h2 {
font-size: 1.15rem;
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 1.1rem;
}
.live-step-num {
flex: none;
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
background: var(--clay);
color: #fff;
font-weight: 800;
font-size: 1rem;
display: grid;
place-items: center;
box-shadow: 0 3px 10px rgba(179, 89, 30, 0.3);
}
.live-step form { max-width: 26rem; }
/* Honeypot: parked far off-canvas, never display:none (some bots skip
hidden inputs). Humans never see or tab into it. */
.hp-field {
position: absolute;
left: -6000px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
}
.live-number { margin: 0 0 0.75rem; }
.live-number a {
font-size: clamp(1.6rem, 6vw, 2.2rem);
font-weight: 800;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--clay-deep);
}
.live-number a:hover { color: var(--clay); }
.live-instructions { margin: 0 0 0.9rem; color: var(--ink-soft); max-width: 34rem; }
.live-session-meta { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.live-session-meta code {
font-weight: 700;
color: var(--ink);
background: var(--sand);
border-radius: 6px;
padding: 0.1rem 0.4rem;
}
.live-reset {
border: 0;
background: none;
padding: 0;
font: inherit;
font-size: 0.85rem;
color: var(--clay-dark);
text-decoration: underline;
cursor: pointer;
}
.live-reset:hover { color: var(--clay); }
.live-status {
font-weight: 700;
margin: 0 0 1.25rem;
padding-left: 1.3rem;
position: relative;
}
.live-status::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--fur-light);
}
.live-status[data-status="waiting"]::before { background: var(--fur-light); }
.live-status[data-status="engaged"]::before { background: var(--moss); }
.live-status[data-status="finished"]::before { background: var(--moss); }
.live-status[data-status="expired"]::before { background: #a13022; }
@media (prefers-reduced-motion: no-preference) {
.live-status[data-status="waiting"]::before,
.live-status[data-status="engaged"]::before { animation: live-pulse 1.6s ease-in-out infinite; }
}
@keyframes live-pulse { 50% { opacity: 0.35; } }
.live-stage { display: flex; flex-direction: column; align-items: center; }
.live-stage .demo-thread { min-height: 12rem; max-height: 24rem; overflow-y: auto; }
.live-thread-empty {
margin: auto 0;
padding: 1.5rem 0.75rem;
font-size: 0.85rem;
color: var(--ink-soft);
text-align: center;
}
.live-card .live-pending { color: var(--ink-soft); font-weight: 500; font-style: italic; }
.live-cta {
margin-top: 3rem;
text-align: center;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2.5rem 1.5rem;
}
.live-cta[hidden] { display: none; }
.live-cta h2 { margin-bottom: 0.5rem; }
.live-cta p { color: var(--ink-soft); margin: 0 0 1.5rem; }
.live-cta .plan-fineprint { margin: 0 0 1.25rem; }
@media (min-width: 56rem) {
.live-stage { flex-direction: row; justify-content: center; align-items: flex-start; gap: 2.5rem; }
.live-stage .opportunity-card { margin-top: 1.5rem; }
}
/* homepage promo section (renders only when DEMO_ENABLED) */
.try-live { background: var(--paper); border-block: 1px solid var(--line); }
.try-live-inner { text-align: center; }
.try-live-copy {
color: var(--ink-soft);
font-size: 1.1rem;
max-width: 38rem;
margin: 0 auto 1.75rem;
}
/* ============================================================
v3 product proof + capability bands: dashboard-mirroring
mockups (.appshot), the timestamped live-test receipt, the
four-up control/revenue card grids, and the recovery snapshot.
The mockups borrow the dashboard's own palette (dashboard.css)
so the homepage shows what the product actually looks like.
============================================================ */
/* ---------- appshot: a framed product-screen mockup ---------- */
.appshot, .cap-chips {
/* the dashboard palette, scoped to the mockup components */
--tg-sand: #f5efe4;
--tg-paper: #fffcf6;
--tg-line: #e6dcc9;
--tg-bark: #7a6a55;
--tg-clay: #b0622d;
--tg-clay-dark: #8a4a1f;
--tg-clay-soft: #f3e2d2;
--tg-sage: #5f7a52;
--tg-sage-soft: #e4ecdf;
--tg-brick: #b3402e;
--tg-brick-soft: #f6e2de;
}
.appshot {
width: min(26rem, 100%);
background: var(--tg-sand);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
padding: 1.1rem 1.2rem 1.2rem;
}
.appshot-title {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
}
.appshot-tag {
background: var(--tg-paper);
border: 1px solid var(--tg-line);
color: var(--tg-bark);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.appshot-sub { margin: -0.35rem 0 0.85rem; font-size: 0.82rem; color: var(--ink-soft); }
.appshot-note { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--ink-soft); }
@media (min-width: 56rem) {
.demo-stage .appshot { margin-top: 2.5rem; }
}
/* the opportunity card, exactly as the dashboard renders it */
.tg-lead-card {
background: var(--tg-paper);
border: 1px solid var(--tg-line);
border-left: 4px solid var(--tg-clay);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(43, 38, 32, 0.06);
padding: 0.8rem 0.9rem;
}
.tg-lead-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.tg-lead-name { font-weight: 700; font-size: 0.95rem; }
.tg-lead-time { color: var(--tg-bark); font-size: 0.8rem; white-space: nowrap; }
.tg-lead-problem { margin-top: 0.3rem; font-size: 0.92rem; }
.tg-lead-sub { color: var(--tg-bark); font-size: 0.85rem; margin-top: 0.15rem; }
.tg-next-row { margin-top: 0.5rem; }
.tg-next-chip {
display: inline-block;
background: var(--tg-clay-soft);
color: var(--tg-clay-dark);
border-radius: 999px;
padding: 0.22rem 0.7rem;
font-size: 0.82rem;
font-weight: 700;
}
.tg-next-chip.urgent { background: var(--tg-brick); color: #fff; }
.tg-lead-badges { display: flex; gap: 0.35rem; margin-top: 0.55rem; flex-wrap: wrap; }
.tg-badge {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 4px;
padding: 0.15rem 0.45rem;
background: var(--tg-sand);
color: var(--tg-bark);
}
.tg-badge-qualified { background: var(--tg-sage-soft); color: var(--tg-sage); }
.tg-badge-urgent { background: var(--tg-brick-soft); color: var(--tg-brick); }
.tg-badge-dim { background: var(--tg-sand); color: var(--tg-bark); }
.tg-badge-outcome { background: var(--tg-clay-soft); color: var(--tg-clay-dark); }
/* ---------- live product test: the timestamped receipt ---------- */
.receipt {
max-width: 34rem;
margin-top: 2rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.5rem 1.4rem;
display: grid;
gap: 0.85rem;
}
.receipt-row {
display: grid;
grid-template-columns: 4.2rem 1fr;
gap: 0.9rem;
align-items: start;
}
.receipt-time {
font-size: 0.78rem;
font-weight: 800;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
white-space: nowrap;
padding-top: 0.4rem;
}
.receipt-event {
margin: 0;
font-weight: 700;
font-size: 0.95rem;
padding-top: 0.25rem;
}
.receipt-msg {
margin: 0;
width: fit-content;
max-width: 94%;
padding: 0.55rem 0.85rem;
border-radius: 1rem;
font-size: 0.875rem;
line-height: 1.5;
}
.receipt-msg.in { background: var(--sand); border-bottom-left-radius: 0.3rem; }
.receipt-msg.out {
background: var(--clay);
color: #fff;
justify-self: end;
border-bottom-right-radius: 0.3rem;
}
.receipt-caption { margin: 1rem 0 0; font-size: 0.85rem; color: var(--ink-soft); max-width: 34rem; }
/* ---------- four-up capability grids ---------- */
@media (min-width: 48rem) {
.control-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
.control-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.cap-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.cap-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.75rem 1.5rem 1.5rem;
}
.cap-card h3 { margin-bottom: 0.5rem; font-size: 1.15rem; }
.cap-card p { margin: 0; color: var(--ink-soft); font-size: 0.975rem; }
.cap-card .cap-chips { margin-top: 0.75rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
@media (min-width: 48rem) {
.cap-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 64rem) {
.cap-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- revenue band: recovery snapshot + team line ---------- */
.recovery-shot { width: 100%; max-width: 46rem; margin-top: 2rem; }
.tg-stat-grid {
display: grid;
gap: 1rem 1.25rem;
background: var(--tg-paper);
border: 1px solid var(--tg-line);
border-radius: 10px;
padding: 1rem 1.1rem;
}
.tg-stat { display: grid; gap: 0.15rem; align-content: start; }
.tg-stat-label {
color: var(--tg-bark);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tg-stat-value { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tg-stat-sub { color: var(--tg-bark); font-size: 0.78rem; }
@media (min-width: 40rem) {
.tg-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.revenue-team {
margin: 2rem 0 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink-soft);
max-width: 38rem;
}
/* ============================================================
v4 landing refinement - one governed opportunity, shown once.
Three visual layers:
marketing (cream, warm) · product (white panels, crisp
borders, neutral labels) · action (rust: primary buttons,
one next action, urgency, selected + active state only).
No autoplay, no marquee, no decorative loops; every value is
backed by the real product (fields, statuses, provenance).
============================================================ */
:root {
--pp-surface: #ffffff;
--pp-line: #e2d8c6;
--pp-line-strong: #d3c7b1;
--pp-label: #7a6f60;
--radius-lg: 20px;
--urgent: #b3402e;
--urgent-soft: #f6e2de;
--ok: #567a46;
--ok-soft: #e7efe1;
}
/* ---------- section rhythm: alternate cream / warm paper ---------- */
.problem, .demo, .control, .outcome { background: var(--paper); border-block: 1px solid var(--line); }
.compare-band, .product, .livetest { background: var(--cream); }
#product { scroll-margin-top: 5.5rem; }
/* ============================================================
Opportunity card - the product artifact, one visual system for
urgency, status, owner, source, missing details, next action.
============================================================ */
.opp-card {
background: var(--pp-surface);
border: 1px solid var(--pp-line-strong);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(43, 38, 32, 0.05), 0 18px 40px rgba(43, 38, 32, 0.10);
padding: 1.25rem 1.35rem 1.35rem;
}
.opp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.opp-kicker {
margin: 0;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pp-label);
}
.opp-status {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.2rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--pp-line);
background: var(--sand);
color: var(--ink-soft);
white-space: nowrap;
}
.opp-status-follow { background: var(--clay-tint); color: var(--clay-deep); border-color: transparent; }
.opp-headline {
margin: 0.7rem 0 0.6rem;
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
}
.opp-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.85rem; padding: 0; list-style: none; }
.opp-tag {
font-size: 0.75rem;
font-weight: 700;
padding: 0.2rem 0.6rem;
border-radius: 6px;
background: var(--sand);
color: var(--ink-soft);
}
.opp-tag-urgent { background: var(--urgent-soft); color: var(--urgent); }
.opp-fields { margin: 0 0 0.85rem; padding: 0; }
.opp-fields > div {
display: grid;
grid-template-columns: 6rem 1fr;
gap: 0.5rem;
padding: 0.35rem 0;
border-bottom: 1px solid var(--line);
}
.opp-fields dt { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--pp-label); }
.opp-fields dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.opp-block { margin: 0 0 0.85rem; }
.opp-block-h {
margin: 0 0 0.35rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pp-label);
}
.opp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.28rem; }
.opp-list li {
position: relative;
padding-left: 1.1rem;
font-size: 0.9rem;
color: var(--ink);
}
.opp-list li::before {
content: "";
position: absolute;
left: 0.1rem;
top: 0.55em;
width: 0.35rem;
height: 0.35rem;
border-radius: 50%;
background: var(--ok);
}
.opp-list-missing li { color: var(--ink-soft); }
.opp-list-missing li::before { background: transparent; border: 1.5px solid var(--fur-light); top: 0.5em; }
.opp-source {
margin: 0 0 0.85rem;
font-size: 0.78rem;
color: var(--pp-label);
padding-top: 0.4rem;
border-top: 1px dashed var(--pp-line);
}
.opp-next {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
background: var(--clay);
color: #fff;
border-radius: var(--radius-sm);
padding: 0.7rem 0.9rem;
}
.opp-next-label {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.opp-next-value { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.opp-safety {
margin: 0.7rem 0 0;
font-size: 0.78rem;
line-height: 1.45;
color: var(--ink-soft);
padding-left: 1.1rem;
position: relative;
}
.opp-safety::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: var(--ok);
font-weight: 800;
}
/* ---------- hero: opportunity dominant, conversation secondary ---------- */
.hero-demo {
position: relative;
max-width: 26rem;
margin: 0 auto;
padding: 0;
display: grid;
gap: 1rem;
}
.hero-opp { position: relative; z-index: 2; }
.hero-phone { margin: 0; }
.mini-phone {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.85rem 0.95rem 1rem;
}
.mini-phone-h {
margin: 0 0 0.6rem;
font-size: 0.78rem;
font-weight: 700;
color: var(--ink-soft);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--line);
}
.mini-thread { display: flex; flex-direction: column; gap: 0.4rem; }
.mini-thread .sms { max-width: 85%; font-size: 0.8rem; }
.hero-phone-note { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--ink-soft); }
@media (min-width: 56rem) {
.hero-demo { max-width: none; margin: 0; }
}
/* ---------- static trade demo: opportunity first, phone second ---------- */
.demo-stage { display: grid; gap: 1.25rem; align-items: start; }
.demo-opp { order: -1; }
.demo-phone { align-self: start; }
.demo-phone .mini-thread { max-height: none; }
@media (min-width: 56rem) {
.demo-stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 2rem; }
}
.demo-tabs button[aria-selected="true"] {
background: var(--clay);
border-color: var(--clay);
color: #fff;
}
/* ============================================================
Sharp comparison - two columns, TextGopher visibly the answer.
============================================================ */
.vs-grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.vs-col {
border-radius: var(--radius);
padding: 1.5rem 1.5rem 1.35rem;
border: 1px solid var(--line);
}
.vs-basic { background: transparent; }
.vs-tg { background: var(--pp-surface); border-color: var(--clay); box-shadow: var(--shadow); }
.vs-col h3 {
margin: 0 0 1rem;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vs-basic h3 { color: var(--ink-soft); }
.vs-tg h3 { color: var(--clay-deep); }
.vs-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.vs-col li { position: relative; padding-left: 1.6rem; font-size: 0.975rem; }
.vs-basic li { color: var(--ink-soft); }
.vs-basic li::before {
content: "\2013";
position: absolute; left: 0; top: -0.05em;
color: var(--fur-light); font-weight: 800; font-size: 1.1rem;
}
.vs-tg li { font-weight: 600; }
.vs-tg li::before {
content: "\2713";
position: absolute; left: 0; top: 0;
color: var(--ok); font-weight: 800;
}
.vs-note {
margin: 1.75rem 0 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
max-width: 44rem;
}
@media (min-width: 48rem) {
.vs-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
/* ============================================================
Control panel - you decide what TextGopher can do.
============================================================ */
.panel-grid { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
.panel-col {
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: var(--radius);
padding: 1.4rem 1.4rem 1.25rem;
}
.panel-ask { border-top: 3px solid var(--clay); }
.panel-h {
margin: 0 0 0.9rem;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--pp-label);
}
.panel-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.panel-list li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; font-weight: 600; }
.panel-may li::before, .panel-controls li::before {
content: "\2713";
position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800;
}
.panel-ask li::before {
content: "";
position: absolute; left: 0.1rem; top: 0.42em;
width: 0.55rem; height: 0.55rem; border-radius: 50%;
border: 2px solid var(--clay);
}
.control-note {
margin: 1.75rem 0 0;
max-width: 44rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
}
@media (min-width: 48rem) {
.panel-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
/* ============================================================
Flagship product proof - one cohesive interface.
============================================================ */
.product-shell {
display: grid;
gap: 1.25rem;
margin-top: 2.25rem;
}
.product-main, .product-side { display: grid; gap: 1.1rem; align-content: start; }
.pp-block {
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: var(--radius);
padding: 1.1rem 1.2rem;
}
.pp-label {
margin: 0 0 0.65rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pp-label);
}
.pp-label.pp-ok { color: var(--ok); }
.pp-label.pp-no { color: var(--urgent); }
.pp-msg .sms { max-width: 100%; font-size: 0.9rem; }
.pp-headline { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.pp-fields { margin: 0; padding: 0; }
.pp-fields > div {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: 0.6rem;
padding: 0.4rem 0;
border-bottom: 1px solid var(--line);
}
.pp-fields > div:last-child { border-bottom: 0; }
.pp-fields dt { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--pp-label); }
.pp-fields dd { margin: 0; font-size: 0.9rem; font-weight: 600; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.pp-src { font-size: 0.72rem; font-weight: 600; color: var(--pp-label); font-style: italic; }
.pp-missing { color: var(--ink-soft); }
.pill {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.1rem 0.5rem;
border-radius: 5px;
background: var(--sand);
color: var(--ink-soft);
}
.pill-urgent { background: var(--urgent-soft); color: var(--urgent); }
.pp-two { display: grid; gap: 1.1rem; }
.pp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.pp-list li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; }
.pp-list-ok li::before {
content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800;
}
.pp-list-no li { color: var(--ink-soft); }
.pp-list-no li::before {
content: "\00d7"; position: absolute; left: 0.1rem; top: -0.05em; color: var(--urgent); font-weight: 800; font-size: 1.05rem;
}
.pp-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pp-chip {
font-size: 0.82rem;
font-weight: 700;
color: var(--clay-deep);
background: var(--clay-tint);
border-radius: 999px;
padding: 0.3rem 0.75rem;
}
.pp-fine { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--pp-label); }
@media (min-width: 34rem) {
.pp-two { grid-template-columns: 1fr 1fr; }
}
/* the dominant one-next-action card */
.pp-next-card {
background: var(--clay);
background: linear-gradient(160deg, var(--clay) 0%, var(--clay-deep) 100%);
color: #fff;
border-radius: var(--radius);
padding: 1.4rem 1.4rem 1.3rem;
box-shadow: var(--shadow-lift);
}
.pp-next-kicker {
margin: 0 0 0.35rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
}
.pp-next-big { margin: 0 0 0.4rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.pp-next-sub { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); }
.pp-side-block {
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: var(--radius);
padding: 1.1rem 1.2rem;
}
.pp-status-track { margin: 0 0 0.6rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pp-status-track li {
font-size: 0.78rem;
font-weight: 700;
padding: 0.22rem 0.6rem;
border-radius: 999px;
background: var(--sand);
color: var(--ink-soft);
border: 1px solid transparent;
}
.pp-status-track li.on { background: var(--clay-tint); color: var(--clay-deep); }
.pp-status-note { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
.pp-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.pp-timeline li {
position: relative;
padding-left: 1.3rem;
font-size: 0.88rem;
color: var(--ink);
}
.pp-timeline li::before {
content: "";
position: absolute; left: 0.15rem; top: 0.45em;
width: 0.5rem; height: 0.5rem; border-radius: 50%;
background: var(--ok);
}
.pp-timeline li:not(:last-child)::after {
content: "";
position: absolute; left: 0.37rem; top: 1.1em; bottom: -0.5rem;
width: 1.5px; background: var(--line);
}
.pp-timeline li.pending { color: var(--ink-soft); }
.pp-timeline li.pending::before { background: transparent; border: 1.5px solid var(--fur-light); }
@media (min-width: 60rem) {
.product-shell { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); gap: 1.5rem; }
}
/* ============================================================
Outcome flow + recovery snapshot (four figures kept apart).
============================================================ */
.recovery-shot {
width: 100%;
max-width: 48rem;
margin: 2.25rem 0 0;
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.35rem 1.4rem;
}
.recovery-title {
margin: 0 0 1rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pp-label);
display: flex;
align-items: center;
gap: 0.5rem;
}
.recovery-tag {
background: var(--sand);
color: var(--ink-soft);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.1rem 0.5rem;
border-radius: 999px;
}
.recovery-shot .stat-grid {
display: grid;
gap: 1rem 1.25rem;
margin: 0;
}
.recovery-shot .stat { display: grid; gap: 0.15rem; align-content: start; padding: 0; background: none; border: 0; }
.stat-label {
color: var(--pp-label);
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.stat-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-sub { color: var(--ink-soft); font-size: 0.78rem; }
.stat-strong .stat-value { color: var(--clay-deep); }
.stat-strong .stat-label { color: var(--clay-deep); }
.outcome-team {
margin: 2rem 0 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--ink);
max-width: 42rem;
}
@media (min-width: 40rem) {
.recovery-shot .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
.recovery-shot .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ---------- founding note (single, near pricing) ---------- */
.founding-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin: 1.75rem 0 0;
padding: 0.85rem 1.1rem;
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: var(--radius-sm);
font-size: 0.9rem;
color: var(--ink-soft);
}
.founding-note strong { color: var(--clay-deep); }
.founding-note .promo-code { background: var(--sand); color: var(--ink); }
/* ---------- livetest receipt tone ---------- */
.livetest .receipt { margin-top: 2rem; }
/* ============================================================
v5 final refinement - one promise, one product story, one action.
Adds: three-state journey (no numbered circles, no connector),
the unified authority panel, and the charcoal flagship product
layer that breaks the beige rhythm. Rust stays reserved for the
one next action, urgency, and active state.
============================================================ */
/* ---------- hero: a single compact opportunity ---------- */
@media (min-width: 56rem) {
.hero-demo { max-width: 26rem; margin: 0 0 0 auto; }
}
/* ---------- three-state journey (replaces the numbered timeline) ---------- */
.journey {
list-style: none;
margin: 2.5rem 0 0;
padding: 0;
display: grid;
gap: 1rem;
}
.jstate {
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-left: 3px solid var(--line);
border-radius: var(--radius);
padding: 1.4rem 1.5rem;
}
.jstate-active { border-left-color: var(--clay); }
.jstate-ready { border-left-color: var(--ok); }
.jstate-label {
margin: 0 0 0.45rem;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pp-label);
}
.jstate-ready .jstate-label { color: var(--clay-deep); }
.jstate-copy { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
@media (min-width: 48rem) {
.journey { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
/* ---------- authority panel: one shared container, aligned rows ---------- */
.authority-panel {
margin-top: 2.25rem;
background: var(--pp-surface);
border: 1px solid var(--pp-line-strong);
border-radius: var(--radius);
display: grid;
overflow: hidden;
}
.authority-panel .panel-col {
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding: 1.5rem 1.6rem;
}
.authority-panel .panel-col:first-child { border-top: 0; }
.authority-panel .panel-ask { border-top: 1px solid var(--line); }
.authority-panel .panel-ask .panel-h { color: var(--clay-deep); }
.authority-panel .panel-h { font-size: 0.82rem; }
.authority-panel .panel-list li { font-size: 1rem; }
@media (min-width: 48rem) {
.authority-panel { grid-template-columns: repeat(3, 1fr); }
.authority-panel .panel-col { border-top: 0; border-left: 1px solid var(--line); }
.authority-panel .panel-col:first-child { border-left: 0; }
.authority-panel .panel-ask { border-top: 0; }
}
/* ============================================================
Flagship product layer - charcoal ground, white product shell.
The page's visual centerpiece; the one place beige gives way.
============================================================ */
.product { background: var(--ink); }
.product > .wrap > h2 { color: #fff; }
.eyebrow-dark { color: #f0b489; }
.section-sub-dark { color: rgba(247, 244, 239, 0.72); }
.flagship { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
.flag-secondary { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 60rem) {
.flagship { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 1.5rem; align-items: start; }
}
.flag-card {
background: var(--pp-surface);
border: 1px solid var(--pp-line-strong);
border-radius: var(--radius);
padding: 1.5rem 1.6rem;
color: var(--ink);
}
.flag-label {
margin: 0 0 0.9rem;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pp-label);
}
.flag-headline {
margin: 0 0 0.7rem;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
}
.flag-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.flag-tag {
font-size: 0.8rem;
font-weight: 700;
padding: 0.25rem 0.65rem;
border-radius: 6px;
background: var(--sand);
color: var(--ink-soft);
}
.flag-tag-urgent { background: var(--urgent-soft); color: var(--urgent); }
.flag-fields { margin: 0; padding: 0; }
.flag-fields > div {
display: grid;
grid-template-columns: 6rem 1fr;
gap: 0.6rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--line);
}
.flag-fields > div:last-child { border-bottom: 0; }
.flag-fields dt { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--pp-label); }
.flag-fields dd {
margin: 0;
font-size: 0.98rem;
font-weight: 600;
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.5rem;
align-items: baseline;
}
.flag-src {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.01em;
padding: 0.12rem 0.5rem;
border-radius: 5px;
}
.flag-src-said { background: var(--ok-soft); color: var(--ok); }
.flag-src-id { background: var(--clay-tint); color: var(--clay-deep); }
.flag-miss { color: var(--ink-soft); font-style: italic; }
/* the one dominant action */
.flag-next {
background: linear-gradient(160deg, var(--clay) 0%, var(--clay-deep) 100%);
border-color: transparent;
color: #fff;
box-shadow: var(--shadow-lift);
}
.flag-next-kicker {
margin: 0 0 0.4rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.flag-next-big { margin: 0 0 0.4rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.flag-next-sub { margin: 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); }
.flag-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.flag-chip {
font-size: 0.88rem;
font-weight: 700;
color: var(--clay-deep);
background: var(--clay-tint);
border-radius: 999px;
padding: 0.38rem 0.9rem;
}
.flag-timeline { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.flag-timeline li { position: relative; padding-left: 1.35rem; font-size: 0.95rem; color: var(--ink); }
.flag-timeline li::before {
content: "";
position: absolute;
left: 0.15rem;
top: 0.5em;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--ok);
}
.flag-timeline li:not(:last-child)::after {
content: "";
position: absolute;
left: 0.37rem;
top: 1.15em;
bottom: -0.55rem;
width: 1.5px;
background: var(--line);
}
.flag-timeline li.pending { color: var(--ink-soft); }
.flag-timeline li.pending::before { background: transparent; border: 1.5px solid var(--fur-light); }
.flag-sublabel {
margin: 0 0 0.6rem;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pp-label);
}
.flag-outcomes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.flag-outcomes li {
font-size: 0.84rem;
font-weight: 700;
padding: 0.28rem 0.75rem;
border-radius: 999px;
background: var(--sand);
color: var(--ink-soft);
border: 1px solid var(--pp-line);
}
/* one authority row, spoken plainly on the charcoal ground */
.flag-authority { display: grid; gap: 0.7rem; margin: 1.75rem 0 0; }
.flag-authority p { margin: 0; color: rgba(247, 244, 239, 0.85); font-size: 1rem; }
.flag-auth-key {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.2rem 0.6rem;
border-radius: 6px;
margin-right: 0.55rem;
}
.flag-auth-ok { background: var(--ok-soft); color: var(--ok); }
.flag-auth-no { background: var(--urgent-soft); color: var(--urgent); }
@media (min-width: 40rem) {
.flag-authority { grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; }
}
.flag-report { margin: 1.25rem 0 0; font-size: 0.92rem; color: rgba(247, 244, 239, 0.6); }
/* one compact, verifiable trust strip */
.flag-trust {
margin: 1.75rem 0 0;
padding: 1.1rem 1.3rem;
border: 1px solid rgba(247, 244, 239, 0.18);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
}
.flag-trust-h {
margin: 0 0 0.35rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #f0b489;
}
.flag-trust-line { margin: 0; font-size: 0.98rem; color: rgba(247, 244, 239, 0.85); font-variant-numeric: tabular-nums; }
/* ============================================================
v6 - governed bilingual example + native accessibility.
The site is accessible first; the preferences panel is an
optional comfort layer. Bilingual content is a clearly labeled
static example (no translation backend exists yet). Same tokens,
same restrained rust; nothing here claims a capability the
product does not have.
============================================================ */
/* ---------- skip to content ---------- */
.skip-link {
position: absolute;
left: 0.75rem;
top: 0.6rem;
z-index: 200;
transform: translateY(-160%);
background: var(--ink);
color: #fff;
padding: 0.6rem 1rem;
border-radius: var(--radius-sm);
font-weight: 700;
text-decoration: none;
box-shadow: var(--shadow-lift);
transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); color: #fff; }
/* ---------- accessibility triggers ---------- */
.nav-a11y {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink-soft);
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.4rem 0.85rem;
min-height: 2.5rem;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.nav-a11y:hover { color: var(--ink); border-color: var(--clay); }
.nav-a11y-icon { flex: none; color: var(--clay); }
.nav-a11y-label { display: none; }
@media (min-width: 48rem) { .nav-a11y-label { display: inline; } }
.footer-a11y {
font: inherit;
font-size: 0.82rem;
color: rgba(247, 244, 239, 0.72);
background: transparent;
border: 0;
padding: 0.2rem 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.footer-a11y:hover { color: #fff; }
/* ---------- accessibility preferences dialog ---------- */
.a11y-root {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.a11y-root[hidden] { display: none; }
.a11y-backdrop { position: absolute; inset: 0; background: rgba(43, 38, 32, 0.55); }
.a11y-panel {
position: relative;
width: min(30rem, 100%);
max-height: calc(100vh - 2rem);
max-height: calc(100dvh - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--paper);
border: 1px solid var(--pp-line-strong);
border-radius: var(--radius);
box-shadow: var(--shadow-lift);
padding: 1.5rem 1.5rem 1.6rem;
}
@media (prefers-reduced-motion: no-preference) {
.js .a11y-panel { animation: a11y-in 0.18s ease-out; }
}
@keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.a11y-open-lock { overflow: hidden; }
.a11y-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.a11y-title { margin: 0; font-size: 1.3rem; }
.a11y-close {
flex: none;
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
font-size: 1.6rem;
line-height: 1;
color: var(--ink-soft);
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
cursor: pointer;
}
.a11y-close:hover { color: var(--ink); border-color: var(--clay); }
.a11y-intro { margin: 0 0 1.15rem; font-size: 0.9rem; color: var(--ink-soft); }
.a11y-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.6rem; }
.a11y-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
text-align: left;
font: inherit;
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: var(--radius-sm);
padding: 0.85rem 1rem;
min-height: 3.25rem;
cursor: pointer;
transition: border-color 0.15s ease;
}
.a11y-toggle:hover { border-color: var(--clay); }
.a11y-opt-text { display: grid; gap: 0.15rem; }
.a11y-opt-name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.a11y-opt-desc { font-size: 0.85rem; color: var(--ink-soft); }
.a11y-switch {
flex: none;
position: relative;
width: 2.75rem;
height: 1.6rem;
border-radius: 999px;
background: var(--sand);
border: 1px solid var(--pp-line-strong);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.a11y-switch::after {
content: "";
position: absolute;
top: 50%;
left: 0.18rem;
transform: translateY(-50%);
width: 1.15rem;
height: 1.15rem;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(43, 38, 32, 0.25);
transition: transform 0.15s ease;
}
.a11y-toggle[aria-checked="true"] .a11y-switch { background: var(--clay); border-color: var(--clay); }
.a11y-toggle[aria-checked="true"] .a11y-switch::after { transform: translate(1.15rem, -50%); }
.a11y-reset { margin-top: 0.25rem; }
/* ============================================================
Preference modes - applied as classes on , reversible,
layout preserving. Larger text scales rem-based sizing; higher
contrast overrides shared tokens; the others are scoped.
============================================================ */
html.a11y-large-text { font-size: 112.5%; }
html.a11y-contrast {
--ink: #15110b;
--ink-soft: #39332a;
--line: #b8ab93;
--pp-line: #b6a88f;
--pp-line-strong: #9c8e73;
--pp-label: #47402f;
--clay-dark: #7c3c10;
}
html.a11y-contrast :focus-visible { outline-width: 4px; outline-offset: 3px; }
html.a11y-contrast .section-sub-dark { color: rgba(247, 244, 239, 0.9); }
html.a11y-contrast .flag-report,
html.a11y-contrast .flag-authority p,
html.a11y-contrast .flag-trust-line { color: rgba(247, 244, 239, 0.95); }
html.a11y-emphasize-links a:not(.btn):not(.wordmark):not(.skip-link) {
text-decoration: underline;
text-underline-offset: 0.15em;
text-decoration-thickness: 2px;
}
html.a11y-emphasize-links a:not(.btn):not(.wordmark):not(.skip-link):hover { text-decoration-thickness: 3px; }
html.a11y-emphasize-links a:not(.btn):not(.wordmark):not(.skip-link):focus-visible { outline-width: 4px; }
html.a11y-reduce-motion,
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* ============================================================
Bilingual example - one compact card inside the flagship.
A clearly labeled demonstration of the intended experience.
Original Spanish is preserved and labeled; the English summary
is marked as translated. No confidence score (unsupported).
============================================================ */
.flag-lang { margin-top: 1.25rem; }
.flag-lang-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.flag-lang-head .flag-label { margin: 0; }
.flag-tag-example { background: var(--sand); color: var(--ink-soft); border: 1px solid var(--pp-line); }
.flag-lang-grid { display: grid; gap: 1rem; }
.flag-lang-side {
background: var(--cream);
border: 1px solid var(--pp-line);
border-radius: var(--radius-sm);
padding: 1rem 1.1rem;
}
.flag-lang-quote { margin: 0 0 0.65rem; font-size: 1.02rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
.flag-lang-prov {
margin: 0;
font-size: 0.82rem;
color: var(--pp-label);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.flag-lang-meta { margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0; }
.flag-lang-meta > div {
display: grid;
grid-template-columns: 10rem 1fr;
gap: 0.6rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--line);
}
.flag-lang-meta > div:last-child { border-bottom: 0; }
.flag-lang-meta dt { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--pp-label); }
.flag-lang-meta dd { margin: 0; font-size: 0.95rem; font-weight: 600; }
.flag-lang-auth {
margin: 1.1rem 0 0;
font-size: 0.92rem;
color: var(--ink-soft);
border-top: 1px dashed var(--pp-line);
padding-top: 0.9rem;
}
@media (min-width: 40rem) {
.flag-lang-grid { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
Industry junction. The front door at '/'.
One promise, five doors, two behaviors. No nav, no CTA, no
footer above the fold. A calm, centered, premium gateway.
============================================================ */
.junction-body {
min-height: 100vh;
background:
radial-gradient(120% 90% at 50% -10%, rgba(179, 89, 30, 0.06), transparent 60%),
radial-gradient(100% 70% at 50% 120%, rgba(179, 89, 30, 0.05), transparent 55%),
var(--cream);
}
.junction {
padding: clamp(3rem, 6vh, 4rem) 1.25rem clamp(4rem, 8vh, 6rem);
}
.junction-inner {
max-width: 70rem;
margin: 0 auto;
text-align: center;
}
/* --- logo: identifies the brand without dominating --- */
.junction-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
margin: 0;
}
.junction-logo-mascot { width: 2.1rem; flex: none; }
.junction-logo-mascot svg { width: 100%; height: auto; }
.junction-logo .wordmark-text {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink);
}
.junction-logo .wordmark-text em { font-style: normal; color: var(--clay); }
/* --- headline: the dominant element --- */
.junction-headline {
margin: clamp(3.5rem, 7vh, 5.5rem) 0 0;
font-size: clamp(2.25rem, 7.5vw, 6.5rem);
line-height: 1.02;
letter-spacing: -0.03em;
font-weight: 800;
color: var(--ink);
overflow-wrap: break-word;
}
.junction-dot { color: var(--clay); }
/* --- supporting copy: narrow and readable --- */
.junction-sub {
max-width: 34rem;
margin: clamp(1.5rem, 3vh, 2rem) auto 0;
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
line-height: 1.55;
color: var(--ink-soft);
}
/* --- trust line: compact and secondary --- */
.junction-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem 1rem;
margin: clamp(1.5rem, 3vh, 2rem) auto 0;
font-size: 1.05rem;
color: var(--ink-soft);
}
.junction-trust-sep {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--clay);
flex: none;
}
/* --- industry prompt --- */
.junction-prompt {
margin: clamp(4.5rem, 9vh, 6rem) 0 0;
font-size: clamp(1.15rem, 1.4vw, 1.3rem);
line-height: 1.4;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink);
}
/* --- the five doors --- */
.ind-grid {
list-style: none;
margin: clamp(2rem, 3vh, 2.25rem) auto 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: min(26rem, 100%);
}
.ind-item { display: flex; }
.ind-card {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
padding: clamp(1.75rem, 2.4vw, 2.25rem) 1.25rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: center;
}
.ind-icon {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
}
.ind-icon-svg { width: 1.75rem; height: 1.75rem; }
.ind-title {
font-size: clamp(1.2rem, 1.4vw, 1.45rem);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
}
/* active doors: real, full-card links */
.ind-card-active {
text-decoration: none;
color: var(--ink);
cursor: pointer;
box-shadow: 0 1px 2px rgba(43, 38, 32, 0.04);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ind-card-active .ind-icon {
background: var(--clay-tint);
color: var(--clay);
transition: background-color 0.15s ease;
}
.ind-card-active .ind-title { color: var(--ink); }
.ind-card-active:hover,
.ind-card-active:focus-visible {
border-color: var(--clay);
transform: translateY(-3px);
box-shadow: var(--shadow-lift);
color: var(--ink);
}
.ind-card-active:hover .ind-icon,
.ind-card-active:focus-visible .ind-icon {
background: #eccdb6;
}
/* inactive doors: intentional non-links, not broken, not loud */
.ind-card-inactive { cursor: default; }
.ind-card-inactive .ind-icon {
background: var(--sand);
color: var(--ink-soft);
}
.ind-card-inactive .ind-title { color: var(--ink-soft); }
/* wider screens have room to balance the headline into even lines */
@media (min-width: 40rem) {
.junction-headline { text-wrap: balance; }
}
/* desktop: one aligned row of five */
@media (min-width: 57.5rem) {
.ind-grid {
grid-template-columns: repeat(5, 1fr);
gap: clamp(1.25rem, 1.6vw, 1.75rem);
max-width: 66rem;
}
}
/* respect reduced motion: no lift, no icon shift jump */
@media (prefers-reduced-motion: reduce) {
.ind-card-active:hover,
.ind-card-active:focus-visible { transform: none; }
}
html.a11y-reduce-motion .ind-card-active:hover,
html.a11y-reduce-motion .ind-card-active:focus-visible { transform: none; }
/* larger touch target on active cards for coarse pointers */
@media (pointer: coarse) {
.ind-card { min-height: 8.5rem; }
}
/* ============================================================
TextGopher(TM) Enterprise White-First Design System (v2)
Authoritative source: textgopher-enterprise-design-system-v2.
Base element rules are scoped to opted-in pages via
so other marketing routes are untouched.
Tokens on :root are inert until used by .tg-* components.
============================================================ */
:root {
/* Brand */
--tg-color-bg: #ffffff;
--tg-color-surface: #fffaf6;
--tg-color-surface-strong: #fff4ec;
--tg-color-text: #15171b;
--tg-color-text-soft: #4b5058;
--tg-color-text-muted: #6d727a;
--tg-color-accent: #e94d00;
--tg-color-accent-hover: #c94000;
--tg-color-accent-soft: #fff0e7;
--tg-color-border: #e7e1dc;
--tg-color-border-strong: #d7cec6;
--tg-color-success: #1f7a4d;
--tg-color-warning: #a45a00;
--tg-color-danger: #b42318;
--tg-color-focus: #ff6a1f;
/* Typography */
--tg-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--tg-font-size-xs: 0.75rem;
--tg-font-size-sm: 0.875rem;
--tg-font-size-base: 1rem;
--tg-font-size-md: 1.125rem;
--tg-font-size-lg: 1.375rem;
--tg-font-size-xl: 1.75rem;
--tg-font-size-2xl: 2.25rem;
--tg-font-size-3xl: clamp(2.5rem, 5vw, 4.75rem);
--tg-line-tight: 1.05;
--tg-line-heading: 1.15;
--tg-line-body: 1.6;
--tg-letter-tight: -0.035em;
--tg-letter-label: 0.08em;
/* Layout */
--tg-container: 78rem;
--tg-container-narrow: 46rem;
--tg-gutter: clamp(1rem, 3vw, 2rem);
--tg-section-space: clamp(3.5rem, 6vw, 5.5rem);
--tg-section-space-compact: clamp(2.75rem, 5vw, 4.5rem);
/* Radius */
--tg-radius-sm: 0.5rem;
--tg-radius-md: 0.75rem;
--tg-radius-lg: 1rem;
--tg-radius-xl: 1.25rem;
/* Shadows */
--tg-shadow-sm: 0 1px 2px rgba(21, 23, 27, 0.04);
--tg-shadow-md: 0 10px 30px rgba(21, 23, 27, 0.07);
--tg-shadow-hover: 0 14px 36px rgba(21, 23, 27, 0.10);
/* Motion */
--tg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--tg-duration-fast: 160ms;
--tg-duration-base: 220ms;
}
/* Base (scoped to opted-in pages) */
body.tg {
background: var(--tg-color-bg);
color: var(--tg-color-text);
font-family: var(--tg-font-sans);
font-size: var(--tg-font-size-base);
line-height: var(--tg-line-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body.tg a { color: inherit; text-decoration: none; }
body.tg :is(button, input, select, textarea) { font: inherit; }
body.tg p, body.tg h1, body.tg h2, body.tg h3, body.tg h4 { margin-top: 0; }
body.tg p:last-child { margin-bottom: 0; }
body.tg :focus-visible { outline: 3px solid var(--tg-color-focus); outline-offset: 3px; }
/* Utility */
.tg-container {
width: min(100% - (2 * var(--tg-gutter)), var(--tg-container));
margin-inline: auto;
}
.tg-container--narrow {
width: min(100% - (2 * var(--tg-gutter)), var(--tg-container-narrow));
margin-inline: auto;
}
.tg-section { padding-block: var(--tg-section-space); }
.tg-section--compact { padding-block: var(--tg-section-space-compact); }
.tg-section--surface { background: var(--tg-color-surface); }
.tg-eyebrow {
margin-bottom: 1rem;
/* WCAG AA: #e94d00 on white is 3.8:1 (fails 4.5:1 for this small text).
The deeper accent is ~5:1 and keeps the brand orange. */
color: var(--tg-color-accent-hover);
font-size: var(--tg-font-size-sm);
font-weight: 800;
letter-spacing: var(--tg-letter-label);
line-height: 1.2;
text-transform: uppercase;
}
.tg-display {
max-width: 13ch;
margin-bottom: 1.25rem;
font-size: var(--tg-font-size-3xl);
font-weight: 800;
letter-spacing: var(--tg-letter-tight);
line-height: var(--tg-line-tight);
}
.tg-heading {
margin-bottom: 1rem;
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 750;
letter-spacing: -0.025em;
line-height: var(--tg-line-heading);
}
.tg-heading--sm { font-size: clamp(1.5rem, 2.25vw, 2.125rem); }
.tg-lead {
max-width: 42rem;
color: var(--tg-color-text-soft);
font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
line-height: 1.55;
}
.tg-muted { color: var(--tg-color-text-muted); }
.tg-accent-dot { color: var(--tg-color-accent); }
/* Accessibility utilities */
.tg-skip-link {
position: fixed;
top: 0.75rem;
left: 0.75rem;
z-index: 100;
transform: translateY(-200%);
border-radius: var(--tg-radius-sm);
padding: 0.75rem 1rem;
background: var(--tg-color-text);
color: #ffffff;
font-weight: 750;
transition: transform var(--tg-duration-fast) var(--tg-ease);
}
.tg-skip-link:focus { transform: translateY(0); }
.tg-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Navigation */
.tg-nav {
position: relative;
z-index: 20;
border-bottom: 1px solid var(--tg-color-border);
background: rgba(255, 255, 255, 0.96);
}
.tg-nav__inner {
min-height: 5.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.tg-brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.03em;
}
.tg-brand__mark { width: 3.44rem; height: 3.44rem; flex: 0 0 auto; }
.tg-brand__mark svg { width: 100%; height: 100%; }
.tg-brand em { font-style: normal; color: var(--tg-color-accent); }
.tg-brand sup { font-size: 0.5em; font-weight: 600; vertical-align: super; line-height: 0; margin-left: 0.06em; }
.tg-nav__actions { display: flex; align-items: center; gap: 1rem; }
.tg-nav__link {
min-height: 2.75rem;
display: inline-flex;
align-items: center;
padding-inline: 0.75rem;
color: var(--tg-color-text);
font-weight: 650;
}
/* Buttons — refined for legibility and a confident, pressable feel.
IMPORTANT: `body.tg a { color: inherit }` (specificity 0,1,2) was overriding the
button text color, so primary CTAs rendered with dark text on orange. The
`body.tg .tg-button--*` selectors below (0,2,1) reliably win and set the
intended white / dark text. */
.tg-button {
min-height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: 1px solid transparent;
border-radius: 999px;
padding: 0.8rem 1.65rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
cursor: pointer;
transition:
transform var(--tg-duration-fast) var(--tg-ease),
border-color var(--tg-duration-base) var(--tg-ease),
background-color var(--tg-duration-base) var(--tg-ease),
color var(--tg-duration-fast) var(--tg-ease),
filter var(--tg-duration-fast) var(--tg-ease),
box-shadow var(--tg-duration-base) var(--tg-ease);
}
.tg-button:hover { transform: translateY(-1px); }
.tg-button:active { transform: translateY(0); }
/* Primary: white text on a dimensional orange gradient. No colored glow — a
crisp inner top-highlight plus a neutral, enterprise elevation shadow. */
/* Gradient darkened one step so white button text clears 4.5:1 at every stop.
The old ramp (#f2571b/#e94d00/#db4900) measured 3.41–4.23:1 against white,
and the button text is 16–18px bold — under the large-text threshold, so
4.5 is the bar. Hover now darkens instead of brightening: the old
brightness(1.05) lifted the fill and pushed contrast back under AA, so the
lift is carried by the shadow and the existing -1px translate instead. */
body.tg .tg-button--primary {
color: #ffffff;
background: linear-gradient(180deg, #d24500 0%, #bf3c00 55%, #b33800 100%);
border-color: transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(21,23,27,0.18), 0 2px 6px -1px rgba(21,23,27,0.12);
}
body.tg .tg-button--primary:hover {
color: #ffffff;
filter: brightness(0.94) saturate(1.02);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 4px rgba(21,23,27,0.18), 0 6px 14px -4px rgba(21,23,27,0.18);
}
body.tg .tg-button--primary:active {
filter: brightness(0.88);
box-shadow: inset 0 2px 5px rgba(21,23,27,0.25);
}
/* Secondary: dark, high-contrast text on white; accent on interaction. */
body.tg .tg-button--secondary {
color: var(--tg-color-text);
background: #ffffff;
border-color: var(--tg-color-border-strong);
box-shadow: 0 1px 2px rgba(21,23,27,0.05);
}
body.tg .tg-button--secondary:hover {
color: var(--tg-color-accent-hover);
border-color: var(--tg-color-accent);
box-shadow: 0 6px 16px -8px rgba(21,23,27,0.22);
}
body.tg .tg-button--secondary:active { box-shadow: inset 0 1px 3px rgba(21,23,27,0.08); }
/* The single premium CTA size — confident proportions, tightened tracking.
Every hero/section/final CTA uses this so buttons read as one system. */
.tg-button--lg { min-height: 3.625rem; padding: 1.1rem 2.6rem; font-size: var(--tg-font-size-md); font-weight: 700; letter-spacing: -0.01em; }
.tg-button--block { width: 100%; }
/* Hero */
.tg-hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.tg-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
align-items: center;
gap: clamp(2.5rem, 5vw, 5rem);
}
.tg-hero__copy { min-width: 0; }
.tg-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
/* Junction hero: buttons share the row evenly and fill the copy column. */
.tg-hero__actions--fill .tg-button { flex: 1 1 0; }
.tg-trust-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
margin-top: 1.75rem;
list-style: none;
padding: 0;
}
/* Junction hero: spread the three trust items across the full column width
so they align above the three workflow steps and the buttons below. */
.tg-trust-row--spread { justify-content: space-between; }
.tg-trust-item { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tg-color-text); font-weight: 650; }
.tg-trust-item + .tg-trust-item { position: relative; }
.tg-trust-item + .tg-trust-item::before {
content: "";
width: 1px;
height: 1.25rem;
margin-right: 0.75rem;
background: var(--tg-color-border-strong);
}
.tg-trust-icon { color: var(--tg-color-accent); flex: 0 0 auto; }
/* Opportunity card */
.tg-opportunity-card {
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-lg);
background: #ffffff;
box-shadow: var(--tg-shadow-md);
overflow: hidden;
}
.tg-opportunity-card__inner { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.tg-status-label {
display: inline-flex;
align-items: center;
min-height: 1.75rem;
margin-bottom: 1rem;
border-radius: var(--tg-radius-sm);
padding: 0.25rem 0.55rem;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent);
font-size: var(--tg-font-size-xs);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tg-opportunity-card__title {
margin-bottom: 0.75rem;
font-size: clamp(1.35rem, 2vw, 1.75rem);
line-height: 1.25;
}
.tg-record-list { margin: 0; }
.tg-record-row {
display: grid;
grid-template-columns: 1.75rem auto minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
padding-block: 1rem;
border-top: 1px solid var(--tg-color-border);
}
.tg-record-row:first-child { border-top: 0; }
.tg-record-row__icon { color: var(--tg-color-accent); }
.tg-record-row__label { font-weight: 750; }
.tg-record-row__value { color: var(--tg-color-text-soft); justify-self: end; text-align: right; }
.tg-record-row__badge { justify-self: end; }
.tg-record-row__badge {
border-radius: var(--tg-radius-sm);
padding: 0.2rem 0.5rem;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent);
font-size: var(--tg-font-size-sm);
font-weight: 750;
}
.tg-boundary-note {
margin-top: 0.75rem;
padding-top: 1rem;
border-top: 1px solid var(--tg-color-border);
color: var(--tg-color-text-muted);
font-size: var(--tg-font-size-sm);
line-height: 1.5;
}
/* --- Homepage junction opportunity card (scoped; Trades card unaffected) --- */
/* Tight, crisp elevation instead of the diffuse shadow-md glow. */
.tg-opportunity-card--junction {
box-shadow: 0 1px 2px rgba(21, 23, 27, 0.05), 0 12px 24px -14px rgba(21, 23, 27, 0.20);
}
/* Stacked rows: bold label with its value directly beneath, left-aligned.
The badge (Urgency) sits on the label's row, pushed to the right. */
.tg-opportunity-card--junction .tg-record-row {
grid-template-columns: 1.75rem minmax(0, 1fr);
column-gap: 0.75rem;
row-gap: 0.15rem;
align-items: start;
}
.tg-opportunity-card--junction .tg-record-row__icon { grid-column: 1; grid-row: 1 / span 2; }
.tg-opportunity-card--junction .tg-record-row__label { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; }
.tg-opportunity-card--junction .tg-record-row__value { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; margin: 0; }
.tg-opportunity-card--junction .tg-record-row__badge { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
/* Per-row status icon colors. */
.tg-record-row__icon--danger { color: var(--tg-color-danger); }
.tg-record-row__icon--accent { color: var(--tg-color-accent); }
.tg-record-row__icon--success { color: var(--tg-color-success); }
.tg-record-row__icon--info { color: #2563eb; }
/* Restrained status colors for the label and urgency badge. */
.tg-status-label--ready { background: #e7f3ec; color: var(--tg-color-success); }
.tg-record-row__badge--danger { background: #fdeceb; color: var(--tg-color-danger); }
/* Boxed boundary note: soft-gray panel with a shield mark. */
.tg-boundary-note--boxed {
display: flex;
gap: 0.6rem;
align-items: flex-start;
margin-top: 1.25rem;
padding: 0.85rem 1rem;
padding-top: 0.85rem;
border-top: 0;
border-radius: var(--tg-radius-md);
background: #f5f6f8;
}
.tg-boundary-note__icon { flex: 0 0 auto; margin-top: 0.1rem; color: var(--tg-color-text-muted); }
/* Workflow */
.tg-workflow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: start;
gap: 1rem;
margin-top: 2rem;
list-style: none;
padding: 0;
}
.tg-workflow__step { text-align: center; }
.tg-workflow__icon {
width: 4rem;
height: 4rem;
display: grid;
place-items: center;
margin: 0 auto 0.75rem;
border-radius: 999px;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent);
}
.tg-workflow__label { font-weight: 650; }
.tg-workflow__arrow { align-self: center; color: var(--tg-color-accent); font-size: 1.75rem; line-height: 1; }
/* Industry selector */
.tg-industry-section { padding-block: clamp(1.5rem, 4vw, 3rem) var(--tg-section-space-compact); }
.tg-section-heading { margin-bottom: 2.5rem; text-align: center; }
.tg-section-heading .tg-heading { margin-bottom: 0.4rem; }
.tg-industry-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.tg-industry-card {
min-height: 12rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-lg);
padding: 1.5rem;
background: #ffffff;
box-shadow: 0 1px 2px rgba(21, 23, 27, 0.04);
transition:
transform var(--tg-duration-base) var(--tg-ease),
border-color var(--tg-duration-base) var(--tg-ease),
background-color var(--tg-duration-base) var(--tg-ease),
box-shadow var(--tg-duration-base) var(--tg-ease);
}
/* Light-up on hover/focus — every door reacts, active or not. The negative
shadow spread lifts the card cleanly without a soft glow at the edges. */
.tg-industry-card:hover,
.tg-industry-card:focus-visible {
transform: translateY(-3px);
border-color: var(--tg-color-accent);
background: var(--tg-color-surface);
box-shadow: 0 8px 18px -8px rgba(21, 23, 27, 0.22);
}
.tg-industry-card__icon { width: 3.5rem; height: 3.5rem; margin-bottom: 0; color: var(--tg-color-accent); }
.tg-industry-card__icon svg { width: 100%; height: 100%; }
.tg-industry-card__title { margin-bottom: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.tg-industry-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--tg-color-accent);
font-weight: 750;
}
.tg-industry-card__arrow { transition: transform var(--tg-duration-fast) var(--tg-ease); }
.tg-industry-card:hover .tg-industry-card__arrow,
.tg-industry-card:focus-visible .tg-industry-card__arrow { transform: translateX(4px); }
/* Inactive doors light up like the rest but don't navigate. */
.tg-industry-card--inactive { cursor: default; }
/* Reveal "View workflow" only where a precise pointer can hover; touch and
keyboard keep it visible so the affordance is never hidden from them. */
@media (hover: hover) and (pointer: fine) {
.tg-industry-card__cta {
opacity: 0;
transform: translateY(6px);
transition:
opacity var(--tg-duration-base) var(--tg-ease),
transform var(--tg-duration-base) var(--tg-ease);
}
.tg-industry-card:hover .tg-industry-card__cta,
.tg-industry-card:focus-visible .tg-industry-card__cta,
.tg-industry-card:focus-within .tg-industry-card__cta {
opacity: 1;
transform: none;
}
}
/* Compact "what you receive" outcome row (Trades See-it-work) */
.tg-outcome-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem 1.5rem;
margin-top: 1.75rem;
list-style: none;
padding: 0;
}
.tg-outcome-row li {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 650;
color: var(--tg-color-text);
}
.tg-outcome-row__icon { color: var(--tg-color-success); flex: 0 0 auto; line-height: 0; }
@media (max-width: 640px) {
.tg-outcome-row { grid-template-columns: 1fr 1fr; }
}
/* Generic content grids */
.tg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.tg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tg-card {
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-lg);
padding: clamp(1.25rem, 2.5vw, 2rem);
background: #ffffff;
box-shadow: var(--tg-shadow-sm);
}
.tg-card--warm { background: var(--tg-color-surface); }
.tg-card__eyebrow { margin-bottom: 0.4rem; color: var(--tg-color-accent); font-size: var(--tg-font-size-sm); font-weight: 800; letter-spacing: var(--tg-letter-label); text-transform: uppercase; }
.tg-card__title { margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 800; }
/* Tabs */
.tg-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; list-style: none; padding: 0; }
.tg-tab {
min-height: 2.75rem;
border: 1px solid var(--tg-color-border-strong);
border-radius: var(--tg-radius-md);
padding: 0.65rem 1rem;
background: #ffffff;
color: var(--tg-color-text-soft);
font-weight: 750;
cursor: pointer;
}
.tg-tab[aria-selected="true"] { border-color: var(--tg-color-accent); background: var(--tg-color-accent-soft); color: var(--tg-color-accent); }
/* Comparison */
.tg-comparison {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-lg);
overflow: hidden;
background: #ffffff;
}
.tg-comparison__column { padding: clamp(1.25rem, 3vw, 2rem); }
.tg-comparison__column + .tg-comparison__column { border-left: 1px solid var(--tg-color-border); background: var(--tg-color-surface); }
.tg-comparison__title { margin-bottom: 1rem; font-size: 1.25rem; font-weight: 800; }
.tg-check-list, .tg-plain-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.tg-check-list li { position: relative; padding-left: 1.75rem; }
.tg-check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--tg-color-accent); font-weight: 800; }
.tg-plain-list li { position: relative; padding-left: 1.75rem; color: var(--tg-color-text-soft); }
.tg-plain-list li::before { content: "\2013"; position: absolute; left: 0; color: var(--tg-color-text-muted); font-weight: 800; }
/* Authority */
.tg-authority-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tg-authority-card { border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); padding: 1.5rem; background: #ffffff; }
.tg-authority-card--accent { background: var(--tg-color-surface); }
.tg-authority-card__title { margin-bottom: 1rem; font-size: 1.125rem; font-weight: 800; }
/* Pricing */
.tg-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.tg-pricing-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-lg);
padding: 1.5rem;
background: #ffffff;
box-shadow: var(--tg-shadow-sm);
}
.tg-pricing-card--featured { border-color: var(--tg-color-accent); box-shadow: var(--tg-shadow-md); }
.tg-pricing-card__badge {
position: absolute;
top: 1rem;
right: 1rem;
border-radius: var(--tg-radius-sm);
padding: 0.25rem 0.5rem;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent);
font-size: var(--tg-font-size-xs);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tg-pricing-card__name { font-size: 1.25rem; font-weight: 800; }
.tg-pricing-card__blurb { margin-top: 0.35rem; color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); }
.tg-price { margin-block: 1rem; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.tg-price .price-per { font-size: 1rem; font-weight: 650; color: var(--tg-color-text-soft); }
.tg-price .price-note { display: block; margin-top: 0.15rem; font-size: var(--tg-font-size-sm); font-weight: 600; color: var(--tg-color-text-muted); letter-spacing: 0; }
.tg-pricing-card__actions { margin-top: auto; padding-top: 1.5rem; }
.tg-pricing-card__fine { margin-top: 0.75rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); }
/* FAQ */
.tg-faq { border-top: 1px solid var(--tg-color-border); }
.tg-faq__item { border-bottom: 1px solid var(--tg-color-border); }
.tg-faq__button {
width: 100%;
min-height: 4rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border: 0;
padding: 1rem 0;
background: transparent;
color: var(--tg-color-text);
text-align: left;
font-weight: 700;
cursor: pointer;
}
.tg-faq__icon { flex: 0 0 auto; color: var(--tg-color-accent); transition: transform var(--tg-duration-fast) var(--tg-ease); }
.tg-faq__button[aria-expanded="true"] .tg-faq__icon { transform: rotate(45deg); }
.tg-faq__panel { padding: 0 0 1.25rem; color: var(--tg-color-text-soft); }
.tg-faq__panel[hidden] { display: none; }
/* Footer */
.tg-footer { border-top: 1px solid var(--tg-color-border); background: var(--tg-color-surface); }
.tg-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 3.5rem 2.5rem; }
.tg-footer__brand-name { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; }
.tg-footer__brand-name em { font-style: normal; color: var(--tg-color-accent); }
.tg-footer__brand-name sup { font-size: 0.5em; font-weight: 600; vertical-align: super; line-height: 0; }
.tg-footer__tagline { margin-top: 0.75rem; max-width: 22rem; color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); }
.tg-footer__heading { margin-bottom: 0.75rem; font-size: var(--tg-font-size-sm); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tg-footer__links { display: grid; gap: 0.5rem; }
.tg-footer__link { color: var(--tg-color-text-soft); }
.tg-footer__link:hover { color: var(--tg-color-accent); }
.tg-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-block: 1.25rem;
border-top: 1px solid var(--tg-color-border);
color: var(--tg-color-text-muted);
font-size: var(--tg-font-size-sm);
}
/* Bridge helpers used by reused JS-driven components and approved lists */
.tg-note { margin-top: 0.5rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); line-height: 1.5; }
.tg-bullets { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.tg-bullets li { position: relative; padding-left: 1.5rem; color: var(--tg-color-text-soft); }
.tg-bullets li::before { content: "\2022"; position: absolute; left: 0.25rem; color: var(--tg-color-accent); font-weight: 800; }
.tg-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: tgstep; }
.tg-step { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; }
.tg-step__num {
width: 2.5rem; height: 2.5rem;
display: grid; place-items: center;
border-radius: 999px;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent);
font-weight: 800;
}
.tg-step__title { font-weight: 800; margin-bottom: 0.25rem; }
.tg-step__copy { color: var(--tg-color-text-soft); }
.tg-oppgroup { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--tg-color-border); }
.tg-oppgroup__label { font-weight: 750; margin-bottom: 0.5rem; }
.tg-oppgroup__label--missing { color: var(--tg-color-warning); }
.tg-thread { display: grid; gap: 0.6rem; }
.tg-sms {
max-width: 85%;
padding: 0.65rem 0.9rem;
border-radius: var(--tg-radius-md);
font-size: var(--tg-font-size-sm);
line-height: 1.45;
}
.tg-thread .in { justify-self: start; background: var(--tg-color-surface-strong); color: var(--tg-color-text); border: 1px solid var(--tg-color-border); }
.tg-thread .out { justify-self: end; background: var(--tg-color-accent); color: #ffffff; }
.tg-next {
margin-top: 1rem; padding-top: 1rem;
border-top: 1px solid var(--tg-color-border);
display: flex; flex-direction: column; gap: 0.15rem;
}
.tg-next__label { font-size: var(--tg-font-size-sm); font-weight: 750; color: var(--tg-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tg-next__value { font-size: 1.15rem; font-weight: 800; color: var(--tg-color-accent); }
.tg-cta-band { text-align: center; }
.tg-cta-band .tg-hero__actions { justify-content: center; }
/* Responsive */
@media (max-width: 1100px) {
.tg-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-pricing-grid { grid-template-columns: 1fr; }
.tg-pricing-card { max-width: 46rem; width: 100%; margin-inline: auto; }
}
@media (max-width: 900px) {
.tg-hero__grid { grid-template-columns: 1fr; }
.tg-opportunity-card { max-width: 42rem; }
.tg-grid-3, .tg-authority-grid { grid-template-columns: 1fr; }
.tg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.tg-nav__inner { min-height: 4.5rem; }
.tg-nav__actions { gap: 0.5rem; }
.tg-nav__link,
.tg-nav__actions .tg-button { min-height: 2.5rem; padding-inline: 0.7rem; font-size: var(--tg-font-size-sm); }
.tg-display { max-width: none; }
.tg-trust-row { align-items: flex-start; flex-direction: column; }
.tg-trust-item + .tg-trust-item::before { display: none; }
.tg-workflow { grid-template-columns: 1fr; }
.tg-workflow__arrow { transform: rotate(90deg); text-align: center; margin: 0.25rem auto; }
.tg-industry-grid, .tg-grid-2, .tg-comparison { grid-template-columns: 1fr; }
.tg-comparison__column + .tg-comparison__column { border-top: 1px solid var(--tg-color-border); border-left: 0; }
.tg-industry-card { min-height: 12rem; }
.tg-footer__grid { grid-template-columns: 1fr; }
.tg-footer__legal { flex-direction: column; }
}
@media (max-width: 420px) {
.tg-brand { font-size: 1.25rem; }
.tg-brand__mark { width: 2.81rem; height: 2.81rem; }
.tg-button { width: 100%; }
.tg-hero__actions { display: grid; }
.tg-record-row { grid-template-columns: 1.5rem minmax(0, 1fr); }
.tg-record-row__label,
.tg-record-row__value { grid-column: 2; justify-self: start; text-align: left; }
.tg-record-row__badge { grid-column: 2; justify-self: start; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.tg-industry-card:hover,
.tg-industry-card:focus-visible { transform: none; }
.tg-industry-card:hover .tg-industry-card__arrow,
.tg-industry-card:focus-visible .tg-industry-card__arrow { transform: none; }
.tg-button:hover { transform: none; }
/* Keep the CTA visible without motion. */
.tg-industry-card__cta { opacity: 1; transform: none; transition: none; }
}
html.a11y-reduce-motion .tg-industry-card:hover,
html.a11y-reduce-motion .tg-industry-card:focus-visible,
html.a11y-reduce-motion .tg-button:hover { transform: none; }
html.a11y-reduce-motion .tg-industry-card__cta { opacity: 1; transform: none; transition: none; }
/* High contrast support */
@media (forced-colors: active) {
.tg-button,
.tg-industry-card,
.tg-card,
.tg-opportunity-card,
.tg-pricing-card,
.tg-authority-card { border: 1px solid CanvasText; }
}
/* =====================================================================
JUNCTION HOMEPAGE (/) — scoped under .tg-jx / .jx-*
Self-contained so the shared /trades page is never affected.
===================================================================== */
.tg-jx { --jx-ink: var(--tg-color-text); }
.tg-jx { background: #ffffff; }
/* Responsive copy variants (small, intentional — not hidden page trees) */
.tg-jx .jx-m { display: none; }
@media (max-width: 720px) {
.tg-jx .jx-d { display: none; }
.tg-jx .jx-m { display: inline; }
}
/* ---------- Navigation ---------- */
.jx-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,0.86);
border-bottom: 1px solid transparent;
transition: box-shadow var(--tg-duration-base) var(--tg-ease), border-color var(--tg-duration-base) var(--tg-ease), background-color var(--tg-duration-base) var(--tg-ease);
}
@supports (backdrop-filter: blur(8px)) {
.jx-nav { backdrop-filter: saturate(1.4) blur(10px); }
}
.jx-nav[data-scrolled="true"] {
background: rgba(255,255,255,0.92);
border-bottom-color: var(--tg-color-border);
box-shadow: 0 1px 0 rgba(21,23,27,0.04), 0 8px 24px -18px rgba(21,23,27,0.35);
}
.jx-nav__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.jx-nav__brand { flex: 0 0 auto; }
.jx-nav__links { display: flex; align-items: center; gap: 1.75rem; margin-left: 1rem; margin-right: auto; }
.jx-nav__links a { color: var(--tg-color-text-soft); font-weight: 600; font-size: var(--tg-font-size-sm); position: relative; }
.jx-nav__links a:hover { color: var(--tg-color-text); }
.jx-nav__actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.jx-nav__signin { color: var(--tg-color-text); font-weight: 600; font-size: var(--tg-font-size-sm); }
.jx-nav__signin:hover { color: var(--tg-color-accent); }
.jx-nav__toggle { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-md); background: #fff; cursor: pointer; }
.jx-nav__toggle-bars { display: block; width: 1.15rem; height: 0.8rem; position: relative; }
.jx-nav__toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--tg-color-text); transition: transform var(--tg-duration-fast) var(--tg-ease), opacity var(--tg-duration-fast) var(--tg-ease); }
.jx-nav__toggle-bars span:nth-child(1) { top: 0; }
.jx-nav__toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.jx-nav__toggle-bars span:nth-child(3) { bottom: 0; }
.jx-nav__toggle[aria-expanded="true"] .jx-nav__toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.jx-nav__toggle[aria-expanded="true"] .jx-nav__toggle-bars span:nth-child(2) { opacity: 0; }
.jx-nav__toggle[aria-expanded="true"] .jx-nav__toggle-bars span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
.jx-nav__menu { display: grid; gap: 0.35rem; padding: 0.5rem 1.25rem 1.25rem; border-top: 1px solid var(--tg-color-border); background: rgba(255,255,255,0.98); }
.jx-nav__menu[hidden] { display: none; }
.jx-nav__menu a:not(.tg-button) { padding: 0.85rem 0.25rem; font-weight: 600; color: var(--tg-color-text); border-bottom: 1px solid var(--tg-color-border); }
.jx-nav__menu .tg-button { margin-top: 0.75rem; }
@media (max-width: 900px) {
.jx-nav__links, .jx-nav__actions { display: none; }
.jx-nav__toggle { display: inline-flex; margin-left: auto; }
}
@media (min-width: 901px) { .jx-nav__menu { display: none !important; } }
/* ---------- Hero ---------- */
.jx-hero { padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem); }
.jx-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(2rem, 4vw, 4.5rem);
align-items: center;
}
.jx-hero__copy { min-width: 0; }
/* Refined live-status badge (replaces the plain eyebrow) */
.jx-hero__badge {
display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.35rem;
padding: 0.4rem 0.85rem 0.4rem 0.7rem; border-radius: 999px;
background: var(--tg-color-accent-soft); border: 1px solid rgba(233,77,0,0.16);
color: var(--tg-color-accent-hover); font-size: var(--tg-font-size-xs); font-weight: 800;
letter-spacing: 0.09em; text-transform: uppercase;
}
.jx-hero__badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--tg-color-accent); flex: none; }
.jx-hero__title { max-width: 15ch; margin-bottom: 1.25rem; }
.jx-hero__lead { max-width: 34rem; color: var(--tg-color-text-soft); }
.jx-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }
.jx-btn-play { gap: 0.55rem; }
.jx-btn-play__icon { color: var(--tg-color-accent); line-height: 0; }
.jx-hero__reassure { margin-top: 1.15rem; max-width: 30rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); line-height: 1.6; }
/* Consolidated trust row — scannable guarantees instead of stacked lines */
.jx-hero__trust-row {
list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--tg-color-border);
display: flex; flex-wrap: wrap; gap: 0.65rem 1.6rem;
}
.jx-hero__trust-row li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--tg-font-size-sm); font-weight: 650; color: var(--tg-color-text); }
.jx-hero__trust-row svg { color: var(--tg-color-success); flex: none; }
@media (prefers-reduced-motion: no-preference) {
.jx-hero__proof { animation: jxHeroCard .75s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes jxHeroCard { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
.jx-hero__grid { grid-template-columns: 1fr; gap: 2.25rem; }
.jx-hero__title { max-width: 18ch; }
}
/* ---------- Live product proof ---------- */
.jx-proof {
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-lg);
background: #ffffff;
box-shadow: 0 1px 2px rgba(21,23,27,0.05), 0 26px 50px -34px rgba(21,23,27,0.45);
overflow: hidden;
}
.jx-proof__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--tg-color-border); background: var(--tg-color-surface); }
.jx-proof__badge { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; gap: 0.4rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: #e7f3ec; color: var(--tg-color-success); font-size: var(--tg-font-size-xs); font-weight: 800; letter-spacing: 0; }
.jx-proof__badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.jx-proof__biz { text-align: right; line-height: 1.25; }
.jx-proof__biz-name { display: block; font-weight: 750; font-size: var(--tg-font-size-sm); }
.jx-proof__biz-time { display: block; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-xs); }
.jx-proof__thread { display: grid; gap: 0.4rem; padding: 1.1rem 1.25rem; }
.jx-bubble { max-width: 82%; margin: 0; padding: 0.55rem 0.8rem; border-radius: 1rem; font-size: var(--tg-font-size-sm); line-height: 1.4; }
.jx-bubble--in { justify-self: start; background: #f1f2f4; color: var(--tg-color-text); border-bottom-left-radius: 0.35rem; }
.jx-bubble--out { justify-self: end; background: var(--tg-color-accent-soft); color: #7a2e08; border-bottom-right-radius: 0.35rem; }
.jx-proof__opp { padding: 1.1rem 1.25rem 1.25rem; border-top: 1px solid var(--tg-color-border); background: #fff; }
.jx-proof__opp-label { margin: 0 0 0.15rem; color: var(--tg-color-accent); font-size: var(--tg-font-size-xs); font-weight: 800; letter-spacing: var(--tg-letter-label); text-transform: uppercase; }
.jx-proof__opp-title { margin: 0 0 0.85rem; font-size: 1.2rem; font-weight: 800; }
.jx-proof__rows { margin: 0; display: grid; gap: 0; }
.jx-proof__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; border-top: 1px solid var(--tg-color-border); }
.jx-proof__row:first-child { border-top: 0; }
.jx-proof__row dt { margin: 0; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); }
.jx-proof__row dd { margin: 0; font-weight: 700; text-align: right; }
.jx-proof__row--flag dt { position: relative; padding-left: 0.9rem; }
.jx-proof__row--flag dt::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.45rem; height: 0.45rem; border-radius: 2px; background: var(--tg-color-warning); }
.jx-proof__next { color: var(--tg-color-accent); }
.jx-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: var(--tg-font-size-xs); font-weight: 800; }
.jx-status--ready { background: #e7f3ec; color: var(--tg-color-success); }
.jx-status::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
/* Give the primary a little more room (its label is longer) and shrink the
mockup buttons so they read as compact in-app controls, not full CTAs. */
.jx-proof__actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0.5rem; margin-top: 1rem; align-items: stretch; }
.jx-proof__btn { pointer-events: none; min-height: 2.6rem; padding: 0.5rem 0.7rem; font-size: var(--tg-font-size-sm); line-height: 1.2; letter-spacing: 0; text-align: center; }
/* ---------- Mascot motion (enterprise-restrained) ---------- */
.jx-gopher { display: block; }
.jx-gopher--float { animation: jx-float 6s ease-in-out infinite; will-change: transform; }
@keyframes jx-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
.jx-gopher--float { animation: none; }
}
html.a11y-reduce-motion .jx-gopher--float { animation: none; }
/* ---------- Cookie consent bar (privacy-first scaffolding, site-wide) ---------- */
.tg-cookiebar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100; max-width: 46rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); background: #fff; box-shadow: 0 20px 44px -20px rgba(21,23,27,0.5); }
.tg-cookiebar__text { margin: 0; flex: 1 1 20rem; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-soft); line-height: 1.5; }
.tg-cookiebar__text a { color: var(--tg-color-accent-hover); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.tg-cookiebar__actions { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.tg-cookiebar__actions .tg-button { min-height: 2.5rem; padding-inline: 1rem; }
@media (max-width: 560px) { .tg-cookiebar { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; } .tg-cookiebar__actions { width: 100%; } .tg-cookiebar__actions .tg-button { flex: 1; } }
/* ---------- Shared Junction section scaffolding ---------- */
.jx-section { padding-block: clamp(3rem, 6vw, 5.75rem); }
.jx-section--surface { background: var(--tg-color-surface); }
.jx-section-head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.jx-center-lead { margin-inline: auto; color: var(--tg-color-text-soft); }
.jx-body { margin-top: 1rem; max-width: 34rem; color: var(--tg-color-text-soft); }
.jx-eyebrow-sm { margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: var(--tg-font-size-sm); font-weight: 750; color: var(--tg-color-text); }
.jx-fine { margin-top: 1.25rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); line-height: 1.5; max-width: 34rem; }
.jx-kicker { margin-top: 1.5rem; font-size: 1.15rem; font-weight: 750; }
.jx-closing { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 750; max-width: 44rem; margin-inline: auto; }
/* Check lists / x lists (masked icons, crisp, no emoji) */
.jx-checks, .jx-xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.jx-checks li { position: relative; padding-left: 1.9rem; font-weight: 600; }
.jx-checks li::before {
content: ""; position: absolute; left: 0; top: 0.05em; width: 1.3rem; height: 1.3rem; border-radius: 999px;
background: #e7f3ec;
}
.jx-checks li::after {
content: ""; position: absolute; left: 0.28rem; top: 0.32em; width: 0.75rem; height: 0.75rem; background: var(--tg-color-success);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.jx-checks--strong li { font-weight: 700; }
.jx-xlist li { position: relative; padding-left: 1.9rem; color: var(--tg-color-text-muted); font-weight: 500; }
.jx-xlist li::before { content: ""; position: absolute; left: 0.15rem; top: 0.62em; width: 0.85rem; height: 2px; border-radius: 2px; background: var(--tg-color-text-muted); }
/* ---------- 2. No-App Access ---------- */
.jx-noapp__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: clamp(2rem,4vw,4rem); align-items: center; }
.jx-noapp__visual { position: relative; display: flex; justify-content: center; }
.jx-phone {
width: min(300px, 82%); border-radius: 2rem; background: #fff;
border: 1px solid var(--tg-color-border);
box-shadow: 0 2px 4px rgba(21,23,27,0.05), 0 34px 60px -34px rgba(21,23,27,0.5);
padding: 0.65rem; overflow: hidden;
}
.jx-phone__bar { display: flex; justify-content: center; padding: 0.25rem 0 0.6rem; }
.jx-phone__bar span { width: 34%; height: 5px; border-radius: 999px; background: var(--tg-color-border-strong); }
.jx-phone__screen { border-radius: 1.4rem; background: var(--tg-color-surface); padding: 0.85rem; display: grid; gap: 0.75rem; }
.jx-sms { background: #fff; border: 1px solid var(--tg-color-border); border-radius: 1rem; padding: 0.8rem 0.9rem; box-shadow: var(--tg-shadow-sm); }
.jx-sms__from { margin: 0 0 0.25rem; font-weight: 750; font-size: var(--tg-font-size-sm); }
.jx-sms__text { margin: 0 0 0.55rem; font-size: var(--tg-font-size-sm); line-height: 1.4; color: var(--tg-color-text-soft); }
.jx-sms__link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--tg-color-accent); font-weight: 700; font-size: var(--tg-font-size-sm); }
.jx-securelink { background: #fff; border: 1px solid var(--tg-color-border); border-radius: 1rem; padding: 0.85rem 0.9rem; box-shadow: var(--tg-shadow-sm); }
.jx-securelink__title { margin: 0 0 0.6rem; font-weight: 800; }
.jx-securelink__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; border-top: 1px solid var(--tg-color-border); font-size: var(--tg-font-size-sm); }
.jx-securelink__row:first-of-type { border-top: 0; }
.jx-securelink__row span { color: var(--tg-color-text-muted); }
.jx-securelink__cta { margin-top: 0.75rem; min-height: 2.5rem; pointer-events: none; }
/* Premium mascot medallion: the canonical Gus framed as a brand token. */
.jx-medallion { display: inline-grid; place-items: center; border-radius: 50%; }
.jx-medallion > img { width: 66%; height: auto; }
.jx-noapp__mascot.jx-medallion {
position: absolute; left: -0.25rem; bottom: -0.85rem;
width: clamp(96px, 12vw, 126px); height: clamp(96px, 12vw, 126px);
background: radial-gradient(120% 120% at 50% 30%, #ffffff 0%, var(--tg-color-surface-strong) 82%);
border: 1px solid var(--jx-hairline);
box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(21,23,27,0.06), 0 24px 42px -22px rgba(21,23,27,0.36);
}
.jx-noapp__mascot.jx-medallion > img { filter: drop-shadow(0 5px 9px rgba(21,23,27,0.16)); }
@media (max-width: 960px) {
.jx-noapp__grid { grid-template-columns: 1fr; gap: 2.5rem; }
.jx-noapp__visual { order: -1; }
.jx-noapp__mascot { left: auto; right: 0; }
}
/* ---------- 3. Competitive Difference ---------- */
.jx-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: stretch; max-width: 60rem; margin-inline: auto; }
.jx-compare__card { border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); padding: clamp(1.25rem, 2.5vw, 1.9rem); background: #fff; }
.jx-compare__card--basic { background: var(--tg-color-surface); }
.jx-compare__card--tg { border-color: var(--tg-color-accent); box-shadow: 0 2px 4px rgba(233,77,0,0.06), 0 24px 44px -30px rgba(233,77,0,0.45); position: relative; }
.jx-compare__label { margin: 0 0 1.1rem; font-weight: 800; font-size: 1.05rem; }
.jx-compare__card--tg .jx-compare__label em { font-style: normal; color: var(--tg-color-accent); }
.jx-compare__card--tg .jx-compare__label sup { font-size: 0.55em; vertical-align: super; }
@media (max-width: 640px) { .jx-compare { grid-template-columns: 1fr; } }
/* ---------- 4. How It Works (elevated connected stepper) ---------- */
.jx-steps { list-style: none; margin: clamp(2.25rem,4vw,3.25rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.jx-step { position: relative; }
.jx-step__num {
display: grid; place-items: center; width: 2.85rem; height: 2.85rem; border-radius: 999px;
background: linear-gradient(180deg, #f2571b, #db4900); color: #fff; font-weight: 800; font-size: 1.05rem;
margin-bottom: 1.05rem; position: relative; z-index: 1;
box-shadow: 0 0 0 5px var(--tg-color-surface), 0 5px 12px -5px rgba(21,23,27,0.22);
}
.jx-step:not(:last-child)::after {
content: ""; position: absolute; top: 1.42rem; left: 3.2rem; right: -1.5rem; height: 2px; z-index: 0;
background: linear-gradient(90deg, var(--tg-color-accent), rgba(233,77,0,0.3));
transform-origin: left center;
}
.jx-step__title { margin: 0 0 0.4rem; font-weight: 750; line-height: 1.25; letter-spacing: -0.01em; }
.jx-step__copy { margin: 0; color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); line-height: 1.55; }
/* Staggered reveal: nodes fade up, rails draw left-to-right, in sequence. */
@media (prefers-reduced-motion: no-preference) {
.jx-how .jx-step { opacity: 0; transform: translateY(12px); }
.jx-how .jx-step:not(:last-child)::after { transform: scaleX(0); }
.jx-how.revealed .jx-step { animation: jxStepIn .5s cubic-bezier(.2,.7,.2,1) forwards; }
.jx-how.revealed .jx-step:not(:last-child)::after { animation: jxStepRail .45s cubic-bezier(.4,0,.2,1) forwards; }
.jx-how.revealed .jx-step:nth-child(1) { animation-delay: .04s; }
.jx-how.revealed .jx-step:nth-child(2) { animation-delay: .13s; }
.jx-how.revealed .jx-step:nth-child(3) { animation-delay: .22s; }
.jx-how.revealed .jx-step:nth-child(4) { animation-delay: .31s; }
.jx-how.revealed .jx-step:nth-child(5) { animation-delay: .40s; }
.jx-how.revealed .jx-step:nth-child(1)::after { animation-delay: .16s; }
.jx-how.revealed .jx-step:nth-child(2)::after { animation-delay: .25s; }
.jx-how.revealed .jx-step:nth-child(3)::after { animation-delay: .34s; }
.jx-how.revealed .jx-step:nth-child(4)::after { animation-delay: .43s; }
}
@keyframes jxStepIn { to { opacity: 1; transform: none; } }
@keyframes jxStepRail { to { transform: scaleX(1); } }
@media (max-width: 860px) {
.jx-steps { grid-template-columns: 1fr; gap: 0; }
.jx-step { padding-left: 3.9rem; padding-bottom: 1.9rem; }
.jx-step__num { position: absolute; left: 0; top: 0; margin: 0; box-shadow: 0 0 0 4px var(--tg-color-surface), 0 5px 12px -5px rgba(21,23,27,0.22); }
.jx-step:not(:last-child)::after { top: 2.85rem; bottom: -0.55rem; left: 1.42rem; right: auto; width: 2px; height: auto; transform: none; animation: none; }
.jx-step:last-child { padding-bottom: 0; }
/* step 5 is desktop-only; drop the dangling connector after step 4 on mobile */
.jx-step:has(+ .jx-step.jx-d)::after { display: none; }
}
/* ---------- 5. Availability and Control ---------- */
.jx-control__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.jx-overlap { background: #fff; border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); padding: clamp(1.25rem,2.5vw,1.85rem); box-shadow: 0 1px 2px rgba(21,23,27,0.05), 0 24px 44px -32px rgba(21,23,27,0.4); }
.jx-overlap__scale { display: flex; justify-content: space-between; margin-left: 7rem; margin-bottom: 0.6rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-xs); }
.jx-overlap__row { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 0.85rem; margin-bottom: 0.65rem; }
.jx-overlap__who { font-size: var(--tg-font-size-sm); font-weight: 700; line-height: 1.2; }
.jx-overlap__who strong { display: block; color: var(--tg-color-text-muted); font-weight: 600; font-size: var(--tg-font-size-xs); }
.jx-overlap__cell { position: relative; height: 1.6rem; border-radius: 999px; background: var(--tg-color-surface); }
.jx-overlap__bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: var(--tg-font-size-xs); font-weight: 800; white-space: nowrap; }
.jx-overlap__bar i { font-style: normal; letter-spacing: 0.02em; }
.jx-overlap__bar--responder { background: linear-gradient(180deg, #eef1f5, #e0e5ec); color: #6b727c; box-shadow: inset 0 0 0 1px rgba(21,23,27,0.04); }
.jx-overlap__bar--customer { background: linear-gradient(180deg, #dde3ea, #ccd4de); color: #565d67; box-shadow: inset 0 0 0 1px rgba(21,23,27,0.05); }
.jx-overlap__bar--best { background: linear-gradient(180deg, #f2571b, #db4900); color: #fff; box-shadow: 0 6px 14px -6px rgba(233,77,0,0.6); }
.jx-overlap__row--best .jx-overlap__who { color: var(--tg-color-accent-hover); }
.jx-overlap__status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--tg-color-border); font-size: var(--tg-font-size-sm); }
.jx-overlap__status > span:first-child { color: var(--tg-color-text-muted); }
/* Elevated example: chart head, time grid, and the overlap column that
explains why 3:30-4:30 is the best window. */
.jx-overlap { --lane: 7rem; --gap: 0.85rem; }
.jx-overlap__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.jx-overlap__title { font-size: var(--tg-font-size-sm); font-weight: 800; letter-spacing: -0.01em; }
.jx-overlap__key { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--tg-font-size-xs); font-weight: 700; color: var(--tg-color-text-muted); }
.jx-overlap__key--overlap::before { content: ""; width: 0.85rem; height: 0.85rem; border-radius: 3px; background: var(--tg-color-accent-soft); border: 1px dashed rgba(233,77,0,0.5); }
.jx-overlap__chart { position: relative; }
/* Overlap highlight: a soft accent column spanning all three rows, marking the
shared 3:30-4:30 slice. Sits behind the bars; edges are subtle guide lines. */
.jx-overlap__band {
position: absolute; top: 0; bottom: 0;
left: calc(var(--lane) + var(--gap) + (100% - var(--lane) - var(--gap)) * 0.25);
width: calc((100% - var(--lane) - var(--gap)) * 0.5);
background: linear-gradient(180deg, rgba(233,77,0,0.05), rgba(233,77,0,0.09));
border-inline: 1px dashed rgba(233,77,0,0.32);
border-radius: 8px; z-index: 0;
}
.jx-overlap__grid { display: none; }
.jx-overlap__chart .jx-overlap__row { position: relative; z-index: 1; }
.jx-overlap__chart .jx-overlap__row:last-child { margin-bottom: 0; }
.jx-overlap__cell { background: rgba(247,242,236,0.72); }
.jx-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: var(--tg-font-size-xs); font-weight: 800; }
.jx-chip--requested { background: #fff3e6; color: #a4560a; }
.jx-chip--requested::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.jx-disclaimer { margin-top: 1.1rem; padding: 0.85rem 1rem; border-radius: var(--tg-radius-md); background: var(--tg-color-surface); border: 1px solid var(--tg-color-border); color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); line-height: 1.5; }
@media (max-width: 860px) {
.jx-control__grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* ---------- 6. Industry Relevance (tabs, elevated + per-industry theming) ----------
Each tab/panel carries data-ind; the --ind* custom properties are defined
per industry near the end of this file. Colors resolve from those. */
.jx-industry { display: grid; grid-template-columns: 17rem minmax(0,1fr); gap: clamp(1.5rem,3vw,2.5rem); align-items: start; max-width: 62rem; margin-inline: auto; }
.jx-industry__tabs { display: flex; flex-direction: column; gap: 0.6rem; }
.jx-industry__tab {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 0.8rem; min-height: 3.35rem;
padding: 0.7rem 1rem 0.7rem 1.15rem;
border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-md);
background: #fff; text-align: left; font-weight: 700; color: var(--tg-color-text); cursor: pointer;
transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .25s ease;
}
.jx-industry__tab::before {
content: ""; position: absolute; left: 0; top: 50%; height: 0; width: 3px; border-radius: 0 3px 3px 0;
background: var(--ind, var(--tg-color-accent)); transform: translateY(-50%);
transition: height .3s cubic-bezier(.2,.7,.2,1);
}
.jx-industry__tab-icon {
width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; flex: 0 0 auto; display: grid; place-items: center;
color: var(--ind, var(--tg-color-accent)); background: var(--ind-soft, var(--tg-color-accent-soft));
transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .2s ease, color .2s ease;
}
.jx-industry__tab-icon svg { width: 1.2rem; height: 1.2rem; }
.jx-industry__tab:hover { transform: translateX(3px); border-color: var(--ind, var(--tg-color-border-strong)); }
.jx-industry__tab:hover .jx-industry__tab-icon { transform: scale(1.08) rotate(-3deg); }
.jx-industry__tab[aria-selected="true"] { border-color: var(--ind); background: var(--ind-soft); color: var(--ind-deep); }
.jx-industry__tab[aria-selected="true"]::before { height: 56%; }
.jx-industry__tab[aria-selected="true"] .jx-industry__tab-icon { background: var(--ind); color: #fff; }
.jx-industry__panel {
position: relative; overflow: hidden;
border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg);
background: #fff;
padding: clamp(1.65rem,3vw,2.4rem);
}
.jx-industry__panel[hidden] { display: none; }
.jx-industry__bar { position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--ind, var(--tg-color-accent)), var(--ind-lite, #ff7a33)); }
.jx-industry__title { margin: 0 0 0.5rem; font-size: clamp(1.2rem,2vw,1.55rem); font-weight: 800; letter-spacing: -0.02em; }
.jx-industry__panel .jx-eyebrow-sm { color: var(--ind-deep, var(--tg-color-accent-hover)); }
.jx-industry__gathers { grid-template-columns: 1fr 1fr; margin-top: 0.85rem; }
.jx-industry__gathers li::before { background: var(--ind-soft, #e7f3ec); }
.jx-industry__gathers li::after { background: var(--ind, var(--tg-color-success)); }
.jx-industry__cta { margin-top: 1.6rem; }
.jx-industry__desc { margin: 0; color: var(--tg-color-text-soft); max-width: 42rem; line-height: 1.6; }
/* Homepage rewrite: "Live today" badge on the primary (Trades) workflow panel. */
.jx-industry__badge { display: inline-block; margin: 0 0 0.85rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--tg-color-accent-soft); color: var(--tg-color-accent-hover); font-size: var(--tg-font-size-xs); font-weight: 800; letter-spacing: var(--tg-letter-label); text-transform: uppercase; }
/* Strategic motion: on each tab switch the shown panel slides in and its rows
stagger; the accent bar carries a slow one-pass sheen. */
.jx-industry__panel:not([hidden]) { animation: jxIndPanel .5s cubic-bezier(.2,.7,.2,1) both; }
.jx-industry__panel:not([hidden]) .jx-industry__gathers li { animation: jxIndItem .5s cubic-bezier(.2,.7,.2,1) both; }
.jx-industry__gathers li:nth-child(1) { animation-delay: .06s; }
.jx-industry__gathers li:nth-child(2) { animation-delay: .11s; }
.jx-industry__gathers li:nth-child(3) { animation-delay: .16s; }
.jx-industry__gathers li:nth-child(4) { animation-delay: .21s; }
.jx-industry__gathers li:nth-child(5) { animation-delay: .26s; }
.jx-industry__gathers li:nth-child(6) { animation-delay: .31s; }
.jx-industry__gathers li:nth-child(7) { animation-delay: .36s; }
.jx-industry__gathers li:nth-child(8) { animation-delay: .41s; }
.jx-industry__bar::after {
content: ""; position: absolute; inset: 0; transform: translateX(-120%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
animation: jxIndSheen 4.5s ease-in-out 0.5s infinite;
}
@keyframes jxIndPanel { from { opacity: 0; transform: translateY(12px) scale(0.992); } to { opacity: 1; transform: none; } }
@keyframes jxIndItem { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes jxIndSheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
.jx-industry__tab, .jx-industry__tab-icon,
.jx-industry__panel:not([hidden]),
.jx-industry__panel:not([hidden]) .jx-industry__gathers li,
.jx-industry__bar::after { animation: none !important; transition: none !important; }
}
@media (max-width: 760px) {
.jx-industry { grid-template-columns: 1fr; gap: 1.25rem; }
.jx-industry__tabs { flex-direction: row; overflow-x: auto; padding-bottom: 0.35rem; scrollbar-width: none; }
.jx-industry__tabs::-webkit-scrollbar { display: none; }
.jx-industry__tab { flex: 0 0 auto; white-space: nowrap; min-height: 2.85rem; }
.jx-industry__tab-icon { display: none; }
.jx-industry__gathers { grid-template-columns: 1fr; }
}
/* ============================================================
Industry Workflows, "elite console". A dark, premium band
that reframes the selector as an enterprise capture-spec
console; each industry themes its rail + panel in its own
accent via the existing --ind* vars. Styling only: it reuses
the data-jx-tabs markup, JS, roles, and reduced-motion guards.
============================================================ */
/* Dark band + brand glow. Overrides layer over the SIGNAL terminal styling
(which de-boxes the panel and forces colors with !important), so the
conflicting rules below carry !important to win on dark. */
.tg-jx .jx-console { position: relative; overflow: hidden; background: #090c12; }
.tg-jx .jx-console::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(130% 90% at 50% -20%, rgba(233,77,0,0.13), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,0.06), transparent 5%);
}
.tg-jx .jx-console > .tg-container { position: relative; z-index: 1; }
.tg-jx .jx-console .tg-eyebrow { color: #ff8a4d; }
.tg-jx .jx-console .tg-heading { color: #f5f8fc; }
.tg-jx .jx-console .tg-lead { color: #a7b3c3; }
/* selector rail: inactive */
.tg-jx .jx-console .jx-industry__tab {
background: #10161f; border-color: #212c3a; color: #c8d2df;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.tg-jx .jx-console .jx-industry__tab-icon {
background: rgba(255,255,255,0.05) !important; color: var(--ind-lite, #ff8a4d) !important; border-color: #2a3444;
}
.tg-jx .jx-console .jx-industry__tab-icon::after { color: #8b98ab; }
.tg-jx .jx-console .jx-industry__tab:hover { background: #141d29; border-color: var(--ind, #35435a); }
/* selector rail: active (per-industry accent) */
.tg-jx .jx-console .jx-industry__tab[aria-selected="true"] {
background: linear-gradient(180deg, #182233 0%, #111a27 100%) !important;
border-color: var(--ind, var(--tg-color-accent)) !important;
color: #fff !important;
box-shadow: inset 3px 0 0 var(--ind, var(--tg-color-accent)), 0 16px 34px -20px var(--ind-glow, rgba(233,77,0,0.5)) !important;
}
.tg-jx .jx-console .jx-industry__tab[aria-selected="true"] .jx-industry__tab-icon {
background: var(--ind, var(--tg-color-accent)) !important; color: #fff !important; border-color: var(--ind, var(--tg-color-accent)) !important;
}
.tg-jx .jx-console .jx-industry__tab[aria-selected="true"] .jx-industry__tab-icon::after { color: #fff; }
/* de-boxed capture-spec readout (works with the SIGNAL terminal layout);
the left rail picks up the active industry accent */
.tg-jx .jx-console .jx-industry__panel { border-left: 2px solid var(--ind, #273241) !important; }
.tg-jx .jx-console .jx-industry__panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.35rem; }
.tg-jx .jx-console .jx-industry__title { margin: 0; color: #f5f8fc; }
.tg-jx .jx-console .jx-industry__panel .jx-eyebrow-sm { color: #8b98ab !important; }
.tg-jx .jx-console .jx-industry__gathers li { color: #e2e9f1; }
.tg-jx .jx-console .jx-industry__gathers li::before { background: rgba(255,255,255,0.07); }
/* status pill on dark (Trades "Live today") */
.tg-jx .jx-console .jx-industry__badge {
margin: 0; background: var(--ind-glow, rgba(233,77,0,0.16)); color: var(--ind-lite, #ff8a4d);
box-shadow: inset 0 0 0 1px var(--ind, var(--tg-color-accent));
}
/* CTA reads on dark: per-industry accent outline that fills on hover */
.tg-jx .jx-console .jx-industry__cta.tg-button--secondary {
background: transparent; border-color: var(--ind, var(--tg-color-accent)); color: #fff;
}
.tg-jx .jx-console .jx-industry__cta.tg-button--secondary:hover {
background: var(--ind, var(--tg-color-accent)); border-color: var(--ind, var(--tg-color-accent)); color: #fff;
}
/* ---------- 7. Accountability (elevated connected lifecycle) ---------- */
/* Muted grey reaches only 4.40:1 on the surface tint, just under AA for text
this size; #646d7a keeps the same character at 4.88:1. */
.jx-acct__caption { text-align: center; margin: clamp(1.75rem,3.5vw,2.5rem) auto 0; max-width: 40rem; color: #646d7a; font-size: var(--tg-font-size-sm); }
/* Marks the lifecycle below as an illustration, matching the hero's chip. */
.jx-acct__tag {
display: inline-block; margin-right: .5rem; padding: .18rem .5rem;
border: 1px solid rgba(23, 18, 12, 0.14); border-radius: 999px;
font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: #646d7a; vertical-align: middle;
}
/* Final-CTA reassurance line sits just above the Activate button (matches the industry pages). */
.jx-finalcta__note { text-align: center; margin: 0 auto 0.9rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); font-weight: 650; }
.jx-lifecycle {
list-style: none; margin: clamp(1.5rem,3vw,2.25rem) 0 0; padding: 2.75rem 0 0; position: relative;
display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.6rem,1.2vw,1.1rem);
}
/* connector rail behind the nodes, progressing toward the accent outcome */
.jx-lifecycle::before {
content: ""; position: absolute; top: 1rem; left: 10%; right: 10%; height: 2px;
background: linear-gradient(90deg, var(--tg-color-border-strong), var(--tg-color-accent));
transform-origin: left center;
}
.jx-life { position: relative; border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-md); background: #fff; padding: 1rem 1.05rem; box-shadow: var(--tg-shadow-sm); }
.jx-life__node {
position: absolute; top: -2.75rem; left: 50%; transform: translateX(-50%);
width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; z-index: 1;
background: #fff; border: 2px solid var(--tg-color-accent); color: var(--tg-color-accent);
font-size: 0.8rem; font-weight: 800;
}
.jx-life__node--done { background: var(--tg-color-accent); border-color: var(--tg-color-accent); color: #fff; }
.jx-life__stage { display: block; margin-bottom: 0.35rem; font-size: var(--tg-font-size-xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tg-color-text-muted); }
.jx-life__val { display: block; font-weight: 700; font-size: var(--tg-font-size-sm); line-height: 1.35; }
.jx-life--outcome { border-color: var(--tg-color-accent); background: var(--tg-color-accent-soft); }
/* accent-hover is 4.47:1 on the soft accent fill — a hair under AA at this
size. #c33e00 is the same hue at 4.71:1. */
.jx-life--outcome .jx-life__stage { color: #c33e00; }
/* "What TextGopher shows" — grouped into a clean supporting panel */
.jx-acct__shows { max-width: 52rem; margin: clamp(2.5rem,4vw,3.25rem) auto 0; padding: clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.25rem); border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-lg); background: #fff; text-align: center; }
.jx-acct__shows-title { margin: 0 0 1.35rem; font-size: var(--tg-font-size-sm); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tg-color-text-muted); }
.jx-acct__list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.8rem 1.5rem; justify-items: start; text-align: left; margin: 0; }
@media (max-width: 860px) {
.jx-lifecycle { grid-template-columns: 1fr; gap: 0.65rem; padding: 0; }
.jx-lifecycle::before { display: none; }
.jx-life { padding-left: 3.5rem; }
.jx-life__node { top: 50%; left: 0.85rem; transform: translateY(-50%); }
.jx-acct__list { grid-template-columns: 1fr; justify-items: start; max-width: 22rem; margin-inline: auto; }
}
/* ---------- 8. Activation and Pricing Preview ---------- */
.jx-plans { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2.5vw,1.75rem); max-width: 58rem; margin-inline: auto; align-items: stretch; }
.jx-plan { border: 1px solid var(--tg-color-border); border-radius: var(--tg-radius-lg); background: #fff; padding: clamp(1.5rem,3vw,2.1rem); display: flex; flex-direction: column; }
.jx-plan--primary { border-color: var(--tg-color-accent); box-shadow: 0 2px 4px rgba(233,77,0,0.06), 0 28px 50px -34px rgba(233,77,0,0.5); }
.jx-plan__badge { display: inline-block; align-self: flex-start; margin-bottom: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--tg-color-accent-soft); color: var(--tg-color-accent); font-size: var(--tg-font-size-xs); font-weight: 800; }
.jx-plan__name { margin: 0 0 0.4rem; font-weight: 800; font-size: 1.15rem; }
.jx-plan--solo .jx-plan__name { font-size: 1rem; font-weight: 700; }
.jx-plan__price { margin: 0 0 0.5rem; font-size: clamp(1.9rem,3vw,2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.jx-plan__price span { font-size: 0.8rem; font-weight: 650; color: var(--tg-color-text-muted); letter-spacing: 0; }
.jx-plan__blurb { margin: 0 0 1.1rem; color: var(--tg-color-text-soft); }
.jx-plan .jx-checks { margin-bottom: 1.5rem; }
.jx-plan .tg-button { margin-top: auto; }
.jx-plan__fine { margin: 0.85rem 0 0; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); line-height: 1.5; }
@media (max-width: 720px) { .jx-plans { grid-template-columns: 1fr; } }
/* Simplified single-focus activation card (first-visitor clarity) */
.jx-activate { max-width: 34rem; margin-inline: auto; border: 1px solid var(--tg-color-accent); border-radius: var(--tg-radius-lg); background: #fff; padding: clamp(1.75rem,3vw,2.5rem); box-shadow: 0 2px 4px rgba(233,77,0,0.06), 0 28px 50px -34px rgba(233,77,0,0.5); text-align: center; }
.jx-activate__top { margin-bottom: 1.35rem; }
.jx-activate__price { margin: 0; font-size: clamp(2.4rem,5vw,3rem); font-weight: 800; letter-spacing: -0.02em; }
.jx-activate__price span { font-size: 0.9rem; font-weight: 650; color: var(--tg-color-text-muted); letter-spacing: 0; }
.jx-activate__promise { margin: 0.4rem 0 0; color: var(--tg-color-text-soft); font-weight: 650; }
.jx-activate__list { text-align: left; max-width: 23rem; margin: 0 auto 1.75rem; }
.jx-activate__next { margin: 1.15rem 0 0; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); line-height: 1.55; }
.jx-activate__next a { color: var(--tg-color-accent); font-weight: 700; }
/* ---------- 9. Final CTA (orange mascot banner) ---------- */
.jx-final { padding-block: clamp(2rem,4vw,3.5rem); }
/* Gradient darkened so white body text meets WCAG AA (>=4.5:1) at every stop. */
.jx-final__inner { position: relative; overflow: hidden; border-radius: clamp(1.5rem,3vw,2rem); background: linear-gradient(135deg, #c8420a 0%, #a63200 100%); color: #fff; padding: clamp(2rem,4vw,3.25rem) clamp(2rem,4vw,3.75rem); display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(1.5rem,3.5vw,3.25rem); align-items: center; box-shadow: 0 30px 60px -32px rgba(166,50,0,0.65); }
.jx-final :focus-visible { outline-color: #fff; }
.jx-final__inner::before { content: ""; position: absolute; right: -8%; top: -40%; width: 55%; height: 180%; background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 62%); pointer-events: none; }
/* Compact "Gus texting" composition: a small tilted phone + the canonical mascot peeking */
.jx-final__scene { position: relative; z-index: 1; width: clamp(132px, 15vw, 168px); flex: 0 0 auto; }
.jx-final__phone { position: relative; width: 100%; border-radius: 1.25rem; background: #fff; padding: 0.55rem; transform: rotate(-5deg); box-shadow: 0 2px 6px rgba(0,0,0,0.14), 0 22px 40px -20px rgba(0,0,0,0.55); }
.jx-final__thread { display: grid; gap: 0.3rem; padding: 0.3rem; }
.jx-fbubble { margin: 0; font-size: 0.64rem; line-height: 1.3; padding: 0.32rem 0.5rem; border-radius: 0.7rem; max-width: 90%; }
.jx-fbubble--in { justify-self: start; background: #f1f2f4; color: #15171b; border-bottom-left-radius: 0.2rem; }
.jx-fbubble--out { justify-self: end; background: var(--tg-color-accent-soft); color: #7a2e08; border-bottom-right-radius: 0.2rem; }
.jx-final__peek.jx-medallion {
position: absolute; z-index: 2; right: -1.4rem; bottom: -1.25rem;
width: clamp(72px, 8.5vw, 98px); height: clamp(72px, 8.5vw, 98px);
background: radial-gradient(120% 120% at 50% 32%, #ffffff 0%, #ffffff 60%, #ffe6d6 100%);
box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 16px 26px -12px rgba(0,0,0,0.45);
}
.jx-final__peek.jx-medallion > img { width: 70%; filter: drop-shadow(0 4px 7px rgba(0,0,0,0.2)); }
.jx-final__copy { position: relative; z-index: 1; }
.jx-final__title { margin: 0 0 0.85rem; font-size: clamp(1.55rem,3.4vw,2.55rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; max-width: 22ch; }
.jx-final__lead { margin: 0 0 1.5rem; font-size: clamp(1rem,1.6vw,1.15rem); color: rgba(255,255,255,0.94); max-width: 44rem; }
.jx-final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.jx-final .jx-btn-onorange { background: #fff; color: var(--tg-color-accent-hover); box-shadow: 0 1px 2px rgba(0,0,0,0.14), 0 2px 6px -1px rgba(0,0,0,0.16); }
.jx-final .jx-btn-onorange:hover { background: #fff; color: var(--tg-color-accent-hover); transform: translateY(-1px); }
.jx-final__seelink { color: #fff; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.jx-final__seelink:hover { color: #fff; opacity: 0.85; }
.jx-final__terms { margin: 0 0 1.6rem; max-width: 42rem; font-size: var(--tg-font-size-sm); line-height: 1.7; color: rgba(255,255,255,0.9); }
.jx-final__terms--soft { margin-top: 0.35rem; color: rgba(255,255,255,0.86); }
/* WCAG AA: deepen small accent-on-light text to >=4.5:1 (brand accent #e94d00
is only 3.8:1 as small text). Buttons/fills keep the brighter accent. */
.tg-jx .jx-proof__opp-label,
.tg-jx .jx-proof__next,
.tg-jx .jx-overlap__row--best .jx-overlap__who,
.tg-jx .jx-industry__tab[aria-selected="true"],
.tg-jx .jx-plan__badge,
.tg-jx .jx-activate__next a,
.tg-jx .jx-footer__col a:hover { color: var(--tg-color-accent-hover); }
@media (max-width: 700px) {
.jx-final__inner { grid-template-columns: 1fr; padding: clamp(2rem,6vw,2.5rem); }
.jx-final__scene { width: 128px; }
}
/* ---------- Footer ---------- */
.jx-footer { border-top: 1px solid var(--tg-color-border); background: var(--tg-color-surface); padding-block: clamp(2.5rem,4vw,3.5rem) 1.75rem; }
.jx-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: clamp(1.5rem,3vw,2.5rem); }
.jx-footer__brand .tg-brand { margin-bottom: 0.75rem; }
/* #646d7a rather than text-muted: on the footer's surface tint the muted token
lands at 4.40:1, just under AA for text at these sizes. */
.jx-footer__tag { margin: 0; color: #646d7a; font-size: var(--tg-font-size-sm); max-width: 20rem; }
.jx-footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.jx-footer__h { margin: 0 0 0.35rem; font-size: var(--tg-font-size-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #646d7a; }
/* padding-block lifts these from 22px to 26px tall so each link clears the
24x24 minimum target size; they are standalone nav links, not inline prose,
so the inline exception does not apply. */
.jx-footer__col a { color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); padding-block: 2px; }
.jx-footer__col a:hover { color: var(--tg-color-accent); }
/* Footer "More industries" disclosure — expands the newer verticals in place. */
.jx-footer__more { margin: 0; }
.jx-footer__more > summary { list-style: none; cursor: pointer; color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); font-weight: 600; padding-block: 2px; display: inline-flex; align-items: center; gap: 0.34rem; }
.jx-footer__more > summary::-webkit-details-marker { display: none; }
.jx-footer__more > summary::after { content: "\25BE"; font-size: 0.68em; transition: transform 0.15s ease; }
.jx-footer__more[open] > summary::after { transform: rotate(180deg); }
.jx-footer__more > summary:hover { color: var(--tg-color-accent); }
.jx-footer__more[open] > summary { margin-bottom: 0.6rem; }
.jx-footer__more__list { display: flex; flex-direction: column; gap: 0.6rem; }
/* text-muted measures 4.40:1 on the footer's surface tint — just under AA for
the disclaimer and the legal meta line. #646d7a keeps the tone at 4.88:1. */
.jx-footer__legal { margin-top: clamp(2rem,4vw,3rem); padding-top: 1.5rem; border-top: 1px solid var(--tg-color-border); color: #646d7a; font-size: var(--tg-font-size-sm); }
.jx-footer__legal p { margin: 0; }
.jx-footer__legal em { font-style: normal; color: var(--tg-color-accent); }
.jx-footer__legal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
.jx-footer__legal-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.35rem; }
/* Footer brand CTA */
.jx-footer__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1.15rem; }
.tg-jx .jx-footer__signin { color: var(--tg-color-text-soft); font-weight: 600; font-size: var(--tg-font-size-sm); }
.tg-jx .jx-footer__signin:hover { color: var(--tg-color-accent-hover); }
/* Same trap the buttons hit: `body.tg a { color: inherit; text-decoration: none }`
(0,1,2) was beating a lone `.jx-footer__legal-link` (0,1,0), so the CCPA
opt-out control rendered as plain muted text — neither accent-coloured nor
underlined, i.e. not obviously a link. Matching body.tg (0,2,1) wins.
accent-hover measures 4.64:1 on the footer surface. padding-block clears the
24px minimum target size. */
body.tg .jx-footer__legal-link { color: var(--tg-color-accent-hover); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; padding-block: 2px; }
@media (max-width: 1024px) {
.jx-footer__grid { grid-template-columns: repeat(3, 1fr); }
.jx-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.jx-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* =====================================================================
JUNCTION REFINEMENT — enterprise, architectural, branded.
Scoped to .tg-jx. Unifies type hierarchy, spacing rhythm, hairline
borders, and a crisp tiered shadow system (no diffuse glows).
Overrides win by specificity (.tg-jx X); /trades is untouched.
===================================================================== */
.tg-jx {
--jx-sh-1: 0 1px 2px rgba(21,23,27,0.05);
--jx-sh-2: 0 1px 2px rgba(21,23,27,0.05), 0 14px 28px -16px rgba(21,23,27,0.20);
--jx-sh-3: 0 2px 6px rgba(21,23,27,0.06), 0 16px 30px -20px rgba(21,23,27,0.26);
--jx-sh-accent: 0 2px 6px rgba(21,23,27,0.06), 0 14px 26px -18px rgba(233,77,0,0.26);
--jx-hairline: #ece7e1;
}
/* ---- Typographic hierarchy: confident, precise, less theatrical ---- */
.tg-jx .tg-display { font-size: clamp(2.4rem, 4.6vw, 4rem); letter-spacing: -0.04em; line-height: 1.04; font-weight: 800; }
.tg-jx .tg-heading { font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.08; font-weight: 600; }
.tg-jx .tg-eyebrow { font-size: var(--tg-font-size-xs); letter-spacing: 0.15em; font-weight: 800; margin-bottom: 0.9rem; }
.tg-jx .tg-lead { line-height: 1.62; color: var(--tg-color-text-soft); }
.tg-jx .jx-section-head .tg-heading { margin-bottom: 0; }
.tg-jx .jx-section-head .tg-lead { margin-top: 0.9rem; }
.tg-jx .jx-kicker { letter-spacing: -0.01em; margin-top: 1.75rem; }
/* Extra clearance so card shadows above never touch the closing line. */
.tg-jx .jx-closing { letter-spacing: -0.015em; margin-top: clamp(3rem, 5vw, 4.25rem); }
/* Give elevated grids breathing room above trailing text. */
.tg-jx .jx-compare, .tg-jx .jx-lifecycle { margin-bottom: 0.5rem; }
/* ---- Spacing rhythm: even architectural cadence ---- */
.tg-jx .jx-section { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.tg-jx .jx-section-head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
/* ---- Unified surfaces: hairline borders + tiered, crisp depth ---- */
.tg-jx .jx-proof,
.tg-jx .jx-phone { border-color: var(--jx-hairline); box-shadow: var(--jx-sh-3); }
.tg-jx .jx-industry__panel,
.tg-jx .jx-overlap { border-color: var(--jx-hairline); box-shadow: var(--jx-sh-2); }
.tg-jx .jx-life,
.tg-jx .jx-industry__tab,
.tg-jx .jx-compare__card,
.tg-jx .jx-card { border-color: var(--jx-hairline); box-shadow: var(--jx-sh-1); }
.tg-jx .jx-compare__card--basic { box-shadow: none; }
.tg-jx .jx-activate,
.tg-jx .jx-compare__card--tg { box-shadow: var(--jx-sh-accent); }
/* ---- Branded architectural motif: a thin accent crown on the primary card ---- */
.tg-jx .jx-activate { position: relative; overflow: hidden; }
.tg-jx .jx-activate::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--tg-color-accent), #ff7a33); }
/* ---- Nav: crisper enterprise elevation on scroll ---- */
.tg-jx .jx-nav[data-scrolled="true"] { box-shadow: 0 1px 0 var(--jx-hairline), 0 10px 30px -22px rgba(21,23,27,0.4); }
/* Logo lockup: tighten mark-to-wordmark spacing by ~25% (0.75rem -> 0.56rem). */
.tg-jx .tg-brand { gap: 0.42rem; }
/* =====================================================================
PRICING PAGE (/pricing) — enterprise tiers, referral, details.
Scoped under .tg-jx via the jx- component classes.
===================================================================== */
.jx-pricing-hero { padding-block: clamp(2.75rem,6vw,5rem) clamp(1rem,2vw,2rem); }
.jx-textlink { color: var(--tg-color-accent-hover); font-weight: 700; }
/* Tier card base */
.jx-tier { border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-lg); background: #fff; box-shadow: var(--jx-sh-1); }
.jx-tier__name { margin: 0 0 0.2rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.jx-tier__for { margin: 0 0 0.85rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); }
.jx-tier__price { margin: 0 0 0.15rem; font-size: clamp(2rem,3.5vw,2.5rem); font-weight: 800; letter-spacing: -0.02em; }
.jx-tier__price span { font-size: 0.8rem; font-weight: 650; color: var(--tg-color-text-muted); letter-spacing: 0; }
.jx-tier__meter { margin: 0 0 1.1rem; font-weight: 700; color: var(--tg-color-accent-hover); font-size: var(--tg-font-size-sm); }
.jx-tier__blurb { margin: 0 0 1.25rem; color: var(--tg-color-text-soft); }
.jx-tier__list { margin: 0 0 1.25rem; }
.jx-tier__usage { margin: 0 0 1.1rem; padding: 0.6rem 0.8rem; border-radius: var(--tg-radius-sm); background: var(--tg-color-surface); border: 1px solid var(--jx-hairline, var(--tg-color-border)); font-size: var(--tg-font-size-sm); font-weight: 650; }
.jx-tier__note, .jx-tier__fine { color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); line-height: 1.5; }
.jx-tier__note { margin: 0 0 1.4rem; }
.jx-tier__fine { margin: 0 0 1.1rem; }
.jx-tier__badge { display: inline-block; margin-bottom: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--tg-color-accent-soft); color: var(--tg-color-accent-hover); font-size: var(--tg-font-size-xs); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
/* Activation entry card: two-column, prominent, accent crown */
.jx-tier--activation { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: clamp(1.75rem,3vw,3.5rem); max-width: 60rem; margin-inline: auto; padding: clamp(2rem,3.2vw,2.75rem); box-shadow: var(--jx-sh-accent); border-color: var(--tg-color-accent); }
.jx-tier--activation::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--tg-color-accent), #ff7a33); }
/* Top-align both columns; nudge the checklist down so its first item lines up
with the plan title rather than the small badge above it. */
.jx-tier--activation .jx-tier__intro { align-self: start; }
.jx-tier--activation .jx-tier__list { align-self: start; margin: 0; padding-top: 2.1rem; }
.jx-tier--activation .jx-tier__list li + li { margin-top: 0.15rem; }
.jx-tier--activation .jx-tier__blurb { margin-bottom: 1.6rem; max-width: 42ch; }
.jx-tier--activation .tg-button { margin-top: 0.25rem; }
.jx-tier--activation .jx-tier__note { margin-bottom: 1.4rem; max-width: 42ch; }
@media (max-width: 760px) {
.jx-tier--activation { grid-template-columns: 1fr; }
.jx-tier--activation .jx-tier__list { padding-top: 0; }
}
/* Monthly plan grid */
.jx-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.5rem); align-items: stretch; }
.jx-tier--sm { display: flex; flex-direction: column; padding: clamp(1.5rem,2.5vw,2rem); }
.jx-tier--sm .jx-tier__list { flex: 1 0 auto; }
.jx-tier--sm .tg-button { margin-top: 0.25rem; }
.jx-tier--featured { position: relative; border-color: var(--tg-color-accent); box-shadow: var(--jx-sh-accent); }
.jx-tier__flag { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--tg-color-accent); color: #fff; font-size: var(--tg-font-size-xs); font-weight: 800; white-space: nowrap; }
@media (max-width: 900px) { .jx-tier-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
/* Referral */
.jx-referral__inner { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: clamp(2rem,4vw,3.5rem); align-items: center; }
.jx-refstages { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.jx-refstage { display: grid; gap: 0.35rem; padding: 1.25rem 1.35rem; border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-lg); background: #fff; box-shadow: var(--jx-sh-1); }
.jx-refstage__k { font-weight: 800; font-size: 1.1rem; }
.jx-refstage__v { color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); line-height: 1.5; }
.jx-refstage--lock { border-color: var(--tg-color-accent); box-shadow: var(--jx-sh-accent); }
.jx-refstage--lock .jx-refstage__k { color: var(--tg-color-accent-hover); }
@media (max-width: 860px) { .jx-referral__inner { grid-template-columns: 1fr; } }
/* Trades page on brand: with .tg-jx active, map the crisp shadow + hairline
system onto the shared .tg-* card components so /trades matches /. */
.tg-jx .tg-card,
.tg-jx .tg-authority-card { border-color: var(--jx-hairline); box-shadow: var(--jx-sh-1); }
.tg-jx .tg-opportunity-card { border-color: var(--jx-hairline); box-shadow: var(--jx-sh-3); }
.tg-jx .tg-section-heading .tg-heading { letter-spacing: -0.03em; }
/* ============================================================
Trades page — "which trades" reassurance chips
============================================================ */
.jx-trades-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem auto 0; max-width: 54rem; }
.jx-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: 999px; background: #fff; box-shadow: var(--jx-sh-1); font-weight: 650; font-size: var(--tg-font-size-sm); color: var(--tg-color-text); }
.jx-chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--tg-color-accent); flex: none; }
.jx-trades-catch { margin: 1.5rem auto 0; max-width: 40rem; text-align: center; color: var(--tg-color-text-soft); }
.jx-trades-catch strong { color: var(--tg-color-text); font-weight: 700; }
/* ============================================================
Trades page — 3 scrollable authentic samples
============================================================ */
.jx-samples { margin-top: clamp(2rem,4vw,3rem); }
.jx-samples__track { display: flex; gap: clamp(1rem,2.5vw,1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0.5rem clamp(1rem,4vw,3rem) 1.5rem; scrollbar-width: thin; scroll-padding-inline: clamp(1rem,4vw,3rem); }
.jx-samples__item { flex: 0 0 min(88vw, 30rem); scroll-snap-align: center; }
.jx-samples__item > .jx-proof { height: 100%; }
.jx-samples__hint { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.25rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); font-weight: 650; }
.jx-samples__hint svg { animation: jx-nudge 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .jx-samples__hint svg { animation: none; } }
@keyframes jx-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
/* Center the row when all cards fit without scrolling (wide desktop) */
@media (min-width: 1120px) { .jx-samples__track { justify-content: center; flex-wrap: nowrap; } }
/* ============================================================
Trades "See it work" — 3 static proof cards, each beside its description.
Even vertical rhythm; description left, opportunity card right.
============================================================ */
.jx-see__mascot {
display: grid; place-items: center; margin: 0 auto 1.35rem;
width: 72px; height: 72px; border-radius: 50%;
background: radial-gradient(120% 120% at 50% 30%, #ffffff 0%, var(--tg-color-surface-strong) 82%);
border: 1px solid var(--jx-hairline);
box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(21,23,27,0.06), 0 18px 30px -20px rgba(21,23,27,0.38);
}
.jx-see__mascot > img { width: 62%; height: auto; filter: drop-shadow(0 4px 7px rgba(21,23,27,0.16)); }
.jx-see__rows { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: clamp(3.5rem, 6vw, 5.5rem); max-width: 68rem; margin-inline: auto; }
.jx-see__row {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
/* Card on the left, description copy on the right — uniform across all samples.
Explicit single-row placement keeps both cells on one grid row regardless of
DOM order (text is first in the DOM for description-first reading order),
so every sample is the same height and the gaps between them stay equal. */
.jx-see__card { grid-column: 1; grid-row: 1; width: 100%; max-width: 33rem; justify-self: start; }
.jx-see__text { grid-column: 2; grid-row: 1; }
.jx-see__eyebrow { color: var(--tg-color-accent-hover); margin: 0; }
.jx-see__title { font-size: clamp(1.4rem, 2.4vw, 1.95rem); letter-spacing: -0.025em; line-height: 1.18; margin: 0.65rem 0 0.95rem; max-width: 20ch; }
.jx-see__copy { color: var(--tg-color-text-soft); max-width: 40ch; line-height: 1.7; margin: 0; }
@media (max-width: 860px) {
.jx-see__rows { gap: clamp(2.75rem, 9vw, 4rem); max-width: none; }
.jx-see__row { grid-template-columns: 1fr; gap: 1.6rem; }
/* Single column: reset placement so each sample stacks description then card. */
.jx-see__card, .jx-see__text { grid-column: auto; grid-row: auto; }
.jx-see__card { max-width: 34rem; }
.jx-see__title { max-width: none; }
.jx-see__copy { max-width: none; }
}
/* ============================================================
Industry Relevance — per-industry color identity.
Distinct, high-end accents; overrides the .tg-jx unified
border/shadow so each panel + active tab carries its color.
============================================================ */
.jx-industry [data-ind="trades"] { --ind:#e94d00; --ind-deep:#c23f00; --ind-lite:#ff8a3d; --ind-soft:#fff1e8; --ind-glow:rgba(233,77,0,0.10); }
.jx-industry [data-ind="property"] { --ind:#2563eb; --ind-deep:#1d4ed8; --ind-lite:#6ea0ff; --ind-soft:#eaf1ff; --ind-glow:rgba(37,99,235,0.10); }
.jx-industry [data-ind="automotive"] { --ind:#dc2626; --ind-deep:#b91c1c; --ind-lite:#f87171; --ind-soft:#fdeaea; --ind-glow:rgba(220,38,38,0.10); }
.jx-industry [data-ind="realestate"] { --ind:#0d9488; --ind-deep:#0f766e; --ind-lite:#4fd1c5; --ind-soft:#e2f6f3; --ind-glow:rgba(13,148,136,0.10); }
.jx-industry [data-ind="legal"] { --ind:#7c3aed; --ind-deep:#6d28d9; --ind-lite:#a97cf5; --ind-soft:#f2ecfe; --ind-glow:rgba(124,58,237,0.10); }
.jx-industry [data-ind="homeservices"] { --ind:#65a30d; --ind-deep:#3f6212; --ind-lite:#a3e635; --ind-soft:#f3fbdd; --ind-glow:rgba(101,163,13,0.10); }
.jx-industry [data-ind="personal"] { --ind:#ec4899; --ind-deep:#be185d; --ind-lite:#f9a8d4; --ind-soft:#fdeef6; --ind-glow:rgba(236,72,153,0.10); }
.jx-industry [data-ind="mobile"] { --ind:#4f46e5; --ind-deep:#4338ca; --ind-lite:#818cf8; --ind-soft:#eef0fe; --ind-glow:rgba(79,70,229,0.10); }
.jx-industry [data-ind="events"] { --ind:#9a1fd0; --ind-deep:#761a9e; --ind-lite:#cf9ef0; --ind-soft:#f5ecfb; --ind-glow:rgba(154,31,208,0.10); }
.jx-industry [data-ind="seasonal"] { --ind:#0ea5e9; --ind-deep:#0369a1; --ind-lite:#7dd3fc; --ind-soft:#e6f5fe; --ind-glow:rgba(14,165,233,0.10); }
.jx-industry [data-ind="veterinary"] { --ind:#ca8a04; --ind-deep:#a16207; --ind-lite:#eab308; --ind-soft:#fbf5e3; --ind-glow:rgba(202,138,4,0.10); }
.jx-industry [data-ind="other"] { --ind:#64748b; --ind-deep:#475569; --ind-lite:#94a3b8; --ind-soft:#f1f5f9; --ind-glow:rgba(100,116,139,0.10); }
.tg-jx .jx-industry .jx-industry__panel {
border-color: var(--tg-color-border);
box-shadow: none;
}
.tg-jx .jx-industry .jx-industry__tab,
.tg-jx .jx-industry .jx-industry__tab[aria-selected="true"] { box-shadow: none; }
.tg-jx .jx-industry .jx-industry__tab[aria-selected="true"] {
color: var(--ind-deep);
border-color: var(--ind);
}
.tg-jx .jx-industry .jx-industry__cta { border-color: var(--ind); color: var(--ind-deep); }
.tg-jx .jx-industry .jx-industry__cta:hover { background: var(--ind-soft); border-color: var(--ind); color: var(--ind-deep); }
/* ============================================================
Accountability — outcome emphasis + entrance motion.
============================================================ */
.tg-jx .jx-lifecycle .jx-life--outcome { border-color: var(--tg-color-accent); }
.jx-closing em { font-style: normal; font-weight: 800; color: var(--tg-color-accent-hover); }
@media (prefers-reduced-motion: no-preference) {
/* Cards + rail draw in when the section reveals into view. */
.jx-accountability .jx-life { opacity: 0; transform: translateY(12px); }
.jx-accountability .jx-lifecycle::before { transform: scaleX(0); }
.jx-accountability.revealed .jx-life { animation: jxLifeIn .5s cubic-bezier(.2,.7,.2,1) forwards; }
.jx-accountability.revealed .jx-lifecycle::before { animation: jxRailIn .8s cubic-bezier(.4,0,.2,1) .1s forwards; }
.jx-accountability.revealed .jx-life:nth-child(1) { animation-delay: .04s; }
.jx-accountability.revealed .jx-life:nth-child(2) { animation-delay: .14s; }
.jx-accountability.revealed .jx-life:nth-child(3) { animation-delay: .24s; }
.jx-accountability.revealed .jx-life:nth-child(4) { animation-delay: .34s; }
.jx-accountability.revealed .jx-life:nth-child(5) { animation-delay: .44s; }
}
@keyframes jxLifeIn { to { opacity: 1; transform: none; } }
@keyframes jxRailIn { to { transform: scaleX(1); } }
/* ============================================================
The Difference — before -> after comparison (was two lists).
One row per dimension: the basic shortcoming transforms into
the TextGopher upgrade. Cuts the cross-referencing load.
============================================================ */
.jx-versus { max-width: 54rem; margin-inline: auto; border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-lg); background: #fff; overflow: hidden; box-shadow: var(--tg-shadow-sm); }
.jx-versus__head {
display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center;
gap: clamp(0.85rem,2vw,1.75rem); padding: 0.9rem clamp(1.25rem,3vw,2rem);
background: var(--tg-color-surface); border-bottom: 1px solid var(--jx-hairline, var(--tg-color-border));
}
.jx-versus__col { font-weight: 800; font-size: var(--tg-font-size-sm); }
.jx-versus__col--basic { grid-column: 1; color: var(--tg-color-text-muted); }
.jx-versus__col--tg { grid-column: 3; color: var(--tg-color-text); }
.jx-versus__col--tg em { font-style: normal; color: var(--tg-color-accent); }
.jx-versus__col--tg sup { font-size: 0.55em; vertical-align: super; }
.jx-versus__rows { list-style: none; margin: 0; padding: 0; }
.jx-versus__row {
display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center;
gap: clamp(0.85rem,2vw,1.75rem); padding: 0.9rem clamp(1.25rem,3vw,2rem);
}
.jx-versus__row + .jx-versus__row { border-top: 1px solid var(--jx-hairline, var(--tg-color-border)); }
.jx-versus__from { color: var(--tg-color-text-muted); font-weight: 500; }
.jx-versus__arrow { color: var(--tg-color-accent); display: grid; place-items: center; line-height: 0; }
.jx-versus__to { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 750; color: var(--tg-color-text); }
.jx-versus__check { color: var(--tg-color-success); flex: none; }
@media (max-width: 620px) {
.jx-versus__head { grid-template-columns: 1fr; padding: 0.85rem 1.25rem; }
.jx-versus__col--basic { display: none; }
.jx-versus__col--tg { grid-column: 1; }
.jx-versus__row { grid-template-columns: 1fr; justify-items: start; gap: 0.2rem; padding: 0.9rem 1.25rem; }
.jx-versus__arrow { transform: rotate(90deg); margin: 0.05rem 0; }
}
/* ============================================================
Industry landing pages — shared media system + split hero.
Media tiles are premium branded placeholders: a designed scene
renders until a real photo is dropped in. To use real footage,
add 
as the FIRST child of .tg-media (it covers
the placeholder). Organized so every industry page matches.
============================================================ */
.tg-media {
position: relative; overflow: hidden; aspect-ratio: 4 / 3;
border-radius: var(--tg-radius-lg); border: 1px solid var(--jx-hairline, var(--tg-color-border));
box-shadow: var(--jx-sh-2, var(--tg-shadow-md)); background: var(--tg-color-surface);
}
.tg-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; display: block; }
.tg-media__ph {
position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
background:
radial-gradient(130% 110% at 18% 6%, rgba(255,255,255,0.6), transparent 52%),
linear-gradient(155deg, #fff4ec 0%, #ffe6d5 48%, #ffd8c0 100%);
}
.tg-media__ph::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(rgba(21,23,27,0.05) 1px, transparent 1.6px);
background-size: 15px 15px; opacity: 0.55;
}
.tg-media__ph::after {
content: ""; position: absolute; inset: 0;
box-shadow: inset 0 -48px 64px -34px rgba(160,60,8,0.28), inset 0 44px 60px -40px rgba(255,255,255,0.65);
}
.tg-media__icon { position: relative; z-index: 1; width: clamp(3rem, 7vw, 4.75rem); height: auto; color: var(--tg-color-accent); opacity: 0.92; filter: drop-shadow(0 8px 14px rgba(160,60,8,0.22)); }
.tg-media__icon svg { width: 100%; height: 100%; }
.tg-media__cap {
position: absolute; left: 0.85rem; bottom: 0.85rem; z-index: 3;
display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.75rem;
border-radius: 999px; background: rgba(255,255,255,0.92); border: 1px solid var(--jx-hairline, var(--tg-color-border));
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
font-size: var(--tg-font-size-xs); font-weight: 750; color: var(--tg-color-text); letter-spacing: 0.01em;
}
.tg-media__cap::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 999px; background: var(--tg-color-accent); flex: none; }
/* Split hero: copy + a hero media tile */
.tg-hero--split .tg-hero__grid { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,0.94fr); gap: clamp(2rem,4vw,4rem); align-items: center; }
.tg-hero__media { aspect-ratio: 5 / 4; }
@media (max-width: 880px) {
.tg-hero--split .tg-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
.tg-hero__media { order: -1; aspect-ratio: 16 / 10; }
}
/* Media gallery strip (industry scenes) */
.tg-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.5rem); margin-top: clamp(2rem,4vw,3rem); }
.tg-media-grid .tg-media { aspect-ratio: 3 / 4; }
@media (max-width: 820px) { .tg-media-grid { grid-template-columns: 1fr 1fr; } .tg-media-grid .tg-media:nth-child(3) { display: none; } }
@media (max-width: 520px) { .tg-media-grid { grid-template-columns: 1fr; } .tg-media-grid .tg-media { aspect-ratio: 16 / 10; } .tg-media-grid .tg-media:nth-child(3) { display: block; } }
/* Section media (single wide tile beside copy) */
.tg-media--wide { aspect-ratio: 16 / 9; }
/* Industry "how it works": steps beside a media tile */
.jx-how2 { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: clamp(2rem,4vw,4rem); align-items: center; }
@media (max-width: 880px) { .jx-how2 { grid-template-columns: 1fr; gap: 2rem; } .jx-how2__media { order: -1; } }
/* ============================================================
Industry pages — section eyebrows carry each industry's link color.
(Body gets data-ind from the shared template.) AA-safe deep tones.
CTAs, product cards, and pricing stay brand orange.
============================================================ */
body[data-ind="trades"] .tg-eyebrow,
body[data-ind="trades"] .jx-see__eyebrow { color: var(--tg-color-accent-hover); }
body[data-ind="property"] .tg-eyebrow,
body[data-ind="property"] .jx-see__eyebrow { color: #1d4ed8; }
body[data-ind="automotive"] .tg-eyebrow,
body[data-ind="automotive"] .jx-see__eyebrow { color: #b91c1c; }
body[data-ind="realestate"] .tg-eyebrow,
body[data-ind="realestate"] .jx-see__eyebrow { color: #0c6b60; }
body[data-ind="legal"] .tg-eyebrow,
body[data-ind="legal"] .jx-see__eyebrow { color: #6d28d9; }
body[data-ind="homeservices"] .tg-eyebrow,
body[data-ind="homeservices"] .jx-see__eyebrow { color: #3f6212; }
body[data-ind="personal"] .tg-eyebrow,
body[data-ind="personal"] .jx-see__eyebrow { color: #be185d; }
body[data-ind="mobile"] .tg-eyebrow,
body[data-ind="mobile"] .jx-see__eyebrow { color: #4338ca; }
body[data-ind="events"] .tg-eyebrow,
body[data-ind="events"] .jx-see__eyebrow { color: #761a9e; }
body[data-ind="seasonal"] .tg-eyebrow,
body[data-ind="seasonal"] .jx-see__eyebrow { color: #0369a1; }
body[data-ind="veterinary"] .tg-eyebrow,
body[data-ind="veterinary"] .jx-see__eyebrow { color: #a16207; }
body[data-ind="other"] .tg-eyebrow,
body[data-ind="other"] .jx-see__eyebrow { color: #475569; }
/* ============================================================
Industry pages — tint the SECTION background with each industry's
link color (the surface sections: who / how / pricing). Light,
AA-friendly tints so dark text stays legible. Photo-placeholder
tiles keep their own neutral treatment.
============================================================ */
body[data-ind="trades"] .tg-section--surface { background: #fff4ec; }
body[data-ind="property"] .tg-section--surface { background: #edf2fe; }
body[data-ind="automotive"] .tg-section--surface { background: #fdf1f0; }
body[data-ind="realestate"] .tg-section--surface { background: #ebf7f3; }
body[data-ind="legal"] .tg-section--surface { background: #f3eefe; }
body[data-ind="homeservices"] .tg-section--surface { background: #f3fbdd; }
body[data-ind="personal"] .tg-section--surface { background: #fdeef6; }
body[data-ind="mobile"] .tg-section--surface { background: #eef0fe; }
body[data-ind="events"] .tg-section--surface { background: #f5ecfb; }
body[data-ind="seasonal"] .tg-section--surface { background: #e6f5fe; }
body[data-ind="veterinary"] .tg-section--surface { background: #fbf5e3; }
body[data-ind="other"] .tg-section--surface { background: #f1f5f9; }
/* ============================================================
Mascot scene art — flows into the page (no card/border) and
gently floats. The SVG carries its own soft shadow + glow.
============================================================ */
.tg-scene { display: flex; align-items: center; justify-content: center; }
.tg-scene__art { width: 100%; max-width: 460px; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
.tg-scene__art { animation: tgFloatArt 6s ease-in-out infinite; will-change: transform; }
}
@keyframes tgFloatArt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* Mascot scene gallery — flowing art, no cards */
.tg-scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.5rem,2vw,1.25rem); margin-top: clamp(1.5rem,3vw,2.5rem); align-items: end; justify-items: center; }
.tg-scene-grid .tg-scene__art { width: 100%; max-width: 260px; }
.tg-scene.jx-how2__media .tg-scene__art { max-width: 420px; }
@media (max-width: 780px) { .tg-scene-grid { grid-template-columns: 1fr 1fr; } .tg-scene-grid .tg-scene:nth-child(3) { display: none; } }
@media (max-width: 480px) { .tg-scene-grid { grid-template-columns: 1fr; } .tg-scene-grid .tg-scene:nth-child(3) { display: block; } }
/* ============================================================
Signup / checkout page — rebranded to the enterprise system.
Structure/classes preserved for the signup JS; styling only.
============================================================ */
.jx-signup__head { margin-bottom: clamp(2rem,4vw,3rem); }
body.tg .signup-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(1.5rem,3vw,2.5rem); align-items: start; }
/* form card */
body.tg .signup-card {
background: #fff; border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-lg);
padding: clamp(1.5rem,3vw,2.25rem); box-shadow: var(--jx-sh-2, var(--tg-shadow-md));
}
body.tg .signup-heading { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; margin: 1.75rem 0 1rem; }
body.tg .signup-heading:first-child { margin-top: 0; }
/* billing toggle — segmented control */
body.tg .billing-toggle { display: inline-flex; padding: 0.25rem; gap: 0.25rem; background: var(--tg-color-surface); border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: 999px; margin-bottom: 1.25rem; }
body.tg .billing-toggle button { border: 0; background: transparent; border-radius: 999px; padding: 0.5rem 1rem; font: inherit; font-weight: 700; font-size: var(--tg-font-size-sm); color: var(--tg-color-text-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: background-color .15s ease, color .15s ease; }
body.tg .billing-toggle button[aria-pressed="true"] { background: #fff; color: var(--tg-color-text); box-shadow: 0 1px 2px rgba(21,23,27,0.08); }
body.tg .toggle-note { font-size: var(--tg-font-size-xs); font-weight: 800; color: var(--tg-color-success); }
/* plan options — selectable cards */
body.tg .plan-picker { display: grid; gap: 0.75rem; }
body.tg .plan-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-md); background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
body.tg .plan-option:hover { border-color: var(--tg-color-border-strong); }
body.tg .plan-option input { position: absolute; opacity: 0; width: 0; height: 0; }
body.tg .plan-option.selected { border-color: var(--tg-color-accent); background: var(--tg-color-accent-soft); box-shadow: 0 0 0 1px var(--tg-color-accent); }
body.tg .plan-option-name { display: block; font-weight: 750; }
body.tg .plan-option-meta { display: block; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); margin-top: 0.15rem; }
body.tg .plan-option-price { font-weight: 800; white-space: nowrap; }
body.tg .th-flag { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--tg-color-accent); color: #fff; font-size: var(--tg-font-size-xs); font-weight: 800; vertical-align: middle; }
/* price monthly/annual visibility (driven by data-billing) */
body.tg .plan-picker[data-billing="monthly"] .price-annual,
body.tg .summary-card[data-billing="monthly"] .price-annual { display: none; }
body.tg .plan-picker[data-billing="annual"] .price-monthly,
body.tg .summary-card[data-billing="annual"] .price-monthly { display: none; }
/* fields */
body.tg .field { margin-bottom: 1.1rem; }
body.tg .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
body.tg .field label { display: block; font-weight: 650; font-size: var(--tg-font-size-sm); margin-bottom: 0.4rem; }
body.tg .field input, body.tg .field select {
width: 100%; padding: 0.72rem 0.85rem; border: 1px solid var(--tg-color-border-strong); border-radius: 0.7rem;
background: #fffdfb; color: var(--tg-color-text); font: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
body.tg .field input:focus, body.tg .field select:focus { outline: none; border-color: var(--tg-color-accent); box-shadow: 0 0 0 3px rgba(233,77,0,0.16); }
body.tg .field.invalid input, body.tg .field.invalid select { border-color: var(--tg-color-danger); box-shadow: 0 0 0 3px rgba(180,35,24,0.14); }
body.tg .field-hint { margin: 0.35rem 0 0; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-xs); }
body.tg .field-error { margin: 0.35rem 0 0; color: var(--tg-color-danger); font-size: var(--tg-font-size-sm); font-weight: 600; }
body.tg .field-optional { color: var(--tg-color-text-muted); font-weight: 500; font-size: var(--tg-font-size-xs); }
body.tg .form-alert { margin: 1rem 0 0; padding: 0.8rem 1rem; border-radius: 0.7rem; background: #fbe4e1; color: var(--tg-color-danger); font-size: var(--tg-font-size-sm); font-weight: 600; }
body.tg .plan-fineprint { margin: 0 0 1.1rem; text-align: center; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); }
/* summary */
body.tg .signup-summary { position: sticky; top: 5.5rem; display: grid; gap: 1.25rem; }
body.tg .summary-card { background: var(--tg-color-surface); border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-lg); padding: clamp(1.5rem,2.5vw,2rem); }
body.tg .summary-plan-name { margin: 0; font-weight: 800; color: var(--tg-color-accent-hover); }
body.tg .summary-price { margin: 0.35rem 0 1rem; }
body.tg .price-figure { font-size: clamp(2rem,4vw,2.6rem); font-weight: 800; letter-spacing: -0.02em; }
body.tg .price-per { font-weight: 650; color: var(--tg-color-text-muted); }
body.tg .price-note { display: block; margin-top: 0.35rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); }
body.tg .founding-strip { display: block; color: var(--tg-color-text); border: 1px solid var(--tg-color-accent); background: var(--tg-color-accent-soft); border-radius: var(--tg-radius-lg); padding: 1.15rem 1.35rem; margin: 0; }
body.tg .founding-strip p { margin: 0.5rem 0 0; font-size: var(--tg-font-size-sm); line-height: 1.55; color: var(--tg-color-text-soft); }
body.tg .founding-strip strong { color: var(--tg-color-accent-hover); }
body.tg .founding-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--tg-color-accent); color: #fff; font-size: var(--tg-font-size-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
body.tg .promo-code { background: #fff; border: 1px solid var(--tg-color-accent); border-radius: 0.4rem; padding: 0.05rem 0.4rem; font-weight: 800; color: var(--tg-color-accent-hover); }
body.tg .signup-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
body.tg .signup-trust li { position: relative; padding-left: 1.6rem; color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); line-height: 1.5; }
body.tg .signup-trust li::before { content: ""; position: absolute; left: 0.15rem; top: 0.5em; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: var(--tg-color-accent); }
@media (max-width: 860px) {
body.tg .signup-grid { grid-template-columns: 1fr; }
body.tg .signup-summary { position: static; }
body.tg .field-row { grid-template-columns: 1fr; }
}
/* Activation signup — interim note shown until the $9.99 checkout is wired */
body.tg .activate-note { margin: 0.9rem 0 0; padding: 0.85rem 1rem; border-radius: 0.7rem; background: var(--tg-color-accent-soft); border: 1px solid var(--tg-color-accent); color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); line-height: 1.55; }
body.tg .activate-note a { color: var(--tg-color-accent-hover); font-weight: 700; }
body.tg .founding-strip p a { color: var(--tg-color-accent-hover); font-weight: 700; white-space: nowrap; }
/* Footer disclaimer — muted, readable, constrained */
/* Sets its own colour, so it does not pick up the corrected value on
.jx-footer__legal — same 4.40 -> 4.88 fix applied here. */
body.tg .jx-footer__disclaimer { max-width: 70ch; margin: 0 0 0.85rem; color: #646d7a; font-size: var(--tg-font-size-xs); line-height: 1.6; }
/* Accessibility page — conformance summary card + comfort-settings grid */
body.tg .jx-a11y-card { align-self: center; background: #fff; border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-lg); padding: clamp(1.5rem,2.5vw,2rem); box-shadow: var(--jx-sh-2, var(--tg-shadow-md)); }
body.tg .jx-a11y-card__label { margin: 0 0 1rem; font-size: var(--tg-font-size-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tg-color-accent-hover); }
body.tg .jx-a11y-card__list { margin: 0; display: grid; gap: 0.85rem; }
body.tg .jx-a11y-card__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--tg-color-border); }
body.tg .jx-a11y-card__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
body.tg .jx-a11y-card__list dt { color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); }
body.tg .jx-a11y-card__list dd { margin: 0; font-weight: 750; text-align: right; }
body.tg .jx-a11y-card__note { margin: 1.25rem 0 0; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-xs); line-height: 1.5; }
body.tg .jx-a11y-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
/* Contact page — textarea + direct-email styling (reuses the signup form styles) */
body.tg .field textarea {
width: 100%; padding: 0.72rem 0.85rem; border: 1px solid var(--tg-color-border-strong); border-radius: 0.7rem;
background: #fffdfb; color: var(--tg-color-text); font: inherit; line-height: 1.55; min-height: 8rem; resize: vertical;
transition: border-color .15s ease, box-shadow .15s ease;
}
body.tg .field textarea:focus { outline: none; border-color: var(--tg-color-accent); box-shadow: 0 0 0 3px rgba(233,77,0,0.16); }
body.tg .field.invalid textarea { border-color: var(--tg-color-danger); box-shadow: 0 0 0 3px rgba(180,35,24,0.14); }
body.tg .jx-contact-email { display: inline-block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--tg-color-accent-hover); text-decoration: none; }
body.tg .jx-contact-email:hover { text-decoration: underline; }
/* ============================================================
Legal document pages (Privacy, Terms, SMS policy) — enterprise
readable typography, table of contents, section rhythm.
============================================================ */
body.tg .tg-legal__date { margin: 0.5rem 0 1.25rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); font-weight: 650; }
body.tg .tg-legal { color: var(--tg-color-text-soft); font-size: 1.02rem; line-height: 1.7; }
body.tg .tg-legal h2 {
margin: 2.75rem 0 0.9rem; padding-top: 1.5rem; border-top: 1px solid var(--tg-color-border);
font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--tg-color-text); scroll-margin-top: 5.5rem;
}
body.tg .tg-legal p { margin: 0 0 1.1rem; }
body.tg .tg-legal ul { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
body.tg .tg-legal ul li { position: relative; padding-left: 1.5rem; }
body.tg .tg-legal ul li::before { content: ""; position: absolute; left: 0.2rem; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--tg-color-accent); }
body.tg .tg-legal strong { color: var(--tg-color-text); font-weight: 700; }
body.tg .tg-legal a { color: var(--tg-color-accent-hover); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
/* Table of contents */
body.tg .tg-legal__toc { margin: 0 0 1rem; padding: 1.35rem 1.5rem; background: var(--tg-color-surface); border: 1px solid var(--jx-hairline, var(--tg-color-border)); border-radius: var(--tg-radius-lg); }
body.tg .tg-legal__toc-title { margin: 0 0 0.75rem; font-size: var(--tg-font-size-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tg-color-accent-hover); }
body.tg .tg-legal__toc ol { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.4rem; color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); }
body.tg .tg-legal__toc a { color: var(--tg-color-text-soft); text-decoration: none; font-weight: 600; }
body.tg .tg-legal__toc a:hover { color: var(--tg-color-accent-hover); text-decoration: underline; }
/* ---- Scaffolding styles: Trust/compliance page shells (draft only) ----
Deliberately loud so a placeholder page is never mistaken for finished
copy. Remove the draft-notice include and the .tg-legal__todo spans once a
page has approved content; these rules then have nothing to style. */
body.tg .tg-draft-notice { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px dashed #b45309; border-radius: var(--tg-radius-lg); background: #fff7ed; }
body.tg .tg-draft-notice__title { margin: 0 0 0.35rem; font-size: var(--tg-font-size-sm); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #9a3412; }
body.tg .tg-draft-notice__body { margin: 0; font-size: var(--tg-font-size-sm); line-height: 1.6; color: #7c2d12; }
body.tg .tg-draft-notice code, body.tg .tg-legal code { padding: 0.05em 0.35em; border-radius: 5px; background: rgba(120,53,15,0.1); font-size: 0.9em; }
body.tg .tg-legal__todo { display: inline; padding: 0.05em 0.4em; border-radius: 5px; background: #fef3c7; color: #92400e; font-weight: 650; font-style: normal; }
body.tg .tg-legal__table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: var(--tg-font-size-sm); }
body.tg .tg-legal__table th, body.tg .tg-legal__table td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--tg-color-border); vertical-align: top; }
body.tg .tg-legal__table th { font-weight: 800; color: var(--tg-color-text); background: var(--tg-color-surface); }
body.tg .tg-legal__table td.tg-legal__todo { background: #fef3c7; }
/* ---- Security / Trust page ---- */
.tg-jx .tg-sec-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem;
border-radius: 13px;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent-hover);
}
.tg-jx .tg-sec-icon svg { width: 1.5rem; height: 1.5rem; }
.tg-jx .tg-sec-icon--lg { width: 3.5rem; height: 3.5rem; border-radius: 16px; margin-bottom: 1.25rem; }
.tg-jx .tg-sec-icon--lg svg { width: 1.9rem; height: 1.9rem; }
.tg-jx .tg-sec-checks { max-width: 44rem; margin: 2.25rem auto 0; }
.tg-jx .tg-sec-checks--tight { margin-top: 1.5rem; }
/* Documents grid — the trust hub links. */
.tg-jx .tg-docs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: 1rem;
}
.tg-jx .tg-doc {
display: flex; flex-direction: column; gap: 0.2rem;
padding: 1.1rem 1.25rem;
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-lg);
background: #fff;
text-decoration: none;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tg-jx .tg-doc:hover { border-color: var(--tg-color-accent); box-shadow: var(--jx-sh-2, var(--tg-shadow-md)); transform: translateY(-2px); }
.tg-jx .tg-doc__name { font-weight: 750; color: var(--tg-color-text); }
.tg-jx .tg-doc:hover .tg-doc__name { color: var(--tg-color-accent-hover); }
.tg-jx .tg-doc__name::after { content: " \2192"; color: var(--tg-color-accent); font-weight: 700; }
.tg-jx .tg-doc__desc { font-size: var(--tg-font-size-sm); color: var(--tg-color-text-muted); }
/* Responsible-disclosure card. */
.tg-jx .tg-disclosure {
text-align: center;
padding: clamp(2rem, 5vw, 3.25rem);
border: 1px solid var(--tg-color-border);
border-radius: 20px;
background: #fff;
box-shadow: var(--jx-sh-1, 0 1px 2px rgba(21,23,27,.05));
}
.tg-jx .tg-disclosure .tg-lead { max-width: 46rem; margin-inline: auto; }
.tg-jx .tg-disclosure__contact { margin: 1.75rem 0 0; }
.tg-jx .tg-disclosure .tg-sec-checks { text-align: left; }
/* Status page banner. */
.tg-jx .tg-status-banner {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
margin: 1.5rem 0 2.5rem;
padding: 1rem 1.25rem;
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-lg);
background: #fff;
}
.tg-jx .tg-status-banner .jx-status--ready { font-size: 0.85rem; }
.tg-jx .tg-status-banner__time { color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); }
/* Clickable card (About page industry links) */
body.tg a.tg-card--link { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; display: block; }
body.tg a.tg-card--link:hover { border-color: var(--tg-color-accent); box-shadow: var(--jx-sh-2, var(--tg-shadow-md)); transform: translateY(-2px); }
body.tg a.tg-card--link .tg-card__title { color: var(--tg-color-accent-hover); }
/* ============================================================
Focus checkout + custom-plan intake (.co-*)
Dedicated single-decision pages: no nav, no footer, one back
arrow. White-first, --tg-* tokens. Shared by /checkout/solo,
/checkout/team, and /custom-plan.
============================================================ */
body.tg.co-page { background: var(--tg-color-bg); }
/* Strategic back arrow — the only chrome on the page. */
.co-topbar {
position: sticky;
top: 0;
z-index: 20;
background: color-mix(in srgb, var(--tg-color-bg) 88%, transparent);
-webkit-backdrop-filter: saturate(1.1) blur(8px);
backdrop-filter: saturate(1.1) blur(8px);
border-bottom: 1px solid var(--tg-color-border);
}
.co-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
color: var(--tg-color-text-soft);
font-weight: 700;
font-size: var(--tg-font-size-sm);
text-decoration: none;
transition: color var(--tg-duration-fast) var(--tg-ease);
}
.co-back:hover { color: var(--tg-color-accent-hover); }
.co-back__icon {
display: inline-flex;
transition: transform var(--tg-duration-fast) var(--tg-ease);
}
.co-back:hover .co-back__icon { transform: translateX(-3px); }
.co-back:focus-visible {
outline: 3px solid var(--tg-color-focus);
outline-offset: 2px;
border-radius: var(--tg-radius-sm);
}
/* Two-column shell: action left, anchor right. */
.co-shell {
max-width: 66rem;
margin-inline: auto;
padding: clamp(2rem, 5vw, 4rem) clamp(1.1rem, 4vw, 2.5rem) clamp(3.5rem, 7vw, 6rem);
display: grid;
gap: clamp(1.75rem, 4vw, 3rem);
align-items: start;
}
@media (min-width: 54rem) {
.co-shell { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
.co-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.9rem;
color: var(--tg-color-accent-hover);
font-weight: 800;
font-size: var(--tg-font-size-xs);
letter-spacing: var(--tg-letter-label);
text-transform: uppercase;
}
.co-eyebrow__lock { display: inline-flex; color: var(--tg-color-accent); }
.co-title {
margin: 0 0 0.85rem;
font-size: clamp(2rem, 4.4vw, 3rem);
line-height: var(--tg-line-tight);
letter-spacing: var(--tg-letter-tight);
color: var(--tg-color-text);
}
.co-sub {
margin: 0 0 1.9rem;
max-width: 40ch;
color: var(--tg-color-text-soft);
font-size: var(--tg-font-size-md);
line-height: var(--tg-line-body);
}
/* Reuse .field/.field-row/.form-alert. Add textarea + spacing tweaks. */
.co-form .field textarea {
width: 100%;
font: inherit;
color: var(--ink, #2b2620);
background: #fff;
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-sm);
padding: 0.65rem 0.8rem;
resize: vertical;
min-height: 5.5rem;
}
.co-form .field textarea:focus-visible {
outline: 3px solid rgba(233, 77, 0, 0.28);
outline-offset: 0;
border-color: var(--tg-color-accent);
}
.co-form .field input,
.co-form .field select { border-color: var(--tg-color-border); }
.co-form .field input:focus-visible,
.co-form .field select:focus-visible {
outline: 3px solid rgba(233, 77, 0, 0.28);
border-color: var(--tg-color-accent);
}
.co-promo { margin: 0.4rem 0 1.35rem; }
.co-promo > summary {
cursor: pointer;
color: var(--tg-color-accent-hover);
font-weight: 700;
font-size: var(--tg-font-size-sm);
list-style: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.co-promo > summary::-webkit-details-marker { display: none; }
.co-promo > summary::before { content: "+"; font-weight: 800; }
.co-promo[open] > summary::before { content: "\2013"; }
.co-reassure {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin: 0 0 1.1rem;
color: var(--tg-color-text-muted);
font-size: var(--tg-font-size-sm);
text-align: center;
}
.co-reassure__lock { display: inline-flex; color: var(--tg-color-success); }
.co-alt {
margin: 1.6rem 0 0;
padding-top: 1.4rem;
border-top: 1px solid var(--tg-color-border);
color: var(--tg-color-text-muted);
font-size: var(--tg-font-size-sm);
line-height: var(--tg-line-body);
}
.co-alt a { color: var(--tg-color-accent-hover); font-weight: 700; }
/* Order summary / what-to-expect anchor. */
.co-summary-col { position: relative; }
@media (min-width: 54rem) {
.co-summary-col { position: sticky; top: 5.5rem; }
}
.co-summary {
position: relative;
background: var(--tg-color-surface);
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-xl, 1.5rem);
padding: clamp(1.5rem, 3vw, 2rem);
overflow: hidden;
}
/* Featured emphasis without a shadow: a crisp 2px accent border. */
.co-summary--featured {
border: 2px solid var(--tg-color-accent);
}
.co-summary__flag {
display: inline-block;
margin-bottom: 0.85rem;
padding: 0.28rem 0.7rem;
background: var(--tg-color-accent);
color: #fff;
border-radius: 999px;
font-size: var(--tg-font-size-xs);
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.co-summary__eyebrow {
margin: 0 0 0.3rem;
color: var(--tg-color-text-muted);
font-weight: 800;
font-size: var(--tg-font-size-xs);
letter-spacing: var(--tg-letter-label);
text-transform: uppercase;
}
.co-summary__name {
margin: 0 0 0.25rem;
font-size: var(--tg-font-size-xl);
letter-spacing: var(--tg-letter-tight);
color: var(--tg-color-text);
}
.co-summary__for { margin: 0 0 1.1rem; color: var(--tg-color-text-soft); font-size: var(--tg-font-size-sm); }
.co-summary__price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 0.3rem; }
.co-summary__figure {
font-size: clamp(2.4rem, 5vw, 3rem);
font-weight: 800;
letter-spacing: var(--tg-letter-tight);
color: var(--tg-color-text);
font-variant-numeric: tabular-nums;
}
.co-summary__per { color: var(--tg-color-text-muted); font-weight: 600; }
.co-summary__meter {
margin: 0 0 1.2rem;
color: var(--tg-color-text-soft);
font-size: var(--tg-font-size-sm);
}
.co-summary__meter strong { color: var(--tg-color-text); }
.co-summary__list { margin: 0 0 1rem; }
.co-summary__usage { margin: 0 0 1.25rem; color: var(--tg-color-text-muted); font-size: var(--tg-font-size-sm); }
.co-guarantee {
margin-top: 1.25rem;
padding: 1.1rem 1.2rem;
background: var(--tg-color-bg);
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-md);
}
.co-guarantee__title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.6rem;
font-weight: 800;
color: var(--tg-color-text);
}
.co-guarantee__check { display: inline-flex; color: var(--tg-color-success); }
.co-guarantee__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.co-guarantee__list li {
position: relative;
padding-left: 1.1rem;
color: var(--tg-color-text-soft);
font-size: var(--tg-font-size-sm);
}
.co-guarantee__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--tg-color-accent);
}
.co-summary__incentive {
margin: 1.1rem 0 0;
padding: 0.75rem 0.9rem;
background: var(--tg-color-accent-soft);
border-radius: var(--tg-radius-md);
color: var(--tg-color-accent-hover);
font-size: var(--tg-font-size-sm);
font-weight: 600;
}
.co-summary__mascot {
position: absolute;
right: 0.9rem;
bottom: 0.7rem;
opacity: 0.9;
pointer-events: none;
}
/* Numbered "what to expect" steps (custom-plan). */
.co-steps { margin: 0 0 0.5rem; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.co-step {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
align-items: start;
color: var(--tg-color-text-soft);
font-size: var(--tg-font-size-sm);
line-height: var(--tg-line-body);
}
.co-step strong { color: var(--tg-color-text); }
.co-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
background: var(--tg-color-accent);
color: #fff;
font-weight: 800;
font-size: var(--tg-font-size-sm);
}
/* Success confirmation (custom-plan). */
.co-thanks {
margin-top: 1rem;
padding: clamp(1.75rem, 4vw, 2.5rem);
background: var(--tg-color-surface);
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-xl, 1.5rem);
text-align: center;
}
.co-thanks__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 0.9rem;
border-radius: 50%;
background: color-mix(in srgb, var(--tg-color-success) 14%, transparent);
color: var(--tg-color-success);
}
.co-thanks__title { margin: 0 0 0.5rem; font-size: var(--tg-font-size-lg); color: var(--tg-color-text); }
.co-thanks__copy { margin: 0 auto; max-width: 40ch; color: var(--tg-color-text-soft); line-height: var(--tg-line-body); }
@media (prefers-reduced-motion: reduce) {
.co-back:hover .co-back__icon { transform: none; }
}
/* Flat aesthetic on the focus pages: no drop shadows anywhere on .co-page. */
body.tg.co-page .co-summary,
body.tg.co-page .co-thanks,
body.tg.co-page .co-guarantee,
body.tg.co-page .tg-button,
body.tg.co-page .tg-button--primary,
body.tg.co-page .tg-button--primary:hover,
body.tg.co-page .tg-button--secondary,
body.tg.co-page .tg-button--secondary:hover { box-shadow: none; }
/* ============================================================
Apple-level Hero — shared industry template (all 5 pages).
Centered single column, one message, one product card
floating in generous whitespace. Replaces the old split hero.
============================================================ */
.tg-hero-section {
padding: clamp(4.5rem, 12vw, 10rem) 1.5rem clamp(4rem, 8vw, 7.5rem);
background: var(--tg-color-surface);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.tg-hero-container { max-width: 820px; width: 100%; }
.tg-category-tag {
display: inline-block;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
color: var(--tg-color-accent);
margin-bottom: 1.5rem;
}
.tg-hero-headline {
max-width: 20ch;
margin: 0 auto 1rem;
font-size: clamp(2.25rem, 4.6vw, 3.75rem);
font-weight: 800;
line-height: 1.07;
letter-spacing: -0.03em;
color: var(--tg-color-text);
text-wrap: balance;
overflow-wrap: break-word;
}
.tg-hero-subhead {
max-width: 34rem;
margin: 0 auto 2.5rem;
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.5;
font-weight: 400;
color: var(--tg-color-text-muted);
}
.tg-hero-actions { display: flex; justify-content: center; }
.tg-hero-visual-wrap {
width: 100%;
margin-top: clamp(3rem, 6vw, 5rem);
display: flex;
justify-content: center;
}
/* Scale the existing opportunity proof-card up as the hero anchor. */
.tg-proof-card-container {
width: 100%;
max-width: 440px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 768px) {
.tg-proof-card-container:hover { transform: translateY(-6px); }
}
/* ============================================================
Section 2 — auto-scrolling industry badge ribbon.
Replaces the static chip cloud + mascot trio. Slow infinite
marquee (two identical sets, -50% loop), pauses on hover,
holds still for reduced-motion. Edge-faded for polish.
============================================================ */
.tg-ribbon {
margin-top: clamp(2rem, 4vw, 3rem);
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tg-ribbon__track {
display: flex;
width: max-content;
animation: tg-ribbon-scroll 42s linear infinite;
}
.tg-ribbon:hover .tg-ribbon__track,
.tg-ribbon:focus-within .tg-ribbon__track { animation-play-state: paused; }
.tg-ribbon__set {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0;
padding: 0 0.375rem;
list-style: none;
flex: 0 0 auto;
}
.tg-ribbon__badge {
flex: 0 0 auto;
padding: 0.6rem 1.15rem;
border: 1px solid var(--tg-color-border);
border-radius: 999px;
background: var(--tg-color-bg);
color: var(--tg-color-text-soft);
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
}
@keyframes tg-ribbon-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.tg-ribbon { overflow-x: auto; }
.tg-ribbon__track { animation: none; }
}
/* ============================================================
Section 3 — "See it work": one case per scroll. Centered
stack (eyebrow -> headline -> single line -> opportunity
card) with big vertical rhythm. Replaces two-column rows.
============================================================ */
.tg-cases {
margin-top: clamp(3rem, 6vw, 5rem);
display: flex;
flex-direction: column;
gap: clamp(4.5rem, 10vw, 9rem);
}
.tg-case {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.tg-case__eyebrow { margin-bottom: 0.75rem; }
.tg-case__title {
max-width: 20ch;
margin: 0 auto 1rem;
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--tg-color-text);
text-wrap: balance;
}
.tg-case__line {
max-width: 42ch;
margin: 0 auto clamp(2rem, 4vw, 3rem);
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: var(--tg-color-text-muted);
}
.tg-case__card { width: 100%; max-width: 440px; }
/* ============================================================
Section 4 — How it works: 3 stripped steps, side by side on
desktop, stacked on mobile. Dispatch illustration removed.
============================================================ */
.tg-steps3 {
margin: clamp(3rem, 6vw, 5rem) auto 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
max-width: 60rem;
}
.tg-step3 {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.tg-step3__num {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 1.25rem;
border-radius: 999px;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent);
font-weight: 800;
font-size: 1.25rem;
}
.tg-step3__title {
margin: 0 0 0.5rem;
font-size: 1.1875rem;
font-weight: 700;
color: var(--tg-color-text);
}
.tg-step3__copy {
margin: 0;
max-width: 26ch;
font-size: 1rem;
line-height: 1.55;
color: var(--tg-color-text-muted);
}
@media (max-width: 720px) {
.tg-steps3 { grid-template-columns: 1fr; gap: 2.5rem; max-width: 24rem; }
}
/* ============================================================
Section 5 — Control: stripped and centered. Boxed card matrix
replaced with three airy, hairline-divided principles.
============================================================ */
.tg-control-points {
margin: clamp(3rem, 6vw, 4.5rem) auto 0;
padding: 0;
list-style: none;
max-width: 40rem;
display: flex;
flex-direction: column;
}
.tg-control-point {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: clamp(1.5rem, 3vw, 2.25rem) 0;
text-align: center;
border-top: 1px solid var(--tg-color-border);
}
.tg-control-point:first-child { border-top: 0; }
.tg-control-point__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--tg-color-text);
}
.tg-control-point__copy {
max-width: 36ch;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--tg-color-text-muted);
}
.tg-control-note {
margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
max-width: 42rem;
text-align: center;
font-size: 0.95rem;
line-height: 1.5;
color: var(--tg-color-text-soft);
}
/* ============================================================
Section 6 — simplified pricing (industry pages). $9.99 trial +
Solo/Team choice up front; the full feature matrix (incl.
Multi-Location) lives behind a native disclosure.
============================================================ */
.tg-price { max-width: 60rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; }
.tg-price__trial {
max-width: 32rem;
margin: 0 auto;
padding: clamp(1.75rem, 3vw, 2.5rem);
text-align: center;
background: var(--tg-color-bg);
border: 1px solid var(--tg-color-border);
border-radius: 1.25rem;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.tg-price__badge {
display: inline-block;
margin: 0 0 .75rem;
padding: .3rem .8rem;
border-radius: 999px;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent);
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.tg-price__trial-amt { margin: 0 0 .5rem; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; color: var(--tg-color-text); }
.tg-price__trial-amt span { font-size: 1rem; font-weight: 500; color: var(--tg-color-text-muted); }
.tg-price__trial-desc { max-width: 26rem; margin: 0 auto 1.5rem; font-size: 1.0625rem; font-weight: 400; color: var(--tg-color-text-muted); line-height: 1.55; }
.tg-price__or {
margin: clamp(2rem, 4vw, 2.75rem) 0;
text-align: center;
color: var(--tg-color-text-muted);
font-size: .9rem;
text-transform: uppercase;
letter-spacing: .1em;
}
.tg-price__plans {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1rem, 2vw, 1.5rem);
max-width: 44rem;
margin: 0 auto;
}
/* Homepage rewrite: the homepage features the $9.99 activation as the single
primary offer, so its plan grid holds one centered card. */
.tg-price__plans--single { grid-template-columns: 1fr; max-width: 26rem; }
.tg-price__plan {
position: relative;
padding: clamp(1.75rem, 3vw, 2.25rem);
text-align: center;
background: var(--tg-color-bg);
border: 1px solid var(--tg-color-border);
border-radius: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
}
.tg-price__plan--featured { border-color: var(--tg-color-accent); box-shadow: 0 8px 30px rgba(233,77,0,.10); }
.tg-price__flag {
position: absolute;
top: -.75rem;
left: 50%;
transform: translateX(-50%);
padding: .3rem .8rem;
border-radius: 999px;
background: var(--tg-color-accent);
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .05em;
white-space: nowrap;
}
.tg-price__plan-name { margin: .25rem 0 .5rem; font-size: 1.35rem; font-weight: 700; color: var(--tg-color-text); }
.tg-price__plan-amt { margin: 0 0 .35rem; font-size: 2rem; font-weight: 800; color: var(--tg-color-text); }
.tg-price__plan-amt span { font-size: 1rem; font-weight: 500; color: var(--tg-color-text-muted); }
.tg-price__plan-for { margin: 0 0 1.5rem; max-width: 22ch; color: var(--tg-color-text-muted); line-height: 1.5; }
.tg-price__plan .tg-button { margin-top: auto; }
.tg-price__compare { max-width: 44rem; margin: clamp(2rem, 4vw, 2.75rem) auto 0; text-align: center; }
.tg-price__compare > summary {
display: inline-flex;
align-items: center;
gap: .5rem;
cursor: pointer;
padding: .7rem 1.25rem;
border: 1px solid var(--tg-color-border);
border-radius: 999px;
font-weight: 600;
color: var(--tg-color-text);
list-style: none;
user-select: none;
}
.tg-price__compare > summary::-webkit-details-marker { display: none; }
.tg-price__compare > summary::after { content: '+'; font-weight: 700; color: var(--tg-color-accent); }
.tg-price__compare[open] > summary::after { content: '\2013'; }
.tg-price__compare[open] > summary { background: var(--tg-color-surface); }
.tg-price__compare-body { margin-top: clamp(1.5rem, 3vw, 2.5rem); text-align: left; }
@media (max-width: 640px) {
.tg-price__plans { grid-template-columns: 1fr; max-width: 24rem; }
}
/* ============================================================
Spec A — iOS device wrapper. Frames the opportunity proof-card
in a premium, bezel-less phone (brushed-metal edge, soft island,
deep realistic shadow + ambient glow) so it reads as a living
product instead of a floating illustration.
============================================================ */
.tg-device-phone {
position: relative;
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 11px;
border-radius: 46px;
background: linear-gradient(150deg, #dedad5 0%, #f3f0ec 18%, #cbc6bf 50%, #efece8 82%, #d2cdc6 100%);
box-shadow:
0 30px 60px -15px rgba(0,0,0,0.12),
0 18px 36px -18px rgba(0,0,0,0.15),
inset 0 0 0 1px rgba(255,255,255,0.55);
transition: transform .35s ease;
}
.tg-device-phone::before {
content: "";
position: absolute;
inset: -6% -12% -12%;
z-index: -1;
background: radial-gradient(58% 52% at 50% 42%, rgba(233,77,0,0.13), transparent 72%);
filter: blur(6px);
pointer-events: none;
}
.tg-device-phone__screen {
position: relative;
border-radius: 35px;
background: #ffffff;
padding: 2.5rem 0.55rem 0.65rem;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(21,23,27,0.06);
}
.tg-device-phone__island {
position: absolute;
top: 0.72rem;
left: 50%;
transform: translateX(-50%);
width: 32%;
max-width: 112px;
height: 1.45rem;
border-radius: 999px;
background: #0b0b0d;
z-index: 2;
}
/* Flatten the card's own frame so it reads as screen content. */
.tg-device-phone .jx-proof {
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
max-width: none;
width: 100%;
}
@media (min-width: 768px) {
.tg-device-phone:hover { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.tg-device-phone { transition: none; }
}
/* ============================================================
Spec B — "See it work" interactive showcase. Tabs cross-fade
between case studies on one device. Progressive enhancement:
with no JS the panels render stacked and the tabs stay hidden
(JS adds .is-enhanced). No layout shift — the enhanced panels
share one grid cell, so the stage height stays constant.
============================================================ */
.tg-showcase { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
/* Flat segmented tabs — revealed only once JS can drive them. */
.tg-showcase__tabs { display: none; }
.tg-showcase.is-enhanced .tg-showcase__tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.tg-showcase__tab {
font: inherit;
font-weight: 600;
font-size: .95rem;
color: var(--tg-color-text-soft);
background: var(--tg-color-bg);
border: 1px solid var(--tg-color-border);
border-radius: 999px;
padding: .6rem 1.2rem;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tg-showcase__tab:hover { color: var(--tg-color-text); border-color: var(--tg-color-border-strong); }
.tg-showcase__tab.is-active {
color: #fff;
background: var(--tg-color-text);
border-color: var(--tg-color-text);
}
/* Stage — no-JS fallback: cases stacked with rhythm. */
.tg-showcase__stage { display: grid; gap: clamp(3.5rem, 8vw, 6rem); }
/* Prev/next scroll indicators — revealed only once JS can drive them. They
flank the phone (not the full row) and cycle through the cases, mirroring
the tabs above. Constraining the device box to the phone width lets the
arrows sit evenly on the image's left and right edges. */
.tg-showcase__arrow { display: none; }
.tg-showcase.is-enhanced .tg-showcase__device {
position: relative;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.tg-showcase.is-enhanced .tg-showcase__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
width: clamp(2.4rem, 4vw, 2.9rem);
height: clamp(2.4rem, 4vw, 2.9rem);
padding: 0;
border-radius: 999px;
border: 1px solid var(--tg-color-border);
background: var(--tg-color-bg);
color: var(--tg-color-text-soft);
box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
cursor: pointer;
z-index: 3;
transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tg-showcase.is-enhanced .tg-showcase__arrow:hover {
color: var(--tg-color-text);
border-color: var(--tg-color-border-strong);
box-shadow: 0 4px 12px rgba(15, 23, 42, .16);
}
.tg-showcase.is-enhanced .tg-showcase__arrow:focus-visible {
outline: 2px solid var(--tg-color-accent);
outline-offset: 2px;
}
/* Centered on the phone's edge — evenly flanking, and never overflowing the
viewport on narrow screens where the phone spans the full column. */
.tg-showcase.is-enhanced .tg-showcase__arrow--prev { left: 0; transform: translate(-50%, -50%); }
.tg-showcase.is-enhanced .tg-showcase__arrow--next { right: 0; transform: translate(50%, -50%); }
.tg-showcase__panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.tg-showcase__text { text-align: left; }
.tg-showcase__title {
margin: .5rem 0 .75rem;
font-size: clamp(1.625rem, 3vw, 2.375rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: -.02em;
color: var(--tg-color-text);
text-wrap: balance;
}
.tg-showcase__line {
margin: 0;
max-width: 34ch;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: var(--tg-color-text-muted);
}
/* Enhanced: panels overlap in one cell and cross-fade. */
.tg-showcase.is-enhanced .tg-showcase__stage { gap: 0; }
.tg-showcase.is-enhanced .tg-showcase__panel {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .4s ease;
}
.tg-showcase.is-enhanced .tg-showcase__panel.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.tg-showcase.is-enhanced .tg-showcase__panel { transition: none; }
}
@media (max-width: 820px) {
.tg-showcase__panel { grid-template-columns: 1fr; justify-items: center; }
.tg-showcase__text { text-align: center; }
}
/* ============================================================
Hero "peek" — crop the device so it rises from the bottom of
the hero and softly fades out, giving an instant product cue
without duplicating the full card shown in the §3 showcase.
============================================================ */
.tg-hero-section { padding-bottom: 0; }
.tg-hero-visual-wrap {
margin-top: clamp(2rem, 4vw, 3.25rem);
max-height: clamp(240px, 34vh, 350px);
overflow: hidden;
-webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
/* Static hero shot — no hover lift while cropped. */
.tg-hero-visual-wrap .tg-device-phone,
.tg-hero-visual-wrap .tg-device-phone:hover { transition: none; transform: none; }
/* ============================================================
Spec C — flat & premium pricing. Razor-thin neutral borders;
brand orange reserved strictly for the primary CTAs (Activate,
Choose Team). The "Most popular" cue rides an ink badge + a
soft lift in shadow, not an orange frame. Non-CTA orange
accents (badges, the compare "+") are neutralized so the two
conversion buttons are the only orange on the section.
============================================================ */
.tg-price__trial,
.tg-price__plan {
border-color: #efece8;
box-shadow: 0 1px 2px rgba(21,23,27,.03), 0 20px 42px -30px rgba(21,23,27,.20);
}
.tg-price__plan--featured {
border-color: #e6e1db;
box-shadow: 0 2px 5px rgba(21,23,27,.05), 0 28px 54px -26px rgba(21,23,27,.30);
}
/* "Most popular" → ink badge (anchors the eye without stealing orange). */
.tg-price__flag {
background: var(--tg-color-text);
color: #fff;
}
/* "Start here" → neutral chip so the orange CTA beneath it leads. */
.tg-price__badge {
background: #f2efeb;
color: var(--tg-color-text-soft);
}
/* Compare toggle marker → neutral, not orange. */
.tg-price__compare > summary::after { color: var(--tg-color-text-muted); }
/* ============================================================
Section 8 — Final CTA. The offer stands alone in open space on
the soft surface with a gentle orange glow (no heavy orange
block). Gopher sits cleanly above the headline; one primary CTA.
============================================================ */
.tg-final-cta {
position: relative;
overflow: hidden;
background: var(--tg-color-surface);
padding: clamp(5rem, 12vw, 9rem) 1.5rem;
text-align: center;
}
.tg-final-cta::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: min(600px, 90%);
height: 400px;
transform: translate(-50%, -50%);
background: radial-gradient(50% 50% at 50% 50%, rgba(233,77,0,0.10), rgba(233,77,0,0.032) 46%, transparent 72%);
filter: blur(4px);
pointer-events: none;
}
.tg-final-cta__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.tg-final-cta__gopher { display: inline-flex; margin-bottom: 1.5rem; }
.tg-final-cta__gopher img { width: 64px; height: auto; filter: drop-shadow(0 12px 22px rgba(233,77,0,0.20)); }
.tg-final-cta__title {
max-width: 17ch;
margin: 0 0 1rem;
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.03em;
color: var(--tg-color-text);
text-wrap: balance;
}
/* Warm gain-framed promise above the button — reward, not just an ask. */
.tg-final-cta__lead {
max-width: 46ch;
margin: 0 0 2rem;
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
line-height: 1.55;
color: var(--tg-color-text-soft);
text-wrap: pretty;
}
/* Tactile micro-reward: the button gently lifts toward the cursor. All the
supporting copy sits above it — the button is the final, decisive element. */
.tg-final-cta__button { margin-top: 2rem; transition: transform .18s cubic-bezier(.2,.7,.2,1), filter .18s ease, box-shadow .18s ease; }
@media (prefers-reduced-motion: no-preference) {
.tg-final-cta__button:hover { transform: translateY(-2px); }
.tg-final-cta__button:active { transform: translateY(0); }
}
/* Affirming completion cues — green ticks that answer "what's the catch?" */
.tg-final-cta__reassure {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .55rem .75rem;
}
.tg-final-cta__chip {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .45rem .9rem;
border-radius: 999px;
background: #e7f3ec;
border: 1px solid rgba(31, 122, 77, .16);
font-size: .9rem;
font-weight: 700;
color: var(--tg-color-text);
}
.tg-final-cta__check { color: var(--tg-color-success); flex: none; }
.tg-final-cta__note { margin: 1.25rem 0 0; font-size: .95rem; color: var(--tg-color-text-muted); }
/* ============================================================
Pricing — ELEVATED. Premium material and depth, confident
price typography, curated feature highlights, a softly tinted
featured plan, and an elegant divider. Orange stays reserved
for the two primary CTAs (Activate, Choose Team).
============================================================ */
.tg-price { max-width: 62rem; }
/* Trial — refined entry offer. */
.tg-price__trial {
max-width: 34rem;
padding: clamp(2rem, 4vw, 2.75rem);
border: 1px solid #ece6df;
border-radius: 20px;
background: radial-gradient(120% 100% at 50% 0%, #fffdfb 0%, #fffaf6 100%);
box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 30px 62px -34px rgba(21,23,27,.30);
}
.tg-price__trial-amt { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* Elegant "then choose your plan" divider. */
.tg-price__or {
display: flex;
align-items: center;
gap: 1.1rem;
max-width: 30rem;
margin-left: auto;
margin-right: auto;
}
.tg-price__or::before, .tg-price__or::after {
content: "";
flex: 1;
height: 1px;
background: var(--tg-color-border);
}
/* Plan grid — equal height, comfortable gap. */
.tg-price__plans { align-items: stretch; gap: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 46rem; }
/* 46rem is the width for a row of plans. A lone plan wants the narrower width
set with the modifier further up; the class is doubled so this restatement
outranks the rule above rather than depending on source order. */
.tg-price__plans.tg-price__plans--single { max-width: 26rem; }
/* Plan card — premium material + left-aligned rhythm. */
.tg-price__plan {
align-items: stretch;
text-align: left;
padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.75rem, 3vw, 2.25rem);
border: 1px solid #ece6df;
border-radius: 22px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 24px 50px -34px rgba(21,23,27,.26);
}
.tg-price__plan--featured {
border-color: #f3ddcd;
background: linear-gradient(180deg, #fffaf6 0%, #fff6ef 100%);
box-shadow: 0 2px 6px rgba(21,23,27,.05), 0 36px 64px -30px rgba(233,77,0,.24);
}
.tg-price__plan-head { margin-bottom: 1.25rem; }
.tg-price__plan-name { margin: 0 0 .35rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.tg-price__plan-for { margin: 0; max-width: none; font-size: 1.02rem; font-weight: 500; line-height: 1.4; color: var(--tg-color-text-soft); }
.tg-price__plan-amt {
margin: 0 0 .3rem;
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.05;
color: var(--tg-color-text);
font-variant-numeric: tabular-nums;
}
.tg-price__plan-amt .tg-price__plan-unit { font-size: .85rem; font-weight: 600; color: var(--tg-color-text-muted); letter-spacing: 0; vertical-align: baseline; }
.tg-price__cur { font-size: .5em; font-weight: 700; vertical-align: .55em; margin-right: .04em; color: var(--tg-color-text-soft); }
.tg-price__per { font-size: .38em; font-weight: 600; letter-spacing: 0; margin-left: .18em; color: var(--tg-color-text-muted); }
.tg-price__meter {
margin: 0 0 1.25rem;
color: var(--tg-color-accent-hover);
font-size: .9rem;
font-weight: 600;
letter-spacing: 0;
}
.tg-price__feats {
list-style: none;
margin: 1.5rem 0 1.75rem;
padding: 1.5rem 0 0;
border-top: 1px solid #efeae4;
display: grid;
gap: .72rem;
}
.tg-price__plan--featured .tg-price__feats { border-top-color: #f3e4d7; }
.tg-price__feats li {
position: relative;
padding-left: 1.75rem;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
color: var(--tg-color-text);
}
.tg-price__feats li::before {
content: "";
position: absolute;
left: 0;
top: .1em;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
background-color: var(--tg-color-surface-strong);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: .72rem;
}
.tg-price__feats-lead {
padding-left: 0;
font-size: .78rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--tg-color-text-muted);
}
.tg-price__feats-lead::before { display: none; }
.tg-price__plan .tg-button { margin-top: auto; }
/* ============================================================
Junction homepage — split hero: value prop (left) + the live
SMS-to-opportunity proof in the device frame (right).
Collapses to one centered column on mobile.
============================================================ */
.jx-hero-split {
padding: clamp(4.5rem, 11vw, 9rem) 1.5rem clamp(4rem, 8vw, 7rem);
background: var(--tg-color-surface);
display: flex;
justify-content: center;
overflow: hidden;
}
.tg-hero-grid-container {
width: 100%;
max-width: 1180px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
.tg-hero-text-block { text-align: left; }
.jx-hero-split .tg-category-tag { margin-bottom: 1.25rem; }
.jx-hero-split .tg-hero-headline { max-width: 15ch; margin: 0 0 1.25rem; }
.jx-hero-split .tg-hero-subhead { max-width: 36rem; margin: 0 0 2rem; }
.jx-hero-split .tg-hero-actions { justify-content: flex-start; flex-wrap: wrap; gap: .75rem; }
.tg-hero-microcopy {
list-style: none;
margin: 0 0 1.75rem;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .6rem 1.5rem;
font-size: .9rem;
font-weight: 500;
color: var(--tg-color-text-soft);
}
.tg-hero-microcopy li { position: relative; padding-left: 1.45rem; }
.tg-hero-microcopy li::before {
content: "";
position: absolute;
left: 0;
top: .1em;
width: 1.05rem;
height: 1.05rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7a49' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tg-hero-visual-block { display: flex; justify-content: center; }
@media (max-width: 991px) {
.tg-hero-grid-container { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vw, 3.5rem); }
.tg-hero-text-block { text-align: center; display: flex; flex-direction: column; align-items: center; }
.jx-hero-split .tg-hero-headline,
.jx-hero-split .tg-hero-subhead { margin-left: auto; margin-right: auto; }
.jx-hero-split .tg-hero-actions { justify-content: center; }
.tg-hero-microcopy { justify-content: center; }
}
/* ============================================================
Junction §2 — Zero-App Dispatch. A four-step flow (the real
call pipeline) + three feature points, incl. Secure Call
Bridging. Flow reads left-to-right on desktop, stacks with
down-arrows on mobile.
============================================================ */
.tg-flow {
list-style: none;
margin: clamp(2.75rem, 5vw, 3.75rem) auto 0;
padding: 0;
max-width: 62rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 1.6rem;
}
.tg-flow__step {
position: relative;
padding: .85rem 1.4rem;
border: 1px solid var(--tg-color-border);
border-radius: 14px;
background: var(--tg-color-bg);
font-weight: 600;
font-size: .98rem;
color: var(--tg-color-text);
white-space: nowrap;
box-shadow: 0 1px 2px rgba(21,23,27,.04), 0 16px 32px -28px rgba(21,23,27,.32);
}
.tg-flow__step:not(:last-child)::after {
content: "\2192";
position: absolute;
right: -1.1rem;
top: 50%;
transform: translate(100%, -50%);
color: var(--tg-color-text-muted);
font-weight: 700;
}
.tg-flow__step--accent {
border-color: var(--tg-color-text);
background: var(--tg-color-text);
color: #fff;
}
@media (max-width: 720px) {
.tg-flow { flex-direction: column; gap: 1.5rem; }
.tg-flow__step { width: 100%; max-width: 22rem; text-align: center; white-space: normal; }
.tg-flow__step:not(:last-child)::after {
content: "\2193";
right: auto;
left: 50%;
top: auto;
bottom: -1.1rem;
transform: translate(-50%, 100%);
}
}
.tg-dispatch__points {
margin: clamp(3rem, 6vw, 4.5rem) auto 0;
max-width: 60rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* The top margin above clears a visible section heading. Where the heading is
screen-reader-only (the junction proof strip), there is nothing to clear and
the margin just stacks onto the section padding. */
.tg-dispatch__points--flush { margin-top: 0; }
.tg-dispatch__point { padding-top: 1.25rem; border-top: 2px solid var(--tg-color-border-strong); }
.tg-dispatch__point h3 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; color: var(--tg-color-text); }
.tg-dispatch__point p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--tg-color-text-muted); }
@media (max-width: 760px) {
.tg-dispatch__points { grid-template-columns: 1fr; max-width: 32rem; }
}
/* ============================================================
Junction §3 — The Shift. Two-panel contrast: a muted "basic"
card (dashes) vs an emphasized TextGopher card (checks + warm
tint). Reads them-vs-us; stacks on mobile.
============================================================ */
/* The comparison is a real : rows pair the two sides, so alignment is
the browser's job and cannot drift when one side wraps to more lines.
--vs-pad is the old card padding, reused so the columns keep their inset. */
.tg-versus {
--vs-pad: clamp(1.75rem, 3vw, 2.5rem);
max-width: 60rem;
margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
}
.tg-versus__label {
margin: 0;
padding: var(--vs-pad) var(--vs-pad) 1.35rem;
font-size: .8rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
vertical-align: bottom;
}
th.tg-versus__col--basic { color: var(--tg-color-text-muted); }
th.tg-versus__col--tg { color: var(--tg-color-text); }
.tg-versus td {
position: relative;
padding: .5rem var(--vs-pad) .5rem calc(var(--vs-pad) + 1.75rem);
font-size: .95rem;
line-height: 1.5;
vertical-align: top;
}
.tg-versus tbody tr:last-child td { padding-bottom: var(--vs-pad); }
td.tg-versus__col--basic { color: var(--tg-color-text-muted); }
td.tg-versus__col--basic strong { color: var(--tg-color-text-soft); }
td.tg-versus__col--tg { color: var(--tg-color-text); }
.tg-versus td strong { font-weight: 700; display: inline; }
td.tg-versus__col--basic::before {
content: "\2013";
position: absolute;
left: calc(var(--vs-pad) + .15rem);
top: calc(.5rem - .02em);
font-weight: 700;
color: var(--tg-color-text-muted);
}
td.tg-versus__col--tg::before {
content: "";
position: absolute;
left: var(--vs-pad);
top: calc(.5rem + .12em);
width: 1.1rem;
height: 1.1rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c7a49' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Stacked: a table cannot keep its columns grouped once it linearises, so the
pairs interleave and each cell names its own column. Reads as
"The reply — basic / The reply — TextGopher", which is the comparison. */
@media (max-width: 700px) {
.tg-versus { --vs-pad: 0rem; }
.tg-versus, .tg-versus tbody, .tg-versus tr, .tg-versus td { display: block; width: auto; }
.tg-versus thead { display: none; }
.tg-versus tbody tr + tr { border-top: 1px solid var(--tg-color-border); }
.tg-versus tbody tr { padding: 1.25rem 0; }
.tg-versus tbody tr:last-child td { padding-bottom: .5rem; }
.tg-versus td::after {
content: attr(data-col);
display: block;
margin-top: .2rem;
font-family: var(--tg-font-mono);
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tg-color-text-muted);
}
}
/* ============================================================
Junction §4 — How It Works: four call-forwarding steps.
Centered numbered tokens; 4-up desktop, 2x2 tablet, 1 mobile.
============================================================ */
.tg-steps4 {
margin: clamp(3rem, 6vw, 5rem) auto 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1.75rem, 3vw, 2.75rem);
max-width: 72rem;
}
.tg-step4 { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tg-step4__num {
display: flex;
align-items: center;
justify-content: center;
width: 2.85rem;
height: 2.85rem;
margin-bottom: 1.15rem;
border-radius: 999px;
background: var(--tg-color-accent-soft);
color: var(--tg-color-accent);
font-weight: 800;
font-size: 1.2rem;
}
.tg-step4__title { margin: 0 0 .45rem; font-size: 1.1rem; font-weight: 700; color: var(--tg-color-text); }
.tg-step4__copy { margin: 0; max-width: 26ch; font-size: .93rem; line-height: 1.5; color: var(--tg-color-text-muted); }
@media (max-width: 900px) { .tg-steps4 { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.75rem; max-width: 42rem; } }
@media (max-width: 520px) { .tg-steps4 { grid-template-columns: 1fr; max-width: 24rem; } }
/* ============================================================
"How it works" — Gus's story in four beats. The scene art now
FLOATS on the section background: the brand SVGs fade to
transparent edges, so with no box around them they blend into
the page. The comic accents stay — numbered tags, speech
bubbles, the wordmark sticker — and Gus pops IN FRONT of his
bubble in the first two beats.
============================================================ */
.tg-jx .jx-comic {
margin: clamp(3rem, 6vw, 4.5rem) auto 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
max-width: 48rem;
}
.tg-jx .jx-comic__panel {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Numbered title — a clean label, no box. */
.tg-jx .jx-comic__caption {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
margin: 0 0 .35rem;
padding: 0;
font-weight: 800;
font-size: 1rem;
color: var(--tg-color-text);
}
.tg-jx .jx-comic__num {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
background: var(--tg-color-accent);
border: 2px solid #17140f;
color: #fff;
font-size: 1rem;
font-weight: 800;
}
/* Floating art stage — transparent; the scene blends into the page. Fixed
height so all four beats sit on one clean line. */
.tg-jx .jx-comic__art {
position: relative;
width: 100%;
flex: 0 0 auto;
height: 230px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 2.4rem .5rem 0;
}
.tg-jx .jx-comic__art img { display: block; width: auto; max-width: 100%; height: auto; }
/* One uniform display height for the four main scenes. */
.tg-jx .jx-comic__scene { height: 178px; max-height: 178px; }
/* Incoming-call effect (beat 1) — a ringing phone badge with pulsing rings. */
.tg-jx .jx-comic__ring {
position: absolute;
z-index: 5;
left: 9%;
bottom: 1.5rem;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--tg-color-accent);
color: #fff;
border: 2.5px solid #17140f;
box-shadow: 2px 3px 0 rgba(23, 20, 15, 0.85);
}
.tg-jx .jx-comic__ring::before,
.tg-jx .jx-comic__ring::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 999px;
border: 2.5px solid var(--tg-color-accent);
animation: jxRing 1.8s cubic-bezier(.2,.6,.3,1) infinite;
}
.tg-jx .jx-comic__ring::after { animation-delay: .9s; }
.tg-jx .jx-comic__ring svg { animation: jxRingShake 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes jxRing {
0% { transform: scale(1); opacity: .55; }
100% { transform: scale(2.2); opacity: 0; }
}
@keyframes jxRingShake {
0%, 42%, 100% { transform: rotate(0); }
8% { transform: rotate(-15deg); }
16% { transform: rotate(13deg); }
24% { transform: rotate(-9deg); }
32% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
.tg-jx .jx-comic__ring::before,
.tg-jx .jx-comic__ring::after { animation: none; opacity: 0; }
.tg-jx .jx-comic__ring svg { animation: none; }
}
/* Beats 1 & 2: Gus's head pops IN FRONT of his speech bubble. The extra
bottom padding gives his head a "landing zone" so he overlaps empty
bubble space, never the words. */
.tg-jx .jx-comic__panel--front .jx-comic__scene { position: relative; z-index: 3; }
.tg-jx .jx-comic__panel--front .jx-comic__bubble--gus {
top: .35rem; left: 50%; right: auto; transform: translateX(-50%);
max-width: 80%; padding-bottom: 1.6rem;
}
/* Text-only TextGopher wordmark — a comic "brand sticker". */
.tg-jx .jx-comic__logo {
position: absolute;
z-index: 4;
right: .25rem;
bottom: 1.1rem;
padding: .32rem .6rem;
background: #fff;
border: 2.5px solid #17140f;
border-radius: 10px;
box-shadow: 2px 3px 0 rgba(23, 20, 15, 0.85);
font-size: .9rem;
font-weight: 800;
letter-spacing: -.01em;
line-height: 1;
color: var(--tg-color-text);
}
.tg-jx .jx-comic__logo em { font-style: normal; color: var(--tg-color-accent); }
.tg-jx .jx-comic__logo sup { font-size: .5em; vertical-align: super; }
/* Handoff — Gus routes (centered) and Rae receives at the destination. */
.tg-jx .jx-comic__art--duo { justify-content: center; }
.tg-jx .jx-comic__art--duo .jx-comic__gus { max-height: 150px; margin-bottom: .5rem; }
.tg-jx .jx-comic__art--duo .jx-comic__friend { position: absolute; right: 5%; bottom: .2rem; max-height: 124px; }
/* Speech bubbles — inked, with a little tail. */
.tg-jx .jx-comic__bubble {
position: absolute;
z-index: 2;
max-width: 78%;
padding: .5rem .7rem;
background: #fff;
border: 2.5px solid #17140f;
border-radius: 14px;
font-size: .8rem;
font-weight: 700;
line-height: 1.25;
color: #17140f;
box-shadow: 2px 3px 0 rgba(23,20,15,0.85);
}
.tg-jx .jx-comic__bubble::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 9px solid transparent;
}
/* Gus speaks from the top-left. */
.tg-jx .jx-comic__bubble--gus { top: .4rem; left: .4rem; }
.tg-jx .jx-comic__bubble--gus::after {
bottom: -15px; left: 22px;
border-top-color: #17140f;
}
.tg-jx .jx-comic__bubble--gus::before {
content: ""; position: absolute; bottom: -11px; left: 24px;
width: 0; height: 0; border: 7px solid transparent; border-top-color: #fff; z-index: 1;
}
/* Panel 4 is the only panel with two bubbles. The shared 78% cap lets them
overlap once the panel narrows, so the handoff panel gives each bubble its
own share of the width. Keeps them side by side (Gus asks, Rae answers)
down to a ~205px panel. */
.tg-jx .jx-comic__panel--handoff .jx-comic__bubble--gus { max-width: 58%; }
.tg-jx .jx-comic__panel--handoff .jx-comic__bubble--friend { max-width: 36%; }
/* Rae answers from the top-right, tinted to match her shirt. */
.tg-jx .jx-comic__bubble--friend { top: .4rem; right: .4rem; background: #e6f6f2; }
.tg-jx .jx-comic__bubble--friend::after {
bottom: -15px; right: 22px;
border-top-color: #17140f;
}
.tg-jx .jx-comic__bubble--friend::before {
content: ""; position: absolute; bottom: -11px; right: 24px;
width: 0; height: 0; border: 7px solid transparent; border-top-color: #e6f6f2; z-index: 1;
}
/* Copy — centered under the floating scene. */
.tg-jx .jx-comic__copy {
margin: 1rem auto 0;
padding: 0 .4rem;
max-width: 30ch;
font-size: .92rem;
line-height: 1.55;
color: var(--tg-color-text-muted);
}
/* Wide screens get the strip the panels were written for: one row, read
left-to-right, so the handoff in panel 4 is the end of a sentence rather
than the bottom-right corner of a block. 1280px is the floor at which
panels stay >=240px wide, which is what panel 4's two bubbles need to sit
side by side (see .jx-comic__panel--handoff above). Below it, 2x2. */
@media (min-width: 1280px) {
.tg-jx .jx-comic { grid-template-columns: repeat(4, 1fr); max-width: 72rem; }
}
@media (max-width: 900px) {
.tg-jx .jx-comic { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; max-width: 44rem; }
}
@media (max-width: 520px) {
.tg-jx .jx-comic { grid-template-columns: 1fr; max-width: 24rem; }
}
/* ============================================================
Junction §7 — Activation & Pricing pairing (Activation + Solo).
Reuses the elevated pricing card system; adds the save note
and a single centered Activate CTA below the pair.
============================================================ */
.tg-price__plans--pair { max-width: 44rem; }
.tg-price__save {
margin: 1rem 0 0;
padding-top: 1rem;
border-top: 1px solid #f3e4d7;
font-size: .85rem;
font-weight: 600;
color: var(--tg-color-text-soft);
}
.tg-price__fine { margin: .55rem 0 0; font-size: .8rem; color: var(--tg-color-text-muted); }
.tg-price__activate { margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; }
.tg-price__terms {
margin: 0 auto 1.6rem;
max-width: 44rem;
font-size: .95rem;
line-height: 1.7;
color: var(--tg-color-text-muted);
}
.tg-price__terms a { color: var(--tg-color-accent-hover); font-weight: 600; white-space: nowrap; }
/* Landing-page (§7) pricing: refine the card shadows — softer,
tighter, and neutral (no orange cast). Scoped to the homepage;
the industry-page pricing keeps its own elevation.
============================================================ */
.tg-price__plans--pair .tg-price__plan {
box-shadow: 0 1px 1px rgba(21,23,27,.04), 0 5px 10px -4px rgba(21,23,27,.05), 0 18px 36px -18px rgba(21,23,27,.10);
}
.tg-price__plans--pair .tg-price__plan--featured {
box-shadow: 0 1px 1px rgba(21,23,27,.05), 0 7px 14px -5px rgba(21,23,27,.06), 0 24px 46px -20px rgba(21,23,27,.13);
}
/* ═══════════════════════════════════════════════════════════════════════
▶▶▶ "SIGNAL" REBRAND PROTOTYPE — REVERSIBLE ◀◀◀
Delete this entire block to revert to the warm system. Cool graphite
neutrals, signal-orange kept, a monospace data language, and one dark
"intelligence" band (§2 Zero-App Dispatch).
═══════════════════════════════════════════════════════════════════════ */
:root {
--tg-color-bg: #ffffff;
--tg-color-surface: #f5f7fa; /* cool near-white (was warm cream) */
--tg-color-surface-strong: #eceff4; /* cool (was warm) */
--tg-color-text: #0e1116; /* cool graphite ink */
--tg-color-text-soft: #3f4855; /* cool graphite */
--tg-color-text-muted: #6b7482; /* cool graphite muted */
--tg-color-border: #e6e9ef; /* cool hairline (was beige) */
--tg-color-border-strong: #d4dae2; /* cool */
--tg-color-accent: #e94d00; /* signal orange — kept */
--tg-color-accent-hover: #c94000;
--tg-color-accent-soft: #fff0e7;
--tg-font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
/* ── Monospace data language: labels, figures, timestamps, card fields ── */
.jx-proof__opp-label, .jx-proof__biz-time,
.tg-versus__label, .tg-flow__step, .jx-life__stage {
font-family: var(--tg-font-mono);
letter-spacing: 0.02em;
}
.jx-proof__rows dd, .jx-proof__biz-time { font-variant-numeric: tabular-nums; }
.jx-proof__rows dt {
font-family: var(--tg-font-mono);
text-transform: uppercase;
letter-spacing: .04em;
font-size: .68rem;
}
/* ── Cool the hard-coded warm surfaces from the newer sections ── */
.tg-price__trial { border-color: #e6e9ef; background: linear-gradient(180deg, #ffffff, #f7f9fc); }
.tg-price__plan { border-color: #e6e9ef; }
.tg-price__plan--featured { border-color: #cfd8e2; background: linear-gradient(180deg, #ffffff, #f3f7fc); }
.tg-price__feats { border-top-color: #eceff4; }
.tg-price__plan--featured .tg-price__feats { border-top-color: #dbe2ea; }
.tg-price__save { border-top-color: #dbe2ea; }
/* (The versus block is flat columns since the SIGNAL rollout below — it has no
card surface left to cool.) */
.tg-flow__step { border-color: #e6e9ef; }
.tg-dispatch__point { border-top-color: #d4dae2; }
/* ── ▶ The one DARK "intelligence" band — §2 Zero-App Dispatch ── */
.jx-dispatch { background: #0d1117; }
.jx-dispatch .tg-heading { color: #f4f7fb; }
.jx-dispatch .tg-eyebrow { color: #ff6a2b; }
.jx-dispatch .tg-lead { color: #aab3c0; }
.jx-dispatch .tg-flow__step { background: #171d26; border-color: #2a323e; color: #e8ecf1; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 32px -28px rgba(0,0,0,.8); }
.jx-dispatch .tg-flow__step--accent { background: #e94d00; border-color: #e94d00; color: #fff; }
.jx-dispatch .tg-flow__step:not(:last-child)::after { color: #6b7482; }
.jx-dispatch .tg-dispatch__point { border-top-color: #2a323e; }
.jx-dispatch .tg-dispatch__point h3 { color: #f4f7fb; }
.jx-dispatch .tg-dispatch__point p { color: #aab3c0; }
/* ── SIGNAL prototype: hero as instrument (grid + live signal + telemetry) ── */
.jx-hero-split {
position: relative;
background-color: var(--tg-color-surface);
background-image:
linear-gradient(rgba(14,17,22,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(14,17,22,.035) 1px, transparent 1px);
background-size: 46px 46px;
}
.tg-hero-grid-container { position: relative; z-index: 2; }
.jx-hero-signal {
position: absolute;
left: 0; right: 0; bottom: 14%;
height: 90px;
z-index: 1;
pointer-events: none;
opacity: .55;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.jx-hero-signal svg { width: 100%; height: 100%; display: block; }
.jx-hero-signal path {
fill: none;
stroke: var(--tg-color-accent);
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 2600;
stroke-dashoffset: 2600;
animation: jx-signal-draw 2.6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes jx-signal-draw { to { stroke-dashoffset: 0; } }
.jx-hero-status {
display: inline-flex;
align-items: center;
gap: .55rem;
margin: 0 0 1.15rem;
font-family: var(--tg-font-mono);
font-size: .72rem;
letter-spacing: .14em;
color: var(--tg-color-text-muted);
}
.jx-hero-status__dot {
width: 7px; height: 7px; border-radius: 50%;
background: #1c7a49;
box-shadow: 0 0 0 3px rgba(28,122,73,.16);
animation: jx-pulse 2s ease-in-out infinite;
}
@keyframes jx-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
.jx-hero-signal path { animation: none; stroke-dashoffset: 0; }
.jx-hero-status__dot { animation: none; }
}
/* ── SIGNAL rollout: turn the boxes into instrument readouts ── */
/* Sharper technical corners (was soft/friendly 20–22px) */
.tg-price__plan, .tg-price__trial,
.tg-flow__step, .jx-industry__panel, .tg-price__meter { border-radius: 7px; }
.tg-device-phone { border-radius: 30px; }
.tg-device-phone__screen { border-radius: 22px; }
/* Pricing: flat instrument cards — hairline frame, no soft shadow;
featured is marked by a signal-orange top rule, not a tint. */
.tg-price__plans--pair .tg-price__plan { box-shadow: none; border-color: var(--tg-color-border); }
.tg-price__trial { box-shadow: none; }
.tg-price__plan--featured { background: #ffffff !important; position: relative; }
.tg-price__plan--featured::before {
content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
background: var(--tg-color-accent); border-radius: 7px 7px 0 0;
}
/* §3 The Shift: flat spec columns, centre hairline, signal bar on TextGopher.
With border-collapse the per-cell border and inset shadow join up into one
continuous rule and one continuous orange bar down the column. */
.tg-versus {
border-top: 1px solid var(--tg-color-border);
border-bottom: 1px solid var(--tg-color-border);
}
.tg-versus__col--tg {
border-left: 1px solid var(--tg-color-border);
box-shadow: inset 2px 0 0 var(--tg-color-accent);
}
/* Stacked, the bar has no column to run down — the check marks and the
per-cell column labels carry the distinction instead. */
@media (max-width: 700px) {
.tg-versus__col--tg { border-left: 0; box-shadow: none; }
}
/* Flow steps: flatter */
.tg-flow__step { box-shadow: none; }
/* ── SIGNAL rollout §4: connected process rail + ringed mono nodes ── */
.tg-steps4 { position: relative; }
.tg-steps4::before {
content: ""; position: absolute; top: 1.42rem; left: 12%; right: 12%; height: 1px;
background: var(--tg-color-border-strong); z-index: 0;
}
.tg-step4 { position: relative; z-index: 1; }
.tg-step4__num {
width: 2.85rem; height: 2.85rem;
background: var(--tg-color-bg) !important;
color: var(--tg-color-text) !important;
border: 1px solid var(--tg-color-border-strong);
font-family: var(--tg-font-mono);
font-weight: 600; font-size: .92rem;
}
/* ── SIGNAL rollout §5: terminal selector + de-boxed readout ── */
.jx-industry__tab { border-radius: 6px; }
.jx-industry__tab::before { display: none !important; }
.jx-industry__tab-icon {
background: transparent !important;
color: var(--tg-color-text-soft) !important;
border: 1px solid var(--tg-color-border);
border-radius: 6px;
}
.tg-jx .jx-industry__tab[aria-selected="true"] {
border-color: var(--tg-color-border-strong) !important;
background: var(--tg-color-surface-strong) !important;
color: var(--tg-color-text) !important;
box-shadow: inset 3px 0 0 var(--tg-color-accent) !important;
}
.jx-industry__tab[aria-selected="true"] .jx-industry__tab-icon {
background: var(--tg-color-text) !important;
color: #fff !important;
border-color: var(--tg-color-text) !important;
}
.jx-industry__panel {
border: 0 !important; box-shadow: none !important; background: transparent !important;
border-radius: 0 !important;
border-left: 1px solid var(--tg-color-border) !important;
padding: 0 0 0 clamp(1.75rem, 3vw, 2.75rem) !important;
}
.jx-industry__bar { display: none !important; }
.jx-industry__panel .jx-eyebrow-sm {
color: var(--tg-color-text-muted) !important;
font-family: var(--tg-font-mono);
letter-spacing: .04em; text-transform: uppercase;
}
@media (max-width: 860px) {
.jx-industry__panel {
border-left: 0 !important;
border-top: 1px solid var(--tg-color-border) !important;
padding: 1.5rem 0 0 !important;
}
}
/* ── SIGNAL §5: drop pictorial icons → monospace index (data-catalog) ── */
.jx-industry__tab-icon svg { display: none !important; }
.jx-industry__tabs { counter-reset: ind; }
.jx-industry__tab { counter-increment: ind; }
.jx-industry__tab-icon::after {
content: counter(ind, decimal-leading-zero);
font-family: var(--tg-font-mono);
font-size: .8rem;
font-weight: 600;
color: var(--tg-color-text-muted);
}
.jx-industry__tab[aria-selected="true"] .jx-industry__tab-icon::after { color: #fff; }
.jx-industry__tab span { letter-spacing: .01em; }
/* ── SIGNAL: elevate the industry-page "How it works" (3 steps) ──
Same process-rail + ringed mono nodes as the junction §4. Applies
to all 5 industry pages via the shared template. */
.tg-steps3 { position: relative; }
.tg-steps3::before {
content: ""; position: absolute; top: 1.5rem; left: 17%; right: 17%; height: 1px;
background: var(--tg-color-border-strong); z-index: 0;
}
.tg-step3 { position: relative; z-index: 1; }
.tg-step3__num {
background: var(--tg-color-bg) !important;
color: var(--tg-color-text) !important;
border: 1px solid var(--tg-color-border-strong);
font-family: var(--tg-font-mono);
font-weight: 600;
}
@media (max-width: 720px) { .tg-steps3::before { display: none; } }
/* ═══════════════════════════════════════════════════════════════════════
APPLE-GRADE TYPOGRAPHY & RHYTHM PASS
System (SF Pro) type · semibold hierarchy driven by size, not weight ·
refined tracking + leading · generous, consistent rhythm.
═══════════════════════════════════════════════════════════════════════ */
:root {
--tg-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
--tg-section-space: clamp(4rem, 7vw, 7rem);
--tg-section-space-compact: clamp(3rem, 5.5vw, 5rem);
}
body {
font-family: var(--tg-font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.006em;
color: var(--tg-color-text);
}
/* Display / hero — refined semibold, tight, open leading */
h1, .tg-display, .tg-jx .tg-display, .tg-hero-headline {
font-family: var(--tg-font-sans);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
}
/* Section headings */
h2, .tg-heading, .tg-jx .tg-heading {
font-weight: 600;
letter-spacing: -0.021em;
line-height: 1.1;
}
h3 { font-weight: 600; letter-spacing: -0.014em; }
/* Component sub-titles → consistent semibold */
.tg-step3__title, .tg-step4__title, .tg-price__plan-name,
.tg-showcase__title, .tg-case__title, .tg-dispatch__point h3,
.tg-control-point__title, .tg-versus td strong {
font-weight: 600;
letter-spacing: -0.012em;
}
/* Eyebrows / labels / telemetry — light + tracked, never black */
.tg-eyebrow, .tg-jx .tg-eyebrow, .tg-category-tag {
font-weight: 600;
letter-spacing: 0.08em;
font-size: 0.75rem;
}
/* Lead / subhead — calm, readable */
.tg-lead, .tg-hero-subhead {
font-weight: 400;
color: var(--tg-color-text-soft);
line-height: 1.55;
letter-spacing: -0.006em;
}
/* Final CTA: glow removed entirely (all 5 industry pages). */
.tg-final-cta::before { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════
▶ DARK-SECTIONS EXPLORATION (reversible) — black header + §6/§7 + footer,
logo "Text" in white. Delete this block to revert.
═══════════════════════════════════════════════════════════════════════ */
/* Header */
.jx-nav { background: #0d1117 !important; border-bottom: 1px solid #22272e !important; }
.jx-nav__brand { color: #ffffff !important; }
.jx-nav__brand em { color: #ff6a2b !important; }
.jx-nav__links a, .jx-nav__signin { color: #cfd6e0 !important; }
.jx-nav__links a:hover, .jx-nav__signin:hover { color: #ffffff !important; }
.jx-nav__toggle-bars, .jx-nav__toggle-bars::before, .jx-nav__toggle-bars::after { background: #e8ecf1 !important; }
/* ============================================================
Governed Authority — the "controlled workflow" contract made
visible. Two-column may / will-not, green check vs red no-sign.
============================================================ */
.ga-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2.5vw, 1.75rem);
max-width: 56rem;
margin-inline: auto;
}
/* Cooled onto the --tg-color-* palette. This block was still on the original
warm --paper/--line/--ink tokens, which made the cards read cream against
every other white card on the page. Contrast was never the problem; tone
was. The green check and red no-sign keep their semantic colours. */
.ga-card {
background: var(--tg-color-bg);
border: 1px solid var(--tg-color-border);
border-radius: var(--tg-radius-md);
box-shadow: var(--tg-shadow-sm);
padding: clamp(1.5rem, 3vw, 2.1rem);
}
.ga-card--may { border-top: 3px solid var(--tg-color-success); }
.ga-card--not { border-top: 3px solid var(--urgent); }
.ga-card__title {
margin: 0 0 1.15rem;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--tg-color-text);
}
.ga-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.ga-list li {
position: relative;
padding-left: 2rem;
color: var(--tg-color-text);
font-weight: 500;
line-height: 1.35;
}
.ga-list li strong { font-weight: 700; }
.ga-list li::before {
content: ""; position: absolute; left: 0; top: 0.02em;
width: 1.4rem; height: 1.4rem; border-radius: 999px;
}
.ga-list li::after { content: ""; position: absolute; top: 0.30em; }
.ga-list--may li::before { background: #e7f3ec; }
.ga-list--may li::after {
left: 0.32rem; width: 0.78rem; height: 0.78rem; background: var(--tg-color-success);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.ga-list--not li::before { background: var(--urgent-soft); }
.ga-list--not li::after {
left: 0.29rem; width: 0.84rem; height: 0.84rem; background: var(--urgent);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* `body.tg p { margin: 0 }` (0,1,2) outranks a lone `.ga-note` (0,1,0), so the
space above this line never applied and it sat flush against the cards.
Matching body.tg here wins the cascade instead of relying on !important. */
body.tg .ga-note {
max-width: 46rem;
margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
text-align: center;
color: var(--tg-color-text-muted);
font-size: 0.95rem;
line-height: 1.5;
}
@media (max-width: 640px) {
.ga-grid { grid-template-columns: 1fr; }
}
/* Homepage hero (.tghero): missed call to structured opportunity.
Scoped presentation of the approved editorial proof composition.
Uses the existing site font stack (no new font, no import). */
.tghero {
background: var(--tg-color-surface);
padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem clamp(2.75rem, 5vw, 5rem);
}
.tghero,
.tghero * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-optical-sizing: auto;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.tghero__grid {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 6vw, 4rem);
align-items: center;
}
.tghero__content {
min-width: 0;
}
.tghero svg {
stroke-width: 1.7px;
}
.tghero__eyebrow {
margin: 0 0 1.25rem;
font-size: var(--tg-font-size-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tg-color-accent-hover);
}
.tghero__eyebrow::after {
content: "";
display: block;
width: 2.75rem;
height: 2px;
margin-top: 0.7rem;
border-radius: 2px;
background: var(--tg-color-accent-hover);
}
.tghero__headline {
margin: 0 0 1.25rem;
max-width: 15ch;
font-size: clamp(2.5rem, 5vw, 4.25rem);
line-height: 1.04;
letter-spacing: -0.032em;
font-weight: 700;
color: var(--tg-color-text);
}
.tghero__accent {
color: var(--tg-color-accent);
}
.tghero__lead {
margin: 0 0 1.55rem;
max-width: 34ch;
font-size: clamp(1.02rem, 1.15vw, 1.15rem);
line-height: 1.6;
color: var(--tg-color-text-soft);
}
.tghero__actv {
list-style: none;
margin: 0 0 1.4rem;
padding: 0.35rem 1.2rem;
max-width: 30rem;
border: 1px solid rgba(23, 18, 12, 0.06);
border-radius: 1rem;
background: transparent;
box-shadow: 0 1px 1px rgba(21, 17, 11, 0.02), 0 10px 26px -20px rgba(21, 17, 11, 0.08);
}
.tghero__actv-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 0;
border-top: 1px solid rgba(23, 18, 12, 0.07);
font-size: 0.95rem;
color: var(--tg-color-text-soft);
}
.tghero__actv-item:first-child {
border-top: 0;
}
.tghero__actv-item--price {
font-weight: 800;
color: var(--tg-color-text);
}
.tghero__actv-badge {
flex: 0 0 auto;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 800;
font-size: 0.85rem;
color: #fff;
background: var(--tg-color-accent);
}
.tghero__actv-ico {
flex: 0 0 auto;
width: 1.5rem;
height: 1.5rem;
color: var(--tg-color-text-muted);
}
.tghero__cta {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.tghero__cta .tg-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
}
.tghero__cta .tg-button svg {
flex: 0 0 auto;
width: 1.05rem;
height: 1.05rem;
margin-right: 0.5rem;
}
.tghero__reassure {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.1rem;
font-size: 0.9rem;
color: var(--tg-color-text-muted);
}
.tghero__reassure svg {
flex: 0 0 auto;
width: 1.05rem;
height: 1.05rem;
color: var(--tg-color-text-muted);
}
.tghero__authority {
display: flex;
align-items: flex-start;
gap: 0.55rem;
margin: 0;
padding-top: 1rem;
max-width: 36ch;
border-top: 1px solid rgba(23, 18, 12, 0.07);
font-size: 0.85rem;
line-height: 1.5;
color: var(--tg-color-text-muted);
}
.tghero__authority svg {
flex: 0 0 auto;
width: 1.05rem;
height: 1.05rem;
margin-top: 0.1rem;
color: var(--tg-color-text-muted);
}
.tghero__proofcol {
min-width: 0;
display: grid;
gap: 1.35rem;
}
.tghero-convo {
width: 100%;
padding: 1rem 1.15rem 1.15rem;
border: 1px solid rgba(23, 18, 12, 0.06);
border-radius: 1.1rem;
background: transparent;
box-shadow: 0 1px 2px rgba(21, 17, 11, 0.02), 0 14px 34px -24px rgba(21, 17, 11, 0.1);
}
.tghero-convo__head {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.9rem;
}
.tghero-convo__mark {
flex: 0 0 auto;
width: 1.9rem;
height: 1.9rem;
border-radius: 0.6rem;
display: grid;
place-items: center;
font-weight: 800;
font-size: 0.85rem;
color: var(--tg-color-accent);
background: var(--tg-color-accent-soft);
}
.tghero-convo__biz {
font-weight: 700;
font-size: 0.95rem;
color: var(--tg-color-text);
}
.tghero-convo__tag {
margin-left: auto;
padding: 0.22rem 0.55rem;
border: 1px solid rgba(23, 18, 12, 0.1);
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tg-color-text-muted);
}
.tghero-convo__thread {
display: grid;
gap: 0.5rem;
}
.tghero-bubble {
max-width: 78%;
margin: 0;
padding: 0.6rem 0.85rem;
border-radius: 1rem;
font-size: 0.9rem;
line-height: 1.4;
}
.tghero-bubble--biz {
justify-self: end;
background: var(--tg-color-accent-soft);
color: #7a2e08;
border-bottom-right-radius: 0.35rem;
}
.tghero-bubble--cust {
justify-self: start;
background: #f1f2f4;
color: var(--tg-color-text);
border-bottom-left-radius: 0.35rem;
}
.tghero-opp {
width: 100%;
padding: 1.35rem 1.5rem 1.5rem;
border: 1px solid rgba(23, 18, 12, 0.07);
border-radius: 1.1rem;
background: transparent;
box-shadow: 0 1px 2px rgba(21, 17, 11, 0.02), 0 4px 10px -6px rgba(21, 17, 11, 0.04), 0 24px 50px -30px rgba(21, 17, 11, 0.13);
}
.tghero-opp__head {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.85rem;
}
.tghero-opp__eyebrow {
margin: 0;
font-size: var(--tg-font-size-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tg-color-accent-hover);
}
.tghero-opp__title {
margin: 0.4rem 0 0;
font-size: clamp(1.35rem, 2vw, 1.6rem);
line-height: 1.15;
letter-spacing: -0.01em;
font-weight: 800;
color: var(--tg-color-text);
}
.tghero-opp__mark {
margin-left: auto;
flex: 0 0 auto;
width: 2.4rem;
height: 2.4rem;
border-radius: 0.7rem;
display: grid;
place-items: center;
color: var(--tg-color-accent);
border: 1px solid var(--tg-color-accent-soft);
background: #fff;
}
.tghero-opp__mark svg {
width: 1.25rem;
height: 1.25rem;
}
.tghero-opp__rows {
margin: 0;
display: grid;
gap: 0;
}
.tghero-opp__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 0;
border-top: 1px solid rgba(23, 18, 12, 0.07);
}
.tghero-opp__row:first-child {
border-top: 0;
}
.tghero-opp__label {
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-size: 0.92rem;
color: var(--tg-color-text-muted);
}
.tghero-opp__label svg {
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
color: var(--tg-color-text-muted);
}
.tghero-opp__dot {
flex: 0 0 auto;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
background: var(--tg-color-accent);
}
.tghero-opp__value {
margin: 0;
justify-self: end;
text-align: right;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--tg-color-text);
}
@media (min-width: 30rem) {
.tghero__cta {
flex-direction: row;
flex-wrap: wrap;
}
.tghero__cta .tg-button {
width: auto;
}
}
@media (min-width: 64rem) {
.tghero__grid {
grid-template-columns: 45fr 55fr;
gap: clamp(3rem, 5vw, 5rem);
}
.tghero-convo {
width: 72%;
justify-self: center;
}
}