/* ============================================================
ENHANCEMENTS - credibility + conversion additions
Adds to styles.css. Loaded last so it can override.
============================================================ */
/* ---------- Sticky "Book a demo" bar ---------- */
.sticky-cta {
position: fixed;
left: 50%;
bottom: 24px;
transform: translate(-50%, 24px);
z-index: 60;
display: flex; align-items: center; gap: 14px;
background: #14130F;
color: #fff;
padding: 10px 10px 10px 20px;
border-radius: 999px;
box-shadow: 0 18px 50px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.10);
opacity: 0;
pointer-events: none;
transition: opacity 220ms var(--ease), transform 260ms var(--ease);
}
.sticky-cta.is-visible {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.sticky-cta-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #29B36A;
box-shadow: 0 0 0 4px rgba(41,179,106,0.18);
animation: pulse 2s var(--ease) infinite;
flex: none;
}
.sticky-cta-text { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.92); white-space: nowrap; }
.sticky-cta-text strong { color: #fff; font-weight: 700; }
.sticky-cta .btn-primary { padding: 9px 16px; font-size: 13px; }
.sticky-cta-close {
width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center;
color: rgba(255,255,255,0.55);
margin-left: 2px;
transition: background 120ms, color 120ms;
}
.sticky-cta-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sticky-cta-close svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
.sticky-cta { bottom: 12px; padding: 8px 8px 8px 14px; gap: 8px; }
.sticky-cta-text { font-size: 12.5px; }
.sticky-cta .btn-primary { padding: 8px 14px; font-size: 12.5px; }
}
/* ---------- Awards strip ---------- */
.awards {
max-width: var(--maxw); margin: 0 auto;
padding: 0 var(--pad-x) 56px;
display: grid;
grid-template-columns: 220px 1fr;
gap: 48px;
align-items: center;
}
.awards-head {
font-size: 13px; font-weight: 700;
color: var(--tap-ink-2);
border-left: 2px solid var(--tap-orange);
padding-left: 14px;
line-height: 1.4;
}
.awards-head em { font-style: italic; color: var(--tap-ink); }
.awards-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.award-badge {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--tap-line);
border-radius: 12px;
padding: 14px 16px;
min-height: 88px;
justify-content: space-between;
transition: all 180ms var(--ease);
}
.award-badge:hover { border-color: var(--tap-line-strong); box-shadow: var(--tap-shadow-sm); transform: translateY(-1px); }
.award-badge-top {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--tap-ink-3);
}
.award-badge-medal {
width: 18px; height: 18px; border-radius: 4px;
display: grid; place-items: center;
background: var(--tap-orange-light);
color: var(--tap-orange-deep);
flex: none;
}
.award-badge-medal svg { width: 11px; height: 11px; }
.award-badge-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--tap-ink); margin-top: 6px; line-height: 1.25; }
.award-badge-sub { font-size: 11.5px; color: var(--tap-ink-2); margin-top: 2px; }
@media (max-width: 1100px) {
.awards { grid-template-columns: 1fr; gap: 24px; }
.awards-row { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Testimonial row (page-agnostic) ---------- */
.test-band {
max-width: var(--maxw); margin: 0 auto;
padding: var(--pad-y) var(--pad-x);
}
.test-band-head {
display: flex; align-items: end; justify-content: space-between;
gap: 40px; margin-bottom: 32px; flex-wrap: wrap;
}
.test-band-head h2 {
font-size: 36px; font-weight: 800; letter-spacing: -0.022em;
margin: 12px 0 0; line-height: 1.05;
}
.test-band-head .trust-line {
font-size: 13px; font-weight: 700; color: var(--tap-ink-2);
letter-spacing: 0.02em;
display: inline-flex; align-items: center; gap: 8px;
}
.test-band-head .trust-line::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--tap-green);
box-shadow: 0 0 0 4px rgba(5,150,105,0.14);
}
.test-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.test-card {
background: #fff;
border: 1px solid var(--tap-line);
border-radius: 14px;
padding: 26px 24px;
display: flex; flex-direction: column; gap: 20px;
}
.test-card-quote {
font-size: 18px; font-weight: 500; line-height: 1.4;
letter-spacing: -0.012em; color: var(--tap-ink);
text-wrap: pretty;
flex: 1;
}
.test-card-quote::before { content: "\201C"; color: var(--tap-orange); font-size: 36px; line-height: 0; vertical-align: -10px; margin-right: 4px; }
.test-card-foot {
display: flex; align-items: center; gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--tap-line);
}
.test-card-avatar {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -0.01em;
flex: none;
}
.test-card-avatar.av-1 { background: linear-gradient(135deg, #E8601A, #C04A0E); }
.test-card-avatar.av-2 { background: linear-gradient(135deg, #2A8FD8, #0E73BB); }
.test-card-avatar.av-3 { background: linear-gradient(135deg, #DA5BA6, #C33C8E); }
.test-card-avatar.av-4 { background: linear-gradient(135deg, #14B279, #059669); }
.test-card-name { font-size: 14px; font-weight: 700; }
.test-card-role { font-size: 12px; color: var(--tap-ink-2); }
.test-card-metric {
font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--tap-green);
padding: 4px 8px; border-radius: 4px;
background: rgba(5,150,105,0.08);
align-self: flex-start;
}
@media (max-width: 1100px) {
.test-grid { grid-template-columns: 1fr; }
}
/* ---------- "Trusted by" inline strip ---------- */
.trusted-line {
display: flex; align-items: center; gap: 14px;
margin: 24px 0 0;
font-size: 13px; color: var(--tap-ink-2);
flex-wrap: wrap;
}
.trusted-line-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tap-green); }
.trusted-line strong { color: var(--tap-ink); font-weight: 700; }
.trusted-line-avatars { display: flex; }
.trusted-line-avatars .av {
width: 24px; height: 24px; border-radius: 50%;
border: 2px solid var(--tap-bg);
display: grid; place-items: center;
color: #fff; font-size: 9.5px; font-weight: 700;
margin-left: -8px;
}
.trusted-line-avatars .av:first-child { margin-left: 0; }
/* ---------- Investors band ---------- */
.investors-section {
background: var(--tap-bg-warm);
border-top: 1px solid var(--tap-line);
border-bottom: 1px solid var(--tap-line);
padding: var(--pad-y) var(--pad-x);
}
.investors-inner {
max-width: calc(var(--maxw) - 2 * var(--pad-x)); margin: 0 auto;
display: grid;
grid-template-columns: 360px 1fr;
gap: 56px;
align-items: start;
}
.investors-side h2 {
font-size: 40px; font-weight: 800; letter-spacing: -0.022em;
line-height: 1.02;
margin: 12px 0 16px;
}
.investors-side p {
font-size: 16px; color: var(--tap-ink-2); line-height: 1.5;
margin: 0 0 20px;
}
.investors-side .investors-meta {
font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--tap-ink-3);
display: flex; gap: 18px; flex-wrap: wrap;
margin-top: 16px;
}
.investors-side .investors-meta strong { color: var(--tap-ink); font-weight: 800; letter-spacing: -0.01em; text-transform: none; font-size: 22px; display: block; }
.investors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--tap-line);
border: 1px solid var(--tap-line);
border-radius: 14px;
overflow: hidden;
}
.investor-cell {
background: #fff;
padding: 22px 24px;
display: flex; flex-direction: column; gap: 6px;
min-height: 130px;
}
.investor-name {
font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--tap-ink);
}
.investor-name.serif { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.investor-name.italic { font-style: italic; }
.investor-name.tight { letter-spacing: -0.04em; }
.investor-role {
font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--tap-ink-3);
}
.investor-tag {
font-size: 11px; color: var(--tap-ink-2);
margin-top: auto;
}
@media (max-width: 1100px) {
.investors-inner { grid-template-columns: 1fr; gap: 32px; }
.investors-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Sizing examples (Activate) ---------- */
.size-examples {
max-width: var(--maxw); margin: 0 auto;
padding: var(--pad-y) var(--pad-x);
border-top: 1px solid var(--tap-line);
}
.size-examples-head { max-width: 720px; margin-bottom: 32px; }
.size-examples-head h2 {
font-size: 40px; font-weight: 800; letter-spacing: -0.022em;
line-height: 1.02; margin: 12px 0 12px;
}
.size-examples-head p {
font-size: 17px; color: var(--tap-ink-2); line-height: 1.5;
}
.size-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.size-card {
background: var(--tap-card);
border: 1px solid var(--tap-line);
border-radius: 14px;
padding: 26px;
display: flex; flex-direction: column; gap: 14px;
}
.size-card.size-card-mid { border-color: rgba(242,122,46,0.40); background: var(--tap-orange-subtle); box-shadow: var(--tap-shadow-md); }
.size-card-tag {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--tap-ink-3);
display: inline-flex; align-items: center; gap: 6px;
align-self: flex-start;
}
.size-card-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tap-ink-3); }
.size-card.size-card-mid .size-card-tag { color: var(--tap-orange-deep); }
.size-card.size-card-mid .size-card-tag::before { background: var(--tap-orange); }
.size-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.012em; margin: 0; }
.size-card-num { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; }
.size-card-num strong { font-size: 36px; font-weight: 800; letter-spacing: -0.024em; }
.size-card-num span { font-size: 12px; color: var(--tap-ink-2); }
.size-card-list {
list-style: none; padding: 0; margin: 8px 0 0;
display: flex; flex-direction: column; gap: 10px;
}
.size-card-list li {
display: grid; grid-template-columns: 110px 1fr; gap: 10px;
font-size: 13.5px; line-height: 1.4;
padding-bottom: 10px;
border-bottom: 1px solid var(--tap-line);
}
.size-card-list li:last-child { border-bottom: none; padding-bottom: 0; }
.size-card-list dt {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--tap-ink-3);
padding-top: 2px;
}
.size-card-list dd { margin: 0; color: var(--tap-ink); }
.size-card-list dd strong { font-weight: 700; }
@media (max-width: 1100px) {
.size-grid { grid-template-columns: 1fr; }
.size-card.size-card-mid { box-shadow: var(--tap-shadow-sm); }
}
/* ---------- HANK live demo (AI page) ---------- */
.hank-live {
background: #14130F;
color: #fff;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: var(--pad-y) var(--pad-x);
}
.hank-live-inner {
max-width: calc(var(--maxw) - 2 * var(--pad-x)); margin: 0 auto;
display: grid;
grid-template-columns: 360px 1fr;
gap: 56px;
align-items: start;
}
.hank-live-side h2 {
font-size: 36px; font-weight: 800; letter-spacing: -0.022em;
line-height: 1.05;
margin: 12px 0 14px;
}
.hank-live-side p { font-size: 15px; color: rgba(255,255,255,0.7); margin: 0 0 18px; line-height: 1.5; }
.hank-live-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.hank-live-pill {
font-size: 12.5px; font-weight: 500;
padding: 8px 12px; border-radius: 20px;
background: rgba(242,122,46,0.16); color: #FFC59E;
border: 1px solid rgba(242,122,46,0.30);
cursor: pointer;
transition: background 120ms;
}
.hank-live-pill:hover { background: rgba(242,122,46,0.28); }
.hank-live-disclaimer {
font-size: 11px; color: rgba(255,255,255,0.45);
margin-top: 18px;
line-height: 1.5;
}
.hank-live-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 18px;
padding: 20px;
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
display: flex; flex-direction: column; gap: 14px;
min-height: 480px;
}
.hank-live-head {
display: flex; align-items: center; gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hank-live-head-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--tap-grad-hank);
display: grid; place-items: center;
color: #fff; font-weight: 800; font-size: 13px;
letter-spacing: -0.04em;
flex: none;
}
.hank-live-head-text { display: flex; flex-direction: column; }
.hank-live-head-name { font-size: 13.5px; font-weight: 700; }
.hank-live-head-meta {
font-size: 11px; color: rgba(255,255,255,0.5);
display: flex; align-items: center; gap: 6px;
}
.hank-live-head-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tap-green); }
.hank-live-stream {
flex: 1;
display: flex; flex-direction: column; gap: 10px;
overflow-y: auto;
max-height: 360px;
scroll-behavior: smooth;
}
.hank-live-stream::-webkit-scrollbar { width: 6px; }
.hank-live-stream::-webkit-scrollbar-track { background: transparent; }
.hank-live-stream::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.hank-live-bubble {
font-size: 13.5px; line-height: 1.5;
padding: 12px 14px;
max-width: 88%;
}
.hank-live-bubble.assistant {
background: #FEF6F0;
color: #2C2417;
border-radius: 4px 16px 16px 16px;
align-self: flex-start;
border: 1px solid rgba(242,122,46,0.10);
}
.hank-live-bubble.user {
background: var(--tap-grad-user);
color: #fff;
border-radius: 16px 16px 4px 16px;
align-self: flex-end;
box-shadow: 0 2px 8px rgba(74,144,217,0.25);
}
.hank-live-typing {
display: inline-flex; gap: 4px; align-items: center;
padding: 12px 14px;
background: #FEF6F0;
border: 1px solid rgba(242,122,46,0.10);
border-radius: 4px 16px 16px 16px;
align-self: flex-start;
}
.hank-live-typing span {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(232,96,26,0.6);
animation: hank-bounce 1.2s var(--ease) infinite;
}
.hank-live-typing span:nth-child(2) { animation-delay: 0.15s; }
.hank-live-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes hank-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
40% { transform: translateY(-4px); opacity: 1; }
}
.hank-live-input {
display: flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 999px;
padding: 6px 6px 6px 18px;
}
.hank-live-input input {
flex: 1; background: transparent; border: none; outline: none;
color: #fff; font-family: inherit; font-size: 13.5px;
}
.hank-live-input input::placeholder { color: rgba(255,255,255,0.4); }
.hank-live-send {
width: 32px; height: 32px; border-radius: 50%;
background: var(--tap-grad-hank);
color: #fff;
display: grid; place-items: center;
border: none; cursor: pointer;
box-shadow: var(--tap-shadow-orange);
transition: transform 120ms;
}
.hank-live-send:hover:not(:disabled) { transform: scale(1.05); }
.hank-live-send:disabled { opacity: 0.4; cursor: not-allowed; }
.hank-live-send svg { width: 13px; height: 13px; }
@media (max-width: 1100px) {
.hank-live-inner { grid-template-columns: 1fr; gap: 32px; }
}
/* ---------- Status badge / SDK badges (Developers) ---------- */
.dev-status-band {
max-width: var(--maxw); margin: 0 auto;
padding: 40px var(--pad-x);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.dev-status-card {
background: var(--tap-card);
border: 1px solid var(--tap-line);
border-radius: 14px;
padding: 22px 24px;
display: flex; align-items: center; gap: 18px;
}
.dev-status-icon {
width: 44px; height: 44px; border-radius: 12px;
background: rgba(5,150,105,0.10);
color: var(--tap-green);
display: grid; place-items: center;
flex: none;
}
.dev-status-icon.warn { background: rgba(217,119,6,0.10); color: var(--tap-warning); }
.dev-status-icon svg { width: 20px; height: 20px; }
.dev-status-text { flex: 1; min-width: 0; }
.dev-status-eyebrow {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--tap-ink-3);
}
.dev-status-title { font-size: 16px; font-weight: 700; margin-top: 4px; }
.dev-status-meta { font-size: 12.5px; color: var(--tap-ink-2); margin-top: 2px; }
.dev-status-link {
font-size: 12.5px; font-weight: 700;
color: var(--tap-ink); display: inline-flex; align-items: center; gap: 4px;
border-bottom: 1.5px solid var(--tap-orange);
padding-bottom: 2px;
margin-left: auto;
flex: none;
}
.dev-status-link svg { width: 12px; height: 12px; }
.dev-status-pulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--tap-green);
box-shadow: 0 0 0 4px rgba(5,150,105,0.15);
animation: pulse 2s var(--ease) infinite;
}
@media (max-width: 1100px) {
.dev-status-band { grid-template-columns: 1fr; }
}
/* ---------- SDK badge row ---------- */
.sdk-badges {
max-width: var(--maxw); margin: 0 auto;
padding: 0 var(--pad-x) 56px;
display: flex; flex-direction: column; gap: 18px;
}
.sdk-badges-head {
font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--tap-ink-3);
}
.sdk-badges-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.sdk-badge {
background: #fff;
border: 1px solid var(--tap-line);
border-radius: 12px;
padding: 18px 18px;
display: flex; flex-direction: column; gap: 10px;
transition: all 150ms var(--ease);
}
.sdk-badge:hover { border-color: var(--tap-line-strong); box-shadow: var(--tap-shadow-sm); transform: translateY(-1px); }
.sdk-badge-top { display: flex; align-items: center; justify-content: space-between; }
.sdk-badge-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.sdk-badge-version {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
color: var(--tap-green);
background: rgba(5,150,105,0.08);
padding: 2px 6px; border-radius: 4px;
font-variant-numeric: tabular-nums;
}
.sdk-badge-meta {
font-size: 11.5px; color: var(--tap-ink-2);
display: flex; align-items: center; gap: 8px;
}
.sdk-badge-meta .sep { color: var(--tap-ink-3); }
@media (max-width: 1100px) {
.sdk-badges-row { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- News author chip / RSS link ---------- */
.news-author-chip {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 14px;
}
.news-author-chip .av {
width: 24px; height: 24px; border-radius: 50%;
background: linear-gradient(135deg, #F27A2E, #E8601A);
color: #fff; font-weight: 700; font-size: 10px; letter-spacing: -0.01em;
display: grid; place-items: center;
flex: none;
}
.news-author-chip .av.av-team { background: linear-gradient(135deg, #6B6B6B, #444); }
.news-author-chip .av.av-eng { background: linear-gradient(135deg, #2A8FD8, #0E73BB); }
.news-author-chip .av.av-cs { background: linear-gradient(135deg, #14B279, #059669); }
.news-author-chip .name { font-size: 12px; font-weight: 700; color: var(--tap-ink); }
.news-author-chip .role { font-size: 11.5px; color: var(--tap-ink-3); }
.news-rss {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; color: var(--tap-ink-2);
padding: 6px 10px; border-radius: 6px;
border: 1px solid var(--tap-line-strong);
transition: color 120ms, background 120ms;
}
.news-rss:hover { background: var(--tap-orange-light); color: var(--tap-orange-deep); border-color: rgba(242,122,46,0.30); }
.news-rss svg { width: 12px; height: 12px; color: var(--tap-orange); }
/* ---------- Customer logo strip in footer ---------- */
.footer-customers {
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 36px var(--pad-x);
max-width: var(--maxw); margin: 0 auto;
display: grid;
grid-template-columns: 220px 1fr;
gap: 32px;
align-items: center;
}
.footer-customers-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.footer-customers-row {
display: flex; gap: 40px; flex-wrap: wrap; align-items: center;
}
.footer-customer-logo {
font-size: 15px; font-weight: 700;
color: rgba(255,255,255,0.6); letter-spacing: -0.005em;
transition: color 150ms;
}
.footer-customer-logo:hover { color: #fff; }
.footer-customer-logo.serif { font-family: Georgia, "Times New Roman", serif; }
.footer-customer-logo.italic { font-style: italic; }
.footer-customer-logo.upper { text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; }
@media (max-width: 1100px) {
.footer-customers { grid-template-columns: 1fr; gap: 16px; }
}
/* ---------- Verified-metric callout (universal) ---------- */
.verified-metric {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--tap-green);
padding: 4px 8px; border-radius: 4px;
background: rgba(5,150,105,0.08);
border: 1px solid rgba(5,150,105,0.18);
}
.verified-metric svg { width: 11px; height: 11px; }
/* ============================================================
SIDE-SCROLLING CARD CAROUSELS
Converts repeating-card grids into horizontal scrollers
with snap, edge fades, and a "drag to explore →" hint.
============================================================ */
/* Add .knowledge-grid and .suite-grid to the side-scroll list */
.workflows-grid,
.features-grid,
.roles-grid,
.industries-grid,
.knowledge-grid,
.ai-caps-grid,
.ai-products-grid,
.ai-pillars-grid,
.ai-loop-grid,
.dev-pillars-grid,
.dev-caps-grid {
display: flex !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
gap: 16px !important;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scroll-padding-left: 28px;
padding: 6px 28px 22px;
margin: 0 -28px;
scrollbar-color: var(--p-color, var(--tap-orange)) transparent;
mask-image: linear-gradient(90deg, transparent 0%, black 2.5%, black 96.5%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 2.5%, black 96.5%, transparent 100%);
}
.workflows-grid > *,
.features-grid > *,
.roles-grid > *,
.industries-grid > *,
.knowledge-grid > *,
.ai-caps-grid > *,
.ai-products-grid > *,
.ai-pillars-grid > *,
.ai-loop-grid > *,
.dev-pillars-grid > *,
.dev-caps-grid > * {
flex: 0 0 clamp(280px, calc((100vw - 120px) / 3.2), 360px);
min-width: 280px;
scroll-snap-align: start;
height: auto;
}
/* ============================================================
HANK GLYPH - uniform sizing across all avatar containers
============================================================ */
.hank-glyph {
width: 58%;
height: 58%;
color: currentColor;
display: block;
flex: none;
}
/* In the very large IA hero avatar, give the glyph extra breathing room */
.ai-avatar-front .hank-glyph,
.ia-avatar-front .hank-glyph {
width: 50%;
height: 50%;
}
/* In the tiny ask-head avatar */
.ask-head-avatar .ask-h .hank-glyph,
.ask-head-avatar .hank-glyph {
width: 60%;
height: 60%;
}
.ask-head-avatar .ask-h {
transform: none !important;
display: grid; place-items: center;
width: 100%; height: 100%;
}
/* The "hank-dot" inline in About prose */
.hank-dot .hank-glyph {
width: 60%; height: 60%;
}
/* ============================================================
FEATURE / WORKFLOW / PILLAR ICONS - round, solid, white
============================================================ */
.feature-icon,
.workflow-card-icon,
.industry-glyph,
.dev-pillar-icon,
.ai-pillar-icon,
.ai-cap-icon {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
background: var(--p-color, var(--tap-orange)) !important;
color: #fff !important;
display: grid !important;
place-items: center !important;
box-shadow: 0 4px 12px color-mix(in oklab, var(--p-color, var(--tap-orange)) 30%, transparent),
0 1px 2px rgba(0,0,0,0.10) !important;
flex: none !important;
}
.feature-icon svg,
.workflow-card-icon svg,
.industry-glyph svg,
.dev-pillar-icon svg,
.ai-pillar-icon svg,
.ai-cap-icon svg {
width: 22px !important;
height: 22px !important;
color: #fff !important;
stroke: currentColor;
}
/* ============================================================
IMPACT BAND - visually merged with the product hero
============================================================ */
body[data-product] .prod-hero {
padding-bottom: 56px;
}
body[data-product] .impact-band {
margin-top: 0;
padding-top: 16px;
}
body[data-product] .impact-head {
padding-top: 48px;
margin-bottom: 36px;
}
/* ============================================================
PRODUCTS NAV DROPDOWN
============================================================ */
.nav-link.has-dropdown {
position: relative;
cursor: pointer;
}
.nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: -12px;
width: 268px;
background: #fff;
border: 1px solid var(--tap-line);
border-radius: 14px;
box-shadow: 0 24px 60px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.06);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
z-index: 60;
}
.nav-link.has-dropdown:hover .nav-dropdown,
.nav-link.has-dropdown:focus-within .nav-dropdown,
.nav-dropdown:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown-item {
display: grid;
grid-template-columns: 88px 1fr;
gap: 12px;
align-items: center;
padding: 8px 10px;
border-radius: 10px;
text-decoration: none;
color: var(--tap-ink);
transition: background 120ms;
}
.nav-dropdown-item:hover { background: var(--tap-bg); }
.nav-dropdown-logo {
width: 88px;
height: 24px;
object-fit: contain;
object-position: left center;
display: block;
}
/* Visually balance the script wordmarks - Supply+ reads small at the same height. */
.nav-dropdown-item[href*="supply-plus"] .nav-dropdown-logo,
.nav-dropdown-item[href="Supply%2B.html"] .nav-dropdown-logo { height: 30px; }
.nav-dropdown-badge {
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
color: #fff; font-weight: 800; font-size: 12px;
letter-spacing: -0.02em;
flex: none;
}
.nav-dropdown-badge.retail { background: linear-gradient(135deg, #F27A2E, #E8601A); }
.nav-dropdown-badge.supply { background: linear-gradient(135deg, #2A8FD8, #0E73BB); }
.nav-dropdown-badge.coll { background: linear-gradient(135deg, #DA5BA6, #C33C8E); }
.nav-dropdown-badge.pos { background: linear-gradient(135deg, #14B8B8, #086464); }
.nav-dropdown-badge.shop { background: linear-gradient(135deg, #14B279, #059669); }
.nav-dropdown-badge .it { font-style: italic; }
/* ============================================================
Product glyphs - used wherever a small product badge appears
(dropdown badges, suite cards, hero lockups, subnav marks,
EI report, AI products grid). Single source of truth per product.
============================================================ */
:root {
/* Round-bg product icons - complete colored circular badge
with the brand glyph baked in. Use as the only background;
no gradient layer needed. */
--rplus-glyph: url("assets/retail-plus-icon.svg");
--splus-glyph: url("assets/supply-plus-icon.svg");
--co-glyph: url("assets/collectives-icon.svg");
--pp-glyph: url("assets/pos-partners-icon.svg");
}
/* Shared visual treatment for any badge that gets a glyph overlay.
The text content ("R+", "S+", "Co", "Pp") stays in the DOM for
accessibility / fallback but is visually hidden. */
.nav-dropdown-badge.retail, .suite-badge.retail, .r-plus-mark.r-plus-mark,
body[data-product="retail-plus"] .prod-lockup-mark,
body[data-product="retail-plus"] .prod-subnav-mark,
.nav-dropdown-badge.supply, .suite-badge.supply, .s-plus-mark.s-plus-mark,
body[data-product="supply-plus"] .prod-lockup-mark,
body[data-product="supply-plus"] .prod-subnav-mark,
.nav-dropdown-badge.coll, .suite-badge.coll, .co-mark.co-mark,
body[data-product="collectives"] .prod-lockup-mark,
body[data-product="collectives"] .prod-subnav-mark,
.nav-dropdown-badge.pos, .suite-badge.pos, .pp-mark.pp-mark {
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
/* Hide the original text - the SVG carries the brand now */
font-size: 0;
color: transparent;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
/* Per-product icon. The SVG is a complete circle with the brand
gradient + glyph baked in - no overlay needed. */
.nav-dropdown-badge.retail, .suite-badge.retail, .r-plus-mark.r-plus-mark,
body[data-product="retail-plus"] .prod-lockup-mark,
body[data-product="retail-plus"] .prod-subnav-mark {
background-image: var(--rplus-glyph);
}
.nav-dropdown-badge.supply, .suite-badge.supply, .s-plus-mark.s-plus-mark,
body[data-product="supply-plus"] .prod-lockup-mark,
body[data-product="supply-plus"] .prod-subnav-mark {
background-image: var(--splus-glyph);
}
.nav-dropdown-badge.coll, .suite-badge.coll, .co-mark.co-mark,
body[data-product="collectives"] .prod-lockup-mark,
body[data-product="collectives"] .prod-subnav-mark {
background-image: var(--co-glyph);
}
.nav-dropdown-badge.pos, .suite-badge.pos, .pp-mark.pp-mark {
background-image: var(--pp-glyph);
}
/* Larger hero lockup marks (44-56px) - keep cover sizing so the
round-bg SVG sits flush in the circular container. */
.prod-lockup-mark, .role-h1-prod .prod-lockup-mark {
background-size: cover !important;
}
.nav-dropdown-text { min-width: 0; }
.nav-dropdown-name {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tap-ink-3);
}
/* Mirror the product-suite "For …" colour cue per audience. */
.nav-dropdown-item[href="Retail%2B.html"] .nav-dropdown-name,
.nav-dropdown-item[href*="retail-plus"] .nav-dropdown-name { color: var(--tap-orange-deep); }
.nav-dropdown-item[href*="supply-plus"] .nav-dropdown-name { color: var(--tap-blue); }
.nav-dropdown-item[href*="collectives" i] .nav-dropdown-name { color: var(--tap-pink); }
.nav-dropdown-item[href="Partners.html"] .nav-dropdown-name { color: var(--tap-teal); }
.nav-dropdown-for {
font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
color: var(--tap-ink-3);
margin-top: 1px;
}
.nav-dropdown-tag {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 7px; border-radius: 20px;
background: rgba(5,150,105,0.10);
color: var(--tap-green);
}
.nav-dropdown-tag.soon {
background: rgba(217,119,6,0.10);
color: var(--tap-warning);
}
.nav-dropdown-foot {
border-top: 1px solid var(--tap-line);
margin-top: 6px;
padding: 12px 12px 6px;
display: flex; align-items: center; justify-content: space-between;
}
.nav-dropdown-all {
font-size: 12.5px; font-weight: 700;
color: var(--tap-ink);
display: inline-flex; align-items: center; gap: 4px;
}
.nav-dropdown-all svg { width: 12px; height: 12px; transition: transform 150ms var(--ease); }
.nav-dropdown-all:hover svg { transform: translateX(2px); }
/* ============================================================
QUOTE BAND - avatar + logo treatment
============================================================ */
.quote-attrib {
display: grid !important;
grid-template-columns: 56px 1fr auto !important;
gap: 14px !important;
align-items: center !important;
flex-direction: row !important;
}
.quote-attrib-avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
color: #fff;
font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
display: grid; place-items: center;
border: 2px solid rgba(255,255,255,0.20);
flex: none;
}
.quote-attrib-meta {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.quote-attrib-logo {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.012em;
color: rgba(255,255,255,0.85);
padding-left: 24px;
margin-left: 8px;
border-left: 1px solid rgba(255,255,255,0.22);
line-height: 1;
white-space: nowrap;
}
.quote-attrib-logo.serif { font-family: Georgia, "Times New Roman", serif; }
.quote-attrib-logo.italic { font-style: italic; }
.quote-attrib-logo.upper { text-transform: uppercase; letter-spacing: 0.04em; font-size: 18px; }
/* Image variant - the source PNG is white-on-transparent, so it sits
natively on the orange/dark quote band. Cap its height so it reads
at the same optical weight as the text-based logos in other quotes. */
.quote-attrib-logo.quote-attrib-logo-img {
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
.quote-attrib-logo.quote-attrib-logo-img img {
height: 28px;
width: auto;
max-width: 140px;
display: block;
opacity: 0.95;
}
.quote-attrib-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.quote-attrib-role { font-size: 14px; opacity: 0.85; line-height: 1.3; }
.quote-attrib-source { font-size: 10.5px; opacity: 0.65; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; font-weight: 700; }
@media (max-width: 700px) {
.quote-attrib { grid-template-columns: 48px 1fr !important; }
.quote-attrib-logo { grid-column: 1 / -1; padding-left: 0; border-left: none; margin-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 14px; margin-top: 4px; }
}
/* ============================================================
CUSTOMER VOICES - consolidated 3-card quote section that
replaces the three full-bleed quote-band sections. Each
card holds: quote, photo, name + role, brand logo.
============================================================ */
.quote-cards-band {
background: var(--tap-bg-warm);
border-top: 1px solid var(--tap-line);
border-bottom: 1px solid var(--tap-line);
padding: 56px var(--pad-x);
}
.quote-cards-inner {
max-width: calc(var(--maxw) - 2 * var(--pad-x));
margin: 0 auto;
}
.quote-cards-head {
margin-bottom: 36px;
max-width: 720px;
}
.quote-cards-head h2 {
font-size: clamp(32px, 4vw, 44px);
font-weight: 800;
letter-spacing: -0.024em;
line-height: 1.06;
text-wrap: balance;
margin: 12px 0 0;
color: var(--tap-ink);
}
.quote-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.quote-card {
background: var(--tap-card);
border: 1px solid var(--tap-line);
border-radius: 14px;
padding: 26px 26px 22px;
display: flex;
flex-direction: column;
gap: 22px;
transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.quote-card:hover {
border-color: var(--tap-line-strong);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.quote-card-quote {
font-size: 18px;
font-weight: 500;
line-height: 1.45;
color: var(--tap-ink);
letter-spacing: -0.008em;
text-wrap: pretty;
flex: 1;
}
.quote-card-quote::before {
content: "\201C";
font-size: 1em;
line-height: 0;
vertical-align: -0.12em;
opacity: 0.45;
margin-right: 2px;
}
.quote-card-quote::after {
content: "\201D";
font-size: 1em;
line-height: 0;
vertical-align: -0.12em;
opacity: 0.45;
margin-left: 2px;
}
.quote-card-attrib {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 12px;
align-items: center;
padding-top: 18px;
border-top: 1px solid var(--tap-line);
}
.quote-card-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
background: var(--tap-bg-warm);
flex: none;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--tap-ink);
}
.quote-card-avatar.has-photo img,
.quote-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.quote-card-meta { min-width: 0; }
.quote-card-name {
font-size: 14px;
font-weight: 700;
color: var(--tap-ink);
line-height: 1.2;
}
.quote-card-role {
font-size: 12.5px;
color: var(--tap-ink-3);
line-height: 1.3;
margin-top: 2px;
}
.quote-card-logo {
font-size: 16px;
font-weight: 800;
color: var(--tap-ink-2);
letter-spacing: -0.01em;
white-space: nowrap;
}
.quote-card-logo.serif { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.quote-card-logo-img {
display: inline-flex;
align-items: center;
}
.quote-card-logo-img img {
height: 22px;
width: auto;
display: block;
max-width: 140px;
object-fit: contain;
}
/* Coca-Cola wordmark ships as white-on-transparent - invert so it
reads on the light card. Brand-coloured logos (Reddrop, Surefire)
stay untouched. */
.quote-card-logo-img--invert img {
filter: invert(1) brightness(0.4);
}
@media (max-width: 980px) {
.quote-cards-grid { grid-template-columns: 1fr 1fr; }
.quote-cards-grid > article:last-child { grid-column: 1 / -1; max-width: 560px; }
}
/* Reddrop customer story - 2 small quotes on top, Calabro featured
spanning the full width below, with bigger quote type. */
.reddrop-story .quote-cards-grid {
grid-template-columns: 1fr 1fr;
}
.reddrop-story .quote-card {
max-width: none;
}
.reddrop-story .quote-card-featured {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--tap-card) 0%, var(--tap-bg-warm) 100%);
border-color: var(--tap-line-strong);
}
.reddrop-story .quote-card-featured .quote-card-quote {
font-size: 22px;
line-height: 1.45;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--tap-ink);
}
@media (max-width: 640px) {
.reddrop-story .quote-cards-grid { grid-template-columns: 1fr; }
.reddrop-story .quote-card-featured .quote-card-quote { font-size: 18px; }
}
/* Reddrop story head: logo as section opener, then eyebrow/h2/deck */
.reddrop-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
padding-bottom: 28px;
margin-bottom: 12px;
border-bottom: 1px solid var(--tap-line);
}
.reddrop-head-text { flex: 1 1 auto; min-width: 0; }
.reddrop-head-logo {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 18px 10px 10px;
border: 1px solid var(--tap-line);
border-radius: 999px;
background: var(--tap-card);
}
.reddrop-head-logo::before {
content: "Featured customer";
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tap-ink-3);
padding-left: 4px;
}
.reddrop-head-logo img {
height: 32px;
width: auto;
display: block;
opacity: 0.95;
}
@media (max-width: 640px) {
.reddrop-head-logo img { height: 28px; }
}
@media (max-width: 640px) {
.quote-cards-band { padding: 40px var(--pad-x); }
.quote-cards-grid { grid-template-columns: 1fr; }
.quote-cards-grid > article:last-child { max-width: none; }
.quote-card-quote { font-size: 16.5px; }
}
/* ============================================================
SUPPLIERS-ON-THE-NETWORK STRIP - sits beneath the
three-perspective quote band. Three permissioned brand
names rendered as wordmarks. No logo wall.
============================================================ */
.suppliers-strip {
max-width: calc(var(--maxw) - 2 * var(--pad-x));
margin: 32px auto 0;
padding: 24px 0 0;
border-top: 1px solid var(--tap-line);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 36px;
}
.suppliers-strip-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tap-ink-3);
}
.suppliers-strip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 28px;
}
.supplier-word {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--tap-ink-2);
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.suppliers-strip-row { gap: 18px; }
.supplier-word { font-size: 15px; }
}
/* ============================================================
PRICE-FROM ANCHOR - sits above the final CTA / footer to
give buyers a transparent price reference. Headline frames
the figure; the card on the right is the actionable artefact.
============================================================ */
.price-anchor {
max-width: var(--maxw);
margin: 0 auto;
padding: 56px var(--pad-x);
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 48px;
align-items: center;
}
.price-anchor-head { max-width: 540px; }
.price-anchor-head .eyebrow {
position: relative;
padding-left: 14px;
display: inline-block;
}
.price-anchor-head .eyebrow::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 14px;
background: var(--tap-orange);
border-radius: 2px;
}
.price-anchor-head h2 {
font-size: clamp(32px, 4vw, 44px);
font-weight: 800;
letter-spacing: -0.024em;
line-height: 1.06;
margin: 14px 0 0;
color: var(--tap-ink);
text-wrap: balance;
}
.price-anchor-head h2 .em {
color: var(--tap-orange);
font-style: italic;
font-weight: 700;
}
.price-anchor-head p {
margin: 16px 0 0;
font-size: 16px;
color: var(--tap-ink-2);
line-height: 1.55;
}
.price-anchor-card {
background: var(--tap-card);
border: 1px solid var(--tap-line);
border-radius: 16px;
padding: 28px 28px 24px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: var(--tap-shadow-md);
}
.price-anchor-card .pa-price {
font-size: 56px;
font-weight: 800;
letter-spacing: -0.028em;
line-height: 1;
color: var(--tap-ink);
font-variant-numeric: tabular-nums;
margin-top: 2px;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.price-anchor-card .pa-price-unit {
font-size: 13px;
font-weight: 500;
color: var(--tap-ink-3);
letter-spacing: 0;
font-variant-numeric: normal;
}
.price-anchor-card .pa-meta {
font-size: 13px;
color: var(--tap-ink-2);
line-height: 1.5;
margin-bottom: 10px;
}
.price-anchor-card .pa-note {
font-size: 12px;
color: var(--tap-ink-3);
line-height: 1.5;
padding-top: 12px;
margin-bottom: 14px;
border-top: 1px solid var(--tap-line);
}
.price-anchor-card .btn {
align-self: flex-start;
}
@media (max-width: 880px) {
.price-anchor {
grid-template-columns: 1fr;
gap: 28px;
padding: 40px var(--pad-x);
}
.price-anchor-card .pa-price { font-size: 44px; }
}
.final-cta {
background:
radial-gradient(900px 360px at 100% 0%, rgba(242,122,46,0.22) 0%, transparent 60%),
radial-gradient(800px 320px at 0% 100%, rgba(242,122,46,0.14) 0%, transparent 60%),
var(--tap-ink);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
color: #fff;
}
.final-cta-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 64px var(--pad-x) 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 22px;
}
.final-cta-copy {
max-width: 640px;
}
.final-cta-copy h2 {
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 800;
letter-spacing: -0.022em;
line-height: 1.06;
margin: 0;
color: #fff;
text-wrap: balance;
}
.final-cta-copy p {
margin: 10px 0 0;
font-size: 17px;
color: rgba(255,255,255,0.78);
line-height: 1.5;
}
.final-cta-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 640px) {
.final-cta-inner { padding: 44px var(--pad-x); }
.final-cta-actions { width: 100%; }
.final-cta-actions .btn { flex: 1; justify-content: center; }
}
/* ============================================================
BRAND WALL - refined hover, subtle stagger, weave-color hover
============================================================ */
.brand-cell {
transition: all 200ms var(--ease) !important;
position: relative;
}
.brand-cell::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(135deg, transparent, transparent);
transition: background 200ms ease;
}
.brand-cell:nth-of-type(7n+1):hover { color: #ED7725 !important; }
.brand-cell:nth-of-type(7n+2):hover { color: #0E73BB !important; }
.brand-cell:nth-of-type(7n+3):hover { color: #C33C8E !important; }
.brand-cell:nth-of-type(7n+4):hover { color: #A9B313 !important; }
.brand-cell:nth-of-type(7n+5):hover { color: #5A3B8F !important; }
.brand-cell:nth-of-type(7n+6):hover { color: #23B0E7 !important; }
.brand-cell:nth-of-type(7n):hover { color: #0795A0 !important; }
.brand-cell:hover { transform: translateY(-2px); }
@media (max-width: 1280px) {
.trust-ribbon {
grid-template-columns: 1fr !important;
gap: 16px !important;
text-align: center;
}
.trust-ribbon-c {
justify-content: center !important;
flex-wrap: wrap;
gap: 28px !important;
}
.trust-ribbon-r {
justify-content: center;
flex-wrap: wrap;
}
}
/* WebKit scrollbar (Chrome/Safari) */
.workflows-grid::-webkit-scrollbar,
.features-grid::-webkit-scrollbar,
.roles-grid::-webkit-scrollbar,
.industries-grid::-webkit-scrollbar,
.ai-caps-grid::-webkit-scrollbar,
.ai-products-grid::-webkit-scrollbar,
.ai-pillars-grid::-webkit-scrollbar,
.ai-loop-grid::-webkit-scrollbar,
.dev-pillars-grid::-webkit-scrollbar,
.dev-caps-grid::-webkit-scrollbar { height: 6px; }
.workflows-grid::-webkit-scrollbar-track,
.features-grid::-webkit-scrollbar-track,
.roles-grid::-webkit-scrollbar-track,
.industries-grid::-webkit-scrollbar-track,
.ai-caps-grid::-webkit-scrollbar-track,
.ai-products-grid::-webkit-scrollbar-track,
.ai-pillars-grid::-webkit-scrollbar-track,
.ai-loop-grid::-webkit-scrollbar-track,
.dev-pillars-grid::-webkit-scrollbar-track,
.dev-caps-grid::-webkit-scrollbar-track { background: transparent; }
.workflows-grid::-webkit-scrollbar-thumb,
.features-grid::-webkit-scrollbar-thumb,
.roles-grid::-webkit-scrollbar-thumb,
.industries-grid::-webkit-scrollbar-thumb,
.ai-caps-grid::-webkit-scrollbar-thumb,
.ai-products-grid::-webkit-scrollbar-thumb,
.ai-pillars-grid::-webkit-scrollbar-thumb,
.ai-loop-grid::-webkit-scrollbar-thumb,
.dev-pillars-grid::-webkit-scrollbar-thumb,
.dev-caps-grid::-webkit-scrollbar-thumb {
background: var(--p-color, var(--tap-orange));
opacity: 0.5;
border-radius: 3px;
}
/* On dark sections, give the scrollbar lighter contrast */
.ia-band .ai-pillars-grid::-webkit-scrollbar-thumb,
.ai-loop .ai-loop-grid::-webkit-scrollbar-thumb,
.ai-products .ai-products-grid::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.30);
}
/* "Drag to explore" hint - injected by JS into the grid heads */
.h-scroll-hint {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--tap-ink-3);
margin-left: 16px;
white-space: nowrap;
}
.h-scroll-hint svg {
width: 22px; height: 10px;
color: var(--p-color, var(--tap-orange));
animation: h-hint-slide 1.8s var(--ease) infinite;
}
@keyframes h-hint-slide {
0%, 100% { transform: translateX(0); opacity: 0.5; }
50% { transform: translateX(4px); opacity: 1; }
}
@media (max-width: 768px) {
.workflows-grid > *,
.features-grid > *,
.roles-grid > *,
.industries-grid > *,
.ai-caps-grid > *,
.ai-products-grid > *,
.ai-pillars-grid > *,
.ai-loop-grid > *,
.dev-pillars-grid > *,
.dev-caps-grid > * {
flex-basis: 80vw;
}
}
/* ============================================================
PLATFORM PAGES - subtle "tapestry weave" palette
Applied to: index, AI, Developers, Pricing, Trust Center,
News, About, Changelog. Eight low-opacity radial washes,
one per logo tile, positioned to echo the mark.
============================================================ */
body.platform {
--tap-weave-red: rgba(210, 15, 59, 0.05);
--tap-weave-orange: rgba(237,119, 37, 0.07);
--tap-weave-magenta: rgba(195, 60,142, 0.05);
--tap-weave-blue: rgba( 14,115,187, 0.05);
--tap-weave-cyan: rgba( 35,176,231, 0.04);
--tap-weave-teal: rgba( 7,149,160, 0.04);
--tap-weave-olive: rgba(169,179, 19, 0.05);
--tap-weave-purple: rgba( 90, 59,143, 0.05);
background:
radial-gradient(circle at 88% -6%, var(--tap-weave-orange), transparent 42%),
radial-gradient(circle at 96% 20%, var(--tap-weave-red), transparent 36%),
radial-gradient(circle at 4% 6%, var(--tap-weave-magenta), transparent 42%),
radial-gradient(circle at -6% 44%, var(--tap-weave-purple), transparent 38%),
radial-gradient(circle at 102% 56%, var(--tap-weave-olive), transparent 36%),
radial-gradient(circle at 6% 78%, var(--tap-weave-cyan), transparent 38%),
radial-gradient(circle at 92% 88%, var(--tap-weave-teal), transparent 38%),
radial-gradient(circle at 50% 100%, var(--tap-weave-blue), transparent 42%),
var(--tap-bg);
background-attachment: fixed;
}
/* Hero gets a slightly stronger weave behind the preview */
body.platform .hero,
body.platform .ai-hero,
body.platform .dev-hero,
body.platform .pr-hero,
body.platform .news-hero,
body.platform .about-hero,
body.platform .cl-hero,
body.platform .trust-hero {
position: relative;
}
/* Removed the hero ::before overlay - was creating a visible
color band between hero and the rest of the page. The body's
weave gradient now flows through cleanly. */
/* Underline accent on hero headline accent words - orange (primary) */
body.platform .hero h1 .accent {
position: relative;
}
body.platform .hero h1 .accent::after {
content: ""; position: absolute;
left: 2px; right: 2px; bottom: -2px; height: 6px;
background: linear-gradient(90deg, rgba(237,119,37,0.32), rgba(237,119,37,0));
border-radius: 4px;
z-index: -1;
}
/* Section eyebrow tick marks - rotate through 5 brand colors by section position */
body.platform main section .eyebrow,
body.platform > section .eyebrow {
position: relative;
padding-left: 14px;
}
body.platform main section .eyebrow::before,
body.platform > section .eyebrow::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 4px; height: 14px; background: #ED7725; border-radius: 2px;
}
/* Cycle: orange → blue → magenta → olive → purple → cyan → teal */
body.platform > section:nth-of-type(7n+1) .eyebrow::before { background: #ED7725; }
body.platform > section:nth-of-type(7n+2) .eyebrow::before { background: #0E73BB; }
body.platform > section:nth-of-type(7n+3) .eyebrow::before { background: #C33C8E; }
body.platform > section:nth-of-type(7n+4) .eyebrow::before { background: #A9B313; }
body.platform > section:nth-of-type(7n+5) .eyebrow::before { background: #5A3B8F; }
body.platform > section:nth-of-type(7n+6) .eyebrow::before { background: #23B0E7; }
body.platform > section:nth-of-type(7n+7) .eyebrow::before { background: #0795A0; }
/* Dark/on-orange sections keep their own treatment, except the
Hank section eyebrow which gets the orange tick so it matches
every other section eyebrow on the page. */
body.platform .thesis-band .eyebrow.on-orange::before,
body.platform section .eyebrow.on-dark::before,
body.platform section .eyebrow.on-orange::before { display: none; }
body.platform .hank-section .eyebrow.on-dark { padding-left: 14px; }
body.platform .hank-section .eyebrow.on-dark::before {
display: block;
background: var(--tap-orange);
}
body.platform section:not(.hank-section) .eyebrow.on-dark,
body.platform section .eyebrow.on-orange { padding-left: 0; }
/* Suite-card top borders use product colors (echoes weave in product grid) */
body.platform .suite-card { position: relative; overflow: hidden; }
body.platform .suite-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
body.platform .suite-card:nth-of-type(1)::before { background: #ED7725; } /* Retail+ orange */
body.platform .suite-card:nth-of-type(2)::before { background: #0E73BB; } /* Supply+ blue */
body.platform .suite-card:nth-of-type(3)::before { background: #C33C8E; } /* Collectives magenta */
body.platform .suite-card:nth-of-type(4)::before { background: #0D8E8E; } /* POS Partners teal */
body.platform .suite-card:nth-of-type(5)::before { background: #059669; } /* Shoppers green */
/* Suite cards pagination dots - shown only when the cards become a
horizontal scroller (tablet / mobile); hidden on the desktop grid. */
.suite-dots {
display: none;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.suite-dot {
width: 7px; height: 7px;
border-radius: 50%;
border: 0;
padding: 0;
background: var(--tap-line-strong);
cursor: pointer;
transition: background 150ms ease, transform 150ms ease;
}
.suite-dot:hover { background: var(--tap-ink-3); }
.suite-dot.is-active {
background: var(--tap-ink-2);
transform: scale(1.35);
}
/* Trust ribbon - combines press + compliance on one line, low weight */
.trust-ribbon {
max-width: var(--maxw); margin: 0 auto;
padding: 4px var(--pad-x) 56px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 36px; align-items: center;
border-bottom: 1px solid var(--tap-line);
padding-bottom: 32px;
}
.trust-ribbon-l, .trust-ribbon-r {
font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--tap-ink-3);
white-space: nowrap;
}
.trust-ribbon-r {
display: inline-flex; gap: 14px; align-items: center;
color: var(--tap-ink-2);
}
.trust-ribbon-r .compl {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
letter-spacing: 0.1em;
}
.trust-ribbon-r .compl::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--tap-green);
}
.trust-ribbon-c {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: nowrap;
opacity: 1;
min-width: 0;
}
.trust-ribbon-c .press-img {
/* Sized per-logo below; default for any unclassed press-img. */
height: 24px;
width: auto;
max-width: 100%;
display: block;
flex: 0 1 auto;
object-fit: contain;
/* White-on-transparent source logos → recolour to deep ink for the
light press-row, with the dimmed weight expected of an "as seen in" strip. */
filter: brightness(0) opacity(0.55);
transition: filter 150ms ease, opacity 150ms ease;
}
.trust-ribbon-c .press-img.wide { height: 20px; }
/* Per-logo optical sizing - these wordmarks all share a 130px-tall source
but vary widely in aspect ratio (5.06 → 9.41). Heights are tuned so the
row reads as one balanced line: mastheads sit slightly taller, trade
titles slightly shorter, the very wide Convenience World wordmark pulled
down further so its width matches the rest. */
.trust-ribbon-c .press-img.press-the-age { height: 26px; }
.trust-ribbon-c .press-img.press-inside-retail { height: 24px; }
.trust-ribbon-c .press-img.press-new-daily { height: 24px; }
.trust-ribbon-c .press-img.press-startup-daily { height: 22px; }
.trust-ribbon-c .press-img.press-retail-world { height: 20px; }
.trust-ribbon-c .press-img.press-convenience-world { height: 17px; }
/* ============================================================
Avatar with photo - generic helper for any round avatar wrapper.
Replace the text initial with ![]()
, add .has-photo to the wrapper.
The image fills the circle and crops via object-fit.
============================================================ */
.has-photo {
background: none !important;
padding: 0 !important;
overflow: hidden;
position: relative;
}
.has-photo > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
/* ============================================================
Region toggle - AU / US chooser in the nav.
Injected by enhancements.js.
============================================================ */
.region-toggle {
position: relative;
flex-shrink: 0;
}
.region-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px 6px 10px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--tap-line-strong);
cursor: pointer;
font-family: inherit;
color: var(--tap-ink);
transition: background 120ms ease, border-color 120ms ease;
}
.region-toggle-btn:hover { background: var(--tap-bg-warm); border-color: rgba(0,0,0,0.18); }
.region-toggle-code {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
}
.region-toggle-code-text { line-height: 1; }
.region-toggle-btn svg {
width: 11px; height: 11px;
opacity: 0.55;
transition: transform 150ms ease;
}
.region-toggle.is-open .region-toggle-btn svg { transform: rotate(180deg); }
/* National flag chip - rendered from SVG artwork in /assets. */
.region-toggle-flag {
width: 18px; height: 12px;
border-radius: 2px;
display: inline-block;
flex-shrink: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.region-toggle-flag--au { background-image: url(assets/flag-au.svg); }
.region-toggle-flag--us { background-image: url(assets/flag-us.svg); }
.region-toggle-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
background: #fff;
border: 1px solid var(--tap-line);
border-radius: 12px;
box-shadow: var(--tap-shadow-flyout, 0 16px 40px rgba(0,0,0,0.12));
padding: 6px;
z-index: 60;
display: flex;
flex-direction: column;
gap: 2px;
}
.region-toggle-menu[hidden] { display: none; }
.region-toggle-opt {
display: grid;
grid-template-columns: 18px auto 1fr;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: transparent;
border: none;
border-radius: 8px;
font-family: inherit;
color: var(--tap-ink);
text-align: left;
cursor: pointer;
transition: background 120ms ease;
}
.region-toggle-opt:hover { background: var(--tap-bg); }
.region-toggle-opt.is-active { background: var(--tap-bg-warm); }
.region-toggle-opt-code {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--tap-ink-2);
}
.region-toggle-opt-label {
font-size: 14px;
font-weight: 500;
color: var(--tap-ink);
}
@media (max-width: 540px) {
.region-toggle-btn { padding: 4px 6px 4px 8px; }
.region-toggle-code-text { display: none; } /* keep just the flag dot */
}
@media (max-width: 1100px) {
.trust-ribbon { grid-template-columns: 1fr; gap: 12px; text-align: center; }
.trust-ribbon-c {
justify-content: center;
flex-wrap: wrap;
gap: 22px 24px;
overflow: visible;
padding-bottom: 0;
}
.trust-ribbon-c .press-img { flex: 0 1 auto; max-width: 100%; }
/* Scale each wordmark down ~2px for narrower viewports. */
.trust-ribbon-c .press-img.press-the-age { height: 24px; }
.trust-ribbon-c .press-img.press-inside-retail { height: 22px; }
.trust-ribbon-c .press-img.press-new-daily { height: 22px; }
.trust-ribbon-c .press-img.press-startup-daily { height: 20px; }
.trust-ribbon-c .press-img.press-retail-world { height: 18px; }
.trust-ribbon-c .press-img.press-convenience-world { height: 15px; }
}
@media (max-width: 560px) {
.trust-ribbon-c { gap: 16px 20px; }
.trust-ribbon-c .press-img.press-the-age { height: 20px; }
.trust-ribbon-c .press-img.press-inside-retail { height: 18px; }
.trust-ribbon-c .press-img.press-new-daily { height: 18px; }
.trust-ribbon-c .press-img.press-startup-daily { height: 16px; }
.trust-ribbon-c .press-img.press-retail-world { height: 15px; }
.trust-ribbon-c .press-img.press-convenience-world { height: 13px; }
}
/* The standalone awards strip: make it feel like a credibility wall, lower opacity weight */
body.platform .awards { padding-top: 40px; }
/* Quote band - subtle backdrop */
body.platform .quote-band {
position: relative;
isolation: isolate;
}
/* TBWA-style hero stat strip replacement */
.hero-stat-strip {
display: flex; gap: 0;
margin-top: 40px;
border-top: 1px solid var(--tap-line);
}
.hero-stat-strip > div {
flex: 1;
padding: 24px 14px 0;
border-right: 1px solid var(--tap-line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
}
.hero-stat-strip > div:last-child { border-right: none; }
/* Hide the stat strip outright when there are no stats (audiences
without an Economic Impact Report behind them). */
.hero-stat-strip:empty {
display: none;
}
.hero-stat-strip > div .num {
font-size: 28px; font-weight: 800; letter-spacing: -0.022em;
display: block;
}
.hero-stat-strip > div .num .em { color: var(--tap-orange); }
.hero-stat-strip > div .lbl {
font-size: 11px; color: var(--tap-ink-3);
margin-top: 8px;
text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em;
}
/* ============================================================
DEV MODE - site-wide
Any element marked [data-dev] or .dev-only is hidden in
production view. Pressing ⌘⇧D (or Ctrl⇧D) toggles dev mode
on the element; state is persisted in localStorage by
enhancements.js. When on, the banner at the top reveals
every dev-only section, framed with a dashed orange outline
and a small "DEV" corner tag.
Authoring:
simplest case
labelled
…
class shorthand
============================================================ */
/* Hide by default - the !important guards against page-specific
display rules (flex/grid) winning by specificity. */
[data-dev],
.dev-only {
display: none !important;
}
/* Reveal when dev mode is active. The inner rules then restore
normal display (or whatever the element wants via inline). */
html[data-dev-mode="on"] [data-dev],
html[data-dev-mode="on"] .dev-only {
display: revert !important;
position: relative;
outline: 1px dashed var(--tap-orange);
outline-offset: 4px;
border-radius: 4px;
animation: tap-dev-fadein 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
/* "DEV" corner tag. Uses the [data-dev] attribute value as the
label when present; falls back to "DEV". */
html[data-dev-mode="on"] [data-dev]::before,
html[data-dev-mode="on"] .dev-only::before {
content: "DEV";
position: absolute;
top: -10px; left: 8px;
z-index: 2;
font-family: "Circular XX", -apple-system, sans-serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 7px 2px;
border-radius: 4px;
background: linear-gradient(135deg, var(--tap-orange), var(--tap-orange-deep));
color: #fff;
box-shadow: 0 2px 6px rgba(242,122,46,0.30);
pointer-events: none;
white-space: nowrap;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
}
html[data-dev-mode="on"] [data-dev]:not([data-dev=""])::before {
content: attr(data-dev);
}
@keyframes tap-dev-fadein {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* ---------- Dev-mode banner ---------- */
.dev-banner {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
display: flex;
align-items: center;
gap: 14px;
padding: 0 18px;
height: 38px;
background: #14130F;
color: rgba(255,255,255,0.92);
font-family: "Circular XX", -apple-system, sans-serif;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.005em;
border-bottom: 1px solid rgba(242,122,46,0.35);
box-shadow: 0 6px 20px rgba(0,0,0,0.18);
transform: translateY(-100%);
transition: transform 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.dev-banner.is-in { transform: none; }
.dev-banner-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 10.5px;
color: #fff;
padding-right: 12px;
border-right: 1px solid rgba(255,255,255,0.12);
}
.dev-banner-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--tap-orange);
box-shadow: 0 0 0 0 rgba(242,122,46,0.55);
animation: tap-dev-pulse 1.8s ease-out infinite;
}
@keyframes tap-dev-pulse {
0% { box-shadow: 0 0 0 0 rgba(242,122,46,0.55); }
70% { box-shadow: 0 0 0 7px rgba(242,122,46,0); }
100% { box-shadow: 0 0 0 0 rgba(242,122,46,0); }
}
.dev-banner-msg { color: rgba(255,255,255,0.78); }
.dev-banner-msg strong { color: #fff; font-weight: 700; }
.dev-banner-spacer { flex: 1; }
.dev-banner-kbd {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; color: rgba(255,255,255,0.62);
}
.dev-banner-kbd kbd {
font-family: "Circular XX", -apple-system, sans-serif;
font-size: 10.5px; font-weight: 600;
padding: 2px 5px;
border-radius: 4px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.10);
color: #fff;
line-height: 1;
}
.dev-banner-close {
display: inline-grid; place-items: center;
width: 22px; height: 22px;
border-radius: 5px;
background: transparent;
color: rgba(255,255,255,0.55);
border: none;
cursor: pointer;
transition: background 120ms, color 120ms;
}
.dev-banner-close:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.dev-banner-close svg { width: 11px; height: 11px; }
/* Push the page down so the banner doesn't overlap content.
Applied to not so fixed-position site chrome
(sticky nav, sticky CTA) also clears the banner. */
html[data-dev-mode="on"] {
padding-top: 38px;
}
html[data-dev-mode="on"] .nav-wrap,
html[data-dev-mode="on"] .nav {
top: 38px;
}
@media (max-width: 640px) {
.dev-banner { gap: 10px; padding: 0 12px; font-size: 11.5px; }
.dev-banner-kbd { display: none; }
}
/* Demo dev-only band on the home page (data-dev=…). Plain
styles so it looks like a real internal panel, not a
marketing surface. */
.dev-band-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 16px 18px;
background: #14130F;
color: rgba(255,255,255,0.88);
border-radius: 10px;
font-family: "Circular XX", -apple-system, sans-serif;
}
.dev-band-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: start;
}
.dev-band-cell { min-width: 0; }
.dev-band-k {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,0.50);
margin-bottom: 4px;
}
.dev-band-v {
font-size: 13px;
font-weight: 500;
color: #fff;
font-variant-numeric: tabular-nums;
}
.dev-flag {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 4px;
margin-right: 4px;
font-variant-numeric: tabular-nums;
}
.dev-flag.on { background: rgba(5,150,105,0.18); color: #6EE7B7; }
.dev-flag.off { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); text-decoration: line-through; }
.dev-band-note {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 11.5px;
color: rgba(255,255,255,0.55);
}
.dev-band-note kbd {
font-family: "Circular XX", -apple-system, sans-serif;
font-size: 10.5px; font-weight: 600;
padding: 2px 5px;
border-radius: 4px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.10);
color: #fff;
margin: 0 1px;
}
@media (max-width: 800px) {
.dev-band-row { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
NEWSLETTER FORM - sitewide (Demo.html, all product pages,
all news articles). Posts natively to HubSpot Forms API v3.
Markup: