/* =====================================================
   COMPONENTS — buttons, cards, badges, grids, sections, pricing, prose, forms
   ===================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm); line-height: 1; padding: 11px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { text-decoration: none; }
.btn svg { width: 17px; height: 17px; transition: transform 0.2s var(--ease); }
.btn:hover svg { transform: none; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 14px 24px; font-size: var(--fs-base); }
.btn-sm { padding: 8px 14px; font-size: var(--fs-xs); }
.btn-primary { color: #fff; background: var(--band); box-shadow: none; }
.btn-primary:hover { transform: none; box-shadow: none; color: #fff; background: var(--accent-ink); }
.btn-secondary { color: var(--ink); background: var(--surface); border-color: var(--border-strong); box-shadow: none; }
.btn-secondary:hover { border-color: var(--ink-faint); color: var(--ink); transform: none; background: var(--bg-soft); }
.btn-ghost { color: var(--ink-dim); background: transparent; }
.btn-ghost:hover { color: var(--ink); background: var(--accent-soft); }
.btn-light { background: #fff; color: #14131f; box-shadow: none; }
.btn-light:hover { transform: none; color: #14131f; }
.btn-outline-light { color: #fff; background: transparent; border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { background: rgba(255,255,255,0.16); color: #fff; transform: none; }

.eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--space-3); }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none; border: 0; letter-spacing: 0.08em; }

.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 4px 11px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); }
.lede { font-size: var(--fs-lg); color: var(--ink-dim); max-width: 62ch; line-height: 1.6; }
.lede p:last-child { margin-bottom: 0; }

/* ---- Sections ---- */
.section { padding-block: clamp(3.75rem, 8vw, 7rem); }
.section-tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.bg-soft { background: var(--bg-soft); }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head .lede { margin: 0; }
.section-foot { margin-top: var(--space-6); }
.split { display: grid; gap: var(--space-7); align-items: center; }
.split-media { border-radius: var(--radius-lg); border: 1px solid var(--border); width: 100%; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Cards ---- */
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: clamp(1.4rem, 3vw, 1.9rem); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--ink); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s; }
.card h3 { margin: 0 0 2px; }
.card p { margin: 0; color: var(--ink-dim); font-size: var(--fs-sm); line-height: 1.6; }
.feature-card:hover, a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); text-decoration: none; }
.card-cta { margin-top: auto; padding-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: var(--accent-ink); }
.card-cta svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
a.card:hover .card-cta svg { transform: translateX(4px); }
.icon-tile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: var(--space-3); box-shadow: none; }
.icon-tile svg { width: 23px; height: 23px; }
.brand-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.brand-thumb { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; background: var(--bg-soft); }
.brand-initials { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; background: var(--accent); }
.brand-initials-lg { width: 88px; height: 88px; border-radius: 24px; font-size: 1.6rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--ink-faint); }
.step-no { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-weight: 700; letter-spacing: -0.03em; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); margin-bottom: var(--space-2); }
.steps { list-style: none; padding: 0; margin: 0; }
.step-card .icon-tile { display: none; }

/* ---- Checklist ---- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .checklist { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); } }
.checklist li { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; }
.check { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.check svg { width: 15px; height: 15px; }

/* ---- Stats ---- */
.stats-section { padding-block: clamp(1.75rem, 4vw, 2.75rem); border-block: 1px solid var(--border); background: var(--bg-soft); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin: 0; }
.stat { display: flex; flex-direction: column; text-align: center; }
.stat dt { order: 2; font-size: var(--fs-sm); color: var(--ink-dim); }
.stat dd { order: 1; margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.stat dd.stat-text { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); padding-block: 0.5rem; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .stat + .stat { border-left: 1px solid var(--border); } }

/* ---- Dark AI panel ---- */
.panel { position: relative; overflow: hidden; border-radius: 12px; padding: clamp(1.9rem, 5vw, 4.5rem); background: var(--dark-1); color: var(--on-dark); border: 0; box-shadow: none; }

.panel > *:not(.panel-glow) { position: relative; }
.panel h2, .panel h3 { color: var(--on-dark); }
.panel .eyebrow { color: #9db8ff; }
.panel .lede, .panel p { color: var(--on-dark-dim); }
.panel-head { max-width: 700px; }
.panel-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-6); }
@media (min-width: 720px) { .panel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .panel-grid { grid-template-columns: repeat(4, 1fr); } }
.panel-item { padding: var(--space-5) var(--space-4); border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.panel-item .icon-tile { background: rgba(255,255,255,0.1); box-shadow: none; color: #fff; }
.panel-item h3 { font-size: 1.1rem; }
.panel-item p { font-size: var(--fs-sm); margin: 0; }
.panel-foot { margin-top: var(--space-6); }
.panel-foot .btn-primary { background: #fff; color: #14131f; box-shadow: none; }

/* ---- CTA band + contact ---- */
.cta-band { position: relative; overflow: hidden; text-align: center; border-radius: 12px; padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3rem); color: #fff; background: var(--accent); box-shadow: none; }

.cta-band > * { position: relative; z-index: 1; }
.cta-band .btn-light { color: #1447b8; }
.cta-band h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta-band .lede { color: rgba(255,255,255,0.9); margin: 0 auto var(--space-5); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.contact-card { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) var(--space-5); border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.contact-card .lede { margin: 0 auto var(--space-5); }
.contact-card .btn { max-width: 100%; overflow-wrap: anywhere; white-space: normal; text-align: center; }

/* ---- FAQ ---- */
.faq-layout { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); } .faq-layout .section-head { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; margin-bottom: 0; } }
.faq-list { display: grid; gap: var(--space-3); max-width: 860px; }
.faq-item, .pricing-faq details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color 0.2s, box-shadow 0.2s; }
.faq-item summary, .pricing-faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; position: relative; }
.faq-item summary::-webkit-details-marker, .pricing-faq summary::-webkit-details-marker { display: none; }
.faq-item summary::after, .pricing-faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s var(--ease); }
.faq-item[open] summary::after, .pricing-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item[open], .pricing-faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow-md); }
.faq-answer { padding: 0 22px 20px; color: var(--ink-dim); }
.faq-answer p:last-child { margin: 0; }

/* ---- Filters, pagination, breadcrumbs, empty state ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.chip { font-size: var(--fs-sm); font-weight: 500; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-dim); cursor: pointer; text-decoration: none !important; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-7); }
.pagination ol { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pagination li a { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 12px; color: var(--ink-dim); font-weight: 700; font-size: var(--fs-sm); }
.pagination li a.is-current { background: var(--accent-soft); color: var(--accent-ink); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: var(--fs-xs); color: var(--ink-faint); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--border-strong); }
.breadcrumbs a { color: var(--ink-dim); }
.empty-state { display: grid; place-items: center; gap: var(--space-3); text-align: center; padding: var(--space-8) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--ink-dim); }
.empty-state p { margin: 0; }

/* ---- Pricing ---- */
.pricing-hero { text-align: center; }
.pricing-hero .breadcrumbs ol { justify-content: center; }
.pricing-hero .lede { margin-inline: auto; }
.pricing-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); list-style: none; padding: 0; margin: var(--space-5) 0 0; color: var(--ink-dim); font-size: var(--fs-sm); font-weight: 700; }
.pricing-assure li { display: inline-flex; align-items: center; gap: 8px; }
.pricing-assure li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.pricing-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-7); }
.pricing-toolbar .filter-bar { margin: 0; padding: 5px; gap: 4px; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--border); }
.pricing-toolbar .chip { border: 0; background: transparent; padding: 10px 20px; }
.pricing-toolbar .chip.is-active { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md); }
.pricing-family-filter { margin: 0; min-width: 240px; }
.pricing-family-filter label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
.pricing-family-filter select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; border-radius: var(--radius-pill); background: var(--surface) linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%) calc(100% - 22px) 52% / 6px 6px no-repeat, linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%) calc(100% - 17px) 52% / 6px 6px no-repeat; font-weight: 700; }
.pricing-family { margin-bottom: var(--space-8); }
.pricing-product { display: flex; align-items: center; gap: var(--space-3); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: var(--space-5); }
.pricing-product::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.plan-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-plan { gap: 0; padding: clamp(1.6rem, 3vw, 2.1rem); border-radius: 12px; }
.pricing-plan:hover { box-shadow: var(--shadow-md); }
.pricing-plan h3 { font-size: 1.35rem; margin-bottom: var(--space-3); }
.pricing-plan.is-featured { border: 2px solid var(--band); background: var(--surface); box-shadow: none; overflow: hidden; padding-top: 3.4rem; }
@media (min-width: 760px) { .pricing-plan.is-featured { transform: translateY(-10px); } .pricing-plan.is-featured:hover { transform: translateY(-14px); } }
.plan-flag { position: absolute; top: 0; left: 0; right: 0; padding: 8px 14px; text-align: center; background: var(--band); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pricing-plan .pricing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); }
.pricing-plan .pricing-price strong { font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-weight: 700; }
.pricing-saving { margin: var(--space-2) 0 0 !important; color: var(--ok) !important; font-weight: 700; font-size: var(--fs-xs) !important; }
.plan-trial { align-self: flex-start; margin: var(--space-3) 0 0 !important; padding: 5px 12px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink) !important; font-weight: 600; font-size: var(--fs-xs) !important; }
.plan-features { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); display: grid; gap: 12px; border-top: 1px solid var(--border); padding-top: var(--space-5); }
.plan-features li { position: relative; padding-left: 30px; color: var(--ink-dim); font-size: var(--fs-sm); line-height: 1.45; }
.plan-features li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-soft); }
.plan-features li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pricing-plan .btn { margin-top: auto; width: 100%; }
.pricing-plan:not(.is-featured) .btn-primary { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-sm); }
.pricing-plan:not(.is-featured) .btn-primary:hover { background: var(--accent-ink); color: #fff; box-shadow: none; }
.pricing-comparison { margin-top: var(--space-8); }
.pricing-comparison h2 { margin-bottom: var(--space-5); }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.table-scroll table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: var(--fs-sm); }
.table-scroll caption { text-align: left; padding: 14px 18px; color: var(--ink-faint); font-size: var(--fs-xs); }
.table-scroll thead th { text-align: left; padding: 14px 18px; background: var(--bg-soft); color: var(--ink-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; border-bottom: 1px solid var(--border); }
.table-scroll tbody td, .table-scroll tbody th { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table-scroll tbody tr:last-child td, .table-scroll tbody tr:last-child th { border-bottom: 0; }
.table-scroll tbody th { font-family: var(--font-display); font-size: 1rem; }
.table-scroll tbody tr:hover { background: var(--accent-soft); }
.pricing-note { margin: var(--space-4) 0 0; color: var(--ink-faint); font-size: var(--fs-xs); }
.pricing-trust { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-md); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.pricing-trust p { margin: 0; color: var(--ink); }
.pricing-faq { margin-top: var(--space-8); display: grid; gap: var(--space-3); max-width: 860px; margin-inline: auto; }
.pricing-faq h2 { text-align: center; margin-bottom: var(--space-4); }
.pricing-faq details p { padding: 0 22px 20px; margin: 0; color: var(--ink-dim); }
.pricing-cta { margin-top: var(--space-8); }
.plans-teaser .plan-grid { margin-bottom: var(--space-5); }
.teaser-foot { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; }
.teaser-foot p { margin: 0; color: var(--ink-dim); font-size: var(--fs-sm); }

/* ---- Prose (CMS rich text) ---- */
.prose { font-size: 1.08rem; color: var(--ink); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); margin-top: 2em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink-dim); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: var(--ink-dim); }
.prose img { border-radius: var(--radius-md); }
.prose pre, .prose code { font-family: var(--font-mono); font-size: 0.9em; }
.prose code { background: var(--accent-soft); padding: 2px 6px; border-radius: 6px; }
.prose pre { background: var(--dark-1); color: #e6e8ff; padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.prose iframe { max-width: 100%; border: 0; border-radius: var(--radius-md); }
.prose > :first-child { margin-top: 0; }

/* ---- Scroll reveal (progressive: content is visible without JS) ---- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Forms (contact, demo, ...) ---- */
.form-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .form-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-7); } .form-layout-single { grid-template-columns: minmax(0, 720px); justify-content: center; } }
.form-card { padding: clamp(1.4rem, 3.5vw, 2.5rem); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.form-note { margin: 0 0 var(--space-5); font-size: var(--fs-xs); color: var(--ink-faint); }
.field { margin-bottom: var(--space-5); }
.field label { display: block; margin-bottom: 7px; font-weight: 700; font-size: var(--fs-sm); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 14px 16px; transition: border-color 0.15s, box-shadow 0.15s; }
.field textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); background: var(--danger-soft); }
.field .help { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-faint); }
.field-error { margin: 6px 0 0; font-size: var(--fs-xs); font-weight: 700; color: var(--danger); }
.form-alert { margin-bottom: var(--space-5); padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--danger); background: var(--danger-soft); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
.form-card .btn { width: 100%; }
@media (min-width: 640px) { .form-card .btn { width: auto; } }
.form-success { display: grid; gap: var(--space-3); justify-items: start; padding-block: var(--space-4); }
.form-success h2 { margin: 0; }
.form-side { padding: var(--space-5); border-radius: var(--radius-md); background: var(--bg-soft); border: 1px solid var(--border); }
.form-side h2 { font-size: 1.25rem; }
.form-side .prose { font-size: var(--fs-sm); }
.side-mail { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--ink-dim); overflow-wrap: anywhere; }
.contact-mail { margin: var(--space-4) 0 0; overflow-wrap: anywhere; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* CTA band text sits on a saturated background: beat the .prose colours */
.cta-band .lede, .cta-band .lede p, .cta-band .prose p { color: rgba(255, 255, 255, 0.92); }
/* Pages that already end with a CTA band do not repeat it in the footer */
body:has(.cta-band, .contact-card, .form-layout) .footer-cta-strip { display: none; }
body:has(.cta-band, .contact-card, .form-layout) .site-footer { padding-top: var(--space-7); }

/* Staff-managed plan presentation (labels, tagline, promotion, excluded features). All optional: absent = no markup. */
.plan-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-2) !important; }
.plan-label { padding: 3px 10px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 600; }
.plan-label-green { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.plan-label-amber { background: color-mix(in srgb, #f5b23a 20%, transparent); color: #96560a; }
.plan-label-red { background: color-mix(in srgb, #c4264a 14%, transparent); color: #b3203a; }
.plan-tagline { margin: 0 0 var(--space-3) !important; color: var(--ink-dim); font-size: var(--fs-sm); }
.plan-promo { margin: var(--space-2) 0 0 !important; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: var(--fs-xs) !important; }
.plan-promo span { display: block; color: var(--ink-dim); }
.plan-features li.is-off { opacity: .55; text-decoration: line-through; }

/* ---- Brand strip (homepage, under the header) ----
   A slowly moving, clickable band of "Powered by Lummet" brands. --chip is each brand's accent (validated server-side).
   Motion pauses on hover, keyboard focus and via the pause button; reduced-motion users get a plain swipe-able row. */
.brand-strip { position: relative; background: var(--bg-soft); border-bottom: 1px solid var(--border); }

.brand-strip-inner { display: flex; align-items: center; gap: var(--space-3); padding-block: 12px; min-width: 0; }
.brand-strip-label { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em; color: var(--ink); white-space: nowrap; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); border: 1px solid var(--border); }
.brand-strip-label:hover { text-decoration: none; border-color: var(--accent); }
.brand-strip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: none; }
.brand-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.brand-marquee-track { display: flex; width: max-content; animation: brand-marquee var(--dur, 60s) linear infinite; will-change: transform; }
.brand-marquee:hover .brand-marquee-track, .brand-marquee:focus-within .brand-marquee-track, .brand-marquee.is-paused .brand-marquee-track { animation-play-state: paused; }
.brand-marquee-group { display: flex; flex: none; align-items: center; gap: 10px; margin: 0; padding: 4px 5px; list-style: none; }
.brand-marquee-group > li { flex: none; }
@keyframes brand-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brand-chip { --chip: var(--accent); display: inline-flex; align-items: center; gap: 9px; padding: 5px 16px 5px 5px; border-radius: 8px; color: var(--ink); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--chip) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--chip) 26%, var(--border)); box-shadow: 0 1px 0 color-mix(in srgb, var(--chip) 10%, transparent); transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.brand-chip:hover { text-decoration: none; border-color: var(--chip); background: color-mix(in srgb, var(--chip) 14%, var(--surface)); }
.brand-chip:focus-visible { outline: 2px solid var(--chip); outline-offset: 2px; }
.brand-chip-mark, .brand-chip-logo { flex: none; width: 28px; height: 28px; border-radius: 50%; }
.brand-chip-mark { display: inline-grid; place-items: center; color: #fff; font-size: .72rem; letter-spacing: .02em; background: var(--chip, var(--accent)); border-radius: 6px; }
.brand-chip-logo { object-fit: contain; background: #fff; border: 1px solid color-mix(in srgb, var(--chip) 25%, var(--border)); padding: 2px; }
.brand-strip-pause { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink-dim); cursor: pointer; }
.brand-strip-pause:hover { color: var(--ink); border-color: var(--accent); }
.brand-strip-pause .i-play { display: none; }
.brand-strip-pause[aria-pressed="true"] .i-play { display: inline; }
.brand-strip-pause[aria-pressed="true"] .i-pause { display: none; }
.brand-strip-all { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.brand-strip-all svg { width: 15px; height: 15px; }
.brand-strip-all:hover { text-decoration: none; color: var(--ink); }
@media (max-width: 640px) { .brand-strip-label span:last-child { display: none; } .brand-strip-all { display: none; } .brand-strip-inner { gap: var(--space-2); } }
@media (prefers-reduced-motion: reduce) {
  .brand-marquee { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .brand-marquee::-webkit-scrollbar { display: none; }
  .brand-marquee-track { animation: none; }
  .brand-marquee-dup, .brand-strip-pause { display: none; }
  .brand-chip { transition: none; }
}
.hero + .stats-section, .hero + .banner-ad + .stats-section { background: var(--band); border-block: 0; color: #fff; }
.hero + .stats-section .stat dd, .hero + .banner-ad + .stats-section .stat dd { color: #fff; }
.hero + .stats-section .stat dt, .hero + .banner-ad + .stats-section .stat dt { color: rgba(255,255,255,0.85); }

/* ---- Background bands for homepage sections and page headers (bg-soft | bg-blue | bg-dark; default = none) ----
   Every component reads colour TOKENS (--ink, --ink-dim, --surface, --border, --accent-ink, --ok ...). On a blue or dark band we
   re-point those tokens to light-on-dark values ONCE, here, instead of patching components one by one. Cards, checklists, FAQ items,
   stats, badges, chips, the "cancel anytime" notes, tables and brand categories then follow automatically and cannot end up
   white-on-white or dark-on-blue. A new component needs no band rule as long as it uses the tokens for text and surfaces
   (never a hard-coded #fff or #111). --accent and --band are left alone because buttons and decorative marks use them as fills. ---- */
.page-hero.bg-default { background: var(--bg); }
.section.bg-blue, .page-hero.bg-blue { background: var(--band); }
.section.bg-dark, .page-hero.bg-dark { background: var(--dark-1); }
:is(.section, .page-hero):is(.bg-blue, .bg-dark) {
  color: #fff; border-color: transparent;
  --ink: #ffffff; --ink-dim: rgba(255, 255, 255, 0.88); --ink-faint: rgba(255, 255, 255, 0.82);
  --accent-ink: #ffffff; --ok: #86efac;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}
:is(.section, .page-hero).bg-blue {
  --surface: rgba(9, 22, 64, 0.30); --surface-raised: rgba(9, 22, 64, 0.38);
  --bg-soft: rgba(9, 22, 64, 0.30); --bg-tint: rgba(9, 22, 64, 0.24);
  --accent-soft: rgba(9, 22, 64, 0.32); --ok-soft: rgba(9, 22, 64, 0.35);
  --border: rgba(255, 255, 255, 0.28); --border-strong: rgba(255, 255, 255, 0.5);
}
:is(.section, .page-hero).bg-dark {
  --surface: rgba(255, 255, 255, 0.06); --surface-raised: rgba(255, 255, 255, 0.09);
  --bg-soft: rgba(255, 255, 255, 0.06); --bg-tint: rgba(255, 255, 255, 0.08);
  --accent-soft: rgba(255, 255, 255, 0.14); --ok-soft: rgba(134, 239, 172, 0.18);
  --border: rgba(255, 255, 255, 0.16); --border-strong: rgba(255, 255, 255, 0.32);
}
:is(.bg-blue, .bg-dark) :is(.lede, .lede p, .prose p, .prose li) { color: rgba(255, 255, 255, 0.92); }
:is(.bg-blue, .bg-dark) :is(.lede, .prose) a { color: #fff; text-decoration: underline; }
:is(.bg-blue, .bg-dark) .breadcrumbs li + li::before { color: rgba(255, 255, 255, 0.55); }
/* Keyboard focus: the default ring is --accent (blue), which is 1:1 against a blue band. White reads on both bands. */
:is(.section, .page-hero):is(.bg-blue, .bg-dark) :focus-visible { outline-color: #fff; }
/* Logos and brand marks are artwork drawn for a light tile, so they keep a white tile on any band. */
:is(.bg-blue, .bg-dark) :is(.brand-hero-logo, .brand-thumb) { background: #fff; border-color: rgba(255, 255, 255, 0.6); }
:is(.bg-blue, .bg-dark) .step-no { color: #fff; }
/* Buttons: blue-on-blue is invisible, and the primary hover uses --accent-ink (now white), so both are set explicitly. */
:is(.section, .page-hero):is(.bg-blue, .bg-dark) .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
:is(.section, .page-hero):is(.bg-blue, .bg-dark) .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }
:is(.section, .page-hero):is(.bg-blue, .bg-dark) .btn-primary:hover { background: #eef3ff; color: #1447b8; }
:is(.section, .page-hero).bg-blue .btn-primary { background: #fff; color: #1447b8; }
:is(.section, .page-hero).bg-blue .chip.is-active { background: #fff; border-color: #fff; color: #1447b8; }
.section.bg-blue.stats-section .stat dd, .section.bg-dark.stats-section .stat dd { color: #fff; }
.section.bg-blue.stats-section .stat dt, .section.bg-dark.stats-section .stat dt { color: rgba(255, 255, 255, 0.88); }

/* ---- Section style options (Lummet Site > Homepage sections). Classes come from worker/public-site/section-style.js; "default" adds none.
   Serif and mono are system fonts: nothing to download and no CSP change. A web font means self-hosting the file in tokens.css and adding
   one value to section-style.js. Colours are never set here, so every option works on every band and the band audit still covers it. ---- */
.sec-hfont-serif { --font-display: var(--font-serif); }
.sec-hfont-mono { --font-display: var(--font-mono); }
.sec-hfont-mono :is(h1, h2, h3, h4) { letter-spacing: 0; }
.sec-bfont-serif { --font-sans: var(--font-serif); font-family: var(--font-sans); }
.sec-bfont-mono { --font-sans: var(--font-mono); font-family: var(--font-sans); }
.section.sec-align-center .section-head { margin-inline: auto; text-align: center; }
.section.sec-align-center :is(.section-head .lede, .narrow) { margin-inline: auto; }
.section.sec-align-center :is(.section-foot, .narrow) { text-align: center; }
.section.sec-width-narrow > .container { max-width: calc(var(--narrow) + 4rem); }
.section.sec-width-wide > .container { max-width: 1440px; }
.section.sec-space-compact { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section.sec-space-spacious { padding-block: clamp(5.5rem, 12vw, 10rem); }
.section.sec-cols-1 :is(.grid-3, .checklist, .panel-grid) { grid-template-columns: 1fr; }
@media (min-width: 640px) { .section.sec-cols-2 .grid-3, .section.sec-cols-3 .grid-3, .section.sec-cols-4 .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) {
  .section.sec-cols-2 :is(.checklist, .panel-grid) { grid-template-columns: repeat(2, 1fr); }
  .section.sec-cols-3 :is(.checklist, .panel-grid) { grid-template-columns: repeat(3, 1fr); }
  .section.sec-cols-4 :is(.checklist, .panel-grid) { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 980px) {
  .section.sec-cols-2 .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .section.sec-cols-3 .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .section.sec-cols-4 .grid-3 { grid-template-columns: repeat(4, 1fr); }
}

/* Domain aftermarket: for-sale summary above the enquiry form, list table, seller verification */
.listing-summary { margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.listing-headline { font-weight: 700; font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.listing-description { margin: 0 0 var(--space-3); color: var(--ink-soft, inherit); }
.listing-price { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
.listing-label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 8px; }
.listing-all { margin: var(--space-3) 0 0; font-size: var(--fs-sm); }
.aftermarket-table { width: 100%; border-collapse: collapse; }
.aftermarket-table th, .aftermarket-table td { padding: 14px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.aftermarket-table tbody th { font-weight: 700; overflow-wrap: anywhere; }
.aftermarket-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.aftermarket-sell { margin-top: var(--space-6); }
.verify-layout { display: grid; gap: var(--space-5); max-width: 760px; }
.verify-record { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: var(--space-4) 0; }
.verify-record dt { font-weight: 700; }
.verify-record dd { margin: 0; overflow-wrap: anywhere; }
.verify-values { padding-left: 1.2rem; margin: var(--space-3) 0 var(--space-4); }
.table-wrap { overflow-x: auto; }