@import url('/ui-primitives.css');
@import url('/design-tokens.css');
:root{

  --ink: var(--color-ink);
  --muted: var(--color-ink);
  --canvas: var(--color-canvas);
  --paper: var(--color-surface);
  --surface: var(--color-surface);
  --action: var(--ui-brand-accent, var(--color-ink));
  --action-hover: var(--ui-brand-accent, var(--color-ink));
  --accent: var(--ui-brand-accent, var(--color-ink));
  --line: var(--color-border);
  --shadow: var(--shadow-elevated);
  --radius: var(--radius-card);
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font-body); line-height: 1.6; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
.wrap{ width: min(var(--content-width), calc(100% - (var(--space-page) * 2))); margin: 0 auto; }
ez-site-header, ez-site-footer, ez-lead-form{ display: block; }
.site-header{ position: sticky; z-index: 20; top: 0; border-bottom: 1px solid transparent; background: var(--palette-surface-1); backdrop-filter: blur(16px); }
.site-header.scrolled{ border-color: var(--line); }
.nav{ min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand{ display: flex; align-items: center; gap: 11px; font: 700 20px/1 var(--font-display); letter-spacing: -.5px; }
.brand-mark{ width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--palette-ink-3) url("/brand-mark.svg") center / 100% no-repeat; border: 1px solid var(--palette-border-3); }
.brand em{ color: inherit; font-style: normal; }
.nav-links{ display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; }
.nav-links a:not(.btn):hover, .nav-links a.active{ color: var(--action); }
.hero{ overflow: hidden; position: relative; padding: 94px 0 86px; }
.hero-grid{ position: relative; display: grid; grid-template-columns: 1.06fr .94fr; gap: 80px; align-items: center; }
.eyebrow{ display: inline-flex; align-items: center; gap: 8px; color: var(--action); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before{ content: ''; width: 24px; height: 2px; background: var(--accent); }
h1, h2, h3{ font-family: var(--font-display); line-height: 1.08; letter-spacing: -.04em; margin: 0; }
h1{ margin-top: 22px; font-size: clamp(48px, 6vw, 78px); max-width: 760px; }
h1 .accent, h2 .accent{ color: var(--action); }
.hero-copy > p{ max-width: 620px; font-size: 19px; color: var(--muted); margin: 26px 0 34px; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.trust-row{ display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; color: var(--muted); font-size: 13px; }
.trust-row span::before{ content: '✓'; color: var(--action); font-weight: 800; margin-right: 7px; }
.journey-card{ position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: 28px; transform: rotate(1deg); }
.journey-card::after{ content: ''; position: absolute; inset: 12px -12px -12px 12px; border: 1px solid var(--palette-border-4); border-radius: 28px; z-index: -1; }
.journey-top{ display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.journey-top small{ display: block; margin-bottom: 4px; }
.journey-top strong{ font: 700 18px 'Manrope'; }
.live-pill{ color: var(--action); background: var(--surface); border-radius: 20px; padding: 6px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.steps{ list-style: none; padding: 18px 0 0; margin: 0; }
.steps li{ position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 10px 0 16px; }
.steps li:not(:last-child)::after{ content: ''; position: absolute; width: 1px; height: 24px; background: var(--line); left: 18px; bottom: -5px; }
.step-icon{ width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--action); background: var(--surface); font-weight: 700; }
.steps strong{ display: block; font-size: 14px; }
.steps small{ color: var(--muted); }
.band{ padding: 26px 0; background: var(--ink); color: var(--palette-surface-2); }
.band .wrap{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.band p{ margin: 0; font-size: 14px; color: var(--palette-surface-1); }
.band-items{ display: flex; gap: 34px; font-size: 13px; font-weight: 600; }
.section{ padding: var(--space-section) 0; }
.section-white{ background: var(--paper); }
.section-outline{ background: var(--surface); }
.section-head{ max-width: 700px; margin-bottom: 50px; }
.section-head h2{ margin-top: 16px; font-size: clamp(36px, 4vw, 54px); }
.section-head p{ color: var(--muted); font-size: 18px; }
.section-head.center{ text-align: center; margin-left: auto; margin-right: auto; }
.feature-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature{ min-height: 255px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
.feature-number{ color: var(--accent); font: 700 12px 'Manrope'; letter-spacing: .1em; }
.feature h3{ margin: 56px 0 12px; font-size: 24px; }
.feature p{ color: var(--muted); margin: 0; }
.feature.dark{ background: var(--ink); color: var(--palette-surface-2); }
.feature.dark p{ color: var(--palette-surface-1); }
.split{ display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.split h2{ font-size: clamp(38px, 4vw, 58px); }
.split p{ color: var(--muted); font-size: 18px; }
.check-list{ list-style: none; padding: 0; margin: 26px 0 0; }
.check-list li{ display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.check-list li::before{ content: '↗'; width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--palette-surface-2); background: var(--action); font-size: 12px; }
.metric-card{ padding: 38px; border-radius: 28px; background: var(--action); color: var(--palette-surface-2); box-shadow: var(--shadow); }
.metric-card .big{ font: 600 clamp(60px, 9vw, 112px)/1 'Manrope'; letter-spacing: -.08em; color: var(--surface); }
.metric-card p{ color: var(--palette-surface-1); max-width: 410px; }
.metric-card .fine{ margin-top: 50px; font-size: 12px; color: var(--palette-surface-1); }
.process{ counter-reset: process; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.process-item{ counter-increment: process; position: relative; padding-top: 64px; border-top: 1px solid var(--line); }
.process-item::before{ content: '0' counter(process); position: absolute; top: 18px; color: var(--accent); font-size: 12px; font-weight: 700; }
.process-item h3{ font-size: 24px; margin-bottom: 10px; }
.process-item p{ color: var(--muted); }
.quote{ padding: 48px; border-radius: 30px; background: var(--ink); color: var(--palette-surface-2); text-align: center; }
.quote blockquote{ margin: 0 auto 22px; max-width: 890px; font: 500 clamp(27px, 3.4vw, 44px)/1.25 'Manrope'; letter-spacing: -.03em; }
.quote small{ color: var(--palette-surface-1); }
.cta-section{ padding: 100px 0; background: var(--action); color: var(--palette-surface-2); }
.cta-grid{ display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.cta-grid h2{ font-size: clamp(40px, 5vw, 64px); }
.cta-grid > div > p{ color: var(--palette-surface-1); font-size: 18px; }
.lead-form{ padding: 30px; border-radius: 26px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field{ display: grid; gap: 7px; }
.field.full{ grid-column: 1 / -1; }
label{ color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.form-foot{ display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.form-status{ font-size: 13px; color: var(--muted); }
.form-status.success{ color: var(--action); }
.form-status.error{ color: var(--palette-ink-3); }
.page-hero{ padding: 86px 0 72px; text-align: center; }
.page-hero h1{ max-width: 900px; margin-left: auto; margin-right: auto; }
.page-hero p{ max-width: 720px; margin: 26px auto; color: var(--muted); font-size: 19px; }
.page-hero .eyebrow{ justify-content: center; }
.page-hero .hero-actions{ justify-content: center; }
.story-panel{ min-height: 500px; display: flex; align-items: end; padding: 52px; border-radius: 32px; background: var(--palette-ink-3); color: var(--palette-surface-2); }
.story-panel > div{ max-width: 650px; }
.story-panel h2{ font-size: clamp(38px, 5vw, 64px); }
.story-panel p{ color: var(--palette-surface-1); font-size: 18px; }
.site-footer{ padding: 64px 0 30px; background: var(--palette-ink-3); color: var(--palette-surface-2); }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; padding-bottom: 50px; }
.footer-grid p, .footer-grid a{ color: var(--palette-surface-1); font-size: 14px; }
.footer-links{ display: grid; gap: 10px; }
.footer-title{ margin-bottom: 16px; font-weight: 700; }
.copyright{ padding-top: 24px; border-top: 1px solid var(--palette-border-3); color: var(--palette-surface-1); font-size: 12px; }
.admin-shell{ min-height: calc(100vh - 78px); padding: 60px 0 100px; }
.login-card{ width: min(460px, 100%); margin: 50px auto; padding: 38px; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.login-card h1{ font-size: 38px; }
.login-card form{ display: grid; gap: 16px; margin-top: 28px; }
.admin-head{ display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 32px; }
.admin-head h1{ font-size: 48px; }
.submission-list{ display: grid; gap: 14px; }
.submission{ display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 22px; align-items: start; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.submission strong, .submission span{ display: block; }
.submission small{ color: var(--muted); }
.submission-message{ margin-top: 10px; color: var(--muted); }
.empty-state{ padding: 80px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 24px; color: var(--muted); }
[hidden], .hidden{ display: none !important; }
.admin-tabs{ display: flex; gap: 8px; margin-bottom: 36px; border-bottom: 1px solid var(--palette-border-4); }
.catalog-toolbar{ display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.catalog-toolbar h2{ font-size: 30px; }
.catalog-toolbar p{ margin: 6px 0 0; }
.product-list{ display: grid; gap: 18px; }
.journey-admin-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }
.product-card{ padding: 26px; border: 1px solid var(--palette-border-4); border-radius: 20px; background: var(--palette-surface-1); }
.product-card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.product-card h3{ margin-top: 10px; font-size: 24px; }
.product-card p{ margin: 5px 0 0; }
.status-pill, .readiness-pill{ display: inline-flex; align-items: center; border: 1px solid var(--palette-border-4); border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 700; }
.readiness-pill{ background: var(--palette-surface-1); white-space: nowrap; }
.readiness-pill.ready{ background: var(--palette-ink-3); color: var(--palette-surface-1); }
.product-meta{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.product-meta span{ border-radius: 8px; background: var(--palette-canvas-1); padding: 7px 10px; font-size: 11px; }
.readiness-list{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.readiness-list span{ border: 1px solid var(--palette-border-4); border-radius: 999px; padding: 5px 9px; font-size: 10px; }
.readiness-list .success-note{ background: var(--palette-ink-3); color: var(--palette-surface-1); }
.product-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.admin-alert{ margin-bottom: 18px; padding: 14px; border: 1px solid var(--palette-border-4); }
.merchant-connections{ display: grid; gap: 12px; margin-top: 16px; }
.merchant-connection{ padding: 16px; border: 1px solid var(--palette-border-4); border-radius: 14px; }
.merchant-connection p{ margin: 7px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.merchant-connection .product-actions{ margin-top: 12px; }
.admin-dialog{ width: min(760px, calc(100% - 28px)); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--palette-border-4); border-radius: 24px; padding: 28px; color: var(--palette-ink-3); background: var(--palette-surface-1); }
.admin-dialog-wide{ width: min(1120px, calc(100% - 28px)); }
.admin-dialog::backdrop{ background: var(--palette-ink-4); }
.dialog-head{ display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.dialog-head h2{ margin-top: 8px; font-size: 34px; }
.dialog-head p{ margin: 6px 0 0; }
.dialog-actions{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--palette-border-4); }
.dialog-actions .form-status{ margin-right: auto; }
.configuration-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.configuration-section{ padding: 20px; border: 1px solid var(--palette-border-4); border-radius: 16px; }
.configuration-section > h3{ margin-bottom: 14px; font-size: 19px; }
.configuration-row{ display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--palette-border-5); }
.configuration-row small{ color: var(--palette-muted-2); }
.mapping-row{ grid-template-columns: 1fr auto; align-items: center; }
.stack-form{ display: grid; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--palette-border-4); }
.code-editor{ min-height: 360px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.check-row{ display: flex; align-items: center; gap: 10px; }
.readiness-panel{ padding: 18px; border: 1px solid var(--palette-border-4); border-radius: 14px; background: var(--palette-canvas-2); }
.readiness-panel.ready{ background: var(--palette-ink-3); color: var(--palette-surface-1); }
.readiness-panel ul{ margin: 10px 0 0; padding-left: 20px; }
.compact-empty{ padding: 14px; border: 1px dashed var(--palette-border-6); border-radius: 10px; font-size: 12px; }
.admin-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px; }
.stat-card{ display: grid; gap: 3px; padding: 18px; border: 1px solid var(--palette-border-4); border-radius: 16px; background: var(--palette-surface-1); }
.stat-card strong{ font-size: 28px; }
.stat-card span{ color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.control-list{ display: grid; gap: 16px; }
.control-card{ padding: 24px; border: 1px solid var(--palette-border-4); border-radius: 20px; background: var(--palette-surface-1); }
.control-card-head{ display: flex; justify-content: space-between; align-items: start; gap: 22px; }
.control-card h3{ margin-top: 9px; font-size: 23px; }
.control-card p{ margin: 5px 0 0; }
.control-columns{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--palette-border-1); }
.control-columns small, .security-summary small{ display: block; margin-top: 5px; color: var(--muted); }
.filter-row{ display: flex; gap: 12px; margin-bottom: 18px; }
.security-summary{ text-align: right; }
.membership-list{ display: grid; gap: 8px; margin-top: 18px; }
.membership-row{ display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px; border-radius: 12px; background: var(--palette-canvas-2); }
.membership-row small{ display: block; margin-top: 3px; color: var(--muted); }
.membership-controls{ display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.onboarding-editor{ margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--palette-border-4); }
.onboarding-editor > p{ margin: 5px 0 14px; color: var(--muted); }
.onboarding-row{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--palette-border-1); }
.onboarding-row small{ display: block; margin-top: 3px; color: var(--muted); }
.danger-text{ color: var(--palette-danger-3); }
.status-pill.danger{ border-color: var(--palette-danger-3); color: var(--palette-danger-3); }
.timeline{ display: grid; }
.timeline-row{ display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--palette-border-5); }
.timeline-row p{ margin: 0; }
.timeline-row small{ color: var(--muted); }
.timeline-row time{ color: var(--muted); font-size: 11px; white-space: nowrap; }
.timeline-marker{ width: 10px; height: 10px; margin-top: 5px; border: 2px solid var(--palette-border-4); border-radius: 50%; background: var(--palette-surface-1); }
.timeline-marker.success{ background: var(--palette-ink-3); }
.timeline-marker.failed, .timeline-marker.denied{ border-color: var(--palette-warning-1); background: var(--palette-warning-1); }
.copy-row{ display: flex; gap: 10px; margin-top: 22px; }
.email-provider-card{ display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; margin-bottom: 24px; padding: 22px; border: 1px solid var(--palette-border-4); border-radius: 18px; background: var(--palette-canvas-2); }
.email-provider-card h3{ margin-top: 9px; font-size: 22px; }
.email-provider-card p{ margin: 5px 0; }
.email-provider-card > div:nth-child(2){ align-self: center; margin-top: 0; }
.email-delivery-recent{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.email-delivery-recent span{ padding: 6px 9px; border: 1px solid var(--palette-border-7); border-radius: 999px; background: var(--palette-surface-1); font-size: 10px; }
.communications-readiness{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.readiness-step{ display: grid; gap: 5px; padding: 16px 18px; border: 1px solid var(--palette-border-4); border-radius: 14px; background: var(--palette-surface-1); }
.readiness-step::before{ content: '○'; font-size: 18px; }
.readiness-step.ready::before{ content: '●'; }
.readiness-step span{ color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sender-card{ display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px; border: 1px solid var(--palette-border-4); border-radius: 20px; background: var(--palette-canvas-2); }
.sender-card h3{ margin-top: 10px; font-size: 25px; }
.sender-card p{ margin: 6px 0; }
.communications-library-head{ margin-top: 42px; align-items: end; }
.compact-filter{ margin: 0; justify-content: flex-end; }
.email-template-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.email-template-card{ display: flex; flex-direction: column; min-height: 330px; padding: 22px; border: 1px solid var(--palette-border-4); border-radius: 18px; background: var(--palette-surface-1); }
.email-template-card-head{ display: flex; justify-content: space-between; gap: 12px; }
.email-template-card-head > div{ display: flex; flex-wrap: wrap; gap: 6px; }
.email-template-card h3{ margin-top: 22px; font-size: 22px; }
.email-template-card > p{ min-height: 62px; margin: 8px 0 18px; color: var(--muted); font-size: 13px; }
.template-version{ color: var(--muted); font-size: 11px; }
.template-route{ display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--palette-border-1); border-bottom: 1px solid var(--palette-border-1); font-size: 11px; }
.template-route span{ color: var(--muted); }
.template-subject{ display: grid; gap: 4px; margin: 16px 0; }
.template-subject small{ color: var(--muted); }
.domain-setup{ margin-top: 28px; padding: 22px; border: 1px solid var(--palette-border-4); border-radius: 16px; background: var(--palette-canvas-2); }
.domain-setup h3{ font-size: 21px; }
.domain-setup p{ margin: 5px 0 16px; }
.domain-actions{ display: grid; grid-template-columns: 1fr auto auto; gap: 10px; }
.dns-record-list{ display: grid; gap: 8px; margin-top: 16px; }
.dns-record-row{ display: grid; grid-template-columns: minmax(150px,.7fr) minmax(220px,1.3fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--palette-surface-1); }
.dns-record-row small{ display: block; margin-top: 3px; color: var(--muted); }
.dns-record-row code{ overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.email-editor-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.email-body-editor{ min-height: 300px; line-height: 1.55; }
.email-preview{ min-height: 520px; padding: 24px; border: 1px solid var(--palette-border-4); border-radius: 18px; background: var(--palette-canvas-2); }
.email-preview > div{ margin-top: 18px; padding: 28px; border: 1px solid var(--palette-border-8); border-radius: 15px; background: var(--palette-surface-1); box-shadow: 0 10px 24px var(--palette-shadow-2); }
.email-preview h3{ margin: 10px 0 20px; font-size: 26px; }
.email-preview p{ white-space: pre-line; line-height: 1.6; }
.email-preview small{ color: var(--muted); }
.test-send-row{ display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; margin-top: 22px; padding: 18px; border: 1px solid var(--palette-border-4); border-radius: 14px; }
@media (max-width: 900px){.nav-links{ display: none; position: absolute; top: 78px; left: 0; right: 0; padding: 24px; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; }
.nav-links.open{ display: flex; }
.hero-grid, .split, .cta-grid{ grid-template-columns: 1fr; gap: 48px; }
.feature-grid, .process{ grid-template-columns: 1fr; }
.hero{ padding-top: 65px; }
.journey-card{ transform: none; }
.band .wrap{ align-items: flex-start; }
.band-items{ flex-wrap: wrap; gap: 12px 24px; }
.footer-grid{ grid-template-columns: 1fr 1fr; }
.footer-grid > :first-child{ grid-column: 1 / -1; }
.submission{ grid-template-columns: 1fr 1fr; }
.configuration-grid{ grid-template-columns: 1fr; }
.journey-admin-grid{ grid-template-columns: 1fr; }
.admin-stats{ grid-template-columns: repeat(2, 1fr); }
.control-columns{ grid-template-columns: 1fr; }
.admin-tabs{ overflow-x: auto; }
.email-template-grid{ grid-template-columns: repeat(2, 1fr); }
.email-editor-grid{ grid-template-columns: 1fr; }}
@media (max-width: 600px){.wrap{ width: min(100% - (var(--space-page) * 2), var(--content-width)); }
h1{ font-size: 46px; }
.band .wrap, .admin-head{ align-items: flex-start; flex-direction: column; }
.form-grid, .submission{ grid-template-columns: 1fr; }
.catalog-toolbar, .product-card-head, .dialog-actions{ align-items: stretch; flex-direction: column; }
.control-card-head, .filter-row, .copy-row, .membership-row, .membership-controls, .onboarding-row{ align-items: stretch; flex-direction: column; }
.email-provider-card{ grid-template-columns: 1fr; }
.email-delivery-recent{ grid-column: auto; }
.security-summary{ text-align: left; }
.timeline-row{ grid-template-columns: 14px 1fr; }
.timeline-row time{ grid-column: 2; }
.field.full{ grid-column: auto; }
.communications-readiness, .email-template-grid{ grid-template-columns: 1fr; }
.sender-card, .domain-actions{ display: flex; align-items: stretch; flex-direction: column; }
.dns-record-row, .test-send-row{ grid-template-columns: 1fr; }
.form-foot{ align-items: stretch; flex-direction: column; }
.story-panel{ min-height: 430px; padding: 28px; }
.footer-grid{ grid-template-columns: 1fr; }
.footer-grid > :first-child{ grid-column: auto; }}
@media (prefers-reduced-motion: reduce){html{ scroll-behavior: auto; }
*{ transition: none !important; }}
.feature.dark .feature-number, .cta-section .eyebrow, .story-panel .eyebrow{ color: var(--palette-surface-1); }
.cta-section .eyebrow::before, .story-panel .eyebrow::before{ background: var(--palette-surface-1); }
.live-pill, .step-icon{ border: 1px solid var(--palette-border-4); }
.section-outline{ border-top: 1px solid var(--palette-border-4); border-bottom: 1px solid var(--palette-border-4); }
.site-footer .brand{ color: var(--palette-surface-1); font-size: 20px; }
.nav-links a:not(.btn):hover, .nav-links a.active, .footer-links a:hover{ text-decoration: underline; text-underline-offset: 5px; }
.cta-section .hero-actions{ margin-top: 28px; }
.form-status.error{ font-weight: 700; }