/* Layered so the shell's utilities (app.css) win once a visitor moves from a public page into the app. */
@layer landing {
/* ============================================================
eHub SMS · Landing Page — Design System
============================================================ */
/* Self-hosted variable fonts. One woff2 per family covers every
weight via the wght axis, latin subset only (en-TZ + sw-TZ are
both Latin script). Loading these from /fonts/ eliminates the
3-hop chain (HTML -> googleapis.com CSS -> gstatic.com woff2)
that was costing 2.6s of render-blocking time on slow 4G. */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url('/fonts/bricolage-grotesque-var.woff2') format('woff2-variations');
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/fonts/plus-jakarta-sans-var.woff2') format('woff2-variations');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/jetbrains-mono-var.woff2') format('woff2-variations');
}
:root {
/* Brand — sampled from the eSMS logo */
--magenta-950: #2a0414;
--magenta-900: #4a0d2a;
--magenta-800: #6b1340;
--magenta-700: #8a1a55;
--magenta-600: #a02563;
--magenta-500: #b53472;
--magenta-200: #f2cde0;
--magenta-100: #f9e5ef;
--magenta-50: #fdf3f8;
--gold-700: #a07215;
--gold-600: #c98d18;
--gold-500: #e5a823;
--gold-400: #f0bc4a;
--gold-300: #f7d27e;
--gold-100: #fdeec7;
--plum-950: #1c0712;
--plum-900: #2a0a1a;
--plum-800: #3a1024;
/* Warm neutrals */
--cream: #fbf6ea;
--cream-2: #f4ecda;
--paper: #ffffff;
--ink: #1b0810;
--ink-2: #3a2b32;
--ink-3: #6b5a62;
--line: rgba(27, 8, 16, 0.08);
--line-2: rgba(27, 8, 16, 0.14);
/* Type */
--font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
/* Radii */
--r-sm: 8px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 24px;
--r-2xl: 32px;
--r-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(27, 8, 16, 0.05), 0 1px 1px rgba(27, 8, 16, 0.03);
--shadow-md: 0 6px 16px -6px rgba(74, 13, 42, 0.12), 0 2px 4px -2px rgba(27, 8, 16, 0.06);
--shadow-lg: 0 20px 50px -20px rgba(74, 13, 42, 0.25), 0 8px 16px -8px rgba(27, 8, 16, 0.08);
--shadow-glow: 0 24px 60px -20px rgba(176, 38, 100, 0.45);
/* Layout */
--container: 1200px;
--container-tight: 980px;
--nav-h: 72px;
}
/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--cream);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
/* ── Layout helpers ───────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 28px;
}
.container.tight { max-width: var(--container-tight); }
.section {
padding: 96px 0;
}
.section.tight { padding: 72px 0; }
.section.tiny { padding: 40px 0; }
.section--cream { background: var(--cream); color: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--plum {
background: var(--plum-900);
background-image:
radial-gradient(ellipse 800px 400px at 20% 0%, rgba(176, 38, 100, 0.22), transparent 60%),
radial-gradient(ellipse 600px 400px at 100% 100%, rgba(229, 168, 35, 0.15), transparent 60%);
color: rgba(255, 255, 255, 0.92);
}
.section--magenta {
background: var(--magenta-800);
background-image:
radial-gradient(ellipse 700px 500px at 80% 50%, var(--magenta-700), transparent 70%);
color: #fff;
}
/* ── Type ─────────────────────────────────────────────────── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--magenta-700);
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--magenta-50);
border: 1px solid var(--magenta-100);
}
.eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 999px;
background: var(--gold-500);
}
.section--plum .eyebrow,
.section--magenta .eyebrow {
color: var(--gold-300);
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
margin: 0;
line-height: 1.05;
letter-spacing: -0.02em;
color: inherit;
}
h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 800; letter-spacing: -0.025em; line-height: 0.98; }
h2 { font-size: clamp(32px, 4.2vw, 52px); }
h3 { font-size: clamp(20px, 2vw, 24px); }
h4 { font-size: 17px; line-height: 1.3; }
.kicker {
display: block;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--magenta-700);
font-weight: 700;
margin-bottom: 14px;
}
.section--plum .kicker,
.section--magenta .kicker { color: var(--gold-400); }
.lead {
font-size: 18px;
line-height: 1.55;
color: var(--ink-2);
max-width: 56ch;
}
.section--plum .lead { color: rgba(255,255,255,0.7); }
.swahili-mark {
color: var(--magenta-700);
font-weight: 700;
}
.section--plum .swahili-mark,
.section--magenta .swahili-mark { color: var(--gold-400); }
.muted { color: var(--ink-3); }
.section--plum .muted { color: rgba(255,255,255,0.55); }
/* ── Buttons ──────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border-radius: var(--r-pill);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.005em;
border: 1px solid transparent;
transition: transform .14s ease, box-shadow .2s ease, background .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--magenta-700);
color: #fff;
box-shadow: var(--shadow-md);
}
.btn--primary:hover {
background: var(--magenta-800);
box-shadow: var(--shadow-lg);
}
.btn--gold {
background: var(--gold-500);
color: #3a1604;
box-shadow: 0 8px 20px -8px rgba(197, 135, 18, 0.5);
}
.btn--gold:hover { background: var(--gold-400); }
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--line-2);
}
.btn--ghost:hover { background: rgba(27, 8, 16, 0.04); border-color: var(--ink-3); }
.section--plum .btn--ghost,
.section--magenta .btn--ghost {
color: #fff;
border-color: rgba(255,255,255,0.25);
}
.section--plum .btn--ghost:hover,
.section--magenta .btn--ghost:hover { background: rgba(255,255,255,0.06); }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--magenta-700);
font-weight: 600;
transition: gap .2s;
}
.link-arrow:hover { gap: 8px; }
/* ── Chips ────────────────────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--r-pill);
font-size: 13px;
font-weight: 600;
background: rgba(255,255,255,0.7);
border: 1px solid var(--line);
color: var(--ink-2);
}
.section--plum .chip {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.85);
}
/* ── Cards ────────────────────────────────────────────────── */
.card {
background: var(--paper);
border-radius: var(--r-xl);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .25s ease, border-color .2s;
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--line-2);
}
/* Dot-trail texture — nods to the pixel trail in the e mark */
.dot-trail-bg {
background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.6px);
background-size: 14px 14px;
}
/* ============================================================
NAVIGATION
============================================================ */
.nav-shell {
position: sticky;
top: 0;
z-index: 50;
background: rgba(251, 246, 234, 0.85);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: var(--nav-h);
}
.nav__brand {
display: flex;
align-items: center;
gap: 10px;
}
.nav__brand img { height: 32px; width: auto; }
.nav__brand-text {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--magenta-800);
}
.nav__links {
display: flex;
gap: 4px;
align-items: center;
}
.nav__links a {
padding: 8px 14px;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 500;
color: var(--ink-2);
transition: background .15s, color .15s;
}
.nav__links a:hover { background: rgba(27, 8, 16, 0.05); color: var(--ink); }
.nav__cta {
display: flex;
gap: 8px;
align-items: center;
}
.nav__burger {
display: none;
width: 40px; height: 40px;
border-radius: var(--r-md);
background: transparent;
border: 1px solid var(--line-2);
align-items: center;
justify-content: center;
}
.announcement {
background: var(--plum-900);
color: rgba(255,255,255,0.85);
font-size: 13px;
height: 36px;
display: flex;
align-items: center;
overflow: hidden;
}
.announcement strong { color: var(--gold-400); font-weight: 700; }
/* Ticker */
.ticker-track {
display: flex;
width: 100%;
overflow: hidden;
justify-content: center;
}
.ticker-inner {
display: flex;
align-items: center;
white-space: nowrap;
justify-content: center;
gap: 0;
}
.ticker-item {
padding: 0 14px;
flex-shrink: 0;
}
.ticker-sep {
color: rgba(255,255,255,0.3);
flex-shrink: 0;
}
.announcement .flag {
display: inline-flex;
width: 18px; height: 12px;
border-radius: 2px;
overflow: hidden;
background: linear-gradient(
to bottom,
#1eb53a 0 33%,
#fcd116 33% 39%,
#00a3dd 39% 61%,
#fcd116 61% 67%,
#000 67% 100%
);
}
/* ============================================================
HERO
============================================================ */
.hero {
padding: 80px 0 88px;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--magenta-100) 1.6px, transparent 2px);
background-size: 22px 22px;
mask-image: radial-gradient(ellipse 80% 60% at 20% 30%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 20% 30%, #000 0%, transparent 70%);
opacity: .8;
pointer-events: none;
}
.hero__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
}
.hero__copy { max-width: 580px; }
.hero h1 .accent { color: var(--magenta-700); }
.hero h1 .italic { font-weight: 500; color: var(--ink-2); }
.hero__sub {
margin-top: 22px;
font-size: 18px;
line-height: 1.55;
color: var(--ink-2);
max-width: 50ch;
}
.hero__sub .sw { color: var(--magenta-700); font-weight: 600; }
.hero__cta {
margin-top: 32px;
margin-bottom: 24px;
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.hero__trust {
margin-top: 28px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
color: var(--ink-3);
font-size: 13px;
}
.hero__trust .stars {
color: var(--gold-500);
letter-spacing: 1px;
font-size: 14px;
}
.hero__trust strong { color: var(--ink); font-weight: 700; }
/* Play Store button — used in hero + mobile app section */
.btn--play {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
color: #111;
border-radius: var(--r-pill);
padding: 10px 18px;
text-decoration: none;
font-family: var(--font-body);
border: 1px solid rgba(0,0,0,0.08);
transition: opacity .2s, transform .2s;
white-space: nowrap;
flex-shrink: 0;
}
.btn--play:hover { opacity: .88; transform: translateY(-1px); }
.btn--play__label { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.btn--play__label span:first-child { font-size: 10px; opacity: .55; letter-spacing: .05em; font-weight: 400; }
.btn--play__label span:last-child { font-size: 15px; font-weight: 700; }
@media (max-width: 480px) {
.btn--play { width: 100%; justify-content: center; }
}
/* Hero stage — phone + live event card */
.hero__stage {
position: relative;
height: 540px;
display: flex;
justify-content: center;
align-items: center;
}
.hero__stage::after {
content: "";
position: absolute;
inset: 60px 0 60px 0;
background: radial-gradient(ellipse, rgba(176, 38, 100, 0.2), transparent 60%);
filter: blur(40px);
z-index: 0;
}
.phone-frame {
position: relative;
z-index: 1;
width: 280px;
height: 540px;
background: #0e0c10;
border-radius: 44px;
padding: 10px;
box-shadow: 0 40px 80px -30px rgba(74, 13, 42, 0.4),
0 0 0 1px rgba(255,255,255,0.04) inset;
}
.phone-frame .screen {
width: 100%; height: 100%;
background: linear-gradient(180deg, #fffdf6 0%, #faf3e1 100%);
border-radius: 34px;
overflow: hidden;
position: relative;
}
.phone-frame .notch {
position: absolute;
top: 14px; left: 50%;
transform: translateX(-50%);
width: 80px; height: 20px;
background: #0e0c10;
border-radius: 999px;
z-index: 3;
}
/* Dashboard card floating to the right of the phone */
.float-card {
position: absolute;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
padding: 14px 16px;
z-index: 2;
min-width: 220px;
}
.float-card--send {
top: 60px;
right: 0;
transform: rotate(2deg);
}
.float-card--delivery {
bottom: 70px;
left: 0;
transform: rotate(-3deg);
}
.float-card__head {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-3);
font-weight: 700;
}
.dot-live {
width: 8px; height: 8px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.float-card__big {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
margin-top: 8px;
color: var(--ink);
line-height: 1;
letter-spacing: -0.02em;
}
.float-card__small {
margin-top: 6px;
font-size: 12px;
color: var(--ink-3);
}
/* Phone interior — SMS app */
.sms-app {
display: flex;
flex-direction: column;
height: 100%;
padding-top: 50px;
}
.sms-app__hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px 12px;
border-bottom: 1px solid rgba(27,8,16,0.06);
}
.sms-app__avatar {
width: 32px; height: 32px;
border-radius: 999px;
background: var(--magenta-700);
color: #fff;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
}
.sms-app__name {
font-size: 12px;
font-weight: 700;
color: var(--ink);
}
.sms-app__name + div { font-size: 10px; color: var(--ink-3); }
.sms-thread {
flex: 1;
padding: 14px 14px 80px;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.bubble {
display: inline-block;
padding: 9px 12px;
border-radius: 16px;
font-size: 12px;
line-height: 1.35;
max-width: 80%;
}
.bubble.in {
align-self: flex-start;
background: #ece6db;
color: var(--ink);
border-bottom-left-radius: 5px;
}
.bubble.out {
align-self: flex-end;
background: var(--magenta-700);
color: #fff;
border-bottom-right-radius: 5px;
}
.bubble .tick {
display: inline-block;
margin-left: 6px;
color: rgba(255,255,255,0.6);
font-size: 10px;
}
.sms-time {
align-self: center;
font-size: 10px;
color: var(--ink-3);
margin: 6px 0;
}
.sms-app__compose {
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
background: rgba(27,8,16,0.04);
border: 1px solid rgba(27,8,16,0.06);
border-radius: 999px;
padding: 9px 14px;
font-size: 11px;
color: var(--ink-3);
display: flex;
justify-content: space-between;
align-items: center;
}
.sms-app__compose .send-btn {
width: 22px; height: 22px;
border-radius: 999px;
background: var(--magenta-700);
color: #fff;
display: grid;
place-items: center;
font-size: 11px;
}
/* ============================================================
LOGO BAR
============================================================ */
.logo-bar {
padding: 40px 0 40px;
border-bottom: 1px solid var(--line);
}
.logo-bar__label {
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 22px;
font-weight: 600;
}
.logo-bar__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 56px;
align-items: center;
}
.logo-mark {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--ink-3);
opacity: 0.7;
transition: opacity .2s, color .2s;
white-space: nowrap;
}
.logo-mark:hover { opacity: 1; color: var(--magenta-700); }
/* ============================================================
STATS STRIP
============================================================ */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stat {
padding: 36px 24px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.stat:last-child { border-right: 0; }
.stat__big {
font-family: var(--font-display);
font-size: clamp(36px, 4vw, 52px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
color: var(--gold-400);
}
.stat__lbl {
margin-top: 8px;
font-size: 14px;
color: rgba(255,255,255,0.75);
line-height: 1.4;
}
.stat__sub {
margin-top: 4px;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
/* ============================================================
FEATURES (BENTO)
============================================================ */
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 240px;
gap: 20px;
}
.bento__item {
position: relative;
padding: 28px;
border-radius: var(--r-xl);
border: 1px solid var(--line);
background: var(--paper);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform .2s, box-shadow .25s;
}
.bento__item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.bento__item--lg { grid-column: span 3; grid-row: span 2; }
.bento__item--md { grid-column: span 3; grid-row: span 1; }
.bento__item--sm { grid-column: span 2; grid-row: span 1; }
.bento__item--wide { grid-column: span 4; grid-row: span 1; }
.bento__item--plum {
background: var(--plum-900);
background-image: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(176,38,100,0.35), transparent 60%);
color: #fff;
border-color: rgba(255,255,255,0.08);
}
.bento__item--gold {
background: var(--gold-500);
background-image: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
color: #3a1604;
border-color: rgba(58, 22, 4, 0.12);
}
.feature__icon {
width: 44px; height: 44px;
border-radius: var(--r-md);
background: var(--magenta-50);
color: var(--magenta-700);
display: grid;
place-items: center;
margin-bottom: 14px;
}
.bento__item--plum .feature__icon {
background: rgba(255,255,255,0.08);
color: var(--gold-400);
}
.bento__item--gold .feature__icon {
background: rgba(58, 22, 4, 0.12);
color: #3a1604;
}
.feature__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.015em;
margin-bottom: 8px;
}
.feature__desc {
font-size: 14px;
line-height: 1.5;
color: var(--ink-2);
max-width: 36ch;
}
.bento__item--plum .feature__desc { color: rgba(255,255,255,0.7); }
.bento__item--gold .feature__desc { color: rgba(58, 22, 4, 0.78); }
/* ── feature mini visuals ── */
.mini-chart {
position: absolute;
bottom: 0; right: 0;
width: 60%;
height: 60%;
opacity: 0.6;
}
.code-block {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.55;
background: rgba(0,0,0,0.25);
border-radius: var(--r-md);
padding: 14px 16px;
color: rgba(255,255,255,0.85);
white-space: pre;
overflow: hidden;
}
.code-block .k { color: #f9a8d4; }
.code-block .s { color: var(--gold-300); }
.code-block .c { color: rgba(255,255,255,0.4); }
/* ============================================================
HOW IT WORKS
============================================================ */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 56px;
position: relative;
}
.step {
position: relative;
padding: 28px;
border-radius: var(--r-xl);
background: var(--paper);
border: 1px solid var(--line);
}
.step__num {
font-family: var(--font-display);
font-size: 48px;
font-weight: 800;
color: var(--magenta-100);
line-height: 1;
letter-spacing: -0.03em;
}
.step__title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
margin-top: 8px;
letter-spacing: -0.015em;
}
.step__title .sw { color: var(--magenta-700); }
.step__desc {
margin-top: 10px;
font-size: 14px;
line-height: 1.55;
color: var(--ink-2);
}
/* ============================================================
USE CASES
============================================================ */
.use-cases {
margin-top: 48px;
}
.uc-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
padding: 6px;
background: var(--cream-2);
border-radius: var(--r-pill);
width: fit-content;
}
.uc-tab {
padding: 10px 18px;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 600;
border: 0;
background: transparent;
color: var(--ink-2);
transition: background .15s, color .15s;
}
.uc-tab[aria-selected="true"] {
background: var(--magenta-700);
color: #fff;
}
.uc-tab:not([aria-selected="true"]):hover {
background: rgba(27,8,16,0.05);
}
.uc-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.uc-panel[hidden] { display: none; }
.uc-copy h3 {
font-size: 28px;
margin-bottom: 12px;
}
.uc-copy p { color: var(--ink-2); margin: 0 0 18px 0; max-width: 46ch; }
.uc-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.uc-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--ink-2);
}
.uc-list li::before {
content: "";
flex: 0 0 auto;
margin-top: 7px;
width: 6px; height: 6px;
border-radius: 999px;
background: var(--gold-500);
}
.uc-preview {
position: relative;
background: var(--paper);
border-radius: var(--r-xl);
border: 1px solid var(--line);
padding: 28px;
min-height: 320px;
box-shadow: var(--shadow-md);
}
.uc-preview__title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 700;
margin-bottom: 16px;
}
/* ============================================================
DEVELOPER SECTION
============================================================ */
.dev-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 56px;
align-items: center;
}
.dev-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.dev-card__tabs {
display: flex;
gap: 4px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.18);
align-items: center;
}
.dev-card__tabs .dot {
width: 12px; height: 12px; border-radius: 999px;
display: inline-block;
}
.dev-card__tabs .dot.r { background: #ff5f57; }
.dev-card__tabs .dot.y { background: #febc2e; }
.dev-card__tabs .dot.g { background: #28c840; }
.dev-card__tabs .file {
margin-left: 16px;
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255,255,255,0.55);
}
.dev-card pre {
margin: 0;
padding: 28px 32px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.65;
color: rgba(255,255,255,0.92);
overflow-x: auto;
}
.dev-card pre .k { color: #f9a8d4; }
.dev-card pre .s { color: var(--gold-300); }
.dev-card pre .c { color: rgba(255,255,255,0.4); }
.dev-card pre .v { color: #93c5fd; }
/* ============================================================
PRICING
============================================================ */
/* Hero pricing — 3 wider cards (Starter · Business · Bulk) */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 48px;
align-items: stretch;
}
.price-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: 32px 30px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
transition: transform .2s, box-shadow .25s, border-color .2s;
}
.price-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.price-card--featured {
background: var(--plum-900);
background-image:
radial-gradient(ellipse 90% 70% at 50% 0%, rgba(229,168,35,0.22), transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(176,38,100,0.25), transparent 60%);
color: #fff;
border-color: var(--plum-900);
transform: translateY(-12px) scale(1.03);
box-shadow: var(--shadow-lg);
z-index: 1;
}
.price-card--featured:hover { transform: translateY(-14px) scale(1.03); }
.price-card__badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--gold-500);
color: #3a1604;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 800;
padding: 5px 14px;
border-radius: var(--r-pill);
box-shadow: 0 8px 16px -4px rgba(229,168,35,0.5);
}
.price-card__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.price-card__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.015em;
}
.price-card__range {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.price-card--featured .price-card__range { color: rgba(255,255,255,0.55); }
.price-card__price {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 6px;
}
.price-card__price .amt {
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--magenta-800);
line-height: 0.95;
}
.price-card__price .currency {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: var(--magenta-700);
letter-spacing: 0.04em;
}
.price-card--featured .price-card__price .amt { color: var(--gold-400); }
.price-card--featured .price-card__price .currency { color: var(--gold-300); }
.price-card__price .per {
font-size: 13px;
color: var(--ink-3);
}
.price-card--featured .price-card__price .per { color: rgba(255,255,255,0.55); }
.price-card__save {
display: inline-flex;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: var(--r-sm);
background: var(--magenta-50);
color: var(--magenta-700);
width: fit-content;
letter-spacing: 0.04em;
}
.price-card--featured .price-card__save {
background: rgba(229,168,35,0.18);
color: var(--gold-400);
}
.price-card__sep {
height: 1px;
background: var(--line);
margin: 4px -6px;
}
.price-card--featured .price-card__sep { background: rgba(255,255,255,0.1); }
.price-card ul {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
color: var(--ink-2);
margin-top: 4px;
line-height: 1.4;
}
.price-card--featured ul { color: rgba(255,255,255,0.85); }
.price-card li {
display: flex;
gap: 10px;
align-items: flex-start;
}
.price-card li::before {
content: "";
flex: 0 0 auto;
width: 18px; height: 18px;
border-radius: 999px;
background: var(--magenta-50);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: center;
margin-top: 2px;
}
.price-card--featured li::before {
background-color: rgba(229,168,35,0.18);
background-image: url("data:image/svg+xml;utf8,");
}
.price-card__cta {
margin-top: auto;
padding-top: 8px;
}
.price-card .btn {
width: 100%;
justify-content: center;
padding: 14px 22px;
}
/* Volume tier table beneath hero pricing */
.tier-table {
margin-top: 56px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.tier-table__head {
display: grid;
grid-template-columns: 2fr 1.6fr 1fr 1fr;
padding: 16px 24px;
background: var(--cream-2);
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 700;
}
.tier-table__row {
display: grid;
grid-template-columns: 2fr 1.6fr 1fr 1fr;
padding: 18px 24px;
border-bottom: 1px solid var(--line);
align-items: center;
transition: background .12s;
}
.tier-table__row:last-child { border-bottom: 0; }
.tier-table__row:hover { background: var(--cream); }
.tier-table__tier {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.tier-table__tier .dot {
width: 8px; height: 8px;
border-radius: 999px;
background: var(--magenta-700);
}
.tier-table__row.is-featured .tier-table__tier .dot { background: var(--gold-500); }
.tier-table__vol { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); }
.tier-table__price { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--magenta-800); letter-spacing: -0.02em; }
.tier-table__row.is-featured .tier-table__price { color: var(--gold-700); }
.tier-table__save {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--magenta-700);
}
.tier-table__save.zero { color: var(--ink-3); font-weight: 500; }
.pricing-perks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 48px;
}
.perk {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
.perk__icon {
width: 36px; height: 36px;
border-radius: var(--r-md);
background: var(--magenta-50);
color: var(--magenta-700);
display: grid;
place-items: center;
flex: 0 0 auto;
}
.perk__title { font-weight: 700; font-size: 14px; }
.perk__sub { font-size: 12px; color: var(--ink-3); }
/* ============================================================
TESTIMONIALS
============================================================ */
/* ============================================================
TESTIMONIALS — Editorial featured + secondary stack
============================================================ */
.testimonials {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 24px;
margin-top: 56px;
align-items: stretch;
}
/* Featured editorial quote */
.quote--featured {
position: relative;
background: var(--plum-900);
background-image:
radial-gradient(ellipse 80% 60% at 0% 100%, rgba(176,38,100,0.42), transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 0%, rgba(229,168,35,0.20), transparent 60%);
color: #fff;
border-radius: var(--r-2xl);
padding: 56px 56px 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
min-height: 480px;
}
.quote--featured::before {
content: "“";
position: absolute;
top: -40px;
left: 36px;
font-family: var(--font-display);
font-size: 240px;
font-weight: 800;
color: var(--gold-500);
opacity: 0.22;
line-height: 1;
pointer-events: none;
}
.quote--featured .quote__brand {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-400);
font-weight: 700;
}
.quote--featured .quote__brand::before {
content: "";
width: 24px; height: 1px;
background: var(--gold-400);
}
.quote--featured .quote__text {
position: relative;
font-family: var(--font-display);
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.25;
font-weight: 500;
letter-spacing: -0.018em;
color: #fff;
margin-top: 28px;
max-width: 32ch;
}
.quote--featured .quote__text strong {
background: linear-gradient(180deg, transparent 62%, rgba(229,168,35,0.4) 62%, rgba(229,168,35,0.4) 92%, transparent 92%);
font-weight: 700;
color: var(--gold-300);
}
.quote--featured .quote__metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 36px 0 28px;
padding: 24px 0;
border-top: 1px solid rgba(255,255,255,0.12);
border-bottom: 1px solid rgba(255,255,255,0.12);
position: relative;
}
.quote--featured .quote__metric { }
.quote--featured .quote__metric-num {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
letter-spacing: -0.025em;
color: var(--gold-400);
line-height: 1;
}
.quote--featured .quote__metric-lbl {
margin-top: 4px;
font-size: 12px;
color: rgba(255,255,255,0.6);
font-weight: 500;
}
.quote--featured .quote__author {
position: relative;
display: flex;
align-items: center;
gap: 14px;
}
.quote--featured .quote__avatar {
width: 52px; height: 52px;
border-radius: 999px;
background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
color: var(--plum-900);
display: grid;
place-items: center;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.02em;
flex: 0 0 auto;
border: 2px solid rgba(255,255,255,0.1);
}
.quote--featured .quote__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
color: #fff;
letter-spacing: -0.01em;
}
.quote--featured .quote__role {
font-size: 13px;
color: rgba(255,255,255,0.6);
margin-top: 2px;
}
/* Secondary stack */
.quote-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
.quote {
flex: 1;
padding: 28px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
transition: transform .2s, box-shadow .25s, border-color .2s;
}
.quote:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--magenta-100);
}
.quote__mark {
position: absolute;
top: 20px;
right: 22px;
font-family: var(--font-display);
font-size: 56px;
font-weight: 800;
color: var(--magenta-100);
line-height: 1;
pointer-events: none;
}
.quote__stars {
color: var(--gold-500);
letter-spacing: 2px;
font-size: 14px;
}
.quote__text {
font-family: var(--font-display);
font-size: 17px;
line-height: 1.4;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0;
}
.quote__author {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 4px;
}
.quote__avatar {
width: 40px; height: 40px;
border-radius: 999px;
background: var(--magenta-700);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 14px;
flex: 0 0 auto;
}
.quote__name {
font-weight: 700;
font-size: 14px;
}
.quote__role {
font-size: 12px;
color: var(--ink-3);
margin-top: 2px;
}
/* Tweak-controlled testimonial layout: classic 3-card grid */
body[data-testimonial-layout="cards"] .testimonials {
grid-template-columns: repeat(3, 1fr);
}
body[data-testimonial-layout="cards"] .quote--featured {
display: none;
}
body[data-testimonial-layout="cards"] .quote-stack {
display: contents;
}
/* ============================================================
FAQ
============================================================ */
.faq-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 64px;
margin-top: 32px;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 4px;
transition: border-color .15s, box-shadow .2s;
}
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open] {
border-color: var(--magenta-100);
box-shadow: var(--shadow-sm);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 18px 20px;
font-weight: 600;
font-size: 16px;
color: var(--ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus {
flex: 0 0 auto;
width: 24px; height: 24px;
border-radius: 999px;
background: var(--magenta-50);
color: var(--magenta-700);
display: grid;
place-items: center;
transition: transform .2s, background .15s;
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.faq-item[open] .plus {
transform: rotate(45deg);
background: var(--magenta-700);
color: #fff;
}
.faq-item .ans {
padding: 0 20px 18px 20px;
font-size: 14px;
line-height: 1.6;
color: var(--ink-2);
}
/* ============================================================
FINAL CTA
============================================================ */
.final-cta {
text-align: center;
position: relative;
overflow: hidden;
}
.final-cta::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1.4px, transparent 2px);
background-size: 22px 22px;
pointer-events: none;
opacity: 0.6;
}
.final-cta__inner {
position: relative;
}
.final-cta h2 {
font-size: clamp(36px, 5vw, 64px);
color: #fff;
letter-spacing: -0.025em;
}
.final-cta h2 .accent { color: var(--gold-400); }
.final-cta p {
margin-top: 18px;
font-size: 18px;
color: rgba(255,255,255,0.78);
max-width: 56ch;
margin-left: auto;
margin-right: auto;
}
.final-cta__btns {
margin-top: 32px;
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
/* On phones the Play badge already spans the row, so the two account buttons
share the line above it and grow to the same combined width. `1 1 auto`
rather than equal halves keeps them proportional to their labels. */
/* 540 rather than 480: the three stop fitting on one line at ~505px, and in
that band the badge wrapped at its natural width under a full-width pair. */
@media (max-width: 540px) {
.final-cta__btns .btn { flex: 1 1 auto; min-width: 0; }
.final-cta__btns .btn--play { width: 100%; justify-content: center; }
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--plum-950);
color: rgba(255,255,255,0.7);
padding: 64px 0 32px;
}
.footer__grid {
display: grid;
/* Five link columns now that eHUB products are listed separately from this
site's own sections; the gap tightens so the labels stop wrapping. */
grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
gap: 40px;
margin-bottom: 48px;
}
.footer__brand img { height: 36px; width: auto; margin-bottom: 18px; }
.footer__brand p {
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.55);
max-width: 36ch;
margin: 0 0 18px;
}
.footer__col h3 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: rgba(255,255,255,0.5);
margin: 0 0 14px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
color: rgba(255,255,255,0.8);
font-size: 14px;
transition: color .15s;
}
.footer__col a:hover { color: var(--gold-400); }
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 13px;
color: rgba(255,255,255,0.5);
flex-wrap: wrap;
gap: 16px;
}
.footer__social {
display: flex;
gap: 10px;
}
.footer__social a {
width: 36px; height: 36px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
display: grid;
place-items: center;
transition: background .15s, color .15s;
color: rgba(255,255,255,0.7);
}
.footer__social a:hover {
background: var(--magenta-700);
color: #fff;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1080px) {
.bento {
grid-template-columns: repeat(4, 1fr);
/* Rows grow to their content instead of being pinned to 220px, so a card
whose copy is short no longer holds open a void beneath it. */
grid-auto-rows: minmax(200px, auto);
/* Without dense, --wide (span 4) cannot fit the two columns left beside
the gold card, so it drops a row and leaves a half-empty one behind.
Dense lets the later span-2 cards backfill those holes. */
grid-auto-flow: dense;
}
/* At four columns this card is already full width; spanning two rows forced
460px for roughly 300px of content and split it with a 98px gap. */
.bento__item--lg { grid-column: span 4; grid-row: span 1; }
.bento__item--md { grid-column: span 2; grid-row: span 1; }
.bento__item--sm { grid-column: span 2; grid-row: span 1; }
.bento__item--wide { grid-column: span 4; }
.price-card--featured { transform: none; }
.price-card--featured:hover { transform: translateY(-3px); }
.testimonials { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
/* Five items in two columns strands the last one on its own row; the
brand takes the full width so the four link columns tile 2x2. */
.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
.section { padding: 64px 0; }
.nav__links { display: none; }
.nav__burger { display: inline-flex; }
.hero { padding: 40px 0 64px; }
.hero__grid {
grid-template-columns: 1fr;
gap: 48px;
}
.app-grid {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
.app-grid__mockup {
max-width: 420px;
margin: 0 auto;
}
.hero__stage { height: 460px; }
.stats { grid-template-columns: repeat(2, 1fr); }
.stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 28px 16px; }
.stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.steps { grid-template-columns: 1fr; }
.uc-panel { grid-template-columns: 1fr; }
.dev-grid { grid-template-columns: 1fr; gap: 32px; }
.pricing-grid { grid-template-columns: 1fr; }
.pricing-perks { grid-template-columns: 1fr 1fr; }
.tier-table__head, .tier-table__row { grid-template-columns: 1.4fr 1.6fr 1fr 1fr; padding-left: 16px; padding-right: 16px; }
.quote--featured { padding: 36px 28px 28px; min-height: 0; }
.quote--featured::before { font-size: 160px; top: -20px; left: 16px; }
.faq-grid { grid-template-columns: 1fr; gap: 24px; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.logo-bar__row { gap: 32px; }
.uc-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 768px) {
.bento__item--wide > svg,
.bento__item--plum .code-block { display: none; }
}
@media (max-width: 540px) {
.container { padding: 0 20px; }
.bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
.bento__item { min-height: 220px; }
.bento__item--lg, .bento__item--md, .bento__item--sm, .bento__item--wide {
grid-column: span 1; grid-row: auto;
}
.pricing-perks { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr; }
.tier-table__head { display: none; }
.tier-table__row { grid-template-columns: 1fr 1fr; row-gap: 4px; padding: 14px 18px; }
.tier-table__tier { grid-column: 1 / 2; }
.tier-table__price { grid-column: 2 / 3; text-align: right; }
.tier-table__vol { grid-column: 1 / 2; font-size: 11px; }
.tier-table__save { grid-column: 2 / 3; text-align: right; font-size: 11px; }
.float-card { display: none; }
.phone-frame { width: 260px; height: 500px; }
}
/* ============================================================
TWEAK HOOKS — toggled via body[data-*] attributes
============================================================ */
/* Brand palettes */
body[data-palette="default"] { /* current magenta/gold — no override */ }
body[data-palette="forest"] {
--magenta-950: #082016;
--magenta-900: #0e3324;
--magenta-800: #134734;
--magenta-700: #186044;
--magenta-600: #1f7654;
--magenta-500: #2a8b65;
--magenta-100: #d8ebde;
--magenta-50: #ecf6ef;
--gold-700: #b06e0f;
--gold-600: #d28415;
--gold-500: #e89826;
--gold-400: #f2b14f;
--gold-300: #f7cb80;
--plum-950: #061a12;
--plum-900: #0a2418;
--plum-800: #11321e;
}
body[data-palette="ocean"] {
--magenta-950: #001a2f;
--magenta-900: #002e4a;
--magenta-800: #034366;
--magenta-700: #045a86;
--magenta-600: #056ba0;
--magenta-500: #117fb6;
--magenta-100: #d9ebf6;
--magenta-50: #eaf3fa;
--gold-700: #b86d05;
--gold-600: #d8870a;
--gold-500: #f0a022;
--gold-400: #f6b955;
--gold-300: #fbd285;
--plum-950: #001628;
--plum-900: #00253f;
--plum-800: #023556;
}
body[data-palette="sunset"] {
--magenta-950: #2e0a05;
--magenta-900: #4d130a;
--magenta-800: #6d1c12;
--magenta-700: #8b261b;
--magenta-600: #a83224;
--magenta-500: #c84231;
--magenta-100: #fbe2db;
--magenta-50: #fef0eb;
--gold-700: #b58a0c;
--gold-600: #d6a414;
--gold-500: #ecbb22;
--gold-400: #f1c84d;
--gold-300: #f7d97c;
--plum-950: #200502;
--plum-900: #310803;
--plum-800: #421006;
}
/* Density */
body[data-density="compact"] .section { padding: 64px 0; }
body[data-density="compact"] .hero { padding: 56px 0 64px; }
body[data-density="compact"] .section.tight { padding: 48px 0; }
body[data-density="spacious"] .section { padding: 128px 0; }
body[data-density="spacious"] .hero { padding: 96px 0 112px; }
body[data-density="spacious"] .section.tight { padding: 96px 0; }
/* Pattern intensity */
body[data-pattern="off"] .hero::before,
body[data-pattern="off"] .final-cta::before,
body[data-pattern="off"] .dot-trail-bg { display: none !important; }
body[data-pattern="bold"] .hero::before {
opacity: 1;
background-size: 18px 18px;
}
/* Hero floating cards */
body[data-floats="off"] .float-card { display: none; }
/* Announcement bar */
body[data-announcement="off"] .announcement { display: none; }
/* Headline language order — swap visual emphasis */
body[data-headline-lang="english-first"] .hero h1 .english-first { display: inline; }
body[data-headline-lang="english-first"] .hero h1 .swahili-first { display: none; }
body[data-headline-lang="swahili-first"] .hero h1 .english-first { display: none; }
body[data-headline-lang="swahili-first"] .hero h1 .swahili-first { display: inline; }
/* Pricing layout: hero (default) vs compact-table only */
body[data-pricing-layout="table-only"] .pricing-grid { display: none; }
body[data-pricing-layout="table-only"] .tier-table { margin-top: 48px; }
/* Hero variant: centered vs split */
body[data-hero-layout="centered"] .hero__grid {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
body[data-hero-layout="centered"] .hero__copy { max-width: 720px; }
body[data-hero-layout="centered"] .hero__sub { margin-left: auto; margin-right: auto; }
body[data-hero-layout="centered"] .hero__cta { justify-content: center; }
body[data-hero-layout="centered"] .hero__trust { justify-content: center; }
body[data-hero-layout="centered"] .hero__stage { display: none; }
/* ============================================================
TWEAKS PANEL
============================================================ */
.tweaks-panel {
position: fixed;
right: 20px;
bottom: 20px;
width: 320px;
max-height: calc(100vh - 40px);
background: #fff;
border-radius: 18px;
box-shadow:
0 24px 60px -16px rgba(27, 8, 16, 0.32),
0 0 0 1px rgba(27, 8, 16, 0.06);
z-index: 200;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink);
display: flex;
flex-direction: column;
overflow: hidden;
display: none; /* hidden until activated */
}
.tweaks-panel.is-open { display: flex; }
.tweaks-panel__hdr {
padding: 16px 18px 14px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
cursor: grab;
user-select: none;
}
.tweaks-panel__hdr:active { cursor: grabbing; }
.tweaks-panel__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 8px;
}
.tweaks-panel__title::before {
content: "";
width: 8px; height: 8px;
border-radius: 999px;
background: var(--gold-500);
box-shadow: 0 0 0 3px rgba(229, 168, 35, 0.22);
}
.tweaks-panel__close {
width: 28px; height: 28px;
border-radius: 8px;
background: transparent;
border: 0;
color: var(--ink-3);
display: grid;
place-items: center;
transition: background .12s, color .12s;
}
.tweaks-panel__close:hover { background: rgba(27, 8, 16, 0.06); color: var(--ink); }
.tweaks-panel__body {
padding: 14px 18px 18px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 18px;
}
.tweaks-panel__body::-webkit-scrollbar { width: 6px; }
.tweaks-panel__body::-webkit-scrollbar-thumb { background: rgba(27,8,16,0.18); border-radius: 999px; }
.tweak {
display: flex;
flex-direction: column;
gap: 8px;
}
.tweak__label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.tweak__segments {
display: flex;
background: var(--cream-2);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.tweak__segments button {
flex: 1;
padding: 7px 10px;
border: 0;
background: transparent;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
transition: background .12s, color .12s, box-shadow .12s;
white-space: nowrap;
}
.tweak__segments button:hover { color: var(--ink); }
.tweak__segments button[data-active="true"] {
background: var(--magenta-700);
color: #fff;
box-shadow: 0 2px 6px -1px rgba(74, 13, 42, 0.3);
}
.tweak__swatches {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.tweak__swatch {
position: relative;
height: 44px;
border-radius: 10px;
border: 2px solid transparent;
cursor: pointer;
overflow: hidden;
transition: transform .12s, border-color .12s;
}
.tweak__swatch:hover { transform: translateY(-1px); }
.tweak__swatch[data-active="true"] { border-color: var(--ink); }
.tweak__swatch::after {
content: attr(data-name);
position: absolute;
left: 0; right: 0; bottom: 0;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
padding: 2px 0;
background: rgba(0,0,0,0.35);
color: #fff;
}
.tweak__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tweak__toggle button {
width: 38px; height: 22px;
border-radius: 999px;
border: 0;
background: rgba(27, 8, 16, 0.18);
position: relative;
transition: background .15s;
flex: 0 0 auto;
}
.tweak__toggle button::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
border-radius: 999px;
background: #fff;
transition: transform .15s;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.tweak__toggle button[data-on="true"] { background: var(--magenta-700); }
.tweak__toggle button[data-on="true"]::after { transform: translateX(16px); }
.tweaks-fab {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px; height: 48px;
border-radius: 999px;
background: var(--plum-900);
color: var(--gold-400);
border: 0;
z-index: 199;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px -8px rgba(27, 8, 16, 0.4);
cursor: pointer;
transition: transform .15s, box-shadow .2s;
}
.tweaks-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -8px rgba(27, 8, 16, 0.5); }
.tweaks-fab.is-visible { display: flex; }
/* Skip link, A11y */
.skip {
position: absolute;
left: -9999px;
top: 0;
}
.skip:focus {
left: 16px; top: 16px;
padding: 10px 14px;
background: var(--plum-900);
color: #fff;
border-radius: var(--r-md);
z-index: 100;
}
/* Subtle reveal on scroll (CSS-only, IntersectionObserver lite via class) */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in {
opacity: 1;
transform: none;
}
/* ─── Mobile App Section ─────────────────────────────────────── */
.app-section-grid {
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 900px) {
.app-section-grid {
grid-template-columns: 1fr !important;
gap: 48px !important;
}
.app-section-grid > div:last-child {
order: -1;
justify-content: center;
}
.app-phone--main {
width: 160px !important;
}
.app-phone:not(.app-phone--main) {
width: 130px !important;
}
}
@media (max-width: 480px) {
.app-phone:not(.app-phone--main) {
display: none;
}
.app-phone--main {
width: 200px !important;
}
}
/* ─── Polish pass ────────────────────────────────────────────────
Accessibility and craft fixes layered after the original sheet so the
incumbent visual world stays intact. Ordered: focus, motion, contrast,
touch targets, announcement overflow. */
/* Focus. The sheet previously styled only .skip:focus, leaving every control
on the UA default ring — ~2.3:1 on cream, under the 3:1 of WCAG 2.2 SC
1.4.11. Keyboard-only, so pointer users see no change. */
:where(a, button, summary, [role="tab"], [tabindex]):focus-visible {
outline: 2px solid var(--magenta-700);
outline-offset: 3px;
border-radius: 4px;
}
/* Magenta disappears on the dark grounds; gold clears 10:1 there. */
:where(.section--plum, .footer, .announcement, .dev-panel)
:where(a, button, summary, [role="tab"], [tabindex]):focus-visible {
outline-color: var(--gold-400);
}
/* Motion. 33 reveal targets and an infinite pulse previously ran regardless of
the user's stated preference. Reveals resolve to their end state rather than
being disabled, so no content depends on an animation that never runs. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal,
.reveal.is-in {
opacity: 1;
transform: none;
transition: none;
}
.dot-live { animation: none; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Contrast. The step numerals are decorative (the carries the sequence)
and now aria-hidden, but a watermark still has to be visible: 1.20:1 → 3.04:1
on white. The quote stars carry an aria-label, so they are a labelled icon
needing 3:1 — gold-500 measured 2.11:1, gold-700 measures 4.27:1. */
.step__num { color: #c97bac; }
.quote__stars { color: var(--gold-700); }
/* Touch targets. 44px is the floor; these were 40, 36, and 17.5px. The footer
links keep their 14px type and gain the height through padding, so the
visual rhythm holds. */
.nav__burger { width: 44px; height: 44px; }
.footer__social a { width: 44px; height: 44px; }
.footer__col ul { gap: 2px; }
.footer__col a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer__bottom a,
.btn--play { min-height: 44px; }
/* Remaining touch targets: the nav brand (32px), the small nav buttons (40px),
and the Google Play badge (32px wide). Inline prose links (.link-arrow) are
left at 24.8px — above the 24px of WCAG 2.5.8 AA, and padding them to 44
would break the line rhythm they sit in. */
.nav__brand {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.nav__cta .btn--sm { min-height: 44px; }
a[aria-label*="Google Play"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
/* The stage's proof cards were display:none below 820px, so the only evidence
in the hero — live send volume and delivery rate — disappeared on exactly the
devices this audience uses. They become a static two-up beneath the phone
instead, using grid areas so no markup moves. */
@media (max-width: 820px) {
.hero__stage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"phone phone"
"send delivery";
gap: 16px;
height: auto;
justify-items: stretch;
/* The base rule centres flex children; in the grid that centres each card
in its own row track, so two cards of different heights misalign. */
align-items: start;
}
.phone-frame { grid-area: phone; justify-self: center; }
.float-card {
display: block;
position: static;
transform: none;
min-width: 0;
padding: 12px 14px;
}
.float-card--send { grid-area: send; }
.float-card--delivery { grid-area: delivery; }
.float-card__big { font-size: 22px; }
.float-card__small { font-size: 11px; }
}
/* fell back to the browser's synthetic oblique — none of the three loaded
families ships an italic cut. Emphasis is carried the way the rest of the
page carries it (magenta + weight) instead, staying distinct from ,
which is heavier and keeps the body ink. */
em {
font-style: normal;
font-weight: 600;
}
/* ─── Nav: floating pill on scroll ───────────────────────────────
The shell keeps a fixed height and the container inside it shrinks, so the
bar can detach without the page content jumping when the state flips.
The transparent border is declared up front for the same reason — it stops a
1px shift when the pill's border appears. */
.nav-shell {
height: var(--nav-h);
/* Flex, not block: the pill's top margin would otherwise collapse through the
shell (no top border or padding to stop it) and the inset silently vanish. */
display: flex;
align-items: center;
transition: background .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
.nav-shell > .container {
height: 100%;
border: 1px solid transparent;
transition:
max-width .28s ease, width .28s ease, height .28s ease,
padding .28s ease, background .28s ease, border-color .28s ease,
border-radius .28s ease, box-shadow .28s ease;
}
.nav-shell .nav { height: 100%; }
.nav-shell.is-stuck {
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.nav-shell.is-stuck > .container {
width: calc(100% - 24px);
max-width: 1040px;
height: 56px;
padding: 0 20px;
border-radius: var(--r-pill);
/* Glass. 0.62 is a floor, not a taste call: the bar floats over the dark plum
sections, and cream at this alpha composited over #2a0a1a still gives the
--ink-2 nav links 5.09:1. Dropping to 0.55 puts them at 4.17:1 and fails AA. */
background: rgba(251, 246, 234, 0.62);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-color: rgba(255, 255, 255, 0.55);
/* The inset highlight is the glass edge — light catching the top lip. Without
it the pill reads as flat translucent fill. */
box-shadow:
0 10px 30px -14px rgba(74, 13, 42, 0.30),
0 2px 6px -2px rgba(27, 8, 16, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
/* Without backdrop-filter there is no blur to keep text off the content behind
it, so the fill goes near-opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-shell.is-stuck > .container {
background: rgba(251, 246, 234, 0.95);
border-color: var(--line);
}
}
/* In the 56px pill the 44px touch-target minimum leaves the CTAs 6px of
breathing room against the logo's and links' 12px, so they read as bursting
out of the glass. 40px restores the rhythm and still clears WCAG 2.5.8 AA
(24px); the full-height bar keeps the 44px target. */
.nav-shell .nav__cta .btn--sm { transition: min-height .28s ease, padding .28s ease; }
.nav-shell.is-stuck .nav__cta .btn--sm { min-height: 40px; }
/* The base reset covers ul but not ol, so this rendered browser "1. 2. 3."
markers beside the designed 01/02/03 numerals. Scoped rather than reset on
every ol — the docs and legal pages have ordered lists that need their
markers. (Present in the Laravel original too.) */
.steps { list-style: none; }
/* ─── Use cases: unified preview anatomy ─────────────────────────
One structure for all five panels (label, message, breakdown rows) with
three candidate treatments toggled by a skin class on the section. */
.uc-preview { display: flex; flex-direction: column; gap: 16px; }
.uc-sms {
padding: 14px 16px;
background: var(--cream);
border-radius: var(--r-md);
font-size: 13px;
line-height: 1.5;
}
.uc-sms__sender {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--magenta-700);
margin-bottom: 6px;
}
.uc-sms__text { margin: 0; color: var(--ink); }
.uc-break { margin: 0; display: flex; flex-direction: column; }
.uc-break__row dt {
font-size: 12px;
color: var(--ink-3);
}
.uc-break__row dd {
margin: 0;
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.01em;
color: var(--ink);
}
.uc-break__row.is-accent dd { color: var(--magenta-700); }
/* Breakdown rows: hairline-separated, value right-aligned. */
.uc-break__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-top: 1px solid var(--line);
}
.uc-break__row:first-child { border-top: 0; padding-top: 4px; }
.uc-break__row dd { font-size: 20px; }
.uc-break__row.is-wide dd {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
}
/* ─── Feature bento: the large card in its three shapes ──────────
The card takes three shapes and each needs different internals:
>1080px portrait, half width, two rows tall -> stacked, tall thread
641-1080 landscape, full width, one row -> copy left, demo right
<=640 stacked single column -> stacked, compact demo
The demo bubbles are absolutely positioned, so they contribute no height:
the container's min-height must match the arrangement or `overflow:hidden`
clips them (it was cutting 59px at 360px wide). */
.feature__demo {
position: relative;
flex: 1 1 auto;
margin-top: 18px;
/* Compact three-chip cluster is the default; bubbles end at ~121px. */
min-height: 130px;
}
.fdemo {
position: absolute;
padding: 8px 12px;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
}
.fdemo--in {
left: 0;
top: 0;
max-width: 200px;
background: var(--magenta-50);
color: var(--magenta-800);
border-bottom-left-radius: 4px;
}
.fdemo--out {
left: 60px;
top: 48px;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--magenta-700);
color: #fff;
border-bottom-right-radius: 4px;
}
.fdemo__tick { flex: none; }
/* Only shown where the card is tall enough to need it. */
.fdemo--reply { display: none; }
.fdemo--meta {
left: 30px;
top: 90px;
padding: 6px 10px;
background: #fff;
border: 1px solid var(--line);
font-size: 11px;
color: var(--ink-3);
font-family: var(--font-mono);
}
/* Landscape: copy left, demo right, so the full-width card is not half empty. */
@media (min-width: 641px) and (max-width: 1080px) {
.bento__item--lg {
flex-direction: row;
align-items: center;
gap: 36px;
}
.bento__item--lg > div:first-child { flex: 1 1 auto; }
.bento__item--lg .feature__desc { max-width: 52ch; }
.bento__item--lg .feature__demo {
flex: 0 0 300px;
margin-top: 0;
}
}
/* Portrait and tall: the card is 500px for ~300px of copy, so the thread grows
to fill it rather than leaving a 138px gap. min-height matches the lowest
bubble (186 + 31) so nothing is clipped. */
@media (min-width: 1081px) {
/* The card is 506px of usable width but the copy was capped at 36ch (369px)
and the bubbles ended at 229px, leaving the right third of the card empty.
The copy now runs the full width (~62ch, still inside a comfortable
measure) and the outgoing bubbles sit right, which fills the card and is
how a real message thread reads. */
.bento__item--lg .feature__desc { max-width: none; }
.bento__item--lg .feature__demo { min-height: 220px; }
.bento__item--lg .fdemo--in { left: 0; right: auto; top: 0; }
.bento__item--lg .fdemo--out { left: auto; right: 0; top: 62px; }
.bento__item--lg .fdemo--reply {
display: block;
top: 124px;
left: auto;
right: 0;
background: var(--cream-2);
color: var(--ink-2);
border-bottom-right-radius: 4px;
}
.bento__item--lg .fdemo--meta { top: 186px; left: 0; }
}
/* ─── Mobile: one primary CTA, not two ───────────────────────────
The nav and the hero both said "Get started" pointing at /register, and the
nav row was 257px of buttons in a 375px viewport. Below 640px the nav drops
its primary and the hero's takes the full row as the page's single CTA.
The label swaps to English there because the button is the only call to
action on screen and has to be unambiguous at a glance. Only one label is in
the layout at a time, so assistive tech announces one. */
.btn__label--compact { display: none; }
@media (max-width: 640px) {
.nav__cta .btn--primary { display: none; }
.hero__cta > .btn--primary {
width: 100%;
justify-content: center;
}
.btn__label--wide { display: none; }
.btn__label--compact { display: inline; }
}
/* Between 481 and 640 the primary already spans the row while the badge keeps
its natural width, so they sit unevenly. Grid rather than `flex: 1 1 0`,
which rendered 248/244 here — two tracks are exactly equal by definition.
Below 481 both are full width and stacked, which is left as is. */
@media (min-width: 481px) and (max-width: 640px) {
.hero__cta {
display: grid;
grid-template-columns: 1fr 1fr;
}
.hero__cta > .btn--primary,
.hero__cta > .btn--play {
width: auto;
min-width: 0;
justify-content: center;
}
}
/* ─── Use-case tabs: one relaxed line ────────────────────────────
The tablist was already nowrap and scrollable, but the buttons were flex
children with no basis, so at 375px they shrank to ~90px and their labels
wrapped inside the pills — 85px tall buttons in a 97px row. Fixing the
shrink and the wrap lets each pill sit at its natural width and the row
scrolls instead of growing downwards. */
.uc-tab {
flex: 0 0 auto;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
/* Was 10px 18px with the height coming from wrapped text; an explicit
min-height keeps the 44px touch target now that nothing wraps. */
min-height: 44px;
padding: 0 18px;
}
.uc-tabs {
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.uc-tabs::-webkit-scrollbar { display: none; }
/* Fades signalling the tablist scrolls. They sit over the pill's own edges and
are toggled from real scroll position, so neither appears when there is
nothing more in that direction. The gradient resolves to the track colour so
the pills look like they slide under the container's edge. */
.uc-tabs-wrap {
position: relative;
width: fit-content;
max-width: 100%;
margin-bottom: 32px;
}
.uc-tabs { margin-bottom: 0; }
.uc-tabs-wrap::before,
.uc-tabs-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 48px;
pointer-events: none;
opacity: 0;
transition: opacity .2s ease;
border-radius: var(--r-pill);
}
.uc-tabs-wrap::before {
left: 0;
background: linear-gradient(to right, var(--cream-2) 30%, transparent);
}
.uc-tabs-wrap::after {
right: 0;
background: linear-gradient(to left, var(--cream-2) 30%, transparent);
}
.uc-tabs-wrap.has-start::before { opacity: 1; }
.uc-tabs-wrap.has-end::after { opacity: 1; }
/* Panel swap. One authored moment: the incoming panel lifts and resolves from
an already-visible default, with the preview a beat behind the copy so the
eye follows the reading order. The panel is animated in place rather than
replaced, because the panels differ by up to 139px and unmounting would
collapse the section mid-swap. The global reduced-motion block neutralises
this along with every other animation. */
@keyframes uc-swap-in {
/* Starts visible, not at zero. With fill-mode `both` an opacity-0 keyframe
is applied during the delay too, so the incoming panel was blank for the
first ~77ms: the old text vanished, nothing showed, then it faded in. That
gap read as a blink. Resolving from 0.45 keeps content on screen
throughout, and the movement carries the change instead. */
from { opacity: 0.45; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.uc-panel.is-swapping > .uc-copy,
.uc-panel.is-swapping > .uc-preview {
animation: uc-swap-in .32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.uc-panel.is-swapping > .uc-preview { animation-delay: 40ms; }
/* Star rows are drawn SVGs now, so they need flex alignment rather than the
letter-spacing that spaced the old glyphs. */
.stars {
display: inline-flex;
align-items: center;
gap: 2px;
/* The row sits inside flex parents (.quote), which blockify inline-flex and
then stretch it to the full column width. Shrink-wrap it instead. */
align-self: start;
width: fit-content;
}
/* ─── Testimonials: quote width and mobile metrics ───────────────
.quote/.quote--featured are , and the UA default
`figure { margin: 1em 40px }` was never reset, so the card rendered 80px
narrower than its grid track (255px inside a 335px column at 375px). That
squeezed 24px type into a 199px measure and pushed the metrics past the
card's right edge. Scoped to these classes rather than resetting every
figure, because the docs and legal pages share this stylesheet. */
.quote,
.quote--featured {
margin: 0;
}
@media (max-width: 640px) {
.quote--featured .quote__text { font-size: 19px; line-height: 1.45; }
.quote--featured { padding: 28px 22px 24px; }
}
/* Developer capability list: no markers. The arrows were Unicode glyphs doing
an icon's job, and the items read as capabilities rather than as a bulleted
sequence. Inline styles moved here so the list is stylable in one place. */
.dev-list {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.dev-list li {
/* Same dot marker as .uc-list so both capability lists read alike; gold-400
rather than gold-500 because this list sits on the plum ground. */
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(255, 255, 255, 0.78);
font-size: 15px;
line-height: 1.5;
}
.dev-list li::before {
content: "";
flex: 0 0 auto;
margin-top: 8px;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--gold-400);
}
/* ─── Buttons: smaller scale ─────────────────────────────────────
Every step comes down a notch and the drift is removed with it: base
buttons rendered 51px in most places but 53px inside pricing cards (a
padding override), and .btn--play sat at 52px beside 59px siblings. The
three steps are now one scale, and the play badge matches whichever step it
sits next to. Heights stay at or above 44px except --sm, which is 36px —
still well clear of the 24px WCAG 2.5.8 AA floor. */
.btn {
padding: 10px 18px;
font-size: 14px;
/* Pinned rather than left to content: identical buttons were rendering 42px
in the final CTA and 44px in the hero, because a stretching row takes its
height from the tallest child. This also keeps the 44px touch target. */
min-height: 44px;
justify-content: center;
}
.btn--sm { padding: 7px 14px; font-size: 12.5px; min-height: 36px; }
.btn--lg { padding: 13px 24px; font-size: 15px; min-height: 50px; }
/* Was padding: 14px 22px, which made pricing CTAs 2px taller than every
other base button. */
.price-card .btn { padding: 10px 18px; }
.btn--play { padding: 8px 16px; min-height: 0; }
.btn--play__label span:first-child { font-size: 9px; }
.btn--play__label span:last-child { font-size: 13px; }
/* The nav keeps a comfortable target; the stuck pill trims to match its
reduced height. */
.nav__cta .btn--sm { min-height: 40px; }
.nav-shell.is-stuck .nav__cta .btn--sm { min-height: 36px; }
/* ─── Section reveals ────────────────────────────────────────────
Each section has its own entrance rather than one fade repeated eleven
times. The motion is chosen from what the section is doing: the steps arrive
in sequence because they are a sequence; the developer halves part because
it is a split; the testimonial pulls into focus. Everything resolves from an
already-committed position with an exponential ease-out.
The offset state lives under .anim-ready, which JS adds — so without JS the
sections render normally instead of staying blank. */
[data-anim] .section-head,
[data-anim] > .container > div:first-child,
[data-anim] [data-anim-item] {
transition:
opacity .6s cubic-bezier(0.16, 1, 0.3, 1),
transform .6s cubic-bezier(0.16, 1, 0.3, 1),
filter .6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Section heading block: a short, common lift so the sections still feel like
one page. The signature belongs to the content beneath it. */
[data-anim].anim-ready > .container > div:first-child {
opacity: 0;
transform: translateY(16px);
}
[data-anim].is-in > .container > div:first-child {
opacity: 1;
transform: none;
}
/* Shared timing for the item groups; each variant supplies its own offset. */
[data-anim].anim-ready .stat,
[data-anim].anim-ready .bento__item,
[data-anim].anim-ready .step,
[data-anim].anim-ready .uc-tabs-wrap,
[data-anim].anim-ready .uc-panel,
[data-anim].anim-ready .dev-grid > *,
[data-anim].anim-ready .price-card,
[data-anim].anim-ready .quote,
[data-anim].anim-ready .quote--featured,
[data-anim].anim-ready .app-grid > *,
[data-anim].anim-ready .faq-item {
transition:
opacity .62s cubic-bezier(0.16, 1, 0.3, 1),
transform .62s cubic-bezier(0.16, 1, 0.3, 1),
filter .62s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--i, 0) * 70ms + 90ms);
}
/* count — the metrics lift as if landing on their final value. */
[data-anim="count"].anim-ready .stat { opacity: 0; transform: translateY(22px); }
[data-anim="count"].is-in .stat { opacity: 1; transform: none; }
/* settle — the bento cards come to rest out of soft focus. */
[data-anim="settle"].anim-ready .bento__item {
opacity: 0;
transform: scale(0.97) translateY(16px);
filter: blur(6px);
}
[data-anim="settle"].is-in .bento__item {
opacity: 1;
transform: none;
filter: none;
}
/* sequence — the three steps arrive in order, left to right, because the
order is the content. */
[data-anim="sequence"].anim-ready .step { opacity: 0; transform: translateX(-28px); }
[data-anim="sequence"].is-in .step { opacity: 1; transform: none; }
[data-anim="sequence"].anim-ready .step { transition-delay: calc(var(--i, 0) * 130ms + 90ms); }
/* lift — tabs first, then the panel they control. */
[data-anim="lift"].anim-ready .uc-tabs-wrap,
[data-anim="lift"].anim-ready .uc-panel { opacity: 0; transform: translateY(20px); }
[data-anim="lift"].is-in .uc-tabs-wrap,
[data-anim="lift"].is-in .uc-panel { opacity: 1; transform: none; }
/* split — the two halves part from the centre line. */
[data-anim="split"].anim-ready .dev-grid > *:first-child { opacity: 0; transform: translateX(-30px); }
[data-anim="split"].anim-ready .dev-grid > *:last-child { opacity: 0; transform: translateX(30px); }
/* Matches the offset rules' specificity (:first-child/:last-child add a
class-level weight); a plain `> *` selector here loses to them and the
halves stayed invisible. */
[data-anim="split"].is-in .dev-grid > *:first-child,
[data-anim="split"].is-in .dev-grid > *:last-child { opacity: 1; transform: none; }
/* rise — pricing cards come up together, the featured one a beat later so it
lands last and reads as the answer. */
[data-anim="rise"].anim-ready .price-card { opacity: 0; transform: translateY(30px); }
[data-anim="rise"].is-in .price-card { opacity: 1; transform: none; }
[data-anim="rise"].anim-ready .price-card--featured { transition-delay: 260ms; }
/* focus — the quote resolves out of blur, like attention landing on it. */
[data-anim="focus"].anim-ready .quote--featured,
[data-anim="focus"].anim-ready .quote {
opacity: 0;
filter: blur(12px);
transform: scale(1.015);
}
[data-anim="focus"].is-in .quote--featured,
[data-anim="focus"].is-in .quote {
opacity: 1;
filter: none;
transform: none;
}
/* phone — the app screen rises into the frame. */
[data-anim="phone"].anim-ready .app-grid > * { opacity: 0; transform: translateY(38px); }
[data-anim="phone"].is-in .app-grid > * { opacity: 1; transform: none; }
/* cascade — questions fall quickly, one after another. */
[data-anim="cascade"].anim-ready .faq-item { opacity: 0; transform: translateY(14px); }
[data-anim="cascade"].is-in .faq-item { opacity: 1; transform: none; }
[data-anim="cascade"].anim-ready .faq-item { transition-delay: calc(var(--i, 0) * 45ms + 60ms); }
/* zoom — the closing call arrives as one piece. */
[data-anim="zoom"].anim-ready > .container { opacity: 0; transform: scale(0.955); }
[data-anim="zoom"] > .container {
transition:
opacity .7s cubic-bezier(0.16, 1, 0.3, 1),
transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim="zoom"].is-in > .container { opacity: 1; transform: none; }
/* ─── Back to top ────────────────────────────────────────────────
Sits under the sticky nav's z-index so it can never cover it. Hidden with
`visibility` rather than opacity alone, which also takes it out of the tab
order and hit-testing while it is away. */
.to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 40;
width: 44px;
height: 44px;
display: grid;
place-items: center;
padding: 0;
border-radius: var(--r-pill);
background: var(--magenta-700);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: var(--shadow-md);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .25s ease, transform .25s cubic-bezier(0.16, 1, 0.3, 1), visibility .25s, background .15s ease;
}
.to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.to-top:hover { background: var(--magenta-600); }
.to-top:active { transform: translateY(1px); }
@media (max-width: 640px) {
.to-top { right: 14px; bottom: 14px; }
}
/* Anchor targets sit under the 72px sticky nav without this, so #pricing,
#faq, #customers and the rest landed with their heading hidden behind it. */
html {
scroll-padding-top: calc(var(--nav-h) + 16px);
}
}