/* app/assets/stylesheets/admin.css
Minimal utility classes for the admin analytics view.
The dashboard uses Tailwind inline — these supplement the analytics page. */
/* ── Card ──────────────────────────────────────────────── */
.card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 1rem;
padding: 1.25rem 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
margin-bottom: 0;
}
.card-title {
font-size: .8125rem;
font-weight: 600;
color: #374151;
letter-spacing: .02em;
text-transform: uppercase;
margin-bottom: .75rem;
}
/* ── Stat card ─────────────────────────────────────────── */
.stat { }
.stat-label {
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: #6b7280;
margin-bottom: .375rem;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: #111827;
margin-bottom: .375rem;
}
.stat-meta {
font-size: .75rem;
color: #9ca3af;
}
.stat-chip {
display: inline-block;
font-size: .625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #6b7280;
background: #f3f4f6;
border-radius: .25rem;
padding: .125rem .375rem;
margin-top: .25rem;
}
/* ── KPI mini ──────────────────────────────────────────── */
.kpi-mini {
background: #f9fafb;
border-radius: .625rem;
padding: .75rem 1rem;
}
.kpi-label {
font-size: .6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: #9ca3af;
margin-bottom: .25rem;
}
.kpi-value {
font-size: 1.5rem;
font-weight: 700;
color: #111827;
line-height: 1.1;
}
/* ── Table ─────────────────────────────────────────────── */
.table {
width: 100%;
font-size: .8125rem;
border-collapse: collapse;
}
.table thead th {
text-align: left;
font-size: .6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: #9ca3af;
padding-bottom: .5rem;
border-bottom: 1px solid #f3f4f6;
}
.table thead th.text-right { text-align: right; }
.table tbody td {
padding: .4rem 0;
color: #374151;
border-bottom: 1px solid #f9fafb;
vertical-align: middle;
}
.table tbody td.text-right { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #f9fafb; }
/* ── Misc ──────────────────────────────────────────────── */
.divider { height: 1px; background: #f3f4f6; }
.progress { overflow: hidden; border-radius: 9999px; }
.bg-primary { background: #4f46e5; }
/* ── Sparkline container ───────────────────────────────── */
.sparkline {
width: 100%;
height: 64px;
color: #6366f1;
display: block;
}
.sparkline-ready svg { display: block; }
/* ── Truncate helpers ──────────────────────────────────── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
* admin2.css — 2.0 admin design system.
*
* Futuristic, minimalistic, dark. Inspired by flight-deck / trading-
* terminal UIs: deep ink background, translucent glass cards, electric
* cyan for primary data, monospace for numbers. Built to feel fast,
* dense, and expensive — like telemetry from a machine you trust.
*
* Design rules (enforced by convention, not code):
* – No bright-white backgrounds. Surface colors stay in the deep
* spectrum so numbers pop.
* – Numbers use JetBrains Mono. Labels use Inter.
* – Every acronym (ARPU, LCP, CLS, INP, AOV, etc.) carries a
* data-infotag with a short explanation. See helpers/admin_helper.rb.
* – Cards always have a 1-px border and a subtle inner glow.
* – Accent colors carry meaning:
* cyan → primary metric (revenue, users)
* emerald → positive delta (growth, conversions)
* magenta → alert / attention
* amber → warning / hold
* violet → AI / automation
* Never mix meanings across colors.
*/
:root {
/* Surfaces */
--ag-ink: #06070f; /* page background */
--ag-ink-2: #0a0c18; /* raised surface below cards */
--ag-card: rgba(20, 22, 38, 0.72);
--ag-card-solid: #141629;
--ag-line: rgba(255, 255, 255, 0.06);
--ag-line-2: rgba(255, 255, 255, 0.10);
/* Text */
--ag-text: #e6e9f2;
--ag-text-dim: #8a92a8;
--ag-text-muted: #5a6379;
/* Accents */
--ag-cyan: #00e0ff;
--ag-emerald: #00e39a;
--ag-magenta: #ff2f92;
--ag-amber: #ffb020;
--ag-violet: #a78bfa;
--ag-red: #ff5064;
--ag-cyan-glow: 0 0 24px rgba(0, 224, 255, 0.25);
--ag-emerald-glow: 0 0 20px rgba(0, 227, 154, 0.22);
--ag-magenta-glow: 0 0 22px rgba(255, 47, 146, 0.28);
--ag-radius: 12px;
--ag-radius-sm: 8px;
--ag-shadow: 0 1px 0 rgba(255,255,255,0.03) inset,
0 0 0 1px var(--ag-line),
0 10px 40px -20px rgba(0,0,0,0.5);
}
/* ────────────────────────────────────────────────────────────────────
* Base reset
* ──────────────────────────────────────────────────────────────────── */
.ag2-app {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(0, 224, 255, 0.07), transparent 60%),
radial-gradient(1000px 500px at 90% 10%, rgba(167, 139, 250, 0.07), transparent 60%),
linear-gradient(180deg, var(--ag-ink) 0%, #04050a 100%);
color: var(--ag-text);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-feature-settings: "ss01", "cv11";
min-height: 100vh;
letter-spacing: -0.005em;
}
.ag2-mono {
font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
font-feature-settings: "tnum", "zero";
letter-spacing: -0.02em;
}
/* ────────────────────────────────────────────────────────────────────
* Top navigation
* ──────────────────────────────────────────────────────────────────── */
.ag2-nav {
position: sticky;
top: 0;
z-index: 40;
background: rgba(6, 7, 15, 0.72);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--ag-line);
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.ag2-nav__brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--ag-text);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
}
.ag2-nav__brand-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ag-cyan);
box-shadow: var(--ag-cyan-glow);
animation: ag2-pulse 2.4s ease-in-out infinite;
}
@keyframes ag2-pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.88); }
}
.ag2-nav__links {
display: flex;
gap: 2px;
flex: 1;
justify-content: center;
}
.ag2-nav__link {
color: var(--ag-text-dim);
padding: 7px 12px;
border-radius: var(--ag-radius-sm);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: color .15s ease, background-color .15s ease;
}
.ag2-nav__link:hover { color: var(--ag-text); background: rgba(255,255,255,0.03); }
.ag2-nav__link--active {
color: var(--ag-text);
background: rgba(0, 224, 255, 0.08);
box-shadow: inset 0 0 0 1px rgba(0,224,255,0.18);
}
.ag2-nav__user {
display: flex;
align-items: center;
gap: 12px;
color: var(--ag-text-muted);
font-size: 12px;
}
.ag2-nav__exit {
color: var(--ag-text-dim);
text-decoration: none;
padding: 6px 10px;
border-radius: var(--ag-radius-sm);
border: 1px solid var(--ag-line-2);
transition: all .15s ease;
}
.ag2-nav__exit:hover { color: var(--ag-text); border-color: var(--ag-cyan); }
/* ────────────────────────────────────────────────────────────────────
* Page shell
* ──────────────────────────────────────────────────────────────────── */
.ag2-main {
max-width: 1600px;
margin: 0 auto;
padding: 28px 28px 80px;
}
.ag2-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
.ag2-page-header__title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
}
.ag2-page-header__eyebrow {
color: var(--ag-text-muted);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 6px;
}
.ag2-page-header__live {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ag-emerald);
background: rgba(0,227,154,0.08);
border: 1px solid rgba(0,227,154,0.25);
border-radius: 999px;
}
.ag2-page-header__live::before {
content: "";
width: 6px; height: 6px;
background: var(--ag-emerald);
border-radius: 50%;
box-shadow: var(--ag-emerald-glow);
animation: ag2-pulse 1.8s ease-in-out infinite;
}
/* ────────────────────────────────────────────────────────────────────
* Cards + layout grid
* ──────────────────────────────────────────────────────────────────── */
.ag2-card {
background: var(--ag-card);
border: 1px solid var(--ag-line);
border-radius: var(--ag-radius);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: var(--ag-shadow);
position: relative;
}
.ag2-card--alert {
border-color: rgba(255, 47, 146, 0.35);
box-shadow: var(--ag-shadow), var(--ag-magenta-glow);
}
.ag2-card--accent-cyan::before,
.ag2-card--accent-emerald::before,
.ag2-card--accent-magenta::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 40%);
}
.ag2-card__head {
padding: 16px 20px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--ag-line);
}
.ag2-card__title {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ag-text-dim);
}
.ag2-card__body { padding: 16px 20px 20px; }
.ag2-grid {
display: grid;
gap: 16px;
}
.ag2-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ag2-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag2-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag2-grid--2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) {
.ag2-grid-4, .ag2-grid-3, .ag2-grid--2-1 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.ag2-grid-4, .ag2-grid-3, .ag2-grid-2, .ag2-grid--2-1 { grid-template-columns: 1fr; }
}
/* ────────────────────────────────────────────────────────────────────
* KPI tiles (hero row)
* ──────────────────────────────────────────────────────────────────── */
.ag2-kpi {
padding: 18px 20px;
background: var(--ag-card);
border: 1px solid var(--ag-line);
border-radius: var(--ag-radius);
position: relative;
overflow: hidden;
}
.ag2-kpi::after {
content: "";
position: absolute;
top: -40%;
right: -20%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(0,224,255,0.08) 0%, transparent 60%);
filter: blur(10px);
pointer-events: none;
}
.ag2-kpi--emerald::after { background: radial-gradient(circle, rgba(0,227,154,0.08) 0%, transparent 60%); }
.ag2-kpi--magenta::after { background: radial-gradient(circle, rgba(255,47,146,0.08) 0%, transparent 60%); }
.ag2-kpi--violet::after { background: radial-gradient(circle, rgba(167,139,250,0.08) 0%, transparent 60%); }
.ag2-kpi__label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ag-text-dim);
margin-bottom: 8px;
}
.ag2-kpi__value {
font-size: 30px;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ag-text);
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
font-feature-settings: "tnum";
}
.ag2-kpi__sub {
margin-top: 8px;
font-size: 12px;
color: var(--ag-text-dim);
}
.ag2-kpi__delta {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
font-size: 11px;
border-radius: 999px;
border: 1px solid transparent;
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
.ag2-kpi__delta--up {
color: var(--ag-emerald);
background: rgba(0,227,154,0.08);
border-color: rgba(0,227,154,0.25);
}
.ag2-kpi__delta--down {
color: var(--ag-magenta);
background: rgba(255,47,146,0.08);
border-color: rgba(255,47,146,0.28);
}
.ag2-kpi__delta--flat {
color: var(--ag-text-dim);
background: rgba(255,255,255,0.04);
border-color: var(--ag-line-2);
}
/* ────────────────────────────────────────────────────────────────────
* Info tooltips — every acronym explained on hover
* ──────────────────────────────────────────────────────────────────── */
.ag2-info {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px; height: 14px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid var(--ag-line-2);
color: var(--ag-text-dim);
font-size: 10px;
font-weight: 600;
cursor: help;
transition: all .15s ease;
user-select: none;
}
.ag2-info:hover {
background: rgba(0,224,255,0.12);
border-color: rgba(0,224,255,0.4);
color: var(--ag-cyan);
}
.ag2-info__popover {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 260px;
padding: 12px 14px;
background: #0d0f1c;
border: 1px solid var(--ag-line-2);
border-radius: var(--ag-radius-sm);
box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,224,255,0.1);
font-size: 12px;
line-height: 1.55;
color: var(--ag-text);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s ease, visibility .15s ease;
z-index: 60;
text-align: left;
}
.ag2-info:hover .ag2-info__popover,
.ag2-info:focus .ag2-info__popover {
opacity: 1;
visibility: visible;
}
.ag2-info__popover strong {
color: var(--ag-cyan);
font-weight: 600;
display: block;
margin-bottom: 4px;
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 11px;
letter-spacing: 0.04em;
}
/* ────────────────────────────────────────────────────────────────────
* Data tables
* ──────────────────────────────────────────────────────────────────── */
.ag2-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.ag2-table th {
text-align: left;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ag-text-muted);
padding: 10px 14px;
border-bottom: 1px solid var(--ag-line);
background: rgba(255,255,255,0.01);
}
.ag2-table td {
padding: 12px 14px;
border-bottom: 1px solid var(--ag-line);
color: var(--ag-text);
vertical-align: middle;
}
.ag2-table tr:last-child td { border-bottom: none; }
.ag2-table tr:hover td { background: rgba(0, 224, 255, 0.035); }
.ag2-table__num {
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
font-feature-settings: "tnum";
text-align: right;
color: var(--ag-text);
}
/* ────────────────────────────────────────────────────────────────────
* Tiny sparklines (pure CSS + SVG embed)
* ──────────────────────────────────────────────────────────────────── */
.ag2-spark {
height: 28px;
width: 100%;
margin-top: 10px;
opacity: 0.85;
}
.ag2-spark path { fill: none; stroke: var(--ag-cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ag2-spark--emerald path { stroke: var(--ag-emerald); }
.ag2-spark--magenta path { stroke: var(--ag-magenta); }
.ag2-spark--violet path { stroke: var(--ag-violet); }
/* ────────────────────────────────────────────────────────────────────
* Funnel bars (wizard drop-off)
* ──────────────────────────────────────────────────────────────────── */
.ag2-funnel__row {
display: grid;
grid-template-columns: 140px 1fr 80px 60px;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 13px;
border-bottom: 1px dashed var(--ag-line);
}
.ag2-funnel__row:last-child { border-bottom: none; }
.ag2-funnel__label { color: var(--ag-text-dim); text-transform: capitalize; }
.ag2-funnel__track {
height: 8px;
background: rgba(255,255,255,0.04);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.ag2-funnel__fill {
position: absolute;
inset: 0;
width: 0;
background: linear-gradient(90deg, var(--ag-cyan), var(--ag-violet));
border-radius: inherit;
transition: width .5s ease;
}
.ag2-funnel__fill--warn { background: linear-gradient(90deg, var(--ag-amber), var(--ag-magenta)); }
.ag2-funnel__count {
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
font-feature-settings: "tnum";
text-align: right;
color: var(--ag-text);
}
.ag2-funnel__drop {
font-size: 11px;
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
text-align: right;
color: var(--ag-magenta);
}
.ag2-funnel__drop--good { color: var(--ag-emerald); }
/* ────────────────────────────────────────────────────────────────────
* Live sessions / timeline panel
* ──────────────────────────────────────────────────────────────────── */
.ag2-session {
padding: 10px 14px;
border-bottom: 1px solid var(--ag-line);
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
}
.ag2-session:last-child { border-bottom: none; }
.ag2-session__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ag-emerald);
box-shadow: var(--ag-emerald-glow);
flex-shrink: 0;
}
.ag2-session__dot--idle { background: var(--ag-text-muted); box-shadow: none; }
.ag2-session__meta { flex: 1; min-width: 0; }
.ag2-session__path {
color: var(--ag-text-dim);
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ag2-session__tag {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ag-text-muted);
}
/* ────────────────────────────────────────────────────────────────────
* Flash messages
* ──────────────────────────────────────────────────────────────────── */
.ag2-flash {
margin: 0 0 20px;
padding: 12px 16px;
border-radius: var(--ag-radius-sm);
font-size: 13px;
font-weight: 500;
}
.ag2-flash--notice { background: rgba(0,227,154,0.08); border: 1px solid rgba(0,227,154,0.3); color: var(--ag-emerald); }
.ag2-flash--alert { background: rgba(255,47,146,0.08); border: 1px solid rgba(255,47,146,0.3); color: var(--ag-magenta); }
/* ────────────────────────────────────────────────────────────────────
* Utility classes
* ──────────────────────────────────────────────────────────────────── */
.ag2-muted { color: var(--ag-text-muted); }
.ag2-dim { color: var(--ag-text-dim); }
.ag2-right { text-align: right; }
.ag2-mt-sm { margin-top: 8px; }
.ag2-mt-md { margin-top: 20px; }
.ag2-mt-lg { margin-top: 32px; }
.ag2-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
font-size: 11px;
border-radius: 999px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--ag-line-2);
color: var(--ag-text-dim);
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
.ag2-pill--good { color: var(--ag-emerald); background: rgba(0,227,154,0.08); border-color: rgba(0,227,154,0.3); }
.ag2-pill--warn { color: var(--ag-amber); background: rgba(255,176,32,0.08); border-color: rgba(255,176,32,0.3); }
.ag2-pill--bad { color: var(--ag-magenta); background: rgba(255,47,146,0.08); border-color: rgba(255,47,146,0.3); }
.ag2-pill--violet { color: var(--ag-violet); background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.3); }
.ag2-pill--cyan { color: var(--ag-cyan); background: rgba(0,224,255,0.08); border-color: rgba(0,224,255,0.3); }
.ag2-empty {
text-align: center;
padding: 32px;
color: var(--ag-text-muted);
font-size: 13px;
}
.ag2-link { color: var(--ag-cyan); text-decoration: none; }
.ag2-link:hover { text-decoration: underline; }
/* ────────────────────────────────────────────────────────────────────
* Form controls (search boxes, buttons, filters)
* ──────────────────────────────────────────────────────────────────── */
.ag2-search { display: flex; gap: 8px; align-items: center; }
.ag2-input {
padding: 8px 12px;
font-size: 13px;
background: rgba(255,255,255,0.04);
color: var(--ag-text);
border: 1px solid var(--ag-line-2);
border-radius: 8px;
width: 280px;
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
.ag2-input:focus {
outline: none;
border-color: var(--ag-cyan);
box-shadow: 0 0 0 2px rgba(0,224,255,0.2);
}
.ag2-input::placeholder { color: var(--ag-text-muted); }
.ag2-btn {
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
background: rgba(0,224,255,0.12);
color: var(--ag-cyan);
border: 1px solid rgba(0,224,255,0.3);
border-radius: 8px;
cursor: pointer;
transition: all .15s ease;
}
.ag2-btn:hover { background: rgba(0,224,255,0.2); }
.ag2-btn--ghost {
background: rgba(255,255,255,0.04);
color: var(--ag-text-dim);
border-color: var(--ag-line-2);
}
.ag2-btn--ghost:hover { color: var(--ag-text); border-color: var(--ag-cyan); }
.ag2-select {
padding: 8px 12px;
font-size: 13px;
background: rgba(255,255,255,0.04);
color: var(--ag-text);
border: 1px solid var(--ag-line-2);
border-radius: 8px;
font-family: inherit;
}
/* Pagy pagination styled to blend with the admin theme */
.pagy-nav { display: flex; gap: 4px; font-size: 13px; align-items: center; }
.pagy-nav a,
.pagy-nav .page.current,
.pagy-nav .disabled {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; height: 32px; padding: 0 8px;
background: rgba(255,255,255,0.04); color: var(--ag-text-dim);
border: 1px solid var(--ag-line-2); border-radius: 6px;
text-decoration: none;
font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
.pagy-nav a:hover { color: var(--ag-cyan); border-color: var(--ag-cyan); }
.pagy-nav .page.current { color: var(--ag-cyan); background: rgba(0,224,255,0.08); border-color: rgba(0,224,255,0.3); }
.pagy-nav .disabled { opacity: 0.4; }
/* ========================================================================
* Job board — pure CSS, no Tailwind. Class-driven (no inline styles in
* views). Mounts on the marketing shell so it inherits the brand tokens.
* Loaded via Sprockets `require_tree .` from application.css.
*
* Naming:
* .jb-* — public job board (browse, detail, share)
* .empl-* — employer-side (sales, dashboard, wizard)
* .jb-md-* — markdown-rendered JD body
*
* Theming:
* Each listing card receives a `--jb-accent` CSS custom property,
* seeded from the JobPosting.theme_palette_slug (or hashed off
* company_name). Hover states + featured edge-bar + chip color all
* reference var(--jb-accent), so accent swaps without re-render.
* ======================================================================== */
.jb-shell { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }
/* ── Hero ─────────────────────────────────────────────────────────── */
.jb-hero { padding: 32px 0 24px; border-bottom: 1px solid #e2e8f0; margin-bottom: 28px; }
.jb-hero__title { font-size: 32px; font-weight: 800; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.5px; }
.jb-hero__sub { font-size: 15px; color: #475569; margin: 0 0 16px; line-height: 1.5; max-width: 720px; }
.jb-hero__counts { display: flex; gap: 18px; font-size: 13px; color: #64748b; flex-wrap: wrap; }
.jb-hero__count strong { color: #0f172a; font-size: 18px; font-weight: 800; }
.jb-back { color: #4338ca; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.jb-back:hover { text-decoration: underline; }
/* ── Filter toolbar ───────────────────────────────────────────────── */
.jb-toolbar {
display: grid; gap: 12px;
padding: 16px 18px; background: #f8fafc; border: 1px solid #e2e8f0;
border-radius: 14px; margin-bottom: 22px;
}
@media (min-width: 1024px) {
/* Sticky on desktop scroll: the filter row floats below the header. */
.jb-toolbar--sticky {
position: sticky; top: 12px; z-index: 5;
background: rgba(248, 250, 252, 0.96);
backdrop-filter: blur(8px);
}
}
.jb-toolbar__row {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.jb-toolbar__search {
flex: 1; min-width: 240px; padding: 11px 14px; border-radius: 9px;
border: 1.5px solid #cbd5e1; font-size: 14px; outline: none;
transition: border-color 0.12s, box-shadow 0.12s; background: #fff;
}
.jb-toolbar__search:focus { border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.12); }
.jb-toolbar__btn {
padding: 10px 18px; border-radius: 9px; background: #4338ca; color: #fff;
font-weight: 700; text-decoration: none; border: none; cursor: pointer;
font-size: 14px; transition: background 0.12s, transform 0.12s;
}
.jb-toolbar__btn:hover { background: #3730a3; transform: translateY(-1px); }
.jb-toolbar__btn--ghost { background: #fff; color: #1e293b; border: 1px solid #cbd5e1; }
.jb-toolbar__btn--ghost:hover { background: #f1f5f9; }
.jb-toolbar__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.jb-toolbar__pill {
padding: 6px 12px; border-radius: 999px; background: #fff;
border: 1px solid #cbd5e1; color: #475569; text-decoration: none;
font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.jb-toolbar__pill--active { background: #4338ca; color: #fff; border-color: #4338ca; }
.jb-toolbar__field {
display: flex; flex-direction: column; gap: 4px; min-width: 130px;
}
.jb-toolbar__field label {
font-size: 11px; color: #64748b; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
}
.jb-toolbar__field input,
.jb-toolbar__field select {
padding: 9px 12px; border-radius: 8px; border: 1px solid #cbd5e1;
font-size: 13px; background: #fff; outline: none;
}
.jb-toolbar__counts {
font-size: 12px; color: #64748b; margin-left: auto; flex-shrink: 0;
}
.jb-toolbar__counts strong { color: #0f172a; }
/* ── Card grid ────────────────────────────────────────────────────── */
.jb-grid {
display: grid; gap: 14px;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.jb-grid { grid-template-columns: 1fr 1fr; }
}
.jb-list { display: flex; flex-direction: column; gap: 12px; }
.jb-empty {
padding: 60px 24px; text-align: center; color: #64748b;
border: 2px dashed #cbd5e1; border-radius: 14px;
}
.jb-empty__title { font-size: 18px; color: #0f172a; margin: 0 0 8px; font-weight: 700; }
.jb-empty p { margin: 6px 0; font-size: 14px; }
.jb-card {
--jb-accent: #4338ca;
--jb-accent-soft: #e0e7ff;
display: grid; grid-template-columns: 56px 1fr auto; gap: 16px;
padding: 18px 20px; border: 1px solid #e2e8f0; border-radius: 14px;
background: #fff; text-decoration: none; color: inherit;
transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
position: relative; overflow: hidden;
}
.jb-card:hover {
border-color: var(--jb-accent);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.jb-card--featured {
padding-left: 24px;
background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
border-color: #f59e0b;
}
.jb-card--featured::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
}
.jb-card__main { min-width: 0; }
.jb-card__title { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 4px; line-height: 1.3; }
.jb-card__company { font-size: 14px; color: #475569; margin: 0 0 8px; }
.jb-card__company__age { color: #94a3b8; font-weight: 500; }
.jb-card__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #64748b; }
.jb-card__cta {
font-size: 12.5px; font-weight: 700; color: var(--jb-accent);
margin-top: 10px; display: inline-flex; align-items: center; gap: 4px;
opacity: 0; transition: opacity 0.18s;
}
.jb-card:hover .jb-card__cta { opacity: 1; }
.jb-card__chip {
padding: 3px 9px; border-radius: 999px;
background: var(--jb-accent-soft); color: var(--jb-accent);
font-weight: 700; font-size: 11.5px;
display: inline-flex; align-items: center; gap: 4px;
}
.jb-card__chip--remote { background: #ecfdf5; color: #047857; }
.jb-card__chip--featured { background: #fef3c7; color: #92400e; }
.jb-card__chip--external { background: #f1f5f9; color: #475569; }
.jb-card__chip--country { background: #f0f9ff; color: #075985; }
.jb-card__right {
display: flex; flex-direction: column; align-items: flex-end;
justify-content: space-between; gap: 6px; flex-shrink: 0;
}
.jb-card__salary { font-weight: 800; color: #0f172a; font-size: 14px; white-space: nowrap; }
.jb-card__age { font-size: 12px; color: #64748b; white-space: nowrap; }
/* ── Logo + initials fallback ─────────────────────────────────────── */
.jb-logo {
border-radius: 14px;
background: #f1f5f9;
display: flex; align-items: center; justify-content: center;
font-weight: 800; color: #475569;
flex: 0 0 auto;
background-size: cover; background-position: center;
}
.jb-logo--sm { width: 56px; height: 56px; font-size: 20px; border-radius: 12px; }
.jb-logo--md { width: 88px; height: 88px; font-size: 32px; border-radius: 16px; }
.jb-logo--lg { width: 120px; height: 120px; font-size: 44px; border-radius: 20px; }
.jb-logo--has-image { background-color: #ffffff; }
.jb-logo--initials {
background: var(--jb-fallback-bg, #4338ca);
color: var(--jb-fallback-text, #ffffff);
}
/* ── Detail page ──────────────────────────────────────────────────── */
.jb-detail { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; margin-top: 16px; }
@media (max-width: 900px) { .jb-detail { grid-template-columns: 1fr; } }
.jb-detail__head {
display: flex; gap: 22px; padding: 26px 28px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
margin-bottom: 18px;
}
.jb-detail__head__main { flex: 1; min-width: 0; }
.jb-detail__title { font-size: 28px; font-weight: 800; color: #0f172a; margin: 0 0 4px; line-height: 1.2; letter-spacing: -0.3px; }
.jb-detail__company { font-size: 16px; color: #475569; margin: 0 0 12px; }
.jb-detail__company a { color: #4338ca; text-decoration: none; }
.jb-detail__company a:hover { text-decoration: underline; }
.jb-detail__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-detail__banner {
width: 100%; max-height: 220px; object-fit: cover;
border-radius: 16px; margin-bottom: 18px;
border: 1px solid #e2e8f0;
}
.jb-detail__body {
padding: 28px 32px; background: #fff; border: 1px solid #e2e8f0;
border-radius: 16px; line-height: 1.65; font-size: 15px; color: #1f2937;
}
.jb-detail__body h2, .jb-detail__body h3 { color: #0f172a; margin-top: 22px; }
.jb-detail__body ul { margin: 6px 0 14px; padding-left: 22px; }
.jb-detail__body p:first-child { margin-top: 0; }
/* ── Markdown body ────────────────────────────────────────────────── */
.jb-md-h2 { font-size: 18px; font-weight: 800; color: #0f172a; margin: 22px 0 8px; letter-spacing: -0.2px; }
.jb-md-h3 { font-size: 15px; font-weight: 700; color: #1e293b; margin: 18px 0 6px; }
.jb-md-ul { margin: 6px 0 14px; padding-left: 22px; }
.jb-md-ul li { margin: 4px 0; }
/* ── Sidebar / CTA ────────────────────────────────────────────────── */
.jb-side {
position: sticky; top: 24px;
display: flex; flex-direction: column; gap: 16px;
}
.jb-cta {
padding: 24px 24px 20px;
background: linear-gradient(135deg, var(--jb-accent, #4338ca) 0%, #1e1b4b 100%);
color: #fff; border-radius: 16px;
box-shadow: 0 12px 32px rgba(67, 56, 202, 0.18);
}
.jb-cta__price {
display: inline-block; padding: 4px 10px; border-radius: 999px;
background: rgba(255, 255, 255, 0.18); font-size: 12px; font-weight: 700;
margin-bottom: 8px;
}
.jb-cta__title { font-size: 18px; font-weight: 800; margin: 0 0 8px; line-height: 1.3; }
.jb-cta__sub { font-size: 13.5px; color: #c7d2fe; margin: 0 0 16px; line-height: 1.45; }
.jb-cta__btn {
display: block; padding: 14px 16px; border-radius: 10px;
background: #ffffff; color: #1e1b4b; font-weight: 800;
text-decoration: none; text-align: center; font-size: 14px;
margin-bottom: 8px; border: none; cursor: pointer;
transition: transform 0.12s;
}
.jb-cta__btn:hover { transform: translateY(-1px); }
.jb-cta__btn--secondary {
background: rgba(255,255,255,0.12); color: #fff;
border: 1px solid rgba(255,255,255,0.28);
}
.jb-cta__btn--secondary:hover { background: rgba(255,255,255,0.18); }
.jb-side__card {
padding: 20px 22px; background: #fff; border: 1px solid #e2e8f0;
border-radius: 14px;
}
.jb-side__card h3 {
font-size: 11.5px; text-transform: uppercase;
letter-spacing: 0.06em; color: #64748b; margin: 0 0 10px; font-weight: 700;
}
.jb-side__row {
display: flex; justify-content: space-between; padding: 7px 0;
border-bottom: 1px solid #f1f5f9; font-size: 13px; gap: 12px;
}
.jb-side__row:last-child { border-bottom: 0; }
.jb-side__row__k { color: #64748b; flex-shrink: 0; }
.jb-side__row__v { color: #0f172a; font-weight: 600; text-align: right; }
.jb-side__report {
font-size: 12px; color: #94a3b8; text-align: center;
margin-top: 6px;
}
.jb-side__report a { color: #64748b; text-decoration: underline; }
/* ── Pagination ───────────────────────────────────────────────────── */
.jb-pager {
display: flex; justify-content: space-between; align-items: center;
margin-top: 28px; gap: 12px;
}
.jb-pager__page-info { font-size: 13px; color: #64748b; }
/* ── Employer landing pricing ─────────────────────────────────────── */
.empl-hero {
padding: 60px 28px; text-align: center;
background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%);
border: 1px solid #e2e8f0; border-radius: 18px; margin-bottom: 28px;
}
.empl-hero__title { font-size: 36px; font-weight: 800; color: #0f172a; margin: 0 0 12px; letter-spacing: -0.5px; }
.empl-hero__sub { font-size: 16px; color: #475569; max-width: 640px; margin: 0 auto 24px; line-height: 1.5; }
.empl-hero__cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.empl-tiers {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px; margin-bottom: 28px;
}
.empl-tier {
padding: 24px 22px; border: 1.5px solid #e2e8f0; border-radius: 16px;
background: #fff; display: flex; flex-direction: column; gap: 10px;
transition: border-color 0.12s, box-shadow 0.12s;
cursor: pointer;
position: relative;
}
.empl-tier--featured {
border-color: #f59e0b;
background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
}
.empl-tier--featured::after {
content: "Most popular";
position: absolute; top: -10px; right: 16px;
padding: 3px 10px; background: #f59e0b; color: #fff;
font-size: 11px; font-weight: 800; border-radius: 999px;
letter-spacing: 0.04em; text-transform: uppercase;
}
.empl-tier:hover { border-color: #4338ca; box-shadow: 0 8px 24px rgba(67, 56, 202, 0.08); }
.empl-tier--selected { border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15); }
.empl-tier__name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #4338ca; }
.empl-tier__price { font-size: 30px; font-weight: 800; color: #0f172a; line-height: 1; }
.empl-tier__price small { font-size: 13px; color: #64748b; font-weight: 500; }
.empl-tier__list { font-size: 13px; color: #475569; margin: 6px 0 0; padding: 0 0 0 18px; line-height: 1.55; }
.empl-tier__list li { margin: 3px 0; }
/* ── Dashboard ────────────────────────────────────────────────────── */
.empl-dash { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
@media (max-width: 760px) { .empl-dash { grid-template-columns: 1fr; } }
.empl-dash__side { display: flex; flex-direction: column; gap: 8px; }
.empl-dash__counts {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
padding: 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.empl-dash__count { padding: 8px; }
.empl-dash__count__n { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; }
.empl-dash__count__l { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
/* ── Employer wizard (5-step) ─────────────────────────────────────── */
.empl-wizard {
display: grid; grid-template-columns: 1fr 380px; gap: 28px;
align-items: start; margin-top: 18px;
}
@media (max-width: 900px) { .empl-wizard { grid-template-columns: 1fr; } }
.empl-wizard__steps {
display: flex; gap: 4px; margin: 0 0 22px;
padding: 8px; background: #f1f5f9; border-radius: 14px;
font-size: 12px; font-weight: 700; color: #64748b;
}
.empl-wizard__step {
flex: 1; padding: 8px 6px; text-align: center;
border-radius: 10px; cursor: default; min-width: 0;
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.empl-wizard__step--done { color: #4338ca; }
.empl-wizard__step--current { background: #fff; color: #1e1b4b; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); }
.empl-wiz-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
padding: 28px 28px;
}
.empl-wiz-card + .empl-wiz-card { margin-top: 16px; }
.empl-wiz-card__title {
font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
color: #4338ca; margin: 0 0 6px; font-weight: 800;
}
.empl-wiz-card__heading {
font-size: 24px; font-weight: 800; color: #0f172a; margin: 0 0 18px; letter-spacing: -0.3px;
}
.empl-wiz-card__sub { color: #64748b; font-size: 14px; margin: 0 0 18px; }
.empl-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.empl-field > label, .empl-field__label {
font-size: 12px; color: #475569; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
}
.empl-field input[type="text"], .empl-field input[type="url"],
.empl-field input[type="email"], .empl-field input[type="number"],
.empl-field select, .empl-field textarea {
padding: 11px 14px; border-radius: 9px; border: 1.5px solid #cbd5e1;
font-size: 14px; outline: none; background: #fff;
transition: border-color 0.12s, box-shadow 0.12s;
font-family: inherit;
}
.empl-field input:focus, .empl-field select:focus, .empl-field textarea:focus {
border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
}
.empl-field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.empl-field--hint { font-size: 12px; color: #64748b; margin-top: 2px; }
.empl-field__row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.empl-field__row--3 {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
.empl-checkbox {
display: flex; align-items: center; gap: 8px;
font-size: 14px; color: #1e293b; cursor: pointer; margin-top: 4px;
}
/* AI assist sidebar on description step */
.empl-ai-assist {
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border: 1px solid #c4b5fd; border-radius: 16px; padding: 22px 22px;
}
.empl-ai-assist__title { font-size: 16px; color: #4c1d95; font-weight: 800; margin: 0 0 6px; }
.empl-ai-assist__sub { font-size: 13px; color: #5b21b6; margin: 0 0 14px; line-height: 1.5; }
.empl-ai-assist__row {
display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
}
.empl-ai-assist__row input {
flex: 1; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #c4b5fd;
font-size: 13px; background: #fff;
}
.empl-ai-assist__btn {
display: block; width: 100%; padding: 12px 16px; border-radius: 10px;
background: #6d28d9; color: #fff; font-weight: 800; font-size: 14px;
border: none; cursor: pointer; margin-top: 8px;
transition: background 0.12s;
}
.empl-ai-assist__btn:hover { background: #5b21b6; }
.empl-ai-assist__btn:disabled { background: #a78bfa; cursor: wait; }
/* Tier picker cards on branding step */
.empl-tier-cards {
display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px;
}
.empl-tier-cards label {
display: block; padding: 18px 20px; border: 1.5px solid #e2e8f0;
border-radius: 14px; cursor: pointer; background: #fff;
transition: border-color 0.12s, box-shadow 0.12s;
}
.empl-tier-cards label:hover { border-color: #4338ca; }
.empl-tier-cards input[type="radio"] { margin-right: 10px; }
.empl-tier-cards input[type="radio"]:checked + .empl-tier-cards__inner {
/* placeholder; we handle selected via :has() below */
}
.empl-tier-cards label:has(input:checked) {
border-color: #4338ca;
box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15);
background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%);
}
.empl-tier-cards__name { font-weight: 800; color: #0f172a; font-size: 16px; }
.empl-tier-cards__price { float: right; color: #4338ca; font-weight: 800; }
.empl-tier-cards__blurb { font-size: 13px; color: #475569; margin-top: 6px; line-height: 1.5; }
/* Live preview card on review step */
.empl-preview {
padding: 22px 22px; background: #fff; border: 1.5px solid #e2e8f0;
border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.empl-preview__label {
font-size: 11.5px; color: #64748b; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px;
}
/* Logo upload on branding step */
.empl-logo-upload {
display: flex; align-items: center; gap: 16px;
padding: 16px; background: #f8fafc; border: 1.5px dashed #cbd5e1;
border-radius: 12px;
}
.empl-logo-upload__preview {
width: 88px; height: 88px; border-radius: 16px;
background: #f1f5f9; display: flex; align-items: center; justify-content: center;
background-size: cover; background-position: center;
flex-shrink: 0; font-weight: 800; color: #475569; font-size: 32px;
}
.empl-error {
padding: 12px 16px; background: #fef2f2; color: #991b1b;
border: 1px solid #fecaca; border-radius: 10px; font-size: 13px;
margin: 0 0 18px;
}
/* ── Responsive — sm/md/desktop polish ────────────────────────────── */
@media (max-width: 900px) {
.jb-shell { padding: 22px 16px 56px; }
.jb-hero { padding: 22px 0 18px; }
.jb-hero__title { font-size: 26px; }
.jb-hero__sub { font-size: 14px; }
.jb-detail__title { font-size: 22px; }
.jb-detail__head { padding: 20px 18px; gap: 14px; flex-direction: column; }
.jb-detail__body { padding: 22px 22px; }
.jb-side { position: static; }
.jb-cta { padding: 20px 20px 16px; }
.empl-hero { padding: 40px 18px; }
.empl-hero__title { font-size: 28px; }
.empl-wiz-card { padding: 22px 22px; }
}
@media (max-width: 600px) {
.jb-shell { padding: 16px 12px 48px; }
.jb-toolbar { padding: 12px; gap: 8px; }
.jb-toolbar__search { min-width: 0; flex: 1 1 100%; }
.jb-toolbar__btn { width: 100%; padding: 12px 14px; }
.jb-toolbar__pills { flex: 1 1 100%; }
.jb-toolbar__field { min-width: 0; flex: 1 1 calc(50% - 6px); }
.jb-card {
grid-template-columns: 48px 1fr;
gap: 12px;
padding: 14px 14px;
}
.jb-logo--sm { width: 48px; height: 48px; font-size: 17px; }
.jb-card__title { font-size: 15.5px; }
.jb-card__company { font-size: 13.5px; }
.jb-card__right {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 4px;
}
.jb-card__chip { padding: 3px 8px; font-size: 11.5px; }
.jb-detail__head { flex-direction: column; gap: 10px; padding: 16px 14px; }
.jb-logo--md { width: 64px; height: 64px; font-size: 24px; border-radius: 14px; }
.jb-detail__title { font-size: 20px; }
.jb-detail__body { padding: 18px 16px; font-size: 14px; }
.jb-hero__title { font-size: 22px; }
.jb-hero__counts { gap: 12px; flex-wrap: wrap; }
.empl-hero { padding: 28px 14px; }
.empl-hero__title { font-size: 22px; }
.empl-hero__sub { font-size: 14px; }
.empl-tiers { grid-template-columns: 1fr; gap: 10px; }
.empl-tier { padding: 18px 18px; }
.empl-tier__price { font-size: 26px; }
.empl-dash__counts { grid-template-columns: repeat(2, 1fr); }
.empl-field__row, .empl-field__row--3 { grid-template-columns: 1fr; }
}
/* ── v2.1 Apply mode picker (employer wizard step 3) ────────────── */
.apply-mode-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-top: 4px;
}
@media (max-width: 720px) {
.apply-mode-row { grid-template-columns: 1fr; }
}
.apply-mode-card {
position: relative; display: block; cursor: pointer;
padding: 14px 14px 12px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.apply-mode-card:hover { border-color: #94a3b8; }
.apply-mode-card.is-active {
border-color: #1e3a8a; box-shadow: 0 0 0 3px rgba(30,58,138,0.08);
}
.apply-mode-card input[type="radio"] {
position: absolute; top: 12px; right: 12px; accent-color: #1e3a8a;
}
.apply-mode-card__head {
display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
padding-right: 24px;
}
.apply-mode-card__title { font-weight: 700; font-size: 14px; color: #0f172a; }
.apply-mode-card__badge {
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: #475569;
padding: 2px 6px; background: #f1f5f9; border-radius: 999px;
}
.apply-mode-card.is-active .apply-mode-card__badge {
background: #dbeafe; color: #1e3a8a;
}
.apply-mode-card__desc {
font-size: 12.5px; line-height: 1.45; color: #475569;
}
/* ── v2.1 Easy Apply chip + apply CTA on /jobs/:slug ───────────── */
.jb-card__chip--easy {
background: #ecfdf5; color: #047857; border-color: #a7f3d0;
font-weight: 700;
}
.jb-card__chip--mailto {
background: #f3f4f6; color: #475569; border-color: #cbd5e1;
}
.jb-cta__btn--apply {
display: block; padding: 12px 16px; margin-top: 10px;
background: var(--jb-accent, #1e3a8a); color: #fff;
border: none; border-radius: 8px; font-weight: 700; font-size: 14px;
text-decoration: none; text-align: center; transition: filter 0.12s;
}
.jb-cta__btn--apply:hover { filter: brightness(1.10); }
.jb-cta__apply-hint {
margin: 8px 0 0; font-size: 11.5px; color: #64748b; text-align: center;
line-height: 1.4;
}
/* ========================================================================
* Wave 3 — Employer applications inbox + candidate apply tracker.
* Pure CSS. Class-driven. No Tailwind, no inline styles in views (the
* one-off inline style on the dashboard inbox card is intentional —
* it lives on a single 12-line block we don't want to extract).
* ======================================================================== */
/* ── Inbox header ───────────────────────────────────────────────── */
.empl-inbox-header {
display: flex; justify-content: space-between; align-items: flex-end;
flex-wrap: wrap; gap: 16px; margin-bottom: 18px;
}
.empl-inbox-title {
font-size: 28px; font-weight: 800; color: #0f172a;
margin: 6px 0 4px; letter-spacing: -0.4px;
}
.empl-inbox-sub {
color: #64748b; font-size: 13.5px; margin: 0;
}
.empl-inbox-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.empl-inbox-banner {
padding: 14px 16px; border-radius: 12px; margin-bottom: 16px;
font-size: 13.5px; line-height: 1.5;
}
.empl-inbox-banner--warn {
background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d;
}
.empl-inbox-banner a { color: #991b1b; text-decoration: underline; font-weight: 700; }
/* ── Tabs ───────────────────────────────────────────────────────── */
.empl-inbox-tabs {
display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0 14px;
border-bottom: 1px solid #e2e8f0; padding-bottom: 6px;
}
.empl-inbox-tab {
padding: 8px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600; color: #475569;
text-decoration: none; background: #fff;
border: 1px solid transparent;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.empl-inbox-tab:hover { background: #f1f5f9; color: #1e293b; }
.empl-inbox-tab.is-active {
background: #eef2ff; color: #4338ca; border-color: #c7d2fe;
}
.empl-inbox-tab__n {
display: inline-block; margin-left: 6px; padding: 1px 7px;
background: rgba(99,102,241,0.12); color: #4338ca;
border-radius: 999px; font-size: 11px; font-weight: 800;
}
.empl-inbox-tab.is-active .empl-inbox-tab__n {
background: #4338ca; color: #fff;
}
/* ── Filter row ─────────────────────────────────────────────────── */
.empl-inbox-filter {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
margin-bottom: 14px;
}
.empl-inbox-filter__select {
padding: 10px 12px; border-radius: 9px; border: 1.5px solid #cbd5e1;
font-size: 13.5px; background: #fff; color: #1e293b;
min-width: 200px;
}
.empl-inbox-filter__clear {
font-size: 12.5px; color: #4338ca; text-decoration: underline;
}
/* ── Bulk-action bar ────────────────────────────────────────────── */
.empl-inbox-bulk {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px;
padding: 10px 12px; margin-bottom: 12px;
font-size: 13px; color: #475569;
}
.empl-inbox-bulk__select-all {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.empl-inbox-bulk__template {
flex: 1; min-width: 220px; padding: 9px 12px; border-radius: 8px;
border: 1px solid #cbd5e1; font-size: 13px; background: #fff;
}
.empl-inbox-bulk__btn {
padding: 9px 14px; border-radius: 8px; border: none; cursor: pointer;
background: #fef2f2; color: #991b1b; font-weight: 700; font-size: 13px;
border: 1px solid #fecaca;
}
.empl-inbox-bulk__btn:hover { background: #fee2e2; }
/* ── Row list ───────────────────────────────────────────────────── */
.empl-inbox-list {
list-style: none; padding: 0; margin: 0;
border: 1px solid #e2e8f0; border-radius: 14px; background: #fff;
overflow: hidden;
}
.empl-inbox-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px; align-items: center;
padding: 14px 16px; border-bottom: 1px solid #f1f5f9;
}
.empl-inbox-row:last-child { border-bottom: none; }
.empl-inbox-row:hover { background: #f8fafc; }
.empl-inbox-row--rejected,
.empl-inbox-row--withdrawn { opacity: 0.55; }
.empl-inbox-row__select { display: flex; align-items: center; justify-content: center; }
.empl-inbox-row__main { min-width: 0; }
.empl-inbox-row__head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
}
.empl-inbox-row__name {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
min-width: 0;
}
.empl-inbox-row__name-link {
font-weight: 700; color: #0f172a; text-decoration: none; font-size: 14.5px;
}
.empl-inbox-row__name-link:hover { color: #4338ca; text-decoration: underline; }
.empl-inbox-row__email {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px; color: #64748b;
letter-spacing: 0.02em;
}
.empl-inbox-row__sub {
display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: #64748b;
}
.empl-inbox-row__job { font-weight: 600; color: #475569; }
.empl-inbox-row__ats { color: #047857; }
.empl-inbox-row__time { color: #94a3b8; }
.empl-inbox-row__open {
font-size: 12.5px; font-weight: 700; color: #4338ca;
text-decoration: none; padding: 6px 10px; border-radius: 8px;
border: 1px solid #c7d2fe; background: #eef2ff;
}
.empl-inbox-row__open:hover { background: #c7d2fe; }
/* ── Status pills (color-coded by lifecycle) ───────────────────── */
.empl-inbox-pill {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
text-transform: uppercase; white-space: nowrap;
}
.empl-inbox-pill--pending,
.empl-inbox-pill--delivered { background: #eff6ff; color: #1e40af; }
.empl-inbox-pill--opened { background: #eef2ff; color: #4338ca; }
.empl-inbox-pill--replied { background: #ecfdf5; color: #047857; }
.empl-inbox-pill--bounced { background: #fef3c7; color: #92400e; }
.empl-inbox-pill--rejected { background: #fef2f2; color: #991b1b; }
.empl-inbox-pill--withdrawn { background: #f1f5f9; color: #64748b; }
/* ── Pagination ─────────────────────────────────────────────────── */
.empl-inbox-pagination { margin-top: 16px; text-align: center; }
.empl-inbox-pagination .pagy-nav { display: inline-flex; gap: 4px; }
.empl-inbox-pagination .pagy-nav .page a,
.empl-inbox-pagination .pagy-nav .page.active span,
.empl-inbox-pagination .pagy-nav .prev a,
.empl-inbox-pagination .pagy-nav .next a {
padding: 6px 12px; border-radius: 8px; border: 1px solid #e2e8f0;
text-decoration: none; color: #475569; font-size: 13px;
}
.empl-inbox-pagination .pagy-nav .page.active span {
background: #4338ca; color: #fff; border-color: #4338ca;
}
/* ── Empty state ────────────────────────────────────────────────── */
.empl-inbox-empty {
text-align: center; padding: 54px 24px;
border: 1.5px dashed #e2e8f0; border-radius: 14px;
background: #fafbff; color: #475569;
}
.empl-inbox-empty h2 { font-size: 18px; color: #0f172a; margin: 0 0 8px; }
.empl-inbox-empty p { margin: 0 auto; max-width: 440px; line-height: 1.5; }
/* ── Single-application detail page ────────────────────────────── */
.empl-app-detail {
display: grid; grid-template-columns: 1fr 280px; gap: 28px; margin-top: 14px;
}
@media (max-width: 880px) { .empl-app-detail { grid-template-columns: 1fr; } }
.empl-app-detail__main {
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
padding: 26px;
}
.empl-app-detail__header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.empl-app-detail__name {
font-size: 24px; font-weight: 800; color: #0f172a; margin: 0 0 4px;
}
.empl-app-detail__email {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px; color: #475569; margin: 0;
}
.empl-app-detail__section {
padding: 14px 0; border-top: 1px solid #f1f5f9;
}
.empl-app-detail__section:first-of-type { border-top: none; padding-top: 0; }
.empl-app-detail__h2 {
font-size: 13px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.06em; color: #475569; margin: 0 0 10px;
}
.empl-app-detail__meta {
list-style: none; padding: 0; margin: 8px 0 0;
display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: #475569;
}
.empl-app-detail__muted { color: #94a3b8; font-style: italic; }
.empl-app-detail__last-reply {
background: #f8fafc; border-left: 3px solid #4338ca;
padding: 12px 14px; border-radius: 0 8px 8px 0;
margin-bottom: 12px; font-size: 13.5px; color: #1e293b;
}
.empl-app-timeline {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 8px;
}
.empl-app-timeline li {
display: flex; gap: 12px; padding: 8px 12px; border-radius: 8px;
background: #f8fafc; opacity: 0.4; font-size: 13px;
}
.empl-app-timeline li.is-on { opacity: 1; background: #eef2ff; }
.empl-app-timeline li.is-on.is-bad { background: #fef2f2; }
.empl-app-timeline li.is-on.is-muted { background: #f1f5f9; }
.empl-app-timeline strong { font-weight: 700; color: #0f172a; min-width: 110px; }
.empl-app-timeline span { color: #64748b; }
.empl-app-screener {
display: grid; gap: 10px; margin: 0;
grid-template-columns: 1fr;
}
.empl-app-screener dt { font-weight: 700; color: #0f172a; font-size: 13.5px; }
.empl-app-screener dd { margin: 0 0 6px; color: #475569; font-size: 14px; }
.empl-app-reply__textarea {
width: 100%; padding: 12px 14px; border-radius: 9px;
border: 1.5px solid #cbd5e1; font-size: 14px; line-height: 1.55;
background: #fff; resize: vertical; min-height: 140px;
font-family: inherit;
}
.empl-app-reply__textarea:focus {
outline: none; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.12);
}
.empl-app-reply__signoff {
font-size: 12px; color: #94a3b8; margin: 6px 0 12px;
}
.empl-app-reject {
background: #fef2f2; border-radius: 12px; padding: 14px 16px;
margin-top: 14px;
}
.empl-app-reject__reason {
width: 100%; padding: 10px 12px; border-radius: 8px;
border: 1px solid #fecaca; background: #fff; font-size: 13px;
margin-bottom: 10px;
}
.empl-app-reject__btn {
padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer;
background: #991b1b; color: #fff; font-weight: 700; font-size: 13.5px;
}
.empl-app-reject__btn:hover { background: #7f1d1d; }
.empl-app-detail__side {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
padding: 18px 20px; align-self: start; font-size: 13px; color: #475569;
line-height: 1.5;
}
.empl-app-detail__side h3 {
font-size: 12px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.06em; color: #4338ca; margin: 0 0 10px;
}
.empl-app-detail__side ul { padding-left: 18px; margin: 0; }
.empl-app-detail__side li { margin-bottom: 8px; }
/* ========================================================================
* Candidate apply tracker — Kanban board.
* ======================================================================== */
.tracker-header {
display: flex; justify-content: space-between; align-items: flex-end;
flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.tracker-title {
font-size: 28px; font-weight: 800; color: #0f172a;
margin: 0 0 4px; letter-spacing: -0.4px;
}
.tracker-sub { font-size: 14px; color: #64748b; margin: 0; }
.tracker-empty {
text-align: center; padding: 56px 24px;
border: 1.5px dashed #e2e8f0; border-radius: 14px;
background: #fafbff; color: #475569;
}
.tracker-empty h2 { font-size: 20px; color: #0f172a; margin: 0 0 8px; }
.tracker-empty p { margin: 0 auto 16px; max-width: 460px; line-height: 1.5; }
.tracker-board {
display: grid; gap: 14px;
grid-template-columns: repeat(5, minmax(220px, 1fr));
overflow-x: auto;
padding-bottom: 6px;
}
@media (max-width: 1100px) {
.tracker-board { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}
@media (max-width: 760px) {
.tracker-board { grid-template-columns: 1fr; }
}
.tracker-col {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
padding: 12px; min-height: 200px;
}
.tracker-col__header {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.06em; padding: 6px 8px 10px;
border-bottom: 1px solid #e2e8f0; margin-bottom: 10px; color: #475569;
}
.tracker-col__header--sent { color: #1e40af; }
.tracker-col__header--replied { color: #047857; }
.tracker-col__header--interviewing { color: #b45309; }
.tracker-col__header--offer { color: #4338ca; }
.tracker-col__header--closed { color: #64748b; }
.tracker-col__count {
background: #fff; padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 800; color: inherit;
border: 1px solid #e2e8f0;
}
.tracker-col__empty {
font-size: 12.5px; color: #94a3b8; text-align: center;
padding: 20px 8px; font-style: italic;
}
.tracker-card {
background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
padding: 12px 14px; margin-bottom: 10px;
transition: box-shadow 0.12s, transform 0.12s;
}
.tracker-card:hover {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.tracker-card__head {
display: flex; justify-content: space-between; align-items: center;
gap: 8px; margin-bottom: 4px;
}
.tracker-card__title {
font-size: 14px; font-weight: 700; color: #0f172a; margin: 0;
line-height: 1.3;
}
.tracker-card__title a { color: inherit; text-decoration: none; }
.tracker-card__title a:hover { color: #4338ca; text-decoration: underline; }
.tracker-card__company {
font-size: 12.5px; color: #475569; margin: 0 0 8px;
}
.tracker-card__meta {
display: flex; gap: 8px; flex-wrap: wrap;
font-size: 11.5px; margin: 0 0 6px;
}
.tracker-card__time { font-size: 11px; color: #94a3b8; margin: 0; }
.tracker-card__ats { color: #047857; font-weight: 600; }
.tracker-card__salary { color: #b45309; font-weight: 700; }
.tracker-card__excerpt {
background: #ecfdf5; border-left: 3px solid #10b981;
padding: 8px 10px; margin: 8px 0 0; border-radius: 0 6px 6px 0;
font-size: 12px; font-style: italic; color: #065f46;
}
.tracker-card__withdraw {
display: inline-block; margin-top: 8px; font-size: 11px;
color: #991b1b; text-decoration: underline;
}
.tracker-pill {
font-size: 9.5px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px;
white-space: nowrap;
}
.tracker-pill--external { background: #f1f5f9; color: #475569; }
.tracker-pill--applyglide { background: #eef2ff; color: #4338ca; }
.tracker-pill--email { background: #eff6ff; color: #1e40af; }
.tracker-pill--ats { background: #fef3c7; color: #92400e; }
.tracker-pill--manual { background: #fce7f3; color: #9d174d; }
.tracker-status {
font-size: 10.5px; font-weight: 700; padding: 2px 7px;
border-radius: 999px;
}
.tracker-status--pending,
.tracker-status--delivered { background: #eff6ff; color: #1e40af; }
.tracker-status--opened { background: #eef2ff; color: #4338ca; }
.tracker-status--replied { background: #ecfdf5; color: #047857; }
.tracker-status--rejected { background: #fef2f2; color: #991b1b; }
.tracker-status--withdrawn { background: #f1f5f9; color: #64748b; }
.tracker-status--bounced { background: #fef3c7; color: #92400e; }
.tracker-status--interviewing { background: #fef3c7; color: #b45309; }
.tracker-status--offered,
.tracker-status--accepted { background: #eef2ff; color: #4338ca; }
.tracker-status--applied,
.tracker-status--saved { background: #f1f5f9; color: #475569; }
/* ─────────────────────────────────────────────────────────────────────
* v2.1 Apply form (Mode B / D) — single-page apply experience.
* Class prefix `.apply-form-*` and `.apply-sent-*`. No Tailwind, no
* inline styles in the views — all visual state lives here.
* ───────────────────────────────────────────────────────────────────── */
.apply-form-shell {
max-width: 800px; margin: 0 auto; padding: 28px 22px 80px;
}
.apply-form__back {
display: inline-block; color: #4338ca; font-size: 13px;
text-decoration: none; margin-bottom: 18px;
}
.apply-form__back:hover { text-decoration: underline; }
.apply-form__header {
display: flex; gap: 14px; align-items: flex-start;
padding: 22px 22px 22px;
background: linear-gradient(135deg, var(--jb-accent, #4338ca), #1e293b);
color: #fff; border-radius: 16px; margin-bottom: 24px;
}
.apply-form__header h1 { color: #fff; }
.apply-form__eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
text-transform: uppercase; color: rgba(255,255,255,0.78); margin: 0 0 4px;
}
.apply-form__title {
font-size: 22px; line-height: 1.2; font-weight: 800; color: #fff; margin: 0 0 6px;
letter-spacing: -0.4px;
}
.apply-form__sub {
font-size: 13.5px; color: rgba(255,255,255,0.86); margin: 0; line-height: 1.5;
}
.apply-form {
display: grid; gap: 18px;
}
/* Honeypot — hidden from humans, visible to bots */
.apply-form__honeypot {
position: absolute; left: -10000px; top: -10000px;
width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.apply-form__honeypot input { width: 1px; }
.apply-form__errors {
background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
padding: 14px 16px; color: #991b1b; font-size: 13.5px;
}
.apply-form__errors-title { font-weight: 700; margin: 0 0 6px; }
.apply-form__errors ul { margin: 0; padding-left: 20px; }
.apply-form__section {
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
padding: 18px 18px 16px; margin: 0;
}
.apply-form__legend {
display: flex; gap: 10px; align-items: center;
font-size: 14px; font-weight: 700; color: #0f172a;
margin: 0 0 14px; padding: 0;
}
.apply-form__step {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: #4338ca; color: #fff; font-size: 12px; font-weight: 800;
}
.apply-form__legend__badge {
display: inline-block; font-size: 10.5px; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase; color: #475569;
padding: 2px 8px; background: #f1f5f9; border-radius: 999px;
margin-left: auto;
}
.apply-form__row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 640px) {
.apply-form__row { grid-template-columns: 1fr; }
}
.apply-form__field {
display: flex; flex-direction: column; gap: 5px;
font-size: 13px; color: #0f172a;
}
.apply-form__field__label { font-weight: 600; color: #334155; }
.apply-form__field__hint { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.apply-form__field__optional { color: #94a3b8; font-weight: 500; font-size: 11.5px; margin-left: 4px; }
.apply-form__req { color: #b91c1c; font-weight: 700; }
.apply-form__input,
.apply-form__select,
.apply-form__textarea {
display: block; width: 100%;
padding: 10px 12px; border-radius: 9px;
border: 1.5px solid #cbd5e1;
font-size: 14px; color: #0f172a; background: #fff;
outline: none; transition: border-color 0.12s, box-shadow 0.12s;
font-family: inherit;
}
.apply-form__input:focus,
.apply-form__select:focus,
.apply-form__textarea:focus {
border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.12);
}
.apply-form__textarea { resize: vertical; min-height: 84px; }
.apply-form__resume-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
.apply-form__cover-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
}
.apply-form__radio-card {
position: relative; display: flex; flex-direction: column; gap: 4px;
padding: 12px 14px 11px 36px; cursor: pointer;
border: 1.5px solid #e2e8f0; border-radius: 10px;
background: #fff; transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.apply-form__radio-card:hover { border-color: #94a3b8; }
.apply-form__radio-card input[type="radio"] {
position: absolute; left: 12px; top: 14px; accent-color: #4338ca;
}
.apply-form__radio-card input[type="radio"]:checked ~ * { color: #4338ca; }
.apply-form__radio-card:has(input:checked) {
border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.10);
}
.apply-form__radio-card.is-default { border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.08); }
.apply-form__radio-card__title { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.apply-form__radio-card__meta { font-size: 12px; color: #64748b; line-height: 1.4; }
.apply-form__resume-empty {
text-align: center; padding: 18px 14px;
background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px;
}
.apply-form__resume-empty__title { font-weight: 700; color: #0f172a; margin: 0 0 4px; font-size: 14px; }
.apply-form__resume-empty__sub { color: #475569; font-size: 13px; margin: 0 0 12px; }
.apply-form__cover-existing { margin-top: 12px; }
/* v2.6 — link out to the paid letter wizard from the apply form. */
.apply-form__cover-build {
margin: 14px 0 0;
padding: 12px 14px;
background: rgba(99, 102, 241, 0.05);
border: 1px solid rgba(99, 102, 241, 0.18);
border-radius: 10px;
font-size: 13px;
color: #334155;
line-height: 1.5;
}
.apply-form__link {
color: #4f46e5;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.apply-form__link:hover { color: #6366f1; }
.apply-form__yesno {
display: flex; gap: 8px; margin-top: 4px;
}
.apply-form__yesno__opt {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 8px; cursor: pointer;
border: 1.5px solid #cbd5e1; background: #fff;
font-size: 13px; font-weight: 600; color: #334155;
transition: border-color 0.12s, background 0.12s;
}
.apply-form__yesno__opt:hover { border-color: #94a3b8; }
.apply-form__yesno__opt:has(input:checked) {
border-color: #4338ca; background: #eef2ff; color: #4338ca;
}
.apply-form__yesno__opt input { accent-color: #4338ca; }
.apply-form__hint {
font-size: 12.5px; color: #64748b; margin: 10px 0 0;
}
.apply-form__link { color: #4338ca; }
.apply-form__review {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 16px 16px 14px;
}
.apply-form__review__title {
font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
color: #475569; text-transform: uppercase; margin: 0 0 10px;
}
.apply-form__review__list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 6px;
}
.apply-form__review__list li {
display: grid; grid-template-columns: 110px 1fr; gap: 10px;
font-size: 13px; align-items: baseline;
}
.apply-form__review__k { color: #64748b; font-weight: 600; }
.apply-form__review__v { color: #0f172a; font-weight: 500; }
.apply-form__submit {
text-align: center; padding-top: 6px;
}
.apply-form__transparency {
font-size: 13px; color: #475569; margin: 0 0 12px; line-height: 1.5;
}
.apply-form__btn {
display: inline-block; padding: 13px 26px; border-radius: 10px;
border: 1.5px solid transparent; font-weight: 700; font-size: 14px;
cursor: pointer; transition: transform 0.06s, background 0.12s, box-shadow 0.12s;
text-decoration: none; line-height: 1.2;
font-family: inherit;
}
.apply-form__btn--primary {
background: #4338ca; color: #fff;
}
.apply-form__btn--primary:hover {
background: #3730a3; transform: translateY(-1px);
box-shadow: 0 8px 18px -8px rgba(67,56,202,0.55);
}
.apply-form__btn--secondary {
background: #fff; color: #4338ca; border-color: #4338ca;
}
.apply-form__btn--secondary:hover { background: #eef2ff; }
.apply-form__btn--ghost {
background: transparent; color: #475569; border-color: #cbd5e1;
}
.apply-form__btn--ghost:hover { background: #f1f5f9; color: #0f172a; }
.apply-form__btn--danger {
background: #b91c1c; color: #fff;
}
.apply-form__btn--danger:hover { background: #991b1b; }
.apply-form__legal {
font-size: 11.5px; color: #94a3b8; margin: 14px 0 0; line-height: 1.55;
}
.apply-form__legal a { color: #64748b; text-decoration: underline; }
/* ── Sent / withdraw confirmation ──────────────────────────────── */
.apply-sent {
background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
padding: 32px 28px 28px; text-align: center;
}
.apply-sent__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px; border-radius: 50%;
background: linear-gradient(135deg, #10b981, #047857); color: #fff;
font-size: 32px; margin-bottom: 16px; box-shadow: 0 8px 18px -8px rgba(16,185,129,0.45);
}
.apply-sent__title {
font-size: 28px; font-weight: 800; color: #0f172a; margin: 0 0 8px;
letter-spacing: -0.5px;
}
.apply-sent__sub {
font-size: 15px; color: #475569; margin: 0 auto 18px; max-width: 520px; line-height: 1.55;
}
.apply-sent__status {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.apply-sent__status__dot {
width: 8px; height: 8px; border-radius: 50%; background: currentColor;
animation: apply-sent-pulse 1.6s ease-in-out infinite;
}
@keyframes apply-sent-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.apply-sent__status--pending,
.apply-sent__status--delivered { background: #eff6ff; color: #1e40af; }
.apply-sent__status--opened { background: #eef2ff; color: #4338ca; }
.apply-sent__status--replied { background: #ecfdf5; color: #047857; }
.apply-sent__status--bounced { background: #fef3c7; color: #92400e; }
.apply-sent__status--rejected { background: #fef2f2; color: #991b1b; }
.apply-sent__status--withdrawn { background: #f1f5f9; color: #64748b; }
.apply-sent__timeline {
list-style: none; margin: 24px auto 0; padding: 0; max-width: 480px; text-align: left;
display: grid; gap: 12px;
}
.apply-sent__timeline li {
position: relative; padding: 12px 14px 12px 48px;
background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0;
}
.apply-sent__timeline strong {
display: block; font-size: 14px; color: #0f172a; margin-bottom: 2px;
}
.apply-sent__timeline small { color: #64748b; font-size: 12px; }
.apply-sent__timeline__step {
position: absolute; left: 12px; top: 12px;
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: #e2e8f0; color: #64748b; font-size: 12px; font-weight: 800;
}
.apply-sent__timeline li.is-done .apply-sent__timeline__step {
background: #10b981; color: #fff;
}
.apply-sent__actions {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin: 24px 0 16px;
}
.apply-sent__hint {
font-size: 12.5px; color: #64748b; line-height: 1.55;
margin: 12px auto 0; max-width: 480px;
}
.apply-withdraw {
background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
padding: 28px 26px 24px; max-width: 560px; margin: 0 auto;
}
.apply-withdraw__title {
font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 8px;
}
.apply-withdraw__sub {
font-size: 14px; color: #475569; margin: 0 0 14px; line-height: 1.55;
}
.apply-withdraw__list {
margin: 0 0 18px; padding-left: 18px; color: #334155; font-size: 13.5px; line-height: 1.6;
}
.apply-withdraw__form {
display: flex; gap: 10px; flex-wrap: wrap;
}
/* ─────────────────────────────────────────────────────────────
v2.2 JOB BOARD REDESIGN (.jb2-*)
Hero metric card, real-stats bar, filter rail, rich listing
cards, sticky pricing/benefits rail, bottom CTA, how-it-works.
Themed to ApplyGlide indigo (#6366f1 → #8b5cf6). NO fake
testimonials, NO faked Fortune-500 logos, NO "total revenue".
───────────────────────────────────────────────────────────── */
.jb2 {
--jb2-indigo: #6366f1;
--jb2-indigo-deep: #4f46e5;
--jb2-violet: #8b5cf6;
--jb2-ink: #0f172a;
--jb2-ink-2: #334155;
--jb2-mute: #64748b;
--jb2-mute-2: #94a3b8;
--jb2-line: #e2e8f0;
--jb2-bg: #f8fafc;
--jb2-card: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--jb2-ink);
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
/* ── HERO ──────────────────────────────────────────────────── */
.jb2-hero {
margin-top: 32px;
padding: 56px 0 32px;
position: relative;
}
.jb2-hero__inner {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 56px;
align-items: center;
}
@media (max-width: 980px) {
.jb2-hero { padding: 40px 0 20px; }
.jb2-hero__inner { grid-template-columns: 1fr; gap: 32px; }
}
.jb2-hero__pill {
display: inline-block;
padding: 6px 14px;
background: rgba(99, 102, 241, 0.08);
color: var(--jb2-indigo-deep);
border: 1px solid rgba(99, 102, 241, 0.18);
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 18px;
}
.jb2-hero__title {
font-size: 56px;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 18px;
color: var(--jb2-ink);
}
@media (max-width: 760px) { .jb2-hero__title { font-size: 40px; } }
.jb2-grad {
background: linear-gradient(120deg, var(--jb2-indigo) 0%, var(--jb2-violet) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.jb2-hero__sub {
font-size: 18px;
color: var(--jb2-mute);
line-height: 1.55;
margin: 0 0 26px;
max-width: 540px;
}
.jb2-hero__ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.jb2-hero__trust {
font-size: 13px;
color: var(--jb2-mute-2);
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
}
/* ── BUTTONS ──────────────────────────────────────────────── */
.jb2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 22px;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.06s ease, box-shadow 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.jb2-btn--primary {
background: linear-gradient(135deg, var(--jb2-indigo) 0%, var(--jb2-violet) 100%);
color: #fff;
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.25);
}
.jb2-btn--primary:hover { box-shadow: 0 10px 24px rgba(99, 102, 241, 0.35); transform: translateY(-1px); }
.jb2-btn--ghost {
background: #fff;
color: var(--jb2-ink);
border-color: var(--jb2-line);
}
.jb2-btn--ghost:hover { background: var(--jb2-bg); }
.jb2-btn--white {
background: #fff;
color: var(--jb2-indigo-deep);
}
.jb2-btn--white:hover { background: #f1f5f9; }
.jb2-btn--full { width: 100%; }
.jb2-btn--lg { padding: 14px 28px; font-size: 16px; }
/* ── HERO METRIC CARD (right side of hero) ────────────────── */
.jb2-metric {
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 16px;
padding: 22px 22px 18px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.jb2-metric__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.jb2-metric__label {
font-size: 12px;
font-weight: 700;
color: var(--jb2-mute);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 4px;
}
.jb2-metric__big {
font-size: 34px;
font-weight: 800;
color: var(--jb2-ink);
margin: 0;
line-height: 1;
letter-spacing: -0.02em;
}
.jb2-metric__delta {
font-size: 12.5px;
color: var(--jb2-mute);
margin: 4px 0 0;
}
.jb2-metric__live {
font-size: 11px;
font-weight: 700;
color: #047857;
background: #ecfdf5;
border: 1px solid #a7f3d0;
padding: 4px 9px;
border-radius: 999px;
white-space: nowrap;
}
.jb2-metric__spark {
width: 100%;
height: 90px;
display: block;
margin: 4px 0 12px;
}
.jb2-metric__rows {
list-style: none;
margin: 0;
padding: 12px 0 0;
border-top: 1px solid var(--jb2-line);
display: flex;
flex-direction: column;
gap: 8px;
}
.jb2-metric__rows li {
display: flex;
justify-content: space-between;
font-size: 13.5px;
}
.jb2-metric__row-label { color: var(--jb2-mute); }
.jb2-metric__row-value { color: var(--jb2-ink); font-weight: 700; }
/* ── STATS BAR (4 cols) ───────────────────────────────────── */
.jb2-stats {
margin: 24px 0 40px;
}
.jb2-stats__inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 16px;
padding: 18px 22px;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
@media (max-width: 760px) { .jb2-stats__inner { grid-template-columns: repeat(2, 1fr); } }
.jb2-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
}
.jb2-stat__icon {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(99, 102, 241, 0.08);
border-radius: 10px;
font-size: 18px;
flex-shrink: 0;
}
.jb2-stat__big {
font-size: 22px; font-weight: 800; color: var(--jb2-ink);
margin: 0; line-height: 1;
}
.jb2-stat__label {
font-size: 12.5px; color: var(--jb2-mute); margin: 4px 0 0;
}
/* ── BOARD GRID (rail / listings / sidebar) ───────────────── */
.jb2-board { margin-bottom: 48px; }
.jb2-board__form {
display: grid;
grid-template-columns: 240px 1fr 320px;
gap: 22px;
align-items: start;
}
@media (max-width: 1100px) {
.jb2-board__form { grid-template-columns: 240px 1fr; }
.jb2-side { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
.jb2-board__form { grid-template-columns: 1fr; }
}
/* ── FILTER RAIL ─────────────────────────────────────────── */
.jb2-rail {
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 14px;
padding: 18px;
position: sticky;
top: 16px;
}
.jb2-rail__group { margin-bottom: 18px; }
.jb2-rail__group:last-child { margin-bottom: 0; }
.jb2-rail__label {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--jb2-mute);
margin-bottom: 8px;
}
.jb2-rail__input,
.jb2-rail__select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--jb2-line);
border-radius: 8px;
font-size: 14px;
background: #fff;
color: var(--jb2-ink);
}
.jb2-rail__input:focus,
.jb2-rail__select:focus {
outline: none;
border-color: var(--jb2-indigo);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.jb2-rail__radio {
display: flex; align-items: center; gap: 8px;
padding: 6px 0;
font-size: 14px;
color: var(--jb2-ink-2);
cursor: pointer;
}
.jb2-rail__radio input { accent-color: var(--jb2-indigo); }
.jb2-rail__btnrow { display: flex; flex-direction: column; gap: 8px; }
.jb2-rail__reset {
text-align: center;
font-size: 13px;
color: var(--jb2-mute);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ── LISTINGS ────────────────────────────────────────────── */
.jb2-listings__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px; padding: 0 4px;
}
.jb2-listings__count { margin: 0; font-size: 14px; color: var(--jb2-ink-2); }
.jb2-listings__sort { font-size: 12.5px; color: var(--jb2-mute); }
.jb2-cards { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.jb2-card {
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 14px;
transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.jb2-card:hover {
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
border-color: rgba(99, 102, 241, 0.45);
}
.jb2-card--featured {
border-color: rgba(99, 102, 241, 0.5);
background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, #fff 60%);
}
.jb2-card__link {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
padding: 18px 20px;
text-decoration: none;
color: inherit;
}
.jb2-card .jb-card__logo,
.jb2-card .jb-logo,
.jb2-card .jb-logo-circle {
width: 56px !important;
height: 56px !important;
border-radius: 12px;
flex-shrink: 0;
}
.jb2-card__row1 {
display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
flex-wrap: wrap;
}
.jb2-card__title {
font-size: 17px; font-weight: 700; color: var(--jb2-ink); margin: 0;
letter-spacing: -0.01em;
}
.jb2-card__salary {
font-size: 13.5px; font-weight: 700; color: var(--jb2-indigo-deep); white-space: nowrap;
}
.jb2-card__company {
font-size: 14px; color: var(--jb2-mute); margin: 4px 0 8px;
}
.jb2-card__chips {
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.jb2-chip {
display: inline-flex; align-items: center;
padding: 3px 10px;
background: #f1f5f9;
color: var(--jb2-ink-2);
border-radius: 999px;
font-size: 12px; font-weight: 600;
border: 1px solid #e2e8f0;
}
.jb2-chip--soft { background: #fff; color: var(--jb2-mute); border-color: var(--jb2-line); }
.jb2-chip--featured { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.jb2-chip--remote { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.jb2-chip--easy { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.jb2-chip--mailto { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.jb2-chip--external { background: #fff; color: var(--jb2-mute-2); border-color: #e2e8f0; }
.jb2-chip--category { background: rgba(99, 102, 241, 0.08); color: var(--jb2-indigo-deep); border-color: rgba(99, 102, 241, 0.18); }
.jb2-card__foot {
display: flex; justify-content: space-between; align-items: center;
margin: 0; font-size: 12.5px; color: var(--jb2-mute);
}
.jb2-card__cta { color: var(--jb2-indigo-deep); font-weight: 700; }
.jb2-card:hover .jb2-card__cta { text-decoration: underline; }
/* ── PAGER ───────────────────────────────────────────────── */
.jb2-pager {
display: flex; justify-content: space-between; align-items: center;
margin-top: 24px; gap: 12px; flex-wrap: wrap;
}
.jb2-pager__info { font-size: 13px; color: var(--jb2-mute); }
/* ── EMPTY ──────────────────────────────────────────────── */
.jb2-empty {
background: #fff; border: 1px dashed var(--jb2-line);
border-radius: 14px; padding: 48px 24px; text-align: center;
}
.jb2-empty h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--jb2-ink); }
.jb2-empty p { font-size: 14px; color: var(--jb2-mute); margin: 0 0 12px; }
/* ── STICKY RIGHT SIDEBAR ────────────────────────────────── */
.jb2-side {
position: sticky;
top: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.jb2-promo {
background: linear-gradient(135deg, var(--jb2-indigo-deep) 0%, var(--jb2-violet) 100%);
border-radius: 16px;
padding: 22px;
color: #fff;
box-shadow: 0 12px 30px rgba(79, 70, 229, 0.32);
}
.jb2-promo__eyebrow {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
opacity: 0.85; margin: 0 0 4px;
}
.jb2-promo__title { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.jb2-promo__sub { font-size: 14px; opacity: 0.92; line-height: 1.5; margin: 0 0 14px; }
.jb2-promo__list {
list-style: none; padding: 0; margin: 0 0 18px;
display: flex; flex-direction: column; gap: 6px;
font-size: 13.5px;
}
.jb2-promo__list li::before { content: "✓ "; opacity: 0.85; margin-right: 4px; }
.jb2-promo__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.jb2-promo__price-amt { font-size: 32px; font-weight: 800; line-height: 1; }
.jb2-promo__price-unit { font-size: 13px; opacity: 0.85; }
.jb2-promo__foot {
text-align: center; font-size: 11.5px; opacity: 0.78; margin: 10px 0 0;
}
.jb2-why {
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 16px;
padding: 22px;
}
.jb2-why__title {
font-size: 16px; font-weight: 700; margin: 0 0 14px; color: var(--jb2-ink);
}
.jb2-why__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
.jb2-why__list li {
display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start;
}
.jb2-why__ico {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(99, 102, 241, 0.08); border-radius: 8px;
font-size: 14px; flex-shrink: 0;
}
.jb2-why__h { font-size: 13.5px; font-weight: 700; color: var(--jb2-ink); margin: 0 0 2px; }
.jb2-why__p { font-size: 12.5px; color: var(--jb2-mute); line-height: 1.5; margin: 0; }
/* ── BOTTOM CTA BAR ──────────────────────────────────────── */
.jb2-cta-bar {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.08) 100%);
border: 1px solid rgba(99, 102, 241, 0.18);
border-radius: 18px;
padding: 32px 36px;
margin: 24px 0 48px;
}
.jb2-cta-bar__inner {
display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.jb2-cta-bar__h { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--jb2-ink); letter-spacing: -0.01em; }
.jb2-cta-bar__p { font-size: 14.5px; color: var(--jb2-mute); margin: 0; max-width: 640px; line-height: 1.5; }
/* ── HOW IT WORKS ────────────────────────────────────────── */
.jb2-how { padding: 8px 0 64px; }
.jb2-how__title { font-size: 24px; font-weight: 800; margin: 0 0 24px; color: var(--jb2-ink); text-align: center; letter-spacing: -0.01em; }
.jb2-how__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .jb2-how__steps { grid-template-columns: 1fr; } }
.jb2-how__steps li {
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 14px;
padding: 22px 22px 24px;
position: relative;
}
.jb2-how__num {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: linear-gradient(135deg, var(--jb2-indigo) 0%, var(--jb2-violet) 100%);
color: #fff; border-radius: 50%;
font-weight: 800; font-size: 14px;
margin-bottom: 12px;
}
.jb2-how__h { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--jb2-ink); }
.jb2-how__p { font-size: 13.5px; color: var(--jb2-mute); line-height: 1.5; margin: 0; }
/* ── PRICING TIERS ─────────────────────────────────────── */
.jb2-tiers-wrap { padding: 8px 0 64px; }
.jb2-tiers-head { text-align: center; margin-bottom: 32px; }
.jb2-tiers-title {
font-size: 28px; font-weight: 800; margin: 0 0 8px;
color: var(--jb2-ink); letter-spacing: -0.01em;
}
.jb2-tiers-sub {
font-size: 15px; color: var(--jb2-mute); margin: 0;
max-width: 560px; margin-inline: auto;
}
.jb2-tiers {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
margin-top: 8px;
}
@media (max-width: 760px) { .jb2-tiers { grid-template-columns: 1fr; } }
.jb2-tier {
background: #fff; border: 1px solid var(--jb2-line);
border-radius: 16px; padding: 28px 26px;
position: relative; display: flex; flex-direction: column;
transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.jb2-tier:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07); }
.jb2-tier--featured {
border-color: rgba(99, 102, 241, 0.5);
background: linear-gradient(180deg, rgba(99, 102, 241, 0.05) 0%, #fff 70%);
box-shadow: 0 14px 30px rgba(99, 102, 241, 0.15);
}
.jb2-tier__pill {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--jb2-indigo) 0%, var(--jb2-violet) 100%);
color: #fff; padding: 4px 14px; border-radius: 999px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.jb2-tier__name {
font-size: 13px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--jb2-mute); margin: 0 0 8px;
}
.jb2-tier__price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 16px; }
.jb2-tier__amt { font-size: 36px; font-weight: 800; color: var(--jb2-ink); line-height: 1; letter-spacing: -0.02em; }
.jb2-tier__unit { font-size: 13px; color: var(--jb2-mute); }
.jb2-tier__list {
list-style: none; padding: 0;
margin: 0 0 22px;
display: flex; flex-direction: column; gap: 8px;
flex: 1;
font-size: 14px; color: var(--jb2-ink-2);
}
.jb2-tier__list li::before { content: "✓ "; color: var(--jb2-indigo-deep); font-weight: 700; margin-right: 4px; }
/* ── WHY POST GRID (employer landing) ──────────────────── */
.jb2-why-grid { padding: 8px 0 56px; }
.jb2-why-grid__title {
font-size: 28px; font-weight: 800; text-align: center; margin: 0 0 32px;
color: var(--jb2-ink); letter-spacing: -0.01em;
}
.jb2-why-grid__items {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 980px) { .jb2-why-grid__items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jb2-why-grid__items { grid-template-columns: 1fr; } }
.jb2-why-grid__item {
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 14px;
padding: 22px 22px 24px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.jb2-why-grid__item:hover {
border-color: rgba(99, 102, 241, 0.35);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.jb2-why-grid__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(139, 92, 246, 0.10));
border-radius: 10px; font-size: 18px;
margin-bottom: 14px;
}
.jb2-why-grid__item h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--jb2-ink); }
.jb2-why-grid__item p { font-size: 13.5px; color: var(--jb2-mute); line-height: 1.55; margin: 0; }
/* ── CURRENTLY LIVE PREVIEW (employer landing) ──────────── */
.jb2-live { padding: 8px 0 24px; }
.jb2-live__head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 14px;
}
.jb2-live__title { font-size: 22px; font-weight: 800; margin: 0; color: var(--jb2-ink); letter-spacing: -0.01em; }
.jb2-live__more { font-size: 14px; color: var(--jb2-indigo-deep); text-decoration: none; font-weight: 700; }
.jb2-live__more:hover { text-decoration: underline; }
/* ── WIZARD SHELL (employer post flow) ──────────────────── */
.jb2--wiz { padding-top: 24px; padding-bottom: 64px; }
.jb2-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--jb2-mute); text-decoration: none;
padding: 6px 0; margin-bottom: 6px;
}
.jb2-back:hover { color: var(--jb2-indigo-deep); }
.jb2-wizhead { margin: 0 0 24px; }
.jb2-wizhead__title {
font-size: 32px; font-weight: 800; letter-spacing: -0.02em;
color: var(--jb2-ink); margin: 0 0 6px;
}
.jb2-wizhead__sub { font-size: 15px; color: var(--jb2-mute); margin: 0; max-width: 600px; line-height: 1.5; }
/* ─────────────────────────────────────────────────────────────
v2.4 — JOB SHOW PAGE (.jb2--show / .jb2-show__*)
Two-col layout (article + sticky rail), themed via the
per-listing --jb2-accent custom property so featured posts
can dial up the brand color without touching the global
palette.
───────────────────────────────────────────────────────────── */
.jb2--show {
--jb2-accent: var(--jb2-indigo);
padding-top: 24px;
padding-bottom: 64px;
}
.jb2-show {
display: grid;
grid-template-columns: 1fr 340px;
gap: 28px;
margin-top: 14px;
align-items: start;
}
@media (max-width: 1100px) {
.jb2-show { grid-template-columns: 1fr; }
}
/* ── HEADER ───────────────────────────────────────────────── */
.jb2-show__head {
display: grid;
grid-template-columns: 72px 1fr;
gap: 18px;
background: #fff;
border: 1px solid var(--jb2-line);
border-left: 4px solid var(--jb2-accent);
border-radius: 14px;
padding: 22px 24px;
margin-bottom: 18px;
}
.jb2-show__head .jb-logo,
.jb2-show__head .jb-card__logo,
.jb2-show__head .jb-logo-circle {
width: 72px !important; height: 72px !important;
border-radius: 14px;
}
.jb2-show__title {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 6px;
color: var(--jb2-ink);
line-height: 1.2;
}
.jb2-show__company {
font-size: 14.5px;
color: var(--jb2-mute);
margin: 0 0 10px;
}
.jb2-show__company strong { color: var(--jb2-ink); font-weight: 700; }
.jb2-show__company-link {
color: var(--jb2-ink);
font-weight: 700;
text-decoration: none;
}
.jb2-show__company-link:hover { color: var(--jb2-accent); text-decoration: underline; }
.jb2-show__company-meta { color: var(--jb2-mute); }
.jb2-show__chips {
display: flex; flex-wrap: wrap; gap: 6px;
}
/* ── BODY ARTICLE ─────────────────────────────────────────── */
.jb2-show__body {
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 14px;
padding: 28px 32px;
font-size: 15px;
line-height: 1.65;
color: var(--jb2-ink-2);
}
.jb2-show__body h1,
.jb2-show__body h2 {
font-size: 19px;
font-weight: 700;
color: var(--jb2-ink);
letter-spacing: -0.01em;
margin: 28px 0 12px;
}
.jb2-show__body h2:first-child { margin-top: 0; }
.jb2-show__body h3 {
font-size: 16px;
font-weight: 700;
color: var(--jb2-ink);
margin: 20px 0 8px;
}
.jb2-show__body p {
margin: 0 0 14px;
}
.jb2-show__body ul,
.jb2-show__body ol {
padding-left: 22px;
margin: 0 0 16px;
}
.jb2-show__body li { margin: 4px 0; }
.jb2-show__body a {
color: var(--jb2-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.jb2-show__body code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
font-size: 13px;
color: var(--jb2-ink);
}
.jb2-show__body pre {
background: #f8fafc;
border: 1px solid var(--jb2-line);
padding: 14px;
border-radius: 8px;
overflow-x: auto;
margin: 14px 0;
}
.jb2-show__stack {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 4px;
}
.jb2-show__related-title {
font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
color: var(--jb2-ink); margin: 32px 0 12px;
}
/* ── RIGHT RAIL ───────────────────────────────────────────── */
.jb2-show__side {
position: sticky;
top: 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
@media (max-width: 1100px) { .jb2-show__side { position: static; } }
.jb2-show__cta {
background: linear-gradient(135deg, var(--jb2-accent) 0%, var(--jb2-violet) 100%);
border-radius: 16px;
padding: 22px;
color: #fff;
box-shadow: 0 12px 30px rgba(79, 70, 229, 0.30);
}
.jb2-show__cta-eyebrow {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; opacity: 0.85;
margin: 0 0 4px;
}
.jb2-show__cta-title {
font-size: 18px; font-weight: 800;
margin: 0 0 8px; line-height: 1.3;
}
.jb2-show__cta-sub {
font-size: 13.5px; opacity: 0.92; line-height: 1.5;
margin: 0 0 14px;
}
.jb2-show__cta-apply { margin-top: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.jb2-show__cta-apply:hover { background: rgba(255, 255, 255, 0.22); }
.jb2-show__cta-hint {
font-size: 11.5px; opacity: 0.78;
margin: 8px 0 0; text-align: center;
}
.jb2-show__card {
background: #fff;
border: 1px solid var(--jb2-line);
border-radius: 14px;
padding: 20px 22px;
}
.jb2-show__card-title {
font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--jb2-mute);
margin: 0 0 12px;
}
.jb2-show__rows {
margin: 0;
display: flex; flex-direction: column;
gap: 8px;
}
.jb2-show__rows > div {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
font-size: 13.5px;
}
.jb2-show__rows dt {
color: var(--jb2-mute);
margin: 0;
}
.jb2-show__rows dd {
color: var(--jb2-ink);
margin: 0;
font-weight: 600;
text-align: right;
}
.jb2-show__link {
color: var(--jb2-indigo-deep);
text-decoration: none;
font-weight: 700;
}
.jb2-show__link:hover { text-decoration: underline; }
.jb2-show__report {
text-align: center;
font-size: 11.5px;
color: var(--jb2-mute-2);
margin: 8px 0 0;
}
.jb2-show__report-link {
color: var(--jb2-mute-2);
text-decoration: underline;
text-underline-offset: 3px;
}
.jb2-show__report-link:hover { color: var(--jb2-mute); }
/* ============================================================
ApplyGlide — Marketing CSS
No inline styles. No Tailwind dependency.
============================================================ */
/* === ATS Tooltip ============================================ */
.ats-tip {
position: relative;
border-bottom: 1px dashed #6b7280;
cursor: help;
white-space: nowrap;
}
.ats-tip::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #111;
color: #fff;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.5;
padding: 8px 12px;
border-radius: 8px;
width: max-content;
max-width: 280px;
white-space: normal;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 50;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.ats-tip::before {
content: "";
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #111;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 50;
}
.ats-tip:hover::after,
.ats-tip:hover::before,
.ats-tip:focus::after,
.ats-tip:focus::before {
opacity: 1;
}
/* === Skip to content (accessibility) ====================== */
.skip-to-content {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: #111;
color: white;
padding: 12px 24px;
border-radius: 0 0 8px 8px;
font-size: 14px;
font-weight: 600;
z-index: 9999;
text-decoration: none;
transition: top 0.2s;
}
.skip-to-content:focus {
top: 0;
}
/* === Base ================================================= */
html, body {
min-height: 100vh;
background: white;
color: #111;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
img, svg { display: block; max-width: 100%; }
/* Mobile overflow safety net — prevent any stray wide element (unwrapped
pre, table, inline SVG with viewBox width, iframe, hero mockup) from
producing a horizontal scrollbar on phones. Apply at phone widths only
so desktop flex/grid overflow stays visible for inspection. */
@media (max-width: 767px) {
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg, video, iframe, table, pre, textarea { max-width: 100%; height: auto; }
/* Tables, pre, and code blocks inside post bodies should scroll
internally rather than push the whole page. */
.post-body pre,
.post-body table,
.legal-body pre,
.legal-body table { overflow-x: auto; display: block; }
/* Long unbreakable strings in copy (URLs, hash tags) wrap aggressively */
.post-body p, .post-body li,
.legal-body p, .legal-body li,
.tpl-row__desc, .rtp-hero__sub,
.hero-sub, .seo-hero__sub, .wz-step-subtitle,
.wz-encourage, .wz-tip, .wz-field__hint,
.consent-banner__text {
overflow-wrap: break-word;
word-break: break-word;
}
}
button { font-family: inherit; }
a { color: inherit; }
summary { cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* === Layout helpers ======================================= */
.ag-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.ag-container-mid { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.ag-container-sm { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.ag-container-xs { max-width: 640px; margin: 0 auto; padding: 0 20px; }
/* === Flash notices ======================================== */
.flash-notice { padding: 12px 16px; background: #ecfdf5; border-bottom: 1px solid #a7f3d0; font-size: 14px; color: #065f46; text-align: center; }
.flash-alert { padding: 12px 16px; background: #fef2f2; border-bottom: 1px solid #fecaca; font-size: 14px; color: #991b1b; text-align: center; }
/* === Buttons ============================================== */
.btn {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; border-radius: 12px; text-decoration: none;
transition: background 0.15s, border-color 0.15s;
cursor: pointer; border: none; font-family: inherit;
font-size: 15px; padding: 14px 28px;
}
.btn-primary { background: #111; color: white; }
.btn-primary:hover { background: #333; }
.btn-secondary { background: white; color: #374151; border: 1px solid #e5e7eb; }
.btn-secondary:hover { background: #f9fafb; }
.btn-white { background: white; color: #111; }
.btn-white:hover { background: #f3f4f6; }
.btn-ghost-dark { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.2); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.06); }
.btn-outline { background: white; color: #4b5563; border: 1px solid #e5e7eb; }
.btn-outline:hover { background: #f9fafb; border-color: #d1d5db; }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* === CTA System ========================================== */
.cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #111; color: #fff; padding: 14px 28px; border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none; transition: all 0.15s; border: none; cursor: pointer; font-family: inherit; }
.cta-primary:hover { background: #222; transform: translateY(-1px); }
.cta-primary--lg { padding: 18px 36px; font-size: 17px; }
.cta-primary--light { background: #fff; color: #111; }
.cta-primary--light:hover { background: #f9fafb; }
.cta-primary--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.cta-primary--ghost:hover { border-color: #fff; }
.cta-primary--green { background: #059669; }
.cta-primary--green:hover { background: #047857; }
/* === Form block helper (for button_to forms) ============= */
.form-block { display: block; }
.form-block button, .form-block input[type=submit] { width: 100%; }
/* ============================================================
HEADER
============================================================ */
.site-header {
position: sticky; top: 0; z-index: 40;
background: white; border-bottom: 1px solid #f3f4f6;
}
.site-header__inner {
max-width: 1280px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
height: 60px;
}
.site-logo {
display: flex; align-items: center; gap: 10px;
text-decoration: none; flex-shrink: 0;
}
.site-logo__icon {
width: 28px; height: 28px; border-radius: 8px; background: #111;
display: flex; align-items: center; justify-content: center;
}
.site-logo__name {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700; font-size: 17px; color: #111; letter-spacing: -0.01em;
}
.site-nav { display: none; align-items: center; gap: 2px; }
.site-nav__link {
display: inline-block; padding: 7px 12px; border-radius: 8px;
font-size: 14px; color: #4b5563; text-decoration: none;
transition: background 0.15s;
}
.site-nav__link:hover { background: #f9fafb; }
.site-actions { display: flex; align-items: center; gap: 8px; }
.site-btn-ghost {
display: none; padding: 7px 12px; border-radius: 8px;
font-size: 14px; color: #4b5563; text-decoration: none;
background: none; border: none; cursor: pointer;
font-family: inherit; transition: background 0.15s;
}
.site-btn-ghost:hover { background: #f9fafb; }
.site-btn-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; background: #111; color: white;
font-size: 14px; font-weight: 600; border-radius: 8px;
text-decoration: none; transition: background 0.15s;
}
.site-btn-cta:hover { background: #333; }
/* Nav dropdowns */
.nav-dd { position: relative; }
.nav-dd__trigger {
display: inline-flex; align-items: center; gap: 4px;
padding: 7px 12px; border-radius: 8px; font-size: 14px;
color: #4b5563; background: none; border: none;
cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.nav-dd__trigger:hover { background: #f9fafb; color: #111; }
.nav-dd__chevron { transition: transform 0.2s; flex-shrink: 0; }
.nav-dd__menu {
position: absolute; left: 0; top: calc(100% + 8px);
min-width: 300px; border-radius: 14px; border: 1px solid #e5e7eb;
background: white; box-shadow: 0 12px 48px rgba(0,0,0,0.12);
overflow: hidden; opacity: 0; visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
z-index: 50;
}
.nav-dd__menu.nav-dropdown--open {
opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd__section { padding: 8px 0; }
.nav-dd__section--alt { background: #f8fafc; border-top: 1px solid #f1f5f9; }
.nav-dd__section-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.08em; color: #9ca3af; margin: 0;
padding: 6px 16px 8px;
}
.nav-dd__item {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 16px; text-decoration: none; transition: background 0.15s;
}
.nav-dd__item:hover { background: #f1f5f9; }
.nav-dd__icon {
width: 32px; height: 32px; border-radius: 8px; display: flex;
align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.nav-dd__icon--blue { background: #eff6ff; color: #2563eb; }
.nav-dd__icon--purple { background: #f5f3ff; color: #7c3aed; }
.nav-dd__icon--green { background: #ecfdf5; color: #059669; }
.nav-dd__icon--amber { background: #fffbeb; color: #d97706; }
.nav-dd__name { font-size: 14px; font-weight: 500; color: #111; margin: 0; }
.nav-dd__desc { font-size: 12px; color: #6b7280; margin: 2px 0 0; }
.nav-dd__divider { border-top: 1px solid #f1f5f9; margin: 4px 16px; }
.nav-dd__bundle {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px; text-decoration: none; transition: background 0.15s;
}
.nav-dd__bundle:hover { background: #f1f5f9; }
.nav-dd__badge {
font-size: 11px; font-weight: 700; background: #111; color: white;
padding: 3px 10px; border-radius: 20px;
}
.nav-dd__price-tag {
font-size: 0.75em; color: #8b5cf6; font-weight: 600;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer { background: #0a0a0a; color: #9ca3af; margin-top: 80px; }
/* Zero the gap whenever a CTA section sits directly above the footer.
The list grew as we added more page templates — keep extending it
when a new bottom-CTA class is introduced. */
.cta-section + .site-footer,
.roles-idx-cta + .site-footer,
.rshow-bottom-cta + .site-footer { margin-top: 0; }
main:has(> .cta-section:last-child) + .site-footer,
main:has(> .roles-idx-cta:last-child) + .site-footer,
main:has(> .rshow-bottom-cta:last-child) + .site-footer { margin-top: 0; }
.site-footer__inner { max-width: 1280px; margin: 0 auto; padding: 64px 20px; }
.footer-main { display: grid; grid-template-columns: 1fr; gap: 40px; }
.footer-brand__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand__icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.footer-brand__name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px; color: white; }
.footer-brand__desc { font-size: 14px; color: #6b7280; line-height: 1.6; max-width: 280px; }
/* Footer newsletter signup */
.footer-newsletter { margin-top: 20px; margin-bottom: 8px; }
.footer-newsletter__title { font-size: 13px; font-weight: 600; color: #d1d5db; margin: 0 0 8px; }
.footer-newsletter__form { display: flex; gap: 6px; max-width: 320px; }
.footer-newsletter__input {
flex: 1;
padding: 8px 12px;
font-size: 13px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
background: rgba(255,255,255,0.06);
color: white;
outline: none;
transition: border-color 0.15s;
font-family: inherit;
}
.footer-newsletter__input::placeholder { color: #6b7280; }
.footer-newsletter__input:focus { border-color: #2563eb; }
.footer-newsletter__btn {
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
border: none;
border-radius: 8px;
background: #2563eb;
color: white;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
font-family: inherit;
}
.footer-newsletter__btn:hover { background: #1d4ed8; }
.footer-newsletter__note { font-size: 11px; color: #4b5563; margin: 6px 0 0; }
/* Product Hunt launch banner */
.ph-banner {
background: linear-gradient(135deg, #da552f 0%, #ea8a52 100%);
color: white;
text-align: center;
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
z-index: 100;
position: relative;
}
.ph-banner a {
color: white;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.ph-banner a:hover { text-decoration-thickness: 2px; }
.ph-banner__close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(255,255,255,0.7);
font-size: 18px;
cursor: pointer;
padding: 4px;
line-height: 1;
}
.ph-banner__close:hover { color: white; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social__link { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; transition: background 0.15s; text-decoration: none; }
.footer-social__link:hover { background: rgba(255,255,255,0.14); }
.footer-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-nav__title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; margin: 0 0 16px; }
.footer-nav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav__link { font-size: 14px; color: #9ca3af; text-decoration: none; transition: color 0.15s; }
.footer-nav__link:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 48px; padding-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.footer-copy { font-size: 12px; color: #9ca3af; margin: 0; }
.footer-studio-link { color: #6b7280; text-decoration: none; transition: color 0.15s; }
.footer-studio-link:hover { color: white; }
.footer-disc { font-size: 12px; color: #6b7280; margin: 0; max-width: 480px; line-height: 1.5; }
.footer-usa { font-size: 0.75rem; color: #6b7280; letter-spacing: 0.5px; margin-top: 4px; }
/* ============================================================
SHARED SECTION ATOMS
============================================================ */
.section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #6b7280; margin: 0 0 12px; }
.section-eyebrow--dim { color: #4b5563; }
.section-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(28px,4vw,44px); font-weight: 800; color: #111; letter-spacing: -0.02em; margin: 0; }
.section-title--white { color: white; }
.section-title--sm { font-size: clamp(24px, 3vw, 36px); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-lead { font-size: 16px; color: #6b7280; line-height: 1.5; margin: 12px 0 0; }
.badge-green {
display: inline-flex; align-items: center; gap: 8px;
background: #f0fdf4; border: 1px solid #bbf7d0;
padding: 5px 14px; border-radius: 100px;
font-size: 13px; font-weight: 500; color: #065f46;
}
.badge-green__dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; display: inline-block; }
/* ============================================================
HOME — HERO
============================================================ */
.hero-section { background: white; padding: 80px 20px 64px; overflow: hidden; }
.hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 6px 14px; border-radius: 100px; margin-bottom: 28px; }
.hero-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; display: inline-block; animation: ag-pulse 2s infinite; }
.hero-badge__text { font-size: 13px; font-weight: 500; color: #065f46; }
.hero-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(40px,5vw,68px); font-weight: 800; color: #111; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 20px; }
.hero-sub { font-size: 18px; color: #6b7280; line-height: 1.6; max-width: 480px; margin: 0 0 36px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.hero-features { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-feature { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b7280; }
/* Hero mockup */
.hero-mockup { position: relative; }
.hero-mockup__shadow { position: absolute; top: 16px; left: 16px; right: -4px; bottom: -16px; border-radius: 16px; background: #f3f4f6; }
.hero-mockup__card { position: relative; background: white; border-radius: 16px; border: 1px solid #e5e7eb; box-shadow: 0 20px 60px rgba(0,0,0,0.1); overflow: hidden; }
.hero-mockup__bar { background: #f9fafb; border-bottom: 1px solid #f3f4f6; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
.hero-mockup__dots { display: flex; gap: 6px; }
.hero-mockup__dot { width: 10px; height: 10px; border-radius: 50%; }
.hero-mockup__dot--r { background: #fca5a5; }
.hero-mockup__dot--y { background: #fde68a; }
.hero-mockup__dot--g { background: #6ee7b7; }
.hero-mockup__label { font-size: 12px; color: #9ca3af; font-weight: 500; }
.hero-mockup__score { font-size: 11px; font-weight: 700; color: #059669; background: #ecfdf5; padding: 3px 10px; border-radius: 20px; }
.hero-mockup__body { padding: 0; position: relative; overflow: hidden; max-height: 480px; }
.hero-mockup__img { display: block; width: 100%; height: auto; }
.hero-mockup__fade { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to top, white, transparent); }
.hero-mockup__stat { position: absolute; bottom: -12px; right: -12px; background: #111; color: white; padding: 12px 16px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.hero-mockup__stat-label { font-size: 11px; color: #9ca3af; margin: 0 0 2px; }
.hero-mockup__stat-value { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; color: white; margin: 0; }
/* ============================================================
HOME — STATS BAR
============================================================ */
.stats-section { border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; background: #fafafa; padding: 32px 20px; }
.stats-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat-item { text-align: center; }
.stat-num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; color: #111; margin: 0 0 2px; }
.stat-label { font-size: 13px; color: #9ca3af; margin: 0; }
/* ============================================================
HOME — HOW IT WORKS
============================================================ */
.steps-section { padding: 96px 20px; background: white; }
.steps-inner { max-width: 1280px; margin: 0 auto; }
.steps-head { text-align: center; margin-bottom: 56px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.step-card { position: relative; background: white; border: 1px solid #f3f4f6; border-radius: 20px; padding: 28px; overflow: hidden; }
.step-card__bg { position: absolute; top: 16px; right: 16px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 60px; font-weight: 900; color: #f3f4f6; line-height: 1; pointer-events: none; user-select: none; }
.step-card__icon { width: 44px; height: 44px; border-radius: 12px; background: #111; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.step-card__num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 800; color: white; }
.step-card__title { font-size: 17px; font-weight: 700; color: #111; margin: 0 0 10px; }
.step-card__body { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 20px; }
.step-card__tag { display: inline-flex; align-items: center; gap: 6px; background: #f3f4f6; padding: 6px 12px; border-radius: 100px; font-size: 12px; font-weight: 500; color: #374151; }
/* ============================================================
HOME — TEMPLATE GALLERY PREVIEW (dark section)
============================================================ */
.tpl-preview-section { background: #111; padding: 96px 20px; overflow: hidden; }
.tpl-preview-inner { max-width: 1280px; margin: 0 auto; }
.tpl-preview-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.tpl-preview-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid rgba(255,255,255,0.15); color: white; font-size: 14px; font-weight: 500; border-radius: 10px; text-decoration: none; transition: border-color 0.15s; }
.tpl-preview-link:hover { border-color: rgba(255,255,255,0.4); }
.tpl-preview-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.tpl-mini { border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); aspect-ratio: 3/4; overflow: hidden; position: relative; cursor: pointer; transition: transform 0.15s; }
.tpl-mini:hover { transform: scale(1.04); }
.tpl-mini--white { background: #ffffff; }
.tpl-mini--indigo { background: #4f46e5; }
.tpl-mini--darkgray { background: #1f2937; }
.tpl-mini--green { background: #059669; }
.tpl-mini--red { background: #e11d48; }
.tpl-mini__body { padding: 10px; height: 100%; display: flex; flex-direction: column; }
/* bars for light-bg cards */
.tpl-mini__bar-h { height: 8px; width: 60%; border-radius: 4px; background: #e5e7eb; margin-bottom: 6px; }
.tpl-mini__bar-sub { height: 5px; border-radius: 4px; background: #f3f4f6; margin-bottom: 4px; }
.tpl-mini__bar-sub2 { height: 5px; width: 75%; border-radius: 4px; background: #f3f4f6; margin-bottom: 10px; }
.tpl-mini__bar-sec { height: 5px; width: 35%; border-radius: 4px; background: #e5e7eb; margin-bottom: 8px; }
.tpl-mini__line { height: 4px; border-radius: 4px; background: #f3f4f6; margin-bottom: 4px; }
/* bars for dark-bg cards */
.tpl-mini__bar-h--w { background: rgba(255,255,255,0.3); height: 8px; width: 60%; border-radius: 4px; margin-bottom: 6px; }
.tpl-mini__bar-sub--w { background: rgba(255,255,255,0.15); height: 5px; border-radius: 4px; margin-bottom: 4px; }
.tpl-mini__bar-sub2--w { background: rgba(255,255,255,0.15); height: 5px; width: 75%; border-radius: 4px; margin-bottom: 10px; }
.tpl-mini__bar-sec--w { background: rgba(255,255,255,0.2); height: 5px; width: 35%; border-radius: 4px; margin-bottom: 8px; }
.tpl-mini__line--w { background: rgba(255,255,255,0.12); height: 4px; border-radius: 4px; margin-bottom: 4px; }
.tpl-mini__line--w70 { width: 70%; }
.tpl-mini__line--w85 { width: 85%; }
.tpl-mini__line--w60 { width: 60%; }
.tpl-mini__line--w90 { width: 90%; }
.tpl-mini__line--w75 { width: 75%; }
/* Real-image template cards */
.tpl-mini--img { background: #1a1a2e; }
.tpl-mini__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.3s ease; }
.tpl-mini:hover .tpl-mini__img { transform: scale(1.05); }
.tpl-mini__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 10px 8px; background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%); opacity: 0; transition: opacity 0.2s; display: flex; align-items: flex-end; }
.tpl-mini:hover .tpl-mini__overlay { opacity: 1; }
.tpl-mini__name { font-size: 11px; font-weight: 600; color: white; letter-spacing: 0.02em; }
/* === Template Carousel (Wave 2C) ========================== */
.tpl-carousel { position: relative; overflow: hidden; }
.tpl-carousel__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; padding: 8px 0; }
.tpl-carousel__track::-webkit-scrollbar { display: none; }
.tpl-carousel__card { scroll-snap-align: start; flex: 0 0 calc(25% - 15px); border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 816 / 1100; box-shadow: 0 2px 12px rgba(0,0,0,0.25); background: #1a1a2e; cursor: pointer; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tpl-carousel__card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
.tpl-carousel__card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tpl-carousel__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 14px 10px; background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%); display: flex; align-items: flex-end; opacity: 0; transition: opacity 0.2s; }
.tpl-carousel__card:hover .tpl-carousel__overlay { opacity: 1; }
.tpl-carousel__name { font-size: 12px; font-weight: 600; color: white; letter-spacing: 0.02em; }
.tpl-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.95); box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #111; transition: background 0.15s, box-shadow 0.15s; }
.tpl-carousel__arrow:hover { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.tpl-carousel__arrow--left { left: 8px; }
.tpl-carousel__arrow--right { right: 8px; }
.tpl-carousel__arrow.hidden { display: none; }
@media (max-width: 1024px) {
.tpl-carousel__card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 768px) {
.tpl-carousel__card { flex: 0 0 85%; }
.tpl-carousel__arrow { width: 36px; height: 36px; }
}
/* ============================================================
HOME — ATS CHECKER
============================================================ */
/* Features section (P2-7: moved from inline styles) */
.features-section { padding: 80px 20px; background: white; }
.features-section__head { text-align: center; margin-bottom: 48px; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.feature-card { background: white; border: 1px solid #f1f5f9; border-radius: 16px; padding: 28px; }
.feature-card__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feature-card__icon--green { background: #ecfdf5; }
.feature-card__icon--blue { background: #eff6ff; }
.feature-card__icon--purple { background: #f5f3ff; }
.feature-card__icon--amber { background: #fef3c7; }
.feature-card__icon--pink { background: #fce7f3; }
.feature-card__icon--green-alt { background: #f0fdf4; }
.feature-card__title { font-weight: 700; font-size: 17px; color: #111; margin-bottom: 8px; }
.feature-card__desc { font-size: 14px; color: #6b7280; line-height: 1.6; }
@media (max-width: 768px) { .features-grid { grid-template-columns: 1fr; } }
.ats-section { padding: 96px 20px; background: white; }
.ats-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ats-stats { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.ats-stat { display: flex; align-items: center; gap: 12px; }
.ats-stat__dot { width: 6px; height: 6px; border-radius: 50%; background: #111; flex-shrink: 0; }
.ats-stat__text { font-size: 14px; margin: 0; }
.ats-score-card { display: none; padding: 28px; background: #111; border-radius: 16px; }
.ats-score-card__top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.ats-score-card__val { font-family: 'Bricolage Grotesque', sans-serif; font-size: 48px; font-weight: 900; color: white; }
.ats-score-card__of { font-size: 16px; color: #9ca3af; }
.ats-score-card__bar-bg { height: 8px; background: rgba(255,255,255,0.1); border-radius: 100px; overflow: hidden; margin-bottom: 16px; }
.ats-score-card__bar-fill { height: 8px; border-radius: 100px; background: #10b981; transition: width 0.8s; width: 0%; }
.ats-score-card__missing { font-size: 14px; color: #9ca3af; line-height: 1.6; }
.ats-score-card__cta { margin-top: 16px; font-size: 14px; font-weight: 600; color: white; text-decoration: underline; }
.ats-form-panel { background: #f9fafb; border-radius: 20px; padding: 28px; border: 1px solid #f3f4f6; }
.ats-form { display: flex; flex-direction: column; gap: 16px; }
.ats-form__label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; }
.ats-form__textarea { width: 100%; padding: 12px; font-size: 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: white; resize: vertical; font-family: inherit; box-sizing: border-box; outline: none; transition: border-color 0.15s; }
.ats-form__textarea:focus { border-color: #111; }
.ats-form__submit { width: 100%; padding: 14px; background: #111; color: white; font-size: 14px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; transition: background 0.15s; font-family: inherit; }
.ats-form__submit:hover { background: #333; }
.ats-form__note { text-align: center; font-size: 12px; color: #9ca3af; margin: 0; }
.ats-sub { font-size: 16px; color: #6b7280; line-height: 1.6; margin: 0 0 32px; }
/* ATS — PDF drop zone */
.ats-drop-zone { border: 2px dashed #e5e7eb; border-radius: 12px; padding: 20px 16px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: white; }
.ats-drop-zone:hover, .ats-drop-zone--over { border-color: #2563eb; background: #eff6ff; }
.ats-drop-zone__icon { display: block; margin: 0 auto 10px; color: #9ca3af; }
.ats-drop-zone--over .ats-drop-zone__icon { color: #2563eb; }
.ats-drop-zone__title { font-size: 14px; font-weight: 600; color: #374151; margin: 0 0 4px; }
.ats-drop-zone__hint { font-size: 12px; color: #9ca3af; margin: 0; }
.ats-drop-zone__hint label { color: #2563eb; cursor: pointer; text-decoration: underline; font-weight: 500; }
.ats-drop__hidden-input { display: none; }
.ats-drop__filename { font-size: 13px; color: #059669; font-weight: 600; margin-top: 8px; display: none; padding: 6px 10px; background: #f0fdf4; border-radius: 8px; border: 1px solid #bbf7d0; align-items: center; gap: 8px; }
.ats-drop__filename.visible { display: flex; }
.ats-drop__filename-icon { color: #059669; flex-shrink: 0; line-height: 1; }
.ats-drop__filename-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ats-drop__filename-remove {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: 50%;
background: #d1fae5;
color: #047857;
cursor: pointer;
transition: background 0.15s, color 0.15s, transform 0.1s;
font-family: inherit;
}
.ats-drop__filename-remove:hover { background: #fecaca; color: #b91c1c; }
.ats-drop__filename-remove:active { transform: scale(0.92); }
.ats-drop__filename-remove:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.ats-drop__divider { text-align: center; font-size: 12px; color: #9ca3af; margin: 10px 0 0; position: relative; }
.ats-drop__divider::before, .ats-drop__divider::after { content: ""; position: absolute; top: 50%; width: calc(50% - 48px); height: 1px; background: #e5e7eb; }
.ats-drop__divider::before { left: 0; }
.ats-drop__divider::after { right: 0; }
.ats-form__submit:disabled { background: #9ca3af; cursor: not-allowed; }
/* ============================================================
HOME — TESTIMONIALS
============================================================ */
.testimonials-section { background: #fafafa; border-top: 1px solid #f3f4f6; padding: 96px 20px; }
.testimonials-inner { max-width: 1280px; margin: 0 auto; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testimonial-card { background: white; border: 1px solid #f3f4f6; border-radius: 20px; padding: 28px; }
.testimonial-card__stars { display: flex; gap: 3px; margin-bottom: 16px; }
.testimonial-card__quote { font-size: 15px; color: #374151; line-height: 1.65; margin: 0 0 20px; }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.testimonial-card__avatar--blue { background: #2563eb; }
.testimonial-card__avatar--dark { background: #111; }
.testimonial-card__avatar--red { background: #e11d48; }
.testimonial-card__name { font-size: 14px; font-weight: 600; color: #111; margin: 0; }
.testimonial-card__role { font-size: 12px; color: #9ca3af; margin: 2px 0 0; }
/* ============================================================
HOME — PRICING TEASER
============================================================ */
.pricing-teaser-section { padding: 96px 20px; background: white; }
.pricing-teaser-inner { max-width: 1280px; margin: 0 auto; }
.pricing-teaser-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; max-width: 1000px; margin: 0 auto 32px; }
.pricing-teaser-grid--3col { grid-template-columns: repeat(3,1fr); max-width: 880px; }
.pt-card { border-radius: 16px; padding: 24px; display: flex; flex-direction: column; border: 1px solid #f3f4f6; background: white; }
.pt-card--featured { background: #111; border-color: #111; border-width: 2px; }
.pt-card__badge { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; }
.pt-card__name { font-size: 15px; font-weight: 700; color: #111; margin: 0 0 4px; }
.pt-card__name--w { color: white; }
.pt-card__price { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; color: #111; margin: 0 0 4px; letter-spacing: -0.01em; }
.pt-card__price--w { color: white; }
.pt-card__currency { font-size: 14px; font-weight: 600; color: #94a3b8; letter-spacing: 0.05em; margin-left: 2px; }
.pt-card__local { font-size: 13px; font-weight: 500; color: #6b7280; margin: 0 0 16px; }
.pt-card__local--w { color: rgba(255,255,255,0.78); }
.pt-card__features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pt-card__feature { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280; }
.pt-card__feature--w { color: rgba(255,255,255,0.6); }
.pt-card__cta { display: block; text-align: center; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; background: #111; color: white; transition: background 0.15s; border: none; cursor: pointer; font-family: inherit; width: 100%; }
.pt-card__cta:hover { background: #333; }
.pt-card__cta--w { background: white; color: #111; }
.pt-card__cta--w:hover { background: #f3f4f6; }
.pricing-more { text-align: center; }
.pricing-more__link { font-size: 14px; color: #9ca3af; text-decoration: none; }
.pricing-more__link:hover { color: #6b7280; }
/* ============================================================
HOME — POPULAR ROLES
============================================================ */
.roles-section { background: #fafafa; border-top: 1px solid #f3f4f6; padding: 72px 20px; }
.roles-inner { max-width: 1280px; margin: 0 auto; }
.roles-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.roles-head__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; color: #111; margin: 0; }
.roles-head__link { font-size: 14px; color: #9ca3af; text-decoration: none; }
.roles-head__link:hover { color: #6b7280; }
.roles-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.role-card { display: block; padding: 16px; background: white; border-radius: 12px; border: 1px solid #f3f4f6; text-decoration: none; transition: border-color 0.15s; }
.role-card:hover { border-color: #e5e7eb; }
.role-card__title { font-size: 14px; font-weight: 500; color: #111; margin: 0 0 2px; }
.role-card__sub { font-size: 12px; color: #9ca3af; margin: 0; }
/* ============================================================
ROLES INDEX PAGE
============================================================ */
/* Hero */
.roles-idx-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%); padding: 80px 20px 64px; text-align: center; }
.roles-idx-hero__inner { max-width: 680px; margin: 0 auto; }
.roles-idx-hero__eyebrow {
display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: #60a5fa; margin-bottom: 20px;
}
.roles-idx-hero__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: white;
line-height: 1.15; margin: 20px 0 12px; letter-spacing: -0.02em;
}
.roles-idx-hero__sub { font-size: 17px; color: #94a3b8; max-width: 520px; margin: 0 auto; line-height: 1.6; }
.roles-idx-hero__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.roles-idx-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; font-weight: 500; color: #cbd5e1;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
padding: 6px 14px; border-radius: 999px;
}
/* Body */
.roles-idx-body { padding: 48px 20px 72px; background: #f9fafb; }
.roles-idx-body__inner { max-width: 1280px; margin: 0 auto; }
/* Search */
.roles-idx-search {
position: relative; max-width: 560px; margin: 0 auto 32px;
}
.roles-idx-search__icon {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
color: #9ca3af; pointer-events: none;
}
.roles-idx-search__input {
width: 100%; padding: 14px 16px 14px 44px;
font-size: 15px; font-family: inherit; color: #111;
background: white; border: 1.5px solid #e5e7eb; border-radius: 14px;
outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.roles-idx-search__input:focus {
border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.roles-idx-search__input::placeholder { color: #9ca3af; }
/* Count */
.roles-idx-count { font-size: 14px; color: #6b7280; margin-bottom: 20px; }
/* Grid */
.roles-idx-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
/* Card */
.roles-idx-card {
display: block; padding: 20px; background: white; border-radius: 14px;
border: 1px solid #e5e7eb; text-decoration: none;
transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.roles-idx-card:hover {
border-color: #d1d5db; box-shadow: 0 4px 20px rgba(0,0,0,0.06);
transform: translateY(-1px);
}
.roles-idx-card__title { font-size: 15px; font-weight: 600; color: #111; margin: 0 0 4px; }
.roles-idx-card__sub { font-size: 13px; color: #9ca3af; margin: 0; }
.roles-idx-card__cat {
display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 500;
color: #6b7280; background: #f3f4f6; padding: 3px 10px; border-radius: 999px;
text-transform: capitalize;
}
/* Empty state */
.roles-idx-empty { text-align: center; padding: 64px 20px; }
.roles-idx-empty__text { font-size: 17px; color: #6b7280; margin-bottom: 20px; }
/* Bottom CTA */
.roles-idx-cta {
background: linear-gradient(135deg, #111 0%, #1e3a5f 100%);
padding: 72px 20px; text-align: center;
}
.roles-idx-cta__inner { max-width: 600px; margin: 0 auto; }
.roles-idx-cta__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; color: white;
margin-bottom: 12px;
}
.roles-idx-cta__sub { font-size: 17px; color: #94a3b8; margin: 0 auto 28px; max-width: 480px; line-height: 1.6; }
.roles-idx-cta__actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* ============================================================
ROLE SHOW PAGE
============================================================ */
/* Hero */
.rshow-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%); padding: 64px 20px 56px; }
.rshow-hero__inner { max-width: 1280px; margin: 0 auto; }
.rshow-hero__top { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.rshow-hero__back {
font-size: 14px; color: #94a3b8; text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
transition: color 0.15s;
}
.rshow-hero__back:hover { color: white; }
.rshow-hero__cat {
display: inline-block; font-size: 11px; font-weight: 600; text-transform: capitalize;
color: #60a5fa; background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.2);
padding: 4px 12px; border-radius: 999px;
}
.rshow-hero__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: white;
line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.02em;
}
.rshow-hero__sub { font-size: 17px; color: #94a3b8; max-width: 640px; line-height: 1.6; margin: 0 0 28px; }
.rshow-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Stats bar */
.rshow-stats { max-width: 1280px; margin: 0 auto; padding: 0 20px; position: relative; top: -28px; margin-bottom: -12px; }
.rshow-stats__inner {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: #e5e7eb; border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.rshow-stats__item {
background: white; padding: 20px; text-align: center;
}
.rshow-stats__item:first-child { border-radius: 16px 0 0 16px; }
.rshow-stats__item:last-child { border-radius: 0 16px 16px 0; }
.rshow-stats__value {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 18px; font-weight: 800; color: #111; margin: 0;
}
.rshow-stats__label { font-size: 12px; color: #9ca3af; margin: 4px 0 0; }
/* Body layout */
.rshow-body { max-width: 1280px; margin: 0 auto; padding: 32px 20px 72px; }
.rshow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.rshow-main { display: flex; flex-direction: column; gap: 24px; }
/* Cards */
.rshow-card {
background: white; border-radius: 16px; border: 1px solid #e5e7eb;
padding: 28px; transition: box-shadow 0.2s;
}
.rshow-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.rshow-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rshow-card__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 18px; font-weight: 700; color: #111; margin: 0;
}
.rshow-card__copy-btn {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 500; color: #6b7280; background: #f9fafb;
border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 12px;
cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.rshow-card__copy-btn:hover { background: #111; color: white; border-color: #111; }
/* Intro card */
.rshow-intro { font-size: 15px; color: #374151; line-height: 1.7; margin: 0; }
/* Hiring manager tips */
.rshow-tips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rshow-tips li {
display: flex; gap: 10px; font-size: 14px; color: #374151; line-height: 1.6;
}
.rshow-tips__check {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
background: #ecfdf5; color: #059669;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; margin-top: 2px;
}
/* Document previews */
.rshow-docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.rshow-doc {
background: #f9fafb; border-radius: 14px; border: 1px solid #f3f4f6;
overflow: hidden; transition: box-shadow 0.2s, transform 0.2s;
}
.rshow-doc:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.rshow-doc__badge {
display: inline-block; margin: 12px 12px 0; font-size: 11px; font-weight: 600;
color: #2563eb; background: #eff6ff; padding: 4px 10px; border-radius: 999px;
}
.rshow-doc__badge--purple { color: #7c3aed; background: #f5f3ff; }
.rshow-doc__badge--green { color: #059669; background: #ecfdf5; }
.rshow-doc__img { width: 100%; display: block; padding: 8px 12px 0; }
.rshow-doc__foot { padding: 10px 12px 12px; }
.rshow-doc__link {
font-size: 13px; font-weight: 500; color: #2563eb; text-decoration: none;
display: inline-flex; align-items: center; gap: 4px;
}
.rshow-doc__link:hover { text-decoration: underline; }
.rshow-doc a { text-decoration: none; }
/* Keywords */
.rshow-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.rshow-keywords__label { font-size: 12px; color: #9ca3af; font-weight: 500; margin-right: 4px; align-self: center; }
.rshow-keyword {
display: inline-flex; align-items: center;
font-size: 12px; font-weight: 500; color: #374151;
background: #f3f4f6; padding: 5px 12px; border-radius: 999px;
transition: background 0.15s;
}
.rshow-keyword:hover { background: #e5e7eb; }
/* Example blocks */
.rshow-example {
margin: 0; padding: 20px; background: #f9fafb; border: 1px solid #f3f4f6;
border-radius: 12px; font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 13px; line-height: 1.75; color: #374151;
white-space: pre-wrap; word-break: break-word;
max-height: 320px; overflow-y: auto;
}
.rshow-example::-webkit-scrollbar { width: 6px; }
.rshow-example::-webkit-scrollbar-track { background: transparent; }
.rshow-example::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
/* Tabbed example switcher */
.rshow-tabs { display: flex; gap: 4px; margin-bottom: 16px; background: #f3f4f6; border-radius: 10px; padding: 4px; }
.rshow-tab {
flex: 1; padding: 8px 12px; border-radius: 8px; border: none;
font-size: 13px; font-weight: 500; font-family: inherit;
color: #6b7280; background: transparent; cursor: pointer;
transition: all 0.15s; text-align: center;
}
.rshow-tab:hover { color: #111; }
.rshow-tab--active { background: white; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.rshow-tab-panel { display: none; }
.rshow-tab-panel--active { display: block; }
/* SEO article */
.rshow-article { font-size: 15px; line-height: 1.8; color: #374151; }
.rshow-article h2 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 20px; font-weight: 700; color: #111; margin: 32px 0 12px;
}
.rshow-article h3 { font-size: 16px; font-weight: 700; color: #111; margin: 24px 0 8px; }
.rshow-article p { margin: 0 0 16px; }
.rshow-article ul, .rshow-article ol { margin: 0 0 16px 20px; padding: 0; list-style: disc; }
.rshow-article li { margin-bottom: 6px; }
.rshow-article strong { color: #111; font-weight: 600; }
.rshow-article a { color: #2563eb; text-decoration: underline; }
/* Sidebar */
/* Sidebar: sticky on tall screens, but ALSO scrollable internally so a
long stack of recommended-templates / role-stats blocks doesn't get
clipped behind the viewport. Independent y-axis scroll inside the
sticky container — page scrolls behind it normally. */
.rshow-sidebar {
display: flex; flex-direction: column; gap: 16px;
position: sticky; top: 80px;
max-height: calc(100vh - 100px);
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(99,102,241,0.45) transparent;
}
.rshow-sidebar::-webkit-scrollbar { width: 8px; }
.rshow-sidebar::-webkit-scrollbar-track { background: transparent; }
.rshow-sidebar::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.35); border-radius: 999px; }
.rshow-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.6); }
.rshow-sidebar-card {
background: white; border-radius: 16px; border: 1px solid #e5e7eb; padding: 20px;
}
.rshow-sidebar-card__label { font-size: 13px; color: #6b7280; margin: 0 0 12px; }
.rshow-sidebar-card__img { width: 100%; border-radius: 10px; border: 1px solid #f3f4f6; }
.rshow-sidebar-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
/* Hero recommended-template card — premium framing + dual-action UX
(zoomable preview + button row below the image) */
.rshow-sidebar-card--hero {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border: 1.5px solid #c7d2fe;
box-shadow: 0 4px 18px -8px rgba(99,102,241,0.18);
}
.rshow-sidebar-card--hero .rshow-sidebar-card__label {
display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
}
.rshow-sidebar-card__pill {
display: inline-flex; align-items: center;
align-self: flex-start;
font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em;
text-transform: uppercase; color: #4f46e5;
padding: 4px 10px; border-radius: 999px;
background: rgba(99,102,241,0.10);
}
.rshow-sidebar-card__name {
font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: -0.01em;
}
.rshow-sidebar-card__zoom {
display: block; width: 100%; padding: 0; margin: 0;
background: transparent; border: 0; cursor: zoom-in; position: relative;
border-radius: 12px; overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease;
outline: none;
}
.rshow-sidebar-card__zoom:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(15,23,42,0.25); }
.rshow-sidebar-card__zoom:focus-visible { outline: 3px solid #6366f1; outline-offset: 4px; }
.rshow-sidebar-card__zoom-badge {
position: absolute; bottom: 10px; right: 10px;
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; color: #fff;
background: rgba(15,23,42,0.78); backdrop-filter: blur(4px);
padding: 5px 9px; border-radius: 999px;
pointer-events: none;
opacity: 0; transition: opacity 0.18s ease;
}
.rshow-sidebar-card__zoom:hover .rshow-sidebar-card__zoom-badge { opacity: 1; }
/* Newer "Also popular" card grid — bigger cards, zoom + use button */
.rshow-recs-grid--v2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rshow-rec-card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rshow-rec-card:hover { border-color: #c7d2fe; box-shadow: 0 8px 22px -10px rgba(99,102,241,0.25); transform: translateY(-2px); }
.rshow-rec-card__zoom {
width: 100%; padding: 0; margin: 0;
background: #f8fafc; border: 0; cursor: zoom-in;
display: block; aspect-ratio: 816 / 1100; overflow: hidden;
position: relative;
}
.rshow-rec-card__zoom::after {
content: "Zoom";
position: absolute; bottom: 8px; right: 8px;
font-size: 10px; font-weight: 700; color: #fff;
background: rgba(15,23,42,0.78); padding: 3px 8px; border-radius: 999px;
pointer-events: none; opacity: 0; transition: opacity 0.18s ease;
}
.rshow-rec-card__zoom:hover::after { opacity: 1; }
.rshow-rec-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.rshow-rec-card__meta {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 10px 12px;
border-top: 1px solid #f1f5f9;
}
.rshow-rec-card__name { font-size: 13px; font-weight: 700; color: #0f172a; }
.rshow-rec-card__cta {
font-size: 12px; font-weight: 700; color: #4f46e5;
text-decoration: none; padding: 4px 10px; border-radius: 999px;
background: rgba(99,102,241,0.08); transition: background 0.12s, color 0.12s;
}
.rshow-rec-card__cta:hover { background: #6366f1; color: #fff; }
/* Coverflow card refactor — preview is a button with zoom badge,
meta row has a dedicated "Use this template" link the user can
click without triggering zoom. */
.cflow__card {
display: flex; flex-direction: column;
cursor: default; /* card root no longer captures clicks */
}
.cflow__preview--zoom {
width: 100%; flex: 1; min-height: 0;
background: transparent; border: 0; padding: 0; margin: 0;
cursor: zoom-in; position: relative; overflow: hidden;
border-radius: inherit;
}
.cflow__preview--zoom:focus-visible { outline: 3px solid #60a5fa; outline-offset: -3px; }
.cflow__img {
width: 100%; height: 100%; object-fit: cover; object-position: top center;
display: block; pointer-events: none;
}
.cflow__zoom-badge {
position: absolute; bottom: 12px; right: 12px;
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; color: #fff;
background: rgba(15,23,42,0.78); backdrop-filter: blur(4px);
padding: 5px 10px; border-radius: 999px;
pointer-events: none;
opacity: 0; transition: opacity 0.18s ease;
}
.cflow__preview--zoom:hover .cflow__zoom-badge { opacity: 1; }
.cflow__cta-btn {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #2563eb, #6366f1);
padding: 7px 14px; border-radius: 999px;
text-decoration: none;
box-shadow: 0 4px 14px -4px rgba(99,102,241,0.45);
transition: transform 0.12s ease, box-shadow 0.12s ease;
white-space: nowrap;
}
.cflow__cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(99,102,241,0.55); }
.cflow__cta-btn:active { transform: scale(0.97); }
/* Recommended templates grid */
.rshow-recs-label { font-size: 13px; color: #6b7280; margin: 0 0 12px; }
.rshow-recs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rshow-rec {
display: block; text-decoration: none; border-radius: 10px;
border: 1px solid #f3f4f6; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
}
.rshow-rec:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.rshow-rec__img { width: 100%; display: block; }
.rshow-rec__name { padding: 8px 10px; font-size: 12px; font-weight: 500; color: #374151; }
/* Info cards (languages, certs, github) */
.rshow-info-item { margin-bottom: 16px; }
.rshow-info-item:last-child { margin-bottom: 0; }
.rshow-info-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: #9ca3af; margin: 0 0 6px;
}
.rshow-info-value { font-size: 14px; color: #374151; line-height: 1.5; margin: 0; }
.rshow-info-link { color: #2563eb; text-decoration: none; }
.rshow-info-link:hover { text-decoration: underline; }
/* ATS sidebar CTA (dark card) */
.rshow-ats-cta { background: #0f172a; border-color: #1e293b; }
.rshow-ats-cta__eyebrow { color: #60a5fa; }
.rshow-ats-cta__title { color: white; font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.rshow-ats-cta__sub { color: #94a3b8; font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.rshow-ats-cta .btn { width: 100%; justify-content: center; }
/* Bottom CTA */
.rshow-bottom-cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* ============================================================
HOME — FAQ
============================================================ */
.faq-section { padding: 96px 20px; background: white; }
.faq-inner { max-width: 720px; margin: 0 auto; }
.faq-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(28px,4vw,40px); font-weight: 800; color: #111; margin: 0 0 48px; text-align: center; letter-spacing: -0.02em; }
.faq-list { border-top: 1px solid #f3f4f6; }
.faq-item { border-bottom: 1px solid #f3f4f6; padding: 20px 0; }
.faq-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: #111; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icon { flex-shrink: 0; margin-top: 2px; }
.faq-item p { margin: 12px 0 0; font-size: 14px; color: #6b7280; line-height: 1.65; }
/* ============================================================
HOME / SHARED — FINAL CTA SECTION
============================================================ */
/* Email capture section */
.email-capture-section { background: #f8fafc; padding: 72px 20px; text-align: center; }
.email-capture-inner { max-width: 520px; margin: 0 auto; }
.email-capture__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #2563eb; margin: 0 0 12px; }
.email-capture__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: #111; margin: 0 0 12px; }
.email-capture__sub { font-size: 15px; color: #6b7280; margin: 0 0 24px; line-height: 1.6; }
.email-capture__form { display: flex; gap: 8px; justify-content: center; max-width: 420px; margin: 0 auto; }
.email-capture__input {
flex: 1;
padding: 12px 16px;
font-size: 15px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: white;
color: #111;
outline: none;
transition: border-color 0.15s;
font-family: inherit;
}
.email-capture__input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.email-capture__btn {
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 10px;
background: #2563eb;
color: white;
cursor: pointer;
transition: background 0.15s;
white-space: nowrap;
font-family: inherit;
}
.email-capture__btn:hover { background: #1d4ed8; }
.email-capture__note { font-size: 12px; color: #9ca3af; margin: 12px 0 0; }
@media (max-width: 480px) {
.email-capture__form { flex-direction: column; }
}
.cta-section { background: #111; padding: 96px 20px; }
.cta-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.cta-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(32px,5vw,56px); font-weight: 800; color: white; margin: 0 0 16px; letter-spacing: -0.02em; }
.cta-sub { font-size: 18px; color: #6b7280; margin: 0 0 40px; line-height: 1.5; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-fine { margin: 24px 0 0; font-size: 13px; color: #374151; }
/* ============================================================
PRICING PAGE
============================================================ */
.pricing-hero { background: white; padding: 80px 20px 64px; text-align: center; }
.pricing-hero__inner { max-width: 640px; margin: 0 auto; }
.pricing-hero__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(36px,5vw,60px); font-weight: 800; color: #111; letter-spacing: -0.02em; margin: 24px 0 16px; line-height: 1.06; }
.pricing-hero__sub { font-size: 18px; color: #6b7280; line-height: 1.6; margin: 0; }
.pricing-cards-section { padding: 0 20px 24px; }
.pricing-cards-inner { max-width: 1100px; margin: 0 auto; }
.pricing-cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.pricing-cards-grid--3col { grid-template-columns: repeat(3,1fr); max-width: 960px; margin-left: auto; margin-right: auto; }
.pc-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 20px; background: white; padding: 28px; transition: box-shadow 0.2s; }
.pc-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.pc-card--featured { position: relative; border: 2px solid #111; background: #111; }
.pc-card--everything { position: relative; border: 2px solid #d97706; background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%); }
.pc-best-badge--gold { background: linear-gradient(135deg, #f59e0b, #d97706); }
.pc-card__icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.pc-card__icon--blue { background: #eff6ff; }
.pc-card__icon--purple { background: #f5f3ff; }
.pc-card__icon--green { background: #ecfdf5; }
.pc-card__icon--dim { background: rgba(255,255,255,0.1); }
.pc-card__icon--gold { background: #fef3c7; }
.pc-card__type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; margin: 0 0 4px; }
.pc-card__type--faded { color: rgba(255,255,255,0.4); }
.pc-card__price { font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; color: #111; margin: 0 0 2px; line-height: 1; }
.pc-card__price--w { color: white; }
.pc-card__freq { font-size: 13px; color: #6b7280; margin: 0 0 24px; }
.pc-card__price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.pc-card__price-old { font-size: 14px; color: rgba(255,255,255,0.3); text-decoration: line-through; margin: 0; }
.pc-card__save { font-size: 13px; color: #34d399; font-weight: 600; margin: 0 0 24px; }
/* 2026-05-01 — bundle inline save line. Stretches under the price like
other panels' .pc-card__freq, with the percentage on a softer
secondary tone so the eye doesn't fight three competing $ amounts. */
.pc-card__save--inline {
display: block; text-align: left; margin: 4px 0 22px;
font-size: 13px; line-height: 1.5; font-weight: 500;
color: rgba(255, 255, 255, 0.78);
}
.pc-card__save--inline .pc-card__save-pct {
display: inline-block; margin-left: 4px;
font-weight: 700; color: #34d399;
}
.pc-card__features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pc-card__feature { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4b5563; }
.pc-card__feature--w { color: rgba(255,255,255,0.7); }
.pc-card__cta { display: block; text-align: center; padding: 12px 16px; background: #111; color: white; font-size: 14px; font-weight: 600; border-radius: 10px; text-decoration: none; border: none; cursor: pointer; width: 100%; box-sizing: border-box; transition: background 0.15s; font-family: inherit; }
.pc-card__cta:hover { background: #333; }
.pc-card__cta--light { background: white; color: #111; }
.pc-card__cta--light:hover { background: #f3f4f6; }
.pc-best-badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
background: white; color: #111; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em; padding: 5px 14px;
border-radius: 100px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Pricing section headers */
.pricing-section-header { text-align: center; margin-bottom: 28px; }
.pricing-section-header__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 800; color: #111; margin: 0 0 8px; letter-spacing: -0.02em; }
.pricing-section-header__sub { font-size: 15px; color: #6b7280; margin: 0; line-height: 1.5; }
/* AI Tools grid — 5 columns */
.pricing-tools-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
/* Bundles grid — 2 columns centered */
.pricing-bundles-section { padding-top: 32px; }
.pricing-bundles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; }
/* Extra icon color variants for AI tools */
.pc-card__icon--orange { background: #fff7ed; }
.pc-card__icon--red { background: #fef2f2; }
.pc-card__icon--sky { background: #f0f9ff; }
.pc-card__icon--teal { background: #f0fdfa; }
.pc-card__icon--violet { background: #f5f3ff; }
/* Price-old visible on light backgrounds */
.pc-card__price-old--dark { color: #9ca3af; text-decoration: line-through; }
/* Gold save text for Everything Bundle */
.pc-card__save--gold { color: #d97706; }
.pricing-note { text-align: center; font-size: 12px; color: #9ca3af; margin: 20px 0 0; }
/* Pricing ATS panel */
.pricing-ats-section { background: #fafafa; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; padding: 72px 20px; margin-top: 32px; }
.pricing-ats-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pricing-ats-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; color: #111; margin: 20px 0 12px; letter-spacing: -0.02em; line-height: 1.1; }
.pricing-ats-sub { font-size: 15px; color: #6b7280; line-height: 1.65; margin: 0 0 24px; }
.pricing-ats-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 1px solid #e5e7eb; background: white; color: #111; font-size: 14px; font-weight: 600; border-radius: 10px; text-decoration: none; transition: border-color 0.15s; }
.pricing-ats-btn:hover { border-color: #d1d5db; }
.pricing-ats-card { background: white; border: 1px solid #f3f4f6; border-radius: 20px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,0.04); }
.pricing-ats-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.pricing-ats-card__label { font-size: 14px; font-weight: 600; color: #111; }
.pricing-ats-card__live { font-size: 12px; color: #9ca3af; }
.pricing-ats-card__gauge { display: flex; justify-content: center; padding: 16px 0 24px; }
.pricing-ats-card__circle { position: relative; width: 120px; height: 120px; }
.pricing-ats-card__score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pricing-ats-card__score-num { font-size: 28px; font-weight: 800; color: #111; line-height: 1; }
.pricing-ats-card__score-of { font-size: 11px; color: #9ca3af; }
.pricing-ats-card__rows { display: flex; flex-direction: column; gap: 8px; }
.pricing-ats-card__row { display: flex; justify-content: space-between; font-size: 13px; }
.pricing-ats-card__row-label { color: #6b7280; }
.pricing-ats-card__row-val { font-weight: 600; color: #111; }
.pricing-ats-card__row-val--yellow { color: #f59e0b; }
.pricing-ats-card__row-val--green { color: #10b981; }
/* Pricing how it works */
.pricing-hiw-section { padding: 80px 20px; background: white; }
.pricing-hiw-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.pricing-hiw-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; color: #111; margin: 0 0 48px; letter-spacing: -0.02em; }
.pricing-hiw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; text-align: center; }
.pricing-hiw-step__icon { width: 48px; height: 48px; border-radius: 14px; background: #111; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.pricing-hiw-step__num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; color: white; }
.pricing-hiw-step__title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 8px; }
.pricing-hiw-step__body { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0; }
/* Pricing FAQ */
.pricing-faq-section { background: #fafafa; border-top: 1px solid #f3f4f6; padding: 80px 20px; }
.pricing-faq-inner { max-width: 640px; margin: 0 auto; }
.pricing-faq-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; color: #111; margin: 0 0 40px; text-align: center; letter-spacing: -0.02em; }
.faq-card { background: white; border: 1px solid #f3f4f6; border-radius: 16px; overflow: hidden; margin-bottom: 8px; }
.faq-card[open] .faq-summary { border-bottom: 1px solid #f3f4f6; }
.faq-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: #111; padding: 20px 24px; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary__icon { flex-shrink: 0; margin-top: 2px; }
.faq-body { padding: 0 24px 20px; font-size: 14px; color: #6b7280; line-height: 1.65; }
/* Pricing — Career Toolkit Upsell */
.pricing-toolkit { padding: 40px 20px 0; }
.pricing-toolkit__inner { max-width: 720px; margin: 0 auto; background: linear-gradient(145deg, #f0fdf4 0%, #eff6ff 100%); border: 2px solid rgba(16,185,129,0.25); border-radius: 20px; padding: 2rem 2.5rem; }
.pricing-toolkit__content { text-align: center; }
.pricing-toolkit__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; font-weight: 800; color: #111; margin: 0.75rem 0 0.5rem; letter-spacing: -0.02em; }
.pricing-toolkit__desc { color: #4b5563; font-size: 0.9375rem; margin: 0 0 1.25rem; line-height: 1.5; max-width: 560px; margin-left: auto; margin-right: auto; }
.pricing-toolkit__price-row { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-bottom: 1.25rem; flex-wrap: wrap; }
.pricing-toolkit__price-old { font-size: 1.125rem; color: #9ca3af; text-decoration: line-through; }
.pricing-toolkit__price { font-size: 2rem; font-weight: 800; color: #111; letter-spacing: -1px; }
.pricing-toolkit__save { display: inline-block; background: rgba(16,185,129,0.12); color: #059669; font-size: 0.8125rem; font-weight: 700; padding: 4px 12px; border-radius: 12px; }
.pricing-toolkit__cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 36px; background: #111; color: #fff; font-size: 1rem; font-weight: 700; border-radius: 12px; text-decoration: none; transition: transform 0.1s, box-shadow 0.15s; }
.pricing-toolkit__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); color: #fff; }
@media (max-width: 640px) {
.pricing-toolkit__inner { padding: 1.5rem; }
.pricing-toolkit__cta { width: 100%; justify-content: center; }
}
/* Pricing CTA */
.pricing-cta-section { background: #111; padding: 96px 20px; margin-bottom: 0; }
.pricing-cta-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.pricing-cta-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(32px,5vw,52px); font-weight: 800; color: white; margin: 0 0 16px; letter-spacing: -0.02em; line-height: 1.08; }
.pricing-cta-sub { font-size: 18px; color: #6b7280; margin: 0 0 40px; line-height: 1.5; }
.pricing-cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pricing-cta-fine { margin: 20px 0 0; font-size: 13px; color: #4b5563; }
.pricing-cta-btn-white { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; background: white; color: #111; font-size: 15px; font-weight: 700; border-radius: 12px; text-decoration: none; transition: background 0.15s; }
.pricing-cta-btn-white:hover { background: #f3f4f6; }
.pricing-cta-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: 1px solid rgba(255,255,255,0.2); color: white; font-size: 15px; font-weight: 600; border-radius: 12px; text-decoration: none; transition: border-color 0.15s; }
.pricing-cta-btn-ghost:hover { border-color: rgba(255,255,255,0.4); }
/* ============================================================
TEMPLATES INDEX PAGE — Conversion-Optimized Redesign
============================================================ */
/* ── Hero ────────────────────────────────────────────────────── */
.tpl-hero {
background: white;
padding: 64px 20px 48px;
text-align: center;
border-bottom: 1px solid #f3f4f6;
}
.tpl-hero__inner {
max-width: 720px;
margin: 0 auto;
}
.tpl-hero__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
color: #111;
letter-spacing: -0.025em;
line-height: 1.1;
margin: 0 0 16px;
}
.tpl-hero__sub {
font-size: 17px;
color: #6b7280;
line-height: 1.6;
margin: 0;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* ── Category Filter Bar (sticky) ────────────────────────────── */
.tpl-filter-bar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid #f3f4f6;
padding: 0 20px;
}
.tpl-filter-bar__inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
gap: 8px;
padding: 14px 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tpl-filter-bar__inner::-webkit-scrollbar { display: none; }
.tpl-filter-pill {
display: inline-flex;
align-items: center;
padding: 8px 18px;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
border: 1px solid #e5e7eb;
color: #4b5563;
background: white;
transition: all 0.15s ease;
flex-shrink: 0;
}
.tpl-filter-pill:hover {
border-color: #d1d5db;
background: #f9fafb;
color: #111;
}
.tpl-filter-pill--active {
background: #111;
color: white;
border-color: #111;
}
.tpl-filter-pill--active:hover {
background: #333;
border-color: #333;
color: white;
}
/* ── Category Social Proof ───────────────────────────────────── */
.tpl-category-proof {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 100px;
font-size: 13px;
font-weight: 600;
color: #1d4ed8;
margin: 0 0 20px;
}
/* ── Results Count ───────────────────────────────────────────── */
.tpl-results-count {
font-size: 14px;
color: #9ca3af;
margin: 0 0 32px;
}
/* ── Template Rows Section ───────────────────────────────────── */
.tpl-rows-section {
max-width: 1280px;
margin: 0 auto;
padding: 48px 20px 64px;
}
/* ── Template Row (1 family per row) ─────────────────────────── */
.tpl-row {
display: grid;
grid-template-columns: 420px 1fr;
gap: 40px;
align-items: start;
padding: 56px 0;
border-bottom: 1px solid #f3f4f6;
}
.tpl-row:first-of-type {
padding-top: 24px;
}
.tpl-row:last-of-type {
border-bottom: none;
}
/* ── Row: Preview (left side) ────────────────────────────────── */
.tpl-row__preview {
position: sticky;
top: 80px;
}
.tpl-row__preview-link {
display: block;
text-decoration: none;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e5e7eb;
background: #f9fafb;
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 28px rgba(15, 23, 42, 0.06);
transform: translateZ(0);
transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.tpl-row__preview-link:hover {
border-color: #c7d2fe;
box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 24px 48px rgba(37, 99, 235, 0.14);
transform: translateY(-2px);
}
.tpl-row__img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 8.5 / 11;
object-fit: cover;
object-position: top center;
}
.tpl-row__placeholder {
aspect-ratio: 8.5 / 11;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: #f9fafb;
}
.tpl-row__placeholder-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
color: #9ca3af;
}
.tpl-row__placeholder-text {
font-size: 13px;
color: #9ca3af;
}
/* ── Row: Info Panel (right side) ────────────────────────────── */
.tpl-row__info {
padding: 8px 0;
}
.tpl-row__header {
margin: 0 0 16px;
}
.tpl-row__name {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 34px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.025em;
margin: 0 0 12px;
line-height: 1.08;
}
.tpl-row__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.tpl-row__category {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
background: #f3f4f6;
color: #374151;
border: 1px solid #e5e7eb;
}
.tpl-row__premium-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
background: #fef3c7;
color: #92400e;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid #fde68a;
}
.tpl-row__popular-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
background: #dcfce7;
color: #166534;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid #bbf7d0;
}
.tpl-row__best-for {
font-size: 14px;
color: #6b7280;
margin: 0 0 12px;
line-height: 1.5;
}
.tpl-row__best-for strong {
color: #374151;
}
.tpl-row__desc {
font-size: 15px;
color: #6b7280;
line-height: 1.65;
margin: 0 0 28px;
}
/* ── Row: Matching Letters Section ───────────────────────────── */
.tpl-row__letters {
background: linear-gradient(180deg, #fafbff 0%, #f6f7fb 100%);
border: 1px solid #eef0f6;
border-radius: 14px;
padding: 18px 18px 16px;
margin: 0 0 24px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.tpl-row__letters-title {
font-size: 12.5px;
font-weight: 800;
color: #0f172a;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
.tpl-row__letters-grid {
display: flex;
gap: 16px;
margin: 0 0 12px;
}
.tpl-row__letter-thumb {
flex: 0 0 auto;
width: 100px;
text-align: center;
}
.tpl-row__letter-img {
width: 100px;
height: auto;
aspect-ratio: 8.5 / 11;
object-fit: cover;
object-position: top center;
border-radius: 6px;
border: 1px solid #e5e7eb;
background: white;
display: block;
margin: 0 0 6px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.tpl-row__letter-thumb:hover .tpl-row__letter-img {
border-color: #d1d5db;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.tpl-row__letter-label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
}
.tpl-row__letters-pricing {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: #065f46;
background: #ecfdf5;
border: 1px solid #a7f3d0;
padding: 6px 10px;
border-radius: 100px;
margin: 0;
}
.tpl-row__letters-pricing svg { flex-shrink: 0; }
/* ── Row: CTA Buttons ────────────────────────────────────────── */
.tpl-row__cta-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.tpl-row__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all 0.15s ease;
cursor: pointer;
border: none;
font-family: inherit;
position: relative;
}
.tpl-row__cta--secondary {
background: white;
color: #111;
border: 1px solid #e5e7eb;
}
.tpl-row__cta--secondary:hover {
background: #f9fafb;
border-color: #d1d5db;
}
.tpl-row__cta--primary {
background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
color: white;
box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(15,23,42,0.22), 0 2px 4px rgba(15,23,42,0.12);
letter-spacing: 0.01em;
}
.tpl-row__cta--primary:hover {
background: linear-gradient(180deg, #111827 0%, #020617 100%);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 16px 32px rgba(15,23,42,0.28), 0 4px 8px rgba(15,23,42,0.16);
}
.tpl-row__cta--primary:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(15,23,42,0.18);
}
.tpl-row__cta-best {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: #22c55e;
color: white;
padding: 2px 8px;
border-radius: 100px;
margin-right: 4px;
}
/* ── Bundle Upsell Banner ────────────────────────────────────── */
.tpl-bundle-banner {
margin: 16px 0;
border-radius: 18px;
background:
radial-gradient(at 20% 10%, rgba(99,102,241,0.18) 0, transparent 55%),
radial-gradient(at 85% 90%, rgba(14,165,233,0.14) 0, transparent 50%),
linear-gradient(135deg, #f7f9ff 0%, #eef2ff 50%, #f5f3ff 100%);
border: 1px solid #e0e7ff;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 18px 48px rgba(79,70,229,0.10);
}
.tpl-bundle-banner__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 26px 34px;
}
.tpl-bundle-banner__copy {
flex: 1;
}
.tpl-bundle-banner__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 18px;
font-weight: 800;
color: #111;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.tpl-bundle-banner__sub {
font-size: 14px;
color: #6b7280;
margin: 0;
line-height: 1.5;
}
.tpl-bundle-banner__sub strong {
color: #111;
}
.tpl-bundle-banner__cta {
display: inline-flex;
align-items: center;
padding: 10px 22px;
background: #111;
color: white;
font-size: 13px;
font-weight: 700;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s;
flex-shrink: 0;
}
.tpl-bundle-banner__cta:hover {
background: #333;
}
/* ── Empty State ─────────────────────────────────────────────── */
.templates-empty { text-align: center; padding: 96px 0; }
.templates-empty__icon { width: 64px; height: 64px; border-radius: 16px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.templates-empty__title { font-size: 17px; font-weight: 600; color: #111; margin: 0 0 6px; }
.templates-empty__sub { font-size: 14px; color: #9ca3af; margin: 0; }
.tpl-empty-link { color: #2563eb; text-decoration: underline; }
.tpl-empty-link:hover { color: #1d4ed8; }
/* ── Legacy: templates hero + kind switcher (kept for show page) ── */
.templates-hero { border-bottom: 1px solid #f3f4f6; background: white; padding: 56px 20px 40px; }
.templates-hero__inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.templates-hero__copy { max-width: 560px; }
.templates-hero__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(32px,5vw,52px); font-weight: 800; color: #111; letter-spacing: -0.02em; margin: 20px 0 12px; line-height: 1.08; }
.templates-hero__sub { font-size: 17px; color: #6b7280; line-height: 1.6; margin: 0; }
.kind-switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.kind-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.15s; }
.kind-btn--active { background: #111; color: white; border: 1px solid #111; }
.kind-btn--inactive { background: white; color: #4b5563; border: 1px solid #e5e7eb; }
.kind-btn--inactive:hover { background: #f9fafb; border-color: #d1d5db; }
.templates-grid-section { max-width: 1280px; margin: 0 auto; padding: 40px 20px; }
.templates-count { font-size: 14px; color: #9ca3af; margin: 0 0 24px; }
.tpl-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.user-resumes-section { border-top: 1px solid #f3f4f6; background: #fafafa; padding: 56px 20px; }
.user-resumes-inner { max-width: 1280px; margin: 0 auto; }
.user-resumes-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 800; color: #111; margin: 0 0 24px; letter-spacing: -0.01em; }
.user-resumes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; }
.user-resume-card { border-radius: 16px; border: 1px solid #f3f4f6; background: white; padding: 20px; transition: border-color 0.15s; }
.user-resume-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.user-resume-card__title { font-size: 15px; font-weight: 600; color: #111; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-resume-card__date { font-size: 12px; color: #9ca3af; margin: 4px 0 0; }
.user-resume-card__icon { width: 32px; height: 32px; border-radius: 8px; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-resume-card__link { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-weight: 600; color: #374151; text-decoration: none; margin-top: 16px; transition: border-color 0.15s; }
.user-resume-card__link:hover { border-color: #d1d5db; }
.templates-cta-section { background: #111; padding: 64px 20px; text-align: center; }
.templates-cta-inner { max-width: 560px; margin: 0 auto; }
.templates-cta-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; color: white; margin: 0 0 12px; letter-spacing: -0.02em; }
.templates-cta-sub { font-size: 16px; color: #6b7280; margin: 0 0 28px; line-height: 1.5; }
.templates-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: white; color: #111; font-size: 14px; font-weight: 700; border-radius: 10px; text-decoration: none; transition: background 0.15s; }
.templates-cta-btn:hover { background: #f3f4f6; }
/* ============================================================
TEMPLATE CARD (legacy — used on show page recommendations)
============================================================ */
.tpl-card { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid #f3f4f6; background: white; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.tpl-card:hover { border-color: #e5e7eb; box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
.tpl-card__preview-link { display: block; flex-shrink: 0; text-decoration: none; }
.tpl-card__preview-inner { position: relative; aspect-ratio: 3/4; background: #f9fafb; overflow: hidden; }
.tpl-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tpl-card__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.tpl-card__placeholder-icon { width: 40px; height: 40px; border-radius: 10px; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #9ca3af; }
.tpl-card__placeholder-text { font-size: 12px; color: #9ca3af; }
.tpl-card__badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tpl-card__badge-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tpl-card__badge { font-size: 10px; font-weight: 500; padding: 3px 8px; border-radius: 100px; background: rgba(255,255,255,0.95); color: #374151; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.tpl-card__premium { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 100px; background: rgba(251,191,36,0.9); color: #78350f; text-transform: uppercase; letter-spacing: 0.05em; }
.tpl-card__body { padding: 14px 14px 16px; flex: 1; display: flex; flex-direction: column; }
.tpl-card__name { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-card__desc { font-size: 12px; color: #9ca3af; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; flex: 1; }
.tpl-card__actions { display: flex; gap: 8px; }
.tpl-card__preview-btn { flex: 1; display: block; text-align: center; padding: 9px 0; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 12px; font-weight: 600; color: #4b5563; text-decoration: none; background: white; transition: background 0.15s; }
.tpl-card__preview-btn:hover { background: #f9fafb; }
.tpl-card__use-btn { flex: 1; display: block; text-align: center; padding: 9px 0; border-radius: 8px; background: #111; color: white; font-size: 12px; font-weight: 700; text-decoration: none; transition: background 0.15s; border: none; cursor: pointer; font-family: inherit; width: 100%; }
.tpl-card__use-btn:hover { background: #333; }
.tpl-card__use-form { flex: 1; }
/* ============================================================
ATS CHECKER — DEDICATED PAGE (/ats-checker)
============================================================ */
.hidden { display: none !important; }
/* Hero */
.atsc-hero { padding: 64px 20px 0; background: white; }
.atsc-hero__inner { max-width: 1280px; margin: 0 auto; }
.atsc-hero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.atsc-hero__copy { max-width: 640px; cursor: default; }
.atsc-hero__start-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 12px;
padding: 6px 12px;
background: transparent;
color: #2563eb;
font-size: 0.8125rem;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
border-radius: 999px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.atsc-hero__start-link:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.atsc-hero__start-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (max-width: 640px) {
.atsc-hero__start-link { margin-left: 0; margin-top: 8px; }
}
.atsc-hero__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(32px, 5vw, 48px); font-weight: 800;
color: #111; letter-spacing: -0.02em; line-height: 1.1;
margin: 12px 0 12px;
}
.atsc-hero__sub { font-size: 17px; color: #6b7280; line-height: 1.6; margin: 0; }
.atsc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.atsc-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 500; color: #065f46;
background: #f0fdf4; border: 1px solid #bbf7d0;
padding: 5px 12px; border-radius: 100px;
}
/* Stats strip */
.atsc-stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 40px; padding: 28px 0; border-top: 1px solid #f3f4f6; }
.atsc-stat__num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; color: #111; margin: 0; }
.atsc-stat__text { font-size: 13px; color: #6b7280; margin: 2px 0 0; }
/* Body / Grid */
.atsc-body { padding: 40px 20px 0; }
.atsc-body__inner { max-width: 1280px; margin: 0 auto; }
.atsc-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
/* Shared card */
.atsc-card {
background: white; border: 1px solid #f3f4f6; border-radius: 20px;
padding: 24px; margin-bottom: 20px;
transition: border-color 0.15s;
}
.atsc-card:hover { border-color: #e5e7eb; }
.atsc-card__head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.atsc-card__label { display: block; font-size: 14px; font-weight: 600; color: #111; margin-bottom: 10px; }
.atsc-card__head .atsc-card__label { margin-bottom: 0; }
.atsc-card__hint { font-size: 12px; color: #6b7280; }
.atsc-card__textarea {
width: 100%; height: 200px; padding: 14px;
font-size: 14px; font-family: inherit; line-height: 1.6;
border: 1px solid #e5e7eb; border-radius: 12px;
background: #fafafa; resize: vertical; outline: none;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
box-sizing: border-box;
}
.atsc-card__textarea:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(17,24,39,0.06); background: white; }
.atsc-card__textarea::placeholder { color: #9ca3af; }
.atsc-card__warning {
margin-top: 12px; padding: 10px 14px;
font-size: 13px; color: #92400e; line-height: 1.5;
background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
}
.atsc-card__note { font-size: 12px; color: #6b7280; margin: 12px 0 0; line-height: 1.5; }
/* Actions row */
.atsc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
/* Sidebar */
.atsc-sidebar { position: sticky; top: 80px; }
/* Upload badges */
.atsc-upload-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.atsc-upload-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 500; color: #374151;
background: #f9fafb; border: 1px solid #e5e7eb;
padding: 3px 10px; border-radius: 100px;
}
/* Score result (light card) */
.atsc-result { padding: 28px; background: #fff; border-radius: 20px; border: 1px solid #e5e7eb; margin-bottom: 20px; }
.atsc-result__label { font-size: 13px; color: #6b7280; font-weight: 500; margin: 0 0 4px; }
.atsc-result__score {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 40px; font-weight: 900; color: #111;
margin: 0 0 16px; letter-spacing: -0.01em;
}
.atsc-result__bar { height: 8px; background: #f3f4f6; border-radius: 100px; overflow: hidden; margin-bottom: 20px; }
.atsc-result__fill { height: 8px; border-radius: 100px; background: #10b981; transition: width 0.8s ease; width: 0%; }
.atsc-result__missing-title { font-size: 13px; font-weight: 600; color: #374151; margin: 0 0 8px; }
.atsc-result__missing { font-size: 13px; color: #6b7280; line-height: 1.6; }
.atsc-result__keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.atsc-result__keyword {
display: inline-flex; align-items: center;
font-size: 11px; font-weight: 500; color: #374151;
background: #f9fafb; border: 1px solid #e5e7eb;
padding: 4px 10px; border-radius: 100px;
}
.atsc-result__ctas { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.atsc-result__btn-primary {
display: block; text-align: center; padding: 12px;
background: #111; color: #fff; font-size: 13px; font-weight: 700;
border-radius: 10px; text-decoration: none; transition: background 0.15s;
border: none; cursor: pointer; font-family: inherit; width: 100%;
}
.atsc-result__btn-primary:hover { background: #1f2937; }
.atsc-result__btn-secondary {
display: block; text-align: center; padding: 12px;
background: #fff; color: #374151; font-size: 13px; font-weight: 600;
border-radius: 10px; text-decoration: none; transition: color 0.15s, border-color 0.15s;
border: 1px solid #d1d5db;
}
.atsc-result__btn-secondary:hover { color: #111; border-color: #9ca3af; }
/* Bottom CTA band */
.atsc-cta { padding: 48px 20px 0; }
.atsc-cta__inner {
max-width: 1280px; margin: 0 auto;
background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);
border: 1px solid #e5e7eb; border-radius: 24px; padding: 40px;
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 24px;
}
.atsc-cta__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; color: #111; margin: 0 0 8px; }
.atsc-cta__sub { font-size: 14px; color: #6b7280; margin: 0 0 16px; line-height: 1.5; }
.atsc-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
/* ATS Conversion Bridge */
.ats-bridge {
background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(59,130,246,0.06) 100%);
border: 1px solid rgba(16,185,129,0.2);
border-radius: 16px;
padding: 24px;
margin-top: 16px;
text-align: center;
}
.ats-bridge__header {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-bottom: 16px;
}
.ats-bridge__title {
font-size: 0.9375rem; font-weight: 700; color: #f59e0b;
}
.ats-bridge__scores {
display: flex; align-items: center; justify-content: center; gap: 20px;
margin-bottom: 16px;
}
.ats-bridge__score { text-align: center; }
.ats-bridge__score-num {
display: block; font-size: 2rem; font-weight: 800; line-height: 1;
}
.ats-bridge__score--current .ats-bridge__score-num { color: #f43f5e; }
.ats-bridge__score--projected .ats-bridge__score-num { color: #10b981; }
.ats-bridge__score-label {
font-size: 0.75rem; color: #94a3b8; margin-top: 4px;
}
.ats-bridge__arrow { flex-shrink: 0; }
.ats-bridge__detail {
font-size: 0.875rem; color: #94a3b8; line-height: 1.5; margin: 0 0 12px;
}
.ats-bridge__prefill {
background: rgba(16,185,129,0.10);
border: 1px solid rgba(16,185,129,0.30);
border-radius: 10px;
padding: 10px 14px;
font-size: 0.8125rem;
color: #d1fae5;
line-height: 1.55;
margin: 0 0 12px;
text-align: left;
}
.ats-bridge__prefill strong { color: #fff; }
.ats-bridge__benefits {
display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
font-size: 0.8125rem; color: #94a3b8; margin-bottom: 16px;
}
.ats-bridge__benefits span { white-space: nowrap; }
.ats-bridge__cta {
display: inline-block; padding: 14px 32px;
background: #10b981; color: #fff; font-weight: 700; font-size: 0.9375rem;
border-radius: 10px; text-decoration: none; transition: background 0.15s;
}
.ats-bridge__cta:hover { background: #059669; }
.ats-bridge__guarantee {
font-size: 0.75rem; color: #64748b; margin: 8px 0 0;
}
@media(max-width:480px) {
.ats-bridge__scores { gap: 12px; }
.ats-bridge__score-num { font-size: 1.5rem; }
}
/* Adsense wrapper */
.atsc-ads { max-width: 1280px; margin: 0 auto; padding: 40px 20px; }
/* ============================================================
COOKIE CONSENT
============================================================ */
/* Banner */
.consent-banner {
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
z-index: 1000; width: min(640px, 93vw);
animation: consent-slide-up 0.35s ease-out;
}
@media (max-width: 768px) {
/* Compact bar — single row, ~64px tall — so the banner never occludes
more than the bottom strip of the viewport. The full title / detail
copy lives in the "Manage preferences" modal. Pre-fix the banner was
~310px tall on a 375×812 viewport (title + text + 3 stacked buttons),
which covered the submit on /users/sign_in and other short forms. */
.consent-banner {
bottom: 0; left: 0; right: 0; transform: none; width: 100%;
border-radius: 0; animation: none;
}
.consent-banner__inner {
border-radius: 0; border-left: none; border-right: none; border-bottom: none;
padding: 10px 14px; display: flex; align-items: center; gap: 8px;
}
.consent-banner__content { flex: 1 1 auto; min-width: 0; }
.consent-banner__title { display: none; }
.consent-banner__text {
font-size: 12px; line-height: 1.35; margin: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.consent-banner__text br, .consent-banner__link { display: none; }
.consent-banner__actions {
margin: 0; flex-direction: row; gap: 6px; flex-wrap: nowrap; flex-shrink: 0;
}
.consent-banner__btn { width: auto; padding: 8px 12px; font-size: 12px; }
/* Tertiary "Manage preferences" button is the longest — hide on mobile;
the modal that opens on tap is what actually offers the granular toggles. */
.consent-banner .btn-ghost.consent-banner__btn { display: none; }
.consent-banner--hiding { transform: translateY(10px); }
/* Even with the compact bar, reserve a little scroll room below short
pages so the user can always scroll the bottom of any form into a
fully tappable area above the banner. */
body:has(.consent-banner:not(.consent-banner--hiding)) { padding-bottom: 88px; }
}
/* On the Devise auth pages the banner is even more compact — title
already hidden on mobile, but on desktop too keep it lean so the
centered sign-in card stays the focal point. The actions and consent
choices still render so first-time visitors can satisfy GDPR/CCPA
even if they land directly on /users/sign_in. */
body.auth-page .consent-banner__title { display: none; }
body.auth-page .consent-banner__inner { padding: 12px 18px; }
body.auth-page .consent-banner__text { font-size: 13px; }
.consent-banner--hiding { opacity: 0; transform: translateX(-50%) translateY(10px); transition: opacity 0.3s, transform 0.3s; }
.consent-banner__inner {
background: white; border: 1px solid #e5e7eb; border-radius: 16px;
box-shadow: 0 12px 48px rgba(0,0,0,0.12); padding: 20px 24px;
}
.consent-banner__title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.consent-banner__text { font-size: 14px; color: #4b5563; line-height: 1.6; }
.consent-banner__link { color: #2563eb; text-decoration: underline; }
.consent-banner__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.consent-banner__btn { padding: 10px 20px; font-size: 14px; }
@media (max-width: 540px) {
/* Stack the consent buttons on narrow viewports so the
longest one (Manage preferences) doesn't overflow + clip. */
.consent-banner__actions { flex-direction: column; gap: 8px; }
.consent-banner__btn { width: 100%; padding: 12px 16px; }
}
/* Modal */
.consent-modal {
position: fixed; inset: 0; z-index: 1010;
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
padding: 16px;
}
.consent-modal--open { opacity: 1; visibility: visible; }
.consent-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.consent-modal__card {
position: relative; background: white; border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
width: min(480px, 93vw); max-height: 85vh;
display: flex; flex-direction: column;
}
.consent-modal__body { overflow-y: auto; flex: 1; padding: 8px 0; }
.consent-modal__footer { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid #f1f5f9; }
.consent-modal__header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px; border-bottom: 1px solid #f1f5f9;
}
.consent-modal__title { font-size: 17px; font-weight: 700; color: #0f172a; }
.consent-modal__close {
width: 32px; height: 32px; border-radius: 8px; border: none;
background: none; cursor: pointer; display: flex;
align-items: center; justify-content: center; color: #6b7280;
transition: background 0.15s;
}
.consent-modal__close:hover { background: #f1f5f9; }
/* Option rows */
.consent-opt {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 16px 24px;
}
.consent-opt + .consent-opt { border-top: 1px solid #f8fafc; }
.consent-opt__info { flex: 1; }
.consent-opt__name { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 2px; }
.consent-opt__desc { font-size: 13px; color: #6b7280; line-height: 1.5; }
/* Toggle switch */
.consent-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.consent-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.consent-toggle__track {
position: absolute; inset: 0; background: #d1d5db; border-radius: 24px;
cursor: pointer; transition: background 0.2s;
}
.consent-toggle__track::after {
content: ""; position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px; background: white; border-radius: 50%;
transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.consent-toggle input:checked + .consent-toggle__track { background: #111; }
.consent-toggle input:checked + .consent-toggle__track::after { transform: translateX(20px); }
.consent-toggle--locked .consent-toggle__track { background: #94a3b8; cursor: not-allowed; }
.consent-toggle--locked input:checked + .consent-toggle__track { background: #94a3b8; }
@keyframes consent-slide-up {
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* ============================================================
ANIMATIONS
============================================================ */
@keyframes ag-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
@keyframes ag-spin {
to { transform: rotate(360deg); }
}
.ag-spin { animation: ag-spin 0.7s linear infinite; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (min-width: 1024px) {
/* Desktop nav: full inline links don't fit until ~1024px without
wrapping ("AI Tools" → "AI / Tools", "Sign in" → "Sign / in", etc).
Tablets fall back to the hamburger so nav links stay legible. */
.site-nav { display: flex; }
.site-btn-ghost { display: inline-flex; align-items: center; }
}
@media (min-width: 768px) {
.footer-main { grid-template-columns: 2fr 3fr; }
}
@media (max-width: 1024px) {
.pricing-cards-grid { grid-template-columns: 1fr 1fr; }
.pricing-tools-grid { grid-template-columns: repeat(3, 1fr); }
.pricing-bundles-grid { grid-template-columns: 1fr 1fr; }
.pricing-teaser-grid { grid-template-columns: 1fr 1fr; }
.pricing-ats-inner { grid-template-columns: 1fr; }
.atsc-grid { grid-template-columns: 1fr; }
.atsc-sidebar { position: static; }
}
@media (max-width: 768px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-mockup { display: none; }
.stats-inner { grid-template-columns: 1fr 1fr; }
.steps-grid { grid-template-columns: 1fr; }
.ats-inner { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.pricing-teaser-grid { grid-template-columns: 1fr 1fr; }
.roles-grid { grid-template-columns: 1fr 1fr; }
.roles-idx-grid { grid-template-columns: 1fr; }
.roles-idx-hero { padding: 56px 20px 48px; }
.roles-idx-hero__badges { flex-direction: column; align-items: center; }
.roles-idx-cta { padding: 48px 20px; }
.roles-idx-cta__actions { flex-direction: column; align-items: center; }
.rshow-grid { grid-template-columns: 1fr; }
.rshow-sidebar { position: static; }
.rshow-hero { padding: 48px 20px 40px; }
.rshow-hero__actions { flex-direction: column; }
.rshow-hero__actions .btn { width: 100%; justify-content: center; }
.rshow-stats__inner { grid-template-columns: 1fr; border-radius: 16px; }
.rshow-stats__item:first-child { border-radius: 16px 16px 0 0; }
.rshow-stats__item:last-child { border-radius: 0 0 16px 16px; }
.rshow-tabs { flex-wrap: wrap; }
.rshow-recs-grid { grid-template-columns: repeat(2, 1fr); }
.rshow-docs-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
.rshow-bottom-cta { flex-direction: column; }
.rshow-bottom-cta .btn { width: 100%; justify-content: center; text-align: center; }
.hero-buttons { flex-direction: column; }
.cta-buttons { flex-direction: column; align-items: center; }
.pricing-cards-grid { grid-template-columns: 1fr 1fr; }
.pricing-tools-grid { grid-template-columns: 1fr 1fr; }
.pricing-bundles-grid { grid-template-columns: 1fr; max-width: 400px; }
.pricing-cta-buttons { flex-direction: column; align-items: center; }
.pricing-hiw-grid { grid-template-columns: 1fr; }
.kind-switcher { flex-direction: column; align-items: stretch; }
.tpl-row { grid-template-columns: 1fr; gap: 24px; }
.tpl-row__preview { position: static; max-width: 360px; margin: 0 auto; width: 100%; }
.tpl-row__name { font-size: 22px; }
.tpl-row__cta-group { flex-direction: column; }
.tpl-row__cta { width: 100%; text-align: center; }
.tpl-bundle-banner__inner { flex-direction: column; text-align: center; }
.tpl-bundle-banner__cta { width: 100%; text-align: center; justify-content: center; }
.atsc-hero__head { flex-direction: column; align-items: flex-start; }
.atsc-stats { gap: 20px; }
.atsc-cta__inner { padding: 28px; }
.atsc-cta__actions { width: 100%; }
}
@media (max-width: 480px) {
.pricing-cards-grid { grid-template-columns: 1fr; }
.pricing-tools-grid { grid-template-columns: 1fr; }
.pricing-bundles-grid { grid-template-columns: 1fr; }
.pricing-teaser-grid { grid-template-columns: 1fr; }
}
@media (min-width: 640px) { .tpl-grid { grid-template-columns: repeat(2,1fr); } .roles-idx-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .tpl-grid { grid-template-columns: repeat(3,1fr); } .roles-idx-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1200px) { .tpl-grid { grid-template-columns: repeat(4,1fr); } .roles-idx-grid { grid-template-columns: repeat(4,1fr); } }
/* ============================================================
Blog — Posts index & show
============================================================ */
/* Hero */
.blog-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%);
padding: 80px 20px 64px;
text-align: center;
}
.blog-hero__inner { max-width: 680px; margin: 0 auto; }
.blog-hero__eyebrow {
display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: #60a5fa; margin-bottom: 20px;
}
.blog-hero__title {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: white; line-height: 1.15;
margin-bottom: 16px;
}
.blog-hero__sub { font-size: 18px; color: #94a3b8; max-width: 520px; margin: 0 auto; }
/* Blog search bar (under hero copy) */
.blog-search {
display: flex; gap: 8px; max-width: 560px; margin: 24px auto 0;
}
.blog-search__input {
flex: 1; min-width: 0;
padding: 14px 16px; font-size: 15px; line-height: 1.2;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06); color: #f8fafc;
border-radius: 10px; outline: none;
}
.blog-search__input::placeholder { color: rgba(255,255,255,0.55); }
.blog-search__input:focus { border-color: rgba(99,102,241,0.6); box-shadow: 0 0 0 3px rgba(99,102,241,0.18); }
.blog-search__btn {
padding: 14px 22px; font-size: 14px; font-weight: 600;
background: #6366f1; color: #fff; border: none; border-radius: 10px; cursor: pointer;
transition: background 0.15s;
}
.blog-search__btn:hover { background: #4f46e5; }
@media (max-width: 600px) {
.blog-search { flex-direction: column; }
}
/* Category filter bar */
.blog-cats { border-bottom: 1px solid #e5e7eb; background: white; position: sticky; top: 0; z-index: 40; }
.blog-cats__inner {
display: flex; align-items: center; gap: 6px; padding: 14px 0;
overflow-x: auto; scrollbar-width: none;
}
.blog-cats__inner::-webkit-scrollbar { display: none; }
.blog-cat-pill {
display: inline-block; padding: 6px 16px; border-radius: 999px;
font-size: 14px; font-weight: 500; white-space: nowrap;
border: 1.5px solid #e5e7eb; color: #374151; text-decoration: none;
transition: all 0.15s; background: white;
}
.blog-cat-pill:hover { border-color: #111; color: #111; }
.blog-cat-pill--active { background: #111; color: white; border-color: #111; }
/* Category badges */
.blog-cat-badge {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
}
.blog-cat-badge--resume { background: #eff6ff; color: #2563eb; }
.blog-cat-badge--cover-letter { background: #f5f3ff; color: #7c3aed; }
.blog-cat-badge--motivational-letter{ background: #ecfdf5; color: #059669; }
.blog-cat-badge--ats-tips { background: #fff7ed; color: #c2410c; }
.blog-cat-badge--job-search { background: #fdf4ff; color: #a21caf; }
.blog-cat-badge--career { background: #f0fdf4; color: #15803d; }
/* Posts grid */
.blog-list-section { padding: 56px 0 80px; background: #f9fafb; }
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 48px;
}
.blog-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Post card */
.blog-card {
background: white; border-radius: 16px; padding: 28px;
border: 1px solid #e5e7eb; transition: box-shadow 0.2s, transform 0.2s;
display: flex; flex-direction: column; gap: 12px;
}
.blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.blog-card--featured {
grid-column: 1 / -1; flex-direction: column;
padding: 36px;
}
.blog-card--featured .blog-card__title { font-size: 22px; }
.blog-card--featured .blog-card__excerpt { max-width: 640px; }
.blog-card__cat-bar { display: flex; align-items: center; gap: 10px; }
.blog-card__read-time { font-size: 12px; color: #9ca3af; }
.blog-card__title { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; }
.blog-card__title-link { text-decoration: none; color: #111; }
.blog-card__title-link:hover { color: #2563eb; }
.blog-card__excerpt { font-size: 14px; color: #6b7280; line-height: 1.6; flex: 1; }
.blog-card__footer { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9ca3af; margin-top: auto; }
.blog-card__author { color: #374151; font-weight: 500; }
.blog-card__dot { color: #d1d5db; }
/* Pagination */
.blog-pagination {
display: flex; align-items: center; justify-content: center; gap: 20px;
padding: 8px 0;
}
.blog-pagination__btn {
display: inline-block; padding: 10px 24px; border-radius: 10px;
font-size: 14px; font-weight: 600; background: white; color: #111;
border: 1.5px solid #e5e7eb; text-decoration: none; transition: all 0.15s;
}
.blog-pagination__btn:hover { background: #111; color: white; border-color: #111; }
.blog-pagination__info { font-size: 14px; color: #9ca3af; }
/* Empty state */
.blog-empty { text-align: center; padding: 80px 20px; }
.blog-empty__text { font-size: 18px; color: #6b7280; margin-bottom: 24px; }
/* Blog CTA banner */
.blog-cta-banner {
background: linear-gradient(135deg, #111 0%, #1e3a5f 100%);
padding: 72px 20px; text-align: center;
}
.blog-cta-banner__title { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: white; margin-bottom: 14px; }
.blog-cta-banner__sub { font-size: 17px; color: #94a3b8; max-width: 500px; margin: 0 auto 32px; }
.blog-cta-banner__btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* ---- Single post ---- */
.post-header {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 64px 20px 56px;
}
.post-header__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.post-header__read-time { font-size: 13px; color: #94a3b8; }
.post-header__title {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: white;
line-height: 1.2; margin-bottom: 16px;
}
.post-header__deck { font-size: 18px; color: #94a3b8; max-width: 600px; margin-bottom: 28px; }
.post-header__byline { display: flex; align-items: center; gap: 12px; }
.post-header__avatar {
width: 36px; height: 36px; border-radius: 50%; background: #2563eb;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.post-header__author { font-size: 14px; font-weight: 600; color: white; }
.post-header__date { font-size: 13px; color: #64748b; }
/* Post body */
.post-body-wrap { padding: 56px 20px 24px; background: white; }
.post-body {
font-size: 17px; line-height: 1.8; color: #374151;
}
.post-body h2 {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: 1.5rem; font-weight: 700; color: #111; margin: 40px 0 16px;
}
.post-body h3 {
font-size: 1.15rem; font-weight: 700; color: #111; margin: 28px 0 12px;
}
.post-body p { margin-bottom: 20px; }
.post-body ul, .post-body ol { margin: 0 0 20px 20px; padding: 0; list-style: disc; }
.post-body li { margin-bottom: 8px; }
.post-body strong { color: #111; font-weight: 600; }
.post-body a { color: #2563eb; text-decoration: underline; }
.post-body a:hover { color: #1d4ed8; }
.post-body blockquote {
border-left: 4px solid #2563eb; padding: 16px 20px; background: #eff6ff;
border-radius: 0 8px 8px 0; margin: 24px 0; color: #1e40af; font-style: italic;
}
.post-body .tip-box {
background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px;
padding: 16px 20px; margin: 24px 0;
}
.post-body .tip-box strong { color: #059669; }
.post-body code {
background: #f3f4f6; border-radius: 4px; padding: 2px 6px;
font-size: 0.9em; font-family: monospace; color: #7c3aed;
}
/* In-post CTA */
.post-inline-cta {
display: flex; align-items: flex-start; gap: 20px;
background: linear-gradient(135deg, #eff6ff, #f5f3ff);
border: 1.5px solid #bfdbfe; border-radius: 16px;
padding: 28px; margin: 48px 0 32px;
}
.post-inline-cta__icon { font-size: 32px; flex-shrink: 0; line-height: 1; }
.post-inline-cta__title { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 6px; }
.post-inline-cta__sub { font-size: 14px; color: #6b7280; margin-bottom: 16px; line-height: 1.6; }
/* Back link */
.post-back { padding: 16px 0 48px; }
.post-back__link { font-size: 14px; color: #6b7280; text-decoration: none; }
.post-back__link:hover { color: #2563eb; }
/* Related posts */
.post-related { padding: 64px 0; background: #f9fafb; }
.post-related__title {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: 1.5rem; font-weight: 700; color: #111; margin-bottom: 32px;
}
/* Blog responsive */
@media (max-width: 1024px) {
.blog-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.blog-hero { padding: 56px 20px 48px; }
.blog-hero__title { font-size: 2rem; }
.blog-hero__sub { font-size: 16px; }
.blog-grid { grid-template-columns: 1fr; }
.blog-grid--3 { grid-template-columns: 1fr; }
.blog-card--featured { padding: 24px; }
.post-inline-cta { flex-direction: column; gap: 12px; }
.blog-cta-banner { padding: 48px 20px; }
.blog-cta-banner__btns { flex-direction: column; align-items: center; }
.post-header { padding: 48px 20px 40px; }
.post-body { font-size: 16px; }
}
/* ============================================================
Legal Pages (Privacy Policy, Terms of Service)
============================================================ */
/* Hero */
.legal-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
padding: 80px 20px 60px;
text-align: center;
}
.legal-hero .section-eyebrow {
color: #60a5fa;
}
.legal-hero__title {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: 2.75rem;
font-weight: 800;
color: white;
margin-top: 12px;
letter-spacing: -0.02em;
}
.legal-hero__meta {
font-size: 14px;
color: #94a3b8;
margin-top: 12px;
}
.legal-hero__lead {
font-size: 17px;
color: #cbd5e1;
line-height: 1.7;
margin-top: 20px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Body */
.legal-body {
padding: 56px 20px 80px;
background: white;
}
/* Table of Contents */
.legal-toc {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 24px 28px;
margin-bottom: 48px;
}
.legal-toc__heading {
font-weight: 700;
font-size: 14px;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 14px;
}
.legal-toc__list {
list-style: decimal;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.legal-toc__link {
font-size: 15px;
color: #2563eb;
text-decoration: none;
transition: color 0.15s;
}
.legal-toc__link:hover {
color: #1d4ed8;
text-decoration: underline;
}
/* Sections */
.legal-section {
padding-top: 40px;
margin-bottom: 8px;
}
.legal-h2 {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: 1.35rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.legal-h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 12px;
}
/* Text */
.legal-p {
font-size: 16px;
color: #374151;
line-height: 1.75;
}
.legal-p--spaced {
margin-top: 16px;
}
/* Lists */
.legal-list {
list-style: disc;
padding-left: 24px;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.legal-list li {
font-size: 16px;
color: #374151;
line-height: 1.7;
}
/* Links */
.legal-link {
color: #2563eb;
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.legal-link:hover {
color: #1d4ed8;
text-decoration: underline;
}
/* Contact card */
.legal-contact-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 24px 28px;
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.legal-contact-card__label {
font-weight: 600;
font-size: 15px;
color: #0f172a;
}
.legal-contact-card__email {
color: #2563eb;
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition: color 0.15s;
}
.legal-contact-card__email:hover {
color: #1d4ed8;
text-decoration: underline;
}
/* Legal responsive */
@media (max-width: 768px) {
.legal-hero { padding: 56px 20px 44px; }
.legal-hero__title { font-size: 2rem; }
.legal-hero__lead { font-size: 15px; }
.legal-body { padding: 40px 16px 60px; }
.legal-toc { padding: 20px 22px; }
.legal-h2 { font-size: 1.2rem; }
.legal-contact-card { padding: 20px 22px; }
}
/* ============================================================
Role × Template Preview Page (/roles/:slug/:kind/:template)
============================================================ */
/* Hero */
.rtp-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%); padding: 56px 20px 48px; }
.rtp-hero__inner { max-width: 1280px; margin: 0 auto; }
.rtp-hero__breadcrumbs {
display: flex; align-items: center; gap: 6px; margin-bottom: 20px;
font-size: 13px; flex-wrap: wrap;
}
.rtp-hero__crumb { color: #94a3b8; text-decoration: none; transition: color 0.15s; }
.rtp-hero__crumb:hover { color: white; }
.rtp-hero__crumb--current { color: #60a5fa; }
.rtp-hero__sep { color: #475569; }
.rtp-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.rtp-hero__badge {
display: inline-block; font-size: 11px; font-weight: 600;
color: #94a3b8; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.2);
padding: 4px 12px; border-radius: 999px; text-transform: capitalize;
}
.rtp-hero__badge--resume { color: #60a5fa; background: rgba(96,165,250,0.12); border-color: rgba(96,165,250,0.2); }
.rtp-hero__badge--cover-letter { color: #a78bfa; background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.2); }
.rtp-hero__badge--motivational-letter { color: #34d399; background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.2); }
.rtp-hero__badge--premium { color: #fbbf24; background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.2); }
.rtp-hero__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: white;
line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.02em;
}
.rtp-hero__sub { font-size: 16px; color: #94a3b8; max-width: 700px; line-height: 1.6; margin: 0 0 24px; }
.rtp-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Body */
.rtp-body { max-width: 1280px; margin: 0 auto; padding: 32px 20px 72px; }
.rtp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.rtp-main { display: flex; flex-direction: column; gap: 24px; }
/* Preview card */
.rtp-preview-card {
background: white; border-radius: 20px; border: 1px solid #e5e7eb;
overflow: hidden; transition: box-shadow 0.2s;
}
.rtp-preview-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.06); }
.rtp-preview-card__frame {
background: #f9fafb; padding: 24px; display: flex; justify-content: center;
}
.rtp-preview-card__img {
max-width: 100%; border-radius: 8px;
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
.rtp-preview-card__actions {
display: flex; gap: 10px; padding: 16px 24px 20px;
}
.rtp-preview-card__actions .form-block { flex: 1; }
.rtp-preview-card__actions .btn { flex: 1; justify-content: center; text-align: center; }
/* Siblings (other doc types) */
.rtp-siblings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
.rtp-sibling {
display: block; text-decoration: none; border-radius: 14px;
border: 1px solid #f3f4f6; overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.rtp-sibling:hover { border-color: #d1d5db; box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-2px); }
.rtp-sibling__badge {
display: inline-block; margin: 12px 12px 0; font-size: 11px; font-weight: 600;
padding: 4px 10px; border-radius: 999px;
color: #2563eb; background: #eff6ff;
}
.rtp-sibling__badge--cover-letter { color: #7c3aed; background: #f5f3ff; }
.rtp-sibling__badge--motivational-letter { color: #059669; background: #ecfdf5; }
.rtp-sibling__img { width: 100%; display: block; padding: 8px 12px 0; }
.rtp-sibling__foot {
padding: 10px 12px 12px; font-size: 13px; font-weight: 500;
color: #2563eb;
}
/* Related roles */
.rtp-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.rtp-related {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-radius: 10px; border: 1px solid #f3f4f6;
text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
.rtp-related:hover { border-color: #d1d5db; background: #f9fafb; }
.rtp-related__title { font-size: 14px; font-weight: 500; color: #374151; }
.rtp-related__arrow { font-size: 14px; color: #9ca3af; }
/* Kind sections on role show page */
.rtp-kind-links { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.rtp-kind-section__label {
font-size: 13px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: #9ca3af; margin: 0 0 10px;
}
.rtp-kind-section__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* RTP responsive */
@media (max-width: 768px) {
.rtp-grid { grid-template-columns: 1fr; }
.rtp-hero { padding: 40px 20px 36px; }
.rtp-hero__actions { flex-direction: column; }
.rtp-hero__actions .btn { width: 100%; justify-content: center; }
.rtp-siblings-grid { grid-template-columns: 1fr; max-width: 320px; }
.rtp-related-grid { grid-template-columns: 1fr; }
.rtp-preview-card__actions { flex-direction: column; }
.rtp-kind-section__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
TEMPLATE SHOW PAGE
============================================================ */
.tshow { max-width: 1280px; margin: 0 auto; padding: 32px 20px 64px; }
/* Breadcrumb bar */
.tshow-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tshow-back { font-size: 14px; color: #6b7280; text-decoration: none; }
.tshow-back:hover { color: #111; }
.tshow-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tshow-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 500; color: #6b7280;
background: white; border: 1px solid #e5e7eb;
padding: 4px 10px; border-radius: 999px;
}
.tshow-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
.tshow-badge--premium { border-color: #fde68a; background: #fffbeb; color: #92400e; }
/* Hero grid: content + sidebar */
.tshow-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; margin-top: 24px; }
/* Left column */
.tshow-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(32px, 4vw, 48px); font-weight: 800;
color: #111; letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
.tshow-subtitle { font-size: 17px; color: #6b7280; line-height: 1.5; margin: 8px 0 0; }
/* Trust row */
.tshow-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.tshow-trust__item {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: #374151;
background: white; border: 1px solid #e5e7eb;
padding: 6px 14px; border-radius: 999px;
}
.tshow-trust__check { color: #10b981; font-weight: 600; }
/* Mini stats */
.tshow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.tshow-stat {
background: white; border: 1px solid #e5e7eb; border-radius: 16px;
padding: 16px; text-align: center;
}
.tshow-stat__num { font-size: 24px; font-weight: 800; color: #111; letter-spacing: -0.02em; }
.tshow-stat__label { font-size: 12px; color: #9ca3af; margin-top: 4px; }
/* Role selector carousel */
.tshow-roles { margin-top: 32px; }
.tshow-roles__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tshow-roles__title { font-size: 14px; font-weight: 600; color: #111; margin: 0; }
.tshow-roles__sub { font-size: 12px; color: #9ca3af; margin: 4px 0 0; }
.tshow-roles__link { font-size: 13px; color: #6b7280; text-decoration: none; }
.tshow-roles__link:hover { color: #111; }
.tshow-roles__scroll { margin-top: 12px; overflow-x: auto; }
.tshow-roles__list { display: flex; gap: 8px; min-width: max-content; padding-bottom: 8px; }
.tshow-role-chip {
flex-shrink: 0; padding: 8px 16px; border-radius: 999px;
border: 1px solid #e5e7eb; background: white; font-size: 13px;
color: #374151; text-decoration: none; white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.tshow-role-chip:hover { background: #f9fafb; border-color: #d1d5db; }
.tshow-role-chip--active { background: #111; color: white; border-color: #111; }
.tshow-roles__empty { margin-top: 8px; font-size: 12px; color: #9ca3af; }
.tshow-roles__empty code {
padding: 2px 6px; border: 1px solid #e5e7eb; border-radius: 4px;
font-size: 11px; background: #f9fafb;
}
/* Big preview */
.tshow-preview { margin-top: 24px; }
.tshow-preview__frame {
position: relative; overflow: hidden; border-radius: 24px;
background: #f3f4f6; box-shadow: 0 4px 24px rgba(0,0,0,0.08);
max-width: 560px; margin: 0 auto;
}
.tshow-preview__overlay {
position: absolute; inset: 0; bottom: auto; padding: 16px;
display: flex; align-items: flex-start; justify-content: space-between;
z-index: 2; pointer-events: none;
}
.tshow-preview__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tshow-preview__tag {
font-size: 11px; padding: 4px 10px; border-radius: 999px;
background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
border: 1px solid rgba(0,0,0,0.05); color: #111;
}
.tshow-preview__label {
font-size: 11px; padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,0.8); color: white;
}
.tshow-preview__aspect { position: relative; overflow: hidden; max-height: 780px; }
.tshow-preview__img { display: block; width: 100%; height: auto; }
/* The bottom fade was spanning the entire frame's bottom 80px, which
covers the theme-picker swatches below the aspect image AND captured
clicks so the swatches weren't tappable. Scope it to the aspect
button only and make it click-through. */
.tshow-preview__fade {
position: absolute; left: 0; right: 0; bottom: 0; top: auto;
height: 80px;
background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
z-index: 1;
pointer-events: none;
}
.tshow-theme-picker { position: relative; z-index: 3; }
/* Preview caption */
.tshow-preview__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: #6b7280; }
.tshow-preview__caption span { display: inline-flex; align-items: center; gap: 4px; }
/* Feature grid */
.tshow-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.tshow-feature {
background: white; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px;
}
.tshow-feature__title { font-size: 14px; font-weight: 600; color: #111; margin: 0; }
.tshow-feature__desc { font-size: 13px; color: #6b7280; margin: 4px 0 0; line-height: 1.5; }
/* Sidebar sticky box */
.tshow-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.tshow-action-card {
background: white; border: 1px solid #e5e7eb; border-radius: 24px;
padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.tshow-action-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tshow-action-card__eyebrow { font-size: 13px; color: #6b7280; margin: 0; }
.tshow-action-card__name { font-size: 20px; font-weight: 800; color: #111; letter-spacing: -0.02em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tshow-action-card__kind { font-size: 13px; color: #6b7280; margin: 4px 0 0; }
.tshow-action-card__kind-sep { color: #d1d5db; margin: 0 2px; }
.tshow-premium-tag {
flex-shrink: 0; font-size: 11px; font-weight: 600;
padding: 4px 10px; border-radius: 999px;
border: 1px solid #fde68a; background: #fffbeb; color: #92400e;
}
/* CTA button */
.tshow-cta-btn {
display: block; width: 100%; padding: 14px 16px; margin-top: 16px;
background: #111; color: white; font-size: 15px; font-weight: 600;
border: none; border-radius: 16px; cursor: pointer; text-align: center;
font-family: inherit; transition: background 0.15s;
}
.tshow-cta-btn:hover { background: #333; }
/* Sub-actions */
.tshow-sub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tshow-sub-action {
display: block; padding: 10px 12px; text-align: center;
border: 1px solid #e5e7eb; border-radius: 16px;
font-size: 13px; font-weight: 600; color: #111;
text-decoration: none; transition: background 0.15s;
}
.tshow-sub-action:hover { background: #f9fafb; }
/* What you get box */
.tshow-perks { background: #f9fafb; border-radius: 16px; padding: 16px; margin-top: 16px; }
.tshow-perks__title { font-size: 14px; font-weight: 600; color: #111; margin: 0; }
.tshow-perks__list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tshow-perk { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #374151; }
.tshow-perk__dot { width: 6px; height: 6px; border-radius: 50%; background: #111; margin-top: 7px; flex-shrink: 0; }
.tshow-action-card__tip { font-size: 12px; color: #9ca3af; margin: 12px 0 0; }
/* Workflow card */
.tshow-workflow { background: white; border: 1px solid #e5e7eb; border-radius: 24px; padding: 20px; }
.tshow-workflow__title { font-size: 14px; font-weight: 600; color: #111; margin: 0; }
.tshow-workflow__desc { font-size: 13px; color: #6b7280; margin: 8px 0 0; line-height: 1.5; }
.tshow-workflow__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tshow-workflow__step {
text-align: center; padding: 12px; border: 1px solid #e5e7eb; border-radius: 16px;
}
.tshow-workflow__step-num { font-size: 16px; font-weight: 800; color: #111; }
.tshow-workflow__step-label { font-size: 11px; color: #6b7280; margin-top: 4px; }
/* Responsive */
@media (max-width: 1024px) {
/* minmax(0, 1fr) caps the column's min-width so max-content children
(the role-chip scrollable strip) don't stretch the grid off-screen. */
.tshow-hero { grid-template-columns: minmax(0, 1fr); }
.tshow-hero > * { min-width: 0; }
.tshow-sidebar { position: static; min-width: 0; }
.tshow-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tshow-roles__scroll { max-width: 100%; }
}
@media (max-width: 640px) {
.tshow { padding: 20px 16px 48px; }
.tshow-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
.tshow-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tshow-features { grid-template-columns: minmax(0, 1fr); }
.tshow-sub-actions { grid-template-columns: minmax(0, 1fr); }
.tshow-workflow__steps { grid-template-columns: minmax(0, 1fr); }
}
/* === Promo Banner ============================================ */
.promo-banner {
background: linear-gradient(90deg, #285EFF 0%, #7c3aed 100%);
color: #ffffff;
padding: 10px 16px;
font-size: 14px;
position: relative;
z-index: 100;
}
.promo-banner__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.promo-banner__text {
flex-shrink: 1;
}
.promo-banner__was {
text-decoration: line-through;
opacity: 0.7;
font-size: 0.85em;
}
.promo-banner__countdown {
display: flex;
align-items: center;
gap: 6px;
font-variant-numeric: tabular-nums;
}
.promo-banner__timer-label {
font-size: 12px;
opacity: 0.85;
}
.promo-banner__timer {
font-weight: 700;
font-size: 14px;
letter-spacing: 0.5px;
}
.promo-banner__cta {
background: #ffffff;
color: #285EFF;
padding: 6px 16px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: 13px;
white-space: nowrap;
transition: background 0.2s;
}
.promo-banner__cta:hover {
background: #f0f4ff;
}
.promo-banner__close {
background: none;
border: none;
color: rgba(255,255,255,0.7);
font-size: 20px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.promo-banner__close:hover {
color: #ffffff;
}
@media (max-width: 640px) {
.promo-banner__inner { flex-direction: column; gap: 8px; text-align: center; }
.promo-banner__countdown { justify-content: center; }
}
/* === Exit-Intent Popup ======================================= */
.exit-popup {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.exit-popup.hidden { display: none; }
.exit-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.exit-popup__card {
position: relative;
background: #ffffff;
border-radius: 16px;
padding: 40px 32px;
max-width: 440px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
animation: exitPopupSlide 0.3s ease-out;
}
@keyframes exitPopupSlide {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.exit-popup__close {
position: absolute;
top: 12px;
right: 16px;
background: none;
border: none;
font-size: 24px;
color: #9ca3af;
cursor: pointer;
line-height: 1;
}
.exit-popup__close:hover { color: #374151; }
.exit-popup__icon { font-size: 48px; margin-bottom: 12px; }
.exit-popup__title {
font-size: 22px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px;
}
.exit-popup__subtitle {
color: #6b7280;
font-size: 15px;
margin: 0 0 24px;
line-height: 1.5;
}
.exit-popup__form {
display: flex;
gap: 8px;
}
.exit-popup__input {
flex: 1;
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 15px;
outline: none;
transition: border-color 0.2s;
}
.exit-popup__input:focus { border-color: #285EFF; }
.exit-popup__submit {
background: #285EFF;
color: #ffffff;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.exit-popup__submit:hover { background: #1a4fd4; }
.exit-popup__disclaimer {
margin: 8px 0 0;
font-size: 12px;
color: #9ca3af;
}
.exit-popup__success .exit-popup__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #059669;
color: #ffffff;
font-size: 24px;
margin-bottom: 12px;
}
.exit-popup__success p {
color: #059669;
font-weight: 600;
font-size: 16px;
}
@media (max-width: 480px) {
.exit-popup__card { padding: 32px 20px; }
.exit-popup__form { flex-direction: column; }
.exit-popup__title { font-size: 19px; }
}
/* ── Inline email capture CTA ─────────────────────────────── */
.inline-capture {
margin: 32px 0;
border-radius: 12px;
background: linear-gradient(135deg, #f0f7ff 0%, #faf5ff 100%);
border: 1px solid #e0e7ff;
overflow: hidden;
}
.inline-capture__inner {
padding: 28px 24px;
}
.inline-capture__content {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 16px;
}
.inline-capture__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.inline-capture__title {
font-size: 17px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 4px;
}
.inline-capture__sub {
font-size: 14px;
color: #6b7280;
margin: 0;
}
.inline-capture__form {
display: flex;
gap: 8px;
}
.inline-capture__input {
flex: 1;
padding: 12px 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 15px;
font-family: inherit;
outline: none;
transition: border-color .15s;
}
.inline-capture__input:focus {
border-color: #285EFF;
box-shadow: 0 0 0 3px rgba(40,94,255,.1);
}
.inline-capture__btn {
padding: 12px 24px;
background: #285EFF;
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background .15s;
}
.inline-capture__btn:hover {
background: #1a4fd4;
}
.inline-capture__fine {
font-size: 12px;
color: #9ca3af;
margin: 8px 0 0;
}
.inline-capture__success {
display: flex;
align-items: center;
gap: 8px;
color: #10b981;
font-weight: 600;
font-size: 15px;
padding: 8px 0;
}
.inline-capture__success.hidden { display: none; }
@media (max-width: 600px) {
.inline-capture__form { flex-direction: column; }
.inline-capture__content { flex-direction: column; }
}
/* === Interview Prep Tool ======================================= */
.ip-hero { background: white; padding: 56px 24px 48px; }
.ip-hero__inner { max-width: 1200px; margin: 0 auto; }
.ip-hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ip-hero__copy { flex: 1; }
.ip-hero__title { font-size: 2.5rem; font-weight: 800; color: #111; line-height: 1.15; margin: 8px 0 16px; }
.ip-hero__sub { color: #6b7280; font-size: 1.1rem; line-height: 1.6; max-width: 600px; }
.ip-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ip-badge { background: #f0f0ff; border: 1px solid #c7d2fe; color: #6366f1; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; white-space: nowrap; }
.ip-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: center; }
.ip-stat__num { font-size: 2rem; font-weight: 800; color: #818cf8; margin-bottom: 2px; }
.ip-stat__text { font-size: 0.85rem; color: #6b7280; }
.ip-body { background: #fafbfc; padding: 0 24px 64px; }
.ip-body__inner { max-width: 1200px; margin: 0 auto; }
.ip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.ip-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.ip-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ip-card__label { font-size: 0.9rem; font-weight: 600; color: #374151; display: block; margin-bottom: 8px; }
.ip-card__hint { font-size: 0.75rem; color: #9ca3af; }
.ip-card__input { width: 100%; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; outline: none; }
.ip-card__input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.ip-card__textarea { width: 100%; min-height: 120px; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; resize: vertical; outline: none; font-family: inherit; }
.ip-card__textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.ip-actions { margin-top: 8px; }
.ip-actions .btn-primary { width: 100%; justify-content: center; }
.ip-count { font-size: 0.85rem; font-weight: 600; color: #6366f1; margin-bottom: 16px; }
.ip-results { display: flex; flex-direction: column; gap: 12px; }
.ip-question { background: white; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; transition: border-color 0.2s; }
.ip-question:hover { border-color: #c7d2fe; }
.ip-question__header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; }
.ip-question__num { width: 32px; height: 32px; border-radius: 50%; background: #eef2ff; color: #6366f1; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ip-question__meta { flex: 1; min-width: 0; }
.ip-question__category { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 10px; border-radius: 12px; border: 1px solid; margin-bottom: 6px; }
.ip-question__text { font-size: 0.95rem; font-weight: 600; color: #111; line-height: 1.4; }
.ip-question__chevron { color: #9ca3af; flex-shrink: 0; transition: transform 0.2s; }
.ip-question__chevron--open { transform: rotate(180deg); }
.ip-question__body { padding: 0 20px 20px 66px; }
.ip-question__section { margin-bottom: 16px; }
.ip-question__section:last-child { margin-bottom: 0; }
.ip-question__section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #6366f1; margin-bottom: 6px; }
.ip-question__why { font-size: 0.88rem; color: #6b7280; line-height: 1.6; }
.ip-question__answer { font-size: 0.88rem; color: #374151; line-height: 1.7; background: #f8fafc; border-left: 3px solid #6366f1; padding: 12px 16px; border-radius: 0 8px 8px 0; }
.ip-question__tips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ip-question__tips li { font-size: 0.85rem; color: #6b7280; padding-left: 20px; position: relative; line-height: 1.5; }
.ip-question__tips li::before { content: "\2713"; position: absolute; left: 0; color: #10b981; font-weight: 700; }
.ip-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 20px; color: #dc2626; font-size: 0.9rem; text-align: center; }
.ip-insight { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.ip-insight__title { font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: 16px; }
.ip-insight__items { display: flex; flex-direction: column; gap: 16px; }
.ip-insight__item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: #6b7280; line-height: 1.5; }
.ip-insight__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.ip-insight__cta { margin-top: 20px; font-size: 0.85rem; color: #6366f1; font-weight: 500; text-align: center; }
@media (max-width: 768px) {
.ip-hero__head { flex-direction: column; }
.ip-hero__title { font-size: 1.8rem; }
.ip-grid { grid-template-columns: 1fr; }
.ip-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ip-question__body { padding-left: 20px; }
}
/* ===== SALARY COACH ===== */
.sc-hero { background: white; padding: 56px 24px 48px; }
.sc-hero__inner { max-width: 1200px; margin: 0 auto; }
.sc-hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.sc-hero__copy { flex: 1; }
.sc-hero__title { font-size: 2.5rem; font-weight: 800; color: #111; line-height: 1.15; margin: 8px 0 16px; }
.sc-hero__sub { color: #6b7280; font-size: 1.1rem; line-height: 1.6; max-width: 600px; }
.sc-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sc-badge { background: #ecfdf5; border: 1px solid #a7f3d0; color: #059669; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; white-space: nowrap; }
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: center; }
.sc-stat__num { font-size: 2rem; font-weight: 800; color: #10b981; margin-bottom: 2px; }
.sc-stat__text { font-size: 0.85rem; color: #6b7280; }
.sc-body { background: #fafbfc; padding: 0 24px 64px; }
.sc-body__inner { max-width: 1200px; margin: 0 auto; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.sc-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.sc-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sc-card__label { font-size: 0.9rem; font-weight: 600; color: #374151; display: block; margin-bottom: 8px; }
.sc-card__hint { font-size: 0.75rem; color: #9ca3af; }
.sc-card__input { width: 100%; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; outline: none; }
.sc-card__input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.sc-actions { margin-top: 8px; }
.sc-actions .btn-primary { width: 100%; justify-content: center; }
.sc-results { display: flex; flex-direction: column; gap: 16px; }
.sc-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 16px; color: #dc2626; font-size: 0.9rem; }
.sc-confidence { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; text-align: center; }
.sc-confidence__label { font-size: 0.85rem; font-weight: 600; color: #6b7280; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.sc-confidence__bar { width: 100%; height: 12px; background: #f1f5f9; border-radius: 6px; overflow: hidden; margin-bottom: 8px; }
.sc-confidence__fill { height: 100%; border-radius: 6px; transition: width 0.8s ease; }
.sc-confidence__score { font-size: 1.4rem; font-weight: 800; }
.sc-section { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.sc-section__title { font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: 16px; }
.sc-salary-range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.sc-salary-range__item { background: #f9fafb; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; text-align: center; }
.sc-salary-range__item--mid { border-color: #a7f3d0; background: #ecfdf5; }
.sc-salary-range__label { font-size: 0.75rem; color: #6b7280; display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.sc-salary-range__value { font-size: 1.3rem; font-weight: 800; color: #111; }
.sc-salary-range__item--mid .sc-salary-range__value { color: #10b981; }
.sc-factors__title { font-size: 0.85rem; font-weight: 600; color: #6b7280; margin-bottom: 8px; }
.sc-factors ul { list-style: none; padding: 0; margin: 0; }
.sc-factors li { padding: 6px 0; color: #374151; font-size: 0.88rem; border-bottom: 1px solid #f1f5f9; }
.sc-factors li:last-child { border-bottom: none; }
.sc-factors li::before { content: "\2022"; color: #10b981; margin-right: 8px; }
.sc-script { background: #f9fafb; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
.sc-script__header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; }
.sc-script__label { font-size: 0.9rem; font-weight: 600; color: #374151; }
.sc-script__chevron { color: #9ca3af; transition: transform 0.2s; flex-shrink: 0; }
.sc-script__chevron--open { transform: rotate(180deg); }
.sc-script__body { padding: 0 16px 16px; }
.sc-script__body p { color: #374151; font-size: 0.88rem; line-height: 1.7; margin: 0; font-style: italic; }
.sc-talking-points { display: flex; flex-direction: column; gap: 12px; }
.sc-tp { display: flex; gap: 14px; align-items: flex-start; }
.sc-tp__num { width: 28px; height: 28px; background: rgba(16,185,129,.15); color: #10b981; font-weight: 700; font-size: 0.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-tp__point { font-size: 0.9rem; font-weight: 600; color: #374151; margin: 0 0 4px; }
.sc-tp__rationale { font-size: 0.82rem; color: #6b7280; margin: 0; line-height: 1.5; }
.sc-email { background: #f9fafb; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
.sc-email__text { color: #374151; font-size: 0.85rem; line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; font-family: inherit; margin: 0 0 12px; }
.sc-email__copy { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.3); border-radius: 6px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.sc-email__copy:hover { background: rgba(16,185,129,.25); }
.sc-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-dd__col ul { list-style: none; padding: 0; margin: 0; }
.sc-dd__heading { font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.sc-dd__heading--do { color: #10b981; }
.sc-dd__heading--dont { color: #ef4444; }
.sc-dd__item { padding: 8px 0; font-size: 0.85rem; color: #374151; border-bottom: 1px solid #f1f5f9; line-height: 1.5; }
.sc-dd__item:last-child { border-bottom: none; }
.sc-dd__item--do::before { content: "\2713"; color: #10b981; margin-right: 8px; font-weight: 700; }
.sc-dd__item--dont::before { content: "\2717"; color: #ef4444; margin-right: 8px; font-weight: 700; }
.sc-insight { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.sc-insight__title { font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: 16px; }
.sc-insight__items { display: flex; flex-direction: column; gap: 16px; }
.sc-insight__item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: #6b7280; line-height: 1.5; }
.sc-insight__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.sc-insight__cta { margin-top: 20px; font-size: 0.85rem; color: #10b981; font-weight: 500; text-align: center; }
@media (max-width: 768px) {
.sc-hero__head { flex-direction: column; }
.sc-hero__title { font-size: 1.8rem; }
.sc-grid { grid-template-columns: 1fr; }
.sc-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-salary-range { grid-template-columns: 1fr; }
.sc-dd { grid-template-columns: 1fr; }
}
/* ===== JOB MATCH SCORE ===== */
.jm-hero { background: white; padding: 56px 24px 48px; }
.jm-hero__inner { max-width: 1200px; margin: 0 auto; }
.jm-hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.jm-hero__copy { flex: 1; }
.jm-hero__title { font-size: 2.5rem; font-weight: 800; color: #111; line-height: 1.15; margin: 8px 0 16px; }
.jm-hero__sub { color: #6b7280; font-size: 1.1rem; line-height: 1.6; max-width: 600px; }
.jm-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.jm-badge { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; white-space: nowrap; }
.jm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: center; }
.jm-stat__num { font-size: 2rem; font-weight: 800; color: #f59e0b; margin-bottom: 2px; }
.jm-stat__text { font-size: 0.85rem; color: #6b7280; }
.jm-body { background: #fafbfc; padding: 0 24px 64px; }
.jm-body__inner { max-width: 1200px; margin: 0 auto; }
.jm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.jm-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.jm-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.jm-card__label { font-size: 0.9rem; font-weight: 600; color: #374151; display: block; margin-bottom: 8px; }
.jm-card__hint { font-size: 0.75rem; color: #9ca3af; }
.jm-card__input { width: 100%; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; outline: none; }
.jm-card__input:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.jm-card__textarea { width: 100%; min-height: 120px; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; resize: vertical; outline: none; font-family: inherit; }
.jm-card__textarea:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.jm-actions { margin-top: 8px; }
.jm-actions .btn-primary { width: 100%; justify-content: center; }
.jm-results { display: flex; flex-direction: column; gap: 16px; }
.jm-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 16px; color: #dc2626; font-size: 0.9rem; }
.jm-overall { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 32px; text-align: center; }
.jm-overall__circle { position: relative; width: 120px; height: 120px; margin: 0 auto 12px; }
.jm-overall__ring { width: 100%; height: 100%; }
.jm-overall__score { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.8rem; font-weight: 800; color: #111; }
.jm-overall__label { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
.jm-overall__verdict { font-size: 0.88rem; color: #6b7280; line-height: 1.6; max-width: 500px; margin: 0 auto; }
.jm-section { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.jm-section__title { font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: 16px; }
.jm-categories { display: flex; flex-direction: column; gap: 16px; }
.jm-cat { background: #f9fafb; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; }
.jm-cat__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.jm-cat__name { font-size: 0.9rem; font-weight: 600; color: #374151; }
.jm-cat__score { font-size: 1.1rem; font-weight: 800; }
.jm-cat__bar { width: 100%; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.jm-cat__fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.jm-cat__matched { font-size: 0.82rem; color: #6ee7b7; margin-bottom: 4px; line-height: 1.5; }
.jm-cat__missing { font-size: 0.82rem; color: #fca5a5; margin-bottom: 4px; line-height: 1.5; }
.jm-cat__suggestion { font-size: 0.82rem; color: #6b7280; margin: 6px 0 0; line-height: 1.5; font-style: italic; }
.jm-strengths { display: flex; flex-direction: column; gap: 8px; }
.jm-strength { font-size: 0.88rem; color: #6ee7b7; line-height: 1.5; }
.jm-gaps { display: flex; flex-direction: column; gap: 12px; }
.jm-gap { display: flex; gap: 12px; align-items: flex-start; background: #f9fafb; border-radius: 8px; padding: 14px; }
.jm-gap__severity { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; border: 1px solid; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }
.jm-gap__detail { flex: 1; }
.jm-gap__text { font-size: 0.88rem; font-weight: 600; color: #374151; margin: 0 0 4px; }
.jm-gap__fix { font-size: 0.82rem; color: #6b7280; margin: 0 0 4px; line-height: 1.5; }
.jm-gap__time { font-size: 0.75rem; color: #64748b; }
.jm-improvements { display: flex; flex-direction: column; gap: 8px; }
.jm-imp { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; color: #374151; line-height: 1.5; }
.jm-imp__num { width: 24px; height: 24px; background: rgba(245,158,11,.15); color: #f59e0b; font-weight: 700; font-size: 0.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jm-insight { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.jm-insight__title { font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: 16px; }
.jm-insight__items { display: flex; flex-direction: column; gap: 16px; }
.jm-insight__item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: #6b7280; line-height: 1.5; }
.jm-insight__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.jm-insight__cta { margin-top: 20px; font-size: 0.85rem; color: #f59e0b; font-weight: 500; text-align: center; }
@media (max-width: 768px) {
.jm-hero__head { flex-direction: column; }
.jm-hero__title { font-size: 1.8rem; }
.jm-grid { grid-template-columns: 1fr; }
.jm-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
/* ===== CAREER PATH MAPPER ===== */
.cp-hero { background: white; padding: 56px 24px 48px; }
.cp-hero__inner { max-width: 1200px; margin: 0 auto; }
.cp-hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.cp-hero__copy { flex: 1; }
.cp-hero__title { font-size: 2.5rem; font-weight: 800; color: #111; line-height: 1.15; margin: 8px 0 16px; }
.cp-hero__sub { color: #6b7280; font-size: 1.1rem; line-height: 1.6; max-width: 600px; }
.cp-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cp-badge { background: #f5f3ff; border: 1px solid #ddd6fe; color: #7c3aed; font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; white-space: nowrap; }
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: center; }
.cp-stat__num { font-size: 2rem; font-weight: 800; color: #8b5cf6; margin-bottom: 2px; }
.cp-stat__text { font-size: 0.85rem; color: #6b7280; }
.cp-body { background: #fafbfc; padding: 0 24px 64px; }
.cp-body__inner { max-width: 1200px; margin: 0 auto; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.cp-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.cp-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cp-card__label { font-size: 0.9rem; font-weight: 600; color: #374151; display: block; margin-bottom: 8px; }
.cp-card__hint { font-size: 0.75rem; color: #9ca3af; }
.cp-card__input { width: 100%; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; outline: none; }
.cp-card__input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.cp-card__textarea { width: 100%; min-height: 80px; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; resize: vertical; outline: none; font-family: inherit; }
.cp-card__textarea:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.cp-actions { margin-top: 8px; }
.cp-actions .btn-primary { width: 100%; justify-content: center; }
.cp-results { display: flex; flex-direction: column; gap: 16px; }
.cp-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 16px; color: #dc2626; font-size: 0.9rem; }
.cp-section__title { font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: 16px; }
.cp-assessment { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.cp-assessment__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.cp-assessment__item { background: #f9fafb; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; text-align: center; }
.cp-assessment__label { font-size: 0.7rem; color: #6b7280; display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.cp-assessment__value { font-size: 1rem; font-weight: 700; color: #111; }
.cp-assessment__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-skill-tag { background: #f5f3ff; color: #7c3aed; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 12px; }
.cp-skill-tag--sm { font-size: 0.7rem; padding: 3px 8px; }
.cp-section { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.cp-pathways { display: flex; flex-direction: column; gap: 12px; }
.cp-pathway { background: #f9fafb; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; overflow: hidden; }
.cp-pathway__header { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px; gap: 12px; }
.cp-pathway__name { font-size: 1rem; font-weight: 700; color: #374151; margin: 0 0 4px; }
.cp-pathway__desc { font-size: 0.82rem; color: #6b7280; margin: 0; line-height: 1.5; }
.cp-pathway__meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cp-pathway__diff { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.cp-pathway__chevron { color: #64748b; transition: transform 0.2s; }
.cp-pathway__chevron--open { transform: rotate(180deg); }
.cp-pathway__body { padding: 0 16px 16px; }
.cp-steps { display: flex; flex-direction: column; }
.cp-step { display: flex; gap: 16px; }
.cp-step__timeline { display: flex; flex-direction: column; align-items: center; width: 20px; flex-shrink: 0; }
.cp-step__dot { width: 12px; height: 12px; background: #8b5cf6; border-radius: 50%; flex-shrink: 0; }
.cp-step__line { width: 2px; flex: 1; background: #ddd6fe; margin: 4px 0; }
.cp-step__content { flex: 1; padding-bottom: 20px; }
.cp-step__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cp-step__title { font-size: 0.95rem; font-weight: 700; color: #374151; margin: 0; }
.cp-step__salary { font-size: 0.82rem; font-weight: 600; color: #10b981; }
.cp-step__time { font-size: 0.75rem; color: #8b5cf6; font-weight: 600; display: inline-block; margin-bottom: 8px; }
.cp-step__skills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cp-step__actions { list-style: none; padding: 0; margin: 0; }
.cp-step__actions li { padding: 3px 0; font-size: 0.82rem; color: #6b7280; line-height: 1.5; }
.cp-step__actions li::before { content: "\2192"; color: #8b5cf6; margin-right: 6px; }
.cp-skills-roadmap { display: flex; flex-direction: column; gap: 10px; }
.cp-roadmap-item { display: flex; gap: 12px; align-items: flex-start; background: #f9fafb; border-radius: 8px; padding: 14px; }
.cp-roadmap-item__prio { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; }
.cp-roadmap-item__skill { font-size: 0.9rem; font-weight: 600; color: #374151; margin: 0 0 4px; }
.cp-roadmap-item__how { font-size: 0.82rem; color: #6b7280; margin: 0 0 4px; line-height: 1.5; }
.cp-roadmap-item__time { font-size: 0.75rem; color: #64748b; }
.cp-insights { display: flex; flex-direction: column; gap: 10px; }
.cp-insight-item { font-size: 0.88rem; color: #374151; line-height: 1.5; background: #f9fafb; border-radius: 8px; padding: 12px 16px; }
.cp-insight { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.cp-insight__title { font-size: 1.1rem; font-weight: 700; color: #111; margin-bottom: 16px; }
.cp-insight__items { display: flex; flex-direction: column; gap: 16px; }
.cp-insight__item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: #6b7280; line-height: 1.5; }
.cp-insight__icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.cp-insight__cta { margin-top: 20px; font-size: 0.85rem; color: #8b5cf6; font-weight: 500; text-align: center; }
@media (max-width: 768px) {
.cp-hero__head { flex-direction: column; }
.cp-hero__title { font-size: 1.8rem; }
.cp-grid { grid-template-columns: 1fr; }
.cp-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cp-assessment__grid { grid-template-columns: 1fr; }
}
/* ============================================================
SEO LANDING PAGES
============================================================ */
/* Alert Banner (competitor downtime, time-sensitive notices) */
.seo-alert-banner { background: #fef3c7; border-bottom: 2px solid #f59e0b; padding: 16px 20px; }
.seo-alert-banner__inner { max-width: 800px; margin: 0 auto; display: flex; align-items: flex-start; gap: 12px; }
.seo-alert-banner__icon { font-size: 20px; line-height: 1.5; flex-shrink: 0; }
.seo-alert-banner__text { font-size: 14px; line-height: 1.6; color: #92400e; margin: 0; }
.seo-alert-banner__text strong { color: #78350f; }
.seo-alert-banner__link { color: #d97706; font-weight: 600; text-decoration: underline; }
.seo-alert-banner__link:hover { color: #b45309; }
/* Hero */
.seo-hero { background: white; padding: 80px 20px 64px; }
.seo-hero--dark { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%); }
.seo-hero__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.seo-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 6px 14px; border-radius: 100px; margin-bottom: 28px; }
.seo-hero--dark .seo-hero__badge { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); }
.seo-hero--dark .hero-badge__text { color: #6ee7b7; }
.seo-hero__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(32px,4.5vw,52px); font-weight: 800; color: #111; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 20px; }
.seo-hero__title--white { color: white; }
.seo-hero__sub { font-size: 17px; color: #6b7280; line-height: 1.65; max-width: 680px; margin: 0 auto 32px; }
.seo-hero__sub--light { color: #94a3b8; }
.seo-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 32px; }
.seo-hero__proof { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.hero-feature--light { color: #94a3b8; }
/* SEO Content (long-form) */
.seo-content { padding: 80px 20px; background: white; }
.seo-content__inner { max-width: 1280px; margin: 0 auto; }
.seo-content__two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.seo-content__main { display: flex; flex-direction: column; gap: 0; }
.seo-content__h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(24px,3vw,32px); font-weight: 800; color: #111; letter-spacing: -0.01em; margin: 0 0 20px; }
.seo-content__h3 { font-size: 18px; font-weight: 700; color: #111; margin: 32px 0 12px; }
.seo-content__p { font-size: 15px; color: #374151; line-height: 1.7; margin: 0 0 16px; }
.seo-content__list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.seo-content__list li { font-size: 15px; color: #374151; line-height: 1.65; padding-left: 24px; position: relative; }
.seo-content__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.seo-content__list--numbered { counter-reset: seo-list; }
.seo-content__list--numbered li { counter-increment: seo-list; padding-left: 32px; }
.seo-content__list--numbered li::before { content: counter(seo-list); background: #111; color: white; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; top: 3px; }
/* Sidebar cards */
.seo-content__sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; }
.seo-sidebar-card { background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 16px; padding: 24px; }
.seo-sidebar-card--dark { background: #111; border-color: #111; }
.seo-sidebar-card--highlight { background: #f0fdf4; border-color: #bbf7d0; }
.seo-sidebar-card__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin: 0 0 8px; }
.seo-sidebar-card__eyebrow--dim { color: #4b5563; }
.seo-sidebar-card__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; color: #111; margin: 0 0 8px; }
.seo-sidebar-card__title--white { color: white; }
.seo-sidebar-card__text { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 16px; }
.seo-sidebar-card__text--dim { color: #9ca3af; }
.seo-sidebar-card__cta { display: block; text-align: center; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; background: #111; color: white; transition: background 0.15s; }
.seo-sidebar-card__cta:hover { background: #333; }
.seo-sidebar-card__cta--white { background: white; color: #111; }
.seo-sidebar-card__cta--white:hover { background: #f3f4f6; }
.seo-sidebar-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.seo-sidebar-card__list li { font-size: 13px; color: #374151; padding-left: 16px; position: relative; line-height: 1.5; }
.seo-sidebar-card__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #10b981; }
/* Before/After Comparison */
.seo-comparison { padding: 80px 20px; background: #fafafa; border-top: 1px solid #f3f4f6; }
.seo-comparison__inner { max-width: 1000px; margin: 0 auto; }
.seo-comparison__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.seo-comparison__card { border-radius: 16px; padding: 28px; }
.seo-comparison__card--before { background: white; border: 1px solid #fecaca; }
.seo-comparison__card--after { background: white; border: 1px solid #bbf7d0; }
.seo-comparison__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 16px; }
.seo-comparison__label--red { color: #ef4444; }
.seo-comparison__label--green { color: #059669; }
.seo-comparison__content { font-size: 14px; color: #374151; line-height: 1.7; margin-bottom: 16px; }
.seo-comparison__content p { margin: 0 0 10px; }
.seo-comparison__verdict { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #6b7280; padding-top: 12px; border-top: 1px solid #f3f4f6; }
/* Feature grid */
.seo-features { padding: 80px 20px; background: #fafafa; border-top: 1px solid #f3f4f6; }
.seo-features__inner { max-width: 1280px; margin: 0 auto; }
.seo-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.seo-feature-card { background: white; border: 1px solid #f3f4f6; border-radius: 16px; padding: 28px; }
.seo-feature-card__title { font-size: 16px; font-weight: 700; color: #111; margin: 0 0 10px; }
.seo-feature-card__desc { font-size: 14px; color: #6b7280; line-height: 1.65; margin: 0; }
/* SEO Pricing section (reuses pt-card styles) */
.seo-pricing { padding: 80px 20px; background: white; }
.seo-pricing__inner { max-width: 1280px; margin: 0 auto; }
/* Template categories */
.seo-categories { padding: 64px 20px; background: white; }
.seo-categories__inner { max-width: 1280px; margin: 0 auto; }
.seo-categories__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.seo-category-card { background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 16px; padding: 24px; transition: border-color 0.15s; }
.seo-category-card:hover { border-color: #e5e7eb; }
.seo-category-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.seo-category-card__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; color: #111; margin: 0; }
.seo-category-card__badge { font-size: 11px; font-weight: 700; background: #111; color: white; padding: 3px 10px; border-radius: 20px; }
.seo-category-card__count { font-size: 13px; color: #9ca3af; font-weight: 500; margin: 0 0 10px; }
.seo-category-card__desc { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 16px; }
.seo-category-card__link { font-size: 14px; font-weight: 600; color: #111; text-decoration: none; }
.seo-category-card__link:hover { text-decoration: underline; }
/* SEO pages responsive */
@media (max-width: 768px) {
.seo-hero__title { font-size: clamp(28px, 6vw, 40px); }
.seo-content__two-col { grid-template-columns: 1fr; }
.seo-content__sidebar { position: static; }
.seo-comparison__grid { grid-template-columns: 1fr; }
.seo-features__grid { grid-template-columns: 1fr; }
.seo-categories__grid { grid-template-columns: 1fr; }
.seo-hero__proof { gap: 8px; }
}
/* ============================================================
MOBILE MENU — hamburger + slide-down
============================================================ */
body.mobile-menu-open { overflow: hidden; }
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 48px;
height: 48px;
padding: 10px;
background: none;
border: none;
cursor: pointer;
border-radius: 8px;
transition: background 0.15s;
}
.mobile-menu-toggle:hover { background: #f3f4f6; }
.mobile-menu-toggle__bar {
display: block;
width: 100%;
height: 2px;
background: #111;
border-radius: 2px;
transition: transform 0.25s, opacity 0.25s;
}
.mobile-menu-toggle--open .mobile-menu-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle--open .mobile-menu-toggle__bar:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle--open .mobile-menu-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu {
display: none;
background: white;
border-top: 1px solid #f3f4f6;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.mobile-menu--open {
max-height: 80vh;
overflow-y: auto;
}
.mobile-menu__nav {
padding: 8px 20px 16px;
display: flex;
flex-direction: column;
}
.mobile-menu__link {
display: block;
padding: 14px 0;
min-height: 44px;
font-size: 15px;
font-weight: 500;
color: #374151;
text-decoration: none;
border-bottom: 1px solid #f9fafb;
background: none;
border-left: none;
border-right: none;
border-top: none;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.mobile-menu__link:hover { color: #111; }
.mobile-menu__divider {
height: 1px;
background: #e5e7eb;
margin: 4px 0;
}
.mobile-menu__cta {
display: block;
text-align: center;
padding: 14px;
margin-top: 8px;
background: #111;
color: white;
font-weight: 600;
font-size: 15px;
border-radius: 10px;
text-decoration: none;
transition: background 0.15s;
}
.mobile-menu__cta:hover { background: #333; }
/* Collapsible groups (details/summary) */
.mobile-menu__group {
border-bottom: 1px solid #f3f4f6;
}
.mobile-menu__group-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
min-height: 44px;
font-size: 15px;
font-weight: 600;
color: #374151;
cursor: pointer;
list-style: none; /* hide default marker */
user-select: none;
}
.mobile-menu__group-title::-webkit-details-marker { display: none; }
.mobile-menu__group-title::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid #9ca3af;
border-bottom: 2px solid #9ca3af;
transform: rotate(-45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
margin-left: 8px;
}
.mobile-menu__group[open] > .mobile-menu__group-title::after {
transform: rotate(45deg);
}
.mobile-menu__group-items {
padding-left: 12px;
padding-bottom: 6px;
}
.mobile-menu__group-items .mobile-menu__link {
padding: 10px 0;
font-size: 14px;
color: #6b7280;
}
.mobile-menu__group-items .mobile-menu__link:hover {
color: #111;
}
@media (max-width: 1023px) {
/* Bumped from 767 → 1023 so tablets keep the hamburger.
The full inline desktop nav requires ~1024px to render
without text wrapping. */
.mobile-menu-toggle { display: flex; }
.mobile-menu { display: block; }
.site-actions { display: none; }
/* Hero mobile polish */
.hero-section { padding: 48px 16px 40px; }
.hero-title { font-size: clamp(28px, 7vw, 44px); }
.hero-sub { font-size: 15px; max-width: 100%; }
.hero-buttons { flex-direction: column; width: 100%; }
.hero-buttons .btn,
.hero-buttons .site-btn-cta {
width: 100%;
justify-content: center;
text-align: center;
padding: 14px 20px;
font-size: 16px;
}
.hero-features { gap: 8px; }
.hero-feature { font-size: 12px; }
/* Stats mobile */
.stats-inner { gap: 12px; }
.stat-card { padding: 16px; }
.stat-card__value { font-size: clamp(24px, 5vw, 36px); }
/* CTA section mobile */
.cta-section { padding: 56px 16px; }
.cta-buttons { width: 100%; }
.cta-buttons .btn,
.cta-buttons .site-btn-cta { width: 100%; justify-content: center; }
/* Footer mobile */
.footer-main { grid-template-columns: 1fr; gap: 24px; }
.footer-nav { grid-template-columns: repeat(2, 1fr); }
.footer-bottom { text-align: center; }
/* Pricing mobile */
.pricing-hero { padding: 48px 16px 40px; }
.pricing-hero__title { font-size: clamp(28px, 6vw, 44px); }
/* General touch targets — WCAG 2.5.8 Target Size minimum 48px */
.btn, button, a.site-btn-cta, a.site-btn-ghost {
min-height: 48px;
}
}
/* Extra-small phone tweaks */
@media (max-width: 374px) {
.ag-container, .ag-container-mid, .ag-container-sm { padding: 0 12px; }
.hero-section { padding: 36px 12px 32px; }
.hero-title { font-size: 26px; }
.mobile-menu__nav { padding: 8px 12px 16px; }
}
/* === Bug Report Form (footer) =============================== */
.footer-bug-report { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-bug-details { max-width: 400px; }
.footer-bug-trigger { font-size: 12px; color: #6b7280; cursor: pointer; user-select: none; }
.footer-bug-trigger:hover { color: #9ca3af; }
.footer-bug-form-wrap { margin-top: 12px; }
.footer-bug-form { display: flex; flex-direction: column; gap: 8px; }
.footer-bug-input, .footer-bug-textarea {
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #d1d5db;
font-family: inherit; width: 100%;
}
.footer-bug-input::placeholder, .footer-bug-textarea::placeholder { color: #4b5563; }
.footer-bug-input:focus, .footer-bug-textarea:focus { outline: none; border-color: #6366f1; }
.footer-bug-textarea { resize: vertical; min-height: 60px; }
.footer-bug-btn {
align-self: flex-start; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
color: #9ca3af; font-size: 12px; font-weight: 600; padding: 6px 16px; border-radius: 6px;
cursor: pointer; transition: all 0.15s;
}
.footer-bug-btn:hover { background: rgba(255,255,255,0.14); color: white; }
.footer-bug-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.footer-bug-success {
background: rgba(5, 150, 105, 0.12); border: 1px solid rgba(5, 150, 105, 0.3);
color: #34d399; font-size: 13px; padding: 12px 16px; border-radius: 8px; line-height: 1.5;
}
.footer-bug-error {
background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.3);
color: #fca5a5; font-size: 12px; padding: 8px 12px; border-radius: 6px;
}
/* ============================================================
Sticky Mobile CTA Bar
============================================================ */
.sticky-mobile-cta {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
background: white;
border-top: 1px solid #e5e7eb;
box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}
.sticky-mobile-cta--hidden { transform: translateY(100%); }
.sticky-mobile-cta--visible { transform: translateY(0); }
.sticky-mobile-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
max-width: 480px;
margin: 0 auto;
}
.sticky-mobile-cta__info { display: flex; flex-direction: column; gap: 2px; }
.sticky-mobile-cta__price { font-size: 15px; color: #111; }
.sticky-mobile-cta__price strong { font-weight: 700; color: #059669; }
.sticky-mobile-cta__note { font-size: 11px; color: #6b7280; }
.sticky-mobile-cta__btn {
display: inline-flex;
align-items: center;
gap: 6px;
/* 14px vertical padding + 15px font + 1.2 line-height ≈ 46px total
height — clears Apple HIG (44pt) and Material (48dp) touch-target
minimums. Pre-2026-05-16 was 10/20px which rendered as ~37px, just
small enough to mistap on a thumb-driven mobile flow. */
padding: 14px 22px;
background: #285EFF;
color: white;
font-size: 15px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s;
}
.sticky-mobile-cta__btn:hover { background: #1d4ed8; }
@media (min-width: 769px) {
.sticky-mobile-cta { display: none !important; }
}
@media (max-width: 768px) {
.sticky-mobile-cta { display: block; }
/* Add bottom padding to body so sticky bar doesn't overlap footer content */
body { padding-bottom: 64px; }
}
/* ============================================================
Social Proof FOMO Toast
============================================================ */
.social-proof-toast {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 800;
max-width: 340px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.social-proof-toast--visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.social-proof-toast--hiding {
opacity: 0;
transform: translateY(20px);
}
.social-proof-toast__inner {
display: flex;
align-items: flex-start;
gap: 10px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.social-proof-toast__icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: #ecfdf5;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.social-proof-toast__content { flex: 1; min-width: 0; }
.social-proof-toast__text {
font-size: 13px;
font-weight: 500;
color: #111;
line-height: 1.4;
}
.social-proof-toast__time {
font-size: 11px;
color: #9ca3af;
margin-top: 2px;
}
.social-proof-toast__close {
flex-shrink: 0;
background: none;
border: none;
color: #9ca3af;
font-size: 18px;
cursor: pointer;
padding: 0;
line-height: 1;
}
.social-proof-toast__close:hover { color: #6b7280; }
@media (max-width: 768px) {
.social-proof-toast {
left: 12px;
right: 12px;
bottom: 80px; /* Above sticky CTA */
max-width: none;
}
}
/* ============================================================
Pricing Page — Activity Counter & Comparison
============================================================ */
.pricing-activity {
text-align: center;
padding: 0 20px;
margin-top: -12px;
margin-bottom: 32px;
}
.pricing-activity__counter {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fefce8;
border: 1px solid #fde68a;
border-radius: 20px;
padding: 6px 16px;
font-size: 13px;
color: #92400e;
font-weight: 500;
}
.pricing-activity__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #f59e0b;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Comparison table */
.pricing-comparison {
max-width: 800px;
margin: 0 auto;
padding: 64px 20px;
}
.pricing-comparison__title {
text-align: center;
font-size: 24px;
font-weight: 700;
color: #111;
margin-bottom: 32px;
}
.pricing-comparison__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.pricing-comparison__table th,
.pricing-comparison__table td {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid #f1f5f9;
}
.pricing-comparison__table th {
font-weight: 600;
color: #111;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
background: #f8fafc;
}
.pricing-comparison__table td { color: #374151; }
.pricing-comparison__table td:first-child { font-weight: 500; color: #111; }
.pricing-comparison__highlight {
background: rgba(40,94,255,0.04);
border-left: 3px solid #285EFF;
}
.pricing-comparison__check { color: #10b981; font-weight: 600; }
.pricing-comparison__x { color: #ef4444; }
/* Guarantee badge */
.pricing-guarantee {
text-align: center;
padding: 32px 20px 0;
}
.pricing-guarantee__badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 12px;
padding: 14px 24px;
}
.pricing-guarantee__icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: #10b981;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pricing-guarantee__text {
text-align: left;
}
.pricing-guarantee__title {
font-size: 14px;
font-weight: 600;
color: #065f46;
}
.pricing-guarantee__sub {
font-size: 12px;
color: #047857;
margin-top: 2px;
}
/* ATS results email capture */
.atsc-result__capture {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
.atsc-result__capture-title {
font-size: 12px;
font-weight: 600;
color: #6b7280;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.atsc-result__capture-form {
display: flex;
gap: 8px;
}
.atsc-result__capture-input {
flex: 1;
padding: 8px 12px;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 6px;
color: #111;
font-size: 13px;
font-family: inherit;
}
.atsc-result__capture-input::placeholder { color: #64748b; }
.atsc-result__capture-input:focus { outline: none; border-color: #285EFF; }
.atsc-result__capture-btn {
padding: 8px 14px;
background: #285EFF;
color: white;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
font-family: inherit;
transition: background 0.15s;
}
.atsc-result__capture-btn:hover { background: #1d4ed8; }
.atsc-result__capture-note {
font-size: 11px;
color: #64748b;
margin-top: 6px;
}
.atsc-result__capture-success {
display: flex;
align-items: center;
gap: 6px;
color: #10b981;
font-size: 13px;
font-weight: 500;
}
/* ============================================================
Free Tools Callout (Homepage)
============================================================ */
.free-tools-callout {
padding: 64px 20px;
background: #f8fafc;
border-top: 1px solid #f1f5f9;
border-bottom: 1px solid #f1f5f9;
}
.free-tools-callout__inner {
max-width: 1080px;
margin: 0 auto;
text-align: center;
}
.free-tools-callout__head { margin-bottom: 36px; }
.free-tools-callout__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.free-tools-callout__card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px 16px;
text-align: left;
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.free-tools-callout__card:hover {
border-color: #285EFF;
box-shadow: 0 2px 8px rgba(40,94,255,0.08);
}
.free-tools-callout__dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-bottom: 12px;
}
.free-tools-callout__name {
font-size: 14px;
font-weight: 600;
color: #111;
margin-bottom: 4px;
}
.free-tools-callout__desc {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
.free-tools-callout__link {
display: inline-block;
font-size: 14px;
font-weight: 600;
color: #285EFF;
text-decoration: none;
}
.free-tools-callout__link:hover { text-decoration: underline; }
@media (max-width: 640px) {
.free-tools-callout__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
Launch Price Banner (Urgency)
============================================================ */
.pricing-launch-banner {
background: linear-gradient(90deg, #1e293b, #0f172a);
padding: 10px 20px;
}
.pricing-launch-banner__inner {
max-width: 800px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
color: #e2e8f0;
}
.pricing-launch-banner__icon { font-size: 16px; }
.pricing-launch-banner__text strong { color: #fbbf24; }
/* ============================================================
Money-Back Guarantee Badge
============================================================ */
.pricing-guarantee {
display: flex;
justify-content: center;
padding: 0 20px;
margin-bottom: 48px;
}
.pricing-guarantee__badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 12px;
padding: 14px 20px;
}
.pricing-guarantee__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: #10b981;
display: flex;
align-items: center;
justify-content: center;
}
.pricing-guarantee__title {
font-size: 14px;
font-weight: 700;
color: #065f46;
margin: 0;
}
.pricing-guarantee__sub {
font-size: 12px;
color: #047857;
margin: 2px 0 0 0;
}
/* ============================================================
Testimonials Grid
============================================================ */
.pricing-testimonials {
max-width: 1000px;
margin: 0 auto;
padding: 64px 20px;
}
.pricing-testimonials__title {
text-align: center;
font-size: 24px;
font-weight: 700;
color: #111;
margin-bottom: 36px;
}
.pricing-testimonials__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.pricing-testimonial-card {
background: white;
border: 1px solid #f1f5f9;
border-radius: 16px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.pricing-testimonial-card__stars {
display: flex;
gap: 2px;
margin-bottom: 12px;
}
.pricing-testimonial-card__text {
font-size: 14px;
line-height: 1.6;
color: #374151;
margin-bottom: 16px;
}
.pricing-testimonial-card__author {
display: flex;
align-items: center;
gap: 10px;
}
.pricing-testimonial-card__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #eff6ff;
color: #2563eb;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.pricing-testimonial-card__name {
font-size: 13px;
font-weight: 600;
color: #111;
margin: 0;
}
.pricing-testimonial-card__role {
font-size: 12px;
color: #6b7280;
margin: 1px 0 0 0;
}
@media (max-width: 640px) {
.pricing-testimonials__grid { grid-template-columns: 1fr; }
}
/* ── LinkedIn Optimizer Tool ── */
.li-hero { background: white; padding: 56px 24px 48px; }
.li-hero__inner { max-width: 1200px; margin: 0 auto; }
.li-hero__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.li-hero__copy { flex: 1; }
.li-hero__title { font-size: 2.5rem; font-weight: 800; color: #111; line-height: 1.15; margin: 8px 0 16px; }
.li-hero__sub { color: #6b7280; font-size: 1.1rem; line-height: 1.6; max-width: 600px; }
.li-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.li-badge { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 20px; padding: 6px 14px; color: #059669; font-size: 0.82rem; font-weight: 500; }
.li-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; text-align: center; }
.li-stat__num { font-size: 2.2rem; font-weight: 800; color: #10b981; margin: 0; }
.li-stat__text { color: #6b7280; font-size: 0.85rem; margin: 4px 0 0; }
.li-body { background: #fafbfc; padding: 0 24px 64px; }
.li-body__inner { max-width: 1200px; margin: 0 auto; }
.li-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.li-card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.li-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.li-card__label { font-size: 0.9rem; font-weight: 600; color: #374151; display: block; margin-bottom: 8px; }
.li-card__hint { font-size: 0.75rem; color: #9ca3af; }
.li-card__input { width: 100%; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; outline: none; box-sizing: border-box; }
.li-card__input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.li-card__textarea { width: 100%; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 8px; padding: 12px 14px; color: #111; font-size: 0.95rem; outline: none; resize: vertical; font-family: inherit; line-height: 1.5; box-sizing: border-box; }
.li-card__textarea:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.li-actions { margin-top: 8px; }
.li-results { display: flex; flex-direction: column; gap: 20px; }
.li-section { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.li-section__title { font-size: 1.1rem; font-weight: 700; color: #111; margin: 0 0 16px; }
.li-headline-box, .li-about-box, .li-otw-box { background: #f9fafb; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; position: relative; }
.li-headline-text { color: #111; font-size: 1.05rem; font-weight: 600; margin: 0; line-height: 1.5; }
.li-about-text { color: #374151; font-size: 0.9rem; line-height: 1.7; margin: 0; white-space: pre-wrap; font-family: inherit; }
.li-otw-text { color: #111; font-size: 0.95rem; line-height: 1.6; margin: 0; }
.li-copy-btn { position: absolute; top: 10px; right: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #059669; font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 6px; cursor: pointer; }
.li-copy-btn:hover { background: #d1fae5; }
.li-hint { color: #64748b; font-size: 0.8rem; margin: 10px 0 0; }
.li-exp { margin-bottom: 16px; }
.li-exp:last-child { margin-bottom: 0; }
.li-exp__role { color: #374151; font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; }
.li-exp__list { margin: 0; padding-left: 20px; color: #374151; font-size: 0.9rem; line-height: 1.6; }
.li-exp__list li { margin-bottom: 6px; }
.li-skills, .li-keywords { display: flex; flex-wrap: wrap; gap: 8px; }
.li-skill-tag { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 16px; padding: 5px 14px; color: #059669; font-size: 0.82rem; font-weight: 500; }
.li-keyword-tag { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 16px; padding: 5px 14px; color: #6366f1; font-size: 0.82rem; font-weight: 500; }
.li-tips { display: flex; flex-direction: column; gap: 12px; }
.li-tip { background: #f9fafb; border-radius: 8px; padding: 14px; }
.li-tip__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.li-tip__section { color: #374151; font-weight: 600; font-size: 0.9rem; }
.li-tip__impact { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.li-tip__text { color: #6b7280; font-size: 0.85rem; line-height: 1.5; margin: 0; }
.li-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 16px; color: #dc2626; font-size: 0.9rem; }
.li-insight { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 28px; }
.li-insight__title { font-size: 1.15rem; font-weight: 700; color: #111; margin: 0 0 20px; }
.li-insight__items { display: flex; flex-direction: column; gap: 16px; }
.li-insight__item { display: flex; gap: 14px; align-items: flex-start; color: #6b7280; font-size: 0.9rem; line-height: 1.6; }
.li-insight__icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.li-insight__cta { color: #64748b; font-size: 0.85rem; margin: 20px 0 0; font-style: italic; }
@media (max-width: 768px) {
.li-grid { grid-template-columns: 1fr; }
.li-hero__head { flex-direction: column; }
.li-hero__title { font-size: 1.8rem; }
.li-stats { grid-template-columns: 1fr; gap: 16px; }
}
/* ============================================================
Tool Upgrade CTA Banner — Premium Styled
============================================================ */
.tool-upgrade-cta { margin: 0; padding: 0; }
.tool-upgrade-cta__inner {
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
border-top: 1px solid rgba(99,102,241,0.2);
padding: 56px 32px;
text-align: center;
position: relative;
overflow: hidden;
}
.tool-upgrade-cta__inner::before {
content: '';
position: absolute;
top: -80%;
right: -15%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
pointer-events: none;
}
.tool-upgrade-cta__inner::after {
content: '';
position: absolute;
bottom: -60%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
pointer-events: none;
}
.tool-upgrade-cta__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(245,158,11,0.12);
color: #f59e0b;
font-size: 12px;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tool-upgrade-cta__title {
font-size: 28px;
font-weight: 800;
color: #f1f5f9;
margin: 0 0 10px;
letter-spacing: -0.02em;
}
.tool-upgrade-cta__desc {
color: #94a3b8;
font-size: 16px;
max-width: 600px;
margin: 0 auto 20px;
line-height: 1.5;
}
.tool-upgrade-cta__pricing {
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.tool-upgrade-cta__price-old {
font-size: 20px;
color: #64748b;
text-decoration: line-through;
}
.tool-upgrade-cta__price-new {
font-size: 36px;
font-weight: 800;
color: #10b981;
}
.tool-upgrade-cta__price-code {
background: rgba(99,102,241,0.15);
color: #a5b4fc;
padding: 5px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
}
.tool-upgrade-cta__features {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 28px;
color: #94a3b8;
font-size: 14px;
}
.tool-upgrade-cta__features span { white-space: nowrap; }
.tool-upgrade-cta__actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.tool-upgrade-cta__btn-primary {
display: inline-flex;
align-items: center;
padding: 16px 36px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #fff;
font-weight: 700;
font-size: 16px;
border-radius: 10px;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
}
.tool-upgrade-cta__btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(99,102,241,0.35);
color: #fff;
}
.tool-upgrade-cta__btn-secondary {
display: inline-flex;
align-items: center;
padding: 16px 32px;
background: transparent;
color: #a5b4fc;
font-weight: 600;
font-size: 15px;
border: 1px solid rgba(99,102,241,0.3);
border-radius: 10px;
text-decoration: none;
transition: all 0.15s;
}
.tool-upgrade-cta__btn-secondary:hover {
background: rgba(99,102,241,0.1);
border-color: rgba(99,102,241,0.5);
}
.tool-upgrade-cta__guarantee {
color: #64748b;
font-size: 13px;
margin: 0;
}
@media (max-width: 640px) {
.tool-upgrade-cta__inner { padding: 36px 20px; }
.tool-upgrade-cta__title { font-size: 22px; }
.tool-upgrade-cta__actions { flex-direction: column; align-items: center; }
.tool-upgrade-cta__pricing { flex-direction: column; gap: 6px; }
}
/* ============================================================
Banner/Footer Gap Fix — Universal
Removes whitespace between any bottom CTA/banner and the footer.
============================================================ */
/* Remove default top margin on footer when preceded by CTA-like sections */
.tool-upgrade-cta + .site-footer,
.blog-cta-banner + .site-footer,
.pricing-cta-section + .site-footer,
.templates-cta-section + .site-footer {
margin-top: 0;
}
/* Universal: when main's last child is a CTA-like banner, kill footer margin */
main:has(> .tool-upgrade-cta:last-child) + .site-footer,
main:has(> section:last-child .tool-upgrade-cta) + .site-footer,
main:has(> .blog-cta-banner:last-child) + .site-footer,
main:has(> .pricing-cta-section:last-child) + .site-footer,
main:has(> .pricing-cta-section) + .site-footer,
main:has(> .templates-cta-section:last-child) + .site-footer {
margin-top: 0;
}
/* Fallback for browsers without :has() — remove bottom padding/margin from common tool page wrappers */
.ro-page:last-child,
.ft-page:last-child,
.cl-body:last-child,
.ip-body:last-child,
.sc-body:last-child,
.jm-body:last-child,
.cp-body:last-child,
.li-body:last-child {
padding-bottom: 0;
}
/* Remove margin between tool content and CTA */
.tool-upgrade-cta {
margin-top: 0;
margin-bottom: 0;
}
/* Additional banner flush fixes */
.blog-cta-banner { margin-bottom: 0; }
.pricing-cta-section { margin-bottom: 0; }
.templates-cta-section { margin-bottom: 0; }
.cta-section { margin-bottom: 0; }
/* ============================================================
Dark Tool Page Background Fix
Tool pages use dark bg but body is white — ensure no white gaps.
NOTE: .ft-page (tools index) now uses light theme — excluded here.
============================================================ */
main:has(> .ro-page),
main:has(> .cl-hero) {
background: #0f172a;
}
/* Header dark mode on dark-bg tool pages */
body:has(main > .ro-page) .site-header,
body:has(main > .cl-hero) .site-header {
background: #0f172a;
border-bottom-color: #1e293b;
}
body:has(main > .ro-page) .site-logo__name,
body:has(main > .cl-hero) .site-logo__name {
color: #f1f5f9;
}
body:has(main > .ro-page) .site-nav__link,
body:has(main > .cl-hero) .site-nav__link {
color: #cbd5e1;
}
body:has(main > .ro-page) .site-nav__link:hover,
body:has(main > .cl-hero) .site-nav__link:hover {
background: rgba(255,255,255,0.06);
color: #f1f5f9;
}
body:has(main > .ro-page) .nav-dd__trigger,
body:has(main > .cl-hero) .nav-dd__trigger {
color: #cbd5e1;
}
body:has(main > .ro-page) .nav-dd__trigger:hover,
body:has(main > .cl-hero) .nav-dd__trigger:hover {
background: rgba(255,255,255,0.06);
color: #f1f5f9;
}
body:has(main > .ro-page) .site-btn-ghost,
body:has(main > .cl-hero) .site-btn-ghost {
color: #cbd5e1;
}
body:has(main > .ro-page) .site-btn-ghost:hover,
body:has(main > .cl-hero) .site-btn-ghost:hover {
background: rgba(255,255,255,0.06);
color: #f1f5f9;
}
body:has(main > .ro-page) .site-btn-cta,
body:has(main > .cl-hero) .site-btn-cta {
background: #f1f5f9;
color: #0f172a;
}
body:has(main > .ro-page) .site-btn-cta:hover,
body:has(main > .cl-hero) .site-btn-cta:hover {
background: #e2e8f0;
}
body:has(main > .ro-page) .mobile-menu-toggle__bar,
body:has(main > .cl-hero) .mobile-menu-toggle__bar {
background: #cbd5e1;
}
/* Ensure footer attaches flush to any dark-bg tool page */
main:has(> .ro-page) + .site-footer,
main:has(> .cl-hero) + .site-footer {
margin-top: 0;
}
/* ============================================================
Resume Optimizer — Tool Page Styles (moved from inline)
============================================================ */
.ro-page { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 0; }
.ro-hero { text-align: center; margin-bottom: 2.5rem; }
.ro-hero__badge { display: inline-block; background: rgba(16,185,129,0.12); color: #10b981; font-size: 0.8125rem; font-weight: 600; padding: 0.375rem 1rem; border-radius: 20px; margin-bottom: 1rem; }
.ro-hero__title { font-size: 2.25rem; font-weight: 800; color: #f1f5f9; margin: 0 0 0.75rem; line-height: 1.15; }
@media(max-width:640px) { .ro-hero__title { font-size: 1.5rem; } }
.ro-hero__sub { color: #94a3b8; font-size: 1.125rem; max-width: 600px; margin: 0 auto 1.5rem; line-height: 1.6; }
.ro-stats { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.ro-stat { text-align: center; }
.ro-stat__num { font-size: 1.5rem; font-weight: 800; color: #3b82f6; margin: 0; }
.ro-stat__text { font-size: 0.8125rem; color: #64748b; margin: 0; }
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media(max-width:900px) { .ro-grid { grid-template-columns: 1fr; } }
.ro-panel { background: #0f172a; border: 1px solid #1e293b; border-radius: 12px; padding: 1.5rem; }
.ro-panel__title { color: #f1f5f9; font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.ro-panel__badge { font-size: 0.6875rem; background: rgba(59,130,246,0.15); color: #60a5fa; padding: 0.1875rem 0.5rem; border-radius: 4px; font-weight: 600; }
.ro-panel__badge--green { background: rgba(16,185,129,0.15); color: #10b981; }
.ro-textarea { width: 100%; min-height: 260px; background: #020617; border: 1px solid #1e293b; border-radius: 8px; padding: 1rem; color: #e2e8f0; font-size: 0.875rem; line-height: 1.65; font-family: "Inter", -apple-system, sans-serif; resize: vertical; outline: none; transition: border-color 0.15s; box-sizing: border-box; }
.ro-textarea:focus { border-color: #3b82f6; }
.ro-textarea::placeholder { color: #475569; }
.ro-textarea--short { min-height: 160px; }
.ro-job-label { color: #94a3b8; font-size: 0.8125rem; margin: 1rem 0 0.5rem; font-weight: 500; }
.ro-btn-optimize { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 1rem; margin-top: 1.5rem; background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); color: #fff; border: none; border-radius: 10px; font-size: 1.0625rem; font-weight: 700; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s; }
.ro-btn-optimize:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,99,235,0.3); }
.ro-btn-optimize:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.ro-diff { background: #020617; border: 1px solid #1e293b; border-radius: 8px; padding: 1.25rem; color: #e2e8f0; font-size: 0.875rem; line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; max-height: 500px; overflow-y: auto; }
.ro-cta-card { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); border: 1px solid #312e81; border-radius: 16px; padding: 2rem; text-align: center; margin-top: 1.5rem; display: none; }
.ro-cta-card.active { display: block; }
.ro-cta-card__title { font-size: 1.5rem; font-weight: 800; color: #f1f5f9; margin: 0 0 0.5rem; }
.ro-cta-card__sub { color: #94a3b8; font-size: 0.9375rem; margin: 0 0 1.5rem; }
.ro-cta-card__price { font-size: 3rem; font-weight: 800; color: #fff; margin: 0; }
.ro-cta-card__price-note { color: #64748b; font-size: 0.8125rem; margin: 0 0 1.5rem; }
.ro-cta-card__btn { display: inline-block; background: #2563eb; color: #fff; padding: 1rem 2.5rem; border-radius: 10px; font-size: 1.0625rem; font-weight: 700; text-decoration: none; transition: background 0.15s, transform 0.1s; }
.ro-cta-card__btn:hover { background: #1d4ed8; transform: translateY(-1px); color: #fff; }
.ro-cta-card__features { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
.ro-cta-card__features li { color: #cbd5e1; font-size: 0.8125rem; display: flex; align-items: center; gap: 0.375rem; }
.ro-cta-card__features li::before { content: "\2713"; color: #10b981; font-weight: 700; }
.ro-spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: ro-spin 0.6s linear infinite; }
@keyframes ro-spin { to { transform: rotate(360deg); } }
.ro-score-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding: 1rem; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); border-radius: 10px; display: none; }
.ro-score-row.active { display: flex; }
.ro-score-num { font-size: 2rem; font-weight: 800; }
.ro-score-num.low { color: #ef4444; }
.ro-score-num.mid { color: #f59e0b; }
.ro-score-num.high { color: #10b981; }
.ro-score-label { color: #94a3b8; font-size: 0.8125rem; }
.ro-score-delta { color: #10b981; font-weight: 600; font-size: 0.9375rem; }
.ro-placeholder { color: #475569; font-size: 0.9375rem; line-height: 1.7; padding: 2rem; text-align: center; }
.ro-placeholder svg { margin: 0 auto 1rem; display: block; }
.ro-placeholder__title { margin: 0 0 0.5rem; color: #64748b; font-weight: 600; }
.ro-placeholder__sub { margin: 0; color: #475569; font-size: 0.8125rem; }
.ro-footer-note { text-align: center; margin-top: 3rem; color: #64748b; font-size: 0.8125rem; }
.ro-footer-note__badges { display: flex; justify-content: center; gap: 1.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
/* ============================================================
Cover Letter Generator — Tool Page Styles (moved from inline)
============================================================ */
.cl-hero { padding: 48px 24px 0; text-align: center; }
.cl-hero__inner { max-width: 800px; margin: 0 auto; }
.cl-hero__title { font-size: 2.25rem; font-weight: 800; color: #f1f5f9; margin: 0 0 12px; line-height: 1.15; }
@media(max-width:640px) { .cl-hero__title { font-size: 1.625rem; } }
.cl-hero__sub { color: #94a3b8; font-size: 1.0625rem; max-width: 640px; margin: 0 auto 24px; line-height: 1.6; }
.cl-product-note { font-size: 0.875rem; color: #94a3b8; margin: 12px 0 0; max-width: 640px; line-height: 1.5; }
.cl-hero .cl-product-note { margin-left: auto; margin-right: auto; }
.cl-product-note__link { color: #8b5cf6; text-decoration: underline; text-underline-offset: 2px; }
.cl-product-note__link:hover { color: #a78bfa; }
.cl-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cl-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(16,185,129,0.1); color: #10b981; font-size: 0.8125rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; }
.cl-stats { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 32px; }
.cl-stat__num { font-size: 1.5rem; font-weight: 800; color: #3b82f6; margin: 0; }
.cl-stat__text { font-size: 0.8125rem; color: #64748b; margin: 0; }
.cl-body { max-width: 1200px; margin: 0 auto; padding: 0 24px 48px; }
.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media(max-width:860px) { .cl-grid { grid-template-columns: 1fr; } }
.cl-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; padding: 24px; margin-bottom: 16px; }
.cl-card__label { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; margin: 0 0 8px; display: block; }
.cl-card__label .required-star { color: #f43f5e; }
.cl-card__textarea { width: 100%; background: #1e293b; border: 1px solid #334155; border-radius: 10px; color: #f1f5f9; font-size: 0.9375rem; padding: 14px; resize: vertical; font-family: inherit; line-height: 1.6; transition: border-color 0.2s; box-sizing: border-box; }
.cl-card__textarea:focus { border-color: #3b82f6; outline: none; }
.cl-card__input { width: 100%; background: #1e293b; border: 1px solid #334155; border-radius: 10px; color: #f1f5f9; font-size: 0.9375rem; padding: 12px 14px; font-family: inherit; transition: border-color 0.2s; box-sizing: border-box; }
.cl-card__input:focus { border-color: #3b82f6; outline: none; }
.cl-card__hint { color: #64748b; font-size: 0.8125rem; margin: 6px 0 0; }
.cl-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cl-actions { margin-top: 16px; text-align: center; }
.cl-results { display: flex; flex-direction: column; gap: 20px; }
.cl-section { background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; padding: 24px; }
.cl-section__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cl-section__title { font-size: 1.0625rem; font-weight: 700; color: #f1f5f9; margin: 0 0 8px; }
.cl-section__hint { color: #94a3b8; font-size: 0.875rem; margin: 0 0 12px; line-height: 1.5; }
.cl-meta { display: flex; gap: 8px; }
.cl-meta__badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 6px; background: rgba(100,116,139,0.15); color: #94a3b8; font-weight: 600; }
.cl-meta__badge--green { background: rgba(16,185,129,0.12); color: #10b981; }
.cl-letter-box { position: relative; background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 24px; }
.cl-letter-text { color: #e2e8f0; font-family: Georgia,'Times New Roman',serif; font-size: 0.9375rem; line-height: 1.8; white-space: pre-wrap; margin: 0; }
.cl-copy-btn { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(59,130,246,0.15); color: #3b82f6; border: 1px solid rgba(59,130,246,0.3); border-radius: 8px; padding: 6px 14px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.cl-copy-btn:hover { background: rgba(59,130,246,0.25); }
.cl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-tag { font-size: 0.8125rem; padding: 4px 12px; border-radius: 6px; background: rgba(100,116,139,0.12); color: #94a3b8; }
.cl-tag--green { background: rgba(16,185,129,0.12); color: #10b981; }
.cl-suggestions { display: flex; flex-direction: column; gap: 8px; }
.cl-suggestion { display: flex; align-items: flex-start; gap: 8px; color: #94a3b8; font-size: 0.875rem; line-height: 1.5; }
.cl-suggestion svg { flex-shrink: 0; margin-top: 2px; }
.cl-error { background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.3); border-radius: 12px; padding: 16px; color: #f43f5e; font-size: 0.9375rem; text-align: center; }
.cl-upgrade { background: linear-gradient(135deg,rgba(99,102,241,0.08) 0%,rgba(139,92,246,0.06) 100%); border-color: rgba(99,102,241,0.2); text-align: center; }
.cl-upgrade__btn { display: inline-flex; align-items: center; padding: 14px 32px; background: #6366f1; color: #fff; font-weight: 600; font-size: 0.9375rem; border-radius: 8px; text-decoration: none; transition: background 0.2s; margin-top: 8px; }
.cl-upgrade__btn:hover { background: #4f46e5; }
.cl-insight { background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; padding: 32px; }
.cl-insight__title { font-size: 1.125rem; font-weight: 700; color: #f1f5f9; margin: 0 0 20px; }
.cl-insight__items { display: flex; flex-direction: column; gap: 16px; }
.cl-insight__item { display: flex; align-items: flex-start; gap: 12px; color: #94a3b8; font-size: 0.9375rem; line-height: 1.5; }
.cl-insight__icon { font-size: 1.25rem; flex-shrink: 0; }
.cl-insight__cta { color: #64748b; font-size: 0.875rem; margin: 20px 0 0; text-align: center; }
.ag-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ============================================================
Free Tools Index — Styles (moved from inline)
============================================================ */
.ft-page { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 0; background: #fff; }
.ft-hero { text-align: center; margin-bottom: 3rem; background: #fff; }
.ft-hero__badge { display: inline-block; background: #f0fdf4; color: #059669; font-size: 0.8125rem; font-weight: 600; padding: 0.375rem 1rem; border-radius: 20px; margin-bottom: 1rem; border: 1px solid #bbf7d0; }
.ft-hero__title { font-size: 2.5rem; font-weight: 800; color: #111; margin: 0 0 0.75rem; line-height: 1.15; }
@media(max-width:640px) { .ft-hero__title { font-size: 1.75rem; } }
.ft-hero__sub { color: #4b5563; font-size: 1.125rem; max-width: 640px; margin: 0 auto; line-height: 1.6; }
.ft-tier { margin-bottom: 2.5rem; }
.ft-tier__header { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; }
.ft-tier__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.ft-tier__badge--free { background: #f0fdf4; color: #059669; border: 1px solid #bbf7d0; }
.ft-tier__badge--paid { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.ft-tier__label { color: #6b7280; font-size: 0.875rem; }
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ft-grid--1 { grid-template-columns: 1fr; max-width: 480px; }
@media(max-width:960px) { .ft-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:600px) { .ft-grid { grid-template-columns: 1fr; } }
.ft-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s; position: relative; }
.ft-card:hover { border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ft-card--paid { border-color: #e5e7eb; }
.ft-card--paid:hover { border-color: #8b5cf6; box-shadow: 0 4px 12px rgba(139,92,246,0.12); }
.ft-card__icon { width: 48px; height: 48px; background: #eff6ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; font-size: 1.5rem; }
.ft-card__icon--green { background: #f0fdf4; }
.ft-card__icon--purple { background: #f5f3ff; }
.ft-card__icon--amber { background: #fffbeb; }
.ft-card__icon--rose { background: #fff1f2; }
.ft-card__icon--cyan { background: #ecfeff; }
.ft-card__icon--linkedin { background: #eff6ff; }
.ft-card__icon--letter { background: #faf5ff; }
.ft-card__title { font-size: 1.25rem; font-weight: 700; color: #111; margin: 0 0 0.5rem; }
.ft-card__desc { color: #6b7280; font-size: 0.9375rem; line-height: 1.6; margin: 0 0 1rem; flex: 1; }
.ft-card__price { display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: 1rem; }
.ft-card__price-amount { font-size: 1.25rem; font-weight: 800; color: #111; }
.ft-card__price-free { color: #059669; }
.ft-card__price-note { font-size: 0.75rem; color: #6b7280; }
.ft-card__price-old { font-size: 0.875rem; color: #9ca3af; text-decoration: line-through; }
.ft-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.ft-card__tag { font-size: 0.75rem; color: #6b7280; background: #f3f4f6; padding: 0.25rem 0.625rem; border-radius: 6px; border: 1px solid #e5e7eb; }
.ft-card__link { display: inline-flex; align-items: center; gap: 0.375rem; color: #2563eb; font-weight: 600; font-size: 0.9375rem; text-decoration: none; transition: color 0.15s; }
.ft-card__link:hover { color: #1d4ed8; }
.ft-card__link svg { transition: transform 0.15s; }
.ft-card__link:hover svg { transform: translateX(3px); }
.ft-card__link--purple { color: #7c3aed; }
.ft-card__link--purple:hover { color: #6d28d9; }
.ft-card__compare { font-size: 0.8125rem; color: #6b7280; margin: 0.75rem 0 0; }
.ft-card__compare a { color: #7c3aed; text-decoration: underline; text-underline-offset: 2px; }
.ft-card__compare a:hover { color: #6d28d9; }
.ft-stats { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; margin-top: 3rem; padding: 2rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; }
.ft-stat { text-align: center; }
.ft-stat__num { font-size: 1.75rem; font-weight: 800; color: #2563eb; margin: 0; }
.ft-stat__text { font-size: 0.8125rem; color: #6b7280; margin: 0; }
/* ── Career Toolkit Bundle ─────────────────────────────── */
.ft-bundle { margin: 2.5rem 0; }
.ft-bundle__inner { background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 20px; padding: 2.5rem; position: relative; overflow: hidden; }
.ft-bundle__inner::before { content: ""; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(139,92,246,0.04) 0%, transparent 70%); pointer-events: none; }
.ft-bundle__badge { display: inline-flex; align-items: center; gap: 6px; background: #fffbeb; color: #d97706; font-size: 0.75rem; font-weight: 700; padding: 5px 14px; border-radius: 20px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid #fde68a; }
.ft-bundle__title { font-size: 1.75rem; font-weight: 800; color: #111; margin: 0 0 0.75rem; line-height: 1.2; }
.ft-bundle__sub { color: #6b7280; font-size: 1rem; margin: 0 0 1.5rem; line-height: 1.6; max-width: 640px; }
.ft-bundle__pricing { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ft-bundle__price-row { display: flex; align-items: baseline; gap: 12px; }
.ft-bundle__price-old { font-size: 1.25rem; color: #9ca3af; text-decoration: line-through; }
.ft-bundle__price { font-size: 2.5rem; font-weight: 800; color: #111; letter-spacing: -1px; }
.ft-bundle__save { display: inline-block; background: #f0fdf4; color: #059669; font-size: 0.8125rem; font-weight: 700; padding: 5px 14px; border-radius: 20px; border: 1px solid #bbf7d0; }
.ft-bundle__tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; }
.ft-bundle__tool-item { display: flex; align-items: center; gap: 8px; color: #374151; font-size: 0.875rem; padding: 8px 0; }
.ft-bundle__tool-name { flex: 1; }
.ft-bundle__tool-price { color: #9ca3af; font-size: 0.8125rem; text-decoration: line-through; }
.ft-bundle__email-row { text-align: center; margin-bottom: 12px; }
.ft-bundle__email { width: 100%; max-width: 360px; padding: 12px 14px; background: #fff; border: 1px solid #d1d5db; border-radius: 10px; color: #111; font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.ft-bundle__email:focus { border-color: #6366f1; }
.ft-bundle__cta-wrap { text-align: center; }
.ft-bundle__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 48px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; font-size: 1.125rem; font-weight: 700; border: none; border-radius: 14px; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s; }
.ft-bundle__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.3); }
.ft-bundle__guarantee { color: #6b7280; font-size: 0.8125rem; margin: 0.75rem 0 0; }
@media (max-width: 640px) {
.ft-bundle__inner { padding: 1.5rem; }
.ft-bundle__title { font-size: 1.375rem; }
.ft-bundle__price { font-size: 2rem; }
.ft-bundle__tools { grid-template-columns: 1fr; }
.ft-bundle__cta { width: 100%; padding: 14px 24px; }
}
/* ============================================================
Tool Paywall Modal — Styles (moved from inline)
============================================================ */
.tp-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
z-index: 9999;
/* Flex center + scrollable modal — prevents the Stripe Elements
iframe + testimonials + sub-promo from spilling past the
bottom of the viewport on mobile and short desktop windows
(reported 2026-04-23 after enabling 24 payment methods bloated
the Payment Element). */
display: flex;
align-items: flex-start;
justify-content: center;
overflow: hidden;
padding: 24px 16px;
-webkit-overflow-scrolling: touch;
}
.tp-modal {
background: linear-gradient(145deg,#0f172a 0%,#1e1b4b 100%);
border: 1px solid rgba(99,102,241,0.3);
border-radius: 20px;
padding: 28px 28px;
max-width: 560px;
width: 100%;
max-height: calc(100vh - 48px); /* never exceed viewport */
overflow-y: auto; /* internal scroll when tall */
margin: 0 auto;
position: relative;
box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.15);
animation: tp-slide-up 0.3s ease-out;
/* Hide scrollbar chrome but keep function */
scrollbar-width: thin;
scrollbar-color: rgba(99,102,241,0.4) transparent;
}
.tp-modal::-webkit-scrollbar { width: 6px; }
.tp-modal::-webkit-scrollbar-track { background: transparent; }
.tp-modal::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.35); border-radius: 3px; }
@keyframes tp-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
.tp-overlay { padding: 12px 10px; }
.tp-modal {
padding: 22px 18px;
border-radius: 16px;
max-height: calc(100vh - 24px); /* maximize usable area on mobile */
}
.tp-modal__title { font-size: 20px; }
.tp-modal__desc { font-size: 14px; margin-bottom: 14px; }
.tp-modal__price { font-size: 34px; }
.tp-modal__features { gap: 7px; margin-bottom: 14px; }
.tp-modal__social-proof { margin-top: 14px; padding-top: 12px; }
.tp-stripe-form { padding: 14px 12px; }
}
.tp-modal__close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #64748b; font-size: 24px; cursor: pointer; padding: 4px; line-height: 1; }
.tp-modal__close:hover { color: #94a3b8; }
.tp-modal__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(245,158,11,0.12); color: #f59e0b; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 20px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.tp-modal__title { font-size: 24px; font-weight: 800; color: #f1f5f9; margin: 0 0 8px; line-height: 1.2; }
.tp-modal__desc { color: #94a3b8; font-size: 15px; margin: 0 0 20px; line-height: 1.5; }
.tp-modal__pricing { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.tp-modal__price-old { font-size: 20px; color: #64748b; text-decoration: line-through; }
.tp-modal__price { font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.tp-modal__price-note { color: #64748b; font-size: 13px; margin: 0 0 20px; }
.tp-modal__features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.tp-modal__feature { display: flex; align-items: center; gap: 8px; color: #cbd5e1; font-size: 14px; }
.tp-modal__check { color: #10b981; font-weight: 700; font-size: 14px; }
.tp-modal__email-row { margin-bottom: 12px; }
.tp-modal__email { width: 100%; padding: 12px 14px; background: #1e293b; border: 1px solid #334155; border-radius: 10px; color: #f1f5f9; font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.tp-modal__email:focus { border-color: #6366f1; }
.tp-modal__btn { width: 100%; padding: 16px; background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%); color: #fff; font-size: 17px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.1s,box-shadow 0.15s; }
.tp-modal__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(99,102,241,0.4); }
.tp-modal__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.tp-modal__social-proof { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.tp-modal__testimonial { margin-bottom: 12px; }
.tp-modal__quote { color: #94a3b8; font-size: 13px; font-style: italic; margin: 0 0 4px; line-height: 1.5; }
.tp-modal__author { color: #64748b; font-size: 12px; margin: 0; }
.tp-modal__stats { display: flex; gap: 16px; flex-wrap: wrap; color: #64748b; font-size: 12px; }
.tp-modal__guarantee { color: #64748b; font-size: 12px; margin: 12px 0 0; text-align: center; }
/* Stripe Elements form mounted inline in the paywall modal. Lives
against the dark modal background, so the Stripe inputs render on
a light card that visually separates the payment step. */
.tp-modal__stripe-mount { margin: 18px 0 8px; }
.tp-stripe-form {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
padding: 18px 16px;
}
.tp-stripe-form__label {
display: block;
font-size: 11.5px;
font-weight: 700;
color: #cbd5e1;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
.tp-stripe-form__input {
width: 100%;
padding: 10px 14px;
background: #ffffff;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
font-size: 14px;
color: #0f172a;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tp-stripe-form__input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
}
.tp-stripe-form__loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
justify-content: center;
padding: 32px 16px;
margin: 12px 0;
background: rgba(255,255,255,0.04);
border: 1px dashed rgba(255,255,255,0.14);
border-radius: 12px;
font-size: 13px;
color: #cbd5e1;
font-weight: 600;
letter-spacing: 0.01em;
text-align: center;
}
.tp-stripe-form__loading.hidden { display: none; }
.tp-stripe-form__spinner {
width: 28px; height: 28px;
border: 3px solid rgba(255,255,255,0.12);
border-top-color: #818cf8;
border-right-color: #c084fc;
border-radius: 50%;
animation: tp-spin 0.85s cubic-bezier(0.5, 0, 0.5, 1) infinite;
box-shadow: 0 0 20px rgba(129,140,248,0.25);
}
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-stripe-form__loading-sub {
font-size: 11.5px;
color: #94a3b8;
font-weight: 500;
margin: 0;
}
.tp-stripe-form__address {
margin: 10px 0 4px;
}
.tp-stripe-form__address:empty { display: none; }
.tp-stripe-form__tax {
margin: 12px 0 4px;
padding: 10px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
font-size: 12.5px;
color: #cbd5e1;
}
.tp-stripe-form__tax.hidden { display: none; }
.tp-stripe-form__tax-row {
display: flex; justify-content: space-between; padding: 3px 0;
}
.tp-stripe-form__tax-row--total {
border-top: 1px solid rgba(255,255,255,0.12);
margin-top: 4px; padding-top: 8px;
font-weight: 700; color: #f1f5f9; font-size: 14px;
}
.tp-stripe-form__mount {
margin: 12px 0;
background: #ffffff;
border-radius: 10px;
min-height: 48px;
/* Stripe Elements renders inside — skeleton bars hint at the shape
before Stripe.js finishes painting. */
background-image:
linear-gradient(90deg, rgba(15,23,42,0.04) 25%, rgba(15,23,42,0.08) 50%, rgba(15,23,42,0.04) 75%);
background-size: 200% 100%;
animation: tp-skeleton 1.2s linear infinite;
}
.tp-stripe-form__mount:empty {
/* before Stripe mounts: keep skeleton visible */
min-height: 60px;
}
.tp-stripe-form__mount.is-ready {
background-image: none;
animation: none;
}
@keyframes tp-skeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.tp-stripe-form__error {
background: rgba(239,68,68,0.15);
color: #fca5a5;
border: 1px solid rgba(239,68,68,0.35);
padding: 10px 12px;
border-radius: 10px;
font-size: 12.5px;
margin: 8px 0;
}
.tp-stripe-form__error.hidden { display: none; }
.tp-stripe-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 20px;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #1e1b4b;
font-size: 14.5px;
font-weight: 800;
letter-spacing: 0.02em;
border: none;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(245,158,11,0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
margin-top: 6px;
}
.tp-stripe-form__submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(245,158,11,0.45);
}
.tp-stripe-form__submit:disabled { opacity: 0.55; cursor: not-allowed; }
.tp-stripe-form__secure {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 11px;
color: #94a3b8;
margin: 10px 0 0;
}
.tp-modal__sub-promo { margin-top: 16px; padding: 12px; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.15); border-radius: 10px; text-align: center; }
.tp-modal__sub-promo p { color: #94a3b8; font-size: 13px; margin: 0 0 4px; }
.tp-modal__sub-link { color: #a5b4fc; font-size: 13px; font-weight: 600; text-decoration: none; }
.tp-modal__sub-link:hover { color: #c7d2fe; }
/* Paywall — launch price badge */
.tp-modal__price-launch { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #f59e0b; background: rgba(245,158,11,0.12); padding: 3px 8px; border-radius: 12px; align-self: center; }
/* Paywall — restore access link */
.tp-modal__restore-link { text-align: center; margin-top: 12px; }
.tp-modal__restore-btn { background: none; border: none; color: #64748b; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }
.tp-modal__restore-btn:hover { color: #94a3b8; }
/* Paywall — blue badge variant (restore panel) */
.tp-modal__badge--blue { background: rgba(37,99,235,0.12); color: #60a5fa; }
/* Paywall — blue button variant */
.tp-modal__btn--blue { background: linear-gradient(135deg,#2563eb 0%,#3b82f6 100%); }
.tp-modal__btn--blue:hover { box-shadow: 0 8px 24px rgba(37,99,235,0.4); }
/* Paywall — restore feedback message */
.tp-modal__restore-msg { padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.tp-modal__restore-msg--success { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.tp-modal__restore-msg--error { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
@media(max-width:480px) {
.tp-modal { padding: 24px 20px; }
.tp-modal__price { font-size: 36px; }
.tp-modal__title { font-size: 20px; }
.tp-modal__stats { flex-direction: column; gap: 6px; }
}
/* ============================================================
Exit-Intent Popup
============================================================ */
.exit-intent-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 16px; }
.exit-intent-modal { background: #fff; border-radius: 20px; padding: 40px 36px; max-width: 480px; width: 100%; position: relative; box-shadow: 0 32px 64px rgba(0,0,0,0.3); animation: tp-slide-up 0.3s ease-out; text-align: center; }
.exit-intent-modal__close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: #9ca3af; font-size: 24px; cursor: pointer; padding: 4px; line-height: 1; }
.exit-intent-modal__close:hover { color: #374151; }
.exit-intent-modal__emoji { font-size: 48px; margin-bottom: 12px; line-height: 1; }
.exit-intent-modal__title { font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 12px; line-height: 1.2; }
.exit-intent-modal__sub { font-size: 15px; color: #6b7280; margin: 0 0 24px; line-height: 1.6; }
.exit-intent-modal__offer { background: #f0fdf4; border: 2px solid #bbf7d0; border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; }
.exit-intent-modal__offer-label { font-size: 13px; font-weight: 600; color: #15803d; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6px; }
.exit-intent-modal__offer-price { margin: 0 0 4px; }
.exit-intent-modal__price-old { font-size: 18px; color: #9ca3af; text-decoration: line-through; margin-right: 8px; }
.exit-intent-modal__price { font-size: 36px; font-weight: 800; color: #111827; }
.exit-intent-modal__offer-note { font-size: 12px; color: #16a34a; font-weight: 600; margin: 0; }
.exit-intent-modal__actions { display: flex; flex-direction: column; gap: 12px; }
.exit-intent-modal__cta { display: block; padding: 16px 24px; background: linear-gradient(135deg,#2563eb 0%,#7c3aed 100%); color: #fff; font-size: 17px; font-weight: 700; border-radius: 12px; text-decoration: none; transition: transform 0.1s,box-shadow 0.15s; }
.exit-intent-modal__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,99,235,0.35); color: #fff; }
.exit-intent-modal__skip { background: none; border: none; color: #9ca3af; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 4px; }
.exit-intent-modal__skip:hover { color: #6b7280; }
@media(max-width:480px) {
.exit-intent-modal { padding: 28px 20px; }
.exit-intent-modal__title { font-size: 21px; }
.exit-intent-modal__price { font-size: 28px; }
}
/* ============================================================
Job URL Scraper — Shared Component
============================================================ */
.job-url-scraper { background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.job-url-scraper__label { font-size: 0.8125rem; font-weight: 600; color: #a5b4fc; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.job-url-scraper__row { display: flex; gap: 8px; }
.job-url-scraper__input { flex: 1; background: rgba(15,23,42,0.8); border: 1px solid rgba(99,102,241,0.25); border-radius: 8px; padding: 10px 12px; color: #f1f5f9; font-size: 0.875rem; font-family: inherit; outline: none; transition: border-color 0.2s; }
.job-url-scraper__input:focus { border-color: #6366f1; }
.job-url-scraper__input::placeholder { color: #475569; }
.job-url-scraper__btn { background: #6366f1; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; display: flex; align-items: center; gap: 6px; }
.job-url-scraper__btn:hover { background: #4f46e5; }
.job-url-scraper__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.job-url-scraper__status { font-size: 0.75rem; margin: 6px 0 0; line-height: 1.4; }
.job-url-scraper__status--error { color: #f43f5e; }
.job-url-scraper__status--success { color: #10b981; }
.job-url-scraper__status--loading { color: #94a3b8; }
/* ============================================================
Document Upload — Shared Component for Tool Pages
============================================================ */
.tool-file-upload { background: rgba(99,102,241,0.06); border: 1px dashed rgba(99,102,241,0.25); border-radius: 10px; padding: 16px; margin-bottom: 12px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.tool-file-upload:hover { border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.1); }
.tool-file-upload.drag-over { border-color: #6366f1; background: rgba(99,102,241,0.15); }
.tool-file-upload__icon { color: #64748b; margin-bottom: 6px; }
.tool-file-upload__text { font-size: 0.8125rem; color: #94a3b8; margin: 0; }
.tool-file-upload__text strong { color: #a5b4fc; }
.tool-file-upload__hint { font-size: 0.6875rem; color: #475569; margin: 4px 0 0; }
.tool-file-upload__filename { font-size: 0.75rem; color: #10b981; margin: 8px 0 0; font-weight: 600; }
.tool-file-upload__hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* ============================================================
SIMPLICITY UX — Toddler-proof UI additions
============================================================ */
/* === How-to Steps (Tool Pages) ============================== */
.tool-how-steps {
display: flex;
gap: 12px;
margin: 24px 0;
flex-wrap: wrap;
}
.tool-how-step {
display: flex;
align-items: center;
gap: 10px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 12px;
padding: 10px 16px;
flex: 1;
min-width: 180px;
/* Decorative — these explain the flow but are not clickable. */
cursor: default;
user-select: none;
pointer-events: none;
}
.tool-how-step__num {
width: 28px;
height: 28px;
border-radius: 50%;
background: #10b981;
color: #fff;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tool-how-step__text {
font-size: 0.8125rem;
font-weight: 600;
color: #111;
line-height: 1.3;
}
/* === Estimated Time Badge =================================== */
.tool-time-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 20px;
padding: 6px 14px;
font-size: 0.8125rem;
font-weight: 600;
color: #0369a1;
margin: 12px 0;
}
.tool-time-badge__icon {
font-size: 1rem;
}
/* === "What You'll Get" Preview ============================== */
.tool-preview-box {
background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 20px 24px;
margin: 20px 0;
}
.tool-preview-box__title {
font-weight: 700;
font-size: 0.9375rem;
color: #111;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 8px;
}
.tool-preview-box__items {
display: flex;
flex-direction: column;
gap: 8px;
}
.tool-preview-box__item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
color: #374151;
}
.tool-preview-box__check {
color: #10b981;
font-weight: 700;
flex-shrink: 0;
}
/* === Big CTA Button Override (Tool Pages) =================== */
.btn--huge {
font-size: 1.125rem;
padding: 16px 40px;
border-radius: 14px;
font-weight: 700;
letter-spacing: -0.01em;
box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
transition: transform 0.15s, box-shadow 0.15s;
}
.btn--huge:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}
/* === Tool Price Note (below generate buttons) =============== */
.tool-price-note {
text-align: center;
font-size: 0.8125rem;
color: #6b7280;
margin-top: 8px;
font-weight: 500;
letter-spacing: 0.01em;
}
/* === Plain English Hero Title (Tool Pages) ================== */
.tool-plain-title {
font-size: 2rem;
font-weight: 800;
color: #111;
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0 0 8px;
}
@media (min-width: 768px) {
.tool-plain-title { font-size: 2.5rem; }
}
.tool-plain-subtitle {
font-size: 1.0625rem;
color: #6b7280;
line-height: 1.5;
margin: 0 0 16px;
max-width: 540px;
}
/* ── Dark background overrides for tool page elements ────────── */
/* ro-page and cl-hero use dark bg (#0f172a). ft-page uses light theme. */
.ro-page .tool-plain-title,
.cl-hero .tool-plain-title {
color: #f1f5f9;
}
.ro-page .tool-plain-subtitle,
.cl-hero .tool-plain-subtitle {
color: #94a3b8;
}
.ro-page .section-eyebrow,
.cl-hero .section-eyebrow {
color: #94a3b8;
}
/* How-to steps on dark bg */
.ro-page .tool-how-step,
.cl-hero .tool-how-step {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.25);
}
.ro-page .tool-how-step__text,
.cl-hero .tool-how-step__text {
color: #e2e8f0;
}
/* Time badge on dark bg */
.ro-page .tool-time-badge,
.cl-hero .tool-time-badge {
background: rgba(14, 165, 233, 0.1);
border-color: rgba(14, 165, 233, 0.25);
color: #7dd3fc;
}
/* Preview box on dark bg */
.ro-page .tool-preview-box,
.cl-body .tool-preview-box {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(16, 185, 129, 0.06) 100%);
border-color: #1e293b;
}
.ro-page .tool-preview-box__title,
.cl-body .tool-preview-box__title {
color: #f1f5f9;
}
.ro-page .tool-preview-box__item,
.cl-body .tool-preview-box__item {
color: #cbd5e1;
}
/* Enter hint on dark bg */
.cl-body .enter-hint {
color: #64748b;
}
.cl-body .enter-hint__kbd {
background: #1e293b;
border-color: #334155;
color: #94a3b8;
}
/* === Tool Index — Category labels ============================ */
.ft-card__quick-label {
font-size: 0.75rem;
font-weight: 700;
color: #059669;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 4px;
}
/* === Homepage Hero Social Proof ============================== */
.hero-social-proof {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 0.8125rem;
color: #6b7280;
font-weight: 500;
}
.hero-social-proof__avatars {
display: flex;
}
.hero-social-proof__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #fff;
background: #818cf8;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-left: -8px;
}
.hero-social-proof__avatar:first-child {
margin-left: 0;
}
.hero-social-proof__stars {
color: #f59e0b;
letter-spacing: -2px;
}
/* === Homepage ATS Section Simplification ===================== */
.ats-section-simple-head {
font-size: 1.5rem;
font-weight: 800;
color: #fff;
margin: 0 0 8px;
}
.ats-section-simple-sub {
font-size: 0.9375rem;
color: #94a3b8;
margin: 0 0 20px;
line-height: 1.5;
}
/* === Tool index quick-start badges ========================== */
.ft-card__time {
font-size: 0.6875rem;
color: #6b7280;
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
}
/* === Mobile full-width buttons ============================== */
@media (max-width: 640px) {
.btn--huge {
width: 100%;
justify-content: center;
}
.tool-how-steps {
flex-direction: column;
}
.hero-buttons {
flex-direction: column;
}
.hero-buttons .btn {
width: 100%;
justify-content: center;
}
}
/* === Success celebration card =============================== */
.tool-celebration {
text-align: center;
padding: 24px;
background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
border: 2px solid #10b981;
border-radius: 16px;
margin: 20px 0;
}
.tool-celebration__score {
font-size: 3rem;
font-weight: 800;
color: #059669;
margin: 0;
}
.tool-celebration__label {
font-size: 1rem;
color: #374151;
font-weight: 600;
margin: 4px 0 0;
}
/* === Enter key hint ========================================= */
.enter-hint {
font-size: 0.6875rem;
color: #9ca3af;
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px;
}
.enter-hint__kbd {
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 1px 5px;
font-family: monospace;
font-size: 0.625rem;
}
/* === Competitor comparison table ============================ */
.seo-compare-table {
width: 100%;
border-collapse: collapse;
margin: 24px 0 32px;
font-size: 0.9375rem;
}
.seo-compare-table thead tr {
background: #f8fafc;
border-bottom: 2px solid #e5e7eb;
}
.seo-compare-table th {
padding: 12px 16px;
text-align: left;
font-weight: 700;
color: #374151;
font-size: 0.875rem;
}
.seo-compare-table th.seo-compare-table__us {
color: #285EFF;
background: #eff6ff;
}
.seo-compare-table td {
padding: 12px 16px;
border-bottom: 1px solid #f3f4f6;
color: #374151;
vertical-align: top;
}
.seo-compare-table td.seo-compare-table__us {
background: #f8fbff;
color: #1a1a2e;
font-weight: 500;
}
.seo-compare-table tbody tr:last-child td {
border-bottom: none;
}
.seo-compare-table tbody tr:hover td {
background: #fafafa;
}
.seo-compare-table tbody tr:hover td.seo-compare-table__us {
background: #f0f7ff;
}
@media (max-width: 680px) {
.seo-compare-table { font-size: 0.8125rem; }
.seo-compare-table th,
.seo-compare-table td { padding: 10px 12px; }
}
/* ============================================================
Contact / Support Page (/contact)
============================================================ */
/* Hero */
.contact-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%);
padding: 72px 20px 56px;
text-align: center;
}
.contact-hero__inner {
max-width: 680px;
margin: 0 auto;
}
.contact-hero__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 800;
color: #ffffff;
line-height: 1.15;
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.contact-hero__sub {
font-size: 17px;
color: #94a3b8;
line-height: 1.65;
margin: 0;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* Section (form + sidebar) */
.contact-section {
padding: 64px 20px 80px;
background: #ffffff;
}
.contact-section__inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 340px;
gap: 48px;
align-items: start;
}
/* Form wrapper */
.contact-form-wrap {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 40px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* Form fields */
.contact-form__field {
margin-bottom: 24px;
}
.contact-form__label {
display: block;
font-size: 14px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 8px;
}
.contact-form__required {
color: #ef4444;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
width: 100%;
padding: 12px 16px;
font-size: 15px;
color: #1a1a2e;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 10px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
font-family: inherit;
box-sizing: border-box;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
border-color: #285EFF;
box-shadow: 0 0 0 3px rgba(40,94,255,0.12);
background: #ffffff;
}
.contact-form__select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.contact-form__textarea {
resize: vertical;
min-height: 140px;
}
.contact-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 36px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background: #285EFF;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
font-family: inherit;
}
.contact-form__submit:hover {
background: #1a4fd4;
}
.contact-form__submit:active {
transform: scale(0.98);
}
/* Info sidebar */
.contact-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-info__card {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 24px;
}
.contact-info__icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.contact-info__icon--blue { background: rgba(40,94,255,0.1); color: #285EFF; }
.contact-info__icon--purple { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.contact-info__icon--green { background: rgba(16,185,129,0.1); color: #10b981; }
.contact-info__title {
font-size: 15px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 6px;
}
.contact-info__text {
font-size: 14px;
color: #6b7280;
line-height: 1.55;
margin: 0;
}
.contact-info__link {
font-size: 14px;
color: #285EFF;
text-decoration: none;
font-weight: 500;
}
.contact-info__link:hover {
text-decoration: underline;
}
.contact-info__inline-link {
color: #285EFF;
text-decoration: none;
font-weight: 500;
}
.contact-info__inline-link:hover {
text-decoration: underline;
}
/* Contact responsive */
@media (max-width: 768px) {
.contact-hero { padding: 56px 20px 44px; }
.contact-hero__title { font-size: 2rem; }
.contact-section { padding: 40px 16px 60px; }
.contact-section__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.contact-form-wrap { padding: 28px 20px; }
.contact-info { order: -1; }
}
/* ============================================
Download Recovery Page
============================================ */
/* Hero */
.recover-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%);
padding: 72px 20px 56px;
text-align: center;
}
.recover-hero__inner {
max-width: 680px;
margin: 0 auto;
}
.recover-hero__icon {
width: 56px;
height: 56px;
background: rgba(40, 94, 255, 0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: #60a5fa;
}
.recover-hero__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 800;
color: #ffffff;
line-height: 1.15;
margin: 0 0 16px;
letter-spacing: -0.02em;
}
.recover-hero__sub {
font-size: 17px;
color: #94a3b8;
line-height: 1.65;
margin: 0;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* Section (form + sidebar) */
.recover-section {
padding: 64px 20px 80px;
background: #ffffff;
}
.recover-section__inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 340px;
gap: 48px;
align-items: start;
}
/* Form wrapper */
.recover-form-wrap {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 40px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* Form fields */
.recover-form__field {
margin-bottom: 24px;
}
.recover-form__label {
display: block;
font-size: 14px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 8px;
}
.recover-form__input {
width: 100%;
padding: 14px 16px;
font-size: 16px;
color: #1a1a2e;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 10px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
font-family: inherit;
box-sizing: border-box;
}
.recover-form__input:focus {
border-color: #285EFF;
box-shadow: 0 0 0 3px rgba(40,94,255,0.12);
background: #ffffff;
}
.recover-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 36px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
background: #285EFF;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
font-family: inherit;
}
.recover-form__submit:hover {
background: #1a4fd4;
}
.recover-form__submit:active {
transform: scale(0.98);
}
.recover-form__note {
margin: 20px 0 0;
font-size: 13px;
color: #9ca3af;
line-height: 1.55;
text-align: center;
}
/* Info sidebar */
.recover-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.recover-info__card {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 24px;
}
.recover-info__icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.recover-info__icon--blue { background: rgba(40,94,255,0.1); color: #285EFF; }
.recover-info__icon--purple { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.recover-info__icon--green { background: rgba(16,185,129,0.1); color: #10b981; }
.recover-info__title {
font-size: 15px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 6px;
}
.recover-info__text {
font-size: 14px;
color: #6b7280;
line-height: 1.55;
margin: 0;
}
.recover-info__inline-link {
color: #285EFF;
text-decoration: none;
font-weight: 500;
}
.recover-info__inline-link:hover {
text-decoration: underline;
}
/* Recovery responsive */
@media (max-width: 768px) {
.recover-hero { padding: 56px 20px 44px; }
.recover-hero__title { font-size: 2rem; }
.recover-section { padding: 40px 16px 60px; }
.recover-section__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.recover-form-wrap { padding: 28px 20px; }
.recover-info { order: -1; }
}
/* ============================================================
Download Page — Post-Purchase Upsell Section
============================================================ */
.dl-upsell-section {
background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(245,158,11,0.04) 100%);
border-top: 1px solid rgba(99,102,241,0.15);
border-bottom: 1px solid rgba(99,102,241,0.15);
padding: 40px 0;
}
.dl-upsell-container {
max-width: 680px;
margin: 0 auto;
padding: 0 24px;
}
.dl-upsell-heading {
font-size: 22px;
font-weight: 700;
color: #f1f5f9;
margin: 0 0 6px;
text-align: center;
}
.dl-upsell-subheading {
font-size: 14px;
color: #94a3b8;
margin: 0 0 24px;
text-align: center;
line-height: 1.5;
}
.dl-upsell-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.dl-upsell-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 14px;
padding: 20px 24px;
transition: border-color 0.2s ease;
}
.dl-upsell-card:hover {
border-color: rgba(99,102,241,0.4);
}
.dl-upsell-card__header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.dl-upsell-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dl-upsell-badge--discount {
background: rgba(16,185,129,0.12);
color: #10b981;
}
.dl-upsell-badge--urgency {
background: rgba(245,158,11,0.12);
color: #f59e0b;
}
.dl-upsell-card__title {
font-size: 17px;
font-weight: 700;
color: #f1f5f9;
margin: 0 0 6px;
}
.dl-upsell-card__desc {
font-size: 14px;
color: #94a3b8;
margin: 0 0 14px;
line-height: 1.5;
}
.dl-upsell-card__pricing {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.dl-upsell-card__original-price {
font-size: 14px;
color: #64748b;
text-decoration: line-through;
}
.dl-upsell-card__sale-price {
font-size: 20px;
font-weight: 800;
color: #10b981;
}
.dl-upsell-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: #6366f1;
color: #fff;
padding: 12px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
border: none;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.dl-upsell-card__cta:hover {
background: #4f46e5;
transform: translateY(-1px);
}
/* Upsell responsive */
@media (max-width: 768px) {
.dl-upsell-section { padding: 32px 0; }
.dl-upsell-container { padding: 0 16px; }
.dl-upsell-heading { font-size: 20px; }
.dl-upsell-card { padding: 16px 18px; }
.dl-upsell-card__cta {
width: 100%;
justify-content: center;
}
}
/* ============================================================
Download Page — Not Happy? Regen Section
============================================================ */
.dl-regen-section {
background: #0f172a;
padding: 0 0 8px;
}
.dl-regen-container {
max-width: 680px;
margin: 0 auto;
padding: 0 24px;
}
.dl-regen-card {
background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(245,158,11,0.04) 100%);
border: 1px solid rgba(239,68,68,0.18);
border-radius: 14px;
padding: 24px;
text-align: center;
}
.dl-regen-card__icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
background: rgba(245,158,11,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #f59e0b;
}
.dl-regen-card__title {
font-size: 18px;
font-weight: 700;
color: #f1f5f9;
margin: 0 0 8px;
}
.dl-regen-card__desc {
font-size: 14px;
color: #94a3b8;
margin: 0 0 16px;
line-height: 1.5;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.dl-regen-card__pricing {
font-size: 15px;
color: #e2e8f0;
margin-bottom: 16px;
}
.dl-regen-card__pricing strong {
color: #fbbf24;
font-weight: 800;
font-size: 18px;
}
.dl-regen-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f59e0b;
color: #0f172a;
padding: 12px 28px;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
border: none;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.dl-regen-card__cta:hover {
background: #d97706;
transform: translateY(-1px);
}
.dl-regen-card__cta:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.dl-regen-card__note {
font-size: 12px;
color: #64748b;
margin: 12px 0 0;
}
/* Regen responsive */
@media (max-width: 768px) {
.dl-regen-container { padding: 0 16px; }
.dl-regen-card { padding: 20px 18px; }
.dl-regen-card__cta {
width: 100%;
justify-content: center;
}
}
/* ============================================================
Career News — Index & Show
============================================================ */
/* Hero */
.news-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%);
padding: 80px 20px 64px;
text-align: center;
}
.news-hero__inner { max-width: 680px; margin: 0 auto; }
.news-hero__eyebrow {
display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: #60a5fa; margin-bottom: 20px;
}
.news-hero__title {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: white; line-height: 1.15;
margin-bottom: 16px;
}
.news-hero__sub { font-size: 18px; color: #94a3b8; max-width: 520px; margin: 0 auto; }
/* Filter bar */
.news-filter-bar { border-bottom: 1px solid #e5e7eb; background: white; position: sticky; top: 0; z-index: 40; }
.news-filter-bar__inner {
display: flex; align-items: center; gap: 6px; padding: 14px 0;
overflow-x: auto; scrollbar-width: none;
}
.news-filter-bar__inner::-webkit-scrollbar { display: none; }
.news-filter-pill {
display: inline-block; padding: 6px 16px; border-radius: 999px;
font-size: 14px; font-weight: 500; white-space: nowrap;
border: 1.5px solid #e5e7eb; color: #374151; text-decoration: none;
transition: all 0.15s; background: white;
}
.news-filter-pill:hover { border-color: #111; color: #111; }
.news-filter-pill--active { background: #111; color: white; border-color: #111; }
/* Category badges (news) */
.news-cat-badge--hiring-trends { background: #eff6ff; color: #2563eb; }
.news-cat-badge--salary-data { background: #ecfdf5; color: #059669; }
.news-cat-badge--remote-work { background: #f5f3ff; color: #7c3aed; }
.news-cat-badge--ai-in-hiring { background: #fff7ed; color: #c2410c; }
.news-cat-badge--career-tips { background: #fdf4ff; color: #a21caf; }
.news-cat-badge--industry-news { background: #f0fdf4; color: #15803d; }
/* Featured article (full-width card) */
.news-featured-section { padding: 40px 0 0; background: #f9fafb; }
.news-featured {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
background: white; border-radius: 16px; overflow: hidden;
border: 1px solid #e5e7eb; text-decoration: none; color: inherit;
transition: box-shadow 0.2s, transform 0.2s;
}
.news-featured:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); transform: translateY(-2px); }
.news-featured__image-wrap {
aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.news-featured__image {
width: 100%; height: 100%; object-fit: cover;
}
.news-featured__image-fallback {
width: 100%; height: 100%;
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.news-featured__content {
padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.news-featured__title {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 800; color: #111; line-height: 1.3;
margin: 0;
}
.news-featured__summary { font-size: 15px; color: #6b7280; line-height: 1.6; }
.news-featured__meta {
display: flex; align-items: center; gap: 16px;
font-size: 13px; color: #9ca3af; margin-top: auto;
}
.news-featured__read { color: #2563eb; font-weight: 600; }
/* Article grid */
.news-list-section { padding: 48px 0 80px; background: #f9fafb; }
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 48px;
}
/* Article card */
.news-card {
background: white; border-radius: 16px; overflow: hidden;
border: 1px solid #e5e7eb; transition: box-shadow 0.2s, transform 0.2s;
display: flex; flex-direction: column;
}
.news-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.news-card__image-link { display: block; }
.news-card__image {
width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}
.news-card__image-fallback {
width: 100%; aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.news-card__body {
padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.news-card__source {
display: inline-block; font-size: 12px; font-weight: 600; color: #2563eb;
text-transform: uppercase; letter-spacing: 0.04em;
}
.news-card__title {
font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__title-link { text-decoration: none; color: #111; }
.news-card__title-link:hover { color: #2563eb; }
.news-card__summary {
font-size: 14px; color: #6b7280; line-height: 1.6; flex: 1;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__footer {
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; color: #9ca3af; margin-top: auto; padding-top: 8px;
}
.news-card__date { color: #9ca3af; }
.news-card__link {
color: #2563eb; font-weight: 600; text-decoration: none; font-size: 13px;
}
.news-card__link:hover { color: #1d4ed8; }
/* ---- Single article (show) ---- */
.news-article__hero-image-wrap {
width: 100%; max-height: 480px; overflow: hidden;
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.news-article__hero-image {
width: 100%; height: 100%; max-height: 480px; object-fit: cover; display: block;
}
.news-article__header {
padding: 48px 20px 32px; background: white;
}
.news-article__meta {
display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.news-article__category-badge {
display: inline-block; padding: 3px 10px; border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
}
.news-article__title {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; color: #111;
line-height: 1.2; margin-bottom: 16px;
}
.news-article__deck { font-size: 18px; color: #6b7280; max-width: 600px; margin-bottom: 20px; line-height: 1.6; }
.news-article__byline {
display: flex; align-items: center; gap: 16px;
font-size: 14px; color: #9ca3af;
}
.news-article__reading-time { color: #9ca3af; }
.news-article__body-wrap { padding: 48px 20px 24px; background: #f9fafb; }
.news-article__layout {
display: grid; grid-template-columns: 1fr 320px; gap: 48px;
max-width: 1100px; margin: 0 auto;
}
.news-article__main { min-width: 0; }
.news-article__body {
font-size: 17px; line-height: 1.8; color: #374151;
background: white; border-radius: 16px; padding: 40px 36px;
border: 1px solid #e5e7eb;
}
.news-article__body h2 {
font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
font-size: 1.5rem; font-weight: 700; color: #111; margin: 40px 0 16px;
}
.news-article__body h3 { font-size: 1.15rem; font-weight: 700; color: #111; margin: 28px 0 12px; }
.news-article__body p { margin-bottom: 20px; }
.news-article__body ul, .news-article__body ol { margin: 0 0 20px 20px; padding: 0; list-style: disc; }
.news-article__body li { margin-bottom: 8px; }
.news-article__body strong { color: #111; font-weight: 600; }
.news-article__body a { color: #2563eb; text-decoration: underline; }
.news-article__body a:hover { color: #1d4ed8; }
.news-article__body blockquote {
border-left: 4px solid #2563eb; padding: 16px 20px; margin: 24px 0;
background: #eff6ff; border-radius: 0 8px 8px 0; color: #1e40af; font-style: italic;
}
.news-article__source-link { margin-top: 32px; }
/* Sidebar */
.news-article__sidebar { display: flex; flex-direction: column; gap: 24px; }
.news-sidebar-block {
background: white; border-radius: 16px; padding: 24px;
border: 1px solid #e5e7eb;
}
.news-sidebar-block__title {
font-size: 15px; font-weight: 700; color: #111; margin-bottom: 16px;
padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;
}
.news-sidebar-card { margin-bottom: 16px; }
.news-sidebar-card:last-child { margin-bottom: 0; }
.news-sidebar-card__image {
width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px;
margin-bottom: 8px; display: block;
}
.news-sidebar-card__title {
font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0 0 4px;
}
.news-sidebar-card__title a { color: #111; text-decoration: none; }
.news-sidebar-card__title a:hover { color: #2563eb; }
.news-sidebar-card__date { font-size: 12px; color: #9ca3af; }
.news-sidebar-cta {
background: white; border-radius: 16px; padding: 24px;
border: 1px solid #e5e7eb; text-align: center;
}
.news-sidebar-cta__title { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 8px; }
.news-sidebar-cta__desc { font-size: 14px; color: #6b7280; margin-bottom: 16px; line-height: 1.5; }
/* Responsive — News */
@media (max-width: 1024px) {
.news-article__layout { grid-template-columns: 1fr; gap: 32px; }
.news-article__sidebar { order: 2; }
}
@media (max-width: 768px) {
.news-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.news-featured { grid-template-columns: 1fr; }
.news-featured__content { padding: 24px 20px; }
.news-article__body { padding: 24px 20px; }
.news-hero { padding: 56px 20px 48px; }
}
@media (max-width: 480px) {
.news-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
Theme swatch picker — inline on template cards + in wizard preview rail
═══════════════════════════════════════════════════════════════════════ */
.theme-swatches { display: inline-flex; align-items: center; }
.theme-swatches__row {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 100px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.theme-swatch {
width: 26px; height: 26px; padding: 0; border: none; background: transparent;
cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.theme-swatch__chip {
display: block; width: 22px; height: 22px; border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset, 0 1px 2px rgba(0,0,0,0.05);
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.is-active {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827;
transform: scale(1.05);
}
.theme-swatch:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb; }
.theme-swatches__label {
font-size: 11.5px; color: #0f172a; font-weight: 700;
margin-left: 6px; letter-spacing: 0.06em; text-transform: uppercase;
white-space: nowrap;
}
/* Compact variant for wizard rail — fewer labels, tighter gaps */
.theme-swatches--compact .theme-swatches__row { padding: 3px 6px; gap: 4px; }
.theme-swatches--compact .theme-swatch { width: 18px; height: 18px; }
.theme-swatches--compact .theme-swatch__chip { width: 14px; height: 14px; }
.theme-swatches--compact .theme-swatches__label { display: none; }
/* Template row — theme swatch block (between letters row and CTAs) */
.tpl-row__themes {
display: flex; align-items: center; gap: 10px;
padding: 10px 0 4px;
}
.tpl-row__themes-label {
font-size: 11px; color: #6b7280; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
}
/* Vector schematic preview container */
.tpl-row__schematic {
background: var(--bg, #fff);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden;
aspect-ratio: 340 / 440;
display: block;
}
.tpl-row__schematic svg { width: 100%; height: 100%; display: block; }
/* ═══════════════════════════════════════════════════════════════════════
Inline Stripe Elements form for AI tool purchases
═══════════════════════════════════════════════════════════════════════ */
.tool-payment-form {
background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
padding: 28px; max-width: 480px; margin: 24px auto;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.tool-payment-form__header { margin-bottom: 16px; }
.tool-payment-form__title { font-size: 18px; font-weight: 800; color: #111827; margin: 0 0 4px; }
.tool-payment-form__note { font-size: 13px; color: #6b7280; margin: 0; }
.tool-payment-form__price-row { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; margin-bottom: 18px; }
.tool-payment-form__amount { font-size: 28px; font-weight: 800; color: #111827; letter-spacing: -0.01em; }
.tool-payment-form__amount-label { font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em; }
.tool-payment-form__label { display: block; font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
.tool-payment-form__input {
width: 100%; padding: 10px 14px; font-size: 14px; color: #111827;
border: 1px solid #d1d5db; border-radius: 8px; margin-bottom: 8px; font-family: inherit;
-webkit-appearance: none; appearance: none; box-sizing: border-box;
}
.tool-payment-form__input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.tool-payment-form__hint { font-size: 12px; color: #9ca3af; margin: 0 0 16px; }
.tool-payment-form__mount { margin: 16px 0; min-height: 60px; }
.tool-payment-form__loading {
display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6b7280;
padding: 18px; text-align: center; justify-content: center;
}
.tool-payment-form__spinner {
width: 14px; height: 14px; border: 2px solid #e5e7eb; border-top-color: #2563eb;
border-radius: 50%; animation: tpf-spin 0.7s linear infinite;
}
@keyframes tpf-spin { to { transform: rotate(360deg); } }
.tool-payment-form__error {
background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px;
}
.tool-payment-form__error.hidden { display: none; }
.tool-payment-form__submit {
width: 100%; padding: 14px; font-size: 15px; font-weight: 800; color: #fff;
background: #111827; border: none; border-radius: 10px; cursor: pointer;
font-family: inherit; transition: background 0.15s;
}
.tool-payment-form__submit:hover:not(:disabled) { background: #1f2937; }
.tool-payment-form__submit:disabled { background: #9ca3af; cursor: not-allowed; }
.tool-payment-form__secure {
display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: 11px; color: #9ca3af; margin: 14px 0 0;
}
/* ═══════════════════════════════════════════════════════════════════════
3D Coverflow — homepage template carousel
═══════════════════════════════════════════════════════════════════════ */
.cflow-section {
padding: 96px 24px 120px;
background: linear-gradient(180deg, #0a0e1a 0%, #0f1628 55%, #0a0e1a 100%);
color: #e4e6ef;
position: relative;
overflow: hidden;
}
.cflow-section::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(900px 600px at 20% 20%, rgba(59,130,246,0.12), transparent 60%),
radial-gradient(800px 500px at 80% 80%, rgba(168,85,247,0.10), transparent 60%);
pointer-events: none;
}
.cflow-inner { max-width: 1300px; margin: 0 auto; position: relative; z-index: 1; }
.cflow-head { text-align: center; margin-bottom: 48px; }
.cflow-head .section-eyebrow {
font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: #93c5fd; margin: 0 0 10px;
}
.cflow-head .section-title {
font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; line-height: 1.1;
letter-spacing: -0.02em; color: #fff; margin: 0 0 12px;
}
.cflow-sub { color: #94a3b8; font-size: 15px; max-width: 640px; margin: 0 auto; }
.cflow {
position: relative;
height: 640px;
display: flex; align-items: center; justify-content: center;
outline: none;
}
.cflow:focus-visible { outline: 2px solid #60a5fa; outline-offset: 8px; border-radius: 24px; }
.cflow__stage {
width: 100%;
height: 100%;
display: flex; align-items: center; justify-content: center;
perspective: 1800px;
perspective-origin: 50% 50%;
overflow: hidden;
position: relative;
}
.cflow__stage::before,
.cflow__stage::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 50;
pointer-events: none;
}
.cflow__stage::before { left: 0; background: linear-gradient(90deg, #0a0e1a, transparent); }
.cflow__stage::after { right: 0; background: linear-gradient(-90deg, #0a0e1a, transparent); }
.cflow__track {
position: relative;
width: 1px; height: 1px;
transform-style: preserve-3d;
}
.cflow__card {
position: absolute;
top: 50%; left: 50%;
width: 320px; height: 420px;
margin-top: -210px; margin-left: -160px;
background: var(--bg, #fff);
border-radius: 14px;
overflow: hidden;
box-shadow:
0 20px 60px rgba(0,0,0,0.45),
0 4px 16px rgba(0,0,0,0.25),
0 0 0 1px rgba(255,255,255,0.05);
text-decoration: none; color: inherit;
transform-origin: center center;
transform-style: preserve-3d;
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.35s ease,
box-shadow 0.35s ease;
will-change: transform, opacity;
backface-visibility: hidden;
}
.cflow.is-dragging .cflow__card { transition: none; cursor: grabbing; }
.cflow__card.is-active {
box-shadow:
0 40px 90px rgba(0,0,0,0.55),
0 8px 24px rgba(0,0,0,0.35),
0 0 0 1px rgba(255,255,255,0.08),
0 0 80px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cflow__card:hover:not(.is-active) {
transform: translateX(var(--self-x, 0)) scale(var(--self-scale, 1)) rotateY(var(--self-rot, 0)) translateY(-6px);
}
.cflow__preview {
flex: 1 1 auto;
height: calc(100% - 64px);
overflow: hidden;
background: var(--bg);
}
.cflow__preview svg,
.cflow__preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.cflow__meta {
height: 64px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 18px;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(0,0,0,0.06);
}
.cflow__name { font-size: 14px; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; }
.cflow__cta {
font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
color: var(--primary); text-transform: uppercase; opacity: 0;
transition: opacity 0.3s ease;
}
.cflow__card.is-active .cflow__cta { opacity: 1; }
.cflow__arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
z-index: 60;
width: 56px; height: 56px; border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.cflow__arrow:hover {
background: rgba(255,255,255,0.18);
transform: translateY(-50%) scale(1.08);
}
.cflow__arrow:focus-visible {
outline: 2px solid #60a5fa; outline-offset: 3px;
}
.cflow__arrow.hidden { opacity: 0.25; pointer-events: none; }
.cflow__arrow--left { left: 24px; }
.cflow__arrow--right { right: 24px; }
.cflow__footer {
display: flex; align-items: center; justify-content: space-between;
max-width: 560px; margin: 36px auto 0;
padding: 0 20px;
}
.cflow__counter {
font-size: 13px; color: #94a3b8; font-variant-numeric: tabular-nums;
letter-spacing: 0.08em;
}
.cflow__browse-link {
font-size: 14px; font-weight: 700; color: #93c5fd;
text-decoration: none; letter-spacing: -0.01em;
border-bottom: 1px solid rgba(147,197,253,0.3);
}
.cflow__browse-link:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 768px) {
.cflow-section { padding: 64px 12px 80px; }
.cflow { height: 520px; }
.cflow__card { width: 240px; height: 320px; margin-top: -160px; margin-left: -120px; }
.cflow__arrow--left { left: 8px; }
.cflow__arrow--right { right: 8px; }
.cflow__arrow { width: 44px; height: 44px; }
}
/* ── Embedded coverflow (used inside role-show & role-index sections).
Same wheel mechanics as the home-page hero, but lighter chrome so it
sits inside content cards without overpowering the rest of the page. */
.cflow-section--embed {
padding: 32px 12px 56px;
background: linear-gradient(180deg, #0b1020 0%, #0f172a 100%);
border-radius: 24px;
margin: 0 0 28px;
overflow: hidden;
}
.cflow-section--embed::before { display: none; }
.cflow-section--embed .cflow-head { margin-bottom: 24px; }
.cflow-section--embed .section-title--white { font-size: clamp(22px, 3.4vw, 32px); }
.cflow-section--embed .section-eyebrow--dim { font-size: 11px; letter-spacing: 0.18em; color: #93c5fd; }
/* Filter chip rows above the wheel. Sit above the embedded section
on a translucent dark strip so the chips read against the
gradient background. */
.cflow-filters {
display: flex; flex-direction: column; gap: 10px;
max-width: 880px; margin: 0 auto 22px;
padding: 14px 18px; border-radius: 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(148,163,184,0.18);
}
.cflow-filters__row {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.cflow-filters__label {
font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: #94a3b8;
margin-right: 6px; min-width: 48px;
}
.cflow-filters__chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px; border-radius: 999px;
font-size: 13px; font-weight: 600; color: #cbd5e1;
background: rgba(148,163,184,0.10);
border: 1px solid rgba(148,163,184,0.22);
text-decoration: none;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cflow-filters__chip:hover { background: rgba(148,163,184,0.22); color: #fff; border-color: rgba(148,163,184,0.4); }
.cflow-filters__chip--on {
background: linear-gradient(135deg, #2563eb, #6366f1);
color: #fff; border-color: transparent;
box-shadow: 0 4px 14px -4px rgba(99,102,241,0.5);
}
.cflow-empty {
text-align: center; padding: 60px 20px;
color: #94a3b8;
}
.cflow-empty .btn { margin-top: 16px; }
/* Tighten the white-text inside embed mode so it pops on dark bg */
.rshow-card--coverflow {
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
/* Roles index — category chip filter row */
.roles-idx-cats {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0 0 20px;
padding: 14px 0;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
align-items: center; justify-content: center;
}
.roles-idx-cat {
display: inline-flex; align-items: center;
padding: 7px 14px; border-radius: 999px;
font-size: 13px; font-weight: 600;
color: #475569; background: #f1f5f9;
border: 1px solid transparent;
text-decoration: none;
transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.roles-idx-cat:hover { background: #e2e8f0; color: #0f172a; }
.roles-idx-cat:active { transform: scale(0.96); }
.roles-idx-cat--on {
background: linear-gradient(135deg, #2563eb, #6366f1);
color: #fff;
box-shadow: 0 4px 14px -4px rgba(99,102,241,0.45);
}
.roles-idx-cat--on:hover { color: #fff; }
/* Theme picker on /templates/:slug show page */
.tshow-theme-picker {
display: flex; align-items: center; gap: 14px;
margin: 18px 0 24px;
padding: 12px 16px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
flex-wrap: wrap;
}
.tshow-theme-picker__label {
font-size: 12px; font-weight: 700; color: #374151;
letter-spacing: 0.1em; text-transform: uppercase;
}
.tshow-theme-picker__hint {
font-size: 12px; color: #6b7280; flex: 1; min-width: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
Universal zoom preview modal — click any template preview to open
═══════════════════════════════════════════════════════════════════════ */
.zoom-preview { position: fixed; inset: 0; z-index: 2000; }
.zoom-preview[hidden] { display: none; }
.zoom-preview__backdrop {
position: absolute; inset: 0;
background: rgba(10,14,26,0.88);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 32px 20px;
opacity: 0;
transition: opacity 0.2s ease;
}
.zoom-preview.is-open .zoom-preview__backdrop { opacity: 1; }
.zoom-preview__panel {
position: relative;
width: 100%; max-width: 1040px;
max-height: 96vh;
background: #0f1117;
border-radius: 16px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
overflow: auto;
transform: scale(0.95); opacity: 0;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.zoom-preview.is-open .zoom-preview__panel { transform: scale(1); opacity: 1; }
.zoom-preview__close {
position: absolute; top: 16px; right: 16px; z-index: 10;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.15s;
}
.zoom-preview__close:hover { background: rgba(255,255,255,0.2); transform: scale(1.06); }
.zoom-preview__header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding: 24px 32px 18px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.zoom-preview__name { font-size: 22px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
.zoom-preview__theme-name { font-size: 12px; color: #93c5fd; letter-spacing: 0.1em; text-transform: uppercase; margin: 4px 0 0; font-weight: 600; }
.zoom-preview__cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: #22c55e; color: #fff;
border-radius: 10px; font-weight: 800; font-size: 14px;
text-decoration: none; transition: all 0.15s;
}
.zoom-preview__cta:hover { background: #16a34a; transform: translateY(-1px); }
.zoom-preview__image-wrap {
padding: 24px 32px;
display: flex; justify-content: center; align-items: flex-start;
background: repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 12px, rgba(255,255,255,0) 12px 24px);
}
.zoom-preview__image {
width: 100%; max-width: 760px; height: auto;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
background: #fff;
}
.zoom-swatches {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
padding: 18px 32px 28px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.zoom-swatches__loading { color: #8b8fa3; font-size: 13px; padding: 12px; }
.zoom-swatch {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px 6px 6px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 100px;
color: #e4e6ef; font-family: inherit; font-size: 12px; font-weight: 600;
cursor: pointer; transition: all 0.15s;
}
.zoom-swatch:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); }
.zoom-swatch.is-active { background: rgba(59,130,246,0.2); border-color: #3b82f6; }
.zoom-swatch__chip { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; flex-shrink: 0; }
.zoom-swatch__label { letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; }
/* "Default colors" reset button — same shape as the regular swatches
but with a refresh icon instead of a color chip, and a slightly
muted treatment so it doesn't compete with the active swatch. */
.zoom-swatch--reset {
padding: 6px 12px;
border-style: dashed;
color: #a8acc1;
}
.zoom-swatch--reset svg { stroke: #a8acc1; }
.zoom-swatch--reset:hover { color: #fff; border-style: solid; }
.zoom-swatch--reset:hover svg { stroke: #fff; }
@media (max-width: 640px) {
.zoom-preview__panel { max-height: 100vh; border-radius: 0; }
.zoom-preview__header { padding: 16px 18px 12px; }
.zoom-preview__name { font-size: 18px; }
.zoom-preview__image-wrap { padding: 14px 14px; }
.zoom-preview__close { top: 10px; right: 10px; width: 36px; height: 36px; }
}
/* Larger CL/ML thumbnails on /templates — 2-col, click-to-zoom */
.tpl-row__letters--large { padding: 4px 0; }
.tpl-row__letters-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 14px;
}
.tpl-row__letters-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 100px;
background: rgba(255,255,255,0.7);
border: 1px solid #e5e7eb;
font-size: 11.5px;
font-weight: 600;
color: #374151;
letter-spacing: 0.01em;
text-transform: none;
}
.tpl-row__letters-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(17, 24, 39, 0.1);
box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.06);
flex-shrink: 0;
}
.tpl-row__letters-grid--v2 {
display: grid;
gap: 16px;
/* Letter thumbnail keeps a tight, readable size; second cell (the
interview-prep teaser introduced in Bundle V2) grows to fill the
row so its 10-question list breathes. */
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
align-items: stretch;
margin: 0 0 14px;
}
@media (max-width: 720px) {
.tpl-row__letters-grid--v2 {
grid-template-columns: 1fr;
}
}
/* 3-column variant used on /roles/:slug to fit Resume + CL + ML in
one row. Falls back to 2-up under 720 px, 1-up under 480 px. */
.tpl-row__letters-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: none;
justify-content: stretch;
}
@media (max-width: 720px) {
.tpl-row__letters-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.tpl-row__letters-grid--3 { grid-template-columns: 1fr; }
}
.rshow-card--letter-pair {
/* The .tpl-row CSS variables paint the preview header; reset the
container's body padding so the matching-letter section matches the
templates page rather than the role show's narrower default. */
padding: 28px 28px 32px;
}
.rshow-card--letter-pair .tpl-row__letters {
margin: 12px 0 0;
}
.rshow-card--letter-pair .tpl-row__letter-img {
aspect-ratio: 816 / 1100;
object-fit: cover; object-position: top center;
}
.tpl-row__letters-grid--v2 {
justify-items: stretch;
align-items: start;
}
.tpl-row__letter-thumb--clickable {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 12px 12px 10px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
cursor: zoom-in;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
font: inherit; text-align: left;
/* Reset the fixed 100px width that the base .tpl-row__letter-thumb rule
applies — we want these filling the grid cell, not collapsing to 100px. */
width: 100%;
max-width: none;
margin: 0;
flex: 1 1 auto;
}
.tpl-row__letter-thumb--clickable::after {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(17, 24, 39, 0.75) url("data:image/svg+xml;utf8,") center/14px 14px no-repeat;
opacity: 0;
transform: translateY(-2px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.tpl-row__letter-thumb--clickable:hover {
border-color: #6366f1;
box-shadow: 0 10px 28px rgba(79, 70, 229, 0.14);
transform: translateY(-3px);
}
.tpl-row__letter-thumb--clickable:hover::after {
opacity: 1;
transform: translateY(0);
}
.tpl-row__letter-thumb--clickable .tpl-row__letter-img,
.tpl-row__letter-thumb--clickable svg {
width: 100% !important; height: auto !important;
aspect-ratio: 816 / 1100;
object-fit: cover; object-position: top center;
border-radius: 8px;
display: block;
pointer-events: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.tpl-row__letter-thumb--clickable .tpl-row__letter-label {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
font-size: 12px; font-weight: 700; color: #111827;
letter-spacing: 0.02em; text-transform: none;
line-height: 1.3;
}
.tpl-row__letter-zoom {
font-size: 10.5px;
font-weight: 600;
color: #9ca3af;
text-transform: lowercase;
letter-spacing: 0.02em;
}
/* Cursor hint on resume preview too */
.tpl-row__preview-link[data-zoom-preview-trigger] { cursor: zoom-in; }
/* ═══════════════════════════════════════════════════════════════════════
Build-your-bundle selector on /templates rows
═══════════════════════════════════════════════════════════════════════ */
.tpl-row__builder {
margin-top: 18px;
padding: 18px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 6px 20px rgba(15,23,42,0.04);
}
.tpl-row__builder-items {
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 14px;
}
.tpl-row__builder-item {
display: grid; grid-template-columns: 20px 22px 1fr auto; align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
cursor: pointer; transition: all 0.15s;
font-family: inherit; font-size: 13px;
}
.tpl-row__builder-item:hover:not(.tpl-row__builder-item--locked) {
border-color: #2563eb;
background: #f0f7ff;
}
.tpl-row__builder-item input[type="checkbox"] {
width: 18px; height: 18px; accent-color: #2563eb; cursor: pointer;
}
.tpl-row__builder-item--locked input { cursor: not-allowed; opacity: 0.7; }
.tpl-row__builder-dot {
width: 22px; height: 22px; border-radius: 50%;
background: #111827; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
}
.tpl-row__builder-dot--add { background: #2563eb; }
.tpl-row__builder-name { font-weight: 600; color: #111827; }
.tpl-row__builder-price { color: #6b7280; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpl-row__builder-promo {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #f59e0b;
border-radius: 10px;
color: #78350f; font-size: 12.5px; font-weight: 600;
margin-bottom: 14px;
}
.tpl-row__builder-promo strong { color: #78350f; font-weight: 800; }
.tpl-row__builder-cta-row {
display: flex; gap: 10px; align-items: stretch;
}
.tpl-row__cta--full {
flex: 1;
justify-content: center;
}
.tpl-row__cta--bundle {
background: linear-gradient(135deg, #f59e0b, #d97706) !important;
box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}
/* ═══════════════════════════════════════════════════════════════════════
Templates switcher — 3D coverflow stage + single active detail row
Used on /templates. Lets the user scroll a 3D carousel of resume
previews with adjacent templates visible in the distance; the active
card drives which detail row (info, matching letters, swatches,
builder, CTA) is shown below.
═══════════════════════════════════════════════════════════════════════ */
.tpl-switcher {
max-width: 1400px;
margin: 0 auto;
padding: 8px 20px 64px;
}
.tpl-results-count__hint {
color: #94a3b8;
font-weight: 500;
margin-left: 6px;
font-size: 13px;
}
/* Meta bar — sits just above the stage, shows count + trust strip +
keyboard hint on one row on desktop and stacks on mobile. */
.tpl-meta-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin: 4px 0 18px;
padding: 0 4px;
}
.tpl-meta-bar .tpl-results-count {
margin: 0;
font-size: 13px;
color: #475569;
}
.tpl-trust-strip {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tpl-trust-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 100px;
font-size: 11.5px;
font-weight: 700;
color: #334155;
letter-spacing: 0.01em;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.tpl-kb-hint {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
color: #64748b;
letter-spacing: 0.02em;
}
.tpl-kb-hint kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px;
padding: 0 5px;
font: 700 10.5px/1 'Bricolage Grotesque', ui-monospace, monospace;
color: #0f172a;
background: #fff;
border: 1px solid #e2e8f0;
border-bottom-width: 2px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(15,23,42,0.02);
}
/* Reflected floor below the stage cards — subtle, doesn't overwhelm.
Sits absolute at the bottom of the stage; the coverflow itself
remains the interactive zone. */
.tpl-stage__floor {
position: absolute;
left: 8%; right: 8%; bottom: 0;
height: 140px;
background:
radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.18), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%);
pointer-events: none;
z-index: 1;
filter: blur(6px);
opacity: 0.9;
}
/* Neighbor cards: slightly desaturate so the active card visually
commands attention without losing the "distance" effect. */
.tpl-stage__card:not(.is-active) .tpl-stage__preview {
filter: saturate(0.85) brightness(0.92);
transition: filter 0.35s ease;
}
.tpl-stage__card.is-active .tpl-stage__preview {
filter: none;
}
/* Detail row: more polish on the entrance — lift + fade from a larger
offset so the swap feels like the new template physically slides in. */
@keyframes tplDetailIn {
from { opacity: 0; transform: translateY(22px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.tpl-detail-row[data-active="true"] {
animation: tplDetailIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Sticky bundle CTA — replaces the dead "Browse Bundles" link.
Anchors at the viewport bottom, tracks the active template's name
+ slug so "Start bundle" always targets what the user is viewing. */
.tpl-bundle-cta {
position: sticky;
bottom: 16px;
z-index: 40;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 22px;
margin: 48px auto 12px;
max-width: 1100px;
border-radius: 100px;
background:
radial-gradient(at 15% 0%, rgba(99,102,241,0.16), transparent 55%),
linear-gradient(135deg, #ffffff 0%, #f5f6fd 100%);
border: 1px solid #e0e7ff;
box-shadow:
0 2px 4px rgba(15,23,42,0.06),
0 24px 56px rgba(79,70,229,0.18);
backdrop-filter: blur(8px);
}
.tpl-bundle-cta__stack {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 auto;
min-width: 0;
}
.tpl-bundle-cta__savings {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 100px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #fcd34d;
color: #78350f;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.03em;
flex-shrink: 0;
}
.tpl-bundle-cta__savings strong { color: #78350f; font-weight: 900; }
.tpl-bundle-cta__body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.tpl-bundle-cta__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 15px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tpl-bundle-cta__title span {
background: linear-gradient(90deg, #6366f1, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 900;
}
.tpl-bundle-cta__sub {
font-size: 12.5px;
color: #64748b;
}
.tpl-bundle-cta__was {
text-decoration: line-through;
color: #94a3b8;
margin: 0 6px 0 2px;
font-weight: 600;
}
.tpl-bundle-cta__now {
color: #059669;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.tpl-bundle-cta__button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
color: #fff;
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.01em;
border-radius: 100px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(15,23,42,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform 0.18s ease, box-shadow 0.18s ease;
flex-shrink: 0;
}
.tpl-bundle-cta__button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(15,23,42,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
}
.tpl-bundle-cta__button:active {
transform: translateY(0);
}
@media (max-width: 740px) {
.tpl-bundle-cta {
flex-direction: column;
border-radius: 18px;
gap: 14px;
padding: 16px;
}
.tpl-bundle-cta__button { width: 100%; justify-content: center; }
.tpl-kb-hint { display: none; }
.tpl-meta-bar .tpl-trust-strip { flex: 1 1 100%; }
}
/* ── Stage (3D coverflow of resume previews) ───────────────────── */
.tpl-stage {
position: relative;
height: 640px;
margin: 24px auto 40px;
padding: 0 80px;
background:
radial-gradient(ellipse at 50% 105%, rgba(99,102,241,0.12), transparent 60%),
radial-gradient(ellipse at 10% 10%, rgba(236,72,153,0.08), transparent 50%),
radial-gradient(ellipse at 90% 10%, rgba(14,165,233,0.08), transparent 50%),
linear-gradient(180deg, #0a0e1a 0%, #10172a 100%);
border-radius: 28px;
overflow: hidden;
outline: none;
box-shadow: 0 30px 80px rgba(15,23,42,0.35), 0 2px 0 rgba(255,255,255,0.04) inset;
}
.tpl-stage:focus-visible { box-shadow: 0 0 0 3px #60a5fa, 0 30px 80px rgba(15,23,42,0.35); }
.tpl-stage__cflow {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
perspective: 1800px; perspective-origin: 50% 50%;
overflow: hidden; position: relative;
}
.tpl-stage__cflow::before,
.tpl-stage__cflow::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 180px; z-index: 50;
pointer-events: none;
}
.tpl-stage__cflow::before { left: 0; background: linear-gradient(90deg, #0a0e1a 0%, rgba(10,14,26,0.85) 40%, transparent 100%); }
.tpl-stage__cflow::after { right: 0; background: linear-gradient(-90deg, #0a0e1a 0%, rgba(10,14,26,0.85) 40%, transparent 100%); }
.tpl-stage__card {
/* Inherits .cflow__card positioning (absolute, track-centered). Override
the visual to the in-stage rectangle and aspect. */
width: 360px; height: 540px;
margin-top: -270px; margin-left: -180px;
padding: 0; border: none; background: var(--bg, #fff);
cursor: pointer;
box-shadow:
0 28px 70px rgba(0,0,0,0.55),
0 6px 18px rgba(0,0,0,0.35),
0 0 0 1px rgba(255,255,255,0.06);
}
.tpl-stage__card.is-active {
box-shadow:
0 44px 96px rgba(0,0,0,0.6),
0 10px 28px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.08),
0 0 120px 14px color-mix(in srgb, var(--accent, #60a5fa) 40%, transparent);
}
.tpl-stage__card:focus-visible {
outline: 2px solid #60a5fa; outline-offset: 4px;
}
.tpl-stage__preview {
height: calc(100% - 56px);
overflow: hidden;
background: var(--bg, #fff);
position: relative;
}
.tpl-stage__preview::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 56px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.08));
pointer-events: none;
}
.tpl-stage__img, .tpl-stage__preview svg, .tpl-stage__preview img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: top center;
}
.tpl-stage__meta {
height: 56px;
display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
padding: 0 18px; gap: 2px;
background: rgba(255,255,255,0.97);
border-top: 1px solid rgba(0,0,0,0.06);
}
.tpl-stage__meta .cflow__name {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 15px; font-weight: 800; color: #0f172a;
letter-spacing: -0.01em;
}
.tpl-stage__category {
font-size: 10.5px; font-weight: 700; color: #64748b;
letter-spacing: 0.08em; text-transform: uppercase;
}
.tpl-stage__arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 52px; height: 52px; border-radius: 50%;
background: rgba(255,255,255,0.08); color: #f8fafc;
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(10px);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 60;
transition: background 0.2s ease, transform 0.2s ease;
}
.tpl-stage__arrow:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.06); }
.tpl-stage__arrow.cflow__arrow--left { left: 20px; }
.tpl-stage__arrow.cflow__arrow--right { right: 20px; }
.tpl-stage__arrow.hidden { opacity: 0.25; pointer-events: none; }
.tpl-stage__counter {
position: absolute;
left: 50%; bottom: 18px; transform: translateX(-50%);
background: rgba(255,255,255,0.1); color: #f8fafc;
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
padding: 6px 14px; border-radius: 100px;
font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
font-variant-numeric: tabular-nums;
z-index: 60;
}
/* Zoom hint on each coverflow card — subtle until hover on the active
card; side cards already stop propagation so only the center card
can trigger the modal. */
.tpl-stage__card { cursor: zoom-in; }
.tpl-stage__zoom-hint {
position: absolute;
top: 12px; right: 12px;
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 9px;
border-radius: 100px;
background: rgba(15,23,42,0.75);
color: #fff;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
opacity: 0;
transform: translateY(-2px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
z-index: 5;
}
.tpl-stage__card.is-active .tpl-stage__zoom-hint { opacity: 0.9; transform: translateY(0); }
.tpl-stage__card.is-active:hover .tpl-stage__zoom-hint { opacity: 1; }
.tpl-stage__card:not(.is-active) { cursor: pointer; }
/* ── Detail panel below the stage (single active row visible) ──── */
.tpl-detail-panel {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.tpl-detail-row {
display: none !important;
padding: 0;
border: none;
max-width: 1180px;
margin: 0 auto;
/* Restore the 2-col layout so the detail row shows resume preview
left + info right — lets users see the full bundle (resume + CL
+ ML) at a glance and incentivizes the bundle purchase. */
grid-template-columns: 340px 1fr !important;
gap: 36px !important;
align-items: start;
animation: tplDetailIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.tpl-detail-row[data-active="true"] {
display: grid !important;
}
/* The detail row's resume preview wrapper — non-sticky, normal grid
cell. Overrides the base .tpl-row__preview position:sticky. */
.tpl-detail-row .tpl-row__preview {
position: static;
top: auto;
}
.tpl-detail-row .tpl-row__preview-link {
position: relative;
display: block;
}
.tpl-detail-row .tpl-row__preview-badge {
position: absolute;
top: 10px;
left: 10px;
padding: 4px 10px;
background: rgba(15,23,42,0.85);
color: #fff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 100px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
pointer-events: none;
}
@media (max-width: 900px) {
.tpl-detail-row {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.tpl-detail-row .tpl-row__preview { max-width: 340px; margin: 0 auto; }
}
.tpl-detail-row .tpl-row__info {
padding: 8px 0;
}
@keyframes tplDetailIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* Sticky bundle banner — always-visible anchor in switcher mode. */
.tpl-bundle-banner--sticky {
position: sticky;
bottom: 16px;
z-index: 30;
margin: 40px auto 0;
}
@media (max-width: 900px) {
.tpl-stage {
height: 520px;
padding: 0 20px;
border-radius: 20px;
}
.tpl-stage__card { width: 280px; height: 420px; margin-top: -210px; margin-left: -140px; }
.tpl-stage__arrow { width: 40px; height: 40px; }
.tpl-stage__arrow.cflow__arrow--left { left: 10px; }
.tpl-stage__arrow.cflow__arrow--right { right: 10px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Post-purchase onboarding hub — /onboarding/hub
═══════════════════════════════════════════════════════════════════════ */
.hub-section { padding: 72px 20px 120px; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); min-height: 80vh; }
.hub-container { max-width: 820px; margin: 0 auto; }
.hub-hero { text-align: center; margin-bottom: 36px; }
.hub-hero__badge {
display: inline-flex; align-items: center; gap: 8px;
background: #dcfce7; color: #14532d;
padding: 8px 16px; border-radius: 100px;
font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 18px;
}
.hub-hero__title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 800; color: #111827;
letter-spacing: -0.02em; line-height: 1.12;
margin: 0 0 14px;
}
.hub-hero__sub {
font-size: 16px; color: #6b7280; max-width: 560px; margin: 0 auto 22px;
line-height: 1.6;
}
.hub-progress { display: inline-flex; align-items: center; gap: 14px; margin-top: 10px; }
.hub-progress__bar { width: 200px; height: 8px; background: #e5e7eb; border-radius: 100px; overflow: hidden; }
.hub-progress__fill { height: 100%; background: linear-gradient(90deg, #10b981, #22c55e); border-radius: 100px; transition: width 0.3s ease; }
.hub-progress__label { font-size: 13px; color: #6b7280; }
.hub-progress__label strong { color: #111827; }
/* Next card — attention-grabbing */
.hub-next-card {
position: relative;
background: linear-gradient(135deg, #111827, #1f2937);
color: #fff;
border-radius: 20px;
padding: 32px 36px;
margin-bottom: 40px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(17,24,39,0.25);
}
.hub-next-card__pulse {
position: absolute; top: -80px; right: -80px;
width: 280px; height: 280px; border-radius: 50%;
background: radial-gradient(circle, rgba(34,197,94,0.3) 0%, transparent 70%);
pointer-events: none;
}
.hub-next-card__body { position: relative; z-index: 1; }
.hub-next-card__eyebrow {
font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
color: #22c55e; margin: 0 0 8px;
}
.hub-next-card__title {
font-size: 24px; font-weight: 800; margin: 0 0 10px;
letter-spacing: -0.01em; color: #fff;
}
.hub-next-card__icon { font-size: 24px; margin-right: 8px; }
.hub-next-card__desc { color: #cbd5e1; font-size: 15px; line-height: 1.55; margin: 0 0 22px; max-width: 520px; }
.hub-next-card__cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 26px;
background: #22c55e; color: #fff;
border-radius: 10px;
font-size: 15px; font-weight: 800; text-decoration: none;
transition: all 0.15s;
}
.hub-next-card__cta:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,197,94,0.35); }
/* Checklist */
.hub-steps { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.hub-steps__label {
padding: 14px 20px 6px;
font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
color: #6b7280;
}
.hub-step {
display: grid; grid-template-columns: 36px 1fr auto; gap: 16px; align-items: center;
padding: 16px 20px;
border-radius: 12px;
transition: background 0.15s;
}
.hub-step + .hub-step { border-top: 1px solid #f3f4f6; }
.hub-step:hover { background: #f9fafb; }
.hub-step__num {
width: 32px; height: 32px; border-radius: 50%;
background: #f3f4f6; color: #6b7280;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
}
.hub-step--done .hub-step__num { background: #dcfce7; }
.hub-step--next .hub-step__num { background: #111827; color: #fff; }
.hub-step__title { font-size: 15px; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 8px; }
.hub-step__icon { font-size: 16px; }
.hub-step__desc { font-size: 13px; color: #6b7280; margin-top: 3px; line-height: 1.45; }
.hub-step__cta {
padding: 8px 14px;
background: #f3f4f6; color: #111827;
border-radius: 8px;
font-size: 12.5px; font-weight: 700; text-decoration: none;
white-space: nowrap;
transition: all 0.15s;
}
.hub-step--next .hub-step__cta { background: #22c55e; color: #fff; }
.hub-step--done .hub-step__cta { background: #dcfce7; color: #14532d; }
.hub-step__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* Balance summary */
.hub-balance { margin-top: 28px; padding: 22px 26px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; }
.hub-balance__label {
font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
color: #6b7280; margin: 0 0 14px;
}
.hub-balance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hub-balance__item {
display: flex; flex-direction: column; gap: 4px;
padding: 14px;
background: #f9fafb;
border-radius: 10px;
}
.hub-balance__n { font-size: 24px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; line-height: 1; }
.hub-balance__k { font-size: 11px; color: #6b7280; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.hub-footer { text-align: center; margin-top: 32px; font-size: 13px; color: #6b7280; }
.hub-footer a { color: #2563eb; font-weight: 600; text-decoration: none; }
@media (max-width: 640px) {
.hub-section { padding: 40px 14px 80px; }
.hub-next-card { padding: 24px 20px; }
.hub-step { grid-template-columns: 32px 1fr; }
.hub-step__cta { grid-column: 1 / 3; margin-top: 10px; text-align: center; }
.hub-balance__grid { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════
Related searches — visible GSC-surfaced query chips. Placed at the
bottom of role, blog, template, and SEO pages. Each chip is a real
user query we already appear in the index for; linking to a search
over our roles library surfaces the right destination and gets the
exact query string on the page (a top relevance signal for Google).
═══════════════════════════════════════════════════════════════════ */
.related-searches {
max-width: 1040px;
margin: 48px auto 24px;
padding: 0 20px;
}
.related-searches__inner {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 24px 28px;
}
.related-searches__heading {
font-size: 18px;
font-weight: 700;
margin: 0 0 8px;
color: #0f172a;
}
.related-searches__intro {
font-size: 14px;
color: #475569;
margin: 0 0 14px;
}
.related-searches__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.related-searches__item { margin: 0; }
.related-searches__link {
display: inline-block;
padding: 7px 13px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #cbd5e1;
color: #1e293b;
font-size: 13px;
text-decoration: none;
transition: all 0.12s ease;
}
.related-searches__link:hover {
background: #1e40af;
border-color: #1e40af;
color: #ffffff;
}
/* ── Interview Prep Results page (Bundle V2) ────────────────────────── */
/* Persistent result page reachable via /interview-prep/r/:token. Sized
to feel like a real document: roomy, scannable, mobile-first. */
.ipr-page { background: #f8fafc; min-height: 100vh; padding: 32px 16px 64px; }
.ipr-page__inner { max-width: 760px; margin: 0 auto; }
.ipr-header {
background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
padding: 28px 32px; margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.ipr-header__chip {
display: inline-block; background: #eef2ff; color: #4338ca;
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; padding: 5px 12px; border-radius: 999px;
margin-bottom: 12px;
}
.ipr-header__title { font-size: 30px; font-weight: 800; color: #0f172a; margin: 0 0 6px; line-height: 1.2; }
.ipr-header__meta { color: #64748b; margin: 0 0 20px; font-size: 14px; }
.ipr-header__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ipr-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 18px; border-radius: 10px;
font-weight: 600; font-size: 14px; text-decoration: none;
border: 1px solid #cbd5e1; color: #1f2937; background: #fff;
transition: background 0.12s ease, border-color 0.12s ease;
}
.ipr-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.ipr-btn--primary { background: #4338ca; color: #fff; border-color: #4338ca; }
.ipr-btn--primary:hover { background: #3730a3; border-color: #3730a3; color: #fff; }
.ipr-btn--ghost { border-color: transparent; color: #4338ca; }
.ipr-btn--ghost:hover { background: #eef2ff; border-color: transparent; }
.ipr-questions { list-style: none; padding: 0; margin: 0; }
.ipr-question {
background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
padding: 20px 24px; margin-bottom: 14px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.ipr-question__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.ipr-question__num {
flex: 0 0 auto; width: 32px; height: 32px;
background: #4338ca; color: #fff;
font-weight: 700; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.ipr-question__meta { flex: 1; min-width: 0; }
.ipr-question__cat {
display: inline-block;
font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 999px;
border: 1px solid; margin-bottom: 6px;
}
.ipr-question__text { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.4; }
.ipr-question__section { margin-top: 14px; }
.ipr-question__section-title {
font-size: 12px; font-weight: 700; color: #4338ca;
margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.06em;
}
.ipr-question__section p { margin: 0 0 8px; color: #1f2937; line-height: 1.55; }
.ipr-question__tips { margin: 4px 0 0 20px; padding: 0; color: #1f2937; }
.ipr-question__tips li { margin-bottom: 4px; line-height: 1.5; }
.ipr-footer { margin-top: 28px; }
.ipr-empty {
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 24px; text-align: center; color: #475569;
}
@media (max-width: 600px) {
.ipr-header { padding: 20px; border-radius: 12px; }
.ipr-header__title { font-size: 22px; }
.ipr-header__actions { gap: 8px; }
.ipr-btn { padding: 9px 14px; font-size: 13px; flex: 1 1 calc(50% - 4px); justify-content: center; }
.ipr-btn--ghost { flex: 1 1 100%; }
.ipr-question { padding: 16px 18px; border-radius: 12px; }
.ipr-question__num { width: 28px; height: 28px; }
.ipr-question__text { font-size: 15px; }
}
/* Bundle V2: download bar shown above generated interview-prep
questions. The bar surfaces the persistent download URLs so users
can re-download without re-running the AI. */
.ip-download-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px;
padding: 14px 18px; margin-bottom: 16px;
}
.ip-download-bar[data-cached="true"] { background: #ecfeff; border-color: #a5f3fc; }
.ip-download-bar__copy { flex: 1; min-width: 200px; color: #1f2937; font-size: 14px; line-height: 1.45; }
.ip-download-bar__copy strong { color: #4338ca; }
.ip-download-bar[data-cached="true"] .ip-download-bar__copy strong { color: #0e7490; }
.ip-download-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-download-bar__btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px;
text-decoration: none; border: 1px solid #cbd5e1; color: #1f2937; background: #fff;
transition: background 0.12s ease, border-color 0.12s ease;
}
.ip-download-bar__btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.ip-download-bar__btn--primary { background: #4338ca; color: #fff; border-color: #4338ca; }
.ip-download-bar__btn--primary:hover { background: #3730a3; border-color: #3730a3; color: #fff; }
.ip-download-bar__btn--ghost { background: transparent; border-color: transparent; color: #4338ca; }
.ip-download-bar__btn--ghost:hover { background: rgba(67, 56, 202, 0.08); border-color: transparent; }
@media (max-width: 540px) {
.ip-download-bar { padding: 12px 14px; }
.ip-download-bar__actions { width: 100%; }
.ip-download-bar__btn { flex: 1 1 auto; justify-content: center; }
}
/* Bundle V2: past interview-prep results list shown in the tool sidebar */
.ip-past-results {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
padding: 14px 16px; margin-bottom: 16px;
}
.ip-past-results__title {
font-size: 13px; font-weight: 700; color: #4338ca;
text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.ip-past-results__list { list-style: none; padding: 0; margin: 0; }
.ip-past-results__item {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0; border-bottom: 1px solid #e2e8f0; gap: 12px;
}
.ip-past-results__item:last-child { border-bottom: 0; }
.ip-past-results__link {
flex: 1; min-width: 0;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
text-decoration: none; color: #1f2937;
}
.ip-past-results__job {
flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-weight: 600;
}
.ip-past-results__date { color: #64748b; font-size: 12px; flex: 0 0 auto; }
.ip-past-results__downloads { display: flex; gap: 6px; flex: 0 0 auto; }
.ip-past-results__downloads a {
font-size: 11px; font-weight: 700; padding: 3px 8px;
border-radius: 6px; background: #fff; border: 1px solid #cbd5e1;
color: #4338ca; text-decoration: none;
}
.ip-past-results__downloads a:hover { background: #eef2ff; }
@media (max-width: 540px) {
.ip-past-results__item { flex-wrap: wrap; }
.ip-past-results__downloads { width: 100%; justify-content: flex-end; }
}
/* ============================================================
SEO scaffold primitives — quick-answer card, key-stats strip,
FAQ accordion. Used by SeoScaffoldHelper. Designed to feel
like a clean explainer card a visitor would want to read,
while doubling as a structured-data carrier for answer
engines. Nothing in the user-visible copy references "AI" —
the value framing stays human-first.
============================================================ */
/* Container that wraps the auto-injected SEO scaffold blocks at
the top + bottom of every /seo_pages/* view. Matches the
container used by the existing page bodies so the scaffold
blocks line up with the rest of the layout. */
.seo-page-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 640px) {
.seo-page-container { padding: 0 16px; }
}
/* Quick-answer card — a single concise summary block near the top
of every SEO page. Reads like the "TL;DR" on a Hacker News post
or the short summary at the top of a Wikipedia article: factual,
direct, valuable on its own. */
.seo-quick-answer {
margin: 24px 0 32px;
padding: 20px 24px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-left: 4px solid #4338ca;
border-radius: 12px;
}
.seo-quick-answer__eyebrow {
margin: 0 0 6px;
font-size: 11px;
font-weight: 700;
color: #4338ca;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.seo-quick-answer__text {
margin: 0;
font-size: 16px;
font-weight: 500;
color: #1f2937;
line-height: 1.65;
letter-spacing: -0.005em;
}
@media (max-width: 640px) {
.seo-quick-answer { padding: 16px 18px; margin: 16px 0 24px; }
.seo-quick-answer__text { font-size: 15px; line-height: 1.6; }
}
/* Key-stats strip — short row of citable facts shown at-a-glance.
Equal-width grid on desktop, wraps to 2 cols on tablet, stacks
on mobile. */
.seo-key-stats {
margin: 24px 0;
padding: 18px 20px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px;
}
.seo-key-stat {
text-align: center;
border-right: 1px solid #f1f5f9;
padding: 0 8px;
}
.seo-key-stat:last-child { border-right: 0; }
.seo-key-stat__value {
font-size: 24px;
font-weight: 800;
color: #111827;
letter-spacing: -0.02em;
line-height: 1.1;
}
.seo-key-stat__label {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
color: #6b7280;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.seo-key-stats { grid-template-columns: repeat(2, 1fr); }
.seo-key-stat { border-right: 0; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; }
.seo-key-stat:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 480px) {
.seo-key-stats { grid-template-columns: 1fr; }
.seo-key-stat { border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; }
.seo-key-stat:last-child { border-bottom: 0; }
}
/* FAQ accordion — clean, indexable, and renders cleanly without JS.
/ native disclosure, no Stimulus needed. The
server-side FAQPage JSON-LD is emitted by SeoScaffoldHelper into
:head so this block doubles as the citable schema source. */
.seo-faq {
margin: 40px 0;
padding: 28px 32px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
}
.seo-faq__heading {
margin: 0 0 18px;
font-size: 22px;
font-weight: 700;
color: #111827;
letter-spacing: -0.015em;
}
.seo-faq__item {
border-bottom: 1px solid #f1f5f9;
padding: 14px 0;
}
.seo-faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.seo-faq__item:first-child { padding-top: 0; }
.seo-faq__q {
font-size: 16px;
font-weight: 700;
color: #1f2937;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 4px 0;
transition: color 0.15s;
}
.seo-faq__q::-webkit-details-marker { display: none; }
.seo-faq__q::after {
content: "+";
font-size: 22px;
font-weight: 400;
color: #6366f1;
line-height: 1;
flex-shrink: 0;
transition: transform 0.2s;
}
.seo-faq__item[open] .seo-faq__q::after {
transform: rotate(45deg);
}
.seo-faq__q:hover { color: #4338ca; }
.seo-faq__a {
margin-top: 10px;
font-size: 15px;
font-weight: 400;
color: #374151;
line-height: 1.65;
}
.seo-faq__a p { margin: 0 0 10px; }
.seo-faq__a p:last-child { margin-bottom: 0; }
.seo-faq__a a { color: #4338ca; text-decoration: underline; text-underline-offset: 2px; }
.seo-faq__a a:hover { color: #3730a3; }
@media (max-width: 640px) {
.seo-faq { padding: 20px 22px; margin: 24px 0; }
.seo-faq__heading { font-size: 19px; margin-bottom: 14px; }
.seo-faq__q { font-size: 15px; }
.seo-faq__a { font-size: 14px; }
}
/* ============================================================
Tool download card — post-purchase delivery surface for the
five AI tools. Modern 2026 design language: indigo accents,
substantial spacing, large tap targets. Mirrors the wizard
plan step's confidence so the buyer feels the same level of
product polish at the receive-your-result moment.
============================================================ */
.tool-download-card {
max-width: 760px;
margin: 24px auto 32px;
padding: 24px 28px;
background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
border: 1px solid #c7d2fe;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(67, 56, 202, 0.08);
}
.tool-download-card__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.tool-download-card__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: #fff;
border: 1px solid #c7d2fe;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tool-download-card__title {
margin: 0;
font-size: 18px;
font-weight: 800;
color: #1e1b4b;
letter-spacing: -0.015em;
}
.tool-download-card__sub {
margin: 2px 0 0;
font-size: 13.5px;
color: #4338ca;
line-height: 1.4;
}
.tool-download-card__buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 600px) {
.tool-download-card { padding: 18px 18px; margin: 18px -2px 24px; border-radius: 14px; }
.tool-download-card__buttons { grid-template-columns: 1fr; }
.tool-download-card__title { font-size: 17px; }
}
.tool-download-btn {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: #fff;
border: 1.5px solid transparent;
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
cursor: pointer;
}
.tool-download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(67, 56, 202, 0.18);
}
.tool-download-btn__icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
flex-shrink: 0;
}
.tool-download-btn__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.tool-download-btn__label {
font-size: 14.5px;
font-weight: 700;
letter-spacing: -0.005em;
color: #111827;
}
.tool-download-btn__hint {
font-size: 12px;
font-weight: 500;
color: #6b7280;
line-height: 1.35;
}
.tool-download-btn--primary {
border-color: #4338ca;
background: #4338ca;
color: #fff;
}
.tool-download-btn--primary .tool-download-btn__label,
.tool-download-btn--primary .tool-download-btn__hint { color: #fff; }
.tool-download-btn--primary .tool-download-btn__hint { color: #c7d2fe; }
.tool-download-btn--primary .tool-download-btn__icon {
background: rgba(255,255,255,0.18);
color: #fff;
}
.tool-download-btn--primary:hover {
background: #3730a3;
border-color: #3730a3;
}
.tool-download-btn--secondary {
border-color: #c7d2fe;
}
.tool-download-btn--secondary .tool-download-btn__icon {
background: #eef2ff;
color: #4338ca;
}
.tool-download-btn--secondary:hover {
border-color: #6366f1;
}
.tool-download-card__foot {
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed #c7d2fe;
display: flex;
flex-direction: column;
gap: 8px;
}
.tool-download-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255,255,255,0.6);
border: 1px solid #c7d2fe;
border-radius: 8px;
font: inherit;
font-size: 12.5px;
font-weight: 600;
color: #4338ca;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
align-self: flex-start;
}
.tool-download-link:hover {
background: #fff;
border-color: #6366f1;
}
.tool-download-link.is-copied {
background: #d1fae5;
border-color: #059669;
color: #065f46;
}
.tool-download-link__icon { display: inline-flex; }
.tool-download-card__note {
margin: 0;
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
/* ──────────────────────────────────────────────────────────────────────
Mobile: prevent iOS Safari's auto-zoom-on-focus.
iOS Safari zooms the entire viewport when a user taps any input,
textarea, or select whose computed font-size is < 16px. This is a
silent UX disruptor: every tap on a form input causes the page to
zoom in, then the user has to pinch-zoom back out to continue.
Affected at the moment: .email-capture__input (15px),
.footer-newsletter__input (13px), .contact-form__input /
__textarea / __select (15px). Bumping to 16px ONLY at mobile
widths so desktop visual stays identical. The same fix lives in
wizard.css for the wizard-specific input classes.
────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.email-capture__input,
.footer-newsletter__input,
.contact-form__input,
.contact-form__select,
.contact-form__textarea,
.ats-form input[type="text"],
.ats-form input[type="email"],
.ats-form textarea {
font-size: 16px;
}
}
/* Pricing-hero placement helper for the reviews badge. */
.pricing-hero__reviews { margin-top: 12px; }
/* ============================================================
Reviews (own-system, distinct from Trustpilot widget)
.rev-* prefix. Used by /reviews, /reviews/new, embedded
stars badge, and admin moderation page.
============================================================ */
.rev-page {
background: #fafafa;
min-height: 70vh;
padding: 40px 0 64px;
}
/* ── Form (submission page) ─────────────────────────────── */
.rev-form-section { padding: 0; }
.rev-form-container {
max-width: 640px;
margin: 0 auto;
padding: 0 24px;
}
.rev-form-header { text-align: center; margin-bottom: 32px; }
.rev-verified-badge {
display: inline-block;
background: #ecfdf5;
color: #047857;
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 16px;
letter-spacing: 0.3px;
}
.rev-form-title {
font-size: 28px;
font-weight: 800;
color: #111;
margin: 0 0 8px;
letter-spacing: -0.5px;
}
.rev-form-subtitle {
font-size: 15px;
color: #4b5563;
margin: 0;
line-height: 1.5;
}
.rev-form {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 28px 28px 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}
.rev-field { margin-bottom: 20px; }
.rev-field--rating { border: none; padding: 0; margin-bottom: 24px; }
.rev-field__label {
display: block;
font-size: 14px;
font-weight: 700;
color: #111;
margin-bottom: 6px;
}
.rev-field__required { color: #dc2626; margin-left: 2px; }
.rev-field__input,
.rev-field__textarea {
width: 100%;
padding: 11px 14px;
/* 16px to prevent iOS Safari from auto-zooming on focus. */
font-size: 16px;
font-family: inherit;
color: #111;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.rev-field__input:focus,
.rev-field__textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.rev-field__textarea {
resize: vertical;
min-height: 8rem;
line-height: 1.5;
}
.rev-field__hint {
font-size: 12px;
color: #6b7280;
margin: 6px 0 0;
line-height: 1.4;
}
.rev-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) {
.rev-field-row { grid-template-columns: 1fr; }
}
/* Honeypot — invisible to humans, irresistible to bots. */
.rev-honeypot {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Star rating input — radio buttons rendered as filling stars on
hover/check. Reverse DOM order + row-reverse flex flow gives the
classic "fill from left to right based on hovered/checked" effect
using sibling selectors. */
.rev-stars-input {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 4px;
}
.rev-stars-input input[type="radio"] {
position: absolute;
left: -10000px;
opacity: 0;
}
.rev-stars-input__star {
font-size: 40px;
line-height: 1;
color: #e5e7eb;
cursor: pointer;
transition: color 0.12s, transform 0.12s;
user-select: none;
/* Min 44x44 touch target on mobile per WCAG 2.5.5. */
display: inline-block;
padding: 2px 4px;
}
.rev-stars-input__star:active { transform: scale(0.94); }
.rev-stars-input input[type="radio"]:checked ~ .rev-stars-input__star,
.rev-stars-input__star:hover,
.rev-stars-input__star:hover ~ .rev-stars-input__star {
color: #fbbf24;
}
.rev-submit-btn {
width: 100%;
background: #2563eb;
color: #fff;
font-size: 15px;
font-weight: 700;
padding: 14px 24px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.15s;
}
.rev-submit-btn:hover { background: #1d4ed8; }
.rev-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rev-disclosure {
font-size: 12px;
color: #6b7280;
margin: 16px 0 0;
text-align: center;
line-height: 1.5;
}
/* ── Thanks page ─────────────────────────────────────────── */
.rev-thanks-section { padding: 40px 0; }
.rev-thanks-container {
max-width: 520px;
margin: 0 auto;
padding: 40px 24px;
text-align: center;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
}
.rev-thanks-icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
background: #ecfdf5;
color: #059669;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 700;
}
.rev-thanks-title {
font-size: 24px;
font-weight: 800;
color: #111;
margin: 0 0 12px;
}
.rev-thanks-body {
font-size: 15px;
color: #4b5563;
line-height: 1.6;
margin: 0 0 24px;
}
.rev-thanks-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.rev-thanks-btn {
padding: 10px 20px;
font-size: 14px;
font-weight: 700;
border-radius: 8px;
text-decoration: none;
transition: all 0.15s;
}
.rev-thanks-btn--primary { background: #2563eb; color: #fff; }
.rev-thanks-btn--primary:hover { background: #1d4ed8; }
.rev-thanks-btn--ghost {
background: transparent;
color: #4b5563;
border: 1px solid #d1d5db;
}
.rev-thanks-btn--ghost:hover { background: #f9fafb; }
/* ── Index page ──────────────────────────────────────────── */
.rev-index-header { padding-bottom: 32px; }
.rev-index-container {
max-width: 880px;
margin: 0 auto;
padding: 0 24px;
}
.rev-index-title {
font-size: 36px;
font-weight: 800;
color: #111;
margin: 0 0 12px;
text-align: center;
letter-spacing: -0.5px;
}
.rev-index-subtitle {
font-size: 16px;
color: #4b5563;
text-align: center;
max-width: 560px;
margin: 0 auto 28px;
line-height: 1.6;
}
.rev-summary {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin: 0 auto;
padding: 20px 24px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
max-width: 520px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.rev-summary__score {
display: flex;
align-items: baseline;
gap: 2px;
}
.rev-summary__avg {
font-size: 40px;
font-weight: 800;
color: #111;
line-height: 1;
}
.rev-summary__out-of {
font-size: 16px;
color: #6b7280;
}
.rev-summary__stars { font-size: 22px; color: #e5e7eb; letter-spacing: 1px; }
.rev-summary__star--on { color: #fbbf24; }
.rev-summary__count { font-size: 14px; color: #4b5563; font-weight: 600; }
.rev-index-list-section { padding: 24px 0; }
.rev-index-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 16px;
}
.rev-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 20px 24px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
transition: box-shadow 0.15s;
}
.rev-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); }
.rev-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
flex-wrap: wrap;
gap: 8px;
}
.rev-card__stars { font-size: 18px; color: #e5e7eb; letter-spacing: 1px; }
.rev-card__star--on { color: #fbbf24; }
.rev-card__verified {
font-size: 12px;
color: #047857;
font-weight: 700;
background: #ecfdf5;
padding: 3px 10px;
border-radius: 12px;
}
.rev-card__title {
font-size: 16px;
font-weight: 700;
color: #111;
margin: 4px 0 6px;
}
.rev-card__body {
font-size: 14px;
color: #374151;
line-height: 1.6;
margin: 0 0 12px;
white-space: pre-wrap;
}
.rev-card__footer {
font-size: 12px;
color: #6b7280;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.rev-card__name { font-weight: 700; color: #111; }
.rev-empty {
background: #fff;
border: 1px dashed #d1d5db;
border-radius: 14px;
padding: 40px 24px;
text-align: center;
}
.rev-empty__icon {
font-size: 36px;
color: #fbbf24;
margin-bottom: 12px;
}
.rev-empty__title {
font-size: 18px;
font-weight: 700;
color: #111;
margin: 0 0 8px;
}
.rev-empty__body {
font-size: 14px;
color: #4b5563;
max-width: 420px;
margin: 0 auto;
line-height: 1.6;
}
/* ── Embeddable stars badge (drop-in for landing/pricing) ── */
.rev-badge {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #111;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
transition: border-color 0.15s, transform 0.15s;
}
a.rev-badge:hover { border-color: #fbbf24; transform: translateY(-1px); }
.rev-badge--sm { font-size: 12px; padding: 6px 10px; }
.rev-badge--lg { font-size: 15px; padding: 10px 18px; }
.rev-badge__stars {
display: inline-flex;
letter-spacing: 1px;
color: #e5e7eb;
}
.rev-badge--sm .rev-badge__stars { font-size: 12px; }
.rev-badge--md .rev-badge__stars { font-size: 15px; }
.rev-badge--lg .rev-badge__stars { font-size: 17px; }
.rev-badge__star--on { color: #fbbf24; }
.rev-badge__score { font-weight: 700; }
.rev-badge__count { color: #6b7280; }
/* ── Responsive breakpoints ──────────────────────────────── */
/* Tablet: tighten card padding + index title scale. */
@media (max-width: 768px) {
.rev-page { padding: 28px 0 48px; }
.rev-index-title { font-size: 30px; }
.rev-index-subtitle { font-size: 15px; }
.rev-form { padding: 24px 20px 20px; }
.rev-summary { gap: 12px; padding: 18px 20px; }
.rev-summary__avg { font-size: 36px; }
.rev-thanks-container { padding: 32px 20px; }
.rev-thanks-title { font-size: 22px; }
}
/* Mobile: stack everything, shrink card chrome, keep tap targets large. */
@media (max-width: 600px) {
.rev-index-title { font-size: 26px; letter-spacing: -0.3px; }
.rev-index-subtitle { font-size: 14px; }
.rev-form { padding: 20px 16px 18px; border-radius: 12px; }
.rev-card { padding: 16px 18px; border-radius: 12px; }
.rev-card__title { font-size: 15px; }
.rev-card__body { font-size: 13.5px; }
.rev-thanks-container { padding: 28px 18px; border-radius: 12px; }
.rev-thanks-icon { width: 60px; height: 60px; font-size: 30px; }
.rev-thanks-title { font-size: 20px; }
.rev-thanks-body { font-size: 14px; }
.rev-summary { padding: 16px 18px; flex-direction: column; gap: 8px; }
.rev-form-title { font-size: 24px; }
.rev-form-subtitle { font-size: 14px; }
.rev-submit-btn { padding: 13px 20px; font-size: 15px; }
.rev-stars-input { gap: 2px; }
.rev-stars-input__star { font-size: 36px; padding: 4px 6px; }
.rev-badge--lg { font-size: 13px; padding: 8px 14px; }
.rev-badge--lg .rev-badge__stars { font-size: 15px; }
}
/* Small mobile: shrink badge further so it fits below hero copy. */
@media (max-width: 380px) {
.rev-badge { gap: 6px; padding: 6px 12px; }
.rev-badge__count { display: none; }
.rev-stars-input__star { font-size: 32px; }
}
/* simple shimmering block */
.ag-skeleton {
position: relative;
overflow: hidden;
background: #f6f7f8;
}
.ag-skeleton::after {
content: "";
position: absolute; inset: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.6) 50%,
rgba(255,255,255,0) 100%
);
animation: ag-shimmer 1.25s infinite;
}
@keyframes ag-shimmer {
100% { transform: translateX(100%); }
}
/* ============================================================
ApplyGlide — Resume Base CSS
Loaded by Export::HtmlRenderer alongside tailwind.css.
Provides the page wrapper, print rules, and shared
primitives that all premium template partials can rely on.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: #fff;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
/* Multilingual font fallback chain — guarantees CJK / Devanagari /
Arabic / Hebrew / Thai names + content render correctly in the
generated PDF. The Linux deploy image installs fonts-noto-cjk +
fonts-noto-core + fonts-noto-extra so Chrome (via Grover) can
fall through this stack until it finds glyph coverage. */
font-family:
"Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI",
"Noto Sans", "Noto Sans Arabic", "Noto Sans CJK SC",
"Noto Sans CJK JP", "Noto Sans CJK KR", "Noto Sans Devanagari",
"Noto Sans Bengali", "Noto Sans Hebrew", "Noto Sans Thai",
"Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
"Noto Color Emoji", sans-serif;
unicode-bidi: plaintext;
}
/* ── Page wrapper ───────────────────────────────────────────── */
.rp {
width: 816px; /* 8.5in @ 96dpi */
min-height: 1100px; /* matches WebP render viewport height */
margin: 0 auto;
background: #fff;
position: relative;
overflow: hidden;
font-size: 10.5pt;
line-height: 1.5;
color: #111827;
-webkit-font-smoothing: antialiased;
}
/* ── Full-canvas stretch for grid/flex resume shells ───────────
Templates that split into sidebar + content columns must have their
children stretch to the full page height — otherwise the colored
sidebar ends where the shorter column ends, leaving dead whitespace
below. Every `.rp.` canvas inherits these rules regardless of
individual partial styling. */
.rp[class*=" "] { min-height: 1100px; }
/* Any .rp with display:grid → single explicit row spanning the full
canvas. Grid tracks default to auto (content-sized), which is what
leaves the bottom white strip. `minmax(1100px, 1fr)` forces the row
to fill the parent's 1100px min-height. */
.rp[style*="grid"],
.rp.astor, .rp.atelier, .rp.aurum, .rp.bespoke, .rp.catalyst,
.rp.circuit, .rp.folio, .rp.garrison, .rp.halcyon, .rp.kindheart,
.rp.launchpad, .rp.monarch, .rp.mosaic, .rp.quota, .rp.sovereign,
.rp.synapse, .rp.vitalis, .rp.vogue, .rp.chronos, .rp.pivot,
.rp.sakura {
grid-template-rows: minmax(1100px, 1fr);
}
/* Same story for flex-column shells: a flex child that only sizes to
its content can sit above empty canvas. Stretch them to fill. */
.rp[class*=" "] > .at-sidebar,
.rp[class*=" "] > .au-sidebar,
.rp[class*=" "] > .sd-sidebar,
.rp[class*=" "] > .lp-sidebar,
.rp[class*=" "] > .bp-inner,
.rp[class*=" "] > [class$="-sidebar"],
.rp[class*=" "] > [class$="-content"] {
min-height: 1100px;
}
/* ── Bullet list ────────────────────────────────────────────── */
.r-bullets {
list-style: none;
margin: 0.3em 0 0;
padding: 0;
}
.r-bullets li {
position: relative;
padding-left: 1.1em;
margin-bottom: 0.22em;
line-height: 1.45;
}
.r-bullets li::before {
content: "•";
position: absolute;
left: 0;
color: inherit;
opacity: 0.7;
}
/* ── Skill chips ────────────────────────────────────────────── */
.r-chips { display: flex; flex-wrap: wrap; gap: 0.25em 0.35em; }
.r-chip {
display: inline-block;
font-size: 0.78em;
padding: 0.15em 0.55em;
border-radius: 2px;
white-space: nowrap;
line-height: 1.5;
}
/* ── Print ──────────────────────────────────────────────────── */
@media print {
/* CRITICAL: `.rp` carries `overflow: hidden` for the on-screen card.
In paged media Chromium clips ANY overflow:hidden element that spans
a page boundary to its first page — so a 2-page resume silently lost
page 2 in the PDF download. Reset to visible so the full document
paginates. min-height:0 lets the printed page size to content. */
.rp { width: 100%; min-height: 0; margin: 0; overflow: visible !important; }
/* Keep experience/education entries and bullets from splitting across
a page break (avoids an orphaned role title or a half-cut bullet). */
.r-bullets li,
.r-exp-item, .r-edu-item, .r-proj-item, .r-section-item,
[class$="-item"], [class$="-entry"], [class$="-role"] {
break-inside: avoid;
}
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
/* ============================================================
wizard.css — ApplyGlide Onboarding Wizard Design System
============================================================ */
/* ── Design tokens ─────────────────────────────────────────── */
:root {
--wz-bg: #f8f9fa;
--wz-surface: #ffffff;
--wz-border: #e5e7eb;
--wz-text: #111827;
--wz-muted: #6b7280;
--wz-accent: #111827;
--wz-accent-light: #f3f4f6;
--wz-green: #10b981;
--wz-blue: #2563eb;
--wz-radius: 16px;
--wz-radius-sm: 10px;
--wz-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
}
/* ── Page wrapper ───────────────────────────────────────────── */
.wz-page {
background: var(--wz-bg);
min-height: 100vh;
}
/* ── Container ──────────────────────────────────────────────── */
.wz-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
/* ── Progress header bar ────────────────────────────────────── */
.wz-progress-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 1.25rem 1rem 0;
}
.wz-progress {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
padding: 1rem 1.25rem;
box-shadow: var(--wz-shadow);
}
.wz-progress__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.wz-progress__step-label {
min-width: 0;
}
.wz-progress__step-label-small {
font-size: 0.7rem;
color: var(--wz-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.2rem;
}
.wz-progress__step-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--wz-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wz-progress__step-kind {
color: var(--wz-muted);
font-weight: 400;
}
.wz-progress__counter {
text-align: right;
flex-shrink: 0;
}
.wz-progress__counter-label {
font-size: 0.7rem;
color: var(--wz-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.2rem;
}
.wz-progress__counter-value {
font-weight: 700;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
color: var(--wz-text);
}
.wz-progress__bar-track {
margin-top: 0.75rem;
height: 6px;
width: 100%;
border-radius: 99px;
background: #f1f3f5;
overflow: hidden;
}
.wz-progress__bar-fill {
height: 6px;
background: var(--wz-accent);
border-radius: 99px;
transition: width 0.4s ease;
}
.wz-progress__footer {
margin-top: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.72rem;
color: var(--wz-muted);
}
/* ── Grid layout ────────────────────────────────────────────── */
.wz-grid-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
.wz-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start;
}
@media (min-width: 1024px) {
.wz-grid {
grid-template-columns: 2fr 1fr;
}
/* Full-width pages (e.g. the template step's 3D coverflow) drop the
sidebar entirely so the main column spans the whole container. */
.wz-grid--full {
grid-template-columns: 1fr;
}
}
.wz-main {
min-width: 0;
}
.wz-sidebar {
position: sticky;
top: 6rem;
display: flex;
flex-direction: column;
gap: 1rem;
max-height: calc(100vh - 7rem);
overflow-y: auto;
}
/* ── Step header ────────────────────────────────────────────── */
.wz-step-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
.wz-step-title {
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--wz-text);
line-height: 1.15;
}
.wz-step-subtitle {
color: var(--wz-muted);
font-size: 0.9rem;
margin-top: 0.3rem;
}
/* ── Feature chips ──────────────────────────────────────────── */
.wz-chips {
display: none;
gap: 0.5rem;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.wz-chips {
display: flex;
}
}
.wz-chip {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
font-weight: 500;
color: var(--wz-text);
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: 99px;
padding: 0.3rem 0.75rem;
white-space: nowrap;
letter-spacing: 0.01em;
}
.wz-chip--green {
color: #065f46;
background: #ecfdf5;
border-color: #a7f3d0;
}
.wz-chip--blue {
color: #1e3a8a;
background: #eff6ff;
border-color: #bfdbfe;
}
.wz-chip--amber {
color: #78350f;
background: #fffbeb;
border-color: #fde68a;
}
/* ── Cards ──────────────────────────────────────────────────── */
.wz-card {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
box-shadow: var(--wz-shadow);
overflow: hidden;
}
.wz-card__body {
padding: 1.5rem;
}
.wz-card__header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--wz-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.wz-card__title {
font-weight: 600;
font-size: 0.95rem;
color: var(--wz-text);
}
.wz-card__label {
font-size: 0.72rem;
color: var(--wz-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ── Section cards for template picker ─────────────────────── */
.wz-section-card {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
padding: 1.25rem;
box-shadow: var(--wz-shadow);
}
.wz-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
}
.wz-section-title {
font-size: 1rem;
font-weight: 600;
color: var(--wz-text);
}
.wz-section-hint {
font-size: 0.75rem;
color: var(--wz-muted);
}
/* ── Template grid ──────────────────────────────────────────── */
.wz-template-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.wz-template-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1025px) {
.wz-template-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.wz-template-label {
cursor: pointer;
border-radius: var(--wz-radius);
border: 1px solid var(--wz-border);
padding: 0.75rem;
display: flex;
gap: 0.75rem;
transition: background 0.15s, border-color 0.15s;
background: var(--wz-surface);
}
.wz-template-label:hover {
background: var(--wz-accent-light);
border-color: #d1d5db;
}
.wz-template-radio {
margin-top: 0.2rem;
flex-shrink: 0;
}
.wz-template-meta {
min-width: 0;
width: 100%;
}
.wz-template-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.wz-template-name {
font-weight: 500;
font-size: 0.875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--wz-text);
}
.wz-template-badge {
font-size: 0.68rem;
padding: 0.15rem 0.5rem;
border: 1px solid var(--wz-border);
border-radius: 99px;
color: var(--wz-muted);
white-space: nowrap;
flex-shrink: 0;
}
.wz-template-img {
margin-top: 0.5rem;
width: 100%;
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
background: white;
display: block;
}
/* ── Mode pills (tab switcher) ──────────────────────────────── */
.wz-mode-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.25rem;
margin-bottom: 0.25rem;
}
.wz-mode-pills form {
display: contents;
}
.wz-mode-pill {
font-size: 0.82rem;
padding: 0.4rem 0.9rem;
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
background: var(--wz-surface);
color: var(--wz-text);
cursor: pointer;
font-weight: 500;
transition: background 0.15s, border-color 0.15s;
}
.wz-mode-pill:hover {
background: var(--wz-accent-light);
}
.wz-mode-pill--active {
background: var(--wz-accent);
color: #fff;
border-color: var(--wz-accent);
}
/* ── Alert ──────────────────────────────────────────────────── */
.wz-alert {
margin-top: 1rem;
border-radius: var(--wz-radius-sm);
border: 1px solid #fecaca;
background: #fef2f2;
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: #b91c1c;
}
/* ── Form styles ────────────────────────────────────────────── */
.wz-form {
display: flex;
flex-direction: column;
gap: 0;
}
.wz-field-row {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.wz-field-row {
grid-template-columns: repeat(2, 1fr);
}
}
.wz-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.wz-field--full {
grid-column: 1 / -1;
}
.wz-field__label {
font-size: 0.82rem;
font-weight: 600;
color: var(--wz-text);
letter-spacing: 0.01em;
}
.wz-field__required {
color: #dc2626;
margin-left: 0.2rem;
}
.wz-field__input {
width: 100%;
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius-sm);
padding: 0.6rem 0.85rem;
font-size: 0.9rem;
color: var(--wz-text);
background: var(--wz-surface);
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
box-sizing: border-box;
}
.wz-field__input:focus {
border-color: #9ca3af;
box-shadow: 0 0 0 3px rgba(17,24,39,0.06);
}
.wz-field__select {
width: 100%;
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius-sm);
padding: 0.6rem 0.85rem;
font-size: 0.9rem;
color: var(--wz-text);
background: var(--wz-surface);
outline: none;
cursor: pointer;
transition: border-color 0.15s;
box-sizing: border-box;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2.5rem;
}
.wz-field__select:focus {
border-color: #9ca3af;
box-shadow: 0 0 0 3px rgba(17,24,39,0.06);
}
.wz-field__textarea {
width: 100%;
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius-sm);
padding: 0.6rem 0.85rem;
font-size: 0.9rem;
color: var(--wz-text);
background: var(--wz-surface);
outline: none;
resize: vertical;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
line-height: 1.55;
}
.wz-field__textarea:focus {
border-color: #9ca3af;
box-shadow: 0 0 0 3px rgba(17,24,39,0.06);
}
.wz-field__textarea--mono {
font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
font-size: 0.82rem;
}
.wz-field__hint {
font-size: 0.72rem;
color: var(--wz-muted);
line-height: 1.4;
}
/* ── Sub-section inside a card ──────────────────────────────── */
.wz-subsection {
margin-top: 1.5rem;
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
padding: 1rem;
}
.wz-subsection__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.wz-subsection__title {
font-weight: 600;
font-size: 0.9rem;
color: var(--wz-text);
}
.wz-subsection__badge {
font-size: 0.72rem;
color: var(--wz-muted);
}
/* ── List items (experience / projects) ─────────────────────── */
.wz-list-item {
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
padding: 1rem;
margin-bottom: 1rem;
background: var(--wz-surface);
}
.wz-list-item__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.wz-list-item__title {
font-weight: 600;
font-size: 0.9rem;
color: var(--wz-text);
}
.wz-list-item__number {
font-size: 0.8rem;
font-weight: 700;
color: var(--wz-muted);
background: var(--wz-bg, #f8fafc);
width: 24px; height: 24px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.wz-list-item__remove {
font-size: 0.8rem;
color: var(--wz-muted);
background: none; border: none; cursor: pointer;
padding: 4px 8px; border-radius: var(--wz-radius-sm);
transition: color 0.15s, background 0.15s;
}
.wz-list-item__remove:hover { color: #ef4444; background: #fef2f2; }
.wz-field--sm { max-width: 120px; }
.wz-field__label-row {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem; margin-bottom: 0.35rem;
}
.wz-field__label-row .wz-field__label { margin-bottom: 0; }
.wz-add-btn {
display: inline-flex; align-items: center; gap: 0.25rem;
font-size: 0.85rem; font-weight: 500; color: var(--wz-accent);
background: none; border: 1px dashed var(--wz-border);
padding: 0.5rem 1rem; border-radius: var(--wz-radius-sm);
cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.wz-add-btn:hover { background: var(--wz-accent-light, #f0f4ff); border-color: var(--wz-accent); }
/* ── Navigation row ─────────────────────────────────────────── */
.wz-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
margin-top: 1.5rem;
border-top: 1px solid var(--wz-border);
gap: 0.75rem;
position: sticky;
bottom: 0;
background: var(--wz-bg, #fff);
z-index: 10;
}
.wz-nav--space {
margin-top: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
position: sticky;
bottom: 0;
padding: 1rem 0;
background: var(--wz-bg, #fff);
z-index: 10;
border-top: 1px solid var(--wz-border);
}
/* ── Buttons ────────────────────────────────────────────────── */
.wz-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: var(--wz-accent);
color: #fff;
font-weight: 600;
font-size: 0.875rem;
padding: 0.65rem 1.4rem;
border-radius: var(--wz-radius-sm);
border: none;
cursor: pointer;
text-decoration: none;
transition: opacity 0.15s;
white-space: nowrap;
}
.wz-btn-primary:hover {
opacity: 0.88;
}
.wz-btn-primary:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.wz-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: var(--wz-surface);
color: var(--wz-text);
font-weight: 500;
font-size: 0.875rem;
padding: 0.65rem 1.25rem;
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
cursor: pointer;
text-decoration: none;
transition: background 0.15s;
white-space: nowrap;
}
.wz-btn-secondary:hover {
background: var(--wz-accent-light);
}
.wz-btn-back {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--wz-muted);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
padding: 0.5rem 0.75rem;
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
transition: background 0.15s, color 0.15s;
}
.wz-btn-back:hover {
background: var(--wz-accent-light);
color: var(--wz-text);
}
.wz-btn-add {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--wz-text);
font-size: 0.82rem;
font-weight: 500;
text-decoration: none;
padding: 0.45rem 0.9rem;
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
background: var(--wz-surface);
cursor: pointer;
transition: background 0.15s;
}
.wz-btn-add:hover {
background: var(--wz-accent-light);
}
.wz-btn-remove {
font-size: 0.8rem;
color: var(--wz-muted);
text-decoration: underline;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: color 0.15s;
}
.wz-btn-remove:hover {
color: #dc2626;
}
.wz-btn-link {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 500;
color: var(--wz-muted);
text-decoration: underline;
text-underline-offset: 3px;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: color 0.15s;
}
.wz-btn-link:hover {
color: var(--wz-text);
}
/* ── Flex row for multiple buttons ──────────────────────────── */
.wz-btn-group {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
/* ── Preview card (sidebar) ─────────────────────────────────── */
.wz-preview {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
box-shadow: var(--wz-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.wz-preview__header {
padding: 1rem;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.wz-preview__label {
font-size: 0.7rem;
color: var(--wz-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.2rem;
}
.wz-preview__name {
font-weight: 800;
font-size: 1.05rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--wz-text);
}
.wz-preview__sub {
font-size: 0.75rem;
color: var(--wz-muted);
margin-top: 0.2rem;
}
.wz-preview__thumb {
position: relative;
background: #f1f3f5;
}
.wz-preview__aspect {
position: relative;
aspect-ratio: 3 / 4;
max-height: 280px;
}
.wz-preview__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
.wz-preview__gradient {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: auto;
height: 4rem;
background: linear-gradient(to top, rgba(0,0,0,0.32), transparent);
/* Must not capture clicks — the color swatches sit underneath this
fade-out on the aspect button. We also scope the gradient to only
the .wz-preview__aspect frame (via CSS below) so it doesn't spill
over the swatch row beneath. */
pointer-events: none;
}
/* Put the gradient inside the clickable aspect area, not the whole
thumb card, so it never overlaps the swatch row or the stats below. */
.wz-preview__aspect { isolation: isolate; }
.wz-preview__aspect .wz-preview__gradient { z-index: 1; }
.wz-preview__themes { position: relative; z-index: 2; }
.wz-preview__overlay-top {
position: absolute;
inset-inline: 0;
top: 0;
padding: 0.6rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.wz-preview__pill {
font-size: 0.68rem;
padding: 0.25rem 0.6rem;
border-radius: 99px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(4px);
border: 1px solid rgba(0,0,0,0.06);
color: var(--wz-text);
display: inline-block;
margin-right: 0.3rem;
}
.wz-preview__pill--dark {
background: rgba(0,0,0,0.78);
color: #fff;
border-color: transparent;
margin-right: 0;
}
.wz-preview__pills {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
/* APAC-active pill — surfaces on the live preview when the user has
filled any APAC field (photo/DOB/nationality/marital/languages) so
they can tell at a glance that the exported doc will include the
APAC block. 2026-04-24. */
.wz-preview__pill--apac {
background: rgba(99,102,241,0.92);
color: #fff;
border-color: transparent;
font-weight: 700;
}
/* Overlay strip on the WebP preview that shows the user's live APAC
data (photo + facts + language tags) right on top of the template
image. Positioned near the top-left where most resume templates have
their header area. */
.wz-preview__apac-overlay {
position: absolute;
top: 52px;
left: 12px;
right: 12px;
display: flex;
gap: 10px;
align-items: flex-start;
pointer-events: none;
padding: 8px 10px;
background: rgba(255,255,255,0.92);
border: 1.5px solid rgba(99,102,241,0.55);
border-radius: 10px;
box-shadow: 0 4px 18px -6px rgba(15,23,42,0.25);
max-width: calc(100% - 24px);
backdrop-filter: blur(3px);
}
.wz-preview__apac-photo {
width: 48px; height: 48px;
border-radius: 8px;
object-fit: cover;
border: 2px solid #e2e8f0;
flex: 0 0 auto;
}
.wz-preview__apac-facts {
display: flex;
flex-wrap: wrap;
gap: 3px 8px;
font-size: 9.5px;
line-height: 1.25;
color: #0f172a;
font-weight: 600;
align-content: flex-start;
min-width: 0;
}
.wz-preview__apac-fact {
padding: 2px 7px;
background: rgba(99,102,241,0.1);
border-radius: 999px;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.wz-preview__apac-fact--lang {
background: rgba(16,185,129,0.12);
}
.wz-preview__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
padding: 0.85rem;
}
.wz-preview__stat {
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
padding: 0.6rem 0.75rem;
}
.wz-preview__stat-label {
font-size: 0.7rem;
color: var(--wz-muted);
margin-bottom: 0.15rem;
}
.wz-preview__stat-value {
font-weight: 800;
font-variant-numeric: tabular-nums;
font-size: 0.95rem;
color: var(--wz-text);
}
.wz-preview__actions {
display: flex;
gap: 0.5rem;
padding: 0 0.85rem;
}
.wz-preview__action {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 0.75rem;
border-radius: var(--wz-radius-sm);
font-weight: 600;
font-size: 0.82rem;
text-decoration: none;
transition: background 0.15s, opacity 0.15s;
}
.wz-preview__action--outline {
border: 1px solid var(--wz-border);
color: var(--wz-text);
background: var(--wz-surface);
}
.wz-preview__action--outline:hover {
background: var(--wz-accent-light);
}
.wz-preview__action--filled {
background: var(--wz-accent);
color: #fff;
border: none;
}
.wz-preview__action--filled:hover {
opacity: 0.88;
}
.wz-preview__tip {
padding: 0.6rem 0.85rem 0.85rem;
font-size: 0.72rem;
color: var(--wz-muted);
}
.wz-preview__empty {
padding: 0 0.85rem 0.85rem;
}
.wz-preview__empty-box {
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
background: var(--wz-accent-light);
padding: 1rem;
font-size: 0.875rem;
color: #374151;
}
/* ── Summary card (sidebar, review-like) ────────────────────── */
.wz-summary {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
box-shadow: var(--wz-shadow);
padding: 1rem;
position: sticky;
top: 1.5rem;
}
.wz-summary__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.wz-summary__title {
font-weight: 800;
font-size: 0.95rem;
color: var(--wz-text);
}
.wz-summary__sub {
font-size: 0.72rem;
color: var(--wz-muted);
margin-top: 0.15rem;
}
.wz-summary__meta-label {
font-size: 0.72rem;
color: var(--wz-muted);
}
.wz-summary__meta-value {
font-size: 0.82rem;
font-weight: 600;
color: var(--wz-text);
line-height: 1.2;
}
.wz-summary__meta-kind {
font-size: 0.68rem;
color: var(--wz-muted);
margin-top: 0.15rem;
}
.wz-summary__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.wz-summary__stat {
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
padding: 0.5rem 0.6rem;
}
.wz-summary__stat-label {
font-size: 0.68rem;
color: var(--wz-muted);
margin-bottom: 0.1rem;
}
.wz-summary__stat-value {
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 0.9rem;
color: var(--wz-text);
}
.wz-summary__preview {
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
background: var(--wz-accent-light);
overflow: hidden;
margin-bottom: 0.5rem;
}
.wz-summary__preview-inner {
background: var(--wz-surface);
max-height: 70vh;
overflow: auto;
}
.wz-summary__preview-inner--pad {
padding: 0.75rem;
}
.wz-summary__empty {
padding: 1.25rem;
font-size: 0.875rem;
color: #374151;
}
.wz-summary__tip {
font-size: 0.68rem;
color: var(--wz-muted);
}
/* ── Template sidebar ───────────────────────────────────────── */
.wz-template-sidebar {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
padding: 1rem;
box-shadow: var(--wz-shadow);
}
.wz-template-sidebar__title {
font-weight: 600;
font-size: 0.9rem;
color: var(--wz-text);
margin-bottom: 0.25rem;
}
.wz-template-sidebar__hint {
font-size: 0.72rem;
color: var(--wz-muted);
margin-bottom: 0.75rem;
}
.wz-template-sidebar__img-wrap {
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
background: var(--wz-accent-light);
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.wz-template-sidebar__img {
width: 100%;
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
background: white;
display: block;
}
.wz-template-sidebar__meta {
font-size: 0.82rem;
color: #374151;
}
/* ── Bundle hint (sidebar) ─────────────────────────────────── */
.wz-bundle-hint {
margin-top: 1rem;
padding: 0.75rem;
background: #f0f4ff;
border: 1px solid #dbeafe;
border-radius: var(--wz-radius-sm);
}
.wz-bundle-hint__badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: white;
background: var(--wz-accent, #111);
padding: 2px 8px;
border-radius: 20px;
margin-bottom: 0.4rem;
}
.wz-bundle-hint__text {
font-size: 0.8rem;
color: #374151;
line-height: 1.5;
margin-bottom: 0.3rem;
}
.wz-bundle-hint__price {
font-size: 0.82rem;
color: #111;
}
/* ── Bundle review banner ──────────────────────────────────── */
.wz-bundle-review-banner {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.06));
border: 1px solid rgba(99,102,241,0.2);
border-radius: var(--wz-radius);
}
.wz-bundle-review-banner__badge {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6366f1;
background: rgba(99,102,241,0.12);
padding: 0.2rem 0.6rem;
border-radius: 999px;
flex-shrink: 0;
}
.wz-bundle-review-banner__text {
font-size: 0.82rem;
color: #374151;
line-height: 1.5;
}
/* ── Review sections ────────────────────────────────────────── */
.wz-review-section {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
overflow: hidden;
box-shadow: var(--wz-shadow);
}
.wz-review-section__header {
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--wz-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.wz-review-section__title {
font-weight: 600;
font-size: 0.9rem;
color: var(--wz-text);
}
.wz-review-section__edit {
font-size: 0.8rem;
color: var(--wz-muted);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s;
}
.wz-review-section__edit:hover {
color: var(--wz-text);
}
.wz-review-section__body {
padding: 1rem 1.25rem;
}
/* ── Review stats bar ───────────────────────────────────────── */
.wz-review-stats {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
padding: 1rem 1.25rem;
box-shadow: var(--wz-shadow);
}
.wz-review-stats__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
}
@media (min-width: 768px) {
.wz-review-stats__grid {
grid-template-columns: repeat(4, 1fr);
}
}
.wz-review-stat {
border-radius: var(--wz-radius-sm);
border: 1px solid var(--wz-border);
padding: 0.75rem;
}
.wz-review-stat__label {
font-size: 0.7rem;
color: var(--wz-muted);
margin-bottom: 0.2rem;
}
.wz-review-stat__value {
font-size: 1.35rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--wz-text);
}
/* ── Plan cards (pricing step) ──────────────────────────────── */
.wz-plan-card {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
box-shadow: var(--wz-shadow);
overflow: hidden;
}
.wz-plan-card__top {
padding: 1.5rem;
}
.wz-plan-card__eyebrow {
font-size: 0.7rem;
color: var(--wz-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.wz-plan-card__price-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
}
.wz-plan-card__price {
font-size: 2.5rem;
font-weight: 800;
color: var(--wz-text);
letter-spacing: -0.04em;
line-height: 1;
}
.wz-plan-card__price-note {
font-size: 0.78rem;
color: var(--wz-muted);
padding-bottom: 0.25rem;
}
.wz-plan-card__currency {
font-size: 0.95rem;
font-weight: 700;
color: var(--wz-muted);
letter-spacing: 0.04em;
margin-left: 0.18rem;
}
.wz-plan-card__local-hint {
font-size: 0.82rem;
color: var(--wz-muted);
margin-top: 0.35rem;
font-weight: 500;
}
.wz-plan-card__price-original {
font-size: 1.3rem;
font-weight: 600;
color: #94a3b8;
text-decoration: line-through;
margin-right: 0.4rem;
padding-bottom: 0.35rem;
}
.wz-plan-card__eyebrow--discount {
background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
color: #fff !important;
font-weight: 700;
padding: 0.25rem 0.75rem;
border-radius: 2rem;
font-size: 0.75rem;
display: inline-block;
}
.wz-plan-card__desc {
font-size: 0.875rem;
color: #374151;
margin-bottom: 1.25rem;
}
.wz-plan-card__features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.wz-plan-card__feature {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.875rem;
color: #374151;
}
.wz-plan-card__feature::before {
content: "✓";
font-weight: 700;
color: var(--wz-green);
flex-shrink: 0;
margin-top: 0.05rem;
}
.wz-plan-card__actions {
padding: 1rem 1.5rem;
border-top: 1px solid var(--wz-border);
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.wz-plan-card__note {
padding: 0 1.5rem 1rem;
font-size: 0.72rem;
color: var(--wz-muted);
}
.wz-plan-card__payment {
padding: 0 1.5rem 1rem;
}
.wz-payment-element {
margin-bottom: 1rem;
min-height: 40px;
}
/* Mobile-only sticky pay CTA (2026-05-18). Fixed at the bottom of the
viewport on phones / small tablets. Hidden entirely on viewports
≥760px (see media query below) AND hidden by JS when the payment
block is in view (IntersectionObserver toggles the `hidden`
attribute). The result: any time a mobile user is scrolled above
the payment form, the bar nudges them toward conversion; once the
form is on-screen the bar gets out of the way. */
.wz-mobile-pay-cta {
display: none;
}
@media (max-width: 760px) {
.wz-mobile-pay-cta:not([hidden]) {
display: block;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 50;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: #ffffff;
border-top: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10);
animation: wz-mobile-pay-cta-rise 0.22s ease-out;
}
}
.wz-mobile-pay-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
max-width: 600px;
margin: 0 auto;
}
.wz-mobile-pay-cta__price-block {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
}
.wz-mobile-pay-cta__price-amount {
font-size: 22px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.01em;
}
.wz-mobile-pay-cta__price-note {
font-size: 11px;
font-weight: 600;
color: #64748b;
margin-top: 2px;
}
.wz-mobile-pay-cta__btn {
background: #285EFF;
color: #fff;
border: 0;
border-radius: 999px;
padding: 14px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 14px rgba(40, 94, 255, 0.30);
transition: transform 0.12s ease, box-shadow 0.12s ease;
white-space: nowrap;
}
.wz-mobile-pay-cta__btn:active {
transform: translateY(1px);
box-shadow: 0 2px 8px rgba(40, 94, 255, 0.30);
}
@keyframes wz-mobile-pay-cta-rise {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Pre-pay live preview frame with SAMPLE watermark overlay. The
iframe renders the real generated resume; the SAMPLE overlay sits
on top via position:absolute (see applyglide_sample_watermark). */
.wz-prepay-preview {
border: 1px solid var(--wz-rule, #e5e7eb);
border-radius: 14px;
padding: 18px;
background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}
.wz-prepay-preview__header {
display: flex; justify-content: space-between; align-items: baseline;
gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.wz-prepay-preview__label {
font-size: 11px; font-weight: 700; color: var(--wz-text, #0f172a);
letter-spacing: 0.12em; text-transform: uppercase;
}
.wz-prepay-preview__hint {
font-size: 12px; color: var(--wz-muted, #64748b); font-weight: 500;
}
.wz-prepay-preview__frame {
position: relative;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 8.5 / 11; /* US letter — resume proportions */
/* Cap height so the preview doesn't eat the entire first viewport
on /plan. Pre-cap, a 600px column made the iframe ~776px tall,
leaving zero first-screen real estate for the actual checkout
content. min() gives us a hard ceiling AND a viewport-relative
limit so the preview shrinks gracefully on short displays. The
aspect-ratio still drives width, so the iframe stays proportional
— it just gets centered with shrunken width on tall screens.
Users who want the full-size preview tap the zoom button (top
right corner) which already exists and opens the fullscreen
overlay. */
max-height: min(58vh, 580px);
max-width: 100%;
margin-left: auto;
margin-right: auto;
background: #fff;
border: 1px solid rgba(15,23,42,0.08);
box-shadow: 0 4px 18px rgba(15,23,42,0.08);
user-select: none;
-webkit-user-select: none;
cursor: zoom-in;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wz-prepay-preview__frame:hover { box-shadow: 0 6px 24px rgba(15,23,42,0.14); }
/* "Zoom" button in the top-right corner of the preview */
.wz-prepay-preview__zoom-btn {
position: absolute;
top: 10px; right: 10px;
z-index: 8; /* above the watermark */
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
color: #0f172a;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(15,23,42,0.1);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(15,23,42,0.08);
cursor: pointer;
transition: background 0.12s, transform 0.12s;
}
.wz-prepay-preview__zoom-btn:hover { background: #fff; transform: translateY(-1px); }
.wz-prepay-preview__zoom-btn svg { flex: 0 0 auto; }
/* Zoomed state — full viewport overlay. Dim the page behind.
Critical: aspect-ratio must be reset to auto so the fixed
inset sizes actually apply (browsers otherwise keep the 8.5/11
ratio which left the iframe invisible in the zoomed frame —
Braxton reported "page goes dark but iframe doesn't load"
2026-04-23). Iframe fills the frame 100%. */
.wz-prepay-preview__frame--zoomed {
position: fixed !important;
top: 24px !important; left: 24px !important;
right: 24px !important; bottom: 24px !important;
width: auto !important; height: auto !important;
max-width: none !important; max-height: none !important;
aspect-ratio: auto !important;
z-index: 10001;
cursor: zoom-out;
box-shadow: 0 24px 80px rgba(15,23,42,0.5);
border-radius: 14px;
background: #fff;
overflow: hidden;
animation: wz-prepay-zoom-in 0.22s ease-out;
}
.wz-prepay-preview__frame--zoomed .wz-prepay-preview__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: auto;
}
/* SAMPLE watermark scales with the zoomed frame naturally since
it's already absolutely-positioned inside .applyglide-watermark-host */
@keyframes wz-prepay-zoom-in {
from { opacity: 0.4; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
body.wz-body-zoom-locked { overflow: hidden; }
/* Real backdrop element injected by preview_zoom_controller so
clicks CAN be received and close the zoom (body::after couldn't
receive pointer events — user reported "clicking anywhere
doesn't close it"). */
.wz-prepay-preview__backdrop {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(15,23,42,0.62);
cursor: zoom-out;
animation: wz-prepay-backdrop-fade 0.22s ease-out;
}
@keyframes wz-prepay-backdrop-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 640px) {
.wz-prepay-preview__frame--zoomed {
top: 12px !important; left: 12px !important;
right: 12px !important; bottom: 12px !important;
}
}
.wz-prepay-preview__iframe {
width: 100%;
height: 100%;
border: none;
display: block;
pointer-events: none; /* makes copy even harder — can't click into iframe */
}
.wz-prepay-preview__loading {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 32px 20px;
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
text-align: center;
gap: 14px;
}
.wz-prepay-preview__loading-title {
font-size: 16px; font-weight: 700; color: #0f172a; margin: 0;
}
.wz-prepay-preview__loading-sub {
font-size: 13px; color: #64748b; line-height: 1.55; max-width: 360px; margin: 0;
}
.wz-prepay-preview__spinner {
width: 44px; height: 44px;
border: 3px solid #e5e7eb;
border-top-color: #6366f1;
border-right-color: #8b5cf6;
border-radius: 50%;
animation: wz-prepay-spin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes wz-prepay-spin { to { transform: rotate(360deg); } }
.wz-prepay-preview__fallback { position: relative; width: 100%; height: 100%; }
.wz-prepay-preview__fallback-img {
width: 100%; height: 100%; object-fit: cover; filter: blur(3px);
}
.wz-prepay-preview__caption {
font-size: 12.5px; color: #64748b; margin: 12px 0 0; line-height: 1.55;
}
/* "Built with ApplyGlide" +$1 upsell checkbox */
.wz-brand-upsell {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 1rem;
padding: 14px 16px;
border: 1px solid var(--wz-rule, #e5e7eb);
border-radius: 12px;
background: #fafbff;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.wz-brand-upsell:hover { border-color: #a5b4fc; background: #eef2ff; }
.wz-brand-upsell:has(.wz-brand-upsell__checkbox:checked) {
border-color: #6366f1;
background: #eef2ff;
box-shadow: 0 0 0 2px rgba(99,102,241,0.08);
}
.wz-brand-upsell__checkbox {
width: 18px; height: 18px; margin-top: 2px; accent-color: #6366f1; cursor: pointer;
}
.wz-brand-upsell__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wz-brand-upsell__title { font-size: 14px; font-weight: 600; color: #0f172a; }
.wz-brand-upsell__hint { font-size: 12.5px; color: #64748b; line-height: 1.4; }
.wz-brand-upsell__price {
font-size: 14px; font-weight: 800; color: #6366f1;
background: #e0e7ff; padding: 4px 10px; border-radius: 8px; white-space: nowrap;
}
/* SAMPLE watermark overlay sitting on top of the preview tease */
.wz-preview-tease { position: relative; }
/* Vietnam "coming soon" waitlist card — shown below Stripe Elements,
not in place of it. Captures leads for the 2C2P launch. */
.wz-vn-soon {
padding: 16px 18px;
border: 1px solid #fca5a5;
border-radius: 12px;
background: linear-gradient(135deg, #fff7ed 0%, #fef2f2 100%);
}
.wz-vn-soon__eyebrow { font-size: 11px; font-weight: 700; color: #991b1b; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.wz-vn-soon__title { font-size: 16px; font-weight: 700; color: #7c2d12; margin-bottom: 6px; line-height: 1.3; }
.wz-vn-soon__desc { font-size: 13.5px; color: #9a3412; line-height: 1.5; margin: 0 0 12px; }
.wz-vn-soon__btn {
display: inline-block;
padding: 10px 18px;
background: #dc2626;
color: #fff;
border-radius: 8px;
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
transition: background 0.12s;
}
.wz-vn-soon__btn:hover { background: #b91c1c; }
/* APAC / EU region-specific fields disclosure in contact step */
.wz-apac-details {
margin-top: 1rem;
padding: 0.9rem 1rem;
border: 1px solid var(--wz-rule, #e5e7eb);
border-radius: 10px;
background: #f8fafc;
}
.wz-apac-details[open] { background: #fff; }
.wz-apac-summary {
cursor: pointer;
font-weight: 600;
color: var(--wz-text, #0f172a);
font-size: 0.95rem;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
}
.wz-apac-summary::-webkit-details-marker { display: none; }
.wz-apac-summary::before {
content: "▸";
font-size: 0.85em;
color: var(--wz-muted, #64748b);
transition: transform 0.15s ease;
}
.wz-apac-details[open] .wz-apac-summary::before { transform: rotate(90deg); }
.wz-apac-summary__hint {
font-weight: 500;
color: var(--wz-muted, #64748b);
font-size: 0.82rem;
margin-left: auto;
max-width: 60%;
text-align: right;
}
.wz-apac-details[open] > .wz-field-row { margin-top: 1rem; }
/* APAC profile-photo upload preview + file-input styling */
.wz-apac-photo-preview {
display: flex; align-items: center; gap: 14px;
padding: 10px 12px; margin: 0 0 10px;
background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px;
}
.wz-apac-photo-preview__img {
width: 72px; height: 72px; border-radius: 8px; object-fit: cover;
border: 2px solid #e2e8f0; flex: 0 0 auto;
}
.wz-apac-photo-preview__remove {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.85rem; color: #475569; cursor: pointer;
}
.wz-apac-photo-file {
padding: 0.5rem 0.75rem !important;
font-size: 0.9rem !important;
background: #fff;
}
.wz-apac-photo-file::file-selector-button {
margin-right: 12px; padding: 6px 14px;
background: #6366f1; color: #fff;
border: 0; border-radius: 8px;
font-weight: 600; font-size: 0.8rem;
cursor: pointer;
}
.wz-apac-photo-file::file-selector-button:hover { background: #4f46e5; }
/* Address Element (billing address for Stripe Tax) */
.wz-payment-address {
margin: 0 0 0.75rem;
}
.wz-payment-address:empty { display: none; }
/* Tax breakdown summary (lives under the Payment Element) */
.wz-payment-tax {
margin: 0.75rem 0 0.25rem;
padding: 0.8rem 0.9rem;
background: var(--wz-muted-bg, #f8fafc);
border: 1px solid var(--wz-rule, #e5e7eb);
border-radius: 10px;
font-size: 0.85rem;
}
.wz-payment-tax.hidden { display: none; }
.wz-payment-tax__row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
color: var(--wz-muted);
}
.wz-payment-tax__row--total {
border-top: 1px solid var(--wz-rule, #e5e7eb);
margin-top: 4px;
padding-top: 8px;
font-weight: 700;
color: var(--wz-text, #0f172a);
font-size: 0.95rem;
}
/* ── Express Checkout Element (Apple Pay / Google Pay / Link / PayPal) ── */
.wz-payment-express {
margin-bottom: 0.6rem;
min-height: 0;
}
.wz-payment-express:empty { display: none; }
/* "Or pay another way" divider — only visible when wallets actually rendered */
.wz-payment-divider {
display: flex;
align-items: center;
gap: 0.85rem;
margin: 1rem 0 0.75rem;
color: var(--wz-muted);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wz-payment-divider::before,
.wz-payment-divider::after {
content: "";
flex: 1;
height: 1px;
background: #e5e7eb;
}
.wz-payment-divider.hidden { display: none; }
/* Guest email-first prompt on /plan — prominent so users don't
stare at a "Loading..." spinner wondering why nothing happens.
Labeled "1" to signal a sequence: email first, payment form
appears underneath once email is valid. */
.wz-payment-email-block {
margin: 0 0 1.25rem;
padding: 1rem 1.1rem;
background: linear-gradient(135deg, #eef2ff 0%, #ede9fe 100%);
border: 1.5px solid #c7d2fe;
border-radius: 12px;
}
.wz-payment-email-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
}
.wz-payment-email-label__step {
display: inline-flex;
align-items: center; justify-content: center;
width: 22px; height: 22px;
background: #6366f1; color: #fff;
border-radius: 50%;
font-size: 0.75rem; font-weight: 800;
flex: 0 0 auto;
}
.wz-payment-email-label__text { flex: 1; }
.wz-payment-email-req { color: #dc2626; font-weight: 700; }
.wz-payment-email-input {
width: 100%;
padding: 0.8rem 1rem;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
background: #fff;
border: 2px solid #a5b4fc;
border-radius: 10px;
outline: none;
transition: border-color 0.12s, box-shadow 0.12s;
box-sizing: border-box;
}
.wz-payment-email-input::placeholder { color: #9ca3af; }
.wz-payment-email-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}
.wz-payment-email-input.is-locked {
background: #f5f3ff;
color: #4c1d95;
border-color: #c4b5fd;
cursor: default;
}
.wz-payment-email-help {
margin: 8px 0 0;
font-size: 0.78rem;
color: #6b7280;
}
.wz-email-typo-hint {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 10px 14px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #f59e0b;
border-radius: 10px;
font-size: 0.85rem;
color: #78350f;
animation: wz-email-typo-pop 0.18s ease-out;
}
.wz-email-typo-hint__icon { font-size: 1.05rem; line-height: 1; }
.wz-email-typo-hint__text { flex: 1; line-height: 1.4; }
.wz-email-typo-hint__link {
color: #1e3a8a;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.wz-email-typo-hint__link:hover { color: #312e81; text-decoration: none; }
@keyframes wz-email-typo-pop {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.wz-payment-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
padding: 1.5rem;
color: var(--wz-muted);
font-size: 0.85rem;
}
.wz-payment-loading__dot {
width: 22px; height: 22px;
border: 2px solid rgba(99,102,241,0.18);
border-top-color: #6366f1;
border-right-color: #8b5cf6;
border-radius: 50%;
animation: wz-prepay-spin 0.85s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.wz-payment-loading__title { font-size: 0.92rem; color: var(--wz-text, #0f172a); font-weight: 600; }
.wz-payment-loading__sub { font-size: 0.78rem; color: var(--wz-muted, #64748b); }
.wz-payment-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
margin-bottom: 1rem;
}
.wz-payment-error.hidden {
display: none;
}
/* ── Generate / loading step ────────────────────────────────── */
.wz-generate-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.wz-generate-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.wz-generate-card {
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius-sm);
padding: 1.25rem;
background: var(--wz-surface);
}
.wz-generate-card__title {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.75rem;
color: var(--wz-text);
}
.wz-generate-features {
list-style: disc;
padding-left: 1.25rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.wz-generate-features li {
font-size: 0.875rem;
color: #374151;
}
.wz-generate-note {
margin-top: 1rem;
font-size: 0.72rem;
color: var(--wz-muted);
}
.wz-generate-spinner-row {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.75rem;
}
.wz-generate-spinner {
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
border: 2px solid #e5e7eb;
border-top-color: var(--wz-accent);
animation: wz-spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes wz-spin {
to { transform: rotate(360deg); }
}
.wz-generate-spinner-label {
font-weight: 600;
font-size: 0.9rem;
color: var(--wz-text);
}
.wz-generate-desc {
font-size: 0.875rem;
color: #374151;
margin-bottom: 1rem;
}
.wz-generate-bundle-note {
margin-top: 0.75rem;
font-size: 0.72rem;
color: var(--wz-muted);
}
/* ── Generation error / timeout states ─────────────────────── */
.wz-generate-error,
.wz-generate-timeout {
text-align: center;
padding: 1.5rem 1rem;
}
.wz-generate-error__icon {
display: flex;
justify-content: center;
margin-bottom: 0.75rem;
}
.wz-generate-error__title {
font-weight: 700;
font-size: 1.05rem;
color: var(--wz-text);
margin-bottom: 0.5rem;
}
.wz-generate-error__message {
font-size: 0.875rem;
color: var(--wz-muted);
line-height: 1.5;
max-width: 400px;
margin: 0 auto;
}
/* ── Pro tip card ───────────────────────────────────────────── */
.wz-pro-tip {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
padding: 1rem;
box-shadow: var(--wz-shadow);
}
.wz-pro-tip__title {
font-weight: 600;
font-size: 0.875rem;
color: var(--wz-text);
margin-bottom: 0.3rem;
}
.wz-pro-tip__body {
font-size: 0.82rem;
color: var(--wz-muted);
line-height: 1.5;
}
/* ── Review body text helpers ───────────────────────────────── */
.wz-review-name {
font-weight: 600;
font-size: 0.95rem;
color: var(--wz-text);
}
.wz-review-sub {
font-size: 0.875rem;
color: #374151;
margin-top: 0.25rem;
}
.wz-review-muted {
font-size: 0.72rem;
color: var(--wz-muted);
margin-top: 0.5rem;
}
.wz-review-empty {
font-size: 0.875rem;
color: var(--wz-muted);
}
.wz-review-skills {
font-size: 0.875rem;
color: #374151;
line-height: 1.6;
}
.wz-review-bullets {
padding-left: 1.25rem;
margin: 0.35rem 0 0;
list-style: disc;
}
.wz-review-bullets li {
font-size: 0.875rem;
color: #374151;
margin-bottom: 0.15rem;
}
.wz-review-exp-item {
margin-bottom: 1rem;
}
.wz-review-exp-title {
font-weight: 600;
font-size: 0.9rem;
color: var(--wz-text);
}
.wz-review-exp-dates {
color: var(--wz-muted);
font-weight: 400;
}
.wz-review-summary {
font-size: 0.875rem;
color: #374151;
margin-top: 0.5rem;
white-space: pre-line;
line-height: 1.55;
}
/* ── Empty fields notice ────────────────────────────────────── */
.wz-empty-notice {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
padding: 1.5rem;
box-shadow: var(--wz-shadow);
}
.wz-empty-notice p {
font-size: 0.9rem;
color: #374151;
margin-bottom: 1.25rem;
}
/* ── Utility: tabular nums ──────────────────────────────────── */
.wz-tabnum {
font-variant-numeric: tabular-nums;
}
/* ── Spacing helpers ────────────────────────────────────────── */
.wz-mt-sm { margin-top: 0.75rem; }
.wz-mt-md { margin-top: 1.25rem; }
.wz-mt-lg { margin-top: 2rem; }
.wz-space { display: flex; flex-direction: column; gap: 1rem; }
/* ── Contextual insight box (blue) ──────────────────────────── */
.wz-insight {
display: flex;
gap: 0.75rem;
align-items: flex-start;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: var(--wz-radius-sm);
padding: 0.85rem 1rem;
font-size: 0.82rem;
color: #1e3a8a;
line-height: 1.55;
}
.wz-insight__icon { flex-shrink: 0; font-size: 1rem; margin-top: 0.05rem; }
.wz-insight__body { flex: 1; }
.wz-insight__title { font-weight: 700; margin-bottom: 0.2rem; }
/* ── Tip box (neutral) ──────────────────────────────────────── */
.wz-tip {
background: var(--wz-accent-light);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius-sm);
padding: 0.85rem 1rem;
font-size: 0.82rem;
color: var(--wz-text);
line-height: 1.55;
}
.wz-tip__title { font-weight: 700; margin-bottom: 0.2rem; font-size: 0.82rem; }
/* ── Character counter ──────────────────────────────────────── */
.wz-char-counter {
font-size: 0.7rem;
text-align: right;
margin-top: 0.2rem;
font-variant-numeric: tabular-nums;
transition: color 0.2s;
}
.wz-char-counter--low { color: #dc2626; }
.wz-char-counter--mid { color: #d97706; }
.wz-char-counter--ok { color: var(--wz-green); }
.wz-char-counter--muted { color: var(--wz-muted); }
/* ── Skill tags (live preview) ──────────────────────────────── */
.wz-skill-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
min-height: 1.75rem;
margin-top: 0.5rem;
}
.wz-skill-tag {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
font-weight: 600;
padding: 0.22rem 0.65rem;
border-radius: 99px;
background: var(--wz-accent);
color: #fff;
white-space: nowrap;
letter-spacing: 0.01em;
}
.wz-skill-tag--empty {
background: none;
color: var(--wz-muted);
font-weight: 400;
font-size: 0.75rem;
padding: 0;
}
.wz-skill-count {
font-size: 0.72rem;
font-weight: 600;
margin-left: 0.25rem;
}
.wz-skill-count--low { color: #dc2626; }
.wz-skill-count--mid { color: #d97706; }
.wz-skill-count--ok { color: var(--wz-green); }
/* ── Tone selector cards ────────────────────────────────────── */
.wz-tone-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
margin-top: 0.5rem;
}
@media (min-width: 640px) {
.wz-tone-grid { grid-template-columns: repeat(3, 1fr); }
}
.wz-tone-card {
cursor: pointer;
border: 2px solid var(--wz-border);
border-radius: var(--wz-radius-sm);
padding: 0.7rem 0.85rem;
background: var(--wz-surface);
transition: border-color 0.15s, background 0.15s;
text-align: center;
user-select: none;
}
.wz-tone-card:hover { background: var(--wz-accent-light); border-color: #d1d5db; }
.wz-tone-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.wz-tone-card__name { font-weight: 700; font-size: 0.82rem; color: var(--wz-text); }
.wz-tone-card__desc { font-size: 0.68rem; color: var(--wz-muted); margin-top: 0.15rem; line-height: 1.4; }
.wz-tone-card--selected {
border-color: var(--wz-accent);
background: var(--wz-accent);
}
.wz-tone-card--selected .wz-tone-card__name,
.wz-tone-card--selected .wz-tone-card__desc { color: #fff; }
/* ── Social proof counters (plan step) ───────────────────── */
.wz-social-proof {
display: flex;
justify-content: center;
gap: 1.2rem;
padding: 0.8rem 1rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.65rem;
}
.wz-social-proof__item { text-align: center; flex: 1; }
.wz-social-proof__num {
font-size: 1.3rem;
font-weight: 800;
color: #1e293b;
line-height: 1.2;
}
.wz-social-proof__label {
font-size: 0.68rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.wz-social-proof__divider {
width: 1px;
background: #e2e8f0;
align-self: stretch;
}
/* ── Blurred template preview (plan step) ────────────────── */
.wz-preview-tease {
text-align: center;
}
.wz-preview-tease__image-wrap {
position: relative;
display: inline-block;
max-width: 320px;
border-radius: 0.65rem;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.wz-preview-tease__image {
display: block;
width: 100%;
height: auto;
filter: blur(4px);
transform: scale(1.02);
}
.wz-preview-tease__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(2px);
}
.wz-preview-tease__lock {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.wz-preview-tease__unlock-text {
font-size: 0.88rem;
font-weight: 700;
color: #1e293b;
padding: 0.4rem 1rem;
background: rgba(255,255,255,0.85);
border-radius: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.wz-preview-tease__caption {
font-size: 0.75rem;
color: #64748b;
margin-top: 0.6rem;
line-height: 1.4;
}
/* ── Trust bar ──────────────────────────────────────────────── */
.wz-trust-bar {
display: flex;
flex-wrap: wrap;
gap: 0.85rem 1.5rem;
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--wz-border);
}
.wz-trust-item {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.72rem;
color: var(--wz-muted);
}
.wz-trust-item::before { content: "✓"; color: var(--wz-green); font-weight: 700; }
/* ── Value anchor (price comparison) ───────────────────────── */
.wz-anchor {
display: flex;
gap: 0.75rem;
align-items: flex-start;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--wz-radius-sm);
padding: 0.85rem 1rem;
font-size: 0.82rem;
color: #065f46;
line-height: 1.5;
margin-top: 1rem;
}
.wz-anchor__icon { flex-shrink: 0; font-size: 1.1rem; }
/* ── Plan-step unlock hero (2026-05-24) ─────────────────────────
Surfaces the price + a jump-to-checkout CTA at the very top of the
plan step, so the price is the first thing seen and the payment form
is one click away. Fixes the mount→focus drop where users built a
résumé then bounced at the buried paywall. */
.wz-unlock-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
background: linear-gradient(135deg, var(--wz-accent-light), var(--wz-surface));
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
padding: 1.1rem 1.25rem;
box-shadow: var(--wz-shadow);
margin-top: 1rem;
}
.wz-unlock-hero__label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--wz-muted);
}
.wz-unlock-hero__price-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-top: 0.15rem;
}
.wz-unlock-hero__price { font-size: 1.9rem; font-weight: 800; color: var(--wz-text); line-height: 1.1; }
.wz-unlock-hero__was { font-size: 1.05rem; color: var(--wz-muted); text-decoration: line-through; }
.wz-unlock-hero__unit { font-size: 0.82rem; font-weight: 600; color: var(--wz-muted); }
.wz-unlock-hero__local { font-size: 0.78rem; color: var(--wz-muted); margin-top: 0.15rem; }
.wz-unlock-hero__cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
background: var(--wz-accent);
color: #fff;
font-weight: 700;
font-size: 1rem;
padding: 0.8rem 1.4rem;
border-radius: var(--wz-radius-sm);
text-decoration: none;
transition: transform 0.08s ease, opacity 0.15s ease;
}
.wz-unlock-hero__cta:hover { opacity: 0.92; transform: translateY(-1px); }
@media (max-width: 600px) {
.wz-unlock-hero { flex-direction: column; align-items: stretch; text-align: center; }
.wz-unlock-hero__price-row { justify-content: center; }
.wz-unlock-hero__cta { justify-content: center; }
}
/* Persistent one-time price in the wizard progress header. */
.wz-progress__footer-right { display: inline-flex; align-items: center; gap: 0.5rem; }
.wz-progress__price {
font-size: 0.78rem;
font-weight: 700;
color: var(--wz-text);
background: var(--wz-accent-light);
border: 1px solid var(--wz-border);
padding: 0.18rem 0.6rem;
border-radius: 999px;
white-space: nowrap;
}
/* ── Social proof / quote ───────────────────────────────────── */
.wz-quote {
background: var(--wz-accent-light);
border-left: 3px solid var(--wz-border);
padding: 0.75rem 1rem;
font-size: 0.82rem;
color: var(--wz-text);
line-height: 1.55;
font-style: italic;
margin-top: 1rem;
border-radius: 0 var(--wz-radius-sm) var(--wz-radius-sm) 0;
}
.wz-quote__author {
font-style: normal;
font-size: 0.7rem;
color: var(--wz-muted);
margin-top: 0.35rem;
display: block;
}
/* ── Generation phase list ──────────────────────────────────── */
.wz-phases { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.wz-phase {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.875rem;
color: var(--wz-muted);
transition: color 0.3s;
}
.wz-phase__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--wz-border);
flex-shrink: 0;
transition: background 0.3s;
}
.wz-phase--active { color: var(--wz-text); font-weight: 600; }
.wz-phase--active .wz-phase__dot { background: var(--wz-accent); animation: wz-pulse 1.2s ease-in-out infinite; }
.wz-phase--done { color: var(--wz-green); }
.wz-phase--done .wz-phase__dot { background: var(--wz-green); }
@keyframes wz-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.75); opacity: 0.55; }
}
/* ── Completion bar (review step) ───────────────────────────── */
.wz-completion {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.82rem;
}
.wz-completion__label { flex-shrink: 0; font-weight: 700; font-size: 0.95rem; }
.wz-completion__track {
flex: 1;
height: 10px;
background: #f1f3f5;
border-radius: 99px;
overflow: hidden;
}
.wz-completion__fill {
height: 100%;
border-radius: 99px;
transition: width 0.6s ease;
}
.wz-completion__fill--low { background: #ef4444; }
.wz-completion__fill--mid { background: #f59e0b; }
.wz-completion__fill--high { background: var(--wz-green); }
.wz-completion__pct { font-variant-numeric: tabular-nums; font-weight: 700; }
/* ── Status banner (review) ─────────────────────────────────── */
.wz-status-banner {
border-radius: var(--wz-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.82rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.wz-status-banner--ready { background: #f0fdf4; border: 1px solid #bbf7d0; color: #065f46; }
.wz-status-banner--warn { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
/* ── Review return banner (shows when editing from review) ──── */
.wz-review-return {
display: flex;
align-items: center;
justify-content: space-between;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: var(--wz-radius-sm);
padding: 0.6rem 1rem;
margin-bottom: 1rem;
}
.wz-review-return__text {
font-size: 0.82rem;
color: #1e40af;
font-weight: 500;
}
.wz-review-return__link {
font-size: 0.82rem;
font-weight: 600;
color: #1d4ed8;
text-decoration: none;
padding: 0.35rem 0.75rem;
border-radius: 6px;
background: #dbeafe;
transition: background 0.15s;
}
.wz-review-return__link:hover {
background: #bfdbfe;
}
/* ── Bullet formula ─────────────────────────────────────────── */
.wz-formula {
background: #f8fafc;
border: 1px dashed var(--wz-border);
border-radius: var(--wz-radius-sm);
padding: 0.6rem 0.85rem;
font-size: 0.78rem;
color: var(--wz-muted);
font-family: 'JetBrains Mono', ui-monospace, monospace;
line-height: 1.6;
margin-top: 0.35rem;
}
.wz-formula strong { color: var(--wz-text); }
/* ── Step-specific chips override ───────────────────────────── */
.wz-chips--has-content .wz-chip { display: inline-flex; }
/* ── Review section completion dot ─────────────────────────── */
.wz-review-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
.wz-review-dot--done { background: var(--wz-green); }
.wz-review-dot--empty { background: #e5e7eb; border: 1px solid #d1d5db; }
/* ── Selected template checkmark overlay ────────────────────── */
.wz-template-label--selected {
border-color: var(--wz-accent);
background: #f9fafb;
}
.wz-template-label--selected::after {
content: "✓";
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background: var(--wz-accent);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.wz-template-label { position: relative; }
/* ── Textarea auto-resize feel ──────────────────────────────── */
.wz-field__textarea--expandable { resize: vertical; min-height: 6rem; }
.wz-field__textarea--job-paste { min-height: 22rem; }
/* ── Word count helper (for summary) ───────────────────────── */
.wz-word-count { font-size: 0.7rem; color: var(--wz-muted); margin-top: 0.2rem; }
/* ── "Targeting" context chip (show job target) ─────────────── */
.wz-target-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
font-weight: 600;
color: #1e3a8a;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 99px;
padding: 0.3rem 0.85rem;
margin-bottom: 1rem;
}
/* ── Highlight textarea pill counter ────────────────────────── */
.wz-highlight-counter {
font-size: 0.7rem;
color: var(--wz-muted);
margin-top: 0.2rem;
display: flex;
justify-content: flex-end;
}
/* ── Review status hints (text-based, replaces dot for inline msg) */
.wz-review-hint {
font-size: 0.72rem;
margin-top: 0.25rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
.wz-review-hint--green { color: #065f46; }
.wz-review-hint--warn { color: #78350f; }
.wz-review-hint--muted { color: var(--wz-muted); }
/* ── Tone card: CSS :has() for no-JS interactive selected state */
.wz-tone-card:has(input[type="radio"]:checked) {
border-color: var(--wz-accent);
background: var(--wz-accent);
}
.wz-tone-card:has(input[type="radio"]:checked) .wz-tone-card__name,
.wz-tone-card:has(input[type="radio"]:checked) .wz-tone-card__desc { color: #fff; }
/* ── Muted field label (e.g. "(optional)" inline) ───────────── */
.wz-field__muted-label { font-weight: 400; color: var(--wz-muted); font-size: 0.78rem; }
/* ── Sign-up nudge (plan step) ──────────────────────────────── */
.wz-signup-nudge {
display: flex;
gap: 0.85rem;
align-items: flex-start;
padding: 1rem 1.1rem;
border-radius: 10px;
background: #f0f9ff;
border: 1px solid #bae6fd;
}
.wz-signup-nudge__icon {
font-size: 1.4rem;
line-height: 1;
flex-shrink: 0;
margin-top: 0.1rem;
}
.wz-signup-nudge__body { flex: 1; }
.wz-signup-nudge__title {
font-size: 0.82rem;
font-weight: 600;
color: #0c4a6e;
margin-bottom: 0.3rem;
}
.wz-signup-nudge__desc {
font-size: 0.78rem;
color: #0369a1;
line-height: 1.55;
}
.wz-signup-nudge__desc a {
color: #0284c7;
font-weight: 600;
text-decoration: underline;
}
.wz-signup-nudge__links {
margin-top: 0.5rem;
font-size: 0.78rem;
}
.wz-signup-nudge__links a { color: #0284c7; font-weight: 600; }
.wz-signup-nudge__sep { color: #94a3b8; margin: 0 0.3rem; }
/* ── Email capture (review step, guest users) ────────────── */
.wz-email-capture {
display: flex;
gap: 0.85rem;
padding: 1rem 1.2rem;
background: linear-gradient(135deg, #eff6ff, #f0fdf4);
border: 1px solid #bfdbfe;
border-radius: 0.65rem;
}
.wz-email-capture__icon { font-size: 1.4rem; line-height: 1; }
.wz-email-capture__body { flex: 1; }
.wz-email-capture__title {
font-size: 0.88rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.25rem;
}
.wz-email-capture__desc {
font-size: 0.78rem;
color: #475569;
line-height: 1.5;
margin-bottom: 0.6rem;
}
.wz-email-capture__form {
display: flex;
gap: 0.5rem;
max-width: 380px;
}
.wz-email-capture__input {
flex: 1;
padding: 0.45rem 0.65rem;
border: 1px solid #cbd5e1;
border-radius: 0.4rem;
font-size: 0.82rem;
outline: none;
transition: border-color 0.15s;
}
.wz-email-capture__input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.wz-email-capture__btn {
padding: 0.45rem 1rem;
background: #2563eb;
color: #fff;
border: none;
border-radius: 0.4rem;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.wz-email-capture__btn:hover { background: #1d4ed8; }
.wz-email-capture__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wz-email-capture__success {
font-size: 0.82rem;
color: #059669;
font-weight: 600;
}
.wz-email-capture__error {
font-size: 0.78rem;
color: #dc2626;
margin-top: 0.3rem;
}
/* ── Avatar upload ─────────────────────────────────────────── */
.wz-avatar-upload {
display: flex;
align-items: center;
gap: 1rem;
}
.wz-avatar-preview {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--wz-accent-light);
border: 2px solid var(--wz-border);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wz-avatar-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wz-avatar-preview__initials {
font-size: 1.1rem;
font-weight: 600;
color: var(--wz-muted);
}
.wz-avatar-controls {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.wz-avatar-btn {
display: inline-block;
font-size: 0.78rem;
font-weight: 500;
color: var(--wz-accent);
background: var(--wz-accent-light);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius-sm);
padding: 0.35rem 0.75rem;
cursor: pointer;
transition: background 0.15s;
}
.wz-avatar-btn:hover {
background: var(--wz-border);
}
/* v2.7 — primary variant of the upload button so the affordance reads
as "click here to choose a file" instead of an ambiguous styled
label. The hidden is positioned-but-invisible
inside the label so clicking the button opens the OS file picker. */
.wz-avatar-btn--primary {
position: relative;
background: var(--wz-primary, #4f46e5);
color: #ffffff;
border-color: var(--wz-primary, #4f46e5);
font-weight: 600;
font-size: 0.82rem;
padding: 0.5rem 0.95rem;
}
.wz-avatar-btn--primary:hover {
background: var(--wz-primary-dark, #4338ca);
border-color: var(--wz-primary-dark, #4338ca);
}
.wz-avatar-btn--primary:focus-within {
outline: 2px solid var(--wz-primary, #4f46e5);
outline-offset: 2px;
}
.wz-avatar-section-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wz-muted, #64748b);
margin-top: 0.35rem;
}
.wz-avatar-or-divider {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0.65rem 0 0.25rem;
}
.wz-avatar-or-divider::before,
.wz-avatar-or-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--wz-border, #e2e8f0);
}
.wz-avatar-or-divider span {
font-size: 0.7rem;
font-weight: 700;
color: var(--wz-muted, #64748b);
letter-spacing: 0.08em;
}
.wz-avatar-hint {
font-size: 0.72rem;
color: var(--wz-muted);
}
/* v2.7 — repeating-row languages widget */
.wz-lang-row {
display: flex;
gap: 0.5rem;
align-items: stretch;
margin-bottom: 0.5rem;
}
.wz-lang-row__label { flex: 1.4; }
.wz-lang-row__level { flex: 1; }
.wz-lang-row__remove {
flex: 0 0 36px;
background: transparent;
border: 1px solid var(--wz-border, #e2e8f0);
border-radius: 8px;
color: var(--wz-muted, #64748b);
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.wz-lang-row__remove:hover {
color: #dc2626;
border-color: #fecaca;
background: #fef2f2;
}
/* ── Stripe Checkout fallback ─────────────────────────────── */
.wz-checkout-alt {
margin-top: 1.25rem;
padding-top: 1rem;
}
.wz-checkout-alt__divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.wz-checkout-alt__divider::before,
.wz-checkout-alt__divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--wz-border);
}
.wz-checkout-alt__or {
font-size: 0.72rem;
color: var(--wz-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.wz-checkout-alt__form { display: contents; }
.wz-btn-stripe-checkout {
display: block;
width: 100%;
padding: 0.7rem 1rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--wz-accent);
background: var(--wz-bg);
border: 1.5px solid var(--wz-accent);
border-radius: var(--wz-radius-sm);
cursor: pointer;
text-align: center;
transition: background 0.15s, color 0.15s;
}
.wz-btn-stripe-checkout:hover {
background: var(--wz-accent);
color: #fff;
}
.wz-checkout-alt__note {
font-size: 0.68rem;
color: var(--wz-muted);
text-align: center;
margin-top: 0.5rem;
line-height: 1.4;
}
/* ── Urgency bar ──────────────────────────────────────────── */
.wz-urgency-bar {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #f59e0b;
border-radius: var(--wz-radius-sm);
padding: 0.65rem 1rem;
}
.wz-urgency-bar__inner {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
color: #78350f;
}
.wz-urgency-bar__icon { font-size: 1rem; }
.wz-urgency-bar__timer {
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ── Social proof stats ───────────────────────────────────── */
.wz-social-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
padding: 0.75rem 0;
}
.wz-social-proof__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
}
.wz-social-proof__num {
font-size: 1.1rem;
font-weight: 700;
color: var(--wz-text);
}
.wz-social-proof__label {
font-size: 0.68rem;
color: var(--wz-muted);
}
.wz-social-proof__dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--wz-border);
}
/* ── Money-back guarantee callout ─────────────────────────── */
.wz-guarantee {
display: flex;
gap: 0.75rem;
align-items: flex-start;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: var(--wz-radius-sm);
padding: 0.85rem 1rem;
font-size: 0.8rem;
color: #1e40af;
line-height: 1.5;
}
.wz-guarantee__icon { flex-shrink: 0; font-size: 1.1rem; }
/* ── Preview step ────────────────────────────────────────────── */
.wz-preview-success {
display: flex;
align-items: center;
gap: 0.5rem;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: var(--wz-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: #065f46;
font-weight: 500;
margin-bottom: 1.25rem;
}
.wz-preview-container {
position: relative;
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
overflow: hidden;
background: #fff;
max-height: 600px;
margin-bottom: 1.5rem;
box-shadow: var(--wz-shadow);
}
.wz-preview-document {
position: relative;
overflow: hidden;
max-height: 600px;
}
.wz-preview-content {
padding: 0;
pointer-events: none;
user-select: none;
}
.wz-preview-content > * {
pointer-events: none;
}
.wz-preview-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: 6rem;
font-weight: 900;
color: rgba(0, 0, 0, 0.06);
letter-spacing: 0.3em;
white-space: nowrap;
z-index: 10;
pointer-events: none;
}
.wz-preview-blur-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 55%;
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.7) 30%,
rgba(255,255,255,0.95) 70%,
rgba(255,255,255,1) 100%
);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 5;
pointer-events: none;
}
.wz-preview-fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(transparent, #fff);
z-index: 6;
pointer-events: none;
}
/* Unlock card */
.wz-preview-unlock {
background: var(--wz-surface);
border: 2px solid var(--wz-green);
border-radius: var(--wz-radius);
padding: 1.5rem;
margin-bottom: 1.25rem;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12);
}
.wz-preview-unlock__header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.wz-preview-unlock__title {
font-size: 1.15rem;
font-weight: 700;
color: var(--wz-text);
}
.wz-preview-unlock__price-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.wz-preview-unlock__price {
font-size: 1.5rem;
font-weight: 800;
color: var(--wz-green);
}
.wz-preview-unlock__price-was {
font-size: 1.1rem;
font-weight: 600;
color: #9ca3af;
text-decoration: line-through;
}
.wz-preview-unlock__discount-badge {
display: inline-flex;
align-items: center;
font-size: 0.72rem;
font-weight: 700;
color: #065f46;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 99px;
padding: 0.2rem 0.6rem;
white-space: nowrap;
}
.wz-preview-unlock__price-note {
font-size: 0.8rem;
color: var(--wz-muted);
}
.wz-preview-unlock__features {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
}
.wz-preview-unlock__features li {
font-size: 0.85rem;
color: var(--wz-text);
padding-left: 1.25rem;
position: relative;
}
.wz-preview-unlock__features li::before {
content: "\2713";
position: absolute;
left: 0;
color: var(--wz-green);
font-weight: 700;
}
.wz-preview-unlock__payment {
margin-bottom: 1rem;
}
.wz-preview-unlock__payment .wz-btn-primary {
width: 100%;
margin-top: 0.75rem;
}
.wz-btn-primary--large {
padding: 0.9rem 1.5rem;
font-size: 1.05rem;
}
.wz-preview-unlock__trust {
display: flex;
justify-content: center;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--wz-muted);
}
/* ── Checkout card (embedded Stripe Elements) ─────────────── */
.wz-checkout-card {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
box-shadow: var(--wz-shadow);
padding: 1.5rem;
margin-bottom: 1.25rem;
}
/* -- Order summary -- */
.wz-order-summary {
margin-bottom: 1.25rem;
}
.wz-order-summary__title {
font-weight: 700;
font-size: 0.9rem;
color: var(--wz-text);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.wz-order-summary__lines {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--wz-border);
}
.wz-order-summary__line {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
color: var(--wz-text);
}
.wz-order-summary__line--discount {
color: #059669;
}
.wz-order-summary__line--discount .wz-order-summary__amount {
font-weight: 600;
}
.wz-order-summary__line--sub {
font-weight: 600;
}
.wz-order-summary__line--tax {
color: var(--wz-muted);
font-size: 0.8rem;
}
.wz-order-summary__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 0.75rem;
font-size: 1.1rem;
font-weight: 800;
color: var(--wz-text);
}
.wz-order-summary__total-amount {
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.wz-order-summary__total-was {
font-size: 0.85rem;
font-weight: 500;
color: #9ca3af;
text-decoration: line-through;
}
.wz-order-summary__total-note {
font-size: 0.72rem;
font-weight: 400;
color: var(--wz-muted);
}
/* -- Features list with checkmarks -- */
.wz-checkout-card__features {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.35rem;
}
.wz-checkout-card__features li {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
color: var(--wz-text);
}
/* -- Payment section -- */
.wz-checkout-card__payment {
padding-top: 1.25rem;
border-top: 1px solid var(--wz-border);
}
.wz-checkout-card__payment-label {
font-weight: 600;
font-size: 0.82rem;
color: var(--wz-text);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.75rem;
}
.wz-checkout-card__payment .wz-btn-checkout {
width: 100%;
margin-top: 1rem;
}
/* -- Trust signals -- */
.wz-checkout-card__trust {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding-top: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--wz-border);
}
.wz-checkout-card__trust-item {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
color: var(--wz-muted);
}
.wz-preview-social-proof {
margin-bottom: 1.25rem;
}
.wz-preview-edit-link {
text-align: center;
font-size: 0.85rem;
color: var(--wz-muted);
padding: 0.5rem 0;
}
.wz-preview-edit-link .wz-link {
color: var(--wz-blue);
text-decoration: underline;
}
/* Checkout button */
.wz-btn-checkout {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
font-size: 1.1rem;
padding: 1rem 1.5rem;
font-weight: 700;
letter-spacing: 0.01em;
}
/* Redacted content blocks */
.wz-redacted-block {
opacity: 0.5;
}
/* Payment form loading */
.wz-payment-loading {
text-align: center;
color: var(--wz-muted);
padding: 1rem;
font-size: 0.875rem;
}
.wz-payment-error {
color: #ef4444;
font-size: 0.85rem;
padding: 0.5rem 0;
text-align: center;
}
/* Social proof stats */
.wz-social-proof-stats {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1rem;
padding: 0.75rem 0;
}
.wz-social-proof-stat {
text-align: center;
}
.wz-social-proof-stat__num {
display: block;
font-size: 1.25rem;
font-weight: 800;
color: var(--wz-text);
}
.wz-social-proof-stat__label {
display: block;
font-size: 0.75rem;
color: var(--wz-muted);
}
/* Testimonials grid */
.wz-testimonials-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* Price comparison */
.wz-preview-comparison {
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius);
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
}
.wz-preview-comparison__title {
font-size: 0.8rem;
font-weight: 600;
color: var(--wz-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.wz-preview-comparison__items {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.wz-preview-comparison__item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
padding: 0.4rem 0;
}
.wz-preview-comparison__item--other {
color: var(--wz-muted);
}
.wz-preview-comparison__item--other .wz-preview-comparison__price {
text-decoration: line-through;
color: #9ca3af;
}
.wz-preview-comparison__item--us {
color: var(--wz-text);
font-weight: 700;
border-top: 1px solid var(--wz-border);
padding-top: 0.6rem;
}
.wz-preview-comparison__item--us .wz-preview-comparison__price {
color: var(--wz-green);
font-weight: 800;
}
/* ================================================================
MOBILE-FIRST RESPONSIVE — comprehensive mobile experience
================================================================ */
/* ── Small screens (phones) ──────────────────────────────────── */
@media (max-width: 767px) {
/* -- Page & Container -- */
.wz-container { padding: 0 0.75rem; }
.wz-grid-wrap { padding: 1rem 0.75rem 6rem; } /* extra bottom for sticky nav */
/* -- Progress header -- */
.wz-progress-wrap { padding: 0.75rem 0.75rem 0; }
.wz-progress { padding: 0.65rem 0.85rem; }
.wz-progress__step-label-small { font-size: 0.65rem; }
.wz-progress__step-name { font-size: 0.8rem; }
.wz-progress__counter-label { font-size: 0.65rem; }
.wz-progress__counter-value { font-size: 0.8rem; }
.wz-progress__bar-track { margin-top: 0.5rem; }
/* -- Step header -- */
.wz-step-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 1rem;
}
.wz-step-title { font-size: 1.35rem; }
.wz-step-subtitle { font-size: 0.82rem; }
/* -- Sidebar: hide on mobile form steps, show after generate -- */
.wz-sidebar { display: none; }
/* -- Cards -- */
.wz-card__body { padding: 1rem; }
.wz-card__header { padding: 0.75rem 1rem; }
.wz-section-card { padding: 1rem; }
/* -- Form inputs: larger touch targets -- */
.wz-field__input,
.wz-field__select {
padding: 0.75rem 0.85rem;
font-size: 1rem; /* 16px prevents iOS zoom */
border-radius: 12px;
}
.wz-field__textarea {
padding: 0.75rem 0.85rem;
font-size: 1rem;
border-radius: 12px;
min-height: 120px;
}
.wz-field__label { font-size: 0.85rem; }
.wz-field__hint { font-size: 0.75rem; }
/* -- Field rows: single column on mobile -- */
.wz-field-row { grid-template-columns: 1fr; gap: 0; }
/* -- Navigation: fixed bottom bar on mobile -- */
.wz-nav,
.wz-nav--space {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 1rem;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
margin-top: 0;
background: var(--wz-surface);
border-top: 1px solid var(--wz-border);
box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
z-index: 100;
}
/* -- Buttons: full width on mobile -- */
.wz-btn-primary {
width: 100%;
padding: 0.85rem 1.25rem;
font-size: 1rem;
border-radius: 12px;
}
.wz-btn-secondary {
padding: 0.75rem 1rem;
font-size: 0.9rem;
border-radius: 12px;
}
.wz-btn-back {
padding: 0.65rem 0.85rem;
font-size: 0.82rem;
}
.wz-btn-group {
flex-direction: column;
width: 100%;
}
.wz-btn-group .wz-btn-primary,
.wz-btn-group .wz-btn-secondary {
width: 100%;
justify-content: center;
}
/* -- Template grid: 1 column on small phones, 2 on wider -- */
.wz-template-grid { grid-template-columns: 1fr; gap: 0.75rem; }
.wz-template-label { padding: 0.6rem; }
.wz-template-name { font-size: 0.82rem; }
/* -- Mode pills: scrollable row on mobile -- */
.wz-mode-pills {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0.4rem;
padding-bottom: 0.25rem;
}
.wz-mode-pills::-webkit-scrollbar { display: none; }
.wz-mode-pill { flex-shrink: 0; font-size: 0.78rem; padding: 0.35rem 0.75rem; }
/* -- List items (experience/projects/education) -- */
.wz-list-item { padding: 0.85rem; }
.wz-list-item__header { margin-bottom: 0.5rem; }
.wz-list-item__title { font-size: 0.85rem; }
/* -- Add button -- */
.wz-add-btn {
width: 100%;
justify-content: center;
padding: 0.7rem 1rem;
}
/* -- Review stats grid -- */
.wz-review-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
/* -- Generate page -- */
.wz-generate-grid { gap: 1rem; }
.wz-generate-card { padding: 1rem; }
.wz-generate-card__title { font-size: 0.85rem; }
.wz-generate-spinner-label { font-size: 0.85rem; }
.wz-generate-desc { font-size: 0.82rem; }
.wz-generate-error__title { font-size: 0.95rem; }
.wz-generate-error__message { font-size: 0.82rem; }
/* -- Phase animation -- */
.wz-phase { font-size: 0.82rem; padding: 0.5rem 0; }
/* -- Preview page (post-generate) -- */
.wz-preview-watermark { font-size: 3.5rem; }
.wz-preview-unlock { padding: 1rem; }
.wz-preview-unlock__header { flex-direction: column; gap: 0.5rem; }
.wz-preview-unlock__features { grid-template-columns: 1fr; }
.wz-preview-unlock__trust { flex-wrap: wrap; font-size: 0.72rem; }
.wz-preview-unlock__payment .wz-btn-primary {
width: 100%;
padding: 1rem;
font-size: 1rem;
}
.wz-testimonials-grid { grid-template-columns: 1fr; gap: 0.75rem; }
.wz-social-proof-stats { gap: 1rem; flex-wrap: wrap; }
.wz-social-proof-stat__num { font-size: 1.1rem; }
/* -- Comparison table -- */
.wz-preview-comparison { padding: 0.85rem 1rem; }
.wz-preview-comparison__item { font-size: 0.82rem; }
/* -- Insights -- */
.wz-insight { padding: 0.75rem; }
.wz-insight__title { font-size: 0.82rem; }
.wz-insight__body { font-size: 0.78rem; }
/* -- Review return banner -- */
.wz-review-return { font-size: 0.82rem; }
/* -- Tone grid -- */
.wz-tone-grid { grid-template-columns: repeat(2, 1fr); }
.wz-tone-card { padding: 0.55rem 0.65rem; }
.wz-tone-card__name { font-size: 0.78rem; }
.wz-tone-card__desc { font-size: 0.65rem; }
/* -- Urgency bar -- */
.wz-urgency-bar { font-size: 0.82rem; }
.wz-urgency-bar__inner { flex-wrap: wrap; gap: 0.3rem; }
/* -- Subsections -- */
.wz-subsection { padding: 0.85rem; }
.wz-subsection__title { font-size: 0.85rem; }
/* -- Char counter -- */
.wz-char-counter { font-size: 0.7rem; }
/* -- LinkedIn import -- */
.wz-linkedin-import__zone { padding: 14px; }
.wz-linkedin-import__title { font-size: 0.82rem; }
.wz-linkedin-import__hint { font-size: 0.72rem; }
/* -- Plan step -- */
.wz-plan-price { font-size: 1.5rem; }
/* -- Checkout card -- */
.wz-checkout-card { padding: 1rem; }
.wz-checkout-card__features { grid-template-columns: 1fr; }
.wz-checkout-card__trust { grid-template-columns: 1fr; gap: 0.35rem; }
.wz-order-summary__total { font-size: 1rem; }
/* -- Checkout button -- */
.wz-btn-checkout {
width: 100%;
padding: 1rem;
font-size: 1.05rem;
border-radius: 14px;
}
}
/* ── Medium screens (tablets) ────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
.wz-grid-wrap { padding: 1.5rem 1rem 4rem; }
.wz-sidebar { display: none; } /* Hide sidebar on tablet too — more room for form */
.wz-template-grid { grid-template-columns: repeat(2, 1fr); }
.wz-step-title { font-size: 1.5rem; }
}
/* ── Wider phones (375px–767px) — single column to prevent overflow ── */
@media (min-width: 375px) and (max-width: 767px) {
.wz-template-grid { grid-template-columns: 1fr; }
}
/* === LinkedIn Import ============================================ */
.wz-linkedin-import { margin-bottom: 16px; }
.wz-linkedin-import__zone {
border: 2px dashed var(--wz-border, rgba(99,102,241,.3));
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
background: rgba(99,102,241,.04);
}
.wz-linkedin-import__zone:hover,
.wz-linkedin-import__zone--over {
border-color: var(--wz-accent, #6366f1);
background: rgba(99,102,241,.08);
}
.wz-linkedin-import__zone--uploading {
opacity: 0.6;
pointer-events: none;
}
.wz-linkedin-import__icon {
display: flex;
justify-content: center;
margin-bottom: 8px;
color: var(--wz-accent, #6366f1);
opacity: 0.7;
}
.wz-linkedin-import__title {
font-size: 0.9rem;
font-weight: 600;
color: var(--wz-text, #e2e8f0);
margin-bottom: 4px;
}
.wz-linkedin-import__hint {
font-size: 0.78rem;
color: var(--wz-text-muted, #94a3b8);
}
.wz-linkedin-import__input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.wz-linkedin-import__status {
font-size: 0.82rem;
margin-top: 8px;
text-align: center;
padding: 6px 12px;
border-radius: 8px;
}
.wz-linkedin-import__status--loading { color: #818cf8; }
.wz-linkedin-import__status--success { color: #10b981; background: rgba(16,185,129,.1); }
.wz-linkedin-import__status--error { color: #f87171; background: rgba(248,113,113,.1); }
/* ── Quick-actions bar (job step friction reducer) ────────── */
.wz-quick-actions {
background: linear-gradient(135deg, #eff6ff, #f0fdf4);
border: 1px solid #bfdbfe;
border-radius: var(--wz-radius-sm);
padding: 16px 20px;
margin-bottom: 20px;
transition: opacity 0.3s ease;
}
.wz-quick-actions__label {
font-size: 14px;
font-weight: 600;
color: var(--wz-text);
margin-bottom: 10px;
}
.wz-quick-actions__btns {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Outline button (Try sample) */
.wz-btn-outline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
color: #2563eb;
background: white;
border: 1.5px solid #2563eb;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.wz-btn-outline:hover { background: #eff6ff; }
.wz-btn-outline--sm { padding: 7px 14px; font-size: 13px; }
/* Ghost button (Skip) */
.wz-btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: var(--wz-muted);
background: transparent;
border: 1px solid var(--wz-border);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.wz-btn-ghost:hover { background: #f9fafb; color: var(--wz-text); }
.wz-btn-ghost--sm { padding: 7px 14px; font-size: 13px; }
/* Primary small variant (used in job-step quick-actions where the recommended
action — "Try with sample job" — should out-weigh the escape hatch). */
.wz-btn-primary--sm { padding: 7px 14px; font-size: 13px; }
@media (max-width: 480px) {
.wz-quick-actions__btns { flex-direction: column; }
.wz-btn-outline, .wz-btn-ghost, .wz-btn-primary--sm { width: 100%; justify-content: center; }
}
/* ── Collapsible example job posting (job step) ───────────── */
.wz-job-example {
margin-bottom: 14px;
border: 1px solid var(--wz-border);
border-radius: var(--wz-radius-sm);
background: #fafafa;
}
.wz-job-example__summary {
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
color: var(--wz-accent);
cursor: pointer;
list-style: none;
user-select: none;
}
.wz-job-example__summary::-webkit-details-marker { display: none; }
.wz-job-example__summary::before {
content: "▸ ";
display: inline-block;
margin-right: 4px;
transition: transform 0.15s;
}
.wz-job-example[open] .wz-job-example__summary::before {
transform: rotate(90deg);
}
.wz-job-example__body {
padding: 4px 14px 14px;
border-top: 1px solid var(--wz-border);
}
.wz-job-example__caption {
font-size: 12px;
color: var(--wz-muted);
margin: 10px 0 8px;
}
.wz-job-example__pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.5;
color: var(--wz-text);
background: #fff;
border: 1px solid var(--wz-border);
border-radius: 6px;
padding: 12px;
margin: 0;
white-space: pre-wrap;
max-height: 220px;
overflow-y: auto;
}
/* ── Review step value box ────────────────────────────────── */
.wz-review-value-box {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--wz-radius-sm);
padding: 16px 20px;
}
.wz-review-value-box__head {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: #065f46;
margin-bottom: 10px;
}
.wz-review-value-box__list {
list-style: none;
padding: 0;
margin: 0;
}
.wz-review-value-box__list li {
font-size: 13px;
color: #047857;
line-height: 1.6;
padding-left: 20px;
position: relative;
}
.wz-review-value-box__list li::before {
content: "✓";
position: absolute;
left: 0;
color: #10b981;
font-weight: 700;
}
/* Large CTA button */
.wz-btn-primary--lg {
padding: 14px 28px !important;
font-size: 16px !important;
gap: 8px;
display: inline-flex;
align-items: center;
}
/* ── Progress encouragement ───────────────────────────────── */
.wz-progress__encouragement {
font-weight: 600;
color: var(--wz-green);
}
/* ============================================================
SIMPLICITY UX — Toddler-proof Wizard additions
============================================================ */
/* === Encouraging step message =============================== */
.wz-encourage {
text-align: center;
padding: 12px 16px;
background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
border: 1px solid #bbf7d0;
border-radius: var(--wz-radius-sm);
font-size: 0.875rem;
font-weight: 600;
color: #065f46;
margin-bottom: 16px;
}
/* === Skip step link ========================================= */
.wz-skip-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8125rem;
color: var(--wz-muted);
text-decoration: none;
padding: 6px 12px;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
}
.wz-skip-link:hover {
background: #f3f4f6;
color: #374151;
}
/* === Bigger primary button =================================== */
.wz-btn-primary--xl {
font-size: 1.0625rem;
padding: 14px 32px;
border-radius: 14px;
font-weight: 700;
}
/* === Step numbered indicator ================================= */
.wz-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--wz-green);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
flex-shrink: 0;
margin-right: 8px;
}
/* === Visual template card improvements ======================= */
.wz-template-label--visual {
border-radius: 16px;
overflow: hidden;
transition: box-shadow 0.2s, transform 0.15s;
}
.wz-template-label--visual:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.wz-template-badge--popular {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
font-size: 0.6875rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
}
/* === Category filter pills ==================================== */
.wz-cat-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0;
}
.wz-cat-pill {
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 8px 16px;
font-size: 0.8125rem;
font-weight: 600;
color: #374151;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.wz-cat-pill:hover {
background: #e5e7eb;
}
.wz-cat-pill--active {
background: #111827;
color: #fff;
border-color: #111827;
}
/* === Loading skeleton ======================================== */
.wz-skeleton {
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
background-size: 200% 100%;
animation: wz-skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 8px;
}
@keyframes wz-skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* === Toast notification ====================================== */
.wz-toast {
position: fixed;
top: 20px;
right: 20px;
background: #111827;
color: #fff;
padding: 14px 20px;
border-radius: 12px;
font-size: 0.875rem;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
z-index: 9999;
transform: translateY(-10px);
opacity: 0;
animation: wz-toast-in 0.3s ease forwards;
}
.wz-toast--success {
background: #059669;
}
.wz-toast--error {
background: #dc2626;
}
@keyframes wz-toast-in {
to { transform: translateY(0); opacity: 1; }
}
/* === Mobile full-width buttons ============================== */
@media (max-width: 640px) {
.wz-btn-primary,
.wz-btn-primary--xl,
.wz-btn-primary--lg {
width: 100%;
justify-content: center;
}
.wz-nav {
flex-direction: column-reverse;
gap: 8px;
}
.wz-nav .wz-btn-back {
width: 100%;
text-align: center;
}
}
/* === Generate celebration animation ========================== */
.wz-generate-celebration {
text-align: center;
padding: 32px;
}
.wz-generate-celebration__emoji {
font-size: 3rem;
animation: wz-bounce 0.6s ease;
}
@keyframes wz-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.wz-generate-celebration__title {
font-size: 1.5rem;
font-weight: 800;
color: var(--wz-text);
margin: 12px 0 4px;
}
.wz-generate-celebration__sub {
font-size: 0.9375rem;
color: var(--wz-muted);
}
/* === Enter hint ============================================= */
.wz-enter-hint {
font-size: 0.6875rem;
color: #9ca3af;
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
}
.wz-enter-hint kbd {
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 1px 5px;
font-family: monospace;
font-size: 0.625rem;
}
/* ═══════════════════════════════════════════════════════════════════════
v2 Wizard template picker — billion-dollar upgrade
═══════════════════════════════════════════════════════════════════════ */
.wz-cat-pills {
display: flex; flex-wrap: wrap; gap: 8px;
padding: 12px 0 16px;
border-bottom: 1px solid var(--wz-border, #e5e7eb);
margin-bottom: 18px;
overflow-x: auto;
}
.wz-cat-pill {
padding: 6px 14px; background: #fff; border: 1px solid #d1d5db;
border-radius: 100px; font-size: 12px; font-weight: 600; color: #374151;
text-decoration: none; white-space: nowrap; transition: all 0.15s;
}
.wz-cat-pill:hover { border-color: #2563eb; color: #2563eb; }
.wz-cat-pill--active {
background: #111827; border-color: #111827; color: #fff;
}
.wz-bundle-upsell {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 16px 22px; background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #f59e0b; border-radius: 14px; margin: 10px 0 20px;
}
.wz-bundle-upsell__title {
font-size: 15px; font-weight: 800; color: #78350f; margin-bottom: 2px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wz-bundle-upsell__save {
font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
background: #dc2626; color: #fff; padding: 2px 8px; border-radius: 4px;
}
.wz-bundle-upsell__desc { font-size: 13px; color: #92400e; }
.wz-bundle-upsell__cta {
background: #111827; color: #fff; border: none; padding: 10px 18px;
border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer;
white-space: nowrap;
}
.wz-bundle-upsell__cta:hover { background: #1f2937; }
.wz-template-grid--v2 {
display: grid; gap: 24px;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) { .wz-template-grid--v2 { grid-template-columns: 1fr; } }
/* Swatches row inside a tpl card — allow wrapping + cap width so 5-theme
rows don't overflow out of the chip. */
.wz-tpl-card .theme-swatches { display: block; width: 100%; }
.wz-tpl-card .theme-swatches__row { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.wz-tpl-card .theme-swatches__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.theme-swatches__row { flex-wrap: wrap; max-width: 100%; }
.wz-tpl-card {
background: #fff; border: 2px solid var(--wz-border, #e5e7eb); border-radius: 14px;
overflow: hidden; transition: all 0.15s ease;
}
.wz-tpl-card:hover { border-color: #9ca3af; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.wz-tpl-card--selected { border-color: #111827; box-shadow: 0 0 0 3px rgba(17,24,39,0.1); }
.wz-tpl-card__inner { display: block; cursor: pointer; }
.wz-tpl-card__radio { position: absolute; opacity: 0; pointer-events: none; }
.wz-tpl-card__schematic {
padding: 14px; background: var(--bg, #fff);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.wz-tpl-card__schematic svg { display: block; width: 100%; height: auto; }
.wz-tpl-card__body { padding: 14px 16px; }
.wz-tpl-card__name-row {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
margin-bottom: 6px;
}
.wz-tpl-card__name { font-size: 14px; font-weight: 700; color: #111827; }
.wz-tpl-card__badge {
font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 7px; border-radius: 4px;
}
.wz-tpl-card__badge--base { background: #dbeafe; color: #1e40af; }
.wz-tpl-card__badge--unique { background: #ede9fe; color: #5b21b6; }
.wz-tpl-card__desc {
font-size: 12px; color: #6b7280; line-height: 1.5; margin: 4px 0 10px;
}
.wz-tpl-card__themes { margin-top: 8px; }
/* Global theme row above the wizard template grid */
.wz-theme-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 16px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
margin: 14px 0 20px;
flex-wrap: wrap;
}
.wz-theme-row__label {
font-size: 12px; font-weight: 700; color: #374151;
letter-spacing: 0.1em; text-transform: uppercase;
}
.wz-theme-row__reset {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: #f3f4f6;
border: 1px solid #d1d5db;
color: #374151;
border-radius: 8px;
font-size: 12px; font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.wz-theme-row__reset:hover {
background: #e5e7eb;
border-color: #9ca3af;
}
.wz-theme-row__reset svg { color: #6b7280; }
.wz-theme-row__hint {
font-size: 12px; color: #6b7280; flex: 1; min-width: 0;
}
/* Zoom icon overlay on wizard template cards */
.wz-tpl-card__schematic { position: relative; }
.wz-tpl-card__zoom {
position: absolute; top: 8px; right: 8px; z-index: 5;
width: 28px; height: 28px; border-radius: 50%;
background: rgba(17, 24, 39, 0.7);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: zoom-in;
transition: all 0.15s ease;
opacity: 0;
}
.wz-tpl-card:hover .wz-tpl-card__zoom { opacity: 1; }
.wz-tpl-card__zoom:hover { background: #111827; transform: scale(1.1); }
/* Clickable live-preview aspect */
.wz-preview__aspect--clickable {
cursor: zoom-in; border: 0; padding: 0; background: transparent;
width: 100%; display: block; font: inherit;
}
.wz-preview__themes { margin-top: 8px; display: flex; justify-content: center; }
.wz-preview__themes .theme-swatches__row { padding: 4px 8px; gap: 3px; }
.wz-preview__themes .theme-swatch { width: 18px; height: 18px; }
.wz-preview__themes .theme-swatch__chip { width: 14px; height: 14px; }
.wz-preview__themes .theme-swatches__label { display: none; }
/* "Use 1 credit (free)" card above the paid Stripe Elements card */
.wz-credit-card {
background: linear-gradient(135deg, #ecfdf5, #dcfce7);
border: 2px solid #10b981;
border-radius: 14px;
padding: 22px 24px;
margin-bottom: 14px;
box-shadow: 0 4px 14px rgba(16,185,129,0.1);
}
.wz-credit-card__eyebrow {
font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
color: #047857; margin-bottom: 6px;
}
.wz-credit-card__title { font-size: 18px; font-weight: 800; color: #064e3b; margin: 0 0 4px; }
.wz-credit-card__desc { font-size: 13.5px; color: #065f46; margin: 0 0 14px; line-height: 1.5; }
.wz-credit-card__cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
background: #10b981; color: #fff;
border: 0; border-radius: 10px;
font-weight: 800; font-size: 14.5px; cursor: pointer; font-family: inherit;
transition: all 0.15s;
}
.wz-credit-card__cta:hover:not(:disabled) { background: #047857; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,185,129,0.3); }
.wz-credit-card__cta:disabled { opacity: 0.6; cursor: not-allowed; }
.wz-credit-card__balance { margin: 12px 0 0; font-size: 11.5px; color: #065f46; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wz-credit-card__chip {
padding: 2px 10px;
background: #fff;
border: 1px solid #a7f3d0;
border-radius: 100px;
color: #047857; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
}
.wz-credit-card__error {
margin-top: 10px; padding: 8px 12px;
background: #fee2e2; border: 1px solid #fecaca; border-radius: 8px;
color: #991b1b; font-size: 13px;
}
.wz-credit-card__error.hidden { display: none; }
/* ── Mobile-only live preview trigger ─────────────────────────
The desktop sidebar live preview is hidden on phones. This
compact horizontal card gives mobile users a clickable
preview + zoom button right above the step form. */
.wz-mobile-preview {
display: none;
width: 100%;
gap: 12px;
padding: 10px 12px;
margin-bottom: 16px;
background: var(--wz-surface);
border: 1px solid var(--wz-border);
border-radius: 14px;
align-items: center;
text-align: left;
font: inherit;
color: var(--wz-text);
cursor: zoom-in;
transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.wz-mobile-preview:hover {
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
border-color: #2563eb;
transform: translateY(-1px);
}
.wz-mobile-preview__img {
flex: 0 0 auto;
width: 56px;
height: auto;
aspect-ratio: 8.5 / 11;
object-fit: cover;
object-position: top center;
border-radius: 6px;
pointer-events: none;
}
.wz-mobile-preview svg.wz-mobile-preview__img,
.wz-mobile-preview img.wz-mobile-preview__img { width: 56px !important; height: auto !important; }
.wz-mobile-preview__body {
display: flex; flex-direction: column; gap: 2px;
flex: 1 1 auto; min-width: 0;
}
.wz-mobile-preview__label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--wz-muted);
}
.wz-mobile-preview__name {
font-size: 15px; font-weight: 700; color: var(--wz-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wz-mobile-preview__hint {
font-size: 12px; color: var(--wz-muted);
}
.wz-mobile-preview__zoom {
flex: 0 0 auto;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: #eff6ff; color: #2563eb;
}
@media (max-width: 767px) {
.wz-mobile-preview { display: flex; }
}
/* ── Inline field errors ──────────────────────────────────────
Emitted by form_errors_controller when HTML5 validation fails.
Replaces the native browser tooltip that users routinely miss. */
.wz-field__error {
margin-top: 0.4rem;
font-size: 0.8rem;
line-height: 1.4;
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 8px 12px;
animation: wz-field-error-in 0.18s ease-out;
}
.wz-field__error::before {
content: "⚠ ";
font-weight: 700;
margin-right: 4px;
}
.wz-field__input--error,
.wz-field__textarea--error,
.wz-field__select--error {
border-color: #dc2626 !important;
background: #fffafa;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}
@keyframes wz-field-error-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ───────────────────────────────────────────────────────────────
Bundle wizard template step — mirrors the templates-page pattern:
one resume coverflow at top + matching CL/ML detail panel below
that swaps as the coverflow scrolls (driven by templates-switcher).
─────────────────────────────────────────────────────────────── */
.wz-bundle-stage {
display: block;
}
.wz-bundle-letters-panel {
margin-top: 28px;
position: relative;
min-height: 280px;
}
.wz-bundle-letters-row {
display: none;
padding: 20px 24px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
.wz-bundle-letters-row[data-active="true"] {
display: block;
}
.wz-bundle-letters-row__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.wz-bundle-letters-row__title {
font-size: 15px;
font-weight: 600;
color: #1f2937;
}
.wz-bundle-letters-row__chip {
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
}
.wz-bundle-letters-row__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 640px) {
.wz-bundle-letters-row__grid { grid-template-columns: 1fr; }
}
.wz-bundle-letter-card {
display: block;
width: 100%;
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 12px;
cursor: pointer;
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
text-align: left;
}
.wz-bundle-letter-card:hover {
border-color: #6366f1;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}
.wz-bundle-letter-card__img {
width: 100%;
aspect-ratio: 8.5 / 11;
object-fit: contain;
display: block;
border-radius: 6px;
background: #fff;
}
.wz-bundle-letter-card__label {
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: #1f2937;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.wz-bundle-letter-card__zoom {
font-size: 11px;
font-weight: 500;
color: #6b7280;
}
.wz-bundle-letters-row__pricing {
margin: 14px 0 0 0;
font-size: 13px;
font-weight: 600;
color: #047857;
}
/* Inline variant of the bundle-letters panel — rendered under the
resume coverflow in resume mode so users see what a bundle would
include without leaving the screen they're already on. Mirrors the
/templates page's "What's in the bundle" treatment one-to-one
(asymmetric letter:IP grid, polished hover lift, magnifying-glass
overlay on the letter thumb, chip with theme-color dot). */
.wz-bundle-letters-panel--inline {
margin-top: 24px;
border-top: 1px dashed #d1d5db;
padding-top: 20px;
}
.wz-bundle-letters-panel--inline .wz-bundle-letters-row {
background: transparent;
border: 0;
padding: 0;
}
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__head {
align-items: baseline;
margin-bottom: 16px;
}
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__title {
font-size: 14px;
font-weight: 700;
color: #111827;
letter-spacing: 0.01em;
}
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__title strong {
color: #4338ca;
}
/* Refined chip — pill with a colored dot that picks up the active
card's theme. Matches /templates exactly. */
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.92);
border: 1px solid #e5e7eb;
font-size: 11.5px;
font-weight: 600;
color: #374151;
letter-spacing: 0.01em;
}
.wz-bundle-letters-row__chip-dot {
width: 10px; height: 10px;
border-radius: 50%;
border: 1px solid rgba(17, 24, 39, 0.1);
box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.06);
flex-shrink: 0;
}
/* Asymmetric grid — fixed letter thumb width on the left, IP card
stretches to fill the row so the 10-question list breathes. Mirrors
/templates .tpl-row__letters-grid--v2. */
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__grid {
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
align-items: start;
gap: 16px;
}
@media (max-width: 720px) {
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__grid {
grid-template-columns: 1fr;
}
}
/* Triple-document variant — resume thumb + letter thumb + IP card
side-by-side so the user sees the full bundle deliverable at a
glance. Two fixed-width thumbs on the left, IP stretches on the
right. On mobile + narrow tablet stacks single-column. */
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__grid--triple {
grid-template-columns: minmax(0, 200px) minmax(0, 200px) minmax(0, 1fr);
gap: 14px;
}
@media (max-width: 900px) {
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__grid--triple {
grid-template-columns: 1fr 1fr;
}
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__grid--triple .wz-bundle-ip-card {
grid-column: 1 / -1;
}
}
@media (max-width: 540px) {
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__grid--triple {
grid-template-columns: 1fr;
}
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__grid--triple .wz-bundle-ip-card {
grid-column: auto;
}
}
/* Tag the resume thumbnail subtly so the user knows which is which
without reading the label. The matched letter is the same card
style (no extra class) to keep visual weight balanced. */
.wz-bundle-letter-card--resume {
position: relative;
}
/* Letter thumb — clickable card with the magnifying-glass overlay on
hover, identical to /templates' .tpl-row__letter-thumb--clickable. */
.wz-bundle-letters-panel--inline .wz-bundle-letter-card {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 12px 12px 10px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
cursor: zoom-in;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
text-align: left;
}
.wz-bundle-letters-panel--inline .wz-bundle-letter-card::after {
content: "";
position: absolute;
top: 10px; right: 10px;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(17, 24, 39, 0.75) url("data:image/svg+xml;utf8,") center/14px 14px no-repeat;
opacity: 0;
transform: translateY(-2px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.wz-bundle-letters-panel--inline .wz-bundle-letter-card:hover {
border-color: #6366f1;
box-shadow: 0 10px 28px rgba(79, 70, 229, 0.14);
transform: translateY(-3px);
}
.wz-bundle-letters-panel--inline .wz-bundle-letter-card:hover::after {
opacity: 1;
transform: translateY(0);
}
.wz-bundle-letters-panel--inline .wz-bundle-letter-card__img {
width: 100%;
aspect-ratio: 816 / 1100;
object-fit: cover; object-position: top center;
border-radius: 8px;
display: block;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.wz-bundle-letters-panel--inline .wz-bundle-letter-card__label {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
font-size: 12px; font-weight: 700; color: #111827;
letter-spacing: 0.02em;
}
.wz-bundle-letters-panel--inline .wz-bundle-letter-card__zoom {
font-size: 10.5px;
font-weight: 600;
color: #9ca3af;
text-transform: lowercase;
letter-spacing: 0.02em;
}
/* Pricing line — green checkmark + dollar amount, matches /templates. */
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__pricing {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 14px 0 0;
padding: 12px 14px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: #047857;
line-height: 1.5;
}
.wz-bundle-letters-panel--inline .wz-bundle-letters-row__pricing-icon {
flex-shrink: 0;
margin-top: 2px;
}
/* "Make it a bundle" toggle — same shape as the /templates page's
tpl-row__builder-item but adapted for the wizard's wider panel. */
.wz-bundle-toggle {
display: flex; align-items: center; gap: 12px;
margin: 14px 0 0;
padding: 12px 14px;
background: #fffbeb;
border: 1.5px dashed #f59e0b;
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.wz-bundle-toggle:hover {
background: #fef3c7;
border-color: #d97706;
}
.wz-bundle-toggle__input {
width: 18px; height: 18px;
margin: 0;
accent-color: #d97706;
cursor: pointer;
}
.wz-bundle-toggle__check { display: none; }
.wz-bundle-toggle__body {
flex: 1; min-width: 0;
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
justify-content: space-between;
}
.wz-bundle-toggle__name {
font-size: 14px; font-weight: 700; color: #78350f;
}
.wz-bundle-toggle__extra {
display: block;
font-size: 12px; font-weight: 500; color: #92400e;
margin-top: 2px;
}
.wz-bundle-toggle__price {
font-size: 16px; font-weight: 800; color: #78350f;
white-space: nowrap;
}
.wz-bundle-toggle:has(.wz-bundle-toggle__input:checked) {
background: #d1fae5;
border-style: solid;
border-color: #059669;
}
.wz-bundle-toggle:has(.wz-bundle-toggle__input:checked) .wz-bundle-toggle__name,
.wz-bundle-toggle:has(.wz-bundle-toggle__input:checked) .wz-bundle-toggle__extra,
.wz-bundle-toggle:has(.wz-bundle-toggle__input:checked) .wz-bundle-toggle__price {
color: #065f46;
}
/* Bundle CTA accent — fires when the toggle is on so the user gets a
visual confirmation the price changed. Falls back to the standard
primary if :has() isn't supported (Safari 15.4+, Firefox 121+). */
.wz-btn-primary--bundle {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
box-shadow: 0 6px 18px rgba(5, 150, 105, 0.28);
}
.wz-btn-primary--bundle:hover {
background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}
.wz-btn-primary--mid {
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
box-shadow: 0 6px 18px rgba(217, 119, 6, 0.28);
}
.wz-btn-primary--mid:hover {
background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}
/* ───────────────────────────────────────────────────────────────
Three-tier pricing ladder on the wizard template step.
Resume only / Resume + Letter ($8.99 middle) / Bundle ($11.99 top).
Stacks vertically on the wizard for clarity; on mobile + tablet
each card stays full-width so the user can scan top→bottom and
tap a single radio without misfires.
─────────────────────────────────────────────────────────────── */
.wz-tier-picker {
margin: 16px 0 0;
padding: 0;
border: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.wz-tier-picker__legend {
font-size: 12px;
font-weight: 700;
color: #374151;
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0 0 4px;
padding: 0;
}
.wz-tier-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 12px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.wz-tier-card:hover {
border-color: #cbd5e1;
background: #f9fafb;
}
.wz-tier-card__input {
width: 18px; height: 18px;
margin: 0;
accent-color: #4338ca;
cursor: pointer;
flex-shrink: 0;
}
.wz-tier-card__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.wz-tier-card__title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.wz-tier-card__save {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 4px;
background: #d1fae5;
color: #065f46;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.wz-tier-card__desc {
font-size: 12.5px;
font-weight: 500;
color: #6b7280;
line-height: 1.4;
}
.wz-tier-card__price {
font-size: 18px;
font-weight: 800;
color: #111827;
white-space: nowrap;
flex-shrink: 0;
}
/* Stacked "was $12.98 → now $8.99" treatment for the discounted tiers.
Shows the list-anchor on top with a strikethrough so users can see
the SKU-bundling discount they're getting (separate from the runtime
launch/PPP/high-friction discount which surfaces at the plan step). */
.wz-tier-card__price-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
flex-shrink: 0;
}
.wz-tier-card__price-was {
font-size: 12px;
font-weight: 600;
color: #94a3b8;
text-decoration: line-through;
text-decoration-thickness: 1.5px;
white-space: nowrap;
}
.wz-tier-card__save--mid {
background: #fffbeb;
color: #92400e;
}
.wz-tier-card__badge {
position: absolute;
top: -10px;
right: 14px;
padding: 3px 9px;
background: #4338ca;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 100px;
}
/* Selected state — uses :has() for modern browsers (Safari 15.4+,
Firefox 121+, Chromium 105+). Falls back gracefully: unselected
cards just look like the base style. */
.wz-tier-card:has(.wz-tier-card__input:checked) {
border-color: #4338ca;
background: #f5f3ff;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(67, 56, 202, 0.12);
}
.wz-tier-card--mid:has(.wz-tier-card__input:checked) {
border-color: #d97706;
background: #fffbeb;
box-shadow: 0 6px 18px rgba(217, 119, 6, 0.16);
}
.wz-tier-card--bundle:has(.wz-tier-card__input:checked) {
border-color: #059669;
background: #ecfdf5;
box-shadow: 0 6px 18px rgba(5, 150, 105, 0.18);
}
/* Mobile + tablet: same vertical stack, but pad less and let the
price wrap below the title on really narrow viewports. */
@media (max-width: 480px) {
.wz-tier-card {
padding: 12px 14px;
gap: 10px;
}
.wz-tier-card__price {
font-size: 17px;
}
.wz-tier-card__title {
font-size: 14px;
}
.wz-tier-card__badge {
right: 10px;
font-size: 9.5px;
padding: 2px 7px;
}
}
/* Interview-prep teaser card — sibling of the matching-letter card
inside .wz-bundle-letters-row__grid. Lives only in bundle mode on
the template step. Background is FIXED LIGHT regardless of the
active template theme — the cyber palette ships pure-black bgs
(#000000 for matrix, #001018 for cyan, #0a0600 for amber) which
would push our dark question text onto a dark surface and erase
contrast. Theme color still surfaces through --ip-accent on the
number badge, category-aware chips, and the left rule, so the
card reads "this row's theme" without sacrificing readability. */
.wz-bundle-ip-card {
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
color: #1f2937;
}
.wz-bundle-ip-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.wz-bundle-ip-card__title {
font-size: 15px;
font-weight: 700;
color: #0f172a;
}
.wz-bundle-ip-card__badge {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 8px;
border-radius: 999px;
/* Darken the theme accent for legibility against the chip bg —
pure-neon themes (matrix, hot-pink) and pale-yellow (amber) wash
out otherwise. 60% accent + 40% deep slate keeps a clear theme
tint while always passing 4.5:1 contrast on the chip. */
color: color-mix(in srgb, var(--ip-accent, #4338ca) 60%, #0f172a);
background: color-mix(in srgb, var(--ip-accent, #4338ca) 14%, white);
}
.wz-bundle-ip-card__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 360px;
overflow-y: auto;
padding-right: 4px;
border-left: 2px solid color-mix(in srgb, var(--ip-accent, #4338ca) 35%, white);
padding-left: 12px;
}
.wz-bundle-ip-card__list::-webkit-scrollbar {
width: 6px;
}
.wz-bundle-ip-card__list::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 999px;
}
.wz-bundle-ip-card__item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 8px;
padding: 6px 0;
font-size: 13px;
line-height: 1.45;
color: #1f2937;
}
.wz-bundle-ip-card__num {
width: 22px;
height: 22px;
border-radius: 6px;
/* Same darkening rule as the badge: bright-neon and pale themes
would float white text against a too-light fill, so we anchor
the chip to a darker mix that always carries the theme tint
without losing the white-on-color contrast. */
background: color-mix(in srgb, var(--ip-accent, #4338ca) 70%, #0f172a);
color: #fff;
font-weight: 700;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.wz-bundle-ip-card__q {
font-weight: 500;
}
.wz-bundle-ip-card__cat {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 7px;
border-radius: 999px;
white-space: nowrap;
align-self: center;
}
.wz-bundle-ip-card__cat--behavioral {
background: #ecfdf5;
color: #047857;
}
.wz-bundle-ip-card__cat--situational {
background: #eff6ff;
color: #1d4ed8;
}
.wz-bundle-ip-card__cat--strategic {
background: #fdf4ff;
color: #a21caf;
}
.wz-bundle-ip-card__foot {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: #475569;
border-top: 1px dashed #e2e8f0;
padding-top: 10px;
margin-top: 4px;
}
.wz-bundle-ip-card__check {
color: #047857;
font-weight: 700;
flex-shrink: 0;
}
@media (max-width: 640px) {
.wz-bundle-ip-card { padding: 14px; }
.wz-bundle-ip-card__list { max-height: 260px; }
.wz-bundle-ip-card__item { font-size: 12px; }
.wz-bundle-ip-card__cat { display: none; }
}
/* ── v2.1 Multilingual input safety ──────────────────────────────
Wizard inputs accept all Unicode scripts (Hindi / Arabic / Chinese /
Japanese / Korean / Cyrillic / Devanagari / Tamil / Hebrew / Thai /
Bengali / etc.) thanks to:
1) on the layout
2) PostgreSQL default UTF-8 encoding
3) NO restrictive `pattern=` regexes anywhere in the wizard views
4) `unicode-bidi: plaintext` — auto-detects text direction from the
first strong character so Arabic/Hebrew names render right-to-left
without the user touching any setting
5) Inter Variable + system-ui + Apple Color Emoji + Segoe UI Emoji
+ Noto Color Emoji fallback covers ~all scripts on modern OSes;
on Linux servers Noto Sans CJK / Noto Sans Devanagari are
typically pre-installed by the deploy image
*/
.wz-field__input,
.wz-field__textarea,
.wz-field input[type="text"],
.wz-field input[type="email"],
.wz-field input[type="tel"],
.wz-field input[type="url"],
.wz-field textarea {
unicode-bidi: plaintext;
font-family:
"Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI",
"Noto Sans", "Noto Sans Arabic", "Noto Sans CJK SC",
"Noto Sans CJK JP", "Noto Sans Devanagari", "Noto Sans Bengali",
"Noto Sans Hebrew", "Noto Sans Thai", "Helvetica Neue",
"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
sans-serif;
}
/* Right-to-left scripts handled automatically via unicode-bidi above,
but explicitly declare for any element where the user typed an RTL-
first string so the cursor + selection feel native. */
[dir="rtl"], [dir="auto"]:lang(ar), [dir="auto"]:lang(he),
[dir="auto"]:lang(fa), [dir="auto"]:lang(ur) {
text-align: start;
}
/* ──────────────────────────────────────────────────────────────────────
Mobile: prevent iOS Safari's auto-zoom-on-focus.
iOS Safari zooms the entire viewport when a user taps any input,
textarea, or select whose computed font-size is < 16px. The desktop
wizard styles above use 0.9rem (≈14.4px on a 16px base) which is
right at that trip-wire. The zoom is jarring + breaks our carefully-
designed step layout; users then have to pinch-zoom back out.
Bumping form inputs to 16px ONLY at mobile widths fixes the zoom
without touching the desktop visual. Limited to ≤640px so tablets +
desktop keep the original sizing. Applies to every form-input
variant the wizard ships (input/textarea/select + the dedicated
wz-field__* classes).
────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.wz-field__input,
.wz-field__textarea,
.wz-field__select,
.wz-field input,
.wz-field textarea,
.wz-field select {
font-size: 16px;
}
}
/* ── ATS→Wizard prefill banner ──────────────────────────────
Shown on wizard steps when Document.json_data["_ats_prefilled"]
is true (set by ToolsController stash + BuildController apply).
Self-dismisses via the wz-prefill-banner Stimulus controller. */
.wz-prefill-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
margin: 0 0 16px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
color: #065f46;
}
.wz-prefill-banner__icon {
flex: 0 0 22px;
width: 22px;
height: 22px;
background: #10b981;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
margin-top: 1px;
}
.wz-prefill-banner__text { flex: 1; }
.wz-prefill-banner__text strong { color: #064e3b; font-weight: 700; }
.wz-prefill-banner__close {
flex: 0 0 28px;
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #047857;
font-size: 22px;
line-height: 1;
cursor: pointer;
border-radius: 6px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.wz-prefill-banner__close:hover { background: rgba(16, 185, 129, 0.12); }
@media (max-width: 600px) {
.wz-prefill-banner { padding: 11px 14px; font-size: 13px; border-radius: 8px; }
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/