/* =============================================================================
Monezzi V2 Wizard styles — modeled on __templates/new_from_claude_code/wizard.css
========================================================================== */
:root {
--wiz-bg: #EEF2F8;
--wiz-card-bg: #FFFFFF;
--wiz-ink: #0F172A;
--wiz-ink-2: #475569;
--wiz-muted: #64748B;
--wiz-line: #E2E8F0;
--wiz-primary: #2563EB;
--wiz-primary-soft: #F0F7FF;
--wiz-radius: 14px;
--wiz-radius-lg: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.mz-wizard-shell {
background: var(--wiz-bg);
color: var(--wiz-ink);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 15px;
line-height: 1.55;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ─── Top bar ───────────────────────────────────────────────────────── */
.mz-wizard-topbar {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
background: #fff;
border-bottom: 1px solid var(--wiz-line);
position: sticky;
top: 0;
z-index: 30;
}
.mz-wizard-brand { display: inline-block; text-decoration: none; }
.mz-wizard-brand picture, .mz-wizard-brand img { display: block; height: 28px; width: auto; }
.mz-wizard-back {
color: var(--wiz-muted);
font-size: 13px;
font-weight: 500;
text-decoration: none;
padding: 6px 12px;
border-radius: 8px;
transition: background .12s, color .12s;
}
.mz-wizard-back:hover {
background: var(--wiz-primary-soft);
color: var(--wiz-primary);
}
/* ─── Main content area ─────────────────────────────────────────────── */
.mz-wizard-main {
flex: 1;
padding: 32px clamp(20px, 4vw, 28px) 80px;
max-width: 1240px;
width: 100%;
margin: 0 auto;
}
/* ─── Locale switcher at bottom ────────────────────────────────────── */
.mz-wizard-langs {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 24px 20px 32px;
color: var(--wiz-muted);
font-size: 13.5px;
}
.mz-wizard-lang {
color: var(--wiz-muted);
text-decoration: none;
padding: 4px 8px;
border-radius: 4px;
transition: color .12s;
}
.mz-wizard-lang:hover { color: var(--wiz-primary); }
.mz-wizard-lang.active { color: var(--wiz-ink); font-weight: 600; }
.mz-wizard-langsep { color: var(--wiz-line); }
/* ─── Wizard layout grid ───────────────────────────────────────────── */
.mz-wizard-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 32px;
align-items: start;
}
@media (max-width: 1000px) {
.mz-wizard-grid { grid-template-columns: 1fr; }
.mz-wizard-basket { position: static !important; }
}
/* Public shell (/get-started/*) has no basket sidebar — single centered column.
Stronger page bg for contrast with white cards; auth wizards unaffected. */
body.mz-wizard-public {
background: #F4F8FD;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "cv11", "ss01";
font-weight: 500; /* body default medium — fintech readability */
color: var(--wiz-ink);
}
.mz-wizard-public .mz-wizard-main { max-width: 848px; }
.mz-wizard-public .mz-wizard-grid { grid-template-columns: minmax(0, 1fr); }
/* Fintech-grade text: primary ink + medium weight + larger body size. */
.mz-wizard-public .mz-wizard-lede { font-size: 16px; font-weight: 500; color: var(--wiz-ink); }
.mz-wizard-public .mz-opt-desc {
font-size: 15px;
line-height: 1.55;
font-weight: 500;
color: var(--wiz-ink);
}
.mz-wizard-public .mz-opt-meta,
.mz-wizard-public .mz-opt-meta span {
font-size: 14.5px;
font-weight: 500;
color: var(--wiz-ink);
}
.mz-wizard-public .mz-opt-alt {
font-size: 13.5px;
font-weight: 500;
color: var(--wiz-ink-2);
}
.mz-wizard-public .mz-wizard-eyebrow { font-weight: 700; letter-spacing: 0.08em; color: #2563EB; }
/* ═══════════════════════════════════════════════════════════════════════════
SCREEN-00-main.png — pixel-perfect education cards + iOS sheet modals.
═══════════════════════════════════════════════════════════════════════════ */
/* Hero wrapper (mz-wizard-card modifier) — softer inner spacing on mobile. */
.mz-edu-hero { padding-top: 28px; padding-bottom: 28px; }
.mz-edu-hero > h1 { font-size: 26px; line-height: 1.22; margin: 0 0 10px; }
.mz-edu-hero > .mz-wizard-lede { margin-bottom: 50px; }
/* Numbered education card (card 01 / 02 / 03) — chromeless; parent card
already provides the surface, so no border/padding/shadow. */
.mz-edu-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
column-gap: 14px;
row-gap: 0;
align-items: start;
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
margin: 0 0 20px;
box-shadow: none;
}
/* 1 / 2 / 3 step badge — solid blue circle + white numeral (matches .mz-edu-check palette) */
.mz-edu-num {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px; /* was 13 → +40% */
font-weight: 800;
color: #FFFFFF;
letter-spacing: 0;
line-height: 1;
background: #0553F7;
border: 0;
padding: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: start;
}
.mz-edu-body { min-width: 0; grid-column: 2; }
.mz-edu-visual {
grid-column: 3;
width: 62px; /* desktop */
max-width: 62px;
align-self: center;
justify-self: end;
}
.mz-edu-visual img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 820px) {
.mz-edu-visual { width: 48px; max-width: 48px; }
}
.mz-edu-title {
grid-column: 2 / -1;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 800;
color: #0F172A;
margin: 0 0 4px;
line-height: 1.25;
}
.mz-edu-desc {
font-size: 14.5px;
color: #475569;
margin: 0 0 12px;
line-height: 1.5;
}
.mz-edu-checks {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mz-edu-checks li {
font-size: 14.5px;
color: #0F172A;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
line-height: 1.4;
}
/* Blue filled circle + white check ✓ (spec: #0553F7 bg, white check) */
.mz-edu-check {
flex: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #0553F7;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mz-edu-check::before {
content: '';
width: 10px;
height: 6px;
border-left: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
transform: rotate(-45deg) translate(1px, -1px);
}
/* Card 03 chip row (Wyoming / Florida / Delaware / Other states) */
.mz-edu-chips {
list-style: none;
padding: 0;
margin: 6px 0 12px;
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.mz-edu-chips li {
font-size: 13px;
font-weight: 600;
color: #0F172A;
background: #EEF4FF;
border: 1px solid #DBEAFE;
border-radius: 999px;
padding: 4px 10px;
}
/* Inline blue link (Learn the difference →, Learn about states →) */
.mz-edu-inline-link {
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: #2563EB;
font-family: inherit;
font-size: 14.5px;
font-weight: 600;
text-align: left;
text-decoration: none;
}
.mz-edu-inline-link:hover { text-decoration: underline; }
/* Small info dot (i) + alt text under State card */
.mz-edu-alt {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12.5px;
color: #64748B;
margin: 10px 0 0;
line-height: 1.4;
}
.mz-edu-info-dot {
flex: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #2563EB;
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Bottom hint + primary CTA */
.mz-edu-bottom-hint {
font-size: 13.5px;
color: #475569;
text-align: center;
margin: 20px 0 16px;
line-height: 1.5;
}
.mz-edu-primary-actions { margin: 0; }
.mz-edu-primary-btn { width: 100%; font-size: 16px; padding: 14px 18px; }
/* ─── Card 1 nested country CTA ─── */
/* Featured box — soft light-blue background highlights the country-specific
education path; grid-column spans the whole card row. */
.mz-country-cta-wrap {
grid-column: 1 / -1;
margin-top: 14px;
padding: 14px;
background: #F1F7FD;
border-radius: 14px;
}
.mz-country-cta {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
background: #FFFFFF;
border: 1px solid #E4EBF3;
border-radius: 12px;
padding: 12px 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
margin: 0 0 8px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.mz-country-cta:hover { border-color: #C7DBFB; background: #F5F9FF; }
.mz-flag-circle {
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: #EEF2F8;
color: #0F172A;
font-size: 11px;
font-weight: 700;
border: 1px solid #E4EBF3;
}
.mz-flag-circle-sm { width: 28px; height: 28px; font-size: 10px; }
.mz-country-cta-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.mz-country-cta-title {
font-size: 14.5px;
font-weight: 700;
color: #0F172A;
line-height: 1.3;
}
.mz-country-cta-sub {
font-size: 14.5px;
color: #475569;
line-height: 1.5;
}
.mz-country-cta-chevron {
flex: none;
color: #94A3B8;
font-size: 22px;
font-weight: 400;
line-height: 1;
}
.mz-country-cta-change {
font-size: 13px;
color: #64748B;
margin: 6px 0 0;
text-align: center;
line-height: 1.4;
}
/* Standalone (no country content) — still spans full card width and centers. */
.mz-country-cta-change--solo {
grid-column: 1 / -1;
margin: 14px 0 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
SCREEN-00-founders-in-country.png — country wizard modal (default template)
═══════════════════════════════════════════════════════════════════════════ */
.mz-country-wizard { padding: 0 0 4px; }
/* Header — label + flag + counter row */
.mz-country-wizard-head {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 40px 6px;
text-align: center;
}
.mz-country-wizard-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #0F172A;
margin: 0;
}
.mz-country-wizard-flag { flex: none; }
/* Progress row */
.mz-country-wizard-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 6px 20px 16px;
}
.mz-country-wizard-progress .mz-progress-dots {
margin: 0;
padding: 0;
}
.mz-country-wizard-counter {
font-size: 12.5px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.02em;
min-width: 32px;
text-align: right;
}
/* Slides */
.mz-country-slides {
padding: 4px 4px 12px;
}
.mz-country-slide { display: block; }
.mz-country-slide[hidden] { display: none; }
.mz-country-slide-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: #EFF4FE;
color: #2563EB;
display: flex;
align-items: center;
justify-content: center;
margin: 4px auto 12px;
font-size: 26px;
}
.mz-country-slide-icon-emoji { line-height: 1; }
.mz-country-slide-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 800;
color: #0F172A;
text-align: center;
margin: 0 0 6px;
line-height: 1.25;
letter-spacing: -0.01em;
}
.mz-country-slide-lede {
font-size: 14.5px;
color: #475569;
text-align: center;
margin: 0 0 18px;
line-height: 1.5;
font-weight: 500;
}
.mz-country-slide-ticks {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left; /* override center layout for tick items */
}
.mz-country-slide-ticks li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14.5px;
color: #0F172A;
font-weight: 500;
line-height: 1.4;
text-align: left;
}
.mz-country-slide-ticks li > .mz-edu-check { margin-top: 2px; }
/* Notice — warm neutral highlight (design shows soft yellow/orange band) */
.mz-info-note-notice {
background: #FEF7E6;
border-color: #FCE7A6;
}
.mz-info-note-notice .mz-info-icon {
background: #B45309;
color: #FFFFFF;
}
/* Slide eyebrow (E-2 slide etc.) — flag chip + caps label above title. */
.mz-country-slide-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
background: #EFF4FE;
border: 1px solid #D8E5FE;
border-radius: 999px;
margin: 4px auto 12px;
}
.mz-country-slide--e2_visa {
text-align: center;
}
.mz-country-slide--e2_visa .mz-country-slide-eyebrow {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.mz-country-slide-eyebrow-flag {
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
overflow: hidden;
border: 1px solid #E4EBF3;
background: #FFFFFF;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mz-country-slide-eyebrow-flag img,
.mz-country-slide-eyebrow-flag svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-country-slide-eyebrow-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.08em;
color: #1D4ED8;
text-transform: uppercase;
line-height: 1;
}
/* Country-specific notes block (per-treaty reciprocity, etc.) */
.mz-country-notes {
background: #F0F7FF;
border: 1px solid #DBEAFE;
border-radius: 12px;
padding: 10px 14px;
margin: 0 0 12px;
}
.mz-country-notes-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 800;
color: #1D4ED8;
margin: 0 0 6px;
text-align: center;
}
.mz-country-notes-body {
font-size: 13.5px;
color: #0F172A;
font-weight: 500;
line-height: 1.5;
margin: 0 0 4px;
text-align: left;
}
.mz-country-notes-body strong { font-weight: 700; }
.mz-country-notes ul {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.mz-country-notes li {
font-size: 13.5px;
color: #0F172A;
font-weight: 500;
line-height: 1.4;
padding-left: 14px;
position: relative;
}
.mz-country-notes li::before {
content: '•';
position: absolute;
left: 2px;
top: 0;
color: #2563EB;
font-weight: 800;
}
/* Per-slide CTA bar (e.g. cross-sell to a Monezzi service) */
.mz-slide-cta {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
text-decoration: none;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
transition: background 0.15s ease, transform 0.15s ease;
margin: 0 0 12px;
}
.mz-slide-cta-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.mz-slide-cta-label { line-height: 1.3; text-align: center; }
.mz-slide-cta-desc {
font-family: 'Inter', system-ui, sans-serif;
font-size: 12.5px;
font-weight: 500;
line-height: 1.4;
opacity: 0.85;
text-align: left;
}
.mz-slide-cta-arrow { flex: none; font-size: 22px; line-height: 1; align-self: center; }
.mz-slide-cta:hover { transform: translateX(2px); }
.mz-slide-cta--success {
background: #DCFCE7;
border: 1px solid #86EFAC;
color: #14532D;
}
.mz-slide-cta--success:hover { background: #BBF7D0; }
/* Navigation buttons — all right-aligned so right-thumb reaches close/back/next. */
.mz-country-wizard-nav {
display: flex;
gap: 12px;
justify-content: flex-end;
align-items: center;
padding: 6px 4px 4px;
}
/* Close inline — Orhan 2026-08-29 education modal revize: eski circular ×
chip (`mz-country-close-inline`) yerine Back butonu paterninde ghost btn.
Sağa dayalı cluster (Close, Back, Next) — mobil one-thumb reach. Container
zaten justify-content: flex-end → Close DOM sırasında Back'ten önce olduğu
için Back'in solunda, sağ kümede konumlanır. Ekstra margin gerekmez.
Aktif blade partial'lar: _entity_body / _state_body / _default_body /
_meet_story_body / _meet_experience_body / _meet_beyond_body. */
/* Compact button modifier — smaller than the primary form CTA. */
.mz-btn.mz-btn-compact {
padding: 8px 14px;
font-size: 13.5px;
min-width: 0;
width: auto;
}
/* Disabled state (first slide back / last slide next) — visible but not clickable */
.mz-btn:disabled,
.mz-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Card action row — spans body col to end so links reclaim the width hidden by
the visual thumbnail on the row above. */
.mz-edu-actions {
grid-column: 2 / -1;
margin-top: 8px;
}
.mz-country-cta-change .mz-edu-inline-link { font-size: 13px; font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════════════════
iOS-style bottom sheet modal (slide-up + backdrop dim + drag handle).
═══════════════════════════════════════════════════════════════════════════ */
.mz-sheet {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
}
.mz-sheet.is-open { display: block; }
.mz-sheet-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
transition: opacity 0.25s ease;
}
.mz-sheet.is-anim .mz-sheet-backdrop { opacity: 1; }
.mz-sheet-panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #FFFFFF;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
max-height: 92vh;
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
}
.mz-sheet.is-anim .mz-sheet-panel { transform: translateY(0); }
.mz-sheet-handle {
width: 40px;
height: 4px;
border-radius: 2px;
background: #CBD5E1;
margin: 8px auto 4px;
flex: none;
}
.mz-sheet-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #F1F5F9;
border: 0;
font-size: 22px;
color: #475569;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
z-index: 2;
}
.mz-sheet-close:hover { background: #E2E8F0; color: #0F172A; }
.mz-sheet-body {
overflow-y: auto;
padding: 8px 20px 24px;
-webkit-overflow-scrolling: touch;
}
body.mz-sheet-locked { overflow: hidden; }
/* Desktop: center as bottom-anchored card with max-width. */
@media (min-width: 820px) {
.mz-sheet-panel {
max-width: 560px;
margin: 0 auto;
max-height: 86vh;
border-radius: 20px;
left: 50%;
right: auto;
bottom: 4vh;
transform: translate(-50%, calc(100% + 8vh));
}
.mz-sheet.is-anim .mz-sheet-panel { transform: translate(-50%, 0); }
}
/* ─── Modal content shell ─── */
.mz-edu-modal { padding: 4px 0 8px; }
.mz-edu-modal-head { text-align: center; padding: 0 24px 12px; }
.mz-edu-modal-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 17px;
font-weight: 800;
color: #0F172A;
margin: 0;
line-height: 1.3;
}
.mz-edu-modal-sub {
font-size: 14px;
color: #475569;
margin: 6px 0 0;
line-height: 1.45;
}
.mz-edu-modal-h {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 800;
color: #0F172A;
text-align: center;
margin: 8px 0 6px;
line-height: 1.25;
}
.mz-edu-modal-lede {
font-size: 14.5px;
color: #475569;
text-align: center;
margin: 0 0 20px;
line-height: 1.5;
}
/* Progress dots — reused by state 4-panel + country 6-panel wizards. */
.mz-progress-dots {
list-style: none;
padding: 0;
margin: 6px 0 16px;
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
}
.mz-progress-dot {
width: 18px;
height: 6px;
border-radius: 3px;
background: #E2E8F0;
cursor: pointer;
transition: background 0.2s ease, width 0.2s ease;
}
.mz-progress-dot.is-active { background: #2563EB; width: 24px; }
/* ─── Entity modal (4-slide wizard) — blocks, callouts, outro ─── */
.mz-entity-para {
font-size: 14px;
line-height: 1.5;
color: #334155;
margin: 0 0 12px;
}
.mz-entity-para strong { color: #0F172A; font-weight: 700; }
.mz-entity-checklist-head {
font-size: 14px;
font-weight: 700;
color: #0F172A;
margin: 14px 0 8px;
}
/* Coloured intro/comparison block (LLC or C-Corp) */
.mz-entity-block {
border-radius: 14px;
padding: 16px 14px;
margin: 0 0 14px;
border: 1px solid transparent;
}
.mz-entity-block--llc {
background: #F0FDF4;
border-color: #BBF7D0;
}
.mz-entity-block--cc {
background: #EEF2FF;
border-color: #C7D2FE;
}
.mz-entity-block-h {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 17px;
font-weight: 800;
color: #0F172A;
margin: 0 0 4px;
}
.mz-entity-block-lede {
font-size: 14px;
color: #0F172A;
margin: 0 0 8px;
line-height: 1.45;
}
.mz-entity-block .mz-entity-para { margin: 0 0 10px; }
.mz-entity-block .mz-country-slide-ticks { margin: 6px 0 10px; }
/* Callout stripe — highlight sentences ("For most Monezzi founders → LLC") */
.mz-entity-callout {
display: block;
padding: 10px 14px;
border-radius: 12px;
font-size: 14px;
line-height: 1.4;
color: #0F172A;
margin: 0 0 10px;
border-left: 4px solid transparent;
}
.mz-entity-callout p { margin: 0; }
.mz-entity-callout p + p { margin-top: 2px; }
.mz-entity-callout strong { font-weight: 700; }
.mz-entity-callout--llc {
background: #ECFDF5;
border-left-color: #10B981;
color: #065F46;
}
.mz-entity-callout--cc {
background: #EEF2FF;
border-left-color: #6366F1;
color: #3730A3;
}
.mz-entity-callout--strong {
font-size: 15px;
font-weight: 700;
padding: 12px 14px;
}
/* Plain example list (no bullet, no green tick) */
.mz-entity-examples {
list-style: none;
padding: 0;
margin: 4px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.mz-entity-examples li {
font-size: 13.5px;
color: #0F172A;
line-height: 1.5;
}
.mz-entity-examples li strong { font-weight: 700; }
/* "Still not sure?" outro card at the end of slide 4 */
.mz-entity-outro {
background: #F1F5F9;
border: 1px solid #E2E8F0;
border-radius: 14px;
padding: 16px;
margin: 8px 0 0;
}
.mz-entity-outro-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 800;
color: #0F172A;
margin: 0 0 8px;
}
.mz-entity-outro-body {
font-size: 13.5px;
color: #334155;
margin: 0 0 8px;
line-height: 1.5;
}
.mz-entity-outro-body:last-child { margin-bottom: 0; }
.mz-entity-outro-body strong { color: #0F172A; font-weight: 700; }
.mz-entity-outro-qs {
list-style: none;
padding: 0;
margin: 0 0 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mz-entity-outro-qs li {
font-size: 13.5px;
color: #0F172A;
line-height: 1.45;
}
/* ─── State modal helpers (hierarchy, fees, cards, tax layers) ─── */
.mz-state-hierarchy {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 14px 12px;
text-align: center;
margin: 0 0 14px;
}
.mz-state-hierarchy-top {
font-size: 15px;
font-weight: 800;
color: #0F172A;
margin-bottom: 4px;
}
.mz-state-hierarchy-arrow {
color: #64748B;
margin: 2px 0;
font-size: 16px;
}
.mz-state-hierarchy-bottom {
font-size: 13.5px;
color: #334155;
line-height: 1.5;
}
.mz-state-fees {
background: rgba(255, 255, 255, 0.6);
border-radius: 10px;
padding: 10px 12px;
margin: 10px 0 0;
}
.mz-state-fees p {
margin: 0;
font-size: 13.5px;
color: #0F172A;
line-height: 1.5;
}
.mz-state-fees p strong { font-weight: 700; }
.mz-state-card {
border: 1px solid #E2E8F0;
border-radius: 14px;
padding: 14px;
margin: 0 0 12px;
background: #F8FAFC;
}
.mz-state-card-h {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 800;
color: #0F172A;
margin: 0 0 4px;
}
.mz-state-card-lede {
font-size: 13.5px;
color: #475569;
margin: 0 0 10px;
line-height: 1.5;
}
.mz-state-nots {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.mz-state-nots li {
font-size: 13.5px;
color: #7F1D1D;
padding-left: 22px;
position: relative;
line-height: 1.45;
}
.mz-state-nots li::before {
content: '\2715';
position: absolute;
left: 0;
top: 0;
color: #DC2626;
font-weight: 800;
}
.mz-state-layers {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 14px;
}
.mz-state-layer {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #F0F7FF;
border: 1px solid #DBEAFE;
border-radius: 10px;
font-size: 13.5px;
color: #0F172A;
font-weight: 500;
line-height: 1.4;
}
.mz-state-layer-icon {
flex: none;
font-size: 20px;
line-height: 1;
}
.mz-state-layer-plus {
text-align: center;
color: #64748B;
font-size: 15px;
font-weight: 800;
margin: 0;
line-height: 1;
}
/* Generic info note (blue tip) + tip variant */
.mz-info-note {
display: flex;
gap: 10px;
align-items: flex-start;
background: #F0F7FF;
border: 1px solid #DBEAFE;
border-radius: 12px;
padding: 10px 12px;
font-size: 13.5px;
color: #0F172A;
margin: 0 0 12px;
}
.mz-info-note p { margin: 0; line-height: 1.45; }
.mz-info-note .mz-info-icon {
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2563EB;
color: #FFFFFF;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif;
margin-top: 1px;
}
.mz-info-note-warn {
background: #FFF7ED;
border-color: #FED7AA;
display: block;
margin-top: 14px;
}
.mz-info-note-warn .mz-info-note-lead {
text-align: center;
font-size: 22px;
line-height: 1;
margin: 0 0 6px;
}
.mz-info-note-warn p { color: #78350F; text-align: left; margin: 0; }
.mz-info-note-warn p strong { color: #78350F; font-weight: 700; }
.mz-info-note-tip { background: #FEF9C3; border-color: #FDE68A; }
.mz-info-note-tip .mz-info-icon { background: transparent; color: #B45309; font-size: 16px; }
/* ─── State modal: 4-panel wizard ─── */
.mz-panels { margin: 8px 0 16px; }
.mz-panel { display: block; }
.mz-panel[hidden] { display: none; }
.mz-panel-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: #EEF4FF;
color: #2563EB;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
}
.mz-panel-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 19px;
font-weight: 800;
color: #0F172A;
text-align: center;
margin: 0 0 8px;
line-height: 1.25;
}
.mz-panel-lede {
font-size: 14.5px;
color: #475569;
text-align: center;
margin: 0 0 18px;
line-height: 1.5;
}
.mz-panel-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mz-panel-list li {
display: flex;
gap: 12px;
align-items: center;
border: 1px solid #E4EBF3;
border-radius: 12px;
padding: 12px;
background: #F8FBFF;
font-size: 14px;
color: #0F172A;
font-weight: 500;
}
.mz-panel-tick {
flex: none;
width: 34px;
height: 34px;
border-radius: 10px;
background: #EEF4FF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.mz-state-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mz-state-item {
display: flex;
gap: 12px;
border: 1px solid #E4EBF3;
border-radius: 14px;
padding: 14px;
background: #FFFFFF;
}
.mz-state-item .mz-state-icon {
flex: none;
width: 44px;
height: 44px;
border-radius: 12px;
background: #EEF4FF;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.mz-state-item h4 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 800;
color: #0F172A;
margin: 0 0 3px;
}
.mz-state-item p {
font-size: 13.5px;
color: #475569;
margin: 0 0 6px;
line-height: 1.4;
}
.mz-state-pill {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
padding: 3px 8px;
border-radius: 999px;
background: #DCFCE7;
color: #16A34A;
}
.mz-state-fee-card {
border: 1px dashed #C7DBFB;
border-radius: 14px;
padding: 16px;
margin: 0 0 14px;
background: #F5F9FF;
text-align: center;
}
.mz-state-fee-pill {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
color: #FFFFFF;
background: #2563EB;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.mz-state-fee-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13.5px;
color: #0F172A;
font-weight: 500;
}
.mz-panel-footnote {
font-size: 13px;
color: #64748B;
display: flex;
gap: 8px;
align-items: flex-start;
line-height: 1.45;
margin: 12px 0 0;
}
.mz-panel-footnote .mz-info-icon {
flex: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #16A34A;
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.mz-panel-nav {
display: flex;
gap: 12px;
justify-content: space-between;
margin-top: 4px;
}
.mz-panel-nav .mz-btn { flex: 1 1 auto; min-width: 0; }
.mz-panel-nav .mz-btn-ghost { flex: 0 0 auto; }
/* ─── Change country picker rows ─── */
.mz-cc-search {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #E4EBF3;
border-radius: 12px;
padding: 10px 14px;
margin: 4px 0 16px;
background: #F8FBFF;
}
.mz-cc-search-icon { color: #94A3B8; font-size: 14px; }
.mz-cc-search-input {
border: 0;
background: transparent;
outline: none;
font: inherit;
font-size: 15px;
color: #0F172A;
width: 100%;
}
.mz-cc-section-h {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 800;
color: #64748B;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 12px 0 8px;
}
.mz-cc-list { list-style: none; padding: 0; margin: 0 0 4px; }
.mz-cc-row {
display: flex;
gap: 12px;
align-items: center;
border: 1px solid #E4EBF3;
border-radius: 12px;
padding: 10px 14px;
margin: 0 0 8px;
background: #FFFFFF;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: border-color 0.15s, background 0.15s;
}
.mz-cc-row:hover:not(.is-disabled) { border-color: #C7DBFB; background: #F5F9FF; }
.mz-cc-row.is-current { border-color: #2563EB; background: #F0F7FF; }
.mz-cc-row.is-disabled { opacity: 0.55; cursor: not-allowed; }
.mz-cc-row input[type="radio"] { display: none; }
.mz-cc-row-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mz-cc-row-name {
font-size: 14.5px;
font-weight: 600;
color: #0F172A;
display: flex;
align-items: center;
gap: 6px;
}
.mz-cc-row-sub {
font-size: 12.5px;
color: #64748B;
line-height: 1.4;
}
.mz-cc-current-badge {
font-size: 10.5px;
font-weight: 700;
color: #2563EB;
background: #DBEAFE;
padding: 2px 6px;
border-radius: 999px;
letter-spacing: 0.03em;
}
.mz-cc-row-check {
color: #2563EB;
font-size: 18px;
font-weight: 800;
}
.mz-cc-row-chev {
color: #94A3B8;
font-size: 22px;
font-weight: 400;
line-height: 1;
}
/* ─── Stepper (matches reference .wiz-stepper) ─────────────────────── */
.mz-stepper {
display: flex;
gap: 8px;
margin-bottom: 24px;
background: #fff;
border: 1px solid var(--wiz-line);
border-radius: 14px;
padding: 14px 18px;
align-items: center;
}
.mz-step {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--wiz-muted);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
}
.mz-step .num {
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-grid;
place-items: center;
background: #F1F5F9;
color: #94A3B8;
font-weight: 700;
font-size: 12px;
flex-shrink: 0;
}
.mz-step.active { color: var(--wiz-primary); }
.mz-step.active .num {
background: var(--wiz-primary);
color: #fff;
}
.mz-step.done { color: #16A34A; }
.mz-step.done .num {
background: #DCFCE7;
color: #16A34A;
}
a.mz-step:hover { color: var(--wiz-primary); }
a.mz-step:hover .num { background: var(--wiz-primary-soft); color: var(--wiz-primary); }
a.mz-step.done:hover { color: #16A34A; }
a.mz-step.done:hover .num { background: #DCFCE7; color: #16A34A; }
.mz-step-divider {
flex: 0 0 auto;
align-self: center;
width: 14px;
height: 1px;
background: var(--wiz-line);
}
/* ─── Card ─────────────────────────────────────────────────────────── */
.mz-wizard-card {
background: var(--wiz-card-bg);
border: 1px solid var(--wiz-line);
border-radius: var(--wiz-radius-lg);
padding: 36px;
box-shadow: 0 1px 0 rgba(15,23,42,0.02);
}
.mz-wizard-card h1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--wiz-ink);
line-height: 1.2;
margin: 0 0 8px;
}
.mz-wizard-lede {
color: #0F172A;
opacity: 1;
font-size: 15px;
line-height: 1.6;
margin: 0 0 28px;
}
/* ─── Option grid (radio cards) — matches reference .opt-grid ──────── */
.mz-opt-grid {
display: grid;
gap: 14px;
}
.mz-opt-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.mz-opt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) {
.mz-opt-grid.cols-2,
.mz-opt-grid.cols-3 { grid-template-columns: 1fr; }
.mz-wizard-card { padding: 16px; }
.mz-wizard-main { padding: 8px 12px 20px; }
.mz-stepper { margin-bottom: 8px; }
}
.mz-opt {
display: flex;
flex-direction: column;
gap: 12px;
cursor: pointer;
position: relative;
border: 1.5px solid var(--wiz-line);
border-radius: 14px;
padding-block: 22px;
padding-inline-start: 54px;
padding-inline-end: 22px;
background: #fff;
transition: border-color .15s, box-shadow .15s, background .15s, transform .12s;
min-height: 100%;
}
.mz-opt:hover {
border-color: #94A3B8;
transform: translateY(-1px);
box-shadow: 0 6px 18px -12px rgba(15,23,42,0.18);
}
.mz-opt input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
/* Always-visible radio indicator in top-START corner (away from price). */
.mz-opt::before {
content: "";
position: absolute;
top: 22px;
inset-inline-start: 20px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid #CBD5E1;
background: #fff;
transition: border-color .15s, background-color .15s, background-image .15s;
}
.mz-opt:has(input:checked) {
border-color: var(--wiz-primary);
background: var(--wiz-primary-soft);
box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}
.mz-opt:has(input:checked)::before {
border-color: var(--wiz-primary);
background-color: var(--wiz-primary);
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center;
}
/* Header row: title (left, flexible) + price (right, fixed) — no overlap */
.mz-opt-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
}
.mz-opt-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--wiz-ink);
line-height: 1.25;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
flex: 1;
min-width: 0;
}
.mz-opt-title .badge {
font-size: 10.5px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
background: #DCFCE7;
color: #16A34A;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mz-opt-title .badge.blue { background: #DBEAFE; color: #1D4ED8; }
.mz-opt-price {
text-align: end;
font-weight: 700;
font-size: 15px;
color: var(--wiz-ink);
white-space: nowrap;
flex-shrink: 0;
line-height: 1.2;
padding-top: 2px;
}
.mz-opt-price small {
color: var(--wiz-muted);
font-weight: 500;
font-size: 11px;
display: block;
margin-top: 2px;
letter-spacing: 0;
text-transform: lowercase;
}
.mz-opt-desc {
font-size: 13.5px;
color: var(--wiz-muted);
line-height: 1.55;
margin: 0;
/* Reserve ~2 lines so cards with shorter taglines don't visually shift
the meta block up relative to siblings with wrapped taglines. */
min-height: calc(13.5px * 1.55 * 2);
}
/* Meta checks pinned to bottom so cards line up at equal heights */
.mz-opt-meta {
margin-top: auto;
padding-top: 12px;
border-top: 1px dashed var(--wiz-line);
font-size: 13px;
color: var(--wiz-ink-2);
display: flex;
flex-direction: column;
gap: 6px;
}
.mz-opt-meta span {
display: flex;
align-items: center;
gap: 6px;
line-height: 1.4;
/* Force one line per check so meta blocks stay equal-height across cards
(a wrapping check would push the dashed border + checks down on one card). */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
min-width: 0;
}
/* ─── Plan picker grid (2 columns; Premium occupies one cell on row 2) ─ */
.mz-plan-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 720px) {
.mz-plan-grid { grid-template-columns: 1fr; }
}
/* Inline segmented toggle inside a plan card (Premium only).
Sits directly below the price block; swaps the two price-views above it. */
.mz-plan-bill-seg {
display: inline-flex;
gap: 4px;
background: #F1F5F9;
border-radius: 10px;
padding: 4px;
margin-top: 4px;
}
.mz-plan-bill-seg-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 0;
background: transparent;
color: var(--wiz-muted);
font: inherit;
font-weight: 600;
font-size: 13px;
border-radius: 7px;
cursor: pointer;
transition: background .12s, color .12s, box-shadow .12s;
}
.mz-plan-bill-seg-btn:hover { color: var(--wiz-ink); }
.mz-plan-bill-seg-btn.active {
background: #fff;
color: var(--wiz-ink);
box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.mz-plan-bill-seg-btn .seg-save {
background: #DCFCE7;
color: #16A34A;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Allow the price-view block to wrap or stack inside the card header. */
.mz-plan-price-view {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Explicit override — `display: flex` above otherwise wins over the UA
`[hidden] { display: none }` default, causing BOTH price-views to
render on top of each other (and overlap the toggle buttons). */
.mz-plan-price-view[hidden] { display: none; }
/* Plan-specific opt overrides — bigger card, full feature list */
.mz-plan-opt {
/* desc min-height not needed here; let it grow naturally */
}
.mz-plan-opt .mz-opt-desc { min-height: 0; }
/* Featured plan (Pro = "Most Popular") — DO NOT highlight the whole card
border (looks pre-selected; confuses the user). Just position the badge
centered on the top edge as a floating glowing pill. */
.mz-plan-opt.is-featured {
border-color: var(--wiz-line);
overflow: visible; /* let the badge sit above the top edge */
}
.mz-plan-opt.is-featured .mz-opt-title .badge.blue {
position: absolute;
top: -12px;
inset-inline-start: 50%;
transform: translateX(-50%);
z-index: 1;
padding: 5px 14px;
font-size: 10.5px;
font-weight: 800;
color: #FFFFFF;
/* Vivid blue → violet gradient — solid saturated tone reads at a
glance vs the earlier white-to-pastel fade that blended into the
card background. Ring halo (0 0 0 4px white) still lifts the pill
off the card edge for that "floating" badge feel. */
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
border: none;
border-radius: 999px;
box-shadow:
0 4px 12px rgba(124, 58, 237, 0.45),
0 2px 4px rgba(37, 99, 235, 0.35),
0 0 0 4px rgba(255, 255, 255, 0.95);
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 820px) {
/* Mobile — plan cards stack vertically (single column). Grid gap 14px
minus pill's -12px overhang leaves ~2px between Solo bottom edge and
the "Most Popular" pill's top edge (near-touching). Add margin-top
on the featured card so the effective gap opens up to ~8px above
the pill. */
.mz-plan-opt.is-featured { margin-top: 6px; }
}
.mz-plan-includes-label {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--wiz-muted);
margin: 6px 0 4px;
padding-top: 14px;
border-top: 1px dashed var(--wiz-line);
}
.mz-plan-features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.mz-plan-features li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13.5px;
line-height: 1.45;
color: var(--wiz-ink-2);
}
.mz-plan-features li svg {
flex-shrink: 0;
margin-top: 3px;
color: #16A34A;
}
/* ─── Plan card pricing block (matches /pricing page pattern) ───────── */
.mz-plan-header {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 6px;
}
.mz-plan-header .mz-opt-title {
margin-bottom: 4px;
}
.mz-plan-price {
display: flex;
align-items: baseline;
gap: 6px;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.mz-plan-price .amount {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--wiz-ink);
line-height: 1;
}
.mz-plan-price .unit {
font-size: 14px;
font-weight: 500;
color: var(--wiz-muted);
}
.mz-plan-billed-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 13px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--wiz-line);
}
.mz-plan-billed-row .billed-yearly {
color: var(--wiz-ink-2);
font-weight: 600;
}
.mz-plan-billed-row .save-badge {
background: #DCFCE7;
color: #16A34A;
padding: 2px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.mz-plan-y2-note {
font-size: 12.5px;
color: var(--wiz-muted);
line-height: 1.4;
}
.mz-plan-monthly-option {
font-size: 12.5px;
color: var(--wiz-ink-2);
padding: 8px 10px;
background: var(--wiz-primary-soft);
border-radius: 8px;
line-height: 1.4;
margin-top: 4px;
}
.mz-plan-monthly-option small {
color: var(--wiz-muted);
font-size: 11.5px;
margin-inline-start: 4px;
}
/* ─── "Or pick another state" dropdown ─────────────────────────────── */
.mz-other-states-wrap {
margin-top: 22px;
padding-top: 22px;
border-top: 1px dashed var(--wiz-line);
}
.mz-other-states-label {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--wiz-muted);
margin-bottom: 10px;
}
.mz-other-states-select {
position: relative;
}
.mz-other-states-select select {
width: 100%;
padding: 13px 40px 13px 14px;
font: inherit;
font-size: 14.5px;
color: var(--wiz-ink);
background: #fff;
border: 1.5px solid var(--wiz-line);
border-radius: 10px;
appearance: none;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
.mz-other-states-select select:focus {
outline: none;
border-color: var(--wiz-primary);
box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}
.mz-other-states-caret {
position: absolute;
inset-inline-end: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--wiz-muted);
pointer-events: none;
}
/* ─── Basket sidebar (matches reference .wiz-basket) ───────────────── */
.mz-wizard-basket {
position: sticky;
top: 96px;
align-self: start;
background: #fff;
border: 1px solid var(--wiz-line);
border-radius: var(--wiz-radius-lg);
padding: 24px;
box-shadow: 0 1px 0 rgba(15,23,42,0.02);
}
.mz-wizard-basket h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--wiz-ink);
margin: 0 0 4px;
}
.mz-basket-sub {
font-size: 13px;
color: var(--wiz-muted);
margin-bottom: 8px;
}
.mz-basket-line {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dashed var(--wiz-line);
font-size: 14px;
align-items: flex-start;
}
/* HTML [hidden] attribute would normally drop the element to display:none,
but the explicit display:flex above wins on specificity, leaving the row
visible with empty placeholders (e.g. "Paid to the state at cost" alone
on a fresh basket). Force it back to none when the hidden attr is set. */
.mz-basket-line[hidden] { display: none !important; }
.mz-basket-line:last-of-type { border-bottom: 0; }
.mz-basket-line .label {
color: var(--wiz-ink);
flex: 1;
min-width: 0;
}
.mz-basket-line .label small {
display: block;
color: var(--wiz-muted);
font-size: 12px;
margin-top: 2px;
}
/* Single-line truncation with native tooltip on hover — used for the
entity sub-rows (company_name, purpose) that may be long user input. */
.mz-basket-line .label small.sb-truncate {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.mz-basket-line .label small.sb-truncate[hidden] { display: none; }
.mz-basket-line .label small.sb-muted {
color: var(--wiz-muted);
font-style: italic;
}
/* Founder roster — name left, country right. Sits under company_name +
purpose in the entity meta block. Each row is its own flex line so the
country always right-aligns regardless of name length; name ellipsises
when long, country wraps to its own row only when both are wide. */
.sb-founders { margin-top: 6px; }
.sb-founders[hidden] { display: none; }
.sb-founder-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-size: 12px;
font-weight: 500;
color: var(--wiz-ink);
padding-block: 2px;
}
.sb-founder-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Person silhouette icon — CSS mask owns the SVG so JS/blade markup stays
unchanged. Colour inherits via `background-color: currentColor` (uses
the row's muted tone) and stays crisp at any zoom level. */
.sb-founder-name::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
vertical-align: -1px;
background-color: var(--wiz-muted);
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.sb-founder-country {
color: var(--wiz-muted);
white-space: nowrap;
font-weight: 400;
}
.sb-save-badge {
display: inline-block;
margin-inline-start: 6px;
background: #DCFCE7;
color: #16A34A;
font-size: 10.5px;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
letter-spacing: 0.02em;
vertical-align: baseline;
}
.mz-basket-line .price {
font-weight: 700;
color: var(--wiz-ink);
white-space: nowrap;
}
.mz-basket-line.muted .label,
.mz-basket-line.muted .price {
color: var(--wiz-muted);
font-style: italic;
font-weight: 500;
}
/* Meta line — "what you're forming" summary (entity type + company name +
purpose + founder roster). Soft cool-gray tint (same token as the
secure-checkout footer) groups all user-input rows into one visual
block, distinct from the priced line items below it. */
.mz-basket-line.is-meta {
padding: 12px;
font-size: 13.5px;
font-weight: 600;
color: var(--wiz-ink);
background: var(--wiz-bg);
border-radius: 10px;
border-bottom: 0;
margin-bottom: 10px;
}
.mz-basket-line.is-meta .label { font-weight: 600; }
.mz-basket-totals {
margin-top: 16px;
padding-top: 16px;
border-top: 1.5px solid var(--wiz-line);
}
.mz-basket-totals .row {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 14px;
color: var(--wiz-muted);
}
/* Same [hidden] fix as .mz-basket-line — display:flex would otherwise
override the HTML hidden attribute and leave empty rows visible. */
.mz-basket-totals .row[hidden] { display: none !important; }
.mz-basket-totals .row.grand {
font-size: 15px;
font-weight: 800;
color: var(--wiz-ink);
margin-top: 0;
padding-top: 0;
}
/* "Initial" line: emphasized — what the customer is charged right now. */
.mz-basket-totals .row.grand:first-child {
padding-top: 0;
}
/* Monthly-bills sub-line: lighter weight, second row, shows /mo × 12. */
.mz-basket-totals .row.sub {
font-size: 13px;
color: var(--wiz-muted);
padding-top: 6px;
border-top: 1px dashed var(--wiz-line);
}
.mz-basket-totals .row.sub > span:last-child {
color: var(--wiz-ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Y1 grand-total: same prominence as "Initial" but borders it above for
a clear "this is the year's full picture" summary. */
.mz-basket-totals .row.grand.y1 {
margin-top: 8px;
padding-top: 10px;
border-top: 1.5px solid var(--wiz-line);
}
/* Monthly bills sub-line: tiny faded footnote under the $X/month headline
("for 11 months, total $7,513"). Sits inside .row.grand right column.
Tight + small so it doesn't squeeze the left label into a second line. */
.mz-basket-totals .sb-amount-sub {
font-size: 10px;
font-weight: 400;
color: var(--wiz-muted);
opacity: 0.85;
margin-top: 1px;
white-space: nowrap;
letter-spacing: 0;
}
.mz-basket-totals .sb-amount-sub[hidden] { display: none !important; }
/* Promo edge case ($0.50, $50.50 etc.): integer dollar bold, cents'i
küçük superscript ile aynı satırda. fmtRich() server-side .50 üretir; bu CSS sup'un baseline yüksekliği
ve boyutunu brand integer görünümünden saptırmaz. */
.mz-cents {
font-size: 0.55em;
font-weight: 600;
vertical-align: super;
line-height: 1;
margin-left: 1px;
letter-spacing: 0;
}
/* Year 2+ informational note */
.mz-basket-totals .row.note {
padding-top: 8px;
display: block;
}
.mz-basket-totals .row.note small {
font-size: 12px;
color: var(--wiz-muted);
font-style: italic;
}
.mz-basket-totals .row.grand small {
font-size: 12px;
font-weight: 500;
color: var(--wiz-muted);
display: block;
}
.mz-basket-empty {
color: var(--wiz-muted);
font-size: 13.5px;
font-style: italic;
padding: 12px 0 18px;
border-bottom: 1px dashed var(--wiz-line);
}
.mz-basket-foot {
margin-top: 18px;
font-size: 12px;
color: var(--wiz-muted);
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px;
background: var(--wiz-bg);
border-radius: 10px;
}
.mz-basket-foot svg {
flex-shrink: 0;
margin-top: 1px;
color: #16A34A;
}
/* Start-over link — small, muted, sits below the secure-checkout note. */
.mz-basket-reset {
margin-top: 10px;
text-align: center;
}
.mz-basket-reset a {
font-size: 12px;
color: var(--wiz-muted);
text-decoration: none;
padding: 6px 10px;
border-radius: 6px;
transition: color .12s, background .12s;
}
.mz-basket-reset a:hover {
color: var(--wiz-ink);
background: var(--wiz-bg);
}
/* ─── Buttons ──────────────────────────────────────────────────────── */
.mz-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 24px;
border-radius: 10px;
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
border: 1.5px solid transparent;
cursor: pointer;
transition: background .12s, border-color .12s, transform .05s;
font-family: inherit;
}
.mz-btn-primary {
background: var(--wiz-primary);
color: #fff;
}
.mz-btn-primary:hover { background: #1D4ED8; }
.mz-btn-primary:active { transform: translateY(1px); }
.mz-btn-primary:disabled {
background: #CBD5E1;
cursor: not-allowed;
}
.mz-btn-ghost {
background: #fff;
color: var(--wiz-ink);
border-color: var(--wiz-line);
}
.mz-btn-ghost:hover { border-color: #94A3B8; background: var(--wiz-bg); }
.mz-btn-lg {
padding: 14px 28px;
font-size: 15px;
}
/* ─── Add-on selection (Plan step) ────────────────────────────────────── */
/* Mobile-only accordion header — hidden on desktop; below 820px it takes
the h3/sub out of .mz-addons-block and pairs them with a chevron. */
.mz-addons-mobile-header { display: none; }
.mz-addons-block {
margin-top: 28px;
padding-top: 24px;
border-top: 1px dashed var(--wiz-line);
}
@media (max-width: 820px) {
.mz-addons-mobile-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px dashed var(--wiz-line);
cursor: pointer;
}
.mz-addons-mobile-header-text { flex: 1; min-width: 0; }
.mz-addons-mobile-header-text h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--wiz-ink);
margin: 0 0 4px;
}
.mz-addons-mobile-header-text .mz-addons-sub { margin: 0; }
.mz-addons-chevron {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: none;
border-radius: 10px;
background: transparent;
color: var(--wiz-primary, #2563EB);
cursor: pointer;
transition: background .12s;
/* Heartbeat pulse — same rhythm as plan-card chevron. */
animation: mz-chevron-attn 1.2s ease-in-out 0.5s 4;
}
.mz-addons-chevron[aria-expanded="true"] { animation: none; }
.mz-addons-chevron:hover { background: var(--wiz-line); }
.mz-addons-chevron svg { width: 20px; height: 20px; transition: transform .2s; }
.mz-addons-chevron[aria-expanded="true"] svg { transform: rotate(180deg); }
@keyframes mz-chevron-attn {
0%, 28%, 70%, 100% { transform: scale(1); }
14%, 42% { transform: scale(1.25); }
}
/* Mobile: block collapsed by default; toggle exposes it. Header row
already carries the separator so drop the top border/padding here. */
.mz-addons-block {
display: none;
margin-top: 0;
padding-top: 0;
border-top: none;
}
.mz-addons-block.is-mobile-open { display: block; }
.mz-addons-desktop-only { display: none; }
}
.mz-addons-block h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--wiz-ink);
margin: 0 0 4px;
}
.mz-addons-sub {
font-size: 13px;
color: var(--wiz-muted);
margin: 0 0 14px;
}
.mz-addons-list {
display: grid;
gap: 10px;
margin-top: 14px; /* match .mz-tier-group margin-top so the standalone
list block doesn't butt up against the preceding
tier-group (Orhan 2026-06-01) */
}
.mz-addon-row {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border: 1.5px solid var(--wiz-line);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.mz-addon-row:hover { border-color: #94A3B8; }
.mz-addon-row.is-checked {
border-color: var(--wiz-primary);
background: var(--wiz-primary-soft);
}
.mz-addon-checkbox {
margin: 2px 0 0;
width: 18px;
height: 18px;
accent-color: var(--wiz-primary);
cursor: pointer;
}
.mz-addon-body {
flex: 1;
min-width: 0;
}
.mz-addon-name {
font-size: 14.5px;
font-weight: 600;
color: var(--wiz-ink);
}
.mz-addon-desc {
font-size: 12.5px;
color: var(--wiz-muted);
margin-top: 4px;
line-height: 1.4;
}
.mz-addon-price {
text-align: end;
font-size: 14.5px;
font-weight: 700;
color: var(--wiz-ink);
white-space: nowrap;
flex-shrink: 0;
}
.mz-addon-price small {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--wiz-muted);
margin-top: 2px;
}
/* Hybrid (bm=4) sub-line — "billed annually $X · $Y deposit + 11 × $Z" */
.mz-addon-price-sub {
font-size: 10.5px;
font-weight: 500;
color: var(--wiz-muted);
margin-top: 4px;
line-height: 1.4;
max-width: 220px;
white-space: normal;
text-align: end;
}
/* Bundled add-on (already in selected plan — checked + disabled, success tint) */
.mz-addon-row.is-bundled {
border-color: #BBF7D0;
background: #F0FDF4;
cursor: not-allowed;
}
.mz-addon-row.is-bundled:hover {
border-color: #BBF7D0; /* override hover-grey */
}
.mz-addon-row.is-bundled .mz-addon-checkbox {
accent-color: #16A34A; /* green check instead of blue */
cursor: not-allowed;
opacity: 1; /* keep visible (don't fade) */
}
.mz-addon-row.is-bundled .mz-addon-name,
.mz-addon-row.is-bundled .mz-addon-desc {
color: var(--wiz-ink-2);
}
.mz-addon-bundled-tag {
display: inline-block;
background: #DCFCE7;
color: #16A34A;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* ─── Solo risk warning block (Plan step, only when Solo selected) ─── */
.mz-solo-risk {
margin: 22px 0 8px;
padding: 18px 20px;
border: 1.5px solid #FCD34D;
background: #FFFBEB;
border-radius: 14px;
}
.mz-solo-risk h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: #92400E;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.mz-solo-risk-list {
margin: 0;
padding-left: 20px;
font-size: 13px;
line-height: 1.55;
color: #78350F;
}
.mz-solo-risk-list li { margin-bottom: 6px; }
.mz-solo-risk-list li:last-child { margin-bottom: 0; }
.mz-solo-risk-list strong { color: #92400E; }
.mz-solo-risk-recommend {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed #FCD34D;
font-size: 13px;
color: #78350F;
}
.mz-solo-risk-recommend > strong {
display: block;
margin-bottom: 10px;
color: #92400E;
}
.mz-solo-risk-quickadd {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mz-solo-quick-btn {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 8px 12px;
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--wiz-primary);
background: #fff;
border: 1.5px solid var(--wiz-primary);
border-radius: 10px;
cursor: pointer;
transition: background .12s, color .12s;
}
.mz-solo-quick-btn:hover { background: var(--wiz-primary); color: #fff; }
/* ─────────────────────────────────────────────────────────────────────
Tax Package — sales / confirmation box + entity-aware checkbox group
(SQL 245 + Smith #2). Red CTA when unbundled (Solo); green confirm
when bundled (Pro/Premium). Renders above the standalone add-on list.
───────────────────────────────────────────────────────────────────── */
.mz-tax-pkg-alert {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 16px 0;
padding: 16px 18px;
border: 1.5px solid #FCA5A5;
background: linear-gradient(0deg, #FEF2F2, #FFF7F7);
border-radius: 14px;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.mz-tax-pkg-alert-icon {
font-size: 24px;
line-height: 1;
flex: 0 0 auto;
}
.mz-tax-pkg-alert-body { flex: 1 1 auto; min-width: 0; }
.mz-tax-pkg-alert-body strong {
display: block;
font-size: 15px;
font-weight: 700;
color: #991B1B;
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.mz-tax-pkg-alert-body p {
margin: 4px 0;
font-size: 13px;
line-height: 1.55;
color: #7F1D1D;
}
.mz-tax-pkg-alert-rec {
margin-top: 8px !important;
padding-top: 8px;
border-top: 1px dashed #FCA5A5;
}
.mz-tax-pkg-alert-rec strong {
display: inline !important;
font-size: 13px !important;
margin: 0 !important;
}
.mz-tax-pkg-confirm {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 16px 0;
padding: 14px 18px;
border: 1.5px solid #86EFAC;
background: linear-gradient(0deg, #F0FDF4, #F7FFF9);
border-radius: 14px;
}
.mz-tax-pkg-confirm-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.mz-tax-pkg-confirm-body { flex: 1 1 auto; }
.mz-tax-pkg-confirm-body strong {
display: block;
font-size: 14.5px;
font-weight: 700;
color: #14532D;
margin-bottom: 4px;
}
.mz-tax-pkg-confirm-body p {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: #166534;
}
.mz-tax-pkg-confirm-body em {
font-style: normal;
font-weight: 600;
color: #14532D;
}
/* The tax_pkg checkbox group block (above standalone add-ons). */
.mz-tax-pkg-group { margin: 14px 0 18px; }
.mz-tax-pkg-group-head {
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
color: #7F1D1D;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mz-addon-row.is-tax-pkg-highlight {
border: 1.5px solid #FCA5A5;
background: #FFF7F7;
box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.mz-addon-row.is-tax-pkg-highlight:hover {
border-color: #F87171;
background: #FEF2F2;
}
.mz-addon-row.is-tax-pkg-highlight.is-checked {
border-color: #16A34A;
background: #F0FDF4;
}
.mz-addon-row.is-tax-pkg-highlight.is-bundled {
border-color: #86EFAC;
background: #F0FDF4;
}
.mz-addon-row.is-tax-pkg-highlight .mz-addon-desc {
font-size: 12.5px;
line-height: 1.5;
color: #6B7280;
margin-top: 4px;
}
/* Per-owner obligations inside the tax_pkg checkbox row — matches the
/my/company "Per-member federal tax obligations" block format. Font sizes
harmonized with the surrounding addon-desc (12.5px) so it doesn't stand
out from other add-on rows. */
.mz-tax-pkg-members {
list-style: none;
margin: 8px 0 0;
padding: 0;
font-size: 12px;
line-height: 1.5;
color: var(--wiz-muted);
}
.mz-tax-pkg-member {
padding: 8px 10px;
margin-top: 6px;
background: #FAFAFA;
border-radius: 6px;
}
.mz-tax-pkg-member:first-child { margin-top: 0; }
.mz-tax-pkg-member-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 5px;
margin-bottom: 4px;
}
.mz-tax-pkg-member-head strong {
color: #1F2937;
font-weight: 600;
font-size: 12.5px;
}
.mz-tax-pkg-member-primary {
display: inline-block;
padding: 0 6px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #4338CA;
background: #EEF2FF;
border-radius: 999px;
line-height: 1.6;
}
.mz-tax-pkg-member-country {
color: #64748B;
font-size: 11.5px;
font-weight: 500;
}
.mz-tax-pkg-member-obl {
font-size: 11.5px;
line-height: 1.5;
color: #475569;
margin-top: 2px;
padding-left: 10px;
position: relative;
}
.mz-tax-pkg-member-obl::before {
content: "•";
position: absolute;
left: 0;
color: #94A3B8;
}
.mz-tax-pkg-member-dl {
font-size: 11px;
line-height: 1.5;
color: #B45309;
margin-top: 4px;
font-weight: 500;
}
.mz-solo-quick-btn:disabled,
.mz-solo-quick-btn.is-added {
background: #DCFCE7;
border-color: #BBF7D0;
color: #16A34A;
cursor: default;
}
.mz-solo-quick-btn small {
font-size: 11px;
font-weight: 500;
opacity: .85;
}
/* ─── Tier-grouped add-ons (radio dropdown, mutex selection) ───────── */
.mz-tier-group {
margin-top: 14px;
padding: 14px 16px;
border: 1.5px solid var(--wiz-line);
border-radius: 12px;
background: #fff;
}
.mz-tier-head {
margin-bottom: 10px;
}
.mz-tier-head strong {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--wiz-ink);
}
.mz-tier-head small {
display: block;
font-size: 12px;
color: var(--wiz-muted);
margin-top: 2px;
}
.mz-tier-options {
display: grid;
gap: 8px;
}
.mz-tier-opt {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1.5px solid var(--wiz-line);
border-radius: 10px;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.mz-tier-opt:hover { border-color: #94A3B8; }
.mz-tier-opt.is-checked {
border-color: var(--wiz-primary);
background: var(--wiz-primary-soft);
}
.mz-tier-opt input[type="radio"] {
margin: 0;
width: 16px;
height: 16px;
accent-color: var(--wiz-primary);
cursor: pointer;
}
.mz-tier-opt > span {
flex: 1;
font-size: 14px;
color: var(--wiz-ink);
}
.mz-tier-opt > span em {
font-style: normal;
font-weight: 600;
color: var(--wiz-ink-2);
margin-left: 4px;
}
.mz-tier-opt > small {
font-size: 13px;
font-weight: 600;
color: var(--wiz-ink);
white-space: nowrap;
}
.mz-tier-opt.is-bundled {
border-color: #BBF7D0;
background: #F0FDF4;
cursor: not-allowed;
}
.mz-tier-opt.is-bundled:hover { border-color: #BBF7D0; }
.mz-tier-opt.is-bundled input[type="radio"] {
accent-color: #16A34A;
cursor: not-allowed;
}
/* Locked tier — lower than the plan's bundled level, OR "None" when a tier
is bundled. Visually muted, no hover lift, pointer disabled. */
.mz-tier-opt.is-locked {
background: #F8FAFC;
border-color: #E2E8F0;
cursor: not-allowed;
opacity: 0.6;
}
.mz-tier-opt.is-locked:hover { border-color: #E2E8F0; }
.mz-tier-opt.is-locked input[type="radio"] {
cursor: not-allowed;
opacity: 0.6;
}
.mz-tier-opt.is-locked > span,
.mz-tier-opt.is-locked > small {
color: var(--wiz-muted);
}
/* Remove-extra (×) button — shown on a checked tier that sits ABOVE the
bundled tier. Click reverts the basket to the bundled-only state. */
.mz-tier-opt.has-remove > small { margin-inline-end: 4px; }
.mz-tier-remove-extra {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-inline-start: 4px;
padding: 0;
border: 1.5px solid #FCA5A5;
border-radius: 50%;
background: #fff;
color: #DC2626;
font-size: 16px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.mz-tier-remove-extra:hover {
background: #FEF2F2;
border-color: #DC2626;
}
.mz-tier-remove-extra:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ─── Form fields (Details, Owners, Promo) ───────────────────────────── */
.mz-field {
margin-bottom: 18px;
}
.mz-field label {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--wiz-ink);
margin-bottom: 6px;
}
.mz-field input[type="text"],
.mz-field input[type="email"],
.mz-field textarea,
.mz-field select {
width: 100%;
padding: 12px 14px;
font: inherit;
font-size: 14.5px;
border: 1.5px solid var(--wiz-line);
border-radius: 10px;
background: #fff;
color: var(--wiz-ink);
transition: border-color .12s, box-shadow .12s;
}
.mz-field input:focus,
.mz-field textarea:focus,
.mz-field select:focus {
outline: none;
border-color: var(--wiz-primary);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.mz-field textarea {
min-height: 80px;
resize: vertical;
line-height: 1.5;
}
.mz-field small {
display: block;
margin-top: 6px;
color: var(--wiz-muted);
font-size: 12.5px;
}
.mz-owner-block {
border: 1px solid var(--wiz-line);
border-radius: 12px;
padding: 18px 20px;
margin-bottom: 16px;
background: #fff;
}
.mz-owner-block legend, .mz-owner-block summary {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
font-size: 13.5px;
color: var(--wiz-ink);
padding: 0 6px;
cursor: default;
width: 100%;
}
.mz-owner-block legend small {
font-weight: 500;
color: var(--wiz-muted);
margin-inline-start: 4px;
}
.mz-owner-remove {
background: none;
border: 1px solid var(--wiz-line);
border-radius: 999px;
width: 22px;
height: 22px;
font-size: 12px;
color: var(--wiz-muted);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color .12s, color .12s, background .12s;
}
.mz-owner-remove:hover {
border-color: #DC2626;
color: #DC2626;
background: #FEF2F2;
}
.mz-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 820px) {
/* Mobile — Owners step first/last + citizenship/residence pairs stack.
820px altında two-col label+field kalıbı sıkışıp select'in ülke adı
kesiliyor, dikey noodle görünümü çıkıyor. Match .mz-opt-grid /
.mz-formation-toggle mobile behavior. */
.mz-field-row { grid-template-columns: 1fr; }
}
.mz-owner-add-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin: 4px 0 18px;
}
.mz-btn.mz-btn-add {
font-size: 13px;
padding: 8px 14px;
}
.mz-btn.mz-btn-add:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mz-owner-add-row small {
color: var(--wiz-muted);
font-size: 12px;
}
details.mz-owner-block summary {
cursor: pointer;
list-style: none;
margin: -18px -20px -6px;
padding: 14px 20px;
}
details.mz-owner-block summary::-webkit-details-marker { display: none; }
details.mz-owner-block summary::after {
content: '+';
float: right;
font-weight: 400;
color: var(--wiz-muted);
}
details.mz-owner-block[open] summary { margin-bottom: 12px; }
details.mz-owner-block[open] summary::after { content: '−'; }
/* ─── Review step ───────────────────────────────────────────────────── */
.mz-review-section {
margin-bottom: 22px;
}
.mz-review-section h4 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--wiz-muted);
margin: 0 0 10px;
}
.mz-review-section h4 a {
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-weight: 600;
color: var(--wiz-primary);
text-decoration: none;
}
.mz-review-section h4 a:hover { text-decoration: underline; }
.mz-review-body {
background: var(--wiz-bg);
border-radius: 12px;
padding: 16px 18px;
font-size: 14px;
line-height: 1.6;
color: var(--wiz-ink);
}
/* Owner row — numbered badge + name + soft country pill. */
.mz-review-owner {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
border-bottom: 1px dashed var(--wiz-line);
}
.mz-review-owner:last-child { border-bottom: 0; padding-bottom: 0; }
.mz-review-owner:first-child { padding-top: 0; }
.mz-review-owner-num {
flex: 0 0 22px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--wiz-primary-soft, #DBEAFE);
color: var(--wiz-primary, #2563EB);
font-size: 11.5px; font-weight: 700;
display: inline-grid; place-items: center;
}
.mz-review-owner strong {
font-weight: 600;
color: var(--wiz-ink);
}
.mz-review-owner-country {
margin-inline-start: auto;
font-size: 12.5px;
color: var(--wiz-muted);
background: #F1F5F9;
padding: 3px 10px;
border-radius: 999px;
}
/* Promo segmented input — flush-joined to the Apply button so the pair
reads as a single chip. Mirror palette of other wizard buttons. */
.mz-promo {
display: flex;
align-items: stretch;
gap: 0;
max-width: 420px;
border: 1.5px solid var(--wiz-line);
border-radius: 10px;
overflow: hidden;
background: #fff;
transition: border-color .12s, box-shadow .12s;
}
/* Browser UA stylesheet `[hidden]{display:none}` has the same specificity
as our class selectors above (.mz-promo / .mz-promo-applied); site CSS
loads after UA so our `display:flex|inline-flex` rules win and leave
the chip + form visible even when blade emits the HTML `hidden`
attribute. Targeted overrides restore the expected toggle. */
.mz-promo[hidden],
.mz-promo-applied[hidden] { display: none; }
.mz-promo:focus-within {
border-color: var(--wiz-primary, #2563EB);
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.mz-promo-input {
flex: 1;
border: 0;
background: transparent;
padding: 11px 14px;
font: inherit;
font-size: 14px;
color: var(--wiz-ink);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mz-promo-input::placeholder { color: var(--wiz-muted); letter-spacing: 0; text-transform: none; }
.mz-promo-input:focus { outline: none; }
.mz-promo-apply {
border: 0;
border-inline-start: 1.5px solid var(--wiz-line);
background: var(--wiz-bg);
padding: 0 18px;
font: inherit;
font-size: 13.5px;
font-weight: 600;
color: var(--wiz-ink);
cursor: pointer;
transition: background .12s, color .12s;
}
.mz-promo-apply:hover { background: var(--wiz-primary, #2563EB); color: #fff; }
.mz-promo-apply:disabled { opacity: 0.6; cursor: not-allowed; }
.mz-promo-feedback {
display: block;
margin-top: 8px;
font-size: 12.5px;
color: var(--wiz-muted);
min-height: 14px;
}
/* Applied-promo chip — replaces the input + Apply button when a promo
is active on the basket. Code on the left, discount in the middle,
X remove button on the right. Click X → POST my-basket-remove-promo
→ reload so the sidebar + Plan-step bundled-credit lines re-derive. */
.mz-promo-applied {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 8px 8px 14px;
background: #ECFDF5;
border: 1px solid #A7F3D0;
border-radius: 8px;
font-size: 13px;
line-height: 1.2;
}
.mz-promo-applied-code {
font-weight: 700;
letter-spacing: 0.04em;
color: #047857;
text-transform: uppercase;
}
.mz-promo-applied-discount {
color: #065F46;
font-weight: 600;
}
.mz-promo-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-inline-start: 4px;
padding: 0;
font-size: 17px;
line-height: 1;
font-weight: 600;
color: #047857;
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.mz-promo-remove:hover {
background: #D1FAE5;
border-color: #6EE7B7;
color: #064E3B;
}
.mz-promo-remove:disabled { opacity: 0.5; cursor: not-allowed; }
/* ─── Payment step ──────────────────────────────────────────────────── */
.mz-payment-section {
margin-bottom: 22px;
}
.mz-payment-section h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--wiz-ink);
margin: 0 0 4px;
}
.mz-payment-section-sub {
font-size: 13px;
color: var(--wiz-muted);
margin: 0 0 14px;
}
/* Billing address fields — Stripe-like compact form. Tighter padding,
smaller labels, single-line fields where the country structure groups
them via .mz-field-row (POSTAL_CODE+CITY etc, mirrors company-onboarding
pairedFields). */
/* Stripe-style stacked address: all fields connected. First field
(country) has only top corners rounded; intermediate fields have
no rounded corners; last field has only bottom corners rounded.
No visible labels — placeholders carry the field meaning.
(Orhan 2026-05-17: country label off, gap 0 everywhere, Stripe joined-stack.) */
/* All dynamic billing fields square + no top border (joined to the one above).
Last field's bottom corners get rounded via :last-child rules below. */
#mz-billing-fields .mz-field { margin-bottom: 0; }
#mz-billing-fields .mz-field label { display: none; }
#mz-billing-fields .mz-field input[type="text"],
#mz-billing-fields .mz-field select {
padding: 9px 12px;
font-size: 14px;
border: 1px solid #E5E7EB;
border-top: 0; /* joined to the field above */
border-radius: 0; /* default square; first/last override */
background: #fff;
color: var(--wiz-ink);
transition: border-color .12s, box-shadow .12s;
line-height: 1.3;
width: 100%;
}
#mz-billing-fields .mz-field input[type="text"]:focus,
#mz-billing-fields .mz-field select:focus {
outline: none;
border-color: #635BFF;
box-shadow: 0 0 0 3px rgba(99,91,255,0.18);
position: relative;
z-index: 1;
}
#mz-billing-fields .mz-field input::placeholder { color: #9CA3AF; }
#mz-billing-fields .mz-field-row { gap: 0; margin-bottom: 0; }
/* Last DYNAMIC field — bottom corners rounded. Two cases:
a) single field is last → both bottom corners on its input
b) paired row is last → left field's bottom-left + right field's bottom-right */
#mz-billing-fields > .mz-field:last-child input[type="text"],
#mz-billing-fields > .mz-field:last-child select {
border-radius: 0 0 8px 8px;
}
#mz-billing-fields > .mz-field-row:last-child > .mz-field:first-child input[type="text"],
#mz-billing-fields > .mz-field-row:last-child > .mz-field:first-child select {
border-radius: 0 0 0 8px;
}
#mz-billing-fields > .mz-field-row:last-child > .mz-field:last-child input[type="text"],
#mz-billing-fields > .mz-field-row:last-child > .mz-field:last-child select {
border-radius: 0 0 8px 0;
}
/* Country select — top of the stack: top corners rounded only, no gap below. */
#mz-billing-country {
padding: 9px 12px;
font-size: 14px;
border: 1px solid #E5E7EB;
border-radius: 8px 8px 0 0;
background: #fff;
width: 100%;
transition: border-color .12s, box-shadow .12s;
}
#mz-billing-country:focus {
outline: none;
border-color: #635BFF;
box-shadow: 0 0 0 3px rgba(99,91,255,0.18);
position: relative;
z-index: 1;
}
#mz-billing-address-form > .mz-field:first-child { margin-bottom: 0; }
#mz-billing-address-form > .mz-field:first-child label { display: none; }
/* 2-col layout 50:50 — Payment LEFT + Billing address RIGHT on desktop;
single column (Payment on top) on mobile. DOM order = mobile order. */
.mz-payment-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
/* Plan 181 v2 — recipient + saved-address picker labels are full
multi-line address strings, so the inner grid stacks earlier (1100px)
to give each column enough horizontal room. */
@media (max-width: 1100px) {
.mz-payment-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* Long country-aware labels wrap inside the radio row instead of
pushing the layout. */
.mz-saved-address-label,
.mz-recipient-name,
.mz-recipient-sub {
overflow-wrap: anywhere;
word-break: break-word;
}
.mz-recipient-option { grid-template-columns: 18px minmax(0, 1fr) auto; }
.mz-saved-address-row { grid-template-columns: 18px minmax(0, 1fr); }
/* Payment-step last-chance upsells. Outer container is a soft amber
dashed box that frames the group as "you missed these — add before you
pay". Inner cards are white so they pop inside the amber field; each
card flips to soft green when Added. margin-top compensates for the
22px bottom margin on .mz-payment-section so the visible gap above
the block lands at ~40px (matches the gap below). */
.mz-payment-upsells {
margin-top: 5px;
margin-bottom: 40px;
padding: 18px 18px 16px;
background: #FFFBEB;
border: 2px dashed #F59E0B;
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mz-payment-upsells-heading {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: #78350F;
letter-spacing: -0.005em;
}
.mz-upsell-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 16px 18px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #FDE68A;
border-left: 5px solid #F59E0B;
transition: background 200ms ease, border-color 200ms ease;
}
.mz-upsell-card[data-state="added"] {
background: #ECFDF5;
border-color: #6EE7B7;
border-left-color: #10B981;
}
.mz-upsell-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: #FEF3C7;
color: #92400E;
flex-shrink: 0;
}
.mz-upsell-card[data-state="added"] .mz-upsell-icon {
background: #D1FAE5;
color: #065F46;
}
.mz-upsell-body { min-width: 0; }
.mz-upsell-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 4px;
}
.mz-upsell-title {
font-weight: 700;
font-size: 14.5px;
color: var(--wiz-ink);
}
.mz-upsell-price {
font-weight: 700;
color: var(--wiz-ink);
font-size: 14px;
white-space: nowrap;
}
.mz-upsell-price small {
font-weight: 500;
color: var(--wiz-muted);
margin-left: 2px;
}
.mz-upsell-warning,
.mz-upsell-success {
font-size: 12.5px;
line-height: 1.5;
margin: 0;
}
.mz-upsell-warning { color: #78350F; }
.mz-upsell-success {
color: #065F46;
display: none;
align-items: center;
gap: 6px;
}
.mz-upsell-success svg { flex-shrink: 0; }
.mz-upsell-card[data-state="added"] .mz-upsell-warning { display: none; }
.mz-upsell-card[data-state="added"] .mz-upsell-success { display: inline-flex; }
.mz-upsell-cta {
flex-shrink: 0;
white-space: nowrap;
padding: 4px 10px; /* 4px vertical inner padding per Orhan 2026-06-01 */
font-size: 11.5px; /* smaller so it doesn't visually compete with Pay Now */
border-radius: 8px;
}
/* tax_pkg upsell on /step=payment reuses the .mz-upsell-card layout
for visual symmetry with the unique_suite card — same icon-left +
body-center + price-top-right + CTA-right structure. The per-member
obligation list (Orhan 2026-06-01) is the only tax_pkg-specific
content, appended inside .mz-upsell-body under the warning text.
Compact styling so the card height stays comparable to its sibling. */
.mz-upsell-members {
list-style: none;
margin: 8px 0 0;
padding: 8px 10px;
background: #FFFBEB;
border: 1px solid #FDE68A;
border-radius: 8px;
font-size: 12px;
line-height: 1.45;
}
.mz-upsell-members .mz-tax-pkg-member { padding: 4px 0; }
.mz-upsell-members .mz-tax-pkg-member + .mz-tax-pkg-member {
border-top: 1px dashed #FDE68A;
}
.mz-upsell-members .mz-tax-pkg-member-head {
font-size: 12.5px;
color: #78350F;
margin-bottom: 2px;
}
.mz-upsell-members .mz-tax-pkg-member-head strong { color: #92400E; font-weight: 700; }
.mz-upsell-members .mz-tax-pkg-member-primary {
display: inline-block;
margin-left: 4px;
padding: 0 5px;
background: #FEF3C7;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
color: #92400E;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mz-upsell-members .mz-tax-pkg-member-country { color: #92400E; }
.mz-upsell-members .mz-tax-pkg-member-obl,
.mz-upsell-members .mz-tax-pkg-member-dl {
color: #78350F;
font-size: 11.5px;
line-height: 1.4;
}
.mz-upsell-members .mz-tax-pkg-member-dl { color: #B45309; }
.mz-upsell-added {
display: none;
align-items: center;
gap: 6px;
color: #065F46;
font-weight: 700;
font-size: 13px;
white-space: nowrap;
padding: 8px 14px;
}
.mz-upsell-card[data-state="added"] .mz-upsell-cta { display: none; }
.mz-upsell-card[data-state="added"] .mz-upsell-added { display: inline-flex; }
@media (max-width: 600px) {
.mz-upsell-card {
grid-template-columns: auto 1fr;
gap: 12px;
}
.mz-upsell-cta,
.mz-upsell-added {
grid-column: 1 / -1;
justify-self: stretch;
text-align: center;
}
}
/* Trust badge — independent footer image below the action row. No
background or copy; the artwork carries the message. Width-driven so
it fills the wrap on every viewport (desktop / tablet / mobile);
height is automatic so aspect ratio (808×264 native) is preserved. */
.mz-trust-badge-wrap {
margin-top: 50px;
}
.mz-trust-badge-wrap .trust-badges {
display: block;
width: 100%;
max-width: 808px;
height: auto;
margin: 0 auto;
}
/* Card holder name — same Stripe-like compact style as billing fields. */
.mz-payment-card .mz-field { margin: 0 0 14px; }
.mz-payment-card .mz-field label {
display: block;
font-size: 12px; font-weight: 600;
color: var(--wiz-muted);
margin-bottom: 4px;
letter-spacing: 0.01em;
}
.mz-payment-card .mz-field input {
width: 100%;
padding: 9px 12px;
font: inherit;
font-size: 14px;
border: 1px solid #E5E7EB;
border-radius: 8px;
background: #fff;
color: var(--wiz-ink);
transition: border-color .12s, box-shadow .12s;
}
.mz-payment-card .mz-field input:focus {
outline: none;
border-color: #635BFF;
box-shadow: 0 0 0 3px rgba(99,91,255,0.18);
}
.mz-payment-card .mz-field input::placeholder { color: #9CA3AF; }
/* ── Formation toggle (New LLC vs Existing LLC) ── */
.mz-formation-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 12px 0 24px;
}
@media (max-width: 820px) {
/* Mobile — stack single column. Two-column layout squeezes long copy
("Transfer an existing…") into vertical noodle cards. Meta ads
traffic %74 mobile — clean stack is non-negotiable. */
.mz-formation-toggle { grid-template-columns: 1fr; }
}
.mz-formation-tab {
position: relative;
display: block;
padding-block: 14px;
padding-inline-start: 44px;
padding-inline-end: 18px;
border: 1.5px solid var(--wiz-line);
border-radius: 12px;
cursor: pointer;
background: #fff;
transition: border-color .12s, background .12s;
}
.mz-formation-tab::before {
content: "";
position: absolute;
top: 16px;
inset-inline-start: 14px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1.5px solid #CBD5E1;
background: #fff;
transition: border-color .15s, background-color .15s, background-image .15s;
}
.mz-formation-tab:hover { border-color: #94A3B8; }
.mz-formation-tab.is-active {
border-color: var(--wiz-primary);
background: var(--wiz-primary-soft);
}
.mz-formation-tab.is-active::before,
.mz-formation-tab:has(input:checked)::before {
border-color: var(--wiz-primary);
background-color: var(--wiz-primary);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: center;
}
.mz-formation-tab input { position: absolute; opacity: 0; pointer-events: none; }
.mz-formation-tab span {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--wiz-ink);
margin-bottom: 4px;
}
.mz-formation-tab small {
display: block;
font-size: 12.5px;
color: var(--wiz-muted);
line-height: 1.4;
}
/* ── C-Corp single-shareholder advisory ── */
.mz-ccorp-advisory {
margin: 14px 0 4px;
padding: 14px 18px;
border: 1.5px solid #BFDBFE;
background: #EFF6FF;
border-radius: 12px;
font-size: 13.5px;
line-height: 1.55;
color: #1E3A8A;
}
.mz-ccorp-advisory strong { color: #1E3A8A; }
.mz-ccorp-advisory ul {
margin: 8px 0 0 18px;
padding: 0;
font-size: 13px;
}
.mz-payment-card {
background: #fff;
border: 1px solid var(--wiz-line);
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
}
/* Stripe Card Element mount-point — same compact bordered-box look as
AmerikaHizmetleri (mirrors #card-element- in ah-stripe.js).
Card Element renders without its own border, so the container provides
the bordered-input look. Focus state via JS-toggled class. */
#mz-payment-element {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 11px 12px;
min-height: 40px;
transition: border-color .12s, box-shadow .12s;
}
#mz-payment-element.StripeElement--focus,
#mz-payment-element.is-focus {
border-color: #635BFF;
box-shadow: 0 0 0 3px rgba(99,91,255,0.18);
}
#mz-payment-element.StripeElement--invalid {
border-color: #dc2626;
}
.mz-payment-error {
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
background: #FEE2E2;
color: #991B1B;
font-size: 13.5px;
}
/* ─── Action row at step bottom ─────────────────────────────────────── */
.mz-wizard-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--wiz-line);
}
/* ---------------------------------------------------------------------
Plan 181 — wizard recipient picker on /step=payment. Login user +
each basket.items_json.owners entry as radio rows.
------------------------------------------------------------------ */
.mz-recipient-picker { margin-bottom: 12px; }
.mz-recipient-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.mz-recipient-option {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--wiz-line);
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.mz-recipient-option:hover { border-color: var(--wiz-line-strong, #cbd5e1); }
.mz-recipient-option input[type="radio"] { margin: 0; }
.mz-recipient-name { font-size: 13.5px; font-weight: 600; color: var(--wiz-ink); }
.mz-recipient-sub { font-size: 12px; color: var(--wiz-muted); }
.mz-recipient-option:has(input:checked) {
border-color: #2563EB;
box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}
/* Billing address heading aligns with Payment method heading in the
parallel column — top margin removed (Orhan 2026-06-15). The Bill-to
picker above already carries its own bottom spacing. */
.mz-payment-section-h3-spaced {
margin-top: 0 !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--wiz-ink);
margin-bottom: 4px;
}
/* Plan 181 v2 — saved-addresses radio picker per recipient. */
.mz-saved-addresses {
margin-bottom: 14px;
padding: 10px 12px;
border: 1px solid var(--wiz-line);
border-radius: 8px;
background: #FAFBFD;
}
.mz-saved-addresses-list { display: flex; flex-direction: column; gap: 6px; }
.mz-saved-address-row {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--wiz-line);
border-radius: 6px;
background: #fff;
cursor: pointer;
font-size: 13px;
}
.mz-saved-address-row:hover { border-color: #2563EB; }
.mz-saved-address-row input[type="radio"] { margin: 0; }
.mz-saved-address-label { font-weight: 600; color: var(--wiz-ink); }
.mz-saved-address-sub { font-size: 11.5px; color: var(--wiz-muted); }
.mz-saved-address-row:has(input:checked) {
border-color: #2563EB;
box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}
.mz-saved-address-new {
margin-top: 6px;
background: #F8FAFC;
border-style: dashed;
}
/* Plan 181 v2 — "✓ saved" pill on recipient options whose draft already
has data, so the customer can tell which recipients they've typed an
address for. */
.mz-recipient-saved-pill {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 8px;
background: #ECFDF5;
color: #047857;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Plan 181 v2 — explicit "Save address" button below the billing fields.
Lets the customer confirm "I'm done with this recipient" before
switching, and also signals success after auto-save. */
.mz-billing-save-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.mz-billing-save-btn {
padding: 6px 14px;
border: 1px solid var(--wiz-line);
border-radius: 8px;
background: #fff;
color: var(--wiz-ink);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s;
}
.mz-billing-save-btn:hover {
border-color: #2563EB;
color: #2563EB;
}
.mz-billing-save-btn.is-saved {
background: #ECFDF5;
border-color: #6EE7B7;
color: #047857;
}
.mz-billing-save-hint {
font-size: 11.5px;
color: var(--wiz-muted);
flex: 1 1 220px;
}
/* ═══════════════════════════════════════════════════════════════════
Plan cards — tier-themed pixel-perfect design
Source: __designs/choose-your-service-plan-v2.png
Scope: only cards carrying .tier-solo | .tier-pro | .tier-premium.
Untierd cards keep the legacy .mz-plan-opt look above.
═══════════════════════════════════════════════════════════════════ */
.mz-plan-grid { gap: 20px; }
.mz-plan-opt.tier-solo,
.mz-plan-opt.tier-pro,
.mz-plan-opt.tier-premium {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 26px 22px 22px;
background: #FFFFFF;
border-width: 1px;
border-style: solid;
border-radius: 20px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
transition: border-color .15s, box-shadow .15s;
cursor: pointer;
}
/* Tier colour tokens */
.mz-plan-opt.tier-solo {
--tier-main: #3B82F6;
--tier-strong: #2563EB;
--tier-soft: #EFF6FF;
--tier-soft-2: #DBEAFE;
--tier-border: #DBEAFE;
--tier-ink: #1D4ED8;
}
.mz-plan-opt.tier-pro {
--tier-main: #8B5CF6;
--tier-strong: #7C3AED;
--tier-soft: #F5F3FF;
--tier-soft-2: #EDE9FE;
--tier-border: #DDD6FE;
--tier-ink: #6D28D9;
}
.mz-plan-opt.tier-premium {
--tier-main: #06B6D4;
--tier-strong: #0891B2;
--tier-soft: #ECFEFF;
--tier-soft-2: #CFFAFE;
--tier-border: #A5F3FC;
--tier-ink: #0E7490;
}
.mz-plan-opt.tier-solo,
.mz-plan-opt.tier-pro,
.mz-plan-opt.tier-premium { border-color: var(--tier-border); }
.mz-plan-opt.tier-solo:hover,
.mz-plan-opt.tier-pro:hover,
.mz-plan-opt.tier-premium:hover {
border-color: var(--tier-main);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.mz-plan-opt.tier-solo:has(input:checked),
.mz-plan-opt.tier-pro:has(input:checked),
.mz-plan-opt.tier-premium:has(input:checked) {
border-color: var(--tier-main);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
/* Icon tile (top-left) */
.mz-plan-opt .mz-plan-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--tier-soft-2);
color: var(--tier-main);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mz-plan-opt .mz-plan-icon svg { width: 22px; height: 22px; }
/* Title / sub / chip */
.mz-plan-opt .mz-plan-title {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
color: #0F172A;
line-height: 1.15;
margin: 6px 0 0;
}
.mz-plan-opt .mz-plan-sub {
font-size: 13px;
color: #64748B;
font-weight: 500;
margin: 0;
}
.mz-plan-opt .mz-plan-chip {
align-self: flex-start;
padding: 5px 11px;
border-radius: 999px;
background: var(--tier-soft-2);
color: var(--tier-ink);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.2;
}
/* Body copy */
.mz-plan-opt .mz-plan-body {
font-size: 13.5px;
color: #475569;
line-height: 1.55;
margin: 0;
font-weight: 400;
}
/* Guarantee row (green check) */
.mz-plan-opt .mz-plan-guarantee {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 10px 12px;
background: #F0FDF4;
border: 1px solid #BBF7D0;
border-radius: 10px;
font-size: 12.5px;
color: #14532D;
font-weight: 500;
line-height: 1.45;
}
.mz-plan-opt .mz-plan-guarantee svg {
width: 16px;
height: 16px;
color: #16A34A;
flex-shrink: 0;
margin-top: 1px;
}
/* Price block */
.mz-plan-opt .mz-plan-pay-label {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #64748B;
margin-bottom: 4px;
line-height: 1.2;
}
.mz-plan-opt.tier-solo .mz-plan-price,
.mz-plan-opt.tier-pro .mz-plan-price,
.mz-plan-opt.tier-premium .mz-plan-price {
display: flex;
align-items: baseline;
gap: 6px;
margin: 0;
}
.mz-plan-opt.tier-solo .mz-plan-price .amount,
.mz-plan-opt.tier-pro .mz-plan-price .amount,
.mz-plan-opt.tier-premium .mz-plan-price .amount {
font-size: 40px;
font-weight: 800;
letter-spacing: -0.035em;
color: #0F172A;
line-height: 1;
}
.mz-plan-opt.tier-solo .mz-plan-price .unit,
.mz-plan-opt.tier-pro .mz-plan-price .unit,
.mz-plan-opt.tier-premium .mz-plan-price .unit {
font-size: 14.5px;
font-weight: 500;
color: #64748B;
}
.mz-plan-opt .mz-plan-sub-line {
font-size: 12.5px;
color: #64748B;
margin-top: 6px;
line-height: 1.4;
font-weight: 400;
}
.mz-plan-opt .mz-plan-save-hint {
font-size: 12.5px;
color: #15803D;
font-weight: 700;
margin-top: 4px;
}
/* Divider */
.mz-plan-opt .mz-plan-divider {
height: 1px;
background: #F1F5F9;
margin: 2px 0;
}
/* Includes label */
.mz-plan-opt.tier-solo .mz-plan-includes-label,
.mz-plan-opt.tier-pro .mz-plan-includes-label,
.mz-plan-opt.tier-premium .mz-plan-includes-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #0F172A;
margin: 0;
line-height: 1.2;
}
/* Feature list */
.mz-plan-opt.tier-solo .mz-plan-features,
.mz-plan-opt.tier-pro .mz-plan-features,
.mz-plan-opt.tier-premium .mz-plan-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.mz-plan-opt.tier-solo .mz-plan-features li,
.mz-plan-opt.tier-pro .mz-plan-features li,
.mz-plan-opt.tier-premium .mz-plan-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: #334155;
font-weight: 500;
line-height: 1.45;
}
.mz-plan-opt.tier-solo .mz-plan-features li svg,
.mz-plan-opt.tier-pro .mz-plan-features li svg,
.mz-plan-opt.tier-premium .mz-plan-features li svg {
width: 15px;
height: 15px;
color: var(--tier-main);
flex-shrink: 0;
margin-top: 2px;
stroke-width: 3;
}
.mz-plan-opt.tier-solo .mz-plan-features li > span,
.mz-plan-opt.tier-pro .mz-plan-features li > span,
.mz-plan-opt.tier-premium .mz-plan-features li > span { flex: 1; min-width: 0; }
.mz-plan-opt .mz-plan-tag {
align-self: center;
padding: 3px 8px;
border-radius: 999px;
background: var(--tier-soft-2);
color: var(--tier-ink);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
margin-left: 4px;
line-height: 1.3;
}
/* CTA button + fine print */
.mz-plan-opt .mz-plan-cta-wrap {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: auto;
padding-top: 4px;
}
.mz-plan-opt .mz-plan-cta {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 13px 16px;
background: var(--tier-main);
color: #FFFFFF;
border: none;
border-radius: 12px;
font-size: 14.5px;
font-weight: 700;
cursor: pointer;
transition: background .15s, transform .08s;
font-family: inherit;
letter-spacing: -0.005em;
}
.mz-plan-opt .mz-plan-cta:hover { background: var(--tier-strong); }
.mz-plan-opt .mz-plan-cta:active { transform: translateY(1px); }
.mz-plan-opt .mz-plan-fine-print {
font-size: 11.5px;
color: #94A3B8;
text-align: center;
font-weight: 400;
line-height: 1.3;
}
/* Bottom info bar */
.mz-plan-info-bar {
margin-top: 24px;
padding: 16px 20px;
background: #F5F3FF;
border: 1px solid #DDD6FE;
border-radius: 16px;
display: flex;
align-items: flex-start;
gap: 14px;
}
.mz-plan-info-bar .info-icon {
width: 34px;
height: 34px;
border-radius: 10px;
background: #EDE9FE;
color: #7C3AED;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mz-plan-info-bar .info-icon svg { width: 18px; height: 18px; }
.mz-plan-info-bar .info-body { flex: 1; min-width: 0; }
.mz-plan-info-bar .info-title {
font-size: 13.5px;
font-weight: 700;
color: #0F172A;
margin: 0 0 3px;
line-height: 1.35;
}
.mz-plan-info-bar .info-desc {
font-size: 12.5px;
color: #475569;
line-height: 1.5;
margin: 0;
font-weight: 400;
}
@media (max-width: 820px) {
.mz-plan-opt.tier-solo,
.mz-plan-opt.tier-pro,
.mz-plan-opt.tier-premium { padding: 22px 18px 20px; }
.mz-plan-opt.tier-solo .mz-plan-price .amount,
.mz-plan-opt.tier-pro .mz-plan-price .amount,
.mz-plan-opt.tier-premium .mz-plan-price .amount { font-size: 36px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Screen 00.5 — Meet Monezzi (mobile-first, tablet/desktop responsive)
═══════════════════════════════════════════════════════════════════════════ */
.mz-meet { padding: 20px 20px 24px; }
@media (min-width: 720px) { .mz-meet { padding: 32px 40px 40px; } }
/* ─── Hero: full-bleed pale-blue #F4F8FD + Orhan portrait absolute right ─── */
.mz-meet-hero {
position: relative;
margin: -20px -20px 24px;
padding: 22px 16px 24px;
background-color: #F4F8FD;
border-radius: 20px 20px 0 0;
overflow: hidden;
min-height: 366px;
}
@media (min-width: 720px) {
.mz-meet-hero {
margin: -32px -40px 32px;
padding: 36px 32px 36px;
min-height: 410px;
}
}
.mz-meet-hero-portrait {
position: absolute;
top: 0;
right: 0;
width: 212px;
height: 265px;
z-index: 1;
pointer-events: none;
user-select: none;
display: block;
}
.mz-meet-hero-portrait img {
width: 100%;
height: 100%;
display: block;
}
@media (min-width: 720px) {
.mz-meet-hero-portrait { width: 312px; height: 390px; }
}
.mz-meet-hero-inner {
position: relative;
z-index: 2;
}
/* Top-of-hero text (eyebrow, h1, lede) stays within left column so photo
(right-aligned) never overlaps. Founder card gets its own wider width
(below photo silhouette naturally). */
.mz-meet-eyebrow,
.mz-meet-h1,
.mz-meet-lede {
max-width: calc(100% - 148px);
}
@media (min-width: 720px) {
.mz-meet-eyebrow,
.mz-meet-h1,
.mz-meet-lede { max-width: calc(100% - 340px); }
}
.mz-meet-hero .mz-meet-founder { max-width: 88%; }
@media (min-width: 720px) {
.mz-meet-hero .mz-meet-founder { max-width: 68%; }
}
.mz-meet-hero .mz-meet-eyebrow { white-space: nowrap; }
.mz-meet-hero .mz-meet-h1 { font-size: 26px; white-space: nowrap; }
.mz-meet-hero .mz-meet-lede { font-size: 13px; line-height: 1.5; }
.mz-meet-hero .mz-meet-founder-checks li { font-size: 12.5px; padding-left: 22px; }
.mz-meet-card.mz-meet-experience,
.mz-meet-card.mz-meet-beyond {
border: none;
padding: 0;
}
.mz-country-slide-cta {
margin: 18px 0 14px;
display: flex;
justify-content: flex-start;
}
.mz-country-slide-cta .mz-btn { font-size: 14.5px; }
.mz-country-slide-fineprint {
font-size: 11.5px;
line-height: 1.5;
color: #64748B;
margin: 12px 0 0;
padding: 10px 12px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
}
.mz-country-slide-fineprint strong { color: #0F172A; }
.mz-meet-founder-linkedin {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-left: 12px;
text-decoration: none;
line-height: 0;
}
.mz-meet-founder-linkedin img { display: block; width: 19px; height: 19px; }
.mz-meet-founder-linkedin:hover { opacity: 0.85; }
.mz-meet-hero .mz-meet-inline-link { font-size: 13.5px; }
@media (min-width: 720px) {
.mz-meet-hero .mz-meet-h1 { font-size: 32px; }
.mz-meet-hero .mz-meet-lede { font-size: 15px; }
}
/* Founder card inside hero: white bg with border + 12px inner padding,
floating over hero background. */
.mz-meet-hero .mz-meet-founder {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 12px;
padding: 12px;
margin: 12px 0 0;
}
@media (min-width: 720px) {
.mz-meet-hero .mz-meet-founder { margin: 22px 0 0; }
}
.mz-meet-hero .mz-meet-founder-head {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 14px;
grid-template-columns: none;
}
.mz-meet-hero .mz-meet-founder-avatar {
width: 36px;
height: 36px;
}
.mz-meet-hero .mz-meet-founder-avatar svg { width: 22px; height: 22px; }
.mz-meet-hero .mz-meet-founder-name { font-size: 15px; }
.mz-meet-hero .mz-meet-founder-role { font-size: 12.5px; }
.mz-meet-hero .mz-meet-founder-checks li { font-size: 13px; }
.mz-meet-topnav {
display: flex;
justify-content: flex-end;
margin: -6px 0 12px;
}
.mz-meet-back {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13.5px;
font-weight: 600;
color: #2563EB;
text-decoration: none;
}
.mz-meet-back:hover { color: #1D4ED8; text-decoration: underline; }
.mz-meet-eyebrow {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
color: #2563EB;
text-transform: uppercase;
margin: 0 0 8px;
}
.mz-meet-h1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 30px;
line-height: 1.15;
font-weight: 800;
color: #0F172A;
margin: 0 0 10px;
}
@media (min-width: 720px) { .mz-meet-h1 { font-size: 36px; } }
.mz-meet-lede {
font-size: 15.5px;
line-height: 1.5;
color: #475569;
margin: 0 0 12px;
}
@media (min-width: 720px) { .mz-meet-lede { margin: 0 0 20px; } }
/* ─── Card base ─── */
.mz-meet-card {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 18px 16px;
margin: 0 0 14px;
}
.mz-meet-card-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 17px;
font-weight: 800;
color: #0F172A;
margin: 0 0 6px;
line-height: 1.3;
}
.mz-meet-card-desc {
font-size: 14px;
line-height: 1.5;
color: #475569;
margin: 0 0 14px;
}
.mz-meet-inline-link {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: #2563EB;
margin: 12px 0 0;
}
.mz-meet-inline-link:hover { color: #1D4ED8; text-decoration: underline; }
/* ─── Founder card ─── */
.mz-meet-founder-head {
display: grid;
grid-template-columns: 1fr 96px;
gap: 14px;
align-items: start;
margin-bottom: 14px;
}
@media (min-width: 720px) {
.mz-meet-founder-head { grid-template-columns: 1fr 140px; gap: 20px; }
}
.mz-meet-founder-id {
display: flex;
gap: 12px;
align-items: flex-start;
min-width: 0;
}
.mz-meet-founder-avatar {
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: #F0F7FF;
border: 1px solid #DBEAFE;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mz-meet-founder-txt { min-width: 0; }
.mz-meet-founder-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 800;
color: #0F172A;
margin: 2px 0 2px;
line-height: 1.25;
}
.mz-meet-founder-role {
font-size: 13px;
color: #64748B;
margin: 0;
line-height: 1.35;
}
.mz-meet-founder-photo {
width: 96px;
height: 128px;
border-radius: 12px;
overflow: hidden;
background: #F0F7FF;
}
@media (min-width: 720px) {
.mz-meet-founder-photo { width: 140px; height: 180px; }
}
.mz-meet-founder-checks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.mz-meet-founder-checks li {
font-size: 13.5px;
color: #0F172A;
font-weight: 500;
line-height: 1.45;
padding-left: 24px;
position: relative;
}
.mz-meet-founder-checks li::before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #0553F7;
}
.mz-meet-founder-checks li::after {
content: '\2713';
position: absolute;
left: 3px;
top: 1px;
color: #FFFFFF;
font-size: 10px;
font-weight: 800;
line-height: 16px;
width: 10px;
text-align: center;
}
/* ─── Real operating experience ─── */
.mz-meet-exp-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 0 0 12px;
}
.mz-meet-exp-thumbs > picture { display: block; }
.mz-meet-exp-thumb {
width: 100%;
height: auto;
aspect-ratio: 145 / 116;
object-fit: cover;
border-radius: 10px;
display: block;
}
.mz-meet-exp-pills {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin: 6px 0 10px;
}
.mz-meet-exp-pill-ic {
flex: none;
color: #64748B;
}
.mz-meet-exp-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 10px;
font-weight: 600;
color: #64748B;
background: transparent;
border: none;
padding: 0;
line-height: 1.2;
white-space: nowrap;
}
.mz-meet-exp-pill-ic { width: 12px; height: 12px; color: #64748B; }
/* ─── Beyond formation grid ─── */
.mz-meet-beyond-grid {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: nowrap;
gap: 0;
padding: 0;
margin: 0;
list-style: none;
}
.mz-meet-beyond-grid > li {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 0 6px;
border-right: 1px solid #E2E8F0;
background: transparent;
border-radius: 0;
border-top: none;
border-bottom: none;
border-left: none;
}
.mz-meet-beyond-grid > li:last-child { border-right: none; }
.mz-meet-beyond-ic {
width: 28px;
height: 28px;
border-radius: 0;
background: transparent;
border: none;
color: #2563EB;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mz-meet-beyond-lbl {
font-size: 9px;
font-weight: 600;
color: #0F172A;
line-height: 1.2;
word-break: break-word;
}
@media (min-width: 720px) {
.mz-meet-beyond-grid > li { padding: 0 10px; gap: 8px; }
.mz-meet-beyond-ic { width: 36px; height: 36px; }
.mz-meet-beyond-lbl { font-size: 12px; }
}
/* ─── Ready-to-continue banner ─── */
.mz-meet-ready {
background: #F0F7FF;
border: 1px solid #DBEAFE;
border-radius: 16px;
padding: 18px 16px;
margin: 4px 0 0;
}
.mz-meet-ready-eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
color: #2563EB;
text-transform: uppercase;
margin: 0 0 6px;
}
.mz-meet-ready-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 800;
color: #0F172A;
line-height: 1.2;
margin: 0 0 8px;
}
.mz-meet-ready-body {
font-size: 14px;
line-height: 1.5;
color: #334155;
margin: 0 0 12px;
}
.mz-meet-ready-checks {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mz-meet-ready-checks li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: #0F172A;
line-height: 1.4;
}
.mz-meet-ready-form { margin: 0; }
.mz-meet-ready-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.mz-meet-ready-back {
flex: none;
font-size: 14.5px;
padding: 12px 16px;
white-space: nowrap;
text-decoration: none;
}
.mz-meet-ready-btn {
flex: 0 1 auto;
font-size: 15.5px;
padding: 12px 18px;
white-space: nowrap;
}
.mz-meet-ready-foot {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
font-size: 12px;
color: #64748B;
margin: 12px 0 0;
}
.mz-meet-ready-foot-ic { flex: none; }