/* Palette values are shared by the chooser and the real public page. */
.theme-default {
  --cms-ink: #15243b; --cms-paper: #f4f7fb; --cms-surface: #ffffff;
  --cms-accent: #2456cf; --cms-on-accent: #ffffff; --cms-tint: #e5edff;
  --cms-line: #d7e0ea; --cms-muted: #526176;
}
.theme-modern_dark {
  --cms-ink: #f3f6fb; --cms-paper: #0b1420; --cms-surface: #152333;
  --cms-accent: #7aebc1; --cms-on-accent: #0b1420; --cms-tint: #203b38;
  --cms-line: #34475b; --cms-muted: #b3c3d3;
}
.theme-agency_blue {
  --cms-ink: #123e59; --cms-paper: #eef7fb; --cms-surface: #ffffff;
  --cms-accent: #12658a; --cms-on-accent: #ffffff; --cms-tint: #d8edf7;
  --cms-line: #c3dce8; --cms-muted: #496a7b;
}
.theme-emerald_growth {
  --cms-ink: #16382b; --cms-paper: #f1f6ef; --cms-surface: #ffffff;
  --cms-accent: #236547; --cms-on-accent: #ffffff; --cms-tint: #dcebdc;
  --cms-line: #ceddce; --cms-muted: #536b5b;
}
.theme-terracotta {
  --cms-ink: #432d24; --cms-paper: #faf3e8; --cms-surface: #fffcf7;
  --cms-accent: #a33f29; --cms-on-accent: #ffffff; --cms-tint: #f5dfd0;
  --cms-line: #e5d2c1; --cms-muted: #795e50;
}
.theme-plum {
  --cms-ink: #382444; --cms-paper: #f6f0fa; --cms-surface: #ffffff;
  --cms-accent: #72408c; --cms-on-accent: #ffffff; --cms-tint: #eadcf3;
  --cms-line: #dfcfe8; --cms-muted: #725b7e;
}
.cms-page-wrapper {
  --ink: var(--cms-ink); --paper: var(--cms-paper); --snow: var(--cms-surface);
  --signal: var(--cms-accent); --line: var(--cms-line); --mist: var(--cms-muted);
  --mark: var(--cms-accent);
  overflow-wrap: anywhere;
}
.cms-page-wrapper .button { color: var(--cms-on-accent); background: var(--cms-accent); }
.cms-page-wrapper input::placeholder, .cms-page-wrapper textarea::placeholder { color: var(--cms-muted); opacity: 1; }
.cms-page-wrapper .cms-feature-icon { color: var(--cms-on-accent); }
.cms-page-wrapper input:focus-visible,
.cms-page-wrapper select:focus-visible,
.cms-page-wrapper textarea:focus-visible,
.cms-page-wrapper a:focus-visible { outline: 3px solid var(--cms-accent); outline-offset: 3px; }
.cms-page-wrapper .cms-hero-headline { font-size: clamp(2.1rem, 4.2vw, 3.7rem); }
.cms-page-wrapper .cms-header-inner { gap: 1rem; }

/* Editorial leads with the story and uses a deliberately quieter service list. */
.layout-editorial .cms-hero-headline,
.layout-editorial .cms-section-header h2,
.layout-editorial .cms-cta-strip h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -0.045em; }
.layout-editorial .cms-hero { padding-block: 5rem; }
.layout-editorial .cms-hero-headline { font-size: clamp(2.7rem, 4.7vw, 4.3rem); }
.layout-editorial .cms-badge { border-radius: 0; padding: .4rem 0; background: transparent; border-bottom: 2px solid var(--signal); }
.layout-editorial .cms-card,
.layout-editorial .cms-testimonial-card { border-radius: 0; box-shadow: none; }
.layout-editorial .cms-section-header { text-align: left; max-width: none; }
.layout-editorial .cms-features-grid { grid-template-columns: 1fr; counter-reset: service; gap: 0; }
.layout-editorial .cms-feature-card { display: grid; grid-template-columns: 3rem 1fr 2fr; gap: 1.5rem; align-items: baseline; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding-inline: 0; }
.layout-editorial .cms-feature-icon { font-size: 0; background: transparent; color: var(--signal); }
.layout-editorial .cms-feature-icon::after { counter-increment: service; content: counter(service, decimal-leading-zero); font-size: 1.1rem; }
.layout-editorial .cms-story-container { max-width: 1120px; }
.layout-editorial .cms-prose { max-width: 48rem; margin-left: auto; }

/* Spotlight separates the pitch from the conversion area, including both embeds. */
.layout-spotlight .cms-hero { background: radial-gradient(ellipse at top, var(--cms-tint), transparent 75%); padding-top: 5rem; }
.layout-spotlight .cms-hero-grid { grid-template-columns: 1fr; }
.layout-spotlight .cms-hero-content { text-align: center; max-width: 840px; margin: 0 auto 1.5rem; width: 100%; }
.layout-spotlight .cms-hero-headline { font-size: clamp(2.6rem, 5.7vw, 4.7rem); letter-spacing: -.055em; }
.layout-spotlight .cms-hero-subheadline { max-width: 640px; margin: auto; }
.layout-spotlight .cms-embed-card { width: 100%; max-width: 640px; margin-inline: auto; }
.layout-spotlight .has-both-embeds { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.layout-spotlight .has-both-embeds .cms-hero-content { grid-column: 1 / -1; grid-row: auto; }
.layout-spotlight .cms-card,
.layout-spotlight .cms-feature-card,
.layout-spotlight .cms-testimonial-card { border-radius: 24px; }
.layout-spotlight .cms-testimonial-card { border: 0; background: var(--cms-tint); }
.layout-spotlight .cms-cta-strip { margin: 1.5rem; border: 1px solid var(--line); border-radius: 24px; }
.layout-spotlight .button { border-radius: 999px; }

/* Editor gallery uses native radio inputs so keyboard selection needs no script. */
.cms-design-studio { margin-bottom: 1.5rem; min-width: 0; }
.cms-design-heading, .cms-preview-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cms-design-heading p { color: #526176; max-width: 650px; }
.cms-design-fieldset { border: 0; padding: 0; margin: 1.5rem 0; min-width: 0; }
.cms-design-fieldset legend { font-weight: 600; margin-bottom: .65rem; }
.cms-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.cms-layout-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.cms-design-option { position: relative; display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--line); border-radius: 12px; padding: .85rem; cursor: pointer; min-width: 0; }
.cms-design-option:has(input:checked) { border-color: #2456cf; box-shadow: 0 0 0 2px #2456cf; background: #f4f7ff; }
.cms-design-option:focus-within { outline: 3px solid #2456cf; outline-offset: 3px; }
.cms-design-option input { position: absolute; top: .85rem; right: .85rem; accent-color: #2456cf; }
.cms-design-option small { color: #526176; line-height: 1.5; }
.cms-theme-sample { display: flex; height: 40px; margin-right: 1.5rem; border: 1px solid #0001; border-radius: 6px; overflow: hidden; }
.cms-theme-sample i { flex: 1; background: var(--cms-paper); }
.cms-theme-sample i:nth-child(2) { background: var(--cms-ink); }
.cms-theme-sample i:nth-child(3) { background: var(--cms-accent); }
.cms-theme-sample i:nth-child(4) { background: var(--cms-tint); }
.cms-layout-sample { width: 90px; height: 45px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; background: #edf1f7; border: 1px solid #d7e0ea; border-radius: 5px; }
.cms-layout-sample i { background: #a5b8d3; border-radius: 2px; }
.sample-classic i:first-child { grid-row: span 2; background: #2456cf; }
.sample-editorial { grid-template-columns: 1fr 2fr; }
.sample-editorial i:first-child { grid-column: span 2; background: #2456cf; }
.sample-spotlight { grid-template-columns: 1fr 1fr; }
.sample-spotlight i:first-child { grid-column: span 2; margin-inline: 12px; background: #2456cf; }
.cms-preview-toolbar { padding-block: .5rem; }
.cms-preview-toolbar p { margin: .25rem 0; color: #526176; }
.cms-preview-controls { display: flex; flex-wrap: wrap; gap: .4rem; }
.workspace-shell .cms-preview-controls .button[aria-pressed="true"] { background: #e5edff; color: #153b98; border-color: #2456cf; }
.cms-preview-stage { background: #e2e8f0; padding: 1rem; border-radius: 12px; margin-top: .5rem; }
.cms-preview-stage iframe { display: block; width: 100%; height: 650px; border: 1px solid #c6d1de; border-radius: 6px; background: white; margin: auto; }
.cms-preview-stage.is-mobile iframe { max-width: 390px; }
@media (max-width: 860px) {
  .layout-spotlight .has-both-embeds { grid-template-columns: 1fr; }
  .layout-spotlight .has-both-embeds .cms-hero-content { grid-column: auto; }
  .layout-editorial .cms-feature-card { grid-template-columns: 2rem 1fr; gap: .75rem; }
  .layout-editorial .cms-feature-card p { grid-column: 2; }
  .cms-theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cms-layout-options { grid-template-columns: 1fr; }
  .cms-design-option { padding: .7rem; }
  .cms-preview-stage { padding: .35rem; }
  .cms-preview-stage iframe { height: 560px; }
  .layout-spotlight .cms-cta-strip { margin: .75rem; padding: 2.5rem 0; }
}