:root {
    --cream: #fff8ef;
    --cream-deep: #f9ecdc;
    --paper: #fffdf9;
    --panel: #ffffff;
    --ink: #17213b;
    --ink-soft: #35415b;
    --muted: #6f756f;
    --coral: #f45d48;
    --coral-dark: #dd4938;
    --coral-soft: #ffe7df;
    --peach: #f6aa7e;
    --gold: #f5aa2a;
    --gold-soft: #fff0c9;
    --teal: #178b88;
    --teal-soft: #dff3ee;
    --green: #3e8f62;
    --green-soft: #e6f5e9;
    --rose: #ef7891;
    --line: #eadfd1;
    --line-strong: #ddcfbe;
    --danger: #b74545;
    --shadow: 0 20px 60px rgba(97, 66, 43, .11);
    --shadow-soft: 0 10px 30px rgba(97, 66, 43, .07);
    --radius: 24px;
    --radius-sm: 15px;
    --serif: Georgia, "Times New Roman", serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --script: "Segoe Script", "Brush Script MT", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.58; }
body.public-shell { background: linear-gradient(180deg, #fffaf3 0%, #fff8ef 70%, #fffdf8 100%); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
img { display: block; max-width: 100%; }
code { padding: 2px 6px; border-radius: 6px; background: var(--cream-deep); color: var(--coral-dark); }
.container { width: min(1210px, calc(100% - 44px)); margin: 0 auto; }

/* Brand */
.brand { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--coral); line-height: 1; }
.brand-word { font-family: var(--script); font-size: 31px; font-weight: 700; letter-spacing: -.06em; transform: rotate(-2deg); }
.brand-spark { margin-top: 0; color: var(--gold); font-size: 16px; animation: sparkle 2.6s ease-in-out infinite; }
@keyframes sparkle { 50% { transform: rotate(25deg) scale(1.22); } }

/* Header */
.public-header-wrap { position: sticky; top: 0; z-index: 30; background: rgba(255, 250, 243, .88); border-bottom: 1px solid rgba(234, 223, 209, .7); backdrop-filter: blur(14px); }
.public-header { min-height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.public-header nav { display: flex; align-items: center; justify-content: center; gap: 31px; font-weight: 750; font-size: 13px; }
.public-header nav a { color: var(--ink-soft); transition: color .18s ease; }
.public-header nav a:hover { color: var(--coral); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
.login-link { font-size: 14px; font-weight: 800; }

/* Buttons */
.button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 0 21px; border: 1px solid var(--coral); border-radius: 14px; background: linear-gradient(135deg, var(--coral), #f47750); color: #fff; font-weight: 850; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; box-shadow: 0 10px 24px rgba(244, 93, 72, .18); }
.button:hover { transform: translateY(-2px); background: linear-gradient(135deg, var(--coral-dark), var(--coral)); box-shadow: 0 14px 30px rgba(244, 93, 72, .26); }
.button-secondary { background: #fffdf9; border-color: var(--ink); color: var(--ink); box-shadow: none; }
.button-secondary:hover { background: var(--cream-deep); box-shadow: none; }
.button-danger { background: #fff; color: var(--danger); border-color: #e9b8b8; box-shadow: none; }
.button-small { min-height: 42px; padding: 0 17px; border-radius: 12px; font-size: 13px; }
.button-large { min-height: 61px; padding: 0 28px; border-radius: 16px; font-size: 16px; }
.button-full { width: 100%; }
.play-dot { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%; font-size: 9px; }
.text-link { color: var(--coral); font-weight: 850; }
.text-link span, .feature-card a span { transition: transform .18s ease; display: inline-block; }
.text-link:hover span, .feature-card a:hover span { transform: translateX(4px); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 72px 0 68px; }
.hero::before { content: ""; position: absolute; right: -140px; top: 30px; width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 170, 42, .2), rgba(245, 170, 42, 0) 70%); }
.hero::after { content: ""; position: absolute; left: -180px; bottom: -280px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(23,139,136,.13), rgba(23,139,136,0) 70%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .84fr 1.16fr; gap: 34px; align-items: center; }
.hero-copy-block { padding: 16px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: var(--coral-soft); color: #a94839; font-size: 12px; font-weight: 850; letter-spacing: .015em; }
.eyebrow > span { color: var(--rose); }
.hero h1 { max-width: 650px; margin: 20px 0 20px; font-family: var(--serif); font-size: clamp(54px, 5.7vw, 84px); line-height: .96; letter-spacing: -.055em; font-weight: 700; }
.hero h1 em { position: relative; color: var(--coral); font-family: var(--script); font-style: normal; font-weight: 700; letter-spacing: -.055em; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 8%; right: 4%; bottom: -3px; height: 5px; border-radius: 50%; background: var(--teal); transform: rotate(-2deg); }
.hero-copy { max-width: 560px; margin: 0; color: var(--ink-soft); font-size: 19px; line-height: 1.62; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 31px 0 20px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 19px; color: var(--muted); font-size: 12px; font-weight: 750; }
.hero-note span::before { content: "✓"; margin-right: 7px; color: var(--teal); font-weight: 900; }
.hero-decor { position: absolute; z-index: 1; font-size: 18px; }
.hero-confetti-a { left: 3.5%; top: 40%; color: var(--teal); transform: rotate(25deg); }
.hero-confetti-b { left: 37%; top: 15%; color: var(--gold); }
.hero-confetti-c { left: 42%; bottom: 14%; color: var(--coral); font-size: 9px; }

.hero-visual { position: relative; min-height: 560px; }
.mascot-card { position: absolute; z-index: 4; left: -4%; bottom: -18px; width: 46%; max-width: 360px; overflow: hidden; border-radius: 110px 110px 32px 32px; filter: drop-shadow(0 16px 25px rgba(68,46,28,.16)); }
.mascot-card img { width: 100%; height: 520px; object-fit: cover; object-position: 52% 30%; }
.dashboard-preview { position: absolute; z-index: 3; top: 50px; right: 0; width: 77%; min-height: 425px; display: grid; grid-template-columns: 135px 1fr; overflow: hidden; border: 1px solid #f0dcca; border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: 0 28px 70px rgba(104,70,41,.16); transform: rotate(.7deg); }
.preview-sidebar { padding: 25px 14px; display: grid; align-content: start; gap: 7px; background: #fff8f0; border-right: 1px solid #f0e0d2; }
.preview-logo { margin: 0 5px 24px; color: var(--coral); font-family: var(--script); font-size: 21px; font-weight: 700; }
.preview-sidebar > span:not(.preview-logo) { padding: 9px 9px; border-radius: 9px; color: #6d7180; font-size: 9px; font-weight: 700; }
.preview-sidebar > span.active { color: var(--coral-dark); background: var(--coral-soft); }
.preview-main { padding: 28px 24px; min-width: 0; }
.preview-title { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.preview-title div { display: grid; }
.preview-title strong { font-size: 14px; }
.preview-title small { color: var(--muted); font-size: 8px; }
.preview-title > span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 8px; font-weight: 750; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 20px 0 12px; }
.preview-stats > div { padding: 12px; border: 1px solid #eee1d5; border-radius: 11px; background: #fff; display: grid; }
.preview-stats small { color: var(--muted); font-size: 8px; }
.preview-stats b { font-size: 16px; }
.preview-stats em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 800; }
.preview-campaign { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; padding: 11px; border: 1px solid #eee1d5; border-radius: 15px; background: #fffdf9; }
.preview-email { min-height: 185px; padding: 17px; border-radius: 10px; background: linear-gradient(160deg, #fff1d8, #f3e2cf); position: relative; overflow: hidden; }
.preview-email::after { content: "✿"; position: absolute; right: 14px; bottom: -5px; color: var(--coral); font-size: 64px; opacity: .65; }
.preview-email small { font-size: 7px; color: var(--coral-dark); font-weight: 850; }
.preview-email h3 { margin: 11px 0 20px; font-family: var(--serif); font-size: 22px; line-height: 1.04; }
.preview-email span { display: inline-block; padding: 7px 9px; border-radius: 7px; background: var(--teal); color: #fff; font-size: 7px; font-weight: 850; }
.preview-chart { position: relative; min-width: 0; padding: 10px 8px; color: var(--teal); }
.preview-chart strong { color: var(--ink); font-size: 9px; }
.preview-chart svg { position: absolute; left: 9px; right: 9px; bottom: 22px; width: calc(100% - 18px); height: 105px; }
.chart-grid { position: absolute; inset: 46px 8px 22px; display: grid; align-content: space-between; }
.chart-grid i { border-top: 1px solid #e7e6de; }
.paper-plane { position: absolute; z-index: 5; top: 2px; right: 22%; color: var(--gold); font-size: 52px; transform: rotate(-20deg); text-shadow: 0 10px 20px rgba(245,170,42,.25); }
.flight-path { position: absolute; z-index: 2; top: 55px; right: 2%; width: 190px; height: 85px; border-top: 2px dashed var(--gold); border-radius: 50%; transform: rotate(14deg); opacity: .8; }

.trust-strip { padding: 20px 0 48px; color: var(--muted); text-align: center; }
.trust-strip .container > span { display: block; margin-bottom: 17px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.trust-strip .container > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 36px; color: #7c6f63; font-family: var(--serif); font-size: 16px; }

/* Public sections */
.section { padding: 92px 0; }
.section-heading { max-width: 760px; margin-bottom: 45px; }
.section-heading.center { margin: 0 auto 45px; text-align: center; }
.section-heading h2, .story-grid h2, .final-cta h2, .testimonial-heading h2 { margin: 16px 0 14px; font-family: var(--serif); font-size: clamp(39px, 4.5vw, 61px); line-height: 1.03; letter-spacing: -.045em; }
.section-heading p, .split-heading > p, .final-cta p { color: var(--muted); font-size: 17px; }
.feature-section { background: linear-gradient(180deg, #fff3e6, #fff9f2); border-top: 1px solid #f1e1d1; border-bottom: 1px solid #f1e1d1; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-grid-four { grid-template-columns: repeat(4, 1fr); }
.feature-card { position: relative; overflow: hidden; padding: 22px; border: 1px solid #eaded0; border-radius: var(--radius); background: rgba(255,255,255,.84); box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-card h3 { margin: 21px 0 8px; font-size: 18px; letter-spacing: -.02em; }
.feature-card p { min-height: 88px; margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.feature-card a { color: var(--coral); font-size: 12px; font-weight: 850; }
.feature-teal a, .feature-gold a { color: var(--teal); }
.feature-illustration { position: relative; height: 135px; border-radius: 17px; display: grid; place-items: center; overflow: hidden; }
.feature-coral .feature-illustration { background: linear-gradient(135deg, #fff0e8, #ffe0d5); }
.feature-teal .feature-illustration { background: linear-gradient(135deg, #eaf8f5, #d9f0eb); }
.feature-gold .feature-illustration { background: linear-gradient(135deg, #fff5d9, #ffe9b2); }
.feature-peach .feature-illustration { background: linear-gradient(135deg, #fff0e4, #f9dfcb); }
.mini-window { width: 90px; height: 100px; padding: 12px; background: white; border: 1px solid #eaded0; border-radius: 10px; box-shadow: 0 8px 18px rgba(79,48,29,.1); display: grid; gap: 6px; transform: rotate(-4deg); }
.mini-window i { display: inline-block; width: 5px; height: 5px; margin-right: 2px; border-radius: 50%; background: var(--coral); }
.mini-window b { font-family: var(--serif); font-size: 12px; }
.mini-window em { height: 5px; border-radius: 5px; background: #eee2d6; }
.flower-pot { position: absolute; right: 20px; bottom: -9px; color: var(--coral); font-size: 50px; transform: rotate(10deg); }
.automation-illustration { grid-template-columns: 42px 1fr 42px 1fr 42px; padding: 20px; }
.automation-illustration span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: white; color: var(--coral); box-shadow: 0 6px 12px rgba(56,78,68,.08); }
.automation-illustration i { height: 2px; border-top: 2px dashed var(--teal); }
.contacts-illustration { grid-template-columns: repeat(3, 48px); gap: -2px; }
.contacts-illustration span { width: 48px; height: 48px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; background: var(--coral-soft); color: var(--coral); font-size: 22px; box-shadow: 0 5px 12px rgba(94,66,42,.09); }
.contacts-illustration span:nth-child(2) { margin-left: -12px; background: var(--teal-soft); color: var(--teal); }
.contacts-illustration span:nth-child(3) { margin-left: -24px; background: var(--gold-soft); color: #ad7414; }
.contacts-illustration i { position: absolute; bottom: 22px; width: 120px; height: 12px; border-radius: 10px; background: rgba(255,255,255,.7); }
.reports-illustration { display: block; padding: 25px; }
.reports-illustration .pie { display: block; width: 66px; height: 66px; margin: 0 auto 10px; border-radius: 50%; background: conic-gradient(var(--coral) 0 28%, var(--gold) 28% 50%, var(--teal) 50% 76%, #88b497 76% 100%); box-shadow: inset 0 0 0 7px #fff; }
.reports-illustration i { display: inline-block; width: 26%; height: 3px; margin: 0 2%; border-radius: 3px; background: var(--teal); vertical-align: bottom; }
.reports-illustration i:nth-child(3) { height: 14px; }.reports-illustration i:nth-child(4) { height: 24px; }

.story-section { position: relative; overflow: hidden; background: #fffdf9; }
.story-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.story-art { position: relative; min-height: 490px; border-radius: 38px; background: linear-gradient(145deg, #fff0de, #ffe4c4); overflow: hidden; }
.story-art::before { content: ""; position: absolute; left: -40px; right: -40px; bottom: -70px; height: 210px; border-radius: 50%; background: #f7d79b; opacity: .65; }
.mailbox { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: 255px; height: 300px; }
.mailbox-box { position: absolute; top: 25px; left: 15px; width: 220px; height: 145px; border-radius: 95px 95px 26px 26px; background: #447d73; border: 8px solid #2f675f; box-shadow: 0 17px 30px rgba(57,91,81,.22); }
.mailbox-box::before { content: ""; position: absolute; inset: 30px 58px 48px; border-radius: 6px; background: #1e514b; }
.mailbox-box span { position: absolute; left: 81px; top: 46px; z-index: 2; font-size: 42px; color: #fff0d6; transform: rotate(-8deg); }
.mailbox-post { position: absolute; top: 165px; left: 103px; width: 45px; height: 145px; background: #8b6a47; border-radius: 8px; }
.mailbox-flag { position: absolute; top: 4px; right: 16px; width: 8px; height: 88px; background: #b24b3d; border-radius: 4px; }
.mailbox-flag::after { content: ""; position: absolute; top: 0; left: 7px; width: 48px; height: 29px; background: var(--coral); clip-path: polygon(0 0,100% 12%,76% 100%,0 100%); }
.story-flower { position: absolute; color: var(--coral); font-size: 62px; }
.story-flower-one { left: 45px; bottom: 34px; }.story-flower-two { right: 38px; bottom: 58px; color: var(--gold); font-size: 48px; }
.story-star { position: absolute; right: 55px; top: 52px; color: var(--gold); font-size: 28px; }
.steps { display: grid; gap: 12px; margin: 30px 0; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 17px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.step > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--coral-soft); color: var(--coral-dark); font-size: 12px; font-weight: 900; }
.step h3 { margin: 0 0 4px; font-size: 20px; }
.step p { margin: 0; color: var(--muted); }

.template-showcase { background: linear-gradient(180deg, #f7eee4, #fff8ef); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.split-heading { max-width: none; display: grid; grid-template-columns: 1fr .7fr; gap: 70px; align-items: end; }
.split-heading > p { margin-bottom: 19px; }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.showcase-card { min-height: 430px; padding: 34px; border-radius: 29px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; position: relative; transition: transform .2s ease; }
.showcase-card:hover { transform: rotate(-1deg) translateY(-5px); }
.showcase-card > span { font-size: 10px; letter-spacing: .13em; font-weight: 900; }
.showcase-card h3 { margin: 22px 0 14px; font-family: var(--serif); font-size: 35px; line-height: 1.08; }
.showcase-card p { max-width: 230px; color: rgba(23,33,59,.7); }
.showcase-card b { margin-top: auto; font-size: 12px; }
.showcase-news { background: linear-gradient(150deg, #fff7e8, #f7d6bb); }
.showcase-news::after { content: "✿"; position: absolute; right: -6px; bottom: -42px; color: var(--coral); font-size: 185px; opacity: .65; }
.showcase-launch { color: #fff; background: linear-gradient(150deg, #224f53, #163537); }
.showcase-launch p { color: rgba(255,255,255,.7); }
.showcase-launch::after { content: "➤"; position: absolute; right: 35px; bottom: 25px; color: var(--gold); font-size: 96px; transform: rotate(-18deg); }
.showcase-offer { align-items: center; text-align: center; background: linear-gradient(150deg, #ffe9d3, #f5bfd0); }
.showcase-offer strong { margin-top: 22px; color: var(--coral-dark); font-family: var(--serif); font-size: 48px; }
.showcase-offer::after { content: "♥"; position: absolute; right: 28px; bottom: 24px; color: rgba(255,255,255,.65); font-size: 90px; transform: rotate(12deg); }

.testimonials-section { background: #fffdf9; }
.testimonial-wrap { display: grid; grid-template-columns: .65fr 1.35fr; gap: 45px; padding: 54px; border: 1px solid #f0d8ca; border-radius: 36px; background: linear-gradient(145deg, #ffe7df, #fff3e8); box-shadow: var(--shadow-soft); }
.testimonial-heading h2 span { color: var(--gold); font-family: var(--sans); }
.testimonial-heading > p { color: var(--muted); font-size: 13px; }
.testimonial-heading > p b { color: var(--gold); letter-spacing: .07em; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.testimonial-grid blockquote { margin: 0; padding: 22px; border-radius: 20px; background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.9); }
.testimonial-grid blockquote p { min-height: 150px; margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; }
.testimonial-grid footer { display: flex; align-items: center; gap: 10px; }
.testimonial-grid footer > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: 11px; font-weight: 900; }
.testimonial-grid footer div { display: grid; }
.testimonial-grid footer strong { font-size: 12px; }
.testimonial-grid footer small { color: var(--muted); font-size: 10px; }

.pricing-section { background: linear-gradient(180deg, #fff8ef, #fff0d8); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 27px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-soft); }
.price-card.featured { margin-top: -10px; margin-bottom: -10px; border: 2px solid var(--coral); background: #fff; box-shadow: var(--shadow); }
.popular-pill { position: absolute; top: 19px; right: 20px; padding: 6px 10px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 9px; font-weight: 900; }
.price-icon { font-size: 27px; }
.price-card h3 { margin: 18px 0 0; font-family: var(--serif); font-size: 28px; }
.price-card .price { margin: 15px 0 3px; font-family: var(--serif); font-size: 46px; font-weight: 700; letter-spacing: -.045em; }
.price-card .price small { font-family: var(--sans); font-size: 12px; color: var(--muted); letter-spacing: 0; }
.price-card > p { min-height: 80px; color: var(--muted); }
.price-card ul { flex: 1; list-style: none; padding: 0; margin: 18px 0 28px; display: grid; gap: 11px; }
.price-card li::before { content: "✓"; margin-right: 8px; color: var(--teal); font-weight: 900; }

.final-cta-section { padding-top: 55px; }
.final-cta { position: relative; overflow: hidden; min-height: 390px; display: grid; grid-template-columns: 1fr .45fr; align-items: center; gap: 40px; padding: 60px; border-radius: 38px; background: linear-gradient(135deg, #173f43, #225b59); color: #fff; box-shadow: var(--shadow); }
.final-cta::before { content: ""; position: absolute; right: -90px; top: -110px; width: 360px; height: 360px; border-radius: 50%; background: rgba(245,170,42,.22); }
.final-cta .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.final-cta h2 { max-width: 700px; }
.final-cta p { max-width: 650px; color: rgba(255,255,255,.73); }
.final-cta .button { margin-top: 16px; }
.cta-envelope { position: relative; z-index: 2; justify-self: center; width: 220px; height: 150px; border-radius: 12px; background: #fff4df; transform: rotate(-8deg); box-shadow: 0 25px 40px rgba(0,0,0,.18); }
.cta-envelope::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0,50% 62%,100% 0); background: #f3d6b9; }
.cta-envelope span { position: absolute; z-index: 2; left: 89px; top: 68px; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: white; }

/* Footer */
.public-footer { padding: 62px 0 24px; border-top: 1px solid var(--line); background: #fffaf3; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; }
.footer-brand p { max-width: 430px; color: var(--muted); }
.footer-confetti { color: var(--gold); letter-spacing: .25em; }
.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 8px; }
.footer-grid strong { margin-bottom: 6px; font-family: var(--serif); font-size: 17px; }
.footer-grid a:not(.brand) { color: var(--muted); font-size: 13px; }
.footer-grid a:not(.brand):hover { color: var(--coral); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 45px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

/* Auth */
.auth-page { min-height: calc(100vh - 82px); padding: 54px 22px 80px; display: grid; place-items: center; position: relative; overflow: hidden; }
.auth-page::before { content: "✦"; position: absolute; top: 14%; left: 13%; color: var(--gold); font-size: 34px; transform: rotate(13deg); }
.auth-page::after { content: "✉"; position: absolute; right: 8%; bottom: 12%; color: var(--coral); font-size: 75px; transform: rotate(-12deg); opacity: .15; }
.auth-card { position: relative; z-index: 2; width: min(520px, 100%); padding: 40px; border: 1px solid #ecdccc; border-radius: 30px; background: rgba(255,255,255,.91); box-shadow: var(--shadow); }
.auth-card::before { content: ""; position: absolute; left: 34px; top: -7px; width: 58px; height: 15px; border-radius: 20px; background: var(--gold); opacity: .75; transform: rotate(-4deg); }
.auth-card .brand { margin-bottom: 15px; }
.auth-card h1 { margin: 16px 0 7px; font-family: var(--serif); font-size: 39px; letter-spacing: -.045em; }
.auth-card > p { margin-top: 0; color: var(--muted); }
.auth-footer { margin-top: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.auth-footer a { color: var(--coral); font-weight: 850; }

/* Forms */
.form-grid { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
.field label { color: var(--ink-soft); font-size: 12px; font-weight: 850; }
.field input, .field textarea, .field select, .search-box input { width: 100%; border: 1px solid var(--line-strong); border-radius: 13px; background: #fffdfa; color: var(--ink); padding: 12px 13px; outline: none; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .search-box input:focus { border-color: var(--coral); background: #fff; box-shadow: 0 0 0 4px rgba(244,93,72,.11); }
.field small { color: var(--muted); font-size: 11px; }

/* App shell */
.app-shell { background: #fffaf4; }
.app-layout { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 25px 18px 20px; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff2e6, #f9e6d6); border-right: 1px solid #ead7c5; color: var(--ink); }
.sidebar::after { content: "✿"; position: absolute; right: -20px; bottom: 185px; color: var(--coral); font-size: 65px; opacity: .09; transform: rotate(18deg); }
.sidebar-brand { padding: 0 9px 22px; border-bottom: 1px solid rgba(218,195,175,.75); }
.sidebar-brand .brand-word { font-size: 28px; }
.sidebar-tagline { display: block; margin-top: 8px; color: #9a7c66; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 6px; margin-top: 18px; }
.sidebar-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 13px; color: #6e6258; font-size: 13px; font-weight: 750; transition: .18s ease; }
.sidebar-nav a:hover { color: var(--coral-dark); background: rgba(255,255,255,.58); }
.sidebar-nav a.active { color: var(--coral-dark); background: #fff; box-shadow: 0 8px 18px rgba(97,66,43,.08); }
.nav-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.55); color: var(--coral); font-size: 13px; }
.sidebar-nav a.active .nav-icon { color: #fff; background: var(--coral); }
.sidebar-tip { margin: auto 4px 17px; padding: 14px; border: 1px solid rgba(226,194,162,.85); border-radius: 16px; background: rgba(255,255,255,.48); display: flex; gap: 9px; }
.sidebar-tip > span { color: var(--gold); }
.sidebar-tip div { display: grid; }
.sidebar-tip strong { font-family: var(--serif); font-size: 13px; }
.sidebar-tip small { margin-top: 3px; color: #8a7768; font-size: 9px; line-height: 1.45; }
.sidebar-footer { padding: 17px 8px 0; border-top: 1px solid rgba(218,195,175,.75); }
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-chip > span { width: 37px; height: 37px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; background: linear-gradient(145deg, var(--coral), var(--peach)); color: #fff; font-family: var(--serif); font-weight: 800; }
.user-chip div { display: grid; min-width: 0; }
.user-chip strong, .user-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip strong { font-size: 12px; }.user-chip small { color: #9a7c66; font-size: 9px; }
.muted-link { display: inline-block; margin-top: 13px; color: #9a7c66; font-size: 10px; font-weight: 800; }
.main-content { position: relative; min-width: 0; padding: 38px 42px 70px; overflow: hidden; }
.main-content::before { content: ""; position: fixed; z-index: -1; right: -130px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(245,170,42,.13), rgba(245,170,42,0) 68%); }
.mobile-topbar { display: none; }
.app-confetti { position: absolute; width: 12px; height: 6px; border-radius: 2px; opacity: .7; }
.app-confetti-one { right: 4%; top: 38px; background: var(--teal); transform: rotate(28deg); }
.app-confetti-two { right: 7%; top: 83px; background: var(--gold); transform: rotate(-18deg); }

.page-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 27px; }
.page-top h1 { margin: 0 0 5px; font-family: var(--serif); font-size: 37px; line-height: 1.08; letter-spacing: -.04em; }
.page-top p { margin: 0; color: var(--muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid #eddfd2; border-radius: 19px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-soft); }
.stat-card::after { content: ""; position: absolute; right: -18px; bottom: -30px; width: 75px; height: 75px; border-radius: 50%; background: var(--coral-soft); }
.stat-card:nth-child(2)::after { background: var(--gold-soft); }.stat-card:nth-child(3)::after { background: var(--teal-soft); }.stat-card:nth-child(4)::after { background: #f7e3eb; }
.stat-card small { color: var(--muted); font-size: 11px; font-weight: 750; }
.stat-card strong { display: block; margin-top: 8px; font-family: var(--serif); font-size: 32px; letter-spacing: -.04em; }
.stat-card .trend { margin-top: 4px; color: var(--green); font-size: 10px; font-weight: 750; }
.panel-grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: 18px; }
.panel { padding: 23px; border: 1px solid #eaded1; border-radius: 20px; background: rgba(255,255,255,.91); box-shadow: var(--shadow-soft); }
.panel + .panel { margin-top: 18px; }.panel-grid .panel + .panel { margin-top: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 17px; }
.panel-head h2 { margin: 0; font-family: var(--serif); font-size: 21px; letter-spacing: -.02em; }
.panel-head a { color: var(--coral); font-size: 11px; font-weight: 850; }
.empty-state { padding: 45px 20px; text-align: center; color: var(--muted); }
.empty-state::before { content: "✉"; display: block; margin-bottom: 12px; color: var(--coral); font-size: 36px; }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--ink); font-family: var(--serif); font-size: 20px; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-soft); }
table { width: 100%; min-width: 720px; border-collapse: collapse; }
th, td { padding: 14px 15px; border-bottom: 1px solid #f0e7dd; text-align: left; vertical-align: middle; font-size: 12px; }
th { background: #fff8f1; color: #9a8170; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fffaf5; }
td strong { display: block; } td small { color: var(--muted); }
.badge { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; background: #f2eee8; color: #6e6b66; font-size: 9px; font-weight: 900; text-transform: capitalize; }
.badge-active, .badge-sent { background: var(--green-soft); color: #286a48; }
.badge-draft { background: var(--gold-soft); color: #896116; }
.badge-unsubscribed, .badge-failed { background: #fae5e5; color: #9c3c3c; }
.row-actions { display: flex; gap: 8px; white-space: nowrap; }
.link-button { appearance: none; border: 0; background: transparent; padding: 0; color: var(--coral); font-size: 11px; font-weight: 850; }
.link-button.danger { color: var(--danger); }

.toolbar { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.search-box { min-width: 260px; max-width: 430px; flex: 1; }
.inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 20px; background: rgba(34,40,45,.48); backdrop-filter: blur(6px); }
.modal.open { display: grid; }
.modal-card { width: min(620px,100%); max-height: 90vh; overflow: auto; padding: 28px; border: 1px solid #ead9c9; border-radius: 25px; background: #fffaf4; box-shadow: 0 30px 90px rgba(45,35,29,.24); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-head h2 { margin: 0; font-family: var(--serif); }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 11px; background: var(--coral-soft); color: var(--coral-dark); font-size: 20px; }

.editor-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(330px,.92fr); gap: 18px; }
.editor-preview { min-height: 620px; padding: 22px; border: 1px solid #e6d8c9; border-radius: 19px; background: #f2e9df; }
.email-canvas { min-height: 520px; max-width: 620px; margin: 0 auto; background: #fff; box-shadow: 0 14px 35px rgba(76,50,31,.12); }
.code-editor { min-height: 420px !important; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.template-card { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-soft); transition: transform .18s ease; }
.template-card:hover { transform: translateY(-4px); }
.template-thumb { min-height: 250px; padding: 17px; background: linear-gradient(145deg, #fff1e5, #f7dfca); }
.template-paper { min-height: 216px; padding: 22px 15px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.06); font-size: 10px; }
.template-paper h3 { font-family: var(--serif); font-size: 21px; line-height: 1.05; }
.template-meta { display: flex; justify-content: space-between; align-items: center; padding: 15px; }
.template-meta strong { font-size: 13px; }.template-meta a { color: var(--coral); font-size: 11px; font-weight: 850; }
.automation-card { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 21px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-soft); }
.automation-card h3 { margin: 0 0 4px; font-family: var(--serif); }.automation-card p { margin: 0; color: var(--muted); }
.switch { position: relative; display: inline-block; width: 50px; height: 29px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #d9cec1; transition: .2s; }
.switch span::before { content: ""; position: absolute; left: 3px; top: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: .2s; }
.switch input:checked + span { background: var(--coral); }.switch input:checked + span::before { transform: translateX(21px); }
.flash { position: fixed; z-index: 100; top: 18px; right: 18px; max-width: 420px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); font-size: 13px; }
.flash-success { border-color: #a9d7ba; color: #246744; }.flash-warning { border-color: #e9cf8a; color: #805b11; }.flash-error { border-color: #e8b4b4; color: #9f3737; }
.notice { padding: 14px 16px; border: 1px solid #edd8b8; border-radius: 14px; background: #fff4d9; color: #7a5b22; font-size: 12px; }
.kpi-list { display: grid; gap: 13px; }
.kpi-item { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid #f0e6dc; }
.kpi-item:last-child { padding-bottom: 0; border-bottom: 0; }.kpi-item span { color: var(--muted); }

/* Responsive */
@media (max-width: 1120px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy-block { max-width: 790px; }
    .hero-visual { width: min(860px,100%); margin: 0 auto; }
    .feature-grid-four { grid-template-columns: repeat(2,1fr); }
    .testimonial-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .public-header { grid-template-columns: 1fr auto; }
    .public-header nav { display: none; }
    .hero { padding-top: 52px; }
    .panel-grid, .editor-layout, .story-grid { grid-template-columns: 1fr; }
    .story-art { min-height: 390px; }
    .feature-grid, .pricing-grid, .template-grid, .showcase-grid { grid-template-columns: repeat(2,1fr); }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
    .app-layout { grid-template-columns: 1fr; }
    .sidebar { position: fixed; z-index: 70; width: 260px; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 20px 0 50px rgba(58,44,34,.2); }
    .sidebar.open { transform: translateX(0); }
    .main-content { padding: 22px; }
    .mobile-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
    .menu-button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font-weight: 800; }
    .split-heading { grid-template-columns: 1fr; gap: 0; }
    .final-cta { grid-template-columns: 1fr; }
    .cta-envelope { display: none; }
}

@media (max-width: 720px) {
    .container { width: min(100% - 28px,1210px); }
    .public-header { min-height: 72px; }
    .brand-word { font-size: 27px; }
    .header-actions { gap: 10px; }.login-link { display: none; }
    .hero h1 { font-size: 52px; }
    .hero-copy { font-size: 17px; }
    .hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }
    .hero-visual { min-height: 590px; }
    .dashboard-preview { top: 25px; width: 100%; grid-template-columns: 105px 1fr; }
    .mascot-card { left: 4%; bottom: -12px; width: 52%; }
    .mascot-card img { height: 390px; }
    .preview-main { padding: 20px 15px; }
    .preview-stats { grid-template-columns: repeat(3,1fr); gap: 5px; }
    .preview-stats > div { padding: 8px; }.preview-stats b { font-size: 12px; }
    .preview-campaign { grid-template-columns: 1fr; }.preview-chart { display: none; }
    .feature-grid, .feature-grid-four, .pricing-grid, .template-grid, .showcase-grid, .testimonial-grid, .footer-grid { grid-template-columns: 1fr; }
    .section { padding: 67px 0; }
    .feature-card p { min-height: 0; }
    .story-art { min-height: 330px; }
    .mailbox { transform: translate(-50%,-50%) scale(.82); }
    .testimonial-wrap { padding: 28px 20px; }
    .testimonial-grid blockquote p { min-height: 0; }
    .price-card.featured { margin: 0; }
    .final-cta { padding: 38px 25px; }
    .footer-bottom { flex-direction: column; }
    .page-top { display: block; }.page-actions { margin-top: 16px; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .auth-card { padding: 29px 24px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 44px; }
    .hero-visual { min-height: 520px; }
    .dashboard-preview { grid-template-columns: 1fr; min-height: 355px; }
    .preview-sidebar { display: none; }
    .mascot-card { width: 60%; }.mascot-card img { height: 325px; }
    .stat-grid { grid-template-columns: 1fr; }
    .main-content { padding: 17px; }
}

.dashboard-welcome { position: relative; overflow: hidden; min-height: 185px; display: grid; grid-template-columns: 1fr 190px; align-items: center; gap: 20px; margin-bottom: 20px; padding: 28px 31px; border: 1px solid #edd6c4; border-radius: 24px; background: linear-gradient(135deg, #ffe8dc, #fff1d8); box-shadow: var(--shadow-soft); }
.dashboard-welcome::after { content: "✦"; position: absolute; right: 210px; top: 25px; color: var(--gold); font-size: 22px; }
.dashboard-kicker { color: var(--coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-welcome h2 { max-width: 650px; margin: 8px 0 5px; font-family: var(--serif); font-size: 28px; line-height: 1.1; letter-spacing: -.025em; }
.dashboard-welcome p { margin: 0; color: var(--muted); font-size: 13px; }
.dashboard-envelope { position: relative; justify-self: center; width: 135px; height: 92px; border-radius: 9px; background: #fff; box-shadow: 0 18px 30px rgba(94,61,36,.13); transform: rotate(6deg); }
.dashboard-envelope::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0,50% 62%,100% 0); background: #f2d2bb; }
.dashboard-envelope span { position: absolute; z-index: 2; left: 51px; top: 41px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: #fff; }
@media (max-width: 720px) { .dashboard-welcome { grid-template-columns: 1fr; }.dashboard-envelope { display: none; } }

.auth-layout { position: relative; z-index: 2; width: min(1010px,100%); display: grid; grid-template-columns: .95fr 1.05fr; align-items: stretch; border: 1px solid #ecdccc; border-radius: 34px; background: rgba(255,255,255,.7); box-shadow: var(--shadow); overflow: hidden; }
.auth-layout .auth-card { width: 100%; border: 0; border-radius: 0; box-shadow: none; background: rgba(255,255,255,.96); }
.auth-layout .auth-card::before { display: none; }
.auth-visual { position: relative; overflow: hidden; min-height: 640px; padding: 47px 42px 0; background: linear-gradient(150deg,#ffe8da,#fff2d9); }
.auth-visual::before { content: "✦"; position: absolute; right: 45px; top: 36px; color: var(--gold); font-size: 25px; }
.auth-visual::after { content: ""; position: absolute; left: -80px; right: -80px; bottom: -130px; height: 270px; border-radius: 50%; background: rgba(245,170,42,.24); }
.auth-visual-kicker { color: var(--coral-dark); font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.auth-visual h2 { max-width: 440px; margin: 12px 0 11px; font-family: var(--serif); font-size: 39px; line-height: 1.05; letter-spacing: -.04em; }
.auth-visual p { max-width: 410px; margin: 0; color: var(--muted); }
.auth-visual img { position: absolute; z-index: 2; left: 50%; bottom: -15px; width: 340px; height: 450px; object-fit: cover; object-position: 50% 28%; transform: translateX(-50%); border-radius: 120px 120px 25px 25px; filter: drop-shadow(0 18px 25px rgba(75,48,29,.16)); }
@media (max-width: 860px) { .auth-layout { grid-template-columns: 1fr; width: min(530px,100%); }.auth-visual { display:none; } }

/* Accessibility + readable dashboard */
:root { --ui-font-scale: 1; }
html[data-font-scale="sm"] { font-size: 15px; }
html[data-font-scale="md"] { font-size: 16px; }
html[data-font-scale="lg"] { font-size: 18px; }
html[data-font-scale="xl"] { font-size: 20px; }

.font-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); font-weight:700; }
.font-controls .font-btn { min-width:38px; min-height:34px; border-radius:12px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); font-weight:800; }
.font-controls .font-btn:hover { background:var(--cream-deep); }
.public-font-strip { display:flex; justify-content:flex-end; padding:8px 0 12px; }
.mobile-font-controls { display:none; padding:8px 20px 0; }

.sidebar { font-size: 17px; }
.sidebar-nav { gap:8px; display:grid; }
.sidebar-nav a { display:flex; align-items:center; gap:12px; min-height:52px; padding:13px 16px; border-radius:16px; font-size:16px; font-weight:800; }
.sidebar-nav a span:last-child { line-height:1.25; }
.nav-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--cream-deep); font-size:15px; }
.sidebar-tagline { font-size:14px; }
.sidebar-help-card { margin:14px 0 18px; padding:16px; border-radius:18px; background:#fff7f2; border:1px solid var(--line); display:grid; gap:7px; box-shadow:var(--shadow-soft); }
.sidebar-help-card strong { font-size:15px; }
.sidebar-help-card small { font-size:13px; color:var(--ink-soft); }
.sidebar-tip small, .user-chip small, table td small { font-size:13px !important; }
.page-top p, .panel p, .notice, .empty-state, .toolbar, .field small { font-size:15px; }
.panel-head h2 { font-size:1.35rem; }
.table-wrap table th { font-size:14px; }
.table-wrap table td { font-size:15px; }
.badge { font-size:13px; }
.search-box input, .field input, .field textarea, .field select { font-size:16px; }
.field label { font-size:15px; font-weight:800; }

.panel-intro { margin-bottom:18px; padding:18px; border-radius:18px; background:linear-gradient(180deg, #fffaf6, #fff3eb); border:1px solid var(--line); }
.panel-intro h3 { margin:0 0 8px; font-size:1.2rem; }
.panel-intro p { margin:0; color:var(--ink-soft); }
.tip-list { margin:8px 0 0; padding-left:18px; color:var(--ink-soft); }
.tip-list li { margin:6px 0; }
.helper-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.helper-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow-soft); }
.helper-card strong { display:block; margin-bottom:6px; font-size:17px; }
.helper-card p { margin:0; color:var(--ink-soft); }

.builder-shell { display:grid; gap:16px; }
.builder-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.builder-tab { border:1px solid var(--line-strong); background:#fff; color:var(--ink); border-radius:999px; padding:10px 14px; font-weight:800; }
.builder-tab.active { background:var(--coral); border-color:var(--coral); color:#fff; }
.builder-panel { display:none; }
.builder-panel.active { display:block; }
.easy-builder { display:grid; gap:16px; }
.builder-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.builder-grid .field-full { grid-column:1 / -1; }
.builder-card { padding:18px; border:1px solid var(--line); border-radius:18px; background:#fffdf9; }
.builder-card h3 { margin:0 0 6px; font-size:1.12rem; }
.builder-card p { margin:0 0 12px; color:var(--ink-soft); }
.theme-pills { display:flex; gap:10px; flex-wrap:wrap; }
.theme-pills label { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid var(--line-strong); background:#fff; cursor:pointer; font-weight:700; }
.theme-pills input { accent-color:var(--coral); }
.editor-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px, 0.9fr); gap:20px; align-items:start; }
.email-canvas { min-height:900px; background:#fff; border-radius:22px; box-shadow:var(--shadow-soft); }
.code-editor { min-height:340px; }

.quick-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin:18px 0; }
.quick-card { display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.quick-card .quick-icon { width:52px; height:52px; border-radius:16px; background:var(--coral-soft); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.quick-card strong { display:block; margin-bottom:6px; font-size:18px; }
.quick-card p { margin:0 0 10px; color:var(--ink-soft); }
.step-strip { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:18px; }
.step-card { padding:18px; border-radius:18px; background:#fffaf5; border:1px dashed var(--line-strong); }
.step-card span { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--coral); color:#fff; font-weight:800; margin-bottom:10px; }
.step-card strong { display:block; margin-bottom:6px; }
.step-card p { margin:0; color:var(--ink-soft); }

.modal-card .download-row, .download-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:14px; background:#fff8ef; border:1px dashed var(--line-strong); }

.plan-grid, .admin-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.plan-card, .admin-card { background:#fff; border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:var(--shadow-soft); }
.plan-card.highlight { background:linear-gradient(180deg,#fff4ef,#fffdf9); border-color:#f5b9a9; }
.plan-price { font-size:2.2rem; font-weight:900; margin:8px 0; }
.plan-card ul { padding-left:20px; color:var(--ink-soft); }
.plan-card li { margin:8px 0; }
.callout { padding:18px; border-radius:18px; background:#fff8ef; border:1px solid var(--line); }
.callout strong { display:block; margin-bottom:6px; }
.subtle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.admin-card small { display:block; color:var(--ink-soft); margin-top:6px; }
.admin-card strong { font-size:1.9rem; display:block; margin-top:6px; }
.data-list { display:grid; gap:12px; }
.data-item { display:flex; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:16px; background:#fffdf9; border:1px solid var(--line); }
.data-item div:last-child { text-align:right; }
.kicker-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--gold-soft); color:#946200; font-size:12px; font-weight:800; }

@media (max-width: 980px) {
  .editor-layout, .quick-grid, .step-strip, .helper-grid, .plan-grid, .admin-grid, .subtle-grid, .builder-grid { grid-template-columns:1fr; }
  .mobile-font-controls { display:block; }
  .public-font-strip { justify-content:flex-start; }
}

/* ========================================================================== 
   SendFiesta friendly workspace — accessibility, visual editor and admin
   ========================================================================== */
html { font-size: 16px; }
body { font-size: 1rem; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; z-index:9999; left:18px; top:12px; padding:12px 17px; border-radius:12px; background:var(--ink); color:#fff; font-weight:850; transform:translateY(-160%); transition:transform .18s ease; }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid rgba(23,139,136,.42); outline-offset:3px; }

/* Text-size control */
.accessibility-tools { display:flex; align-items:center; gap:6px; padding:6px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.82); box-shadow:0 4px 14px rgba(97,66,43,.05); }
.accessibility-label { margin:0 4px 0 3px; color:var(--ink-soft); font-size:.78rem; font-weight:850; white-space:nowrap; }
.accessibility-tools button { display:grid; place-items:center; min-width:35px; min-height:35px; padding:0 7px; border:1px solid transparent; border-radius:10px; background:#fff8f1; color:var(--ink); font-size:.88rem; font-weight:900; line-height:1; }
.accessibility-tools button:hover { border-color:var(--coral); background:var(--coral-soft); color:var(--coral-dark); }
.accessibility-tools button:disabled { opacity:.38; }

/* Readable member workspace */
.app-shell { background:linear-gradient(145deg,#fff8ef 0%,#fffdf8 46%,#f5fbf8 100%); }
.app-layout { min-height:100vh; display:grid; grid-template-columns:292px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; overflow:auto; display:flex; flex-direction:column; padding:25px 20px 20px; border-right:1px solid #eadccf; background:rgba(255,250,244,.94); backdrop-filter:blur(16px); }
.sidebar-brand { display:grid; gap:8px; padding:0 9px 21px; border-bottom:1px solid var(--line); }
.sidebar-brand .brand-word { font-size:2rem; }
.sidebar-tagline { color:var(--muted); font-size:.88rem; font-weight:720; }
.sidebar-nav { display:grid; gap:7px; margin:20px 0; }
.sidebar-nav a { display:flex; align-items:center; gap:12px; min-height:54px; padding:12px 14px; border:1px solid transparent; border-radius:17px; color:var(--ink-soft); font-size:1rem; font-weight:820; line-height:1.22; transition:.18s ease; }
.sidebar-nav a:hover { transform:translateX(2px); border-color:var(--line); background:#fff; color:var(--ink); }
.sidebar-nav a.active { border-color:#f7c8ba; background:linear-gradient(135deg,#ffe6de,#fff3e7); color:var(--coral-dark); box-shadow:0 9px 20px rgba(244,93,72,.10); }
.nav-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:12px; background:var(--cream-deep); color:var(--ink); font-size:1rem; }
.sidebar-nav a.active .nav-icon { background:var(--coral); color:#fff; }
.sidebar-plan { display:grid; gap:9px; margin:3px 0 16px; padding:16px; border:1px solid #e6dacb; border-radius:19px; background:#fff; box-shadow:var(--shadow-soft); }
.sidebar-plan div:first-child { display:grid; gap:2px; }
.sidebar-plan span { color:var(--muted); font-size:.76rem; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.sidebar-plan strong { font-size:.86rem; line-height:1.35; }
.sidebar-plan a { color:var(--coral-dark); font-size:.86rem; font-weight:900; }
.mini-progress,.usage-progress { overflow:hidden; height:9px; border-radius:999px; background:#f0e6dc; }
.mini-progress span,.usage-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--coral),#f58c62); }
.usage-progress.teal span { background:linear-gradient(90deg,var(--teal),#4bb7a9); }
.sidebar > .accessibility-tools { margin:0 0 16px; align-self:stretch; justify-content:center; }
.sidebar-footer { margin-top:auto; display:grid; gap:13px; padding-top:17px; border-top:1px solid var(--line); }
.user-chip { display:flex; align-items:center; gap:11px; min-width:0; }
.user-chip > span { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border-radius:50%; background:var(--teal-soft); color:var(--teal); font-weight:900; }
.user-chip div { min-width:0; display:grid; }
.user-chip strong { overflow:hidden; text-overflow:ellipsis; font-size:.94rem; white-space:nowrap; }
.user-chip small { overflow:hidden; color:var(--muted); font-size:.78rem!important; text-overflow:ellipsis; white-space:nowrap; }
.muted-link { color:var(--muted); font-size:.88rem; font-weight:800; }
.main-content { position:relative; min-width:0; padding:35px clamp(24px,4vw,60px) 70px; }
.mobile-topbar { display:none; }
.app-confetti { position:fixed; z-index:-1; width:9px; height:25px; border-radius:3px; opacity:.35; }
.app-confetti-one { right:5%; top:18%; background:var(--gold); transform:rotate(26deg); }
.app-confetti-two { right:2%; bottom:12%; background:var(--teal); transform:rotate(-18deg); }

/* Shared page patterns */
.page-top { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 25px; }
.page-top h1 { margin:5px 0 4px; font-family:var(--serif); font-size:clamp(2rem,3vw,3rem); line-height:1.06; letter-spacing:-.035em; }
.page-top p { margin:0; color:var(--muted); font-size:1rem; }
.page-eyebrow { color:var(--coral-dark); font-size:.78rem; font-weight:950; letter-spacing:.09em; text-transform:uppercase; }
.page-actions { display:flex; flex-wrap:wrap; gap:10px; }
.panel { margin-bottom:20px; padding:24px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.91); box-shadow:var(--shadow-soft); }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.panel-head h2 { margin:0 0 5px; font-family:var(--serif); font-size:1.45rem; line-height:1.15; }
.panel-head p { margin:0; color:var(--muted); font-size:.94rem; }
.panel-head > a { color:var(--coral-dark); font-weight:900; }
.panel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.empty-state { padding:35px 20px; border:1px dashed var(--line-strong); border-radius:18px; background:#fffbf6; color:var(--muted); text-align:center; }
.empty-state strong { display:block; margin-bottom:5px; color:var(--ink); font-size:1.05rem; }
.empty-state.compact { padding:24px 18px; }
.badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:var(--cream-deep); color:var(--ink-soft); font-size:.76rem; font-weight:900; text-transform:capitalize; white-space:nowrap; }
.badge-sent,.badge-active,.badge-approved { background:var(--green-soft); color:#246c45; }
.badge-draft,.badge-pending { background:var(--gold-soft); color:#85600f; }
.badge-failed,.badge-rejected,.badge-unsubscribed { background:#ffe6e2; color:#a13e3e; }
.notice { padding:15px 17px; border:1px solid #edd8b8; border-radius:15px; background:#fff4d9; color:#6d531e; font-size:.94rem; line-height:1.55; }
.button,.button-small,.button-large { font-size:.96rem; }
.link-button,.text-action { border:0; background:none; color:var(--teal); font-weight:900; }
.link-button.danger { color:var(--danger); }
.search-box input { min-width:240px; min-height:44px; padding:0 14px; border:1px solid var(--line-strong); border-radius:13px; background:#fff; font-size:1rem; }

/* Forms that feel calm and obvious */
.form-grid { display:grid; gap:17px; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }
.field { display:grid; gap:7px; }
.field label { color:var(--ink); font-size:.95rem; font-weight:850; }
.field input,.field textarea,.field select,.admin-user-controls input,.admin-user-controls select,.payment-review input { width:100%; min-height:48px; padding:11px 13px; border:1px solid var(--line-strong); border-radius:13px; background:#fff; color:var(--ink); font-size:1rem; }
.field textarea { min-height:120px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus,.admin-user-controls input:focus,.admin-user-controls select:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(23,139,136,.11); outline:0; }
.field small { color:var(--muted); font-size:.86rem; }
.friendly-form { max-width:1000px; }
.friendly-check { display:flex; align-items:flex-start; gap:11px; padding:14px 16px; border:1px solid var(--line); border-radius:15px; background:#fffaf5; font-size:.94rem; line-height:1.45; }
.friendly-check input { width:20px; height:20px; flex:0 0 20px; margin-top:1px; accent-color:var(--coral); }
.step-bubble { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:50%; background:var(--coral); color:#fff; font-weight:950; }
.builder-heading { display:flex; align-items:center; gap:12px; }
.builder-heading div { display:grid; }
.builder-heading small { color:var(--muted); }
.campaign-basics { background:linear-gradient(135deg,#fff,#fff8f1); }
.finish-card { background:linear-gradient(135deg,#fff4ec,#fffdf8); }
.finish-card .friendly-check { margin-bottom:16px; }
.save-bar { position:sticky; z-index:12; bottom:15px; display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding:13px; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,249,.91); box-shadow:0 12px 35px rgba(74,50,33,.14); backdrop-filter:blur(14px); }

/* Friendly home dashboard */
.dashboard-title { align-items:center; }
.quick-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.quick-action-card { position:relative; overflow:hidden; display:flex; gap:15px; min-height:205px; padding:23px; border:1px solid var(--line); border-radius:25px; background:#fff; box-shadow:var(--shadow-soft); transition:.2s ease; }
.quick-action-card::after { content:"✦"; position:absolute; right:17px; top:13px; opacity:.28; font-size:1.35rem; }
.quick-action-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.quick-action-card.coral { background:linear-gradient(145deg,#fff,#fff0e9); }
.quick-action-card.teal { background:linear-gradient(145deg,#fff,#ebf8f4); }
.quick-action-card.gold { background:linear-gradient(145deg,#fff,#fff5d9); }
.quick-action-icon { width:55px; height:55px; display:grid; place-items:center; flex:0 0 55px; border-radius:18px; background:#fff; box-shadow:0 8px 18px rgba(80,52,34,.09); font-size:1.45rem; }
.quick-action-card small { color:var(--coral-dark); font-size:.7rem; font-weight:950; letter-spacing:.09em; }
.quick-action-card h2 { margin:6px 0 7px; font-family:var(--serif); font-size:1.45rem; }
.quick-action-card p { margin:0 0 13px; color:var(--muted); font-size:.91rem; }
.quick-action-card strong { color:var(--teal); font-size:.92rem; }
.dashboard-main-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:20px; margin-bottom:20px; }
.onboarding-card,.plan-usage-card { padding:24px; border:1px solid var(--line); border-radius:25px; background:#fff; box-shadow:var(--shadow-soft); }
.onboarding-card { background:linear-gradient(145deg,#fff,#fff8f1); }
.onboarding-head { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.onboarding-head span { color:var(--coral-dark); font-size:.76rem; font-weight:950; text-transform:uppercase; letter-spacing:.06em; }
.onboarding-head h2,.plan-usage-card h2 { margin:5px 0; font-family:var(--serif); font-size:1.5rem; }
.onboarding-head p { margin:0; color:var(--muted); font-size:.92rem; }
.onboarding-ring { --progress:0; width:84px; height:84px; display:grid; place-items:center; flex:0 0 84px; border-radius:50%; background:conic-gradient(var(--coral) calc(var(--progress)*1%),#f1e4d7 0); position:relative; }
.onboarding-ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#fff; }
.onboarding-ring strong { z-index:1; font-size:.9rem; }
.friendly-checklist { display:grid; gap:9px; margin-top:20px; }
.friendly-checklist a { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:#fff; font-size:.94rem; }
.friendly-checklist a > span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--cream-deep); color:var(--coral); font-weight:900; }
.friendly-checklist a.done { opacity:.7; }
.friendly-checklist a.done > span { background:var(--green-soft); color:var(--green); }
.friendly-checklist em { color:var(--coral); font-style:normal; font-weight:900; }
.plan-usage-card { position:relative; overflow:hidden; background:linear-gradient(150deg,#fff7d9,#fff); }
.plan-ribbon { display:inline-flex; padding:6px 10px; border-radius:999px; background:var(--gold); color:#fff; font-size:.74rem; font-weight:950; text-transform:uppercase; letter-spacing:.05em; }
.big-usage { display:grid; margin:19px 0 9px; }
.big-usage strong { font-family:var(--serif); font-size:2rem; line-height:1; }
.big-usage span { color:var(--muted); font-size:.82rem; }
.big-usage.sends { margin-top:18px; }
.plan-usage-card .button { margin-top:20px; }
.plain-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:20px; }
.plain-stats > div { display:grid; min-height:180px; padding:20px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-soft); }
.stat-picture { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--teal-soft); color:var(--teal); font-size:1.2rem; }
.plain-stats small { margin-top:14px; color:var(--muted); font-size:.8rem; font-weight:850; }
.plain-stats strong { font-family:var(--serif); font-size:2rem; }
.plain-stats p { margin:auto 0 0; color:var(--muted); font-size:.82rem; }
.dashboard-panels { margin-bottom:20px; }
.friendly-list { display:grid; gap:9px; }
.friendly-list > a,.admin-campaign-row { display:flex; align-items:center; gap:12px; min-width:0; padding:12px 13px; border:1px solid var(--line); border-radius:15px; background:#fffdf9; }
.friendly-list > a:hover { background:#fff4ed; }
.list-icon,.contact-avatar { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border-radius:13px; background:var(--coral-soft); color:var(--coral-dark); font-weight:950; }
.contact-avatar { border-radius:50%; background:var(--teal-soft); color:var(--teal); }
.friendly-list > a > div:nth-child(2),.admin-campaign-row > div:nth-child(2) { min-width:0; flex:1; display:grid; }
.friendly-list strong { font-size:.91rem; }
.friendly-list small { overflow:hidden; color:var(--muted); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.list-metric { flex:0 0 auto!important; text-align:right; }
.list-metric small { font-size:.7rem; }
.help-banner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:17px; padding:22px 24px; border:1px solid #f1cbbb; border-radius:24px; background:linear-gradient(135deg,#ffe7df,#fff7e7); }
.help-envelope { width:54px; height:45px; display:grid; place-items:center; border-radius:8px; background:#fff; color:var(--coral); font-size:1.4rem; font-weight:950; transform:rotate(-5deg); box-shadow:0 8px 18px rgba(84,55,36,.10); }
.help-banner h2 { margin:0 0 3px; font-family:var(--serif); font-size:1.35rem; }
.help-banner p { margin:0; color:var(--ink-soft); font-size:.91rem; }

/* Contacts and CSV import */
.contact-help-strip { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:15px; margin-bottom:20px; padding:18px 20px; border:1px solid #bde0d5; border-radius:21px; background:linear-gradient(135deg,#eaf8f3,#fff); }
.contact-help-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:#fff; color:var(--teal); font-size:1.35rem; box-shadow:var(--shadow-soft); }
.contact-help-strip h2 { margin:0 0 3px; font-family:var(--serif); font-size:1.3rem; }
.contact-help-strip p { margin:0; color:var(--muted); font-size:.9rem; }
.usage-inline { min-width:180px; }
.usage-inline small { display:block; color:var(--muted); font-size:.76rem; font-weight:800; }
.csv-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:17px 0; }
.csv-guide > div { padding:15px; border:1px solid var(--line); border-radius:16px; background:#fffaf5; }
.csv-guide span { width:29px; height:29px; display:grid; place-items:center; margin-bottom:8px; border-radius:50%; background:var(--coral); color:#fff; font-weight:950; }
.csv-guide strong { display:block; font-size:.92rem; }
.csv-guide p { margin:4px 0 0; color:var(--muted); font-size:.82rem; }
.file-drop { padding:19px; border:2px dashed #d8c7b4; border-radius:17px; background:#fffaf4; }
.file-drop input { border:0; padding:8px 0; background:transparent; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:17px; }
table { width:100%; border-collapse:collapse; background:#fff; }
th,td { padding:14px 15px; border-bottom:1px solid #eee4d9; text-align:left; vertical-align:middle; }
th { background:#fff8f1; color:var(--ink-soft); font-size:.8rem; font-weight:900; white-space:nowrap; }
td { font-size:.91rem; }
tr:last-child td { border-bottom:0; }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; }
.muted-dash { color:#aaa; }
.friendly-empty .empty-illustration { display:block; margin:0 auto 13px; font-size:2rem; }

/* Useful templates */
.template-grid.upgraded { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.practical-template { display:flex; flex-direction:column; overflow:hidden; min-height:490px; }
.practical-template .template-thumb { min-height:305px; padding:18px; background:linear-gradient(145deg,#fff2e8,#f8eadb); }
.practical-template:nth-child(2n) .template-thumb { background:linear-gradient(145deg,#eaf7f3,#fff); }
.practical-template:nth-child(3n) .template-thumb { background:linear-gradient(145deg,#fff4cf,#fffaf0); }
.practical-template .template-paper { min-height:268px; display:flex; flex-direction:column; padding:24px; border-radius:10px; background:#fff; box-shadow:0 12px 24px rgba(71,47,30,.09); }
.practical-template .template-paper small { color:var(--coral); font-size:.65rem; font-weight:950; letter-spacing:.08em; }
.practical-template .template-paper h3 { margin:14px 0 12px; font-size:1.45rem; }
.practical-template .template-paper p { color:var(--muted); font-size:.8rem; line-height:1.55; }
.fake-template-button { align-self:flex-start; margin-top:auto; padding:8px 11px; border-radius:8px; background:var(--teal); color:#fff; font-size:.7rem; font-weight:900; }
.template-needs { padding:17px 17px 0; }
.template-needs strong { display:block; font-size:1rem; }
.template-needs p { margin:5px 0 0; color:var(--muted); font-size:.85rem; }
.template-meta { margin-top:auto; padding:16px 17px 18px; }
.template-meta .button { width:100%; }

/* Visual no-code email builder */
.visual-builder { display:grid; gap:18px; }
.builder-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 19px; border:1px solid #bfe0d8; border-radius:19px; background:linear-gradient(135deg,#ebf8f4,#fff); }
.builder-toolbar > div:first-child { display:grid; }
.builder-toolbar strong { font-size:1.03rem; }
.builder-toolbar span { color:var(--muted); font-size:.85rem; }
.builder-add-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.builder-add { min-height:42px; padding:0 13px; border:1px solid #bcd8d1; border-radius:12px; background:#fff; color:var(--teal); font-size:.86rem; font-weight:900; }
.builder-add:hover { background:var(--teal); color:#fff; }
.builder-columns { display:grid; grid-template-columns:minmax(430px,.9fr) minmax(430px,1.1fr); gap:20px; align-items:start; }
.builder-style-card,.builder-blocks-card,.builder-preview-card { margin-bottom:17px; padding:20px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-soft); }
.builder-section-title { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.builder-section-title > span { width:32px; height:32px; display:grid; place-items:center; flex:0 0 32px; border-radius:50%; background:var(--coral); color:#fff; font-weight:950; }
.builder-section-title div { display:grid; }
.builder-section-title small,.builder-preview-head small { color:var(--muted); font-size:.82rem; }
.builder-colors { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.builder-colors label { display:grid; gap:6px; color:var(--ink-soft); font-size:.78rem; font-weight:850; }
.builder-colors input { width:100%; height:47px; padding:4px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.builder-block-list { display:grid; gap:12px; }
.builder-block { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#fffdf9; }
.builder-block-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px; background:#fff8f1; border-bottom:1px solid var(--line); }
.builder-block-head > div:first-child { display:flex; align-items:center; gap:9px; }
.builder-block-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#fff; color:var(--coral); font-weight:950; }
.builder-block-head strong { font-size:.91rem; }
.builder-block-actions { display:flex; gap:5px; }
.builder-block-actions button { width:32px; height:32px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-weight:900; }
.builder-block-actions button:last-child { color:var(--danger); }
.builder-block-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; }
.builder-block-fields label { display:grid; gap:5px; color:var(--ink-soft); font-size:.8rem; font-weight:850; }
.builder-block-fields label:only-child { grid-column:1 / -1; }
.builder-block-fields input,.builder-block-fields textarea { width:100%; min-height:44px; padding:10px 11px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; font-size:.91rem; }
.builder-block-fields textarea { min-height:100px; resize:vertical; }
.builder-preview-card { position:sticky; top:18px; }
.builder-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.builder-preview-head > div:first-child { display:grid; }
.preview-switch { display:flex; padding:4px; border:1px solid var(--line); border-radius:11px; background:#fff8f1; }
.preview-switch button { min-height:34px; padding:0 10px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:.76rem; font-weight:900; }
.preview-switch button.active { background:#fff; color:var(--teal); box-shadow:0 3px 10px rgba(68,46,31,.08); }
.builder-preview-stage { overflow:auto; min-height:720px; padding:18px; border-radius:16px; background:#eee4da; text-align:center; }
.builder-preview-stage iframe { width:100%; max-width:720px; min-height:680px; border:0; border-radius:14px; background:#fff; transition:width .2s ease; }
.builder-preview-stage iframe.is-mobile { width:390px; max-width:100%; }

/* Welcome automation made understandable */
.automation-explainer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.automation-step { position:relative; display:flex; align-items:flex-start; gap:13px; min-height:145px; padding:20px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-soft); }
.automation-step:nth-child(2) { background:#fff7e9; }
.automation-step:nth-child(3) { background:#edf8f4; }
.automation-status-icon { width:44px; height:44px; display:grid; place-items:center; flex:0 0 44px; border-radius:14px; background:var(--coral-soft); color:var(--coral); font-size:1.1rem; }
.automation-step h3 { margin:0 0 5px; font-size:1.02rem; }
.automation-step p { margin:0; color:var(--muted); font-size:.86rem; }
.automation-arrow { position:absolute; right:-18px; top:50%; z-index:2; color:var(--coral); font-size:1.3rem; font-weight:950; }
.automation-control { display:flex; align-items:center; justify-content:space-between; gap:17px; margin-bottom:20px; padding:21px; border:1px solid #efc4b6; border-radius:23px; background:linear-gradient(135deg,#fff0eb,#fff); }
.automation-control.is-active { border-color:#addac9; background:linear-gradient(135deg,#e8f7f1,#fff); }
.automation-control h2 { margin:0 0 4px; font-family:var(--serif); font-size:1.4rem; }
.automation-control p { margin:0; color:var(--muted); font-size:.9rem; }
.status-label { display:inline-flex; margin-bottom:6px; padding:5px 9px; border-radius:999px; background:#fff; color:var(--coral-dark); font-size:.72rem; font-weight:950; text-transform:uppercase; }
.automation-control.is-active .status-label { color:var(--green); }
.two-column-help { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.simple-activity { display:grid; gap:10px; }
.simple-activity > div { display:flex; align-items:center; gap:11px; padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:#fffdf9; }
.simple-activity > div > div { display:grid; flex:1; }
.simple-activity small { color:var(--muted); font-size:.78rem; }
.activity-dot { width:12px; height:12px; flex:0 0 12px; border-radius:50%; background:var(--gold); }
.activity-dot.sent,.activity-dot.approved,.activity-dot.active { background:var(--green); }
.activity-dot.failed,.activity-dot.rejected { background:var(--danger); }

/* Billing */
.billing-summary { display:grid; grid-template-columns:1.1fr .8fr .8fr; gap:18px; margin-bottom:24px; padding:23px; border:1px solid #efd0bb; border-radius:25px; background:linear-gradient(135deg,#fff0e7,#fff9de); box-shadow:var(--shadow-soft); }
.billing-summary h2 { margin:7px 0 4px; font-family:var(--serif); font-size:1.55rem; }
.billing-summary p { margin:0; color:var(--muted); }
.billing-meter { align-self:center; padding:15px; border-radius:17px; background:rgba(255,255,255,.76); }
.billing-meter > div:first-child { display:flex; align-items:baseline; gap:4px; margin-bottom:9px; }
.billing-meter strong { font-size:1.35rem; }
.billing-meter span { color:var(--muted); font-size:.8rem; }
.in-app-pricing { margin-bottom:22px; }
.in-app-pricing .price-card { position:relative; min-height:510px; display:flex; flex-direction:column; }
.in-app-pricing .price-card.current-plan { border-color:var(--teal); box-shadow:0 0 0 3px rgba(23,139,136,.09),var(--shadow-soft); }
.popular-badge,.current-badge { position:absolute; top:16px; right:16px; padding:6px 9px; border-radius:999px; font-size:.66rem; font-weight:950; }
.popular-badge { background:var(--coral); color:#fff; }
.current-badge { background:var(--teal); color:#fff; }
.current-plan .popular-badge { top:50px; }
.payment-choice { display:grid; gap:10px; margin-top:auto; }
.text-action { padding:7px; font-size:.82rem; }
.price-note { margin-top:auto; padding:13px; border-radius:13px; background:#fff8ef; color:var(--muted); font-size:.83rem; }
.payment-explanation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-bottom:22px; }
.payment-explanation > div { padding:19px; border:1px solid var(--line); border-radius:20px; background:#fff; }
.payment-explanation span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:var(--coral-soft); color:var(--coral); font-weight:950; }
.payment-explanation h3 { margin:11px 0 5px; font-size:1rem; }
.payment-explanation p { margin:0; color:var(--muted); font-size:.85rem; }

/* Joyful administration */
.admin-welcome { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 190px; align-items:center; min-height:205px; margin-bottom:20px; padding:28px 30px; border:1px solid #efcdb8; border-radius:27px; background:linear-gradient(135deg,#ffe7dc,#fff4d5); box-shadow:var(--shadow-soft); }
.admin-welcome::before { content:"✦"; position:absolute; right:210px; top:25px; color:var(--gold); font-size:1.5rem; }
.admin-welcome h2 { margin:7px 0 7px; font-family:var(--serif); font-size:1.8rem; }
.admin-welcome p { max-width:700px; margin:0; color:var(--ink-soft); }
.admin-mailbox { justify-self:center; position:relative; width:130px; height:95px; border-radius:16px 16px 8px 8px; background:var(--teal); box-shadow:0 18px 30px rgba(49,93,83,.20); }
.admin-mailbox::before { content:"✉"; position:absolute; inset:18px; display:grid; place-items:center; border-radius:9px; background:#fff; color:var(--coral); font-size:1.6rem; }
.admin-mailbox::after { content:""; position:absolute; right:-12px; top:4px; width:11px; height:42px; border-radius:5px 5px 0 0; background:var(--coral); }
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:20px; }
.admin-stat-grid > a,.admin-stat-grid > div { min-height:145px; padding:19px; border:1px solid var(--line); border-radius:21px; background:#fff; box-shadow:var(--shadow-soft); }
.admin-stat-grid > *.needs-attention { border-color:#efb7a7; background:#fff0eb; }
.admin-stat-grid small { display:block; color:var(--muted); font-size:.76rem; font-weight:850; }
.admin-stat-grid strong { display:block; margin:10px 0 5px; font-family:var(--serif); font-size:2rem; }
.admin-stat-grid span { color:var(--teal); font-size:.8rem; font-weight:900; }
.admin-section { scroll-margin-top:20px; }
.admin-payment-list,.admin-user-list { display:grid; gap:12px; }
.admin-payment { display:grid; grid-template-columns:1.2fr .65fr 1fr .7fr 1.2fr; align-items:center; gap:14px; padding:15px; border:1px solid var(--line); border-radius:17px; background:#fffdf9; }
.admin-payment.pending { border-color:#efd097; background:#fffaf0; }
.payment-person,.admin-user-main { display:flex; align-items:center; gap:10px; min-width:0; }
.payment-person > span { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:50%; background:var(--coral-soft); color:var(--coral); font-weight:950; }
.payment-person div,.admin-user-main div { min-width:0; display:grid; }
.payment-person small,.admin-payment small,.admin-user-main small { overflow:hidden; color:var(--muted); font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.admin-payment code { overflow:hidden; max-width:180px; display:block; text-overflow:ellipsis; }
.payment-review { display:grid; grid-template-columns:1fr auto auto; gap:6px; }
.payment-review input { min-height:39px; font-size:.82rem; }
.reviewed-note { color:var(--muted); font-size:.8rem; }
.admin-user-card { display:grid; grid-template-columns:1.3fr .45fr .45fr 1.8fr; align-items:center; gap:15px; padding:16px; border:1px solid var(--line); border-radius:18px; background:#fffdf9; }
.admin-user-card.is-suspended { opacity:.7; background:#fff0ed; }
.admin-mini-stat { text-align:center; }
.admin-mini-stat strong { display:block; font-size:1.05rem; }
.admin-mini-stat span { color:var(--muted); font-size:.72rem; }
.admin-user-controls { display:grid; grid-template-columns:1fr 1fr auto auto; align-items:end; gap:8px; }
.admin-user-controls label { display:grid; gap:4px; color:var(--muted); font-size:.72rem; font-weight:850; }
.admin-user-controls select { min-height:40px; padding:7px 9px; font-size:.82rem; }
.admin-suspend { display:flex!important; align-items:center; align-self:center; gap:6px; color:var(--danger)!important; white-space:nowrap; }
.admin-suspend input { width:18px; min-height:18px; }
.admin-campaign-row { margin-bottom:8px; }
.admin-campaign-row > div { flex:1; }

/* Settings */
.settings-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; }
.settings-help-card,.delivery-card { background:linear-gradient(145deg,#fff,#fff8ef); }
.settings-help-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:12px; border-radius:17px; background:var(--gold-soft); color:#986600; font-size:1.45rem; }
.settings-help-card h2 { margin:0 0 6px; font-family:var(--serif); }
.settings-help-card p { color:var(--muted); }
.settings-demo-text { padding:16px; border:1px solid var(--line); border-radius:15px; background:#fff; }

/* Better modal sizing */
.modal-card-wide { width:min(790px,100%); }
.modal-kicker { color:var(--coral-dark); font-size:.72rem; font-weight:950; text-transform:uppercase; letter-spacing:.08em; }
.modal-head h2 { margin:4px 0 0; }

@media (max-width:1200px) {
  .app-layout { grid-template-columns:270px minmax(0,1fr); }
  .builder-columns { grid-template-columns:1fr; }
  .builder-preview-card { position:static; }
  .builder-preview-stage { min-height:620px; }
  .admin-payment { grid-template-columns:1fr 1fr; }
  .payment-review { grid-column:1 / -1; }
  .admin-user-card { grid-template-columns:1fr auto auto; }
  .admin-user-controls { grid-column:1 / -1; }
}
@media (max-width:980px) {
  .app-layout { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:80; left:0; width:min(310px,88vw); transform:translateX(-105%); transition:transform .22s ease; box-shadow:20px 0 50px rgba(58,44,34,.2); }
  .sidebar.open { transform:translateX(0); }
  .main-content { padding:20px 20px 55px; }
  .mobile-topbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:25px; }
  .mobile-topbar > div { display:flex; align-items:center; gap:8px; }
  .mobile-topbar .accessibility-label { display:none; }
  .menu-button { min-height:42px; padding:0 14px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font-weight:900; }
  .quick-action-grid,.plain-stats,.admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-main-grid,.settings-grid,.billing-summary,.payment-explanation,.two-column-help { grid-template-columns:1fr; }
  .template-grid.upgraded { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .automation-explainer { grid-template-columns:1fr; }
  .automation-arrow { display:none; }
  .admin-welcome { grid-template-columns:1fr; }
  .admin-mailbox { display:none; }
}
@media (max-width:760px) {
  .public-header .accessibility-tools { position:fixed; left:12px; bottom:12px; z-index:50; box-shadow:0 10px 30px rgba(70,45,29,.18); }
  .page-top,.panel-head,.automation-control { align-items:stretch; flex-direction:column; }
  .page-actions,.page-actions .button { width:100%; }
  .quick-action-grid,.plain-stats,.template-grid.upgraded,.csv-guide,.panel-grid { grid-template-columns:1fr; }
  .quick-action-card { min-height:auto; }
  .contact-help-strip { grid-template-columns:auto 1fr; }
  .contact-help-strip > .button,.contact-help-strip > .usage-inline { grid-column:1 / -1; width:100%; }
  .help-banner { grid-template-columns:auto 1fr; }
  .help-banner .button { grid-column:1 / -1; width:100%; }
  .builder-toolbar { align-items:flex-start; flex-direction:column; }
  .builder-colors,.builder-block-fields { grid-template-columns:1fr 1fr; }
  .builder-preview-stage { min-height:530px; padding:9px; }
  .builder-preview-stage iframe { min-height:510px; }
  .admin-stat-grid { grid-template-columns:1fr 1fr; }
  .admin-user-card { grid-template-columns:1fr 1fr; }
  .admin-user-main,.admin-user-controls { grid-column:1 / -1; }
  .admin-user-controls { grid-template-columns:1fr 1fr; }
  .admin-payment { grid-template-columns:1fr; }
  .payment-review { grid-template-columns:1fr 1fr; }
  .payment-review input { grid-column:1 / -1; }
  .toolbar { align-items:stretch; flex-direction:column; }
  .search-box input { width:100%; min-width:0; }
  .form-row { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .main-content { padding:15px 13px 45px; }
  .mobile-topbar .brand-word { font-size:1.55rem; }
  .mobile-topbar .accessibility-tools { gap:3px; padding:4px; }
  .mobile-topbar .accessibility-tools button { min-width:31px; min-height:32px; padding:0 4px; }
  .panel,.onboarding-card,.plan-usage-card { padding:18px; border-radius:20px; }
  .page-top h1 { font-size:2rem; }
  .onboarding-head { align-items:flex-start; }
  .onboarding-ring { width:66px; height:66px; flex-basis:66px; }
  .friendly-list > a { flex-wrap:wrap; }
  .list-metric { display:none!important; }
  .builder-colors,.builder-block-fields { grid-template-columns:1fr; }
  .builder-style-card,.builder-blocks-card,.builder-preview-card { padding:14px; }
  .builder-add { flex:1 1 44%; }
  .builder-preview-head { align-items:flex-start; flex-direction:column; }
  .admin-stat-grid { grid-template-columns:1fr; }
  .admin-user-controls { grid-template-columns:1fr; }
  .admin-mini-stat { text-align:left; }
  .billing-summary { padding:18px; }
}
.billing-manage { grid-column:1 / -1; display:flex; align-items:center; justify-content:flex-end; gap:12px; padding-top:4px; }
.billing-manage small { color:var(--muted); }
@media (max-width:760px) { .billing-manage { align-items:stretch; flex-direction:column; }.billing-manage .button { width:100%; } }
.template-needs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 22px; padding:0; }
.template-needs > div { position:relative; padding:18px 18px 18px 60px; border:1px solid var(--line); border-radius:19px; background:#fff; box-shadow:var(--shadow-soft); }
.template-needs > div > span { position:absolute; left:17px; top:17px; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:#fff; font-weight:950; }
.template-needs > div:nth-child(2) > span { background:var(--gold); }
.template-needs > div:nth-child(3) > span { background:var(--teal); }
.template-needs strong { font-size:.98rem; }
.template-needs p { margin:3px 0 0; color:var(--muted); font-size:.82rem; }
@media (max-width:760px) { .template-needs { grid-template-columns:1fr; } }


/* ========================================================================== 
   SendFiesta Simple v3 — fewer choices, larger targets, calmer screens
   ========================================================================== */

/* The JavaScript text-size control zooms the complete page, including px text. */
html { font-size:16px; }
body { min-width:0; }

.accessibility-tools { gap:7px; padding:7px; border-radius:15px; }
.accessibility-label { font-size:.9rem; }
.accessibility-tools button { min-width:42px; min-height:40px; font-size:1.15rem; }
.accessibility-tools .font-size-value { min-width:61px; font-size:.82rem; }

/* A shorter navigation is easier to scan. */
.app-layout { grid-template-columns:270px minmax(0,1fr); }
.sidebar { padding:24px 18px 18px; }
.sidebar-nav a { min-height:58px; padding:13px 15px; font-size:1.05rem; }
.sidebar-nav .nav-icon { width:36px; height:36px; flex-basis:36px; }
.sidebar-plan { padding:15px; }
.sidebar-plan span,.sidebar-plan strong,.sidebar-plan a { font-size:.9rem; }
.user-chip strong { font-size:1rem; }
.user-chip small { font-size:.86rem!important; }

.simple-page-top { align-items:center; }
.simple-back-link { color:var(--teal); font-size:1rem; font-weight:900; }
.simple-compose-form { max-width:1160px; }
.simple-subject-panel { max-width:820px; padding:27px; }
.simple-editor-intro { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.simple-editor-intro h2 { margin:0 0 5px; font-family:var(--serif); font-size:1.5rem; }
.simple-editor-intro p { margin:0; color:var(--muted); font-size:.98rem; }
.simple-step { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:50%; background:var(--coral); color:#fff; font-weight:950; }
.simple-main-field label { font-size:1.02rem; }
.simple-main-field input { min-height:56px; font-size:1.08rem; }
.simple-main-field textarea { min-height:220px; padding:16px; font-size:1.06rem; line-height:1.65; }
.sender-summary { margin-top:15px; color:var(--muted); font-size:.94rem; }
.sender-summary a { color:var(--teal); font-weight:900; }

/* The editor now contains only two main fields. */
.simple-email-builder { margin:22px 0; }
.simple-editor-grid { display:grid; grid-template-columns:minmax(0, .88fr) minmax(390px, 1.12fr); gap:22px; align-items:start; }
.simple-editor-panel,.simple-preview-card { padding:27px; border:1px solid var(--line); border-radius:25px; background:#fff; box-shadow:var(--shadow-soft); }
.simple-preview-card { position:sticky; top:22px; }
.preview-intro .simple-step { background:var(--teal); }
.simple-preview-stage { min-height:600px; padding:17px; border:1px solid #e5d8cb; border-radius:18px; background:#f1e8de; }
.simple-preview-stage iframe { display:block; width:100%; height:565px; border:0; border-radius:12px; background:#fff; }
.simple-theme-row { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fffaf5; }
.simple-theme-row > div:first-child { display:grid; }
.simple-theme-row small { color:var(--muted); }
.simple-theme-buttons { display:flex; gap:8px; }
.simple-theme-buttons button { display:flex; align-items:center; gap:7px; min-height:42px; padding:0 12px; border:2px solid transparent; border-radius:12px; background:#fff; color:var(--ink); font-weight:850; }
.simple-theme-buttons button span { width:18px; height:18px; border-radius:50%; background:var(--coral); }
.simple-theme-buttons .theme-teal span { background:var(--teal); }
.simple-theme-buttons .theme-gold span { background:var(--gold); }
.simple-theme-buttons button.active { border-color:var(--ink); box-shadow:0 4px 12px rgba(34,29,24,.08); }
.simple-options { margin-top:18px; border:1px solid var(--line); border-radius:17px; background:#fffdf9; }
.simple-options > summary { padding:17px 18px; cursor:pointer; color:var(--teal); font-size:1rem; font-weight:900; list-style:none; }
.simple-options > summary::-webkit-details-marker { display:none; }
.simple-options > summary::after { content:'＋'; float:right; color:var(--coral); }
.simple-options[open] > summary::after { content:'−'; }
.simple-options-body { display:grid; gap:17px; padding:0 18px 19px; border-top:1px solid var(--line); }
.simple-options-body > :first-child { margin-top:18px; }
.simple-option-group { display:grid; gap:10px; padding:16px; border-radius:15px; background:#fff8f1; }
.simple-option-group > p { margin:-5px 0 2px; color:var(--muted); font-size:.88rem; }
.compact-options { max-width:700px; }
.simple-save-panel { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:22px 0; padding:21px; border:1px solid #efcbbb; border-radius:22px; background:linear-gradient(135deg,#fff1eb,#fffdf8); box-shadow:var(--shadow-soft); }
.simple-footer-choice { margin:0; border:0; background:transparent; padding:0; }
.simple-save-panel > div { display:grid; }
.simple-save-panel > div span { color:var(--muted); font-size:.9rem; }

/* Three clear templates, no category maze. */
.simple-template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.simple-template-card { overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:var(--shadow-soft); }
.simple-template-preview { min-height:300px; padding:34px 30px; background:var(--template-bg); }
.simple-template-preview > span { color:var(--template-accent); font-size:.78rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.simple-template-preview h2 { margin:25px 0 15px; font-family:var(--serif); font-size:2rem; line-height:1.1; }
.simple-template-preview p { color:var(--muted); line-height:1.65; }
.simple-template-preview b { display:inline-block; margin-top:12px; padding:11px 17px; border-radius:10px; background:var(--template-accent); color:#fff; font-size:.86rem; }
.simple-template-copy { flex:1; display:flex; flex-direction:column; padding:24px; }
.simple-template-copy h3 { margin:0 0 7px; font-family:var(--serif); font-size:1.45rem; }
.simple-template-copy p { flex:1; margin:0 0 21px; color:var(--muted); }

/* Home: three choices, three numbers, one recent list. */
.simple-home-actions { display:grid; grid-template-columns:1.25fr .875fr .875fr; gap:18px; margin-bottom:22px; }
.simple-home-action { display:flex; gap:17px; min-height:190px; padding:25px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:var(--shadow-soft); transition:.18s ease; }
.simple-home-action:hover { transform:translateY(-3px); border-color:#efbba9; }
.simple-home-action.primary-action { background:linear-gradient(135deg,#ffe8df,#fff7e8); border-color:#efc3b4; }
.simple-home-icon { width:52px; height:52px; display:grid; place-items:center; flex:0 0 52px; border-radius:17px; background:var(--teal-soft); color:var(--teal); font-size:1.4rem; }
.primary-action .simple-home-icon { background:var(--coral); color:#fff; }
.simple-home-action small { color:var(--coral-dark); font-size:.72rem; font-weight:950; letter-spacing:.08em; }
.simple-home-action h2 { margin:8px 0 7px; font-family:var(--serif); font-size:1.55rem; }
.simple-home-action p { margin:0 0 17px; color:var(--muted); }
.simple-home-action strong { color:var(--teal); }
.simple-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-bottom:22px; }
.simple-overview > div { display:grid; min-height:135px; padding:21px; border:1px solid var(--line); border-radius:21px; background:#fff; box-shadow:var(--shadow-soft); }
.simple-overview small { color:var(--muted); font-weight:850; }
.simple-overview strong { margin:6px 0; font-family:var(--serif); font-size:2.2rem; }
.simple-overview span { color:var(--muted); font-size:.88rem; }
.simple-email-list { display:grid; gap:10px; }
.simple-email-list > a { display:grid; grid-template-columns:44px minmax(180px,1fr) auto 70px 70px auto; align-items:center; gap:13px; padding:14px; border:1px solid var(--line); border-radius:17px; background:#fffdf9; }
.simple-email-list > a:hover { border-color:#eab8a8; }
.simple-email-list > a > div { min-width:0; display:grid; }
.simple-email-list > a > div small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.simple-email-list > a > b { color:var(--teal); font-size:.9rem; }
.simple-list-number { display:grid; text-align:center; font-weight:900; }
.simple-list-number small { color:var(--muted); font-size:.72rem; font-weight:700; }
.simple-plan-note { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 20px; border:1px solid var(--line); border-radius:18px; background:#fffaf4; }
.simple-plan-note div { display:grid; }
.simple-plan-note span { color:var(--muted); font-size:.88rem; }
.simple-plan-note a { color:var(--teal); font-weight:900; }

/* Contacts: a simple list instead of a dense table. */
.simple-contact-start { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; padding:18px 20px; border:1px solid #efd1ad; border-radius:20px; background:#fff7df; }
.simple-contact-start > div { display:flex; align-items:center; gap:13px; }
.simple-contact-start > div > span { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--gold); color:#fff; font-weight:950; }
.simple-contact-start p { margin:3px 0 0; color:var(--muted); }
.simple-contact-start > a { color:var(--teal); font-weight:950; }
.simple-usage-line { display:grid; grid-template-columns:auto minmax(170px,1fr) auto; align-items:center; gap:16px; margin-bottom:18px; padding:14px 17px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.simple-usage-line > div:first-child { display:grid; }
.simple-usage-line span { color:var(--muted); font-size:.82rem; }
.simple-usage-line a { color:var(--coral-dark); font-weight:900; }
.simple-toolbar { margin-bottom:12px; }
.simple-toolbar > span { color:var(--muted); font-weight:850; }
.simple-contact-list,.simple-campaign-list { display:grid; gap:10px; }
.simple-contact-list > article { display:grid; grid-template-columns:45px minmax(220px,1fr) auto auto; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.simple-contact-list article > div { min-width:0; display:grid; }
.simple-contact-list article > div small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.contact-actions-menu { position:relative; }
.contact-actions-menu > summary { cursor:pointer; padding:9px 12px; border:1px solid var(--line); border-radius:11px; color:var(--teal); font-weight:900; list-style:none; background:#fffaf5; }
.contact-actions-menu > summary::-webkit-details-marker { display:none; }
.contact-actions-menu > div { position:absolute; z-index:15; right:0; top:calc(100% + 7px); min-width:160px; display:grid; gap:6px; padding:10px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); }
.contact-actions-menu form { margin:0; }
.contact-actions-menu .link-button { width:100%; padding:8px; text-align:left; }
.simple-import-guide { display:flex; flex-wrap:wrap; gap:10px; padding:14px; border-radius:15px; background:#fff7df; }
.simple-import-guide > * { padding:8px 10px; }
.simple-import-guide a { color:var(--teal); text-decoration:underline; }

/* Campaign list: only useful results remain visible. */
.simple-campaign-list > article { display:grid; grid-template-columns:45px minmax(220px,1fr) auto 70px 70px auto auto; align-items:center; gap:13px; padding:14px 16px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.simple-campaign-main { min-width:0; display:grid; }
.simple-campaign-main small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }

/* Welcome automation */
.simple-automation-status { display:grid; grid-template-columns:55px minmax(0,1fr) auto; align-items:center; gap:17px; margin-bottom:15px; padding:22px; border:1px solid #efc6b8; border-radius:22px; background:#fff0eb; }
.simple-automation-status.is-active { border-color:#b7dcca; background:#ebf8f3; }
.simple-automation-icon { width:55px; height:55px; display:grid; place-items:center; border-radius:17px; background:#fff; color:var(--coral); font-size:1.35rem; font-weight:950; }
.simple-automation-status.is-active .simple-automation-icon { color:var(--green); }
.simple-automation-status strong { font-family:var(--serif); font-size:1.4rem; }
.simple-automation-status p { margin:4px 0 0; color:var(--muted); }
.simple-how-it-works { display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:22px; padding:14px 18px; border:1px solid var(--line); border-radius:17px; background:#fff; color:var(--ink-soft); }
.simple-how-it-works b { color:var(--coral); }
.simple-test-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:20px 0; padding:21px; border:1px solid var(--line); border-radius:21px; background:#fff; }
.simple-test-panel h2 { margin:0 0 4px; font-family:var(--serif); }
.simple-test-panel p { margin:0; color:var(--muted); }
.simple-history > summary { cursor:pointer; font-family:var(--serif); font-size:1.25rem; font-weight:800; }
.simple-history-body { margin-top:18px; }

/* Account */
.simple-account-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:20px; }
.simple-account-side { display:grid; align-content:start; gap:16px; }
.simple-account-card { padding:23px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-soft); }
.simple-account-card > span { color:var(--coral-dark); font-size:.74rem; font-weight:950; letter-spacing:.08em; }
.simple-account-card h2 { margin:9px 0 7px; font-family:var(--serif); }
.simple-account-card p { color:var(--muted); }
.simple-account-card .accessibility-tools { justify-content:center; margin-top:14px; }
.plan-card-simple { background:linear-gradient(135deg,#fff0e9,#fff8dc); }
.technical-details { margin-top:20px; }

@media (max-width:1100px) {
  .simple-editor-grid,.simple-account-grid { grid-template-columns:1fr; }
  .simple-preview-card { position:static; }
  .simple-home-actions { grid-template-columns:1fr; }
  .simple-home-action { min-height:150px; }
  .simple-template-grid { grid-template-columns:1fr; }
  .simple-template-card { display:grid; grid-template-columns:.9fr 1.1fr; }
  .simple-template-preview { min-height:260px; }
}

@media (max-width:850px) {
  .simple-overview { grid-template-columns:1fr; }
  .simple-email-list > a { grid-template-columns:44px 1fr auto; }
  .simple-email-list .simple-list-number,.simple-email-list > a > b { display:none; }
  .simple-campaign-list > article { grid-template-columns:45px 1fr auto; }
  .simple-campaign-list .simple-list-number,.simple-campaign-list > article > .badge { display:none; }
  .simple-campaign-list .button { grid-column:2; justify-self:start; }
  .simple-campaign-list .contact-actions-menu { grid-column:3; grid-row:2; }
  .simple-how-it-works { align-items:flex-start; flex-direction:column; }
  .simple-how-it-works b { display:none; }
}

@media (max-width:700px) {
  .simple-save-panel,.simple-test-panel,.simple-contact-start,.simple-automation-status { align-items:stretch; grid-template-columns:1fr; flex-direction:column; }
  .simple-automation-status { display:grid; }
  .simple-automation-icon { display:none; }
  .simple-theme-row { align-items:flex-start; flex-direction:column; }
  .simple-theme-buttons { width:100%; }
  .simple-theme-buttons button { flex:1; justify-content:center; }
  .simple-template-card { display:flex; }
  .simple-usage-line { grid-template-columns:1fr; }
  .simple-contact-list > article { grid-template-columns:45px 1fr auto; }
  .simple-contact-list > article > .badge { grid-column:2; justify-self:start; }
  .simple-contact-list .contact-actions-menu { grid-column:3; grid-row:1 / 3; }
  .simple-preview-stage { min-height:500px; padding:8px; }
  .simple-preview-stage iframe { height:480px; }
  .simple-main-field textarea { min-height:190px; }
}

/* Simple campaign result screen */
.campaign-back { display:inline-block; margin:-12px 0 20px; }
.campaign-overview { margin-bottom:20px; }
.simple-campaign-preview { max-width:900px; }
.simple-campaign-preview .simple-preview-stage { min-height:650px; }
.simple-campaign-preview iframe { height:620px; }
.simple-recipient-list { display:grid; gap:9px; }
.simple-recipient-list > div { display:grid; grid-template-columns:42px minmax(180px,1fr) auto auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:15px; background:#fffdf9; }
.simple-recipient-list > div > div { min-width:0; display:grid; }
.simple-recipient-list > div > div small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.simple-recipient-list > div > small { color:var(--muted); }

@media (max-width:700px) {
  .simple-recipient-list > div { grid-template-columns:42px 1fr auto; }
  .simple-recipient-list > div > small { display:none; }
  .simple-campaign-preview .simple-preview-stage { min-height:510px; }
  .simple-campaign-preview iframe { height:490px; }
}

/* Final calm layout adjustment for the three colour choices. */
.simple-theme-row { display:grid; align-items:start; }
.simple-theme-buttons { width:100%; }
.simple-theme-buttons button { flex:1; justify-content:center; }