/* Homepage styles (templates/platform.html), served cached with ?v=. */
:root {
--font: 'Anek Bangla', system-ui, sans-serif; --font-display: 'Anek Bangla', system-ui, sans-serif;
--bg: #0A1330;
--bg-raised: #111C3D;
--bg-raised-2: #18244A;
--text: #EEF0F6;
--text-dim: #A3ABC4;
--text-faint: #6B7494;
--line: #243056;
--accent: #EEF0F6;
--btn-text: #0A1330;
--canopy: #111F4E;
--call: #D4B45C; --call-soft: rgba(212,180,92,0.16); --call-text: #D4B45C;
--live: #8FD3A0; --live-soft: rgba(143,211,160,0.14);
--focus: #D4B45C;
/* price cards specifically -- a soft, borderless, recessed
panel; dark mode keeps the page's raised-panel tone */
--price-card-bg: var(--bg-raised);
--price-card-featured-bg: var(--bg-raised-2);
--price-card-divider: var(--line);
}
:root[data-theme="light"] {
--bg: #F5F6FA;
--bg-raised: #FFFFFF;
--bg-raised-2: #ECEFF6;
--text: #0D1D4A;
--text-dim: #4A5578;
--text-faint: #8089A6;
--line: #DDE1EC;
--accent: #0D1D4A;
--btn-text: #ffffff;
--canopy: #0D1D4A;
--call: #CFAF55; --call-soft: #F7EFD6; --call-text: #8A6D1F;
--live: #2F855A; --live-soft: #E3F3E8;
--focus: #B8923A;
--price-card-bg: #ECEFF6;
--price-card-featured-bg: #E2E7F2;
--price-card-divider: #D5DBEA;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, .display {
font-family: var(--font-display); font-weight: 650; font-stretch: 112%;
letter-spacing: -0.02em;
margin: 0;
}
.wrap {
max-width: 1024px;
margin: 0 auto;
padding: 0 28px;
}
/* --- nav --- */
nav {
padding: 32px 0;
}
nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.wordmark {
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.01em;
color: var(--text);
text-decoration: none;
}
nav a.nav-cta {
font-size: 13.5px;
color: var(--text-dim);
text-decoration: none;
border: 1px solid var(--line);
padding: 8px 16px;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
}
nav a.nav-cta:hover { color: var(--text); border-color: var(--text-faint); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-link { font-size: 13.5px; color: var(--text-dim); text-decoration: none; }
.nav-link:hover { color: var(--text); }
@media (max-width: 480px) {
.nav-actions { gap: 12px; }
.nav-link { display: none; }
}
.night-log {
margin: 0;
background: var(--canopy); color: #fff; border-radius: 20px;
padding: 22px 22px 18px; box-shadow: 0 30px 70px rgba(13, 29, 74, 0.28);
}
.nl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px 16px; }
.nl-head b { font-weight: 700; font-stretch: 112%; font-size: 17px; }
.nl-head span { font-size: 13.5px; color: rgba(255,255,255,0.6); }
.nl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nl-item {
display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px; padding: 14px 16px;
}
.nl-time { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.85); line-height: 1.3; }
.nl-time small { display: block; font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.5); }
.nl-q { font-size: 15px; color: rgba(255,255,255,0.72); margin: 0 0 6px; }
.nl-a { font-size: 15px; margin: 0; padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.25); }
.nl-tag {
grid-column: 2; justify-self: start; margin-top: 8px;
font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 100px;
background: rgba(143,211,160,0.16); color: #A8E3B6;
}
.nl-item.needs { border-color: rgba(212,180,92,0.45); background: rgba(212,180,92,0.08); }
.nl-item.needs .nl-tag { background: #D4B45C; color: #0D1D4A; }
.nl-item.needs .nl-a { border-left-color: #D4B45C; }
@media (prefers-reduced-motion: no-preference) {
.nl-item { animation: nl-in 0.5s ease-out both; }
.nl-item:nth-child(2) { animation-delay: 0.25s; }
.nl-item:nth-child(3) { animation-delay: 0.5s; }
@keyframes nl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 480px) {
.night-log { padding: 16px 12px 12px; border-radius: 16px; }
.nl-item { grid-template-columns: 1fr; padding: 12px 14px; }
.nl-time { display: flex; gap: 8px; align-items: baseline; }
.nl-tag { grid-column: 1; }
}
h1 {
font-size: clamp(34px, 5.6vw, 52px);
line-height: 1.12;
max-width: 620px;
}
.lead {
margin: 26px 0 0;
font-size: 17px;
color: var(--text-dim);
max-width: 480px;
line-height: 1.7;
}
.hero-actions {
margin-top: 40px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.btn {
display: inline-block;
font-size: 16px;
font-weight: 600;
text-decoration: none;
padding: 13px 22px;
border-radius: 10px;
transition: opacity 0.15s ease, background 0.15s ease;
}
.btn-primary {
background: var(--accent);
color: var(--btn-text);
}
.btn-primary:hover { opacity: 0.85; }
.btn-ghost {
color: var(--text);
border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--text-faint); }
hr.rule {
border: none;
border-top: 1px solid var(--line);
margin: 0;
}
/* --- sections --- */
section { padding: 84px 0; }
.section-label {
font-size: 12.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 14px;
}
h2 {
font-size: clamp(24px, 3.4vw, 30px);
margin-bottom: 44px;
max-width: 460px;
}
.highlight {
font-weight: inherit;
color: inherit;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* --- centered section intros (Meet Coqui, The Problem, Pricing) --
only the label/heading/lead-in copy centers; a structured list
like The Problem's .row items or the pricing cards stays as its
own layout below it. Wider than the base h2/.lead measure for
the same reason as the hero -- 460px/480px reads as a small
island of text lost in the middle of a 1024px page. --- */
.section-centered .section-label,
.section-centered h2 {
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: none;
}
.section-centered > .wrap > p.lead {
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 64ch;
}
.section-centered h2 { max-width: 24ch; }
/* under a centred heading, the row list centres too -- the
right-flush reading column only reads as intentional beside a
left-aligned heading (Channels, How it works, FAQ) */
.section-centered > .wrap > .row { margin-left: auto; margin-right: auto; max-width: 720px; }
/* Channels isn't .section-centered (its heading stays left-aligned),
but its heading/intro should still run full width like every
other section's now does, matching the content below it. */
#channels h2,
#channels > .wrap > p.lead,
#how-it-works h2,
#how-it-works > .wrap > p.lead {
max-width: none;
}
/* --- The Problem: phone demo + points, side by side ------------- */
.problem-columns {
display: flex;
align-items: center;
gap: 48px;
flex-wrap: wrap;
margin-top: 8px;
}
.phone-demo {
flex: 1 1 290px;
max-width: 290px;
/* centred once it wraps above .problem-rows on narrow screens;
side by side, .problem-rows' flex-grow leaves no free space,
so these auto margins don't move it on desktop */
margin-inline: auto;
display: flex;
justify-content: center;
}
.phone-frame {
width: 100%;
max-width: 290px;
aspect-ratio: 9 / 20;
background: var(--bg-raised);
border: 2.5px solid #1E2A52;
border-radius: 40px;
padding: 5px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
position: relative;
}
:root[data-theme="light"] .phone-frame { border-color: #CDD2E0; box-shadow: 0 24px 50px rgba(13, 29, 74, 0.18); }
.phone-notch {
position: absolute;
top: 12px; left: 50%; transform: translateX(-50%);
width: 74px; height: 18px;
background: #000;
border-radius: 100px;
z-index: 5;
}
.phone-screen {
width: 100%; height: 100%;
background: var(--bg-raised);
border-radius: 28px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* two full screens side by side; sliding to the second one is how
the demo shows Coqui's notification to the doctor after booking */
.phone-pages {
display: flex;
width: 200%; height: 100%;
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.phone-pages.slide-2 { transform: translateX(-50%); }
.phone-page {
width: 50%; flex-shrink: 0; height: 100%;
display: flex;
flex-direction: column;
}
.phone-header {
display: flex;
align-items: center;
gap: 8px;
padding: 30px 14px 12px;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.phone-avatar {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--call);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
color: #0D1D4A;
flex-shrink: 0;
}
.phone-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 12.5px;
color: var(--text);
flex: 1;
}
.phone-header-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex-shrink: 0; }
.phone-messages {
flex: 1;
padding: 14px 12px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
scrollbar-width: none;
}
.phone-messages::-webkit-scrollbar { display: none; }
.phone-msg {
/* not-yet-sent messages are removed from layout entirely
(display:none), not just made transparent -- otherwise every
future message still reserves its full height/gap up front,
so scrolling to "the bottom" jumps straight to the bottom of
the WHOLE eventual conversation instead of just what's been
sent so far, which is what made messages look like they were
flying off the screen. */
display: none;
max-width: 84%;
padding: 8px 11px;
border-radius: 13px;
font-size: 11.5px;
line-height: 1.4;
white-space: pre-line;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.phone-msg.in-thread { display: block; }
.phone-msg.show { opacity: 1; transform: translateY(0); }
.phone-msg.user {
align-self: flex-end;
background: var(--accent);
color: var(--btn-text);
border-bottom-right-radius: 3px;
}
.phone-msg.ai {
align-self: flex-start;
background: var(--bg-raised-2);
border: 1px solid var(--line);
color: var(--text);
border-bottom-left-radius: 3px;
}
.phone-typing {
align-self: flex-start;
display: none;
gap: 4px;
padding: 9px 11px;
background: var(--bg-raised-2);
border: 1px solid var(--line);
border-radius: 13px;
border-bottom-left-radius: 3px;
}
.phone-typing.show { display: flex; }
.phone-typing span {
width: 5px; height: 5px; border-radius: 50%;
background: var(--text-faint);
animation: phoneBounce 1.4s infinite ease-in-out both;
}
.phone-typing span:nth-child(2) { animation-delay: -0.16s; }
.phone-typing span:nth-child(3) { animation-delay: 0s; }
@keyframes phoneBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.phone-msg { transition: none; }
.phone-pages { transition: none; }
}
.phone-input-bar {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px 14px;
}
.phone-input-plus {
width: 24px; height: 24px;
border-radius: 50%;
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
line-height: 1;
color: var(--text-faint);
flex-shrink: 0;
}
.phone-input-pill {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
background: var(--bg-raised-2);
border-radius: 100px;
padding: 7px 10px 7px 12px;
}
.phone-input-placeholder {
font-size: 10px;
color: var(--text-faint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.phone-input-mic {
width: 12px; height: 12px;
color: var(--text-faint);
flex-shrink: 0;
}
.problem-rows { flex: 2 1 400px; }
.problem-rows .row { max-width: none; margin-left: 0; margin-right: 0; }
/* channel rows -- the row/border-divider block itself sits flush
against the right edge of the wider .wrap as a narrower reading
column, while the row's own content (status label, heading,
paragraph) stays left-aligned inside it, same as before */
.row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 24px;
padding: 28px 0;
border-top: 1px solid var(--line);
max-width: 640px;
margin-left: auto;
margin-right: 0;
}
.row:last-child { border-bottom: 1px solid var(--line); }
/* --- Channels: right-aligned block, left-aligned row content,
same treatment as .row/.step elsewhere on the page. The Meta
Integration demo that used to sit beside this list now lives in
the "How Coqui works" section below (see .how-columns). --- */
.channels-rows { max-width: 640px; margin-left: auto; margin-right: 0; }
/* --- How Coqui works: Meta Integration demo on the left, the
01/02/03 steps on the right -- same layout pattern as the
Problem and Channels sections above. --- */
.how-columns {
display: flex;
align-items: center;
gap: 48px;
flex-wrap: wrap;
margin-top: 8px;
}
.how-steps { flex: 0 1 640px; max-width: 640px; margin-left: auto; margin-right: 0; }
/* --- laptop-screen mockup: a real replica of our own dashboard --
Connectors > Meta Integration > Connect Facebook Page, driven by
an animated cursor that actually moves to and "clicks" each
target, using the exact same sliding-sidebar mechanism as the
real dashboard (services/../templates/dashboard_base.html). --- */
.meta-demo {
flex: 1 1 860px;
max-width: 968px;
display: flex;
justify-content: center;
}
/* .laptop-scale-wrap reserves responsive space at the mockup's
natural aspect ratio (860 wide design, screen + base together),
then .laptop-frame renders at its fixed natural size and is
scaled down/up as one unit via a container-query-relative
transform -- so every fixed px value inside (nav text, stats,
the cursor's own coordinates) stays in the exact same
proportion to the laptop at any viewport width, phone included,
instead of the laptop shrinking while its inner text stays a
fixed absolute size. See moveCursorTo() below, which divides by
this same scale factor so the animated cursor still lands
exactly on each target at any size. */
.laptop-scale-wrap {
width: 100%;
aspect-ratio: 860 / 578.375;
position: relative;
container-type: inline-size;
overflow: hidden;
}
.laptop-frame {
position: absolute;
top: 0;
left: 0;
width: 860px;
transform-origin: top left;
transform: scale(calc(100cqw / 860px));
}
.laptop-screen {
position: relative;
width: 100%;
aspect-ratio: 16 / 10.5;
background: var(--price-card-bg);
border: 3px solid #1E2A52;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 36px 90px rgba(0, 0, 0, 0.32);
display: flex;
}
:root[data-theme="light"] .laptop-screen { border-color: #CDD2E0; box-shadow: 0 36px 80px rgba(13, 29, 74, 0.16); }
.laptop-base {
height: 14px;
margin: 0 -10px;
background: linear-gradient(180deg, #1E2A52, #141E40);
border-radius: 0 0 14px 14px;
}
:root[data-theme="light"] .laptop-base { background: linear-gradient(180deg, #CDD2E0, #BAC0D2); }
.dash-sidebar {
position: relative;
width: 34%;
flex-shrink: 0;
background: var(--canopy);
overflow: hidden;
}
.dash-sidebar-view {
position: absolute; inset: 0;
padding: 18px 11px;
display: flex; flex-direction: column; gap: 6px;
transition: transform 0.4s cubic-bezier(.65, 0, .35, 1);
}
.dash-sidebar-main { transform: translateX(0); }
.dash-sidebar-sub { transform: translateX(100%); }
#dash-sidebar.sub-active .dash-sidebar-main { transform: translateX(-100%); }
#dash-sidebar.sub-active .dash-sidebar-sub { transform: translateX(0); }
.dash-nav-item {
font-size: 15px;
color: #A9B3D1;
padding: 11px 13px;
border-radius: 9px;
white-space: nowrap;
}
.dash-nav-item.dim { color: #6b6886; }
.dash-nav-btn {
display: flex; align-items: center; justify-content: space-between; gap: 7px;
width: 100%;
background: none; border: none; cursor: default;
font-family: inherit; text-align: left;
}
.dash-nav-btn.active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dash-chev { font-size: 18px; }
.dash-nav-back {
font-size: 14px;
font-weight: 600;
color: #fff;
padding: 11px 13px 16px;
}
.dash-content { flex: 1; padding: 22px 26px; min-width: 0; }
/* Overview is the real "home page" -- Meta Integration only shows
once the cursor has actually navigated there, same as a real
page change, not just a sidebar highlight swap. */
.dash-page { display: none; }
.dash-page.show { display: block; animation: dashPageIn 0.35s ease; }
@keyframes dashPageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.dash-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.dash-stat {
flex: 1 1 110px;
background: var(--bg-raised-2);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.dash-stat-n {
font-family: var(--font-display);
font-weight: 600;
font-size: 22px;
color: var(--text);
}
.dash-stat-l { font-size: 12px; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) {
.dash-page.show { animation: none; }
}
.dash-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.dash-page-title {
font-family: var(--font-display); font-weight: 650; font-stretch: 112%;
font-size: 20px;
color: var(--text);
}
.dash-connect-btn {
font-family: var(--font);
font-size: 15px;
font-weight: 600;
color: var(--btn-text);
background: var(--accent);
border: none;
border-radius: 100px;
padding: 10px 17px;
cursor: default;
}
.dash-table-empty {
font-size: 16px;
color: var(--text-faint);
padding: 24px 0;
text-align: center;
border: 1px dashed var(--line);
border-radius: 14px;
}
.dash-table-row {
display: none;
align-items: center;
gap: 14px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.dash-table-row.show { display: flex; opacity: 1; transform: translateY(0); }
.dash-page-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #1877f2, #0d5cd6);
color: #fff;
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.dash-page-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-page-name { font-size: 16px; color: var(--text); font-weight: 500; }
.dash-page-sub { font-size: 13.5px; color: var(--text-faint); }
.pill {
font-size: 13px;
font-weight: 500;
padding: 4px 12px;
border-radius: 100px;
border: 1px solid var(--line);
color: var(--text-faint);
white-space: nowrap;
flex-shrink: 0;
}
.pill.active { color: var(--live); border-color: transparent; background: var(--live-soft); }
.dash-modal {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 26px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 10;
}
.dash-modal.show { opacity: 1; }
.dash-modal-box {
width: 100%;
background: var(--bg-raised);
border: 1px solid var(--line);
border-radius: 16px;
padding: 20px;
transform: translateY(8px);
transition: transform 0.3s ease;
}
.dash-modal.show .dash-modal-box { transform: translateY(0); }
.dash-modal-head {
font-family: var(--font-display); font-weight: 650; font-stretch: 112%;
font-size: 17px;
color: var(--text);
margin-bottom: 15px;
}
.dash-modal-perm {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--text-dim);
margin-bottom: 18px;
}
.dash-modal-perm input { margin-top: 3px; transform: scale(1.3); }
.dash-modal-cta {
width: 100%;
font-family: var(--font);
font-size: 15px;
font-weight: 600;
color: var(--btn-text);
background: var(--accent);
border: none;
border-radius: 100px;
padding: 12px 17px;
cursor: default;
}
/* animated cursor -- moves via transform: translate(), positioned
with getBoundingClientRect() at click time so it always lands on
the real target regardless of the mockup's rendered width */
.demo-cursor {
position: absolute;
top: 0; left: 0;
width: 26px; height: 26px;
transition: transform 0.6s cubic-bezier(.65, 0, .35, 1);
z-index: 20;
pointer-events: none;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.demo-click-ring {
position: absolute;
top: 3px; left: 3px;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--live, #4ade80);
opacity: 0;
transform: scale(0.4);
}
.demo-cursor.clicking .demo-click-ring {
animation: demoClickPulse 0.45s ease-out;
}
@keyframes demoClickPulse {
0% { opacity: 0.55; transform: scale(0.4); }
100% { opacity: 0; transform: scale(2.4); }
}
@media (prefers-reduced-motion: reduce) {
.dash-connect-btn, .dash-modal-cta, .dash-modal, .dash-modal-box, .dash-table-row, .demo-cursor, .dash-sidebar-view { transition: none; }
}
.status {
font-size: 12.5px;
font-weight: 700;
/* --accent is literal black in light theme and the same bright
cream as --text in dark theme -- "black" reads correctly in
whichever theme the page is actually in, never invisible
black-on-black if a visitor is on the dark default. */
color: var(--accent);
white-space: nowrap;
padding-top: 2px;
}
.row h3 {
font-family: var(--font-display); font-weight: 650; font-stretch: 112%;
font-size: 18px;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.row p { margin: 0; color: var(--text-dim); font-size: 15px; max-width: 440px; }
@media (max-width: 560px) {
.row { grid-template-columns: 1fr; gap: 8px; }
}
/* steps -- same right-aligned-block, left-aligned-content treatment as .row */
.step {
display: grid;
grid-template-columns: 56px 1fr;
gap: 24px;
padding: 36px 0;
border-top: 1px solid var(--line);
max-width: 640px;
margin-left: auto;
margin-right: 0;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--text-faint);
}
.step h3 {
font-family: var(--font-display); font-weight: 650; font-stretch: 112%;
font-size: 17px;
margin: 0 0 8px;
}
.step p { margin: 0; color: var(--text-dim); font-size: 15px; max-width: 460px; }
@media (max-width: 560px) {
.step { grid-template-columns: 1fr; gap: 6px; }
}
footer {
padding: 48px 0 64px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
font-size: 13px;
color: var(--text-dim);
}
footer a { color: var(--text-dim); text-decoration: underline; text-decoration-color: var(--line); }
footer a:hover { color: var(--text); }
/* --- pricing -- styled after x.ai/bot's pricing cards: soft
borderless grey cards, a pill tier-switch in the card header,
big bold price, wide black CTA, simple checkmark list --- */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
/* grid items stretch to the row's tallest cell by default --
without this, expanding one card's "See more" list grows the
whole row's height and visibly stretches the OTHER two cards
to match (empty space at their bottom), even though their own
lists stay collapsed. align-items: start lets each card size
to only its own content, so opening one never affects the rest. */
align-items: start;
}
@media (max-width: 760px) {
.pricing-grid { grid-template-columns: 1fr; }
}
.price-card {
background: var(--price-card-bg);
border-radius: 22px;
padding: 26px 26px;
position: relative; /* every card holds its own badge ("Most popular", "Coming soon") */
}
.price-card.featured {
background: var(--price-card-featured-bg);
position: relative;
}
.popular-badge {
position: absolute;
top: -11px;
left: 28px;
background: var(--accent);
color: var(--btn-text);
font-family: var(--font);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 4px 11px;
border-radius: 100px;
}
.price-card.featured .price-name-row { margin-top: 6px; }
/* Name always stacks above the tier switch (never side by side) --
and .price-name reserves 2 lines of height even when its own
text fits on one -- so the switch sits at the exact same Y
position on every card, whether the name is "Messenger" or
"Full Omnichannel Coming soon". That in turn keeps the price,
billing text and CTA button (all fixed single-line content
below it) aligned across the whole row of cards too. */
.price-name-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.price-name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
line-height: 1.6;
min-height: 48px;
color: var(--text-dim);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.soon-badge {
font-family: var(--font);
font-size: 11px;
font-weight: 500;
color: var(--text-faint);
border: 1px solid var(--line);
border-radius: 100px;
padding: 2px 9px;
}
.price-amount {
font-family: var(--font-display);
font-size: 40px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin-top: 16px;
}
.price-amount .price-unit {
font-family: var(--font);
font-size: 15px;
font-weight: 400;
color: var(--text-faint);
margin-left: 2px;
}
.soon-badge { background: #fff4d6 !important; color: #6b5212 !important; }
.price-offer { margin: -2px 0 6px; font-size: 14px; color: #b8912f; font-weight: 600; }
.price-offer[hidden] { display: none; }
.price-offer s { color: var(--text-faint, #94a3b8); font-weight: 400; margin-right: 4px; }
.compare-link { text-align: center; margin: 28px 0 0; font-size: 15px; }
.compare-link a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.price-billing {
font-size: 12.5px;
color: var(--text-faint);
margin-top: 6px;
}
.price-cta {
display: block;
text-align: center;
width: 100%;
margin-top: 18px;
padding: 15px 22px;
font-size: 15px;
font-weight: 600;
}
.price-includes {
font-size: 13px;
font-weight: 500;
color: var(--text);
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--price-card-divider);
}
/* collapses to ~3 items at rest -- keeps every card the same
compact height no matter how many features a tier includes,
instead of the card growing to fit its longest list. "See more"
expands it to its full height (computed from scrollHeight in JS,
the same accordion technique the FAQ list below already uses)
with a short animated transition, rather than an internal scroll. */
.price-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
max-height: 136px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
transition: max-height 0.35s ease;
}
.price-list li {
font-size: 13.5px;
color: var(--text-dim);
line-height: 1.5;
padding-left: 24px;
position: relative;
flex-shrink: 0;
}
.price-list li::before {
content: '\2713';
position: absolute;
left: 0; top: 0;
font-size: 12px;
font-weight: 700;
color: var(--text-faint);
}
.price-see-more {
display: flex;
align-items: center;
justify-content: flex-start;
align-self: flex-start;
width: auto;
text-align: left;
gap: 5px;
margin-top: 12px;
background: none;
border: none;
padding: 0;
font-family: var(--font);
font-size: 13px;
font-weight: 600;
color: var(--accent);
cursor: pointer;
}
.price-see-more-arrow {
display: inline-block;
font-size: 10px;
transition: transform 0.25s ease;
}
.price-see-more.open .price-see-more-arrow { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.price-list { transition: none; }
.price-see-more-arrow { transition: none; }
}
/* --- free trial banner -- sits underneath the 3 pricing cards,
deliberately NOT a 4th grid card (it's $0 and time-boxed, not a
tier of the same shape as the paid plans, so it gets its own
full-width treatment instead of squeezing into the grid). --- */
.trial-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 16px;
padding: 26px 30px;
border: 1px dashed var(--line);
border-radius: 22px;
background: var(--price-card-bg);
}
.trial-badge {
display: inline-block;
font-family: var(--font);
font-size: 12.5px;
font-weight: 600;
color: var(--call-text);
background: var(--call-soft);
border: 1px solid transparent;
border-radius: 100px;
padding: 3px 11px;
margin-bottom: 10px;
}
.trial-banner-text h3 {
font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
margin: 0 0 6px;
color: var(--text);
}
.trial-banner-text p {
font-size: 13.5px;
color: var(--text-dim);
max-width: 560px;
margin: 0;
line-height: 1.55;
}
.trial-cta {
flex-shrink: 0;
padding: 14px 26px;
font-size: 14.5px;
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 700px) {
.trial-banner { flex-direction: column; align-items: flex-start; }
.trial-cta { width: 100%; text-align: center; }
}
/* --- tier switch (Standard / Pro / Ultra) -- one per price card,
sitting beside the plan name like x.ai/bot's own pricing cards;
wraps to its own line below the name on narrower cards --- */
.tier-switch {
--i: 0; /* active tier: 0 Standard, 1 Pro, 2 Ultra */
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-self: stretch; /* full width of the card */
width: 100%;
background: var(--price-card-featured-bg);
border: 1px solid var(--line);
border-radius: 100px;
padding: 4px;
isolation: isolate;
}
.price-card.featured .tier-switch { background: var(--price-card-bg); }
.tier-pill {
position: absolute;
top: 4px; bottom: 4px; left: 4px;
width: calc((100% - 8px) / 3);
transform: translateX(calc(var(--i) * 100%));
background: var(--accent);
border-radius: 100px;
box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
transition: transform 0.5s cubic-bezier(.22, 1, .36, 1);
will-change: transform;
z-index: 0;
}
.tier-btn {
position: relative;
z-index: 1;
min-height: 40px;
background: none;
border: none;
cursor: pointer;
font-family: var(--font);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text-dim);
padding: 0 8px;
border-radius: 100px;
transition: color 0.35s ease, background-color 0.2s ease, transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.tier-btn:not(.active):hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.tier-btn:active { transform: scale(0.97); }
.tier-btn:focus-visible { outline: 2px solid var(--call, #D4B45C); outline-offset: 2px; }
.tier-btn.active { color: var(--btn-text); }
.tier-fade {
transition: opacity 0.18s ease, transform 0.18s ease;
}
.tier-fade.tier-swap {
opacity: 0;
transform: translateY(3px);
}
.tier-highlight {
font-size: 12.5px;
color: var(--text-dim);
margin-top: 12px;
line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
.tier-pill, .tier-btn, .tier-fade { transition: none !important; }
}
.tier-switch.no-anim .tier-pill { transition: none; }
/* --- guides teaser --- */
.guides-teaser {
text-align: center;
padding: 96px 0;
}
.guides-teaser h2 {
max-width: none;
margin: 0 auto 16px;
}
.guides-teaser p {
color: var(--text-dim);
font-size: 16px;
max-width: 480px;
margin: 0 auto 32px;
}
.guides-teaser .btn { display: inline-block; }
/* --- faq -- same right-aligned-block, left-aligned-content treatment --- */
.faq {
max-width: 640px;
margin-left: auto;
margin-right: 0;
}
.faq-item {
border-top: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--text);
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
padding: 22px 28px 22px 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.faq-q .plus {
flex-shrink: 0;
width: 18px; height: 18px;
position: relative;
}
.faq-q .plus::before, .faq-q .plus::after {
content: '';
position: absolute;
background: var(--text-dim);
transition: transform 0.2s ease;
}
.faq-q .plus::before { top: 8px; left: 0; width: 18px; height: 1.5px; }
.faq-q .plus::after { top: 0; left: 8px; width: 1.5px; height: 18px; }
.faq-item.open .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
}
.faq-a p {
margin: 0 0 24px;
color: var(--text-dim);
font-size: 14.5px;
max-width: 560px;
line-height: 1.7;
}
/* --- live demo chat launcher --- */
#chat-launcher {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 50;
display: flex;
align-items: center;
gap: 9px;
background: var(--accent);
color: var(--btn-text);
border: none;
border-radius: 100px;
padding: 14px 20px;
font-family: var(--font);
font-size: 14px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
transition: transform 0.15s ease;
}
#chat-launcher:hover { transform: translateY(-1px); }
#chat-launcher svg { width: 17px; height: 17px; flex-shrink: 0; }
#chat-panel {
position: fixed;
bottom: 92px;
right: 24px;
z-index: 50;
width: 380px;
height: 600px;
max-height: 72vh;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
border: 1px solid var(--line);
display: none;
}
#chat-panel.open { display: block; }
#chat-panel iframe { width: 100%; height: 100%; border: none; display: block; }
#chat-panel-close {
position: absolute;
top: 14px; right: 14px;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: none;
color: var(--text-dim);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 5;
}
@media (max-width: 480px) {
#chat-panel {
right: 12px; left: 12px; bottom: 88px;
width: auto; height: 70vh;
}
#chat-launcher { right: 16px; bottom: 16px; padding: 13px 18px; font-size: 13.5px; }
}
/* ================================================================
Scroll layer. One signature moment (the pinned "night shift"),
everything else restrained: a single mask-wipe per heading, a
gentle rise for rows, a frosted nav. All of it is progressive --
without JS (or with reduced motion) the page is fully static.
================================================================ */
/* --- premium scale --- */
h1, h2, .display { font-weight: 700; font-stretch: 118%; }
h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.06; letter-spacing: -0.025em; }
section { padding: 128px 0; }
@media (max-width: 700px) { section { padding: 88px 0; } }
hr.rule { opacity: 0.6; }
.wordmark, nav a.nav-cta, .nav-link { white-space: nowrap; }
@media (max-width: 480px) {
.wordmark img { height: 30px; }
.wordmark-mark { width: 26px; height: 26px; }
nav a.nav-cta { padding: 7px 12px; }
}
/* --- frosted sticky nav --- */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: padding 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; border-bottom: 1px solid transparent; }
nav.on-dark .wordmark, nav.on-dark .nav-link { color: #fff; }
nav.on-dark a.nav-cta { color: #fff; border-color: rgba(255,255,255,0.3); }
nav.on-dark.is-scrolled { background: rgba(10,19,48,0.62); border-bottom-color: rgba(255,255,255,0.08); }
nav.is-scrolled {
padding: 14px 0;
background: color-mix(in srgb, var(--bg) 82%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
border-bottom-color: var(--line);
}
/* --- hero entrance: the one page-load sequence --- */
html.motion .hl-inner > * { opacity: 0; transform: translateY(22px); animation: rise-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
html.motion .hl-inner > *:nth-child(2) { animation-delay: 0.12s; }
html.motion .hl-inner > *:nth-child(3) { animation-delay: 0.3s; }
html.motion .hl-inner > *:nth-child(4) { animation-delay: 0.42s; }
html.motion .hl-inner > *:nth-child(5) { animation-delay: 0.54s; }
html.motion .hl-stage { opacity: 0; animation: fade-in 1.4s 0.5s ease forwards; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes rise-in { to { opacity: 1; transform: none; } }
/* --- reveals (JS adds data-reveal + .is-in) --- */
html.motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
html.motion [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); translate: 0 0.35em; transition: clip-path 1s cubic-bezier(0.7, 0, 0.2, 1), translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }
html.motion [data-reveal="wipe"].is-in { clip-path: inset(0 0 -0.2em 0); translate: 0 0; }
/* --- the night shift --- */
.night { position: relative; background: #0A1330; color: #fff; padding: 0; }
.night-stage { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 96px 0; }
.night-sky, .night-dawn, .night-stars { position: absolute; inset: 0; pointer-events: none; }
.night-sky { background: radial-gradient(120% 90% at 80% 0%, #1B2C66 0%, #0A1330 60%); }
.night-stars {
background-image:
radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 28% 42%, rgba(255,255,255,0.5), transparent),
radial-gradient(1.4px 1.4px at 46% 12%, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 63% 30%, rgba(255,255,255,0.45), transparent),
radial-gradient(1.2px 1.2px at 78% 16%, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 88% 44%, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 8% 62%, rgba(255,255,255,0.35), transparent),
radial-gradient(1.3px 1.3px at 38% 70%, rgba(255,255,255,0.4), transparent);
opacity: calc(1 - var(--dawn, 1));
}
.night-dawn {
background:
radial-gradient(90% 60% at var(--ox, 64%) 110%, rgba(212,180,92,0.55) 0%, rgba(212,180,92,0.12) 45%, transparent 70%),
linear-gradient(180deg, transparent 40%, rgba(207,175,85,0.14) 100%);
opacity: var(--dawn, 1);
}
.night-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; width: 100%; }
.night-lede { font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; font-stretch: 118%; line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 32px; max-width: 14ch; }
.clock { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.clock-time { font-size: clamp(64px, 11vw, 140px); font-weight: 800; font-stretch: 118%; line-height: 0.9; letter-spacing: -0.04em; }
.clock-ampm { font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; color: rgba(255,255,255,0.6); }
.night-caption { font-size: 18px; color: rgba(255,255,255,0.78); max-width: 38ch; min-height: 3.2em; margin: 22px 0 28px; transition: opacity 0.3s ease; }
.night-tally { display: flex; flex-direction: column; gap: 18px; }
.night-tally .t-main, .night-tally .t-split > div { display: flex; flex-direction: column; }
.night-tally b { font-weight: 800; font-stretch: 118%; line-height: 1; font-variant-numeric: tabular-nums; }
.night-tally .t-main b { font-size: 56px; }
.night-tally span { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 6px; }
.night-tally .t-split { display: flex; gap: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
.night-tally .t-split b { font-size: 30px; }
.night-tally .t-booked b { color: #8FD3A0; }
.night-tally .t-follow b { color: #D4B45C; }
.night-tally .t-lost b { color: rgba(255,255,255,0.55); }
.night-feed {
list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
}
.nf-item {
display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start;
background: rgba(12,20,50,0.62); border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px; padding: 14px 16px;
-webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
}
.nf-time { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.nf-time small { display: block; font-weight: 400; font-size: 12px; color: rgba(255,255,255,0.5); }
.nf-q { margin: 0 0 4px; font-size: 15px; color: rgba(255,255,255,0.7); }
.nf-a { margin: 0; font-size: 15px; }
.nf-tag { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 100px; background: rgba(143,211,160,0.16); color: #A8E3B6; white-space: nowrap; }
.nf-item.needs { border-color: rgba(212,180,92,0.55); background: rgba(48,40,16,0.7); }
.nf-item.needs .nf-tag { background: #D4B45C; color: #0D1D4A; }
.night-exit { height: 22vh; background: linear-gradient(180deg, #0A1330, var(--bg)); }
:root[data-theme="light"] .night-exit { background: linear-gradient(180deg, #0F1A3E 0%, #6F6440 22%, #E6DCB8 52%, var(--bg) 100%); }
/* scroll-driven mode (JS adds .night--scroll): pinned stage, time scrubs */
.night--scroll { height: 460vh; }
.night--scroll .night-stage { position: sticky; top: 0; height: 100vh; min-height: 0; padding: 0; }
.night--scroll .nf-item { opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.night--scroll .nf-item.in { opacity: 1; transform: none; }
.night--scroll .nf-item.in.needs { animation: needs-pulse 1.6s 0.4s ease-out 1; }
@keyframes needs-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,180,92,0.5); } 100% { box-shadow: 0 0 0 16px rgba(212,180,92,0); } }
.night-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 1) * 100%); background: linear-gradient(90deg, rgba(255,255,255,0.3), #D4B45C); }
@media (max-width: 900px) {
.night-grid { grid-template-columns: 1fr; gap: 24px; }
.night-lede { display: none; }
.night-caption { font-size: 16px; margin: 12px 0 16px; min-height: 0; }
.night-tally .t-main b { font-size: 38px; }
.night-tally .t-split b { font-size: 22px; }
.night-tally { gap: 12px; }
.night-tally .t-split { gap: 20px; padding-top: 10px; }
.night--scroll .night-stage { align-items: flex-start; padding-top: 92px; }
.night--scroll .nf-item:not(.in) { display: none; }
/* on small screens only the newest few fit -- older ones step aside */
.night--scroll .nf-item.in.old { display: none; }
.nf-item { grid-template-columns: 1fr auto; padding: 12px 14px; }
.nf-time { grid-column: 1; display: flex; gap: 8px; align-items: baseline; }
.nf-item > div { grid-column: 1 / -1; }
.nf-tag { grid-column: 2; grid-row: 1; justify-self: end; }
}
/* ================= luxury hero (Apple-style) =================
One dark stage that runs straight into the night shift: centred
oversized type, a single pill + text link, and the overnight log
presented as a glass object that settles flat as you scroll. */
.hero-lux { position: relative; background: #0A1330; color: #fff; overflow: hidden; padding: 132px 0 0; text-align: center; }
.hl-sky { position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(60% 40% at 50% 100%, rgba(143,211,160,0.10), transparent 70%),
radial-gradient(1.2px 1.2px at 14% 22%, rgba(255,255,255,0.7), transparent),
radial-gradient(1px 1px at 26% 58%, rgba(255,255,255,0.45), transparent),
radial-gradient(1.3px 1.3px at 41% 14%, rgba(255,255,255,0.6), transparent),
radial-gradient(1px 1px at 58% 36%, rgba(255,255,255,0.4), transparent),
radial-gradient(1.2px 1.2px at 72% 18%, rgba(255,255,255,0.65), transparent),
radial-gradient(1px 1px at 86% 48%, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 93% 12%, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 6% 76%, rgba(255,255,255,0.35), transparent);
}
.hl-inner { position: relative; max-width: 980px; margin: 0 auto; padding: 0 24px;
opacity: calc(1 - var(--hp, 0) * 0.9); transform: translateY(calc(var(--hp, 0) * -48px)); }
.hl-name { margin: 0 0 14px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; font-stretch: 112%; color: #D4B45C; letter-spacing: -0.01em; }
.hl-name span { color: rgba(255,255,255,0.55); font-weight: 500; }
.hl-title {
margin: 0 auto; max-width: none; font-size: clamp(52px, 8.6vw, 116px); line-height: 0.96; font-weight: 800; font-stretch: 118%; letter-spacing: -0.045em;
background: linear-gradient(180deg, #FFFFFF 30%, #B7C0DA 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
padding-bottom: 0.06em;
}
.hl-sub { margin: 26px auto 0; max-width: 34ch; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; color: rgba(255,255,255,0.72); }
.hl-ctas { margin-top: 36px; display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hl-btn { background: #F5F6FA; color: #0D1D4A; text-decoration: none; font-weight: 600; font-size: 17px; padding: 13px 26px; border-radius: 100px; transition: background 0.2s ease, transform 0.2s ease; }
.hl-btn:hover { background: #fff; transform: translateY(-1px); }
.hl-link { color: #D4B45C; text-decoration: none; font-size: 17px; font-weight: 500; }
.hl-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hl-verified { margin: 28px 0 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: rgba(255,255,255,0.55); }
.hl-verified svg { width: 17px; height: 17px; color: #4C9BFF; }
.hl-verified .hl-dot { opacity: .6; }
.hl-stage { position: relative; max-width: 900px; margin: 56px auto 0; padding: 0 24px 120px; perspective: 1600px; }
.hl-stage .night-log {
text-align: left; margin: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
border: 1px solid rgba(255,255,255,0.12);
-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
box-shadow: 0 60px 120px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
border-radius: 28px; padding: 28px;
transform-origin: 50% 0%;
transform: rotateX(calc((1 - var(--hp, 0)) * 22deg)) scale(calc(0.9 + var(--hp, 0) * 0.1));
will-change: transform;
}
.hl-stage .nl-item { background: rgba(255,255,255,0.05); }
.hl-stage::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 60px; height: 120px; background: radial-gradient(50% 50% at 50% 50%, rgba(212,180,92,0.18), transparent 70%); filter: blur(20px); pointer-events: none; z-index: -1; }
@media (max-width: 700px) {
.hero-lux { padding-top: 120px; }
.hl-stage { margin-top: 48px; padding: 0 12px 72px; }
.hl-stage .night-log { padding: 16px 12px 12px; border-radius: 20px; }
.hl-ctas { gap: 18px; }
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-stretch: 118%; font-size: 18px; }
.wordmark img { height: 38px; width: auto; display: block; }
.wordmark .logo-white { display: none; }
nav.on-dark .wordmark .logo-navy { display: none; }
nav.on-dark .wordmark .logo-white { display: block; }
:root:not([data-theme="light"]) .wordmark .logo-navy { display: none; }
:root:not([data-theme="light"]) .wordmark .logo-white { display: block; }
.coqui-frog { width: 1.35em; height: auto; flex-shrink: 0; }
.hl-name { display: inline-flex; align-items: center; gap: 10px; color: #8FD3A0 !important; }
.hl-name .coqui-frog { width: 36px; }
#chat-launcher .coqui-frog { width: 24px; }
.wordmark-mark { width: 32px; height: 32px; border-radius: 9px; background: #fff; overflow: hidden; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 0 1px var(--line); }
.wordmark-mark img { width: 100%; height: 100%; display: block; }
/* ================= moon -> sun ================= */
.night-orb { position: absolute; left: var(--ox, 64%); top: var(--oy, 80%); width: var(--os, 170px); height: var(--os, 170px); transform: translate(-50%, -50%); pointer-events: none; }
.orb-moon, .orb-sun { position: absolute; inset: 0; border-radius: 50%; }
.orb-moon {
background: radial-gradient(circle at 36% 34%, #FFFDF4 0%, #ECE7D2 48%, #C9C2A6 100%);
box-shadow: 0 0 70px 20px rgba(240,236,214,0.22), 0 0 200px 70px rgba(240,236,214,0.1), inset -16px -12px 34px rgba(40,40,20,0.22);
opacity: calc(1 - var(--sun, 1));
}
.orb-moon::before, .orb-moon::after { content: ''; position: absolute; border-radius: 50%; background: rgba(150,140,110,0.28); box-shadow: inset 2px 2px 4px rgba(0,0,0,0.12); }
.orb-moon::before { width: 22%; height: 22%; left: 52%; top: 26%; }
.orb-moon::after { width: 14%; height: 14%; left: 30%; top: 58%; box-shadow: 34px -6px 0 -2px rgba(150,140,110,0.22); }
.orb-sun {
background: radial-gradient(circle at 50% 50%, #FFF4D6 0%, #EBD28A 38%, #D4B45C 72%, #B8923A 100%);
box-shadow: 0 0 70px 26px rgba(212,180,92,0.5), 0 0 220px 90px rgba(212,180,92,0.22);
opacity: var(--sun, 1);
}
.night-grid { z-index: 1; }
@media (max-width: 900px) { .night-orb { --os: 96px; } }
/* --- Meta Verified seal (text only -- Meta's own logo mark is not reproduced) --- */
.meta-seal { width: 176px; margin: 0 auto 40px; filter: drop-shadow(0 24px 44px rgba(13,29,74,0.2)); }
.meta-seal svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.seal-arc { font-size: 17px; font-weight: 700; font-stretch: 112%; letter-spacing: 3px; fill: #1F2A44; }
.seal-meta { font-size: 26px; font-weight: 700; fill: #1A5FD0; letter-spacing: -0.5px; }
.seal-verified { font-size: 25px; font-weight: 800; font-stretch: 112%; fill: #0D1D4A; letter-spacing: 0.5px; }
html.motion .meta-seal[data-reveal] { transform: translateY(22px) rotate(-10deg) scale(0.92); }
html.motion .meta-seal[data-reveal].is-in { transform: none; }
/* Coqui blink: both eyes close briefly every few seconds */
.coqui-frog .frog-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: frog-blink 4.8s infinite; }
.coqui-frog .frog-eye + .frog-eye { animation-delay: 0.04s; }
@keyframes frog-blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.08); } 96% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .coqui-frog .frog-eye { animation: none; } }
/* "Talk to us" carries Coqui; it hops once when the button is hovered */
.talk-btn { display: inline-flex; align-items: center; gap: 9px; }
.talk-btn .coqui-frog { width: 24px; height: auto; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
.talk-btn:hover .coqui-frog { animation: frog-hop 0.5s cubic-bezier(0.3, 0.7, 0.4, 1.4); }
@keyframes frog-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-5px) rotate(-6deg); } 70% { transform: translateY(0) scale(1.06, 0.94); } 100% { transform: none; } }
}
/* ================= star field =================
Three depths of stars (generated positions, pure CSS), each
twinkling on its own rhythm, plus a rare shooting star. Shared
by the hero and the night scene. */
.starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.starfield .stars { position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
.starfield .s1 { box-shadow: 74.73vw 34.47vh rgba(255,255,255,0.56), 60.08vw 9.65vh rgba(255,255,255,0.88), 76.44vw 7.10vh rgba(255,255,255,0.83), 50.27vw 108.03vh rgba(255,255,255,0.97), 98.68vw 69.55vh rgba(255,255,255,0.91), 78.63vw 165.20vh rgba(255,255,255,0.47), 93.79vw 37.79vh rgba(255,255,255,0.52), 59.75vw 142.61vh rgba(255,255,255,0.98), 36.43vw 140.71vh rgba(255,255,255,0.47), 96.85vw 49.89vh rgba(255,255,255,0.75), 12.43vw 7.45vh rgba(255,255,255,0.45), 60.02vw 95.39vh rgba(255,255,255,0.90), 85.11vw 71.99vh rgba(255,255,255,0.92), 20.07vw 149.75vh rgba(255,255,255,0.59), 93.98vw 65.33vh rgba(255,255,255,0.69), 51.83vw 10.02vh rgba(255,255,255,0.49), 54.49vw 121.40vh rgba(255,255,255,0.47), 40.68vw 62.89vh rgba(255,255,255,0.88), 99.04vw 15.40vh rgba(255,255,255,0.75), 10.42vw 133.24vh rgba(255,255,255,0.97), 70.65vw 98.86vh rgba(255,255,255,0.47), 9.63vw 40.74vh rgba(255,255,255,0.49), 13.38vw 163.08vh rgba(255,255,255,0.64), 90.69vw 129.34vh rgba(255,255,255,0.88), 91.29vw 118.64vh rgba(255,255,255,0.64), 46.97vw 66.31vh rgba(255,255,255,0.47), 4.41vw 96.49vh rgba(255,255,255,0.74), 97.24vw 105.50vh rgba(255,255,255,0.90), 47.65vw 98.94vh rgba(255,255,255,0.90), 3.41vw 3.26vh rgba(255,255,255,0.69), 29.22vw 72.78vh rgba(255,255,255,0.49), 16.89vw 16.74vh rgba(255,255,255,0.78), 3.30vw 3.49vh rgba(255,255,255,0.82), 42.33vw 3.87vh rgba(255,255,255,0.97), 49.06vw 159.30vh rgba(255,255,255,0.81), 54.69vw 67.18vh rgba(255,255,255,0.51), 96.58vw 74.74vh rgba(255,255,255,0.62), 14.55vw 101.28vh rgba(255,255,255,0.99), 40.18vw 137.20vh rgba(255,255,255,0.83), 51.51vw 111.07vh rgba(255,255,255,0.85), 92.83vw 7.50vh rgba(255,255,255,0.53), 24.24vw 11.44vh rgba(255,255,255,0.60), 43.54vw 37.12vh rgba(255,255,255,0.72), 0.67vw 155.37vh rgba(255,255,255,0.84), 10.36vw 36.22vh rgba(255,255,255,0.87), 14.27vw 124.81vh rgba(255,255,255,0.47), 62.20vw 115.69vh rgba(255,255,255,0.75), 79.46vw 159.73vh rgba(255,255,255,0.99), 5.31vw 82.38vh rgba(255,255,255,0.51), 74.42vw 35.00vh rgba(255,255,255,0.54), 5.93vw 2.65vh rgba(255,255,255,0.59), 19.53vw 89.04vh rgba(255,255,255,0.90), 72.10vw 55.13vh rgba(255,255,255,0.59), 77.90vw 46.80vh rgba(255,255,255,0.81), 97.05vw 98.66vh rgba(255,255,255,0.71), 4.91vw 44.50vh rgba(255,255,255,0.97), 5.69vw 9.19vh rgba(255,255,255,0.78), 30.76vw 101.79vh rgba(255,255,255,0.58), 21.98vw 42.83vh rgba(255,255,255,0.84), 69.40vw 4.78vh rgba(255,255,255,0.84), 76.25vw 79.56vh rgba(255,255,255,0.50), 1.33vw 166.42vh rgba(255,255,255,0.50), 0.11vw 10.26vh rgba(255,255,255,0.95), 99.90vw 129.31vh rgba(255,255,255,0.97), 80.91vw 12.27vh rgba(255,255,255,0.66), 64.11vw 117.02vh rgba(255,255,255,0.87), 69.24vw 20.11vh rgba(255,255,255,0.67), 94.63vw 109.53vh rgba(255,255,255,0.55), 41.75vw 162.40vh rgba(255,255,255,0.59), 10.06vw 137.94vh rgba(255,255,255,0.81), 36.90vw 79.39vh rgba(255,255,255,0.60), 69.09vw 51.15vh rgba(255,255,255,0.75), 92.25vw 111.74vh rgba(255,255,255,0.64), 13.63vw 84.56vh rgba(255,255,255,0.48), 77.28vw 79.43vh rgba(255,255,255,0.70), 29.81vw 119.20vh rgba(255,255,255,0.69), 44.20vw 35.10vh rgba(255,255,255,0.49), 7.65vw 39.59vh rgba(255,255,255,0.86), 66.26vw 33.12vh rgba(255,255,255,0.47), 26.97vw 116.06vh rgba(255,255,255,0.59), 45.98vw 20.17vh rgba(255,255,255,0.88), 57.62vw 74.87vh rgba(255,255,255,0.99), 50.85vw 46.84vh rgba(255,255,255,0.83), 95.10vw 106.21vh rgba(255,255,255,0.96), 55.18vw 50.67vh rgba(255,255,255,0.80), 6.69vw 167.56vh rgba(255,255,255,0.73), 3.29vw 51.46vh rgba(255,255,255,0.79), 85.54vw 156.33vh rgba(255,255,255,0.65), 89.31vw 86.41vh rgba(255,255,255,0.77), 87.04vw 121.85vh rgba(255,255,255,0.76), 1.62vw 57.50vh rgba(255,255,255,0.86), 41.52vw 4.62vh rgba(255,255,255,0.92), 36.29vw 125.47vh rgba(255,255,255,0.64), 36.69vw 100.43vh rgba(255,255,255,0.73), 92.42vw 99.68vh rgba(255,255,255,0.64), 55.58vw 128.00vh rgba(255,255,255,0.86), 1.48vw 88.48vh rgba(255,255,255,0.94), 47.06vw 27.17vh rgba(255,255,255,0.53), 53.51vw 137.84vh rgba(255,255,255,0.87), 39.30vw 9.04vh rgba(255,255,255,0.62), 59.17vw 83.84vh rgba(255,255,255,0.67), 20.41vw 76.80vh rgba(255,255,255,0.54), 63.56vw 25.30vh rgba(255,255,255,0.53), 93.52vw 3.99vh rgba(255,255,255,0.64), 49.61vw 17.69vh rgba(255,255,255,0.65), 88.61vw 130.67vh rgba(255,255,255,0.63), 39.00vw 46.84vh rgba(255,255,255,0.91), 31.55vw 128.59vh rgba(255,255,255,0.98), 28.63vw 107.31vh rgba(255,255,255,0.90), 53.68vw 157.84vh rgba(255,255,255,0.60), 47.16vw 60.49vh rgba(255,255,255,0.61), 95.40vw 10.22vh rgba(255,255,255,0.65), 98.45vw 45.13vh rgba(255,255,255,0.82), 87.33vw 40.06vh rgba(255,255,255,0.57), 67.91vw 11.14vh rgba(255,255,255,0.78), 88.92vw 153.87vh rgba(255,255,255,0.95), 48.20vw 138.53vh rgba(255,255,255,0.98), 70.15vw 43.25vh rgba(255,255,255,0.87), 51.43vw 72.62vh rgba(255,255,255,0.54), 82.35vw 113.49vh rgba(255,255,255,0.47), 20.19vw 6.85vh rgba(255,255,255,0.75), 71.90vw 58.14vh rgba(255,255,255,0.55), 39.04vw 104.07vh rgba(255,255,255,0.48), 8.03vw 112.45vh rgba(255,255,255,0.95), 57.28vw 12.99vh rgba(255,255,255,0.73), 26.58vw 92.12vh rgba(255,255,255,0.59), 25.71vw 163.39vh rgba(255,255,255,0.65), 44.50vw 169.16vh rgba(255,255,255,0.69), 33.53vw 44.88vh rgba(255,255,255,0.54), 83.55vw 160.14vh rgba(255,255,255,0.78), 62.18vw 18.54vh rgba(255,255,255,0.49), 36.74vw 10.36vh rgba(255,255,255,0.84), 71.05vw 144.26vh rgba(255,255,255,0.66), 49.91vw 10.12vh rgba(255,255,255,0.68), 90.89vw 37.64vh rgba(255,255,255,0.77), 54.40vw 39.62vh rgba(255,255,255,0.61), 10.19vw 141.89vh rgba(255,255,255,0.93), 84.15vw 152.97vh rgba(255,255,255,0.46), 10.16vw 49.93vh rgba(255,255,255,0.53), 68.14vw 102.23vh rgba(255,255,255,0.64); opacity: 0.55; }
.starfield .s2 { width: 1.6px; height: 1.6px; box-shadow: 99.37vw 2.69vh rgba(255,255,255,0.57), 17.67vw 8.71vh rgba(255,255,255,0.61), 67.03vw 166.65vh rgba(255,255,255,0.75), 22.31vw 88.19vh rgba(255,255,255,0.76), 18.35vw 114.02vh rgba(255,255,255,0.93), 67.62vw 18.93vh rgba(255,255,255,0.76), 96.72vw 122.74vh rgba(255,255,255,0.64), 26.01vw 133.94vh rgba(255,255,255,0.61), 96.97vw 162.39vh rgba(255,255,255,0.77), 14.63vw 103.67vh rgba(255,255,255,0.74), 1.10vw 9.32vh rgba(255,255,255,0.71), 45.10vw 21.99vh rgba(255,255,255,0.87), 64.24vw 44.72vh rgba(255,255,255,0.88), 57.84vw 61.75vh rgba(255,255,255,0.80), 12.72vw 8.41vh rgba(255,255,255,0.82), 51.18vw 62.03vh rgba(255,255,255,0.69), 64.44vw 22.39vh rgba(255,255,255,0.80), 14.42vw 157.77vh rgba(255,255,255,0.60), 61.53vw 105.03vh rgba(255,255,255,0.50), 14.09vw 157.68vh rgba(255,255,255,0.99), 85.15vw 146.74vh rgba(255,255,255,0.96), 33.13vw 34.27vh rgba(255,255,255,0.55), 34.28vw 23.61vh rgba(255,255,255,0.66), 72.76vw 86.75vh rgba(255,255,255,0.49), 84.48vw 46.68vh rgba(255,255,255,0.94), 7.61vw 2.15vh rgba(255,255,255,0.61), 64.07vw 157.78vh rgba(255,255,255,0.75), 78.82vw 7.48vh rgba(255,255,255,0.62), 44.58vw 37.99vh rgba(255,255,255,0.48), 4.48vw 31.26vh rgba(255,255,255,0.56), 34.49vw 3.46vh rgba(255,255,255,0.77), 83.35vw 114.95vh rgba(255,255,255,0.60), 49.11vw 142.12vh rgba(255,255,255,0.62), 58.09vw 65.53vh rgba(255,255,255,0.62), 40.75vw 141.52vh rgba(255,255,255,0.88), 9.27vw 117.24vh rgba(255,255,255,0.89), 61.51vw 22.25vh rgba(255,255,255,0.94), 37.01vw 81.19vh rgba(255,255,255,0.80), 23.97vw 10.88vh rgba(255,255,255,0.98), 62.98vw 17.74vh rgba(255,255,255,0.46), 73.83vw 8.46vh rgba(255,255,255,0.99), 44.71vw 123.32vh rgba(255,255,255,0.81), 94.28vw 70.80vh rgba(255,255,255,0.94), 47.66vw 58.30vh rgba(255,255,255,0.71), 26.50vw 48.41vh rgba(255,255,255,0.83), 86.24vw 22.75vh rgba(255,255,255,0.75), 68.06vw 98.67vh rgba(255,255,255,0.85), 72.30vw 81.80vh rgba(255,255,255,0.48), 78.50vw 39.03vh rgba(255,255,255,0.52), 88.52vw 149.95vh rgba(255,255,255,0.68), 48.61vw 59.31vh rgba(255,255,255,0.88), 50.64vw 157.49vh rgba(255,255,255,0.93), 23.73vw 120.11vh rgba(255,255,255,0.75), 52.82vw 24.16vh rgba(255,255,255,0.48), 16.97vw 78.85vh rgba(255,255,255,0.74); opacity: 0.75; }
.starfield .s3 { width: 2.4px; height: 2.4px; box-shadow: 88.91vw 103.19vh rgba(255,255,255,0.55), 39.67vw 145.28vh rgba(255,255,255,0.53), 21.00vw 59.89vh rgba(255,255,255,0.94), 29.39vw 125.11vh rgba(255,255,255,0.82), 3.82vw 17.06vh rgba(255,255,255,0.85), 55.63vw 34.28vh rgba(255,255,255,0.70), 62.31vw 30.87vh rgba(255,255,255,0.96), 50.29vw 20.68vh rgba(255,255,255,0.58), 7.04vw 57.09vh rgba(255,255,255,0.70), 47.89vw 114.04vh rgba(255,255,255,0.64), 9.80vw 77.75vh rgba(255,255,255,1.00), 14.52vw 85.92vh rgba(255,255,255,0.72), 96.86vw 24.11vh rgba(255,255,255,0.99), 34.44vw 1.74vh rgba(255,255,255,0.80), 39.07vw 132.96vh rgba(255,255,255,0.96), 79.56vw 133.75vh rgba(255,255,255,0.70); filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)) drop-shadow(0 0 8px rgba(207,175,85,0.45)); }
.shooting-star {
position: absolute; top: 12%; left: 62%; width: 140px; height: 1.5px; border-radius: 2px;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95));
transform: rotate(-24deg); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.starfield .s1 { animation: twinkle 5.5s ease-in-out infinite; }
.starfield .s2 { animation: twinkle 3.8s ease-in-out -1.2s infinite; }
.starfield .s3 { animation: twinkle-bright 2.9s ease-in-out -0.6s infinite; }
.shooting-star { animation: shoot 11s ease-out 3s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }
@keyframes twinkle-bright { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes shoot {
0% { opacity: 0; transform: translate(0, 0) rotate(-24deg); }
2% { opacity: 1; }
7% { opacity: 0; transform: translate(-420px, 190px) rotate(-24deg); }
100% { opacity: 0; transform: translate(-420px, 190px) rotate(-24deg); }
}
}
.night .starfield { opacity: calc(1 - var(--dawn, 1) * 0.9); }
/* ================= phone lock screen (night scene) ================= */
.night-phone { display: flex; justify-content: center; }
.np-frame {
width: min(340px, 100%); height: min(700px, 82vh); padding: 11px; border-radius: 54px;
background: linear-gradient(145deg, #2A3558, #0B1330 40%, #1C2750);
box-shadow: 0 0 0 1.5px rgba(255,255,255,0.14), 0 50px 100px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(0,0,0,0.6);
}
.np-screen {
position: relative; height: 100%; border-radius: 44px; overflow: hidden; display: flex; flex-direction: column;
background:
radial-gradient(120% 70% at 50% 120%, rgba(212,180,92, calc(0.15 + var(--dawn, 1) * 0.45)), transparent 60%),
linear-gradient(180deg, #16245A 0%, #0A1330 70%);
}
.np-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; background: #000; border-radius: 20px; z-index: 3; }
.np-status { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px 0; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }
.np-batt { width: 22px; height: 11px; border: 1.5px solid rgba(255,255,255,0.8); border-radius: 3px; position: relative; }
.np-batt::after { content: ''; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: #fff; border-radius: 1px; }
.np-lock { text-align: center; padding: 26px 0 14px; }
.np-date { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.8); }
.np-time { font-size: 72px; font-weight: 700; font-stretch: 112%; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.95); }
.night-phone .night-feed {
flex: 1; min-height: 0; overflow: hidden; padding: 0 10px 14px;
display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px;
-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.night-phone .nf-item {
display: block; flex-shrink: 0; padding: 11px 13px 12px; border-radius: 20px;
background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.08);
-webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
position: relative;
}
.np-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.np-app { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.np-app svg { width: 15px; height: 15px; }
.np-messenger { background: linear-gradient(135deg, #0A7CFF, #A334FA); }
.np-whatsapp { background: #25D366; }
.np-facebook { background: #1877F2; }
.np-appname { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); flex: 1; }
.np-when { font-size: 12px; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }
.np-who { margin: 0; font-size: 14.5px; font-weight: 700; color: #fff; }
.np-q { margin: 1px 0 4px; font-size: 14px; color: rgba(255,255,255,0.8); }
.np-a { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,0.92); padding-right: 4px; }
.np-a b { color: #8FD3A0; font-weight: 700; }
.night-phone .nf-tag { position: absolute; top: 10px; right: 12px; font-size: 11px; padding: 2px 8px; display: none; }
.night-phone .nf-item.needs { background: rgba(212,180,92,0.22); border-color: rgba(212,180,92,0.6); }
.night-phone .nf-item.needs .nf-tag { display: inline-block; }
.night-phone .nf-item.needs .np-when { visibility: hidden; }
/* not-yet-arrived notifications leave the layout entirely, so the
stack always starts under the lock-screen clock; each one drops
in like a real iOS notification when its time comes */
.night--scroll .night-phone .nf-item:not(.in) { display: none; }
.night--scroll .night-phone .nf-item.in { opacity: 1; transform: none; animation: notif-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.15); }
@keyframes notif-in { from { opacity: 0; transform: translateY(-18px) scale(0.94); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
.np-frame { width: min(300px, 86vw); height: min(560px, 62vh); border-radius: 46px; padding: 9px; }
.np-screen { border-radius: 38px; }
.np-lock { padding: 18px 0 10px; }
.np-time { font-size: 52px; }
.night-phone .nf-item { grid-template-columns: none; }
.night--scroll .night-phone .nf-item.in.old { display: block; }
.night--scroll .night-phone .nf-item:not(.in) { display: none; }
}
/* ================= night scene: phone-sized screens =================
The whole scene fits one screen: heading, caption and the
booked / follow-up / not-interested row on top, then the phone
sized to whatever height is left, so it's never cut off. The big
clock and "handled" total are dropped here -- the phone's own
lock screen already shows the time. */
@media (max-width: 900px) {
.night--scroll .night-stage {
height: 100vh;
height: 100svh; height: 100svh;
padding: 76px 0 14px; align-items: stretch;
}
.night--scroll .night-grid {
display: flex; flex-direction: column; gap: 12px; height: 100%;
}
.night--scroll .night-clockside { flex-shrink: 0; text-align: center; }
.night--scroll .night-tally { align-items: center; }
.night--scroll .night-tally .t-split { justify-content: center; }
.night--scroll .night-tally .t-split > div { align-items: center; }
.night--scroll .night-lede { display: block; font-size: clamp(24px, 7vw, 30px); margin: 0 auto 6px; max-width: none; text-wrap: balance; }
.night--scroll .clock, .night--scroll .night-tally .t-main { display: none; }
.night--scroll .night-caption { font-size: 14.5px; line-height: 1.4; margin: 0 auto 10px; min-height: 2.8em; max-width: 34ch; }
.night--scroll .night-tally .t-split { border-top: 0; padding-top: 0; gap: 22px; }
.night--scroll .night-tally .t-split b { font-size: 24px; }
.night--scroll .night-tally span { font-size: 12.5px; margin-top: 3px; }
.night--scroll .night-phone { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.night--scroll .np-frame {
height: 100%; width: auto; aspect-ratio: 340 / 700; max-width: 86vw; max-height: 640px;
}
}
@media (max-width: 900px) and (max-height: 640px) {
.night--scroll .night-caption { display: none; }
.night--scroll .np-lock { padding: 10px 0 6px; }
.night--scroll .np-time { font-size: 40px; }
}
/* on phones the chat launcher shrinks to just Coqui, so it never covers the scene */
@media (max-width: 600px) {
#chat-launcher { font-size: 0; gap: 0; padding: 12px; border-radius: 50%; }
#chat-launcher .coqui-frog { width: 30px; }
}
.site-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-links a { color: inherit; text-decoration: none; opacity: .85; }
.site-links a:hover { text-decoration: underline; opacity: 1; }
/* Accessibility and answer-ready content */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 1000; background: #fff; color: #0D1D4A; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
.hl-h1 { margin: 0 auto; max-width: none; font-size: inherit; line-height: inherit; letter-spacing: normal; font-weight: inherit; }
.hl-h1 .hl-name { display: inline-flex; }
.hl-h1 .hl-title { display: block; }
.wordmark .logo-img { display: block; height: 38px; width: 159px; background: no-repeat left center / contain; }
.wordmark .logo-navy { background-image: url("/static/images/cv-wordmark-navy.svg"); }
.wordmark .logo-white { background-image: url("/static/images/cv-wordmark-white.svg"); display: none; }
nav.on-dark .wordmark .logo-white, :root:not([data-theme="light"]) .wordmark .logo-white { display: block; }
nav.on-dark .wordmark .logo-navy, :root:not([data-theme="light"]) .wordmark .logo-navy { display: none; }
@media (max-width: 640px) { .wordmark .logo-img { height: 30px; width: 126px; } }
ol.how-steps { list-style: none; margin: 0; padding: 0; }
.faq-h { margin: 0; font: inherit; }
.plan-table-wrap { overflow-x: auto; margin: 40px auto 0; max-width: 880px; }
.plan-table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: center; }
.plan-table caption { font-weight: 700; font-size: 17px; margin: 0 0 12px; text-align: left; }
.plan-table th, .plan-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.plan-table thead th { font-size: 14px; color: var(--text-dim); }
.plan-table tbody th { text-align: left; font-weight: 600; }
.plan-table small { color: var(--text-dim); font-weight: 400; }
.glossary { max-width: 880px; margin: 24px auto 0; text-align: left; font-size: 15px; }
.glossary dt { font-weight: 700; margin-top: 10px; }
.glossary dd { margin: 2px 0 0; color: var(--text-dim); }
footer .toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
footer .toc a { color: inherit; opacity: .85; }
footer .social-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
footer .social-links a { color: inherit; opacity: .85; }