@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/montserrat-v31-latin-400.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/montserrat-v31-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/montserrat-v31-latin-700.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/assets/fonts/montserrat-v31-latin-800.woff2') format('woff2');
}
:root {
--green: #059669;
--green-dark: #047857;
--green-tint: #d1fae5;
--gold: #c48f34;
--gold-tint: #fbf3df;
--terra: #c05e3e;
--red: #b42318;
--ink: #14171a;
--ink-soft: #2c3136;
--muted: #5b6369;
--subtle: #8a9399;
--bg: #faf7f1;
--bg-warm: #fdfaf4;
--card: #ffffff;
--border: #ece5d5;
--border-strong: #d9d0bd;
--shadow-sm: 0 1px 2px rgba(26,23,13,.05);
--shadow: 0 4px 14px rgba(26,23,13,.06);
--shadow-lg: 0 10px 40px rgba(26,23,13,.08);
--radius: 8px;
--radius-lg: 14px;
--max: 1080px;
--step-font: 400 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Brand font — Poppins (loaded via Google Fonts in layouts). Used for the
brand mark and display headings; body stays on system stack so text
renders instantly while the webfont loads. */
--font-brand: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Apply Poppins to the brand mark and display headings. Body copy stays on
the system stack for performance + accessibility (system font respects user
font preferences). Letter-spacing slightly tightened — Poppins is wider
than the system stack at the same point size. */
.brand,
.hero h1,
.page-hero h1,
.section-title,
.s-hero h1,
.b-hero h1,
.d-hero h1,
.del-hero h1,
.tfa-hero h1,
.auth-card-top h1 {
font-family: var(--font-brand);
letter-spacing: -0.025em;
font-weight: 700;
}
.brand { font-weight: 800; letter-spacing: -0.02em; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font: var(--step-font);
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green); }
.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; background: #000; color: #fff; padding: 8px; }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.015em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: .25em 0 .5em; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin: 1em 0 .4em; letter-spacing: -0.02em; }
h3 { font-size: 1.18rem; line-height: 1.25; margin: .8em 0 .3em; }
h4 { font-size: 1.02rem; line-height: 1.3; margin: .6em 0 .2em; }
p { margin: .5em 0 .9em; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
main { padding: 32px 0 80px; }
main.container { padding-left: 24px; padding-right: 24px; }
main.container.pagename-404{max-width: 100% !important;padding: 0 !important;border-radius: 0;}
/* ============================================================
Admin redesign — uses the same s-hero / s-card framework as
user-facing pages, with a few admin-specific list patterns.
============================================================ */
/* Failed-deliveries red stat tile */
.d-stat-fail {
background: linear-gradient(135deg, #fde7e4 0%, #fef4f2 100%);
border-color: #f2b4ab;
}
.d-stat-fail .d-stat-icon { color: var(--red); }
.d-stat-fail .d-stat-num { color: var(--red); }
.btn-start-deletion:hover{
color: white !important;
border-color: red !important;
box-shadow: 0 4px 14px rgba(164, 0, 0, 0.49);
background: #c80000;
}
/* System health list */
.adm-health-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.adm-health {
display: grid;
grid-template-columns: 12px 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
.adm-health-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: currentColor;
}
.adm-health-ok { color: var(--green); }
.adm-health-warn { color: var(--gold); }
.adm-health-fail { color: var(--red); background: linear-gradient(180deg, #fef4f2 0%, #fff 100%); border-color: #f2b4ab; }
.adm-health-component { margin: 0; font-weight: 700; color: #111; font-size: .98rem; }
.adm-health-meta { margin: 2px 0 0; color: #6b7280; font-size: .85rem; line-height: 1.4; }
.adm-health-status {
font-size: .72rem;
font-weight: 800;
letter-spacing: .1em;
padding: 4px 10px;
border-radius: 999px;
color: currentColor;
background: color-mix(in srgb, currentColor 15%, transparent);
}
/* Overdue users list */
.adm-overdue-list,
.adm-users-list,
.adm-nok-list,
.adm-checkins-list,
.adm-notif-list,
.adm-audit-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.adm-overdue {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
.adm-overdue-id,
.adm-user-id {
font-family: ui-monospace, Menlo, Monaco, monospace;
font-size: .82rem;
color: #6b7280;
font-weight: 700;
}
.adm-overdue-name { margin: 0; font-weight: 700; color: #111; font-size: 1rem; }
.adm-overdue-meta { margin: 2px 0 0; color: #6b7280; font-size: .85rem; line-height: 1.4; }
.adm-overdue-hours {
font-size: .82rem;
font-weight: 700;
color: var(--red);
background: #fde7e4;
padding: 4px 10px;
border-radius: 999px;
}
/* Search input row on /admin/users */
.adm-search {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.adm-search input[type="text"] {
flex: 1 1 280px;
padding: 10px 12px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
font-size: 1rem;
}
.adm-search input[type="text"]:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px var(--green-tint);
}
/* User-list rows (clickable) */
.adm-user { padding: 0; }
.adm-user-link {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: border-color .12s ease, transform .08s ease;
}
.adm-user-link:hover { border-color: #c9d4df; transform: translateY(-1px); }
.adm-user-name { margin: 0; font-weight: 700; color: #111; font-size: 1rem; }
.adm-user-meta { margin: 2px 0 0; color: #6b7280; font-size: .85rem; }
.adm-user-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
text-align: right;
font-size: .8rem;
color: #6b7280;
}
.adm-user-tier {
font-weight: 700;
color: #374151;
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.adm-user-when { font-family: ui-monospace, Menlo, Monaco, monospace; font-size: .78rem; }
.adm-user-status {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.adm-user-status-ok { background: var(--green-tint); color: var(--green-dark); }
.adm-user-status-warn { background: var(--gold-tint); color: #7a5e20; }
.adm-user-status-crit { background: #fde7e4; color: var(--red); }
.adm-user-status-muted { background: #f3f4f6; color: #6b7280; }
/* Key-value list on user detail */
.adm-kv {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px 24px;
}
.adm-kv > div {
border-bottom: 1px solid #f3f4f6;
padding-bottom: 8px;
}
.adm-kv dt {
color: #9ca3af;
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
margin: 0 0 2px;
}
.adm-kv dd {
margin: 0;
color: #111;
font-size: .98rem;
line-height: 1.5;
word-break: break-word;
}
.adm-kv-none { color: #9ca3af; font-style: italic; }
.adm-kv-pill {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.adm-kv-pill-ok { background: var(--green-tint); color: var(--green-dark); }
.adm-kv-pill-gold { background: var(--gold-tint); color: #7a5e20; }
/* NOK list on user detail */
.adm-nok {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
.adm-nok-body { flex: 1; min-width: 0; }
.adm-nok-name { margin: 0; font-weight: 700; color: #111; font-size: 1rem; }
.adm-nok-meta { margin: 2px 0 0; color: #6b7280; font-size: .85rem; line-height: 1.4; word-break: break-word; }
/* Compact list rows for check-ins / notifications / audit */
.adm-checkin,
.adm-notif,
.adm-audit {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 8px 12px;
background: #fff;
border: 1px solid #eef0f3;
border-radius: 8px;
font-size: .88rem;
}
.adm-checkin-when,
.adm-notif-when,
.adm-audit-when {
font-family: ui-monospace, Menlo, Monaco, monospace;
font-size: .82rem;
color: #6b7280;
flex-shrink: 0;
}
.adm-checkin-method,
.adm-notif-channel {
background: var(--green-tint);
color: var(--green-dark);
padding: 2px 8px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.adm-notif-channel { background: #ece4f8; color: #6b4aa0; }
.adm-checkin-ip,
.adm-notif-to {
font-family: ui-monospace, Menlo, Monaco, monospace;
color: #4b5563;
font-size: .82rem;
}
.adm-notif-kind { color: #111; font-weight: 600; }
.adm-audit-actor {
font-family: ui-monospace, Menlo, Monaco, monospace;
color: #6b4aa0;
background: #ece4f8;
padding: 2px 8px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
}
.adm-audit-action { color: #111; font-weight: 600; }
.adm-audit-detail { color: #6b7280; flex: 1 1 200px; min-width: 0; word-break: break-word; }
/* Failed-deliveries list — one larger card per failure with the operator's
triage info: what kind, to whom, what's happened since, and a Resend button. */
.adm-failed-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.adm-failed {
background: #fff;
border: 1px solid #f2b4ab;
border-left: 4px solid var(--red);
border-radius: 12px;
padding: 0;
overflow: hidden;
}
.adm-failed-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px 16px;
background: #fef4f2;
border-bottom: 1px solid #f9d8d2;
}
.adm-failed-headline {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.adm-failed-channel {
font-size: .72rem;
font-weight: 800;
letter-spacing: .1em;
padding: 3px 10px;
border-radius: 999px;
color: #fff;
}
.adm-failed-channel-email { background: #2a6a8a; }
.adm-failed-channel-sms { background: #6b4aa0; }
.adm-failed-channel-voice { background: var(--gold); }
.adm-failed-kind {
font-weight: 700;
color: #111;
font-size: 1rem;
}
.adm-failed-recipient-tag {
font-size: .76rem;
color: #6b7280;
background: #fff;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid #e5e7eb;
}
.adm-failed-when {
font-family: ui-monospace, Menlo, Monaco, monospace;
font-size: .82rem;
color: #6b7280;
}
.adm-failed-body { padding: 14px 16px 16px; }
.adm-failed-kv {
margin: 0 0 12px;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px 24px;
}
.adm-failed-kv > div { border-bottom: 1px solid #f9d8d2; padding-bottom: 8px; }
.adm-failed-kv dt {
color: #9ca3af;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
margin: 0 0 2px;
}
.adm-failed-kv dd {
margin: 0;
color: #111;
font-size: .92rem;
line-height: 1.5;
word-break: break-word;
}
.adm-failed-quiet { color: #6b7280; font-style: italic; }
.adm-failed-followup-ok { color: var(--green-dark); }
.adm-failed-followup-ok strong { color: var(--green-dark); }
.adm-failed-error {
margin: 0 0 14px;
padding: 10px 12px;
background: #14171a;
color: #f9d8d2;
border-radius: 6px;
font-size: .82rem;
line-height: 1.5;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
font-family: ui-monospace, Menlo, Monaco, monospace;
}
.adm-failed-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.adm-failed-actions form { margin: 0; }
.adm-failed-closed {
color: #6b7280;
font-style: italic;
font-size: .9rem;
}
/* 404 page — friendly, on-brand, gives the user a clear way back. */
.nf-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
margin: 22px 0;
padding: 56px 34px 48px;
color: #fff;
background:
radial-gradient(900px 400px at 90% -20%, rgba(0,255,176,0.22) 0%, transparent 60%),
linear-gradient(135deg, #047857 0%, #065f46 55%, #022c22 100%);
box-shadow: 0 10px 40px rgba(4,120,87,0.14);
}
.nf-hero-art { position: absolute; inset: 0; pointer-events: none; opacity: 0.85; }
.nf-hero-art svg { width: 100%; height: 100%; }
.nf-hero-inner { position: relative; max-width: 880px; margin: 0 auto; }
.nf-eyebrow {
text-transform: uppercase;
letter-spacing: .14em;
font-size: .78rem;
font-weight: 700;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.78);
}
.nf-stack {
display: grid;
grid-template-columns: 220px 1fr;
gap: 28px;
align-items: center;
}
.nf-illus { width: 220px; max-width: 100%; }
.nf-illus svg { width: 100%; height: auto; display: block; }
.nf-copy { min-width: 0; }
.nf-headline {
color: #fff;
margin: 0 0 12px;
font-size: clamp(1.8rem, 3.6vw, 2.6rem);
letter-spacing: -0.025em;
line-height: 1.12;
}
.nf-sub {
color: rgba(255, 255, 255, 0.92);
font-size: 1.08rem;
line-height: 1.55;
margin: 0 0 22px;
max-width: 38em;
}
.nf-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.nf-actions .btn-primary {
background: #fff;
color: var(--green-dark);
border-color: #fff;
font-weight: 700;
}
.nf-actions .btn-primary:hover { background: var(--green-tint); color: var(--green-dark); }
.nf-actions .btn-on-light {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.32);
font-weight: 600;
}
.nf-actions .btn-on-light:hover { background: rgba(255, 255, 255, 0.16); }
.nf-foot {
color: rgba(255, 255, 255, 0.7);
font-size: .9rem;
line-height: 1.55;
margin: 0;
max-width: 38em;
}
.nf-foot a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
.nf-hero { padding: 40px 22px 36px; border-radius: var(--radius); }
.nf-stack { grid-template-columns: 1fr; gap: 18px; }
.nf-illus { width: 160px; margin: 0 auto; }
.nf-copy { text-align: center; }
.nf-actions { justify-content: center; }
.nf-sub, .nf-foot { margin-left: auto; margin-right: auto; }
}
/* Alpha banner — sits above the header until we leave alpha. Visible enough
to set expectations, calm enough not to scare anyone off. */
.alpha-banner {
background: linear-gradient(90deg, #fbf3df 0%, #fff7e0 100%);
border-bottom: 1px solid #f0dba0;
color: #7a5e20;
font-size: .9rem;
line-height: 1.4;
padding: 8px 0;
}
.alpha-banner .container {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.alpha-tag {
background: var(--gold);
color: #fff;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
padding: 3px 10px;
border-radius: 999px;
flex-shrink: 0;
}
.alpha-text { color: #7a5e20; }
@media (max-width: 600px) {
.alpha-banner { font-size: .82rem; padding: 7px 0; }
}
/* Signup's alpha-consent section — gold accent so it reads as "this matters". */
.signup-alpha-consent {
border-color: #f0dba0 !important;
background: linear-gradient(180deg, #fffaed 0%, #fff 100%) !important;
}
.signup-alpha-consent .form-section-num {
background: var(--gold) !important;
}
.signup-alpha-consent .checkbox-row {
background: rgba(255, 255, 255, 0.5);
border: 1px solid #f0dba0;
border-radius: 8px;
padding: 10px 12px;
}
/* Header */
.site-header {
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--border);
padding: 10px 0;
position: sticky;
top: 0;
z-index: 10;
}
.site-header .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand {
font-weight: 700;
font-size: 1.15rem;
color: #056a4d;
text-decoration: none;
letter-spacing: 1px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.site-header nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-header nav a { color: #056a4d; text-decoration: none; font-size: 1rem; font-weight: 500; }
.site-header nav a:hover { color: var(--green-dark); }
.nav-cta { background: var(--green); color: #fff !important; padding: 8px 16px; border-radius: var(--radius); font-weight: 600 !important; box-shadow: var(--shadow-sm); }
.nav-cta:hover { background: var(--green-dark); }
/* Admin header */
.admin-header { background: #1a1f26; color: #fff; padding: 14px 0; }
.admin-header .container { display: flex; justify-content: space-between; align-items: center; }
.admin-header a { color: #fff; text-decoration: none; margin-left: 14px; }
.admin-body { background: #f1ede3; }
/* Flash messages */
.flash { padding: 12px 0; margin:20px; border-radius:10px }
.flash.notice { background: var(--green-tint); border-bottom: 1px solid #c6e3cf; color: #0f5325; }
.flash.error { background: #fde7e4; border-bottom: 1px solid #f2b4ab; color: #7a150a; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
background: #fff;
color: var(--ink);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
cursor: pointer;
font: inherit;
font-weight: 600;
text-decoration: none;
min-height: 44px;
line-height: 1.2;
transition: all .15s ease;
box-shadow: var(--shadow-sm);
}
.btn:hover { border-color: var(--ink-soft); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary {
background: var(--green);
color: #fff;
border-color: var(--green);
box-shadow: 0 1px 2px rgba(4,120,87,.2), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; box-shadow: 0 4px 14px rgba(4,120,87,.25); }
.btn-ghost { background: transparent; border-color: var(--border-strong); }
.btn-ghost:hover { background: #fff; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-small { padding: 5px 10px; font-size: .9rem; min-height: 32px; font-weight: 500; }
.btn-large { padding: 14px 26px; font-size: 1.05rem; }
.btn-huge { padding: 26px 48px; font-size: 1.5rem; font-weight: 700; }
.btn-full { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; color: #056a4d; font: inherit; cursor: pointer; font-weight:800 }
/* ----- LANDING PAGE ----- */
/* Hero with video background + dark overlay */
.hero-video-wrap {
position: relative;
overflow: hidden;
min-height: clamp(520px, 78vh, 780px);
display: flex;
align-items: center;
background:
linear-gradient(135deg, #022c22 0%, #064e3b 50%, #047857 100%);
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
pointer-events: none;
transform: scaleX(-1);
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(135deg, rgba(2, 44, 34, 0.78) 0%, rgba(6, 95, 70, 0.65) 60%, rgba(6, 95, 70, 0.7) 100%),
radial-gradient(ellipse at 20% 30%, rgba(0,0,0,0.25) 0%, transparent 55%);
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 2;
max-width: var(--max);
width: 100%;
margin: 0 auto;
padding: 80px 24px 70px;
color: #fff;
}
.hero-inner h1 {
color: #fff;
max-width: 16em;
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
line-height: 1.08;
letter-spacing: -0.03em;
text-shadow: 0 2px 24px rgba(0,0,0,0.25);
margin-bottom: 20px;
}
.hero-inner .lead {
color: rgba(255,255,255,0.92);
max-width: 36em;
font-size: clamp(1.02rem, 1.3vw, 1.2rem);
line-height: 1.6;
text-shadow: 0 1px 12px rgba(0,0,0,0.25);
}
.hero-inner .eyebrow.light {
color: #d9eadf;
letter-spacing: .12em;
}
.hero-inner .micro.light {
color: rgba(255,255,255,0.78);
margin-top: 6px;
}
.hl-dark {
position: relative;
display: inline-block;
color: #00ffb0;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: .1em;
font-size: .82rem;
font-weight: 700;
color: var(--green-dark);
margin: 0 0 14px;
}
.cta-row { margin: 28px 0 12px; display: flex; flex-wrap: wrap; gap: 12px; }
.micro { font-size: .88rem; color: var(--subtle); margin-top: 4px; }
.btn-on-dark {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.35);
color: #fff;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.btn-on-dark:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.55);
color: #fff;
}
/* Trust strip — sits directly below video hero, continues the dark zone */
.trust-strip {
padding: 26px max(24px, calc((100vw - var(--max)) / 2));
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px 28px;
background: linear-gradient(180deg, #064e3b 0%, #022c22 100%);
color: #fff;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ts-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.95);
font-weight: 500;
font-size: .96rem;
justify-content: center;
}
.ts-item svg { color: #d4a14a; flex-shrink: 0; }
/* Story section — editorial / essay treatment */
.story {
padding: 110px 24px 100px;
background: #ffffff;
border-bottom: 1px solid var(--border);
}
.story-inner {
max-width: 640px;
margin: 0 auto;
}
.story h2 {
font-size: clamp(1.9rem, 3vw, 2.5rem);
letter-spacing: -0.028em;
line-height: 1.12;
margin: 0 0 32px;
color: var(--ink);
max-width: 14em;
}
.story-lede {
font-size: 1.25rem;
color: var(--ink);
line-height: 1.6;
font-weight: 500;
margin: 0 0 1.2em;
}
.story p {
font-size: 1.1rem;
color: var(--ink-soft);
line-height: 1.75;
margin: 0 0 1em;
}
.story-rule {
border: 0;
height: 2px;
width: 60px;
background: var(--green);
margin: 40px 0 32px;
border-radius: 2px;
}
.story-emph {
font-size: 1.12rem;
line-height: 1.65;
color: var(--ink);
font-style: italic;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--green);
margin: 0 !important;
}
.story-emph strong {
font-style: normal;
color: var(--green-dark);
font-weight: 700;
}
.section-title { text-align: center; margin-top: 0; font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.section-sub { text-align: center; color: var(--muted); max-width: 36em; margin: 0 auto 40px; font-size: 1.05rem; }
/* Steps — warm cream band with big illustrations */
.steps-section {
padding: 60px 24px 120px;
background:
radial-gradient(900px 500px at 50% 110%, rgba(5,150,105,0.04) 0%, transparent 60%),
var(--bg);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.steps-wrap { max-width: var(--max); margin: 0 auto; position: relative; }
.eyebrow-green {
text-align: center;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .82rem;
font-weight: 700;
color: var(--green-dark);
margin: 0 0 12px;
}
.steps-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 56px;
position: relative;
}
@media (max-width: 860px) {
.steps-v2 { grid-template-columns: 1fr; gap: 36px; }
}
.steps-connector {
position: absolute;
top: 120px;
left: 18%;
right: 18%;
height: 2px;
background-image: linear-gradient(90deg, var(--green) 0 8px, transparent 8px 16px);
background-size: 16px 2px;
background-repeat: repeat-x;
opacity: 0.28;
z-index: 0;
pointer-events: none;
}
@media (max-width: 860px) { .steps-connector { display: none; } }
.step-v2 {
position: relative;
padding: 44px 28px 30px;
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
z-index: 1;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.step-v2:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--green);
}
.step-ghost {
position: absolute;
top: -28px;
right: 5px;
font-size: 11rem;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--green);
opacity: 0.05;
z-index: 0;
line-height: 1;
pointer-events: none;
user-select: none;
}
.step-v2-badge {
display: inline-block;
position: absolute;
z-index: 2;
padding: 4px 14px;
background: var(--green);
color: #fff;
border-radius: 20px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 18px;
box-shadow: 0 3px 10px rgba(4,120,87,.2);
top:10px;
left:10px;
}
.step-v2-art {
position: relative;
z-index: 1;
margin: 6px 0 22px;
display: grid;
place-items: center;
}
.step-v2-art svg {
width: 100%;
max-width: 260px;
height: auto;
display: block;
filter: drop-shadow(0 6px 18px rgba(26,23,13,0.06));
}
.step-v2 h3 {
position: relative;
z-index: 2;
margin: 0 0 10px;
font-size: 1.22rem;
letter-spacing: -0.01em;
}
.step-v2 p {
position: relative;
z-index: 2;
color: var(--muted);
margin: 0;
line-height: 1.6;
}
/* Methods — white band with illustrated mockup cards */
.methods-section {
padding: 60px 24px 110px;
background: #ffffff;
border-bottom: 1px solid var(--border);
text-align: center;
}
.methods-section > .eyebrow-green,
.methods-section > .section-title,
.methods-section > .section-sub { max-width: var(--max); margin-left: auto; margin-right: auto; }
.methods-grid-v2 {
max-width: 980px;
margin: 48px auto 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
text-align: left;
}
@media (max-width: 820px) { .methods-grid-v2 { grid-template-columns: 1fr; } }
.method-v2 {
display: grid;
grid-template-columns: 200px 1fr;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.method-v2:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--green);
}
@media (max-width: 560px) {
.method-v2 { grid-template-columns: 1fr; }
.method-v2 .m-art { aspect-ratio: 5 / 3; padding: 20px; border-right: 0; border-bottom: 1px solid var(--border); }
}
.m-art {
background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
display: grid; place-items: center;
padding: 18px;
border-right: 1px solid var(--border);
}
.m-art-gold { background: linear-gradient(135deg, #fbf3df 0%, #fef8e6 100%); }
.m-art-terra { background: linear-gradient(135deg, #fdece2 0%, #fdf5ee 100%); }
.m-art svg { width: 100%; max-width: 180px; height: auto; filter: drop-shadow(0 6px 18px rgba(26,23,13,.06)); }
.m-body {
padding: 24px 26px 22px;
display: flex;
flex-direction: column;
justify-content: center;
}
.m-tag {
align-self: flex-start;
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 800;
color: var(--green-dark);
background: var(--green-tint);
padding: 4px 11px;
border-radius: 12px;
margin-bottom: 12px;
}
.m-tag-gold { color: #7a5e20; background: var(--gold-tint); }
.m-tag-terra { color: #8a3e23; background: #fbe3d7; }
.method-v2 h4 { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: -0.01em; }
.method-v2 p { color: var(--muted); margin: 0; line-height: 1.6; font-size: .98rem; }
.method-v2 p strong { color: var(--ink); }
.method {
text-align: center;
padding: 24px 18px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-warm);
transition: border-color .15s ease, background .15s ease;
}
.method:hover { border-color: var(--green); background: #fff; }
.method-icon {
width: 48px; height: 48px;
border-radius: 50%;
background: #fff;
color: var(--green-dark);
display: grid; place-items: center;
margin: 0 auto 14px;
box-shadow: var(--shadow-sm);
}
.method h4 { margin: 0 0 6px; }
.method p { color: var(--muted); margin: 0; font-size: .95rem; }
/* Timeline — warm cream band, vertical case-file style with severity cards */
.timeline-section {
padding: 100px 24px 110px;
background:
radial-gradient(800px 400px at 50% 100%, rgba(180,35,24,0.04) 0%, transparent 60%),
var(--bg);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.tl-wrap { max-width: 860px; margin: 0 auto; position: relative; }
.eyebrow-red {
text-align: center;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .82rem;
font-weight: 700;
color: var(--red);
margin: 0 0 12px;
}
.tl-v2 {
list-style: none;
padding: 0;
margin: 48px 0 0;
position: relative;
}
.tl-v2::before {
content: "";
position: absolute;
left: 122px;
top: 18px;
bottom: 155px;
width: 2px;
background: linear-gradient(180deg, var(--green) 0%, #d4a14a 35%, var(--terra) 70%, var(--red) 100%);
border-radius: 2px;
opacity: 0.6;
z-index:1
}
@media (max-width: 640px) {
.tl-v2::before { display: none}
}
.tl-phase {
display: grid;
grid-template-columns: 90px 22px 1fr;
gap: 22px;
align-items: start;
margin-bottom: 22px;
position: relative;
}
@media (max-width: 640px) {
/* drop the time column entirely on mobile — using display:none on
.tl-time-col while keeping 3 columns would leave grid auto-placement
filling the 0-width track first and squashing the card */
.tl-phase { grid-template-columns: 22px 1fr; gap: 14px; }
.tl-time-col { margin-left:-15px }
.tl-node{display:none !important}
}
.tl-time-col { text-align: right; padding-top: 10px; }
.tl-time {
display: inline-block;
font-weight: 800;
font-size: 1.5rem;
color: var(--ink);
letter-spacing: -0.03em;
line-height: 1;
}
.tl-time small {
display: block;
font-size: .7rem;
font-weight: 600;
color: var(--subtle);
letter-spacing: .12em;
text-transform: uppercase;
margin-top: 3px;
}
.tl-node {
position: relative;
padding-top: 18px;
display: flex;
justify-content: center;
}
.tl-dot-v2 {
width: 22px; height: 22px;
border-radius: 50%;
border: 4px solid #fff;
position: relative;
z-index: 2;
background:white;
box-shadow: 0 0 0 2px currentColor, 0 4px 10px rgba(0,0,0,0.08);
}
.tl-phase-body {
background: #fff;
border: 1px solid var(--border);
border-left: 3px solid currentColor;
border-radius: var(--radius-lg);
padding: 18px 22px 18px 22px;
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.tl-phase-body:hover { transform: translateX(2px); box-shadow: var(--shadow); }
.tl-head {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 8px;
}
.tl-chip {
display: inline-block;
padding: 4px 12px;
background: var(--tl-color, var(--green));
color: #fff;
border-radius: 20px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
}
.tl-who {
display: inline-flex;
gap: 6px;
align-items: center;
font-size: .82rem;
font-weight: 600;
color: var(--muted);
letter-spacing: .03em;
}
.tl-phase h4 {
margin: 0 0 10px;
font-size: 1.08rem;
color: var(--ink);
letter-spacing: -0.005em;
}
.tl-msg {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--ink-soft);
font-size: .95rem;
line-height: 1.55;
font-style: italic;
}
.tl-msg svg {
color: var(--subtle);
flex-shrink: 0;
margin-top: 5px;
}
.tl-phase.calm { --tl-color: var(--green); color: var(--green); }
.tl-phase.warning { --tl-color: #b8862a; color: #b8862a; }
.tl-phase.alert { --tl-color: var(--terra); color: var(--terra); }
.tl-phase.critical { --tl-color: var(--red); color: var(--red); }
.tl-phase.final-msg { --tl-color: #6b4aa0; color: #6b4aa0; }
.tl-phase.calm .tl-phase-body { border-left-color: var(--green); }
.tl-phase.warning .tl-phase-body { border-left-color: #b8862a; }
.tl-phase.alert .tl-phase-body { border-left-color: var(--terra); }
.tl-phase.critical .tl-phase-body { border-left-color: var(--red); }
.tl-phase.final-msg .tl-phase-body { border-left-color: #6b4aa0; }
.tl-footnote {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 40px auto 0;
padding: 14px 22px;
max-width: 640px;
background: var(--gold-tint);
border: 1px dashed #e6cc85;
border-radius: var(--radius);
color: #7a5e20;
font-size: .95rem;
font-weight: 600;
}
.tl-footnote svg { color: var(--gold); flex-shrink: 0; }
/* Pricing on landing — white band */
.pricing-section {
padding: 90px 24px;
background: #ffffff;
border-bottom: 1px solid var(--border);
}
.pricing-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
max-width: 780px;
margin: 0 auto 12px;
}
.pcard-v2 {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 30px 28px;
box-shadow: var(--shadow-sm);
position: relative;
}
.pcard-v2.featured {
border: 2px solid var(--green);
box-shadow: 0 6px 24px rgba(4,120,87,.12);
}
.pbadge {
position: absolute;
top: -12px; right: 20px;
background: var(--green);
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .02em;
}
.pcard-v2 h3 { font-size: 1.1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; font-weight: 700; }
.pprice { font-size: 2.6rem; font-weight: 800; margin: 0 0 18px; color: var(--ink); letter-spacing: -0.03em; }
.pprice span { font-size: 1rem; font-weight: 500; color: var(--subtle); margin-left: 2px; }
.pfeatures { list-style: none; padding: 0; margin: 0 0 22px; }
.pfeatures li {
padding: 8px 0 8px 26px;
border-bottom: 1px dashed var(--border);
position: relative;
color: var(--ink-soft);
}
.pfeatures li::before {
content: "";
position: absolute;
left: 0; top: 14px;
width: 16px; height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
}
.pfeatures li:last-child { border-bottom: 0; }
.small.center { text-align: center; display: block; }
/* Reassurance — dark green band, tenet cards with gold accents */
.reassure {
background:
radial-gradient(ellipse at 85% 10%, rgba(212,161,74,0.14) 0%, transparent 55%),
linear-gradient(160deg, #022c22 0%, #065f46 55%, #022c22 100%);
padding: 110px 24px 120px;
color: #fff;
position: relative;
overflow: hidden;
}
.reassure::before, .reassure::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1px;
background: rgba(255,255,255,0.06);
}
.reassure::before { top: 0; }
.reassure::after { bottom: 0; }
.reassure-bg {
position: absolute;
inset: 0;
background-image:
radial-gradient(600px 300px at 15% 85%, rgba(16,185,129,0.25) 0%, transparent 60%),
radial-gradient(500px 250px at 95% 95%, rgba(212,161,74,0.08) 0%, transparent 60%);
pointer-events: none;
}
.reassure-inner {
max-width: var(--max);
margin: 0 auto;
position: relative;
z-index: 1;
}
.eyebrow-gold {
text-align: center;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .82rem;
font-weight: 700;
color: #d4a14a;
margin: 0 0 12px;
}
.reassure-inner h2 {
text-align: center;
color: #fff;
font-size: clamp(1.9rem, 3.2vw, 2.6rem);
margin-bottom: 12px;
margin-top:0
}
.reassure-sub {
text-align: center;
color: rgba(255,255,255,0.72);
max-width: 36em;
margin: 0 auto 52px;
font-size: 1.05rem;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
@media (max-width: 720px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-tenet {
position: relative;
padding: 28px 28px 26px 34px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-lg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: border-color .2s ease, transform .2s ease, background .2s ease;
overflow: hidden;
background: #ffffff1c;
}
.trust-tenet:hover {
border-color: rgba(212,161,74,0.45);
transform: translateY(-2px);
}
.tt-num {
display: inline-block;
font-size: .72rem;
font-weight: 800;
color: #d4a14a;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 16px;
opacity: 0.92;
}
.tt-icon {
color: #d4a14a;
margin-bottom: 16px;
display: inline-flex;
padding: 11px;
background: rgba(212,161,74,0.12);
border-radius: var(--radius);
border: 1px solid rgba(212,161,74,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.trust-tenet h4 {
color: #fff;
font-size: 1.12rem;
margin: 0 0 10px;
padding: 0;
letter-spacing: -0.005em;
}
.trust-tenet h4::before { display: none; }
.trust-tenet p {
color: rgba(255,255,255,0.78);
margin: 0;
line-height: 1.65;
font-size: .98rem;
}
.manifesto {
text-align: center;
margin: 60px 0 0;
font-size: clamp(1.05rem, 1.7vw, 1.3rem);
line-height: 1.5;
color: rgba(255,255,255,0.78);
font-weight: 500;
letter-spacing: .01em;
}
.manifesto span {
color: #d4a14a;
font-weight: 700;
}
/* Final CTA — warm light band */
.final-cta {
padding: 110px 24px;
background:
radial-gradient(700px 340px at 50% 30%, #d1fae5 0%, transparent 70%),
linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
text-align: center;
}
.final-cta-inner { max-width: 560px; margin: 0 auto; }
.final-cta h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.final-cta p { font-size: 1.1rem; color: var(--muted); margin-bottom: 26px; }
article{
margin-bottom:20px
}
/* Footer */
.site-footer {
border-top: 1px solid var(--border);
background: #fff;
padding: 40px 0 30px;
font-size: .92rem;
color: var(--muted);
/* margin-top:50px */
}
.site-footer .container > p { margin: 6px 0; }
.site-footer nav { margin: 12px 0 16px; display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer nav a { color: var(--green); text-decoration: none; }
.site-footer nav a:hover { color: var(--green-dark); text-decoration: underline; }
.legal-note { font-size: .82rem; color: var(--subtle); max-width: 780px; line-height: 1.5; border-top: 1px dashed var(--border); padding-top: 18px; margin-top: 20px !important; }
/* ----- FORMS ----- */
form.stacked { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
form.narrow { max-width: 380px; }
form label { display: block; font-weight: 600; color: var(--ink-soft); }
form input[type=text], form input[type=email], form input[type=tel], form input[type=password],
form input[type=number], form input[type=datetime-local], form select, form textarea {
display: block;
width: 100%;
padding: 11px 14px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
font: inherit;
background: #fff;
margin-top: 6px;
transition: border-color .15s ease, box-shadow .15s ease;
}
form input:focus, form select:focus, form textarea:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px var(--green-tint);
}
form textarea { min-height: 96px; resize: vertical; }
form fieldset {
border: 1px solid var(--border);
padding: 20px;
border-radius: var(--radius-lg);
margin: 0;
background: #fff;
}
form legend { font-weight: 700; padding: 0 10px; color: var(--ink); }
form .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { form .row { grid-template-columns: 1fr; } }
/* ===== DASHBOARD v2 — colourful hero + stats + panels + tiles ===== */
/* Hero — full bleed, gradient, decorative blob, big CTA */
.d-hero {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
padding: 44px 34px 40px;
margin-bottom: 22px;
color: #fff;
box-shadow: 0 10px 40px rgba(4,120,87,0.14);
}
.d-hero-ok {
background:
radial-gradient(900px 400px at 90% -20%, rgba(0,255,176,0.28) 0%, transparent 60%),
linear-gradient(135deg, #047857 0%, #065f46 55%, #022c22 100%);
}
.d-hero-overdue {
background:
radial-gradient(900px 400px at 90% -20%, rgba(255,220,140,0.3) 0%, transparent 60%),
linear-gradient(135deg, #c48f34 0%, #7a5e20 100%);
box-shadow: 0 10px 40px rgba(196,143,52,0.24);
}
.d-hero-critical {
background:
radial-gradient(900px 400px at 90% -20%, rgba(255,180,160,0.3) 0%, transparent 60%),
linear-gradient(135deg, #b42318 0%, #7a150a 100%);
box-shadow: 0 10px 40px rgba(180,35,24,0.24);
}
.d-hero-paused {
background:
radial-gradient(900px 400px at 90% -20%, rgba(255,220,140,0.28) 0%, transparent 60%),
linear-gradient(135deg, #a27224 0%, #6a4a0f 100%);
box-shadow: 0 10px 40px rgba(162,114,36,0.2);
}
.d-hero-art { position: absolute; inset: 0; pointer-events: none; opacity: 0.85; }
.d-hero-art svg { width: 100%; height: 100%; }
.d-hero-inner { position: relative; max-width: 780px; }
.d-hero-eyebrow {
text-transform: uppercase;
letter-spacing: .14em;
font-size: .78rem;
font-weight: 700;
margin: 0 0 10px;
color: rgba(255,255,255,0.78);
}
.d-hero h1 {
color: #fff;
margin: 0 0 10px;
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
letter-spacing: -0.025em;
line-height: 1.15;
}
.d-hero-sub { color: rgba(255,255,255,0.88); font-size: 1.05rem; margin: 0 0 22px; }
.d-hero-sub strong { color: #fff; }
.d-hero-dim { color: rgba(255,255,255,0.64); font-weight: 500; }
.d-hero-action { margin: 0; }
/* Phone-check-in fallback line under the big "I'm still alive" button.
Deliberately quiet visually — secondary path, not a competing CTA. */
.d-hero-voice {
margin: 18px 0 0;
color: rgba(255,255,255,0.78);
font-size: .92rem;
display: inline-flex;
align-items: center;
gap: 8px;
}
.d-hero-voice a {
color: #fff;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255,255,255,0.5);
}
.d-hero-voice a:hover {
text-decoration-color: #fff;
}
.d-hero-voice-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255,255,255,0.14);
color: rgba(255,255,255,0.95);
flex-shrink: 0;
}
.d-hero .btn-huge {
background: #fff;
color: var(--green-dark);
border-color: #fff;
font-size: 1.5rem;
padding: 22px 40px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 -3px 0 rgba(0,0,0,0.08);
}
.d-hero .btn-huge:hover {
background: var(--green-tint);
color: var(--green-dark);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}
.d-hero-overdue .btn-huge { color: #7a5e20; }
.d-hero-overdue .btn-huge:hover { color: #7a5e20; background: var(--gold-tint); }
.d-hero-critical .btn-huge { color: var(--red); }
.d-hero-critical .btn-huge:hover { color: var(--red); background: #fef4f2; }
.d-hero-paused .btn-huge { color: #7a5e20; }
.d-hero-paused .btn-huge:hover { color: #7a5e20; background: var(--gold-tint); }
/* Check-in button urgency states.
calm = normal; due = gold border + slow pulse; overdue = coral ring + stronger pulse.
The pulse is a box-shadow ripple so the button geometry doesn't shift. */
.btn-checkin-due {
border: 3px solid #f0c24a;
box-shadow:
0 4px 20px rgba(0,0,0,0.15),
inset 0 -3px 0 rgba(0,0,0,0.08),
0 0 0 0 rgba(240,194,74,0.55);
animation: checkin-pulse-gold 2.2s ease-out infinite;
}
.btn-checkin-overdue {
border: 3px solid #e4a830;
box-shadow:
0 4px 20px rgba(0,0,0,0.15),
inset 0 -3px 0 rgba(0,0,0,0.08),
0 0 0 0 rgba(228,168,48,0.6);
animation: checkin-pulse-gold 2s ease-out infinite;
}
.btn-checkin-critical {
border: 3px solid #ffb5ac;
box-shadow:
0 4px 20px rgba(0,0,0,0.18),
inset 0 -3px 0 rgba(0,0,0,0.08),
0 0 0 0 rgba(255,181,172,0.7);
animation: checkin-pulse-coral 1.5s ease-out infinite;
}
.btn-checkin-due:hover,
.btn-checkin-overdue:hover,
.btn-checkin-critical:hover {
animation-play-state: paused;
}
@keyframes checkin-pulse-gold {
0% { box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 -3px 0 rgba(0,0,0,0.08), 0 0 0 0 rgba(240,194,74,0.55); }
70% { box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 -3px 0 rgba(0,0,0,0.08), 0 0 0 14px rgba(240,194,74,0); }
100% { box-shadow: 0 4px 20px rgba(0,0,0,0.15), inset 0 -3px 0 rgba(0,0,0,0.08), 0 0 0 0 rgba(240,194,74,0); }
}
@keyframes checkin-pulse-coral {
0% { box-shadow: 0 4px 20px rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.08), 0 0 0 0 rgba(255,181,172,0.7); }
70% { box-shadow: 0 4px 20px rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.08), 0 0 0 18px rgba(255,181,172,0); }
100% { box-shadow: 0 4px 20px rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.08), 0 0 0 0 rgba(255,181,172,0); }
}
@media (prefers-reduced-motion: reduce) {
.btn-checkin-due,
.btn-checkin-overdue,
.btn-checkin-critical { animation: none; }
}
/* Flash messages styled for dashboard */
.d-flash {
padding: 14px 18px;
border-radius: var(--radius);
margin-bottom: 18px;
font-weight: 500;
}
.d-flash-notice { background: var(--green-tint); color: #0f5325; border-left: 3px solid var(--green); }
.d-flash-error { background: #fde7e4; color: #7a150a; border-left: 3px solid var(--red); }
/* Stat row — 4 small colourful tiles */
.d-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.d-setup-banner{
padding:0;
margin-bottom:30px
}
.d-stat {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: var(--ink);
border: 1px solid var(--border);
}
.d-stat-streak { background: linear-gradient(135deg, #fff4dd 0%, #fbf3df 100%); border-color: #f0dba0; }
.d-stat-contacts { background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%); border-color: #a7e5c1; }
.d-stat-days { background: linear-gradient(135deg, #fef4f2 0%, #fdf5ee 100%); border-color: #f2cabb; }
.d-stat-tier { background: linear-gradient(135deg, #ece4f8 0%, #f5f0fc 100%); border-color: #d1c1eb; }
.d-stat-icon {
flex: 0 0 auto;
width: 44px; height: 44px;
border-radius: 12px;
display: grid; place-items: center;
background: rgba(255,255,255,0.7);
color: var(--ink);
}
.d-stat-streak .d-stat-icon { color: #c48f34; }
.d-stat-contacts .d-stat-icon { color: var(--green-dark); }
.d-stat-days .d-stat-icon { color: var(--terra); }
.d-stat-tier .d-stat-icon { color: #6b4aa0; }
.d-stat-body { min-width: 0; }
.d-stat-num {
margin: 0;
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1;
color: var(--ink);
}
.d-stat-num-total { font-size: 1rem; color: var(--muted); font-weight: 600; margin-left: 2px; }
.d-stat-num-tier { font-size: 1.3rem; }
.d-stat-label { margin: 4px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.3; }
.d-stat-label a { color: var(--muted); text-decoration: underline; }
/* Main row: heatmap + gauge */
.d-row {
display: grid;
gap: 16px;
margin-bottom: 22px;
}
.d-row-main { grid-template-columns: 1.3fr 1fr; }
.d-row-cards { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
.d-row-main, .d-row-cards { grid-template-columns: 1fr; }
}
.d-panel {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 22px;
box-shadow: var(--shadow-sm);
}
.d-panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.d-panel-head h2 {
margin: 0;
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--ink);
font-weight: 700;
text-transform: none;
}
.d-panel-head p { margin: 0; color: var(--subtle); font-size: .82rem; }
.d-panel-link { font-size: .9rem; font-weight: 600; color: var(--green-dark); text-decoration: none; }
.d-panel-link:hover { color: var(--green); }
.d-panel-meta { margin: 14px 0 0; color: var(--muted); font-size: .92rem; }
.d-panel-meta strong { color: var(--ink); font-size: 1.05rem; }
/* 30-day heatmap */
.d-heatmap {
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 6px;
padding: 6px 0;
}
.d-heat {
aspect-ratio: 1 / 1;
border-radius: 4px;
background: #ece5d5;
transition: transform .1s ease;
}
.d-heat:hover { transform: scale(1.18); }
.d-heat.on { background: var(--green); }
.d-heat.on.today { background: var(--green); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green); transform: scale(1.1); }
.d-heat.off.today { background: #fde7e4; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }
.d-heatmap-legend {
display: flex;
gap: 6px;
align-items: center;
font-size: .82rem;
color: var(--muted);
margin-top: 12px;
}
.d-heatmap-legend .d-heat { width: 14px; height: 14px; aspect-ratio: initial; }
/* Dashboard dependents panel — compact list of whose counting on you */
.d-dep-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.d-dep {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
background: #fafafa;
font-size: .95rem;
color: var(--ink);
border: 1px solid transparent;
transition: border-color .12s ease, background .12s ease;
}
.d-dep:hover { background: #fff; border-color: #e5e7eb; }
.d-dep-icon {
width: 28px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.d-dep-child .d-dep-icon { background: #dff1fb; color: #2a6a8a; }
.d-dep-pet .d-dep-icon { background: var(--gold-tint); color: var(--gold); }
.d-dep-adult .d-dep-icon { background: #ece4f8; color: #6b4aa0; }
.d-dep-name { font-weight: 600; color: #111; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-dep-meta { font-size: .82rem; color: var(--muted); flex-shrink: 0; }
/* Escalation gauge */
.d-gauge-track {
position: relative;
display: flex;
height: 16px;
border-radius: 8px;
overflow: hidden;
background: #ece5d5;
margin: 18px 0 12px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.d-gauge-zone { height: 100%; display: block; }
.d-gauge-safe { background: var(--green); }
.d-gauge-warn { background: #d4a14a; }
.d-gauge-alert { background: var(--terra); }
.d-gauge-crit { background: var(--red); }
.d-gauge-marker {
position: relative;
display:inherit;
top: -20px;
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--ink);
transform: translate(-50%, -50%);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
z-index: 2;
}
.d-gauge-labels {
position: relative;
height: 2.6em;
font-size: .74rem;
color: var(--ink);
font-weight: 700;
}
.d-gauge-label {
position: absolute;
top: 0;
transform: translateX(-50%);
white-space: nowrap;
text-align: center;
}
.d-gauge-label:first-child { transform: translateX(0); text-align: left; }
.d-gauge-label:last-child { transform: translateX(-100%); text-align: right; }
.d-gauge-labels small {
display: block;
font-size: .68rem;
font-weight: 500;
color: var(--subtle);
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 2px;
}
.d-gauge-now { margin: 16px 0 0; font-size: .95rem; color: var(--ink-soft); }
.d-pill {
display: inline-block;
padding: 2px 10px;
border-radius: 10px;
font-size: .72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
margin-left: 6px;
}
.d-pill-gold { background: var(--gold-tint); color: #7a5e20; }
/* Contacts preview panel */
.d-panel-contacts.alarm { border-color: var(--terra); background: linear-gradient(180deg, #fef4f2 0%, #fff 40%); }
.d-avatar-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.d-avatar-slot { position: relative; }
.d-avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
color: #fff;
display: grid; place-items: center;
font-weight: 800;
font-size: .9rem;
box-shadow: 0 2px 6px rgba(4,120,87,0.2);
}
/* Status-driven avatar colours: green = confirmed, gold = awaiting, red = declined.
Primary keeps the ring + drop-shadow but no longer overrides background, so
a primary contact still looks distinct regardless of consent status. */
.d-avatar-ok { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); }
.d-avatar-wait { background: linear-gradient(135deg, #e0a548 0%, #a27224 100%); }
.d-avatar-bad { background: linear-gradient(135deg, #ef4444 0%, #b42318 100%); }
.d-avatar.primary {
box-shadow: 0 0 0 3px var(--gold-tint), 0 2px 6px rgba(164,115,36,0.3);
}
.d-avatar-status {
position: absolute;
bottom: -2px;
right: -2px;
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid #fff;
}
.d-avatar-status-ok { background: var(--green); }
.d-avatar-status-wait { background: var(--gold); }
.d-avatar-status-bad { background: var(--red); }
.d-empty {
padding: 8px 0;
}
.d-empty p { margin: 0 0 10px; color: var(--muted); }
.d-empty strong { color: var(--terra); }
.d-empty-muted { color: var(--muted); margin: 0; }
/* Recent check-ins */
.d-recent-list { list-style: none; padding: 0; margin: 0; }
.d-recent-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: .94rem;
color: var(--ink-soft);
}
.d-recent-list li:last-child { border-bottom: 0; }
.d-recent-icon { flex: 0 0 24px; font-size: 1.05rem; text-align: center; }
.d-recent-when { flex: 1; font-weight: 500; }
.d-recent-method {
font-size: .72rem;
color: var(--subtle);
text-transform: uppercase;
letter-spacing: .05em;
background: var(--bg-warm);
padding: 2px 8px;
border-radius: 10px;
}
/* Bottom action tiles — colourful */
.d-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
margin-bottom: 40px;
}
.d-tile {
display: block;
padding: 22px 22px 20px;
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--ink);
border: 1px solid var(--border);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
background: #fff;
}
.d-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.d-tile-icon {
width: 44px; height: 44px;
border-radius: 12px;
display: grid; place-items: center;
margin-bottom: 12px;
background: rgba(255,255,255,0.65);
}
.d-tile h3 { margin: 0 0 4px; font-size: 1.05rem; letter-spacing: -0.01em; }
.d-tile p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.d-tile-plum { background: linear-gradient(135deg, #ece4f8 0%, #f5f0fc 100%); border-color: #d1c1eb; }
.d-tile-plum .d-tile-icon { color: #6b4aa0; }
.d-tile-gold { background: linear-gradient(135deg, #fff4dd 0%, #fbf3df 100%); border-color: #f0dba0; }
.d-tile-gold .d-tile-icon { color: #c48f34; }
.d-tile-sky { background: linear-gradient(135deg, #dff1fb 0%, #edf6fb 100%); border-color: #b3d9ec; }
.d-tile-sky .d-tile-icon { color: #2a6a8a; }
.d-tile-mint { background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%); border-color: #a7e5c1; }
.d-tile-mint .d-tile-icon { color: var(--green-dark); }
.d-tile-coral { background: linear-gradient(135deg, #fde7e4 0%, #fef4f2 100%); border-color: #f2b4ab; }
.d-tile-coral .d-tile-icon { color: var(--red); }
.d-tile-rose { background: linear-gradient(135deg, #fbe3d7 0%, #fdece2 100%); border-color: #e6b89c; }
.d-tile-rose .d-tile-icon { color: var(--terra); }
.warn { color: var(--terra); font-weight: 600; }
/* Tables */
.table { width: 100%; border-collapse: collapse; margin: 12px 0; background: #fff; border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: .95rem; }
.table th { background: var(--bg-warm); font-weight: 700; color: var(--ink-soft); }
.row-bad { background: #fef4f2; }
.text-warn { color: var(--terra); }
/* ===== NOK dashboard page ===== */
.nok-header {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 24px;
}
.nok-header-icon {
flex: 0 0 auto;
width: 54px; height: 54px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
color: #fff;
border-radius: 14px;
box-shadow: 0 4px 14px rgba(4,120,87,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
.nok-header-text h1 { margin: 0 0 4px; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
.nok-header-text p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .98rem; }
.nok-progress-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px 22px 18px;
margin-bottom: 22px;
box-shadow: var(--shadow-sm);
}
.nok-progress-head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
font-size: 1rem;
color: var(--ink);
}
.nok-progress-legend { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.nok-chip {
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
padding: 3px 10px;
border-radius: 10px;
text-transform: uppercase;
}
.nok-chip-ok { background: var(--green-tint); color: var(--green-dark); }
.nok-chip-pending { background: var(--gold-tint); color: #7a5e20; }
.nok-chip-declined { background: #fde7e4; color: #7a150a; }
.nok-progress {
display: flex;
gap: 6px;
margin: 0 0 14px;
}
.nok-progress-seg {
flex: 1;
height: 10px;
background: #ece5d5;
border-radius: 6px;
transition: background .2s ease;
}
.nok-progress-seg.ok { background: var(--green); }
.nok-progress-seg.pending { background: var(--gold); }
.nok-progress-seg.declined { background: var(--terra); opacity: 0.55; }
.nok-progress-tip { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.5; }
/* Empty state */
.nok-empty {
background: linear-gradient(180deg, var(--green-tint) 0%, #fff 100%);
border: 1px dashed #c6e3cf;
border-radius: var(--radius-lg);
padding: 44px 28px 40px;
text-align: center;
margin-bottom: 22px;
}
.nok-empty-art { margin: 0 auto 18px; }
.nok-empty h2 { margin: 0 0 10px; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.015em; }
.nok-empty p { max-width: 36em; margin: 0 auto; color: var(--muted); line-height: 1.6; }
/* NOK cards v2 */
.nok-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.nok-card-v2 {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: var(--shadow-sm);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nok-card-v2:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.nok-card-v2.is-primary { border-left: 3px solid var(--gold); }
.nok-card-v2.status-ok { border-top: 3px solid var(--green); }
.nok-card-v2.status-pending { border-top: 3px solid var(--gold); }
.nok-card-v2.status-declined { border-top: 3px solid var(--terra); opacity: 0.88; }
.nok-avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
color: #fff;
display: none; place-items: center;
font-weight: 800;
font-size: 1.15rem;
letter-spacing: .02em;
box-shadow: 0 2px 6px rgba(4,120,87,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
flex: 0 0 auto;
}
.nok-avatar.primary {
background: linear-gradient(135deg, #e0a548 0%, #a27224 100%);
box-shadow: 0 0 0 3px var(--gold-tint), 0 2px 6px rgba(164,115,36,0.3);
}
.nok-body { min-width: 0; }
.nok-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.nok-top h3 { margin: 0; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ink); }
.nok-badge-primary {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
background: var(--gold-tint);
color: #7a5e20;
border-radius: 12px;
font-size: .7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
.nok-badge-primary svg { color: var(--gold); }
.nok-rel { margin: 0 0 10px; color: var(--muted); font-size: .9rem; font-style: italic; }
.nok-contacts { list-style: none; padding: 0; margin: 10px 0; }
.nok-contacts li {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 0;
color: var(--ink-soft);
font-size: .94rem;
word-break: break-word;
}
.nok-contacts svg { color: var(--subtle); flex: 0 0 auto; }
.nok-notes {
margin: 10px 0 0;
padding: 10px 12px;
background: var(--bg-warm);
border-radius: var(--radius);
color: var(--ink-soft);
font-size: .9rem;
line-height: 1.5;
border-left: 2px solid var(--border-strong);
}
.nok-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.nok-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .82rem;
font-weight: 700;
letter-spacing: .02em;
}
.nok-status-ok { color: var(--green-dark); }
.nok-status-pending { color: #7a5e20; }
.nok-status-declined { color: var(--red); }
.nok-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.nok-actions form { margin: 0; display: inline-flex; }
@media (max-width: 420px) {
.nok-card-v2 { grid-template-columns: 1fr; }
.nok-avatar { margin: 0 0 6px; }
}
/* Add-contact card */
.nok-add-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px 26px 22px;
box-shadow: var(--shadow-sm);
margin-top: 8px;
margin-bottom: 50px;
}
.nok-add-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.nok-add-num {
flex: 0 0 auto;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--green);
color: #fff;
display: grid; place-items: center;
font-weight: 800;
font-size: 1.3rem;
box-shadow: 0 2px 8px rgba(4,120,87,0.22);
}
.nok-add-head h2 { margin: 0 0 2px; font-size: 1.2rem; letter-spacing: -0.01em; }
.nok-add-head p { margin: 0; }
.nok-add-form { margin: 0; }
.nok-add-form label {
display: block;
font-weight: 600;
color: var(--ink-soft);
font-size: .94rem;
margin-bottom: 14px;
}
.nok-add-form .label-hint { font-weight: 400; color: var(--subtle); font-size: .82rem; margin-left: 6px; }
.nok-add-form input[type=text],
.nok-add-form input[type=email],
.nok-add-form input[type=tel],
.nok-add-form textarea {
display: block;
width: 100%;
padding: 11px 13px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
font: inherit;
background: #fff;
margin-top: 6px;
color: var(--ink);
transition: border-color .15s ease, box-shadow .15s ease;
}
.nok-add-form input:focus, .nok-add-form textarea:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px var(--green-tint);
}
.nok-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .nok-add-row { grid-template-columns: 1fr; } }
.nok-primary-toggle {
display: flex !important;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--gold-tint);
border: 1px solid #e6cc85;
border-radius: var(--radius);
cursor: pointer;
margin-bottom: 18px;
transition: border-color .15s ease;
}
.nok-primary-toggle:hover { border-color: var(--gold); }
.nok-primary-toggle input[type=checkbox] {
width: 18px; height: 18px; margin: 2px 0 0;
accent-color: var(--gold);
flex: 0 0 auto;
}
.nok-primary-toggle span { display: block; font-weight: 400; }
.nok-primary-toggle strong { display: block; color: var(--ink); font-size: .98rem; margin-bottom: 2px; }
.nok-primary-toggle small { display: block; color: #7a5e20; font-size: .85rem; line-height: 1.4; }
.nok-add-submit {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 4px;
}
.nok-add-submit .btn-primary { align-self: flex-start; min-width: 160px; }
.nok-add-submit .small { margin: 0; color: var(--muted); line-height: 1.5; }
/* At-limit callout */
.nok-limit-card {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 22px 24px;
background: var(--gold-tint);
border: 1px solid #e6cc85;
border-left: 3px solid var(--gold);
border-radius: var(--radius-lg);
margin-top: 8px;
}
.nok-limit-icon {
color: var(--gold);
display: grid; place-items: center;
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
}
.nok-limit-card h2 { margin: 0 0 6px; font-size: 1.1rem; color: #6a4e0c; }
.nok-limit-card p { margin: 0; color: #7a5e20; line-height: 1.5; }
/* ===== legacy nok card styles (kept for any other page still using them) ===== */
.nok-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.nok-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.nok-card.consented { border-left: 4px solid var(--green); }
.nok-card.declined { border-left: 4px solid var(--red); opacity: .75; }
.nok-card.pending { border-left: 4px solid var(--gold); }
.badge { background: var(--green); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: .75rem; margin-left: 6px; font-weight: 600; }
.status { font-weight: 700; }
.status.ok { color: var(--green-dark); }
.status.bad { color: var(--red); }
.status.pending { color: var(--gold); }
.inline-forms { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.msg-list { list-style: none; padding: 0; }
.msg-list > li { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
/* Admin */
.admin-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin: 14px 0; box-shadow: var(--shadow-sm); }
.admin-card.danger { border-color: var(--red); background: #fef4f2; }
.keyval { display: grid; grid-template-columns: 180px 1fr; gap: 4px 12px; }
.keyval dt { font-weight: 700; color: var(--muted); }
.keyval dd { margin: 0; }
.history-list { list-style: none; padding: 0; font-size: .92rem; }
.history-list li { padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--ink-soft); }
/* Misc small helpers still referenced by other pages */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 40px 0; }
.feature { background: var(--card); padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.callout { background: var(--gold-tint); border: 1px solid #f0dba0; padding: 28px; border-radius: var(--radius-lg); margin: 30px 0; }
.steps { padding-left: 1.2em; }
.steps li { margin: .6em 0; }
.timeline { width: 100%; border-collapse: collapse; margin: 16px 0; }
.timeline th, .timeline td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.timeline th { background: var(--bg-warm); }
.pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 20px 0; }
.pcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.pcard.highlighted { border-color: var(--green); box-shadow: 0 0 0 2px rgba(5,150,105,.1); }
.pcard .price { font-size: 2rem; font-weight: 700; margin: 8px 0; }
.small { font-size: .9rem; color: var(--muted); }
.lead { font-size: 1.15rem; color: var(--muted); }
/* ============================================================
SHARED PAGE COMPONENTS — reused across marketing pages
============================================================ */
/* Page hero — compact dark band at top of content pages */
.page-hero {
position: relative;
padding: 80px 24px 70px;
background:
radial-gradient(ellipse at 85% 20%, rgba(16,185,129,0.14) 0%, transparent 55%),
linear-gradient(160deg, #022c22 0%, #064e3b 55%, #065f46 100%);
color: #fff;
text-align: center;
overflow: hidden;
}
.page-hero::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(400px 220px at 15% 85%, rgba(16,185,129,0.18) 0%, transparent 60%);
pointer-events: none;
}
.page-hero-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero .eyebrow,
.page-hero .eyebrow-gold,
.page-hero .eyebrow-green { color: #d4a14a; margin-bottom: 14px; }
.page-hero h1 {
color: #fff;
font-size: clamp(2.1rem, 4vw, 3rem);
margin: 0 0 14px;
letter-spacing: -0.025em;
line-height: 1.1;
}
.page-hero-sub {
color: rgba(255,255,255,0.82);
font-size: clamp(1rem, 1.4vw, 1.18rem);
max-width: 38em;
margin: 0 auto;
line-height: 1.6;
}
.page-hero-meta { color: rgba(255,255,255,0.6); font-size: .88rem; margin-top: 14px; }
/* Prose — long-form content (privacy, terms) */
.prose-wrap { background: #fff; border-top: 1px solid var(--border); }
.prose {
max-width: 1200px;
margin: 0 auto;
padding: 70px 24px 90px;
}
.prose > .disclaimer {
background: var(--gold-tint);
border: 1px dashed #e6cc85;
padding: 14px 18px;
border-radius: var(--radius);
font-size: .95rem;
color: #7a5e20;
margin-bottom: 36px;
}
.prose h2 {
font-size: 1.4rem;
margin-top: 2.2em;
margin-bottom: 0.5em;
padding-top: 1.6em;
border-top: 1px solid var(--border);
letter-spacing: -0.01em;
}
.prose h2:first-of-type { margin-top: 1em; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.08rem; margin-top: 1.6em; margin-bottom: 0.3em; }
.prose p, .prose li { font-size: 1.04rem; line-height: 1.75; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0.35em 0; }
.prose strong { color: var(--ink); }
.prose a { color: var(--green-dark); font-weight: 600; }
.prose blockquote {
margin: 1.5em 0;
padding: 14px 22px;
border-left: 3px solid var(--green);
background: var(--green-tint);
color: var(--ink-soft);
border-radius: 0 var(--radius) var(--radius) 0;
}
/* Auth card — login, forgot, reset, 2FA verify, recovery-login, account-deleted */
.auth-shell {
min-height: 72vh;
display: grid;
place-items: center;
padding: 48px 20px;
background: var(--bg-warm);
}
.auth-card-verify{
max-width: var(--max) !important;
}
.auth-card {
width: 100%;
max-width: 460px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.auth-card-top {
position: relative;
padding: 30px 34px 26px;
color: #fff;
background:#047857;
}
.auth-brand-mark {
width: 44px; height: 44px;
margin: 0 0 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
display: grid; place-items: center;
color: #fff;
font-weight: 800;
font-size: 1.2rem;
}
.auth-card-top h1 {
color: #fff;
font-size: clamp(1.4rem, 2.3vw, 1.7rem);
margin: 0 0 6px;
letter-spacing: -0.02em;
text-align: left;
line-height: 1.2;
}
.auth-card-top .auth-sub {
color: rgba(255, 255, 255, 0.92);
margin: 0;
font-size: 1rem;
text-align: left;
line-height: 1.5;
}
.auth-card-body { padding: 26px 34px 10px; }
.auth-card-body form { margin: 0; }
.auth-card-body label {
display: block;
font-size: .92rem;
font-weight: 600;
color: #374151;
margin-bottom: 14px;
}
.auth-card-body input[type="text"],
.auth-card-body input[type="email"],
.auth-card-body input[type="password"] {
display: block;
width: 100%;
margin-top: 6px;
padding: 11px 13px;
font-size: 1rem;
color: #111;
border: 1.5px solid #d1d5db;
border-radius: 8px;
background: #fff;
transition: border-color .12s ease, box-shadow .12s ease;
}
.auth-card-body input:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px var(--green-tint);
}
.auth-card-body form button[type=submit] {
width: 100%;
padding: 12px 20px;
font-size: 1.05rem;
font-weight: 700;
margin-top: 4px;
}
.auth-between {
margin: -4px 0 16px;
text-align: right;
font-size: .88rem;
}
.auth-card .auth-foot {
margin: 0;
padding: 16px 34px 22px;
text-align: center;
font-size: .92rem;
color: var(--muted);
border-top: 1px solid var(--border);
background: #fafafa;
}
.auth-card .auth-foot a { font-weight: 600; }
.auth-code-input {
font-size: 1.5rem !important;
letter-spacing: 0.5em;
text-align: center;
font-variant-numeric: tabular-nums;
padding: 14px 12px !important;
}
.auth-code-input.auth-code-recovery {
letter-spacing: 0.18em;
font-size: 1.2rem !important;
}
/* Signup split — brand panel + form */
.signup-shell {
min-height: calc(100vh - 60px);
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
background: var(--bg);
}
@media (max-width: 960px) { .signup-shell { grid-template-columns: 1fr; } }
.signup-brand {
background:
radial-gradient(ellipse at 80% 30%, rgba(16,185,129,0.24) 0%, transparent 55%),
linear-gradient(160deg, #022c22 0%, #064e3b 55%, #065f46 100%);
color: #fff;
padding: 80px 52px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.signup-brand::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(500px 240px at 20% 90%, rgba(16,185,129,0.2) 0%, transparent 60%);
pointer-events: none;
}
.signup-brand > * { position: relative; z-index: 1; }
@media (max-width: 960px) { .signup-brand { padding: 56px 28px; } }
.signup-brand .eyebrow { color: #d4a14a; }
.signup-brand h1 {
color: #fff;
font-size: clamp(1.9rem, 3vw, 2.6rem);
letter-spacing: -0.025em;
margin-bottom: 14px;
line-height: 1.1;
}
.signup-brand-sub { color: rgba(255,255,255,0.86); font-size: 1.08rem; line-height: 1.6; max-width: 30em; }
.signup-perks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.signup-perks li { color: rgba(255,255,255,0.92); font-size: .98rem; padding-left: 28px; position: relative; }
.signup-perks li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 16px; height: 12px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
}
.signup-form-wrap {
padding: 60px 52px;
overflow-y: auto;
background: var(--bg-warm);
}
@media (max-width: 960px) { .signup-form-wrap { padding: 44px 24px; } }
.signup-form-inner {
max-width: 560px;
margin: 0 auto;
}
.signup-head { margin-bottom: 28px; }
.signup-head h2 {
margin: 0 0 4px;
font-size: clamp(1.75rem, 3vw, 2.1rem);
letter-spacing: -0.025em;
color: var(--ink);
}
.signup-intro { color: var(--muted); margin: 0; font-size: 1rem; }
/* Form sections — replaces