/* ============================================================
   BusinessCard SaaS — Design System
   ============================================================ */
:root {
  --primary: #24634d;
  --primary-dark: #194b39;
  --secondary: #0ea5e9;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --card-bg: #ffffff;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0284c7;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(15,23,42,.08), 0 4px 14px rgba(15,23,42,.06);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-weight: 600; padding: .6rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; text-align: center; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: rgba(37,99,235,.08); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { padding: .38rem .7rem; font-size: .85rem; }
.btn-lg { padding: .85rem 1.5rem; font-size: 1.05rem; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--line); color: var(--ink); }

/* ---------- Badges & alerts ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge-primary { background: rgba(37,99,235,.12); color: var(--primary); }
.badge-success { background: rgba(22,163,74,.12); color: var(--success); }
.badge-warning { background: rgba(217,119,6,.14); color: var(--warning); }
.badge-danger { background: rgba(220,38,38,.12); color: var(--danger); }
.badge-neutral { background: var(--line); color: var(--ink-2); }
.alert { padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .92rem; border: 1px solid transparent; }
.alert-success { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.25); color: #14532d; }
.alert-error { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.25); color: #7f1d1d; }
.alert-warning { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.3); color: #78350f; }
.alert-info { background: rgba(2,132,199,.1); border-color: rgba(2,132,199,.25); color: #0c4a6e; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.panel { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-head h3 { margin: 0; font-size: 1.02rem; }
.panel-body { padding: 1.25rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
.stat-card .stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; margin-top: .25rem; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; padding: .65rem .8rem; color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #f8fafc; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty-state .empty-icon { color: #cbd5e1; margin-bottom: .8rem; }
.empty-state h3 { color: var(--ink-2); }

/* ---------- Auth ---------- */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 55%, #0ea5e9 120%); padding: 2rem 1rem; }
.auth-shell { width: 100%; max-width: 420px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; color: #fff; font-weight: 700; font-size: 1.2rem; }
.auth-card { background: #fff; border-radius: 18px; padding: 2rem; box-shadow: var(--shadow-lg); }
.auth-form h2 { margin-bottom: .2rem; }
.auth-links { display: flex; justify-content: space-between; margin-top: 1.1rem; font-size: .9rem; }
.auth-foot { text-align: center; color: rgba(255,255,255,.7); font-size: .82rem; margin-top: 1rem; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary); color: #fff; }

/* ---------- Landing ---------- */
.landing-nav { background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.landing-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: .7rem 20px; }
.landing-nav-links { display: flex; align-items: center; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ink); }
.hero { padding: 4rem 0 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-card { display: none; } }
.hero-copy h1 { font-size: 2.6rem; letter-spacing: -.02em; margin-bottom: .8rem; }
.hero-copy .lead { font-size: 1.12rem; color: var(--ink-2); max-width: 34rem; }
.hero-actions { display: flex; gap: .8rem; margin: 1.4rem 0; }
.hero-points { list-style: none; padding: 0; display: grid; gap: .5rem; color: var(--ink-2); }
.hero-points li { display: flex; align-items: center; gap: .5rem; color: #16a34a; font-weight: 500; }
.phone-frame { width: 260px; margin: 0 auto; border-radius: 36px; background: #0f172a; padding: 12px; box-shadow: var(--shadow-lg); }
.phone-screen { border-radius: 26px; background: #fff; overflow: hidden; }
.ph-cover { height: 130px; background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.ph-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--line); margin: -38px auto 0; border: 4px solid #fff; }
.ph-name { height: 12px; width: 55%; background: var(--line); border-radius: 6px; margin: .8rem auto .4rem; }
.ph-title { height: 9px; width: 38%; background: var(--line); border-radius: 6px; margin: 0 auto 1rem; }
.ph-cta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 0 1rem; }
.ph-cta span { height: 38px; background: var(--primary); border-radius: 10px; }
.ph-lines { padding: 1rem; display: grid; gap: .6rem; }
.ph-lines span { height: 10px; background: var(--line); border-radius: 6px; }
.section { padding: 2.5rem 0; }
.section-title { text-align: center; font-size: 1.7rem; margin-bottom: 1.5rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.pricing-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); text-align: center; }
.pricing-card .price { font-size: 1.8rem; font-weight: 700; }
.pricing-card .price span { font-size: .9rem; color: var(--muted); font-weight: 400; }
.landing-footer { border-top: 1px solid var(--line); padding: 1.2rem 0; color: var(--muted); font-size: .85rem; }

/* ---------- Dashboard shell ---------- */
.dash { display: flex; min-height: 100vh; }
.sidebar { width: 245px; background: #0f172a; color: #e2e8f0; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40; transition: transform .2s ease; }
.sidebar .brand { color: #fff; padding: 1rem 1.1rem; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding-right: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-close { color: #cbd5e1; }
.sidebar-nav { flex: 1; padding: .8rem .6rem; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 10px; color: #cbd5e1; font-weight: 500; margin-bottom: .15rem; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: var(--primary); color: #fff; }
.sidebar-foot { padding: .8rem .6rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-foot .nav-item { color: #94a3b8; font-size: .85rem; }
.dash-main { flex: 1; margin-left: 245px; display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 60px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; position: sticky; top: 0; z-index: 30; }
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.user-chip { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; flex: none; }
.avatar-sm { width: 32px; height: 32px; font-size: .85rem; }
.avatar-lg { width: 84px; height: 84px; font-size: 2rem; }
.avatar-xl { width: 120px; height: 120px; font-size: 3rem; }
.topbar-notifications { position: relative; display: inline-flex; color: var(--ink-2); }
.notif-dot { position: absolute; top: -4px; right: -6px; background: var(--danger); color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 700; min-width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.dash-content { padding: 1.5rem; max-width: 1200px; width: 100%; }
.impersonate-banner { background: #7c2d12; color: #fff; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .5rem 1rem; font-size: .9rem; }
.impersonate-banner a { color: #fdba74; font-weight: 700; }
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .dash-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
}
.sidebar-toggle { display: none; }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 1.35rem; }

/* ---------- Card grid (dashboard) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.mini-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.mini-card-cover { height: 90px; background: linear-gradient(135deg, var(--primary), var(--secondary)); position: relative; }
.mini-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.mini-card-body { padding: 1rem; flex: 1; }
.mini-card-name { font-weight: 700; }
.mini-card-slug { color: var(--muted); font-size: .82rem; word-break: break-all; }
.mini-card-foot { border-top: 1px solid var(--line); padding: .7rem 1rem; display: flex; gap: .5rem; justify-content: flex-end; background: #f8fafc; }

/* ---------- Progress ---------- */
.progress { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress-bar { height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; }

/* ---------- Cards (content list) ---------- */
.item-list { display: grid; gap: .75rem; }
.item-row { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1rem; display: flex; align-items: center; gap: 1rem; }
.item-row img.item-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; }
.item-row .item-title { font-weight: 600; }
.item-row .item-meta { color: var(--muted); font-size: .84rem; }
.item-row .item-actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: .4rem; align-items: center; margin-top: 1.2rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: .4rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink-2); font-size: .88rem; }
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Builder ---------- */
.builder-layout { display: grid; grid-template-columns: 230px 1fr; gap: 1.25rem; }
.builder-steps { position: sticky; top: 80px; align-self: start; }
.step-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 500; font-size: .92rem; }
.step-item.done { color: var(--success); }
.step-item.active { background: rgba(37,99,235,.1); color: var(--primary); }
.step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex: none; }
.step-item.active .step-num { background: var(--primary); color: #fff; }
.step-item.done .step-num { background: var(--success); color: #fff; }
@media (max-width: 860px) { .builder-layout { grid-template-columns: 1fr; } .builder-steps { position: static; } }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: #fff; border-radius: var(--radius); max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); padding: 1.5rem; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.modal h3 { margin: 0; }

/* ---------- Charts ---------- */
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.chart-bars .bar { background: var(--primary); border-radius: 3px 3px 0 0; flex: 1; min-width: 4px; opacity: .85; }
.chart-bars .bar:hover { opacity: 1; }
.chart-labels { display: flex; gap: 3px; font-size: .65rem; color: var(--muted); margin-top: .4rem; }
.chart-labels span { flex: 1; text-align: center; overflow: hidden; white-space: nowrap; }

/* ---------- Utilities ---------- */
.flex { display: flex; } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .flex-center { display: flex; align-items: center; gap: .5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }
.text-right { text-align: right; } .text-center { text-align: center; }
.w-100 { width: 100%; }

/* Refined product identity */
:root{--primary:#24634d;--primary-dark:#194b39;--secondary:#a4bda6;--ink:#202d28;--ink-2:#46564d;--muted:#748077;--line:#e3e7df;--bg:#f6f7f3;--radius:16px;--shadow:0 3px 16px #23372a04;--shadow-lg:0 20px 60px #23372a14}
[hidden]{display:none!important}html{scroll-behavior:smooth;scroll-padding-top:100px}svg{flex-shrink:0;vertical-align:middle}a,button,input,select,textarea{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #70a48a;outline-offset:4px}input[type=checkbox],input[type=radio]{width:auto}.btn{min-height:42px;border-radius:8px;font-size:13px;gap:9px}.btn-lg{min-height:52px;padding:14px 22px;font-size:14px}.btn-outline{background:#fff}.brand{letter-spacing:-.6px;font-size:21px;gap:10px}.brand-mark{background:var(--primary);border-radius:9px;width:37px;height:37px}.brand-dot{margin-left:-10px;color:var(--primary)}.container{max-width:1200px;padding:0 40px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--primary);display:block;margin-bottom:20px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#59976f;margin-right:7px}.landing{background:#fafbf7}.landing-nav{background:#fafbf7ed;border-bottom:1px solid #e8ebe3}.landing-nav-inner{min-height:86px}.landing-nav-links{gap:28px;font-size:12px;font-weight:600}.landing-nav-links>a:not(.btn){color:var(--ink-2)}.hero{padding:76px 0 70px;overflow:hidden}.hero-grid{grid-template-columns:1.08fr 1fr;gap:56px}.hero-copy h1{font-size:clamp(45px,5.5vw,76px);line-height:1.06;letter-spacing:-3.8px;font-weight:550;margin-bottom:25px}.hero-copy em,.auth-story em{font-family:Georgia,serif;font-weight:400;color:var(--primary)}.hero-copy .lead{font-size:16px;line-height:1.9;color:#6b766d;max-width:430px}.hero-actions{margin:29px 0 16px;flex-wrap:wrap}.hero-assurance{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:9px}.hero-bottom{border-top:1px solid var(--line);margin-top:36px;padding-top:24px;display:flex;gap:15px;align-items:center}.hero-bottom p{font-size:10px;line-height:1.9;margin:0;color:var(--muted)}.hero-bottom strong{font-weight:500;color:var(--ink-2)}.tiny-avatars{display:flex;padding-left:0}.tiny-avatars b{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;border:3px solid #fafbf7;background:#d9e2d2;font-size:8px;margin-left:-6px;color:#446652}.tiny-avatars b:nth-child(2){background:#eddfc6}.tiny-avatars b:nth-child(3){background:#d3dcd9}.hero-scene{position:relative;min-height:530px;display:grid;place-items:center;background:#e9eee3;border-radius:48% 48% 16px 16px}.scene-orbit{position:absolute;width:440px;height:440px;border:1px solid #d3decb;border-radius:50%;transform:rotate(-20deg)}.scene-label{position:absolute;top:27px;font-size:8px;letter-spacing:2.1px;color:#748a75}.sample-card{position:relative;width:285px;border-radius:18px;overflow:hidden;background:white;box-shadow:0 26px 55px #2c483028;transform:rotate(-6deg);margin-top:15px}.sample-cover{height:110px;background:#214c3b;color:#d8e2c9;padding:19px;position:relative;overflow:hidden}.sample-cover>span{font-size:7px;letter-spacing:1.5px}.cover-art{position:absolute;width:160px;height:160px;border:23px solid #72906b;border-radius:50%;right:-25px;top:25px;box-shadow:0 0 0 22px #3d654c}.sample-content{padding:0 23px 17px;position:relative}.sample-avatar{width:69px;height:69px;background:#ded6bf;position:relative;margin-top:-34px;border:4px solid white;border-radius:50%;display:grid;place-items:center;color:#38513f;font:36px Georgia}.sample-avatar span{font:22px Georgia;position:absolute;bottom:0;right:0}.sample-tag{font-size:6px;letter-spacing:1.1px;display:block;margin:15px 0 8px;color:#7f8d7c}.sample-content h2{font-size:23px;letter-spacing:-.8px;display:flex;justify-content:space-between}.sample-content h2 span{font-size:17px;color:#6c8956}.sample-role{font-size:9px;color:#657464}.sample-bio{font-size:8px;color:#8a9489;line-height:1.8;margin-top:13px}.sample-contact{display:flex;justify-content:space-between;margin:20px 0 17px}.sample-contact span{font-size:8px;display:flex;flex-direction:column;gap:7px;align-items:center;color:#496a51}.sample-save{display:flex;align-items:center;justify-content:center;gap:13px;background:#275c43;color:#fff;padding:11px;border-radius:7px;font-size:9px}.sample-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:#526748}.sample-bottom span{font-size:6px;letter-spacing:1.2px}.float-note{position:absolute;right:-16px;bottom:78px;background:#fff;padding:16px 20px;box-shadow:var(--shadow-lg);border-radius:12px;display:flex;gap:11px;align-items:center;color:var(--primary)}.float-note strong{display:block;font-size:10px}.float-note span{display:block;font-size:8px;color:var(--muted);margin-top:4px}.scene-caption{position:absolute;bottom:18px;font-size:9px;color:#84917e}.feature-strip{background:#eef1e8;border-block:1px solid #e4e9dc;padding:23px 0}.feature-strip .container{display:flex;justify-content:space-between;align-items:center;gap:20px}.feature-strip span{font-size:12px;color:#5f7261;display:flex;align-items:center;gap:10px}.feature-strip span:first-child{font-size:9px;letter-spacing:1.4px}.section{padding:85px 0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:25px}.section-heading h2,.how-section h2,.pricing-section h2{font-size:35px;font-weight:550;letter-spacing:-1.3px;line-height:1.2}.section-heading p{font-size:13px;line-height:1.8}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-tile{padding:29px;background:white;border:1px solid var(--line);border-radius:14px}.feature-icon{width:47px;height:47px;background:#edf2e8;border-radius:12px;display:grid;place-items:center;color:var(--primary);margin-bottom:27px}.feature-tile h3{font-size:16px;margin-bottom:12px}.feature-tile p,.steps-grid p{font-size:13px;color:var(--muted);line-height:1.9;margin:0}.how-section{background:#f0f3eb}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:36px}.step-index{font:32px Georgia;color:#9daf94;display:block;padding-bottom:15px;margin-bottom:20px;border-bottom:1px solid #d8e0d1}.steps-grid h3{font-size:17px}.pricing-section>.container>.eyebrow{text-align:center}.pricing-card{text-align:left;padding:27px;position:relative;display:flex;flex-direction:column;gap:12px;box-shadow:none}.pricing-card h3{font-size:19px;margin:0}.pricing-card .muted{font-size:12px;min-height:38px}.pricing-card .price{font-size:28px;letter-spacing:-1px;margin:10px 0 15px}.pricing-card .price span{font-size:11px;letter-spacing:0}.pricing-card .btn{margin-top:auto}.pricing-card.featured{border:1.5px solid var(--primary);background:#f1f5ed}.plan-highlight{font-size:7px;color:white;background:var(--primary);letter-spacing:1.5px;position:absolute;top:-12px;left:20px;padding:5px 10px;border-radius:4px}.closing-cta{display:flex;align-items:center;justify-content:space-between;gap:25px;background:#e8efdf;padding:40px;border-radius:18px;margin:0 0 70px}.closing-cta h2{font-size:28px;letter-spacing:-1px}.closing-cta .eyebrow{margin-bottom:12px}.landing-footer{padding:30px 0;font-size:10px}.landing-footer .brand{font-size:15px}.auth-body{background:#fbfcf8;display:grid;grid-template-columns:1.08fr 1fr;padding:0;min-height:100vh}.auth-story{background:#eaf0e3;padding:42px 60px;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;gap:50px}.auth-story h1{font-size:48px;letter-spacing:-2px;line-height:1.15;font-weight:500}.auth-story p{font-size:14px;line-height:1.9;color:var(--muted);margin-top:22px}.auth-story small{font-size:10px;color:#6d806e}.auth-art{margin:38px 0 12px;background:#28513e;color:#e2e8d5;border-radius:15px;padding:25px;width:300px;transform:rotate(-5deg);box-shadow:0 15px 40px #345b3824;display:grid;grid-template-columns:1fr 1fr;gap:24px}.auth-art strong{font-size:17px;align-self:end;font-weight:500}.auth-art>div{grid-column:2;justify-self:end}.auth-shell{max-width:440px;width:100%;justify-self:center;padding:35px}.auth-back{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:40px}.auth-card{padding:0;background:none;box-shadow:none;border-radius:0}.auth-form h2{font-size:30px;letter-spacing:-1px}.auth-form>.muted{font-size:13px;margin-bottom:28px}.auth-foot{color:var(--muted);font-size:10px;margin-top:40px}.field label{font-size:12px}.field input,.field select,.field textarea{padding:12px 13px;border-color:#dce2d7;font-size:13px}.field textarea{min-height:110px;resize:vertical}.auth-links{font-size:12px}.sidebar{background:#fff;color:var(--ink);width:238px;border-right:1px solid var(--line)}.sidebar .brand{color:var(--ink);font-size:18px;padding:26px 22px}.sidebar-head{border-bottom:1px solid var(--line)}.sidebar-close{display:none}.sidebar-nav{padding:24px 14px}.nav-item{color:#7b857c;padding:12px 14px;font-size:12px;font-weight:500;border-radius:7px;margin-bottom:5px;gap:12px}.nav-item:hover{background:#f1f5ed;color:var(--primary)}.nav-item.active{background:#eaf1e5;color:#285b3e;font-weight:650}.sidebar-foot{border-top:1px solid var(--line);padding:18px 14px}.sidebar-foot .nav-item{color:var(--primary)}.nav-caption{font-size:8px;letter-spacing:1.8px;color:#9aa496;font-weight:700;padding:0 14px 15px}.dash-main{margin-left:238px}.topbar{height:78px;padding:0 36px;background:#fdfefb}.topbar-label{font-size:11px;color:var(--muted)}.user-chip{font-size:11px}.user-chip small{font-size:8px;display:block;color:var(--muted);font-weight:400}.avatar{background:#e1ead9;color:#486448}.topbar-user{gap:20px}.dash-content{max-width:1400px;padding:36px;margin:0 auto}.page-head{margin-bottom:26px}.page-head h2{font-size:28px;letter-spacing:-1px;font-weight:600}.page-head p{font-size:12px;color:var(--muted);margin:7px 0 0}.panel{box-shadow:none}.panel-head{padding:20px 24px}.panel-head h3{font-size:14px}.panel-body{padding:24px}.stat-grid{gap:18px;margin-bottom:28px}.stat-card{padding:23px;box-shadow:none;position:relative}.stat-card .stat-label{text-transform:none;font-size:11px;letter-spacing:0;font-weight:500}.stat-card .stat-value{font-size:30px;margin:12px 0 3px;font-weight:550;letter-spacing:-1px}.stat-note{font-size:10px;color:var(--muted)}.stat-icon{float:right;color:#7d9678}.welcome-panel{background:#eaf0e2;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-radius:16px;margin-bottom:28px}.welcome-panel h3{font-size:23px;letter-spacing:-.7px}.welcome-panel p{font-size:12px;color:#74816e;max-width:430px}.welcome-panel .eyebrow{margin-bottom:12px}.dashboard-columns{display:grid;grid-template-columns:1.7fr 1fr;gap:24px}.checklist-item{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px}.checklist-item:last-child{border:0}.checklist-item>span{width:27px;height:27px;border:1px solid #d9e2d1;border-radius:50%;display:grid;place-items:center;color:var(--primary);flex-shrink:0}.checklist-item strong{font-size:12px;font-weight:600}.checklist-item p{font-size:10px;margin:5px 0 0;color:var(--muted)}.mini-card-cover{background:#dbe6d2;height:105px}.mini-card-cover:empty:after{content:'YOUR BRAND. YOUR STORY.';position:absolute;bottom:20px;left:22px;font-size:8px;letter-spacing:2px;color:#738d64}.mini-card-body{padding:22px}.mini-card-foot{flex-wrap:wrap;background:#fbfcf9;padding:14px}.mini-card-name{font-size:17px}.mini-card .avatar{margin-top:-43px;position:relative;border:4px solid white;width:56px;height:56px;margin-bottom:12px}.mini-card-slug{font-size:10px;margin:8px 0 16px}.mini-card-foot form{margin:0}.table th{font-size:9px;padding:15px 20px;background:#f8faf5}.table td{font-size:12px;padding:17px 20px}.table tr:hover td{background:#f6f9f2}.table-actions{display:flex;gap:8px;flex-wrap:wrap}.empty-state{padding:45px 24px}.empty-state h3{font-size:17px}.empty-state p{font-size:12px;max-width:340px;margin:10px auto 22px}.empty-icon{display:inline-grid;place-items:center;background:#f0f4e9;border-radius:18px;width:65px;height:65px;color:#819d71!important}.builder-layout{grid-template-columns:190px minmax(0,1fr)}.builder-steps .panel-body{padding:14px}.step-item{font-size:11px;padding:12px 9px}.step-item.active{background:#eaf1e5;color:var(--primary)}.builder-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.builder-tabs a{font-size:10px;border:1px solid var(--line);padding:7px 10px;border-radius:6px;background:#fff}.form-panel{max-width:850px}.form-actions{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;gap:10px}.template-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px}.template-option{padding:18px;background:#f5f8f0;border:1px solid var(--line);border-radius:12px;cursor:pointer}.template-option:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.template-swatch{height:75px;border-radius:7px;background:#c8d7bc;margin-bottom:13px}.template-option:nth-child(2n) .template-swatch{background:#e0d6c7}.template-option:nth-child(3n) .template-swatch{background:#bbcbd4}.template-option strong{font-size:12px}.preview-frame{width:100%;height:640px;border:1px solid var(--line);border-radius:14px;background:#fff}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:13px 22px;background:#214c3b;color:#fff;border-radius:10px;box-shadow:var(--shadow-lg);z-index:100;font-size:13px}.sidebar-overlay{position:fixed;inset:0;background:#142b2466;z-index:35}.content-details{margin-bottom:14px}.content-details summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:13px}.content-details .panel-body{border-top:1px solid var(--line)}.page-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}.page-tools input,.page-tools select{border:1px solid var(--line);background:#fff;padding:10px 14px;border-radius:7px;font:inherit;font-size:12px;max-width:100%}.public-body{background:#eaf0e5;padding:40px 18px}.public-card{max-width:620px;margin:auto;overflow:hidden;background:var(--public-bg,#fff);color:var(--public-ink,#202d28);border-radius:var(--public-radius,22px);box-shadow:var(--shadow-lg)}.public-cover{height:200px;background:var(--public-primary,#24634d);position:relative;overflow:hidden}.public-cover img{width:100%;height:100%;object-fit:cover}.public-cover:has(img):after{display:none}.public-cover:after{content:'';position:absolute;width:240px;height:240px;border:45px solid #ffffff25;border-radius:50%;right:-40px;top:35px;box-shadow:0 0 0 40px #ffffff0d}.public-intro{padding:0 34px 28px;position:relative}.public-avatar{width:104px;height:104px;border-radius:50%;border:5px solid white;margin-top:-52px;background:#dce6d2;display:grid;place-items:center;font:40px Georgia;overflow:hidden;margin-bottom:20px}.public-avatar img{width:100%;height:100%;object-fit:cover}.public-intro h1{font-size:32px;letter-spacing:-1px}.public-intro p{font-size:13px;line-height:1.9}.public-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.public-actions .btn-primary,.public-card .btn-primary{background:var(--public-primary,#24634d)}.public-section{padding:28px 34px;border-top:1px solid var(--line)}.public-section h2{font-size:20px;margin-bottom:20px}.public-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.public-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:16px}.public-item img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:14px}.public-item h3{font-size:15px}.public-item p{font-size:12px;color:var(--muted)}.public-gallery img{width:100%;border-radius:10px}.public-footer{text-align:center;padding:25px;color:var(--muted);font-size:11px}.public-card.template-minimal{box-shadow:none;border:1px solid var(--line)}.template-minimal .public-cover{height:90px}.template-elegant .public-intro h1{font-family:Georgia,serif}.template-elegant .public-intro{text-align:center}.template-elegant .public-avatar{margin-left:auto;margin-right:auto}.template-elegant .public-actions{justify-content:center}.template-bold .public-cover{height:260px}.template-bold .public-intro h1{font-size:42px}.template-classic .public-card{border-radius:4px}
@media(min-width:861px){.sidebar-toggle{display:none}}
@media(max-width:1050px){.container{padding:0 28px}.hero-grid{gap:30px}.hero-copy h1{font-size:57px}.landing-nav-links{gap:18px}.auth-story{padding:40px}.auth-story h1{font-size:40px}.dash-content{padding:25px}.dashboard-columns{grid-template-columns:1fr}.float-note{right:-8px}.feature-grid{gap:14px}.feature-tile{padding:22px}}
@media(max-width:860px){.sidebar-toggle,.sidebar-close{display:inline-flex}.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.dash-main{margin-left:0}.topbar{padding:0 22px;height:68px}.hero-grid{grid-template-columns:1fr 1fr;gap:20px}.hero-copy h1{font-size:45px;letter-spacing:-2px}.hero-copy .lead{font-size:14px}.hero-scene{min-height:500px}.sample-card{width:250px}.float-note{padding:12px;bottom:64px}.hero-bottom{display:none}.desktop-link{display:none}.auth-story{padding:32px}.auth-story h1{font-size:34px}.builder-layout{grid-template-columns:1fr}.builder-steps{position:static}.builder-steps .panel-body{display:flex;overflow-x:auto}.step-item{white-space:nowrap}.section-heading h2,.how-section h2,.pricing-section h2{font-size:29px}}
@media(max-width:640px){.container{padding:0 22px}.landing-nav-inner{min-height:73px}.brand{font-size:17px}.brand-mark{width:30px;height:30px}.landing-nav-links{gap:14px;font-size:11px}.landing-nav-links .btn{font-size:10px;padding:9px 12px;min-height:36px}.hero{padding:45px 0 32px}.hero-grid{grid-template-columns:1fr;gap:38px}.hero-copy h1{font-size:54px;letter-spacing:-2.8px}.hero-copy .lead{font-size:14px;max-width:100%}.hero-actions{gap:9px}.hero-actions .btn{font-size:12px;padding:12px 15px}.hero-assurance{font-size:10px}.hero-scene{min-height:490px;margin:0 7px}.sample-card{width:260px}.float-note{right:-10px}.feature-strip .container{display:grid;grid-template-columns:1fr 1fr;gap:18px}.feature-strip span{font-size:10px}.feature-strip span:first-child{font-size:8px}.section{padding:52px 0}.section-heading{display:block}.section-heading p{margin-top:18px}.feature-grid,.steps-grid{grid-template-columns:1fr;gap:15px}.steps-grid{gap:25px}.feature-tile{padding:25px}.feature-icon{margin-bottom:18px}.closing-cta{padding:28px;display:block;margin-bottom:42px}.closing-cta h2{font-size:27px}.closing-cta .btn{margin-top:22px}.landing-footer .flex-between{flex-direction:column;align-items:flex-start;gap:16px}.auth-body{display:block;padding:25px 0}.auth-story{display:none}.auth-shell{padding:25px 30px}.auth-back{margin-bottom:35px}.dash-content{padding:23px 16px}.page-head h2{font-size:25px}.topbar-label{font-size:10px}.user-chip-name{display:none}.topbar-user{gap:14px}.stat-grid{grid-template-columns:1fr 1fr;gap:12px}.stat-card{padding:17px}.stat-card .stat-value{font-size:26px}.welcome-panel{padding:24px;display:block}.welcome-panel .btn{margin-top:15px}.card-grid{grid-template-columns:1fr}.panel-body{padding:18px}.panel-head{padding:18px}.page-head .btn{font-size:11px}.public-body{padding:0}.public-card{border-radius:0}.public-intro,.public-section{padding-left:24px;padding-right:24px}.public-grid{grid-template-columns:1fr}.item-row{flex-wrap:wrap}.form-row-3{grid-template-columns:1fr}.public-cover{height:180px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Live card editing workspace */
.editor-with-preview{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.editor-work{min-width:0}.editor-with-preview .form-panel{max-width:none}.editor-with-preview .builder-layout{grid-template-columns:145px minmax(0,1fr);gap:16px}.editor-with-preview .builder-steps .panel-body{padding:8px}.editor-with-preview .panel-body{padding:20px}.editor-with-preview .form-row{gap:14px}.live-preview-panel{position:sticky;top:98px;min-width:0}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.preview-heading>div{display:flex;gap:7px;align-items:center}.preview-heading strong{font-size:12px}.preview-live-dot{width:6px;height:6px;background:#40845c;border-radius:50%}.preview-state{font-size:9px;color:#6f8368;background:#e9f0e3;padding:4px 7px;border-radius:5px}.preview-state.has-changes{background:#f5ebd5;color:#906c2d}.preview-caption{font-size:10px;color:var(--muted);margin:6px 0 16px}.preview-device{border:6px solid #253a30;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 14px 30px #24362912}.preview-device-bar{height:30px;background:#fff;display:flex;align-items:center;justify-content:center;gap:12px}.preview-device-bar b{font-size:7px;letter-spacing:1.5px;color:#8a9487;font-weight:500}.preview-device-bar span{width:22px;height:3px;border-radius:2px;background:#e3e7df}.preview-device iframe{display:block;width:100%;height:540px;border:0;background:#fff}.preview-disclaimer{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:9px;margin:15px 0}.preview-mobile-tabs{display:none}.preview-ready{padding:35px 12px;text-align:center}.preview-ready h3{margin-top:15px}.preview-ready p{font-size:12px;color:var(--muted);line-height:1.8}.public-logo{max-width:72px;max-height:50px;object-fit:contain;margin-bottom:15px}.template-classic{border-radius:4px}.template-classic .public-cover{height:125px}.template-corporate .public-cover{height:130px}.template-corporate .public-intro{border-left:5px solid var(--public-primary)}.template-creative .public-cover{height:240px}.template-creative .public-intro h1{font-family:Georgia,serif;font-size:38px}.template-creative .public-avatar{border-radius:20px}.public-card[data-preview-mode=true] .public-actions .btn{cursor:default}
@media(max-width:1280px){.editor-with-preview .builder-layout{grid-template-columns:1fr}.editor-with-preview .builder-steps{position:static}.editor-with-preview .builder-steps .panel-body{display:flex;overflow:auto}.editor-with-preview .step-item{white-space:nowrap;padding:10px 8px}.editor-with-preview .step-num{width:20px;height:20px}.editor-with-preview{grid-template-columns:minmax(0,1fr) 280px;gap:18px}.preview-device iframe{height:510px}.editor-with-preview .form-row-3{grid-template-columns:1fr}}
@media(max-width:1000px) and (min-width:861px){.editor-with-preview{grid-template-columns:minmax(0,1fr) 245px;gap:14px}.editor-with-preview .form-row{grid-template-columns:1fr}.editor-with-preview .form-actions{flex-wrap:wrap}.editor-with-preview .panel-head{flex-wrap:wrap}}
@media(max-width:760px){.editor-with-preview{display:block}.preview-mobile-tabs{display:flex;gap:6px;background:#e9eee3;border-radius:10px;padding:5px;margin-bottom:18px;position:sticky;top:78px;z-index:15}.preview-mobile-tabs button{border:0;background:transparent;border-radius:7px;padding:11px;flex:1;font:inherit;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:#7b8772;cursor:pointer}.preview-mobile-tabs button.active{background:white;color:var(--primary);box-shadow:0 2px 6px #24362908}.live-preview-panel{display:none;position:static;max-width:365px;margin:0 auto}.show-preview>.editor-work{display:none}.show-preview>.live-preview-panel{display:block}.preview-device iframe{height:600px}.editor-with-preview .form-row{grid-template-columns:1fr}}

.preview-highlight{outline:2px dashed #659369;outline-offset:5px;transition:outline-color .2s}.public-card{overflow-wrap:anywhere}.public-intro .badge{margin:2px 0 4px}.preview-device iframe{scrollbar-width:thin}

.field input[type=color]{height:46px;padding:6px;cursor:pointer}.field input[type=color]::-webkit-color-swatch-wrapper{padding:0}.field input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}

.template-personal .public-intro{text-align:center}.template-personal .public-avatar{margin-left:auto;margin-right:auto}.template-personal .public-intro h1{font-family:Georgia,serif;font-weight:500}.template-personal .public-actions{justify-content:center}.template-personal .public-cover{height:230px}.template-product .public-intro{padding-bottom:22px}.template-product .public-cover{height:150px}.template-product .public-item{background:#f8faf5}.template-product .public-item h3{font-size:18px}.template-product .public-section h2{text-transform:uppercase;font-size:15px;letter-spacing:1px}

/* Selectable live template thumbnails. */
.template-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.template-option{padding:12px;text-align:center;overflow:hidden}.template-option .theme-phone{position:relative;width:140px;height:230px;border:5px solid #242424;border-radius:18px;padding:10px 0;margin:0 auto 12px;overflow:hidden;background:#222}.template-option iframe{width:445px;height:710px;transform:scale(.292);transform-origin:top left;border:0;pointer-events:none}.template-option .theme-speaker,.template-option .theme-home{display:none}.template-option strong{font-size:12px}

/* Shared account screens follow the navy and yellow site palette. */
.auth-body{--primary:#090638;--primary-dark:#030223;--primary-light:#fff9cf}.auth-story{background:#06052c;color:#fff}.auth-story .brand,.auth-story h1{color:#fff}.auth-story h1 em,.auth-story small{color:#ffdf19}.auth-story p{color:#c3c2d7}.auth-art{background:#ffdf19;color:#06052c}.auth-body .btn-primary{background:#ffdf19;border-color:#ffdf19;color:#05052c}.sidebar{--primary:#090638}.sidebar .brand-mark{background:#090638;color:#ffdf19}.sidebar .nav-item.active,.sidebar a.active{background:#fff9cf;color:#090638}.sidebar-foot{background:#f8f7ff}.auth-body a:focus-visible{outline-color:#d6b800}

.plan-usage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:22px 0}.plan-usage-item>div{display:flex;justify-content:space-between;gap:10px;font-size:13px}.plan-usage-item progress{display:block;width:100%;height:9px;margin:10px 0;accent-color:var(--primary,#24634d)}.plan-usage-item>a{font-size:12px}.plan-benefit-list{padding-left:18px;font-size:13px;line-height:1.9}@media(max-width:700px){.plan-usage-grid{grid-template-columns:1fr}.plan-usage-item>div{font-size:12px}}