/* AtlasLaunch Theme components. Every class starts with atl-; values come from tokens.css (theme.json presets). */

.atl-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.atl-eyebrow { font: 600 13px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.atl-lead { font-size: 19px; line-height: 30px; color: var(--text); }
.atl-muted { color: var(--muted); }
.atl-mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }
.atl-icon { width: 20px; height: 20px; flex: none; }

/* Button */
.atl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 22px; border-radius: var(--radius-md); border: 1.5px solid transparent; font: 600 16px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background .12s ease-out, border-color .12s ease-out, transform .12s ease-out; white-space: nowrap; }
.atl-btn--primary { background: var(--brand); color: var(--on-brand); }
.atl-btn--primary:hover { background: var(--brand-ink); color: var(--on-brand); }
.atl-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.atl-btn--secondary:hover { border-color: var(--brand); color: var(--brand-ink); }
.atl-btn--ghost { background: transparent; color: var(--ink); padding: 0 12px; }
.atl-btn--ghost:hover { color: var(--brand-ink); background: var(--surface-sunken); }
.atl-btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.atl-btn[aria-disabled="true"] { background: var(--surface-sunken); color: var(--muted); border: 1.5px dashed var(--line-strong); cursor: not-allowed; }
.atl-btn svg { width: 18px; height: 18px; }

/* Badge and status chip */
.atl-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 10px; border-radius: var(--radius-full); font: 600 13px/18px var(--font-body); background: var(--brand-soft); color: var(--brand-ink); }
.atl-badge--pro { background: var(--navy); color: #f3d27a; }
.atl-badge--new { background: var(--success-soft); color: var(--success); }
.atl-badge--soon { background: var(--warning-soft); color: var(--warning); }
.atl-badge--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.atl-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; flex: none; }

.atl-tile { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: color-mix(in srgb, var(--p, var(--brand)) 14%, var(--surface)); color: var(--p, var(--brand)); flex: none; }
.atl-type { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 12px/1 var(--font-body); white-space: nowrap; }
.atl-tile svg { width: 22px; height: 22px; }

/* Card */
.atl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; }
.atl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); border-color: color-mix(in srgb, var(--p, var(--brand)) 40%, var(--line)); }
.atl-card h3 { font-size: 20px; line-height: 26px; }
.atl-card p { font-size: 15px; line-height: 24px; color: var(--muted); }
.atl-card__foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); font: 600 14px/20px var(--font-body); color: var(--ink); display: flex; align-items: center; gap: var(--space-2); }
.atl-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Section heading */
.atl-sec { padding-block: var(--space-9); }
.atl-sechead { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-bottom: var(--space-7); }
.atl-sechead--center { margin-inline: auto; text-align: center; align-items: center; }
.atl-sechead h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; letter-spacing: -.02em; }

/* Announcement bar */
.atl-announce { background: var(--navy); color: var(--on-navy); font-size: 14px; line-height: 20px; }
.atl-announce__in { display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; min-height: 44px; padding: 8px 56px 8px 20px; position: relative; text-align: center; }
.atl-announce code { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px dashed rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.atl-announce a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.atl-announce__x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #b4c0d3; font-size: 20px; cursor: pointer; }

/* Header and mega menu */
.atl-header { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); position: relative; }
.atl-header__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.atl-logo { display: flex; align-items: center; gap: 10px; font: 800 20px/1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.atl-logo__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 17px; }
.atl-logo b { color: var(--brand-ink); }
.atl-nav { display: flex; gap: 4px; }
.atl-nav a, .atl-nav button { font: 600 15px/1 var(--font-body); color: var(--text); text-decoration: none; padding: 12px 14px; border-radius: 10px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.atl-nav a:hover, .atl-nav button:hover, .atl-nav [aria-expanded="true"] { background: var(--surface-sunken); color: var(--ink); }
.atl-header__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.atl-iconbtn { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.atl-kbd { font: 600 12px/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.atl-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 15px; min-width: 220px; }
.atl-mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 8px; z-index: 5; }
.atl-mega__card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-raised); display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; padding: 12px; }
.atl-mega h5 { margin: 6px 12px 8px; font: 600 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.atl-mega__item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text); }
.atl-mega__item:hover { background: var(--surface-sunken); }
.atl-mega__item strong { display: block; color: var(--ink); font-size: 15px; line-height: 20px; }
.atl-mega__item span span { font-size: 14px; line-height: 20px; color: var(--muted); }
.atl-mega__links a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px; }
.atl-mega__links a:hover { background: var(--surface-sunken); color: var(--brand-ink); }
.atl-mega__feature { border-radius: 16px; background: var(--navy); color: var(--on-navy); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.atl-mega__feature h6 { margin: 0; font: 700 18px/1.3 var(--font-display); }
.atl-mega__feature a { color: #fff; font-weight: 600; margin-top: auto; }

/* Hero */
.atl-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 88px 104px; }
.atl-hero::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 70%; height: 140%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); z-index: -1; }
.atl-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--brand) 22%, transparent) 1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 55% 70% at 75% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 55% 70% at 75% 40%, #000, transparent 75%); z-index: -1; }
.atl-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.atl-hero h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.atl-hero h1 em { font-style: normal; color: var(--brand-ink); background: linear-gradient(transparent 70%, color-mix(in srgb, var(--accent) 45%, transparent) 70%); }
.atl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.atl-proof { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.atl-proof strong { color: var(--ink); }
.atl-stars { color: var(--star); letter-spacing: 2px; }

/* Stats band */
.atl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); }
.atl-stat { background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.atl-stat strong { font: 800 36px/1 var(--font-display); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.atl-stat span { font-weight: 700; color: var(--ink); font-size: 15px; }
.atl-stat small { font-size: 13px; line-height: 18px; color: var(--muted); }

/* Pricing */
.atl-billing { display: inline-flex; padding: 4px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); }
.atl-billing button { min-height: 40px; padding: 0 18px; border-radius: var(--radius-full); border: 0; background: transparent; color: var(--muted); font: 600 14px/1 var(--font-body); cursor: pointer; }
.atl-billing [aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.atl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; }
.atl-plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.atl-plan--featured { border: 2px solid var(--brand); box-shadow: var(--shadow-raised); }
.atl-plan__ribbon { position: absolute; top: -13px; left: 28px; }
.atl-plan__price { font: 800 44px/1 var(--font-display); color: var(--ink); letter-spacing: -.03em; }
.atl-plan__price small { font: 500 15px/1 var(--font-body); color: var(--muted); letter-spacing: 0; }
.atl-plan ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.atl-plan li { display: flex; gap: 10px; }
.atl-plan li::before { content: "✓"; color: var(--success); font-weight: 700; }
.atl-plan .atl-btn { margin-top: auto; }

/* FAQ */
.atl-faq { display: flex; flex-direction: column; gap: 12px; }
.atl-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.atl-faq details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow-card); }
.atl-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font: 700 17px/1.4 var(--font-display); color: var(--ink); }
.atl-faq summary::-webkit-details-marker { display: none; }
.atl-faq summary::after { content: "+"; width: 30px; height: 30px; flex: none; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font: 600 22px/1 var(--font-body); transition: transform .2s; }
.atl-faq details[open] summary::after { transform: rotate(45deg); }
.atl-faq details p { padding: 0 22px 20px; font-size: 16px; line-height: 26px; }

/* Code with language tabs */
.atl-code { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #0b1220; color: #e2e8f0; }
.atl-code__tabs { display: flex; gap: 2px; padding: 6px; background: #111a2e; border-bottom: 1px solid #1f2b45; }
.atl-code__tabs button { border: 0; background: transparent; color: #a9b6cc; font: 600 13px/1 var(--font-body); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.atl-code__tabs [aria-selected="true"] { background: #1f2b45; color: #fff; }
.atl-code__copy { margin-left: auto; }
.atl-code pre { margin: 0; padding: 16px 18px; font: 500 13px/20px var(--font-mono); overflow-x: auto; }
.atl-code .k { color: #7fb2ff; } .atl-code .s { color: #ffb27f; } .atl-code .c { color: #8a96a8; }

/* Tabs (product tour) */
.atl-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.atl-tab { display: flex; flex-direction: column; gap: 8px; min-width: 150px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: 600 14px/1.2 var(--font-body); color: var(--muted); cursor: pointer; text-align: left; }
.atl-tab[aria-selected="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--p, var(--brand)) 55%, var(--line)); }
.atl-tab__bar { display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.atl-tab[aria-selected="true"] .atl-tab__bar::after { content: ""; display: block; height: 100%; width: 60%; background: var(--p, var(--brand)); }
.atl-tab__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--p, var(--brand)); margin-right: 6px; }

/* CTA band */
.atl-cta { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: linear-gradient(135deg, var(--surface-sunken), var(--surface) 60%); padding: 64px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; box-shadow: var(--shadow-card); }
.atl-cta h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.atl-cta p { margin-top: 14px; color: var(--muted); font-size: 18px; }
.atl-cta__side { display: flex; flex-direction: column; gap: 12px; }

/* Footer */
.atl-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 64px 28px; }
.atl-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: 40px; }
.atl-footer h4 { font: 700 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.atl-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.atl-footer ul a { color: var(--text); text-decoration: none; font-size: 15px; }
.atl-footer ul a:hover { color: var(--brand-ink); }
.atl-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.atl-input { height: 48px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); padding: 0 14px; font: 500 15px var(--font-body); min-width: 0; }

/* Site assistant (search and chat) */
.atl-assist { width: 380px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-raised); display: flex; flex-direction: column; overflow: hidden; }
.atl-assist__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.atl-assist__head strong { color: var(--ink); font: 700 16px/1.2 var(--font-display); }
.atl-assist__head small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.atl-assist__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.atl-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 22px; }
.atl-msg--me { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
.atl-msg--bot { align-self: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.atl-msg--bot a { display: block; margin-top: 6px; font-weight: 600; }
.atl-assist__src { display: flex; gap: 6px; flex-wrap: wrap; }
.atl-assist__foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: center; }
.atl-assist__foot .atl-input { flex: 1; height: 44px; }
.atl-mic { width: 44px; height: 44px; border-radius: var(--radius-full); border: 0; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; cursor: pointer; }
.atl-mic[aria-pressed="true"] { background: var(--danger); color: #fff; }
.atl-assist__note { padding: 0 16px 12px; font-size: 12px; line-height: 17px; color: var(--muted); }
.atl-launcher { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border-radius: var(--radius-full); border: 0; background: var(--ink); color: var(--surface); font: 600 15px/1 var(--font-body); box-shadow: var(--shadow-raised); cursor: pointer; }

@media (max-width: 860px) {
  .atl-hero__grid, .atl-cta { grid-template-columns: 1fr; }
  .atl-stats { grid-template-columns: repeat(2, 1fr); }
  .atl-footer__grid { grid-template-columns: 1fr 1fr; }
  .atl-mega__card { grid-template-columns: 1fr; }
  .atl-nav, .atl-search { display: none; }
}

/* ---------- Accessibility ---------- */
.atl-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.atl-skip { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 12px 18px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-raised); }
.atl-skip:focus { top: 12px; }
/* Windows High Contrast / forced colours */
@media (forced-colors: active) {
  .atl-btn, .atl-card, .atl-plan, .atl-badge, .atl-tab, .atl-input, .atl-assist { border: 1px solid CanvasText; }
  .atl-btn--primary { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .atl-tab[aria-selected="true"] .atl-tab__bar { background: Highlight; }
}

/* Site search (header "/" panel, page search field, voice) */
.atl-sfield { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px 0 16px; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-card); }
.atl-sfield:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.atl-sfield svg { width: 22px; height: 22px; color: var(--muted); flex: none; }
.atl-sfield input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 400 17px/1 var(--font-body); color: var(--ink); height: 100%; }
.atl-sfield input::placeholder { color: var(--muted); }
.atl-sfield .atl-kbd { flex: none; }
.atl-sfield__clear { border: 0; background: none; color: var(--muted); font-size: 20px; width: 36px; height: 36px; border-radius: var(--radius-sm); cursor: pointer; }
.atl-sfield--sm { height: 44px; }
.atl-sfield--sm input { font-size: 15px; }
.atl-mic { flex: none; }
.atl-mic[aria-pressed="true"] { background: var(--danger); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 18%, transparent); }
.atl-spanel { width: min(680px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-raised); overflow: hidden; }
.atl-spanel .atl-sfield { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.atl-spanel__filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.atl-spanel__filters button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.atl-spanel__list { max-height: 360px; overflow: auto; padding: 6px 0; margin: 0; list-style: none; }
.atl-spanel__group { padding: 10px 16px 4px; font: 600 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.atl-sres { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; color: var(--ink); }
.atl-sres[aria-selected="true"], .atl-sres:hover { background: var(--surface-sunken); box-shadow: inset 3px 0 0 var(--brand); }
.atl-sres .atl-tile { width: 36px; height: 36px; }
.atl-sres__text { flex: 1; min-width: 0; }
.atl-sres__text b { display: block; font: 600 15px/20px var(--font-body); }
.atl-sres__text span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-sres mark { background: color-mix(in srgb, var(--brand) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.atl-sres--ask { border-top: 1px solid var(--line); margin-top: 6px; }
.atl-spanel__foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.atl-spanel__empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.atl-spanel__empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.atl-listening { display: flex; align-items: center; gap: 12px; padding: 18px 16px; color: var(--ink); }
.atl-listening__bars { display: flex; gap: 3px; align-items: center; height: 24px; }
.atl-listening__bars i { width: 4px; border-radius: 2px; background: var(--danger); animation: atl-eq 1s ease-in-out infinite; }
.atl-listening__bars i:nth-child(2) { animation-delay: .15s; } .atl-listening__bars i:nth-child(3) { animation-delay: .3s; } .atl-listening__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes atl-eq { 0%, 100% { height: 6px; } 50% { height: 22px; } }
@media (prefers-reduced-motion: reduce) { .atl-listening__bars i { animation: none; height: 14px; } }
@media (forced-colors: active) { .atl-sres[aria-selected="true"] { outline: 2px solid Highlight; } }

/* ---------- Site header on small screens ----------
   One line: logo and title (cut with an ellipsis), the menu button, the shop icons and search.
   The header button is compact under 600px and hidden under 480px (the menu still has every link). */
.atl-sticky-header .alignwide { gap: 12px 16px; }
.atl-sticky-header .alignwide > .wp-block-group:first-child { min-width: 0; flex: 0 1 auto; }
.atl-sticky-header .alignwide > :not(:first-child) { flex-shrink: 0; }
.atl-sticky-header .wp-block-site-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.atl-sticky-header .wp-block-search { flex: none; }
.atl-sticky-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 781px) {
  .atl-sticky-header .wp-block-site-title { font-size: 1.0625rem; }
  .atl-sticky-header .wp-block-site-logo img { width: 30px; height: auto; }
}
@media (max-width: 599px) {
  .atl-sticky-header { padding-top: 10px !important; padding-bottom: 10px !important; }
  .atl-sticky-header .alignwide { gap: 8px; }
  .atl-sticky-header .alignwide > .wp-block-group:last-child { gap: 6px; }
  .atl-sticky-header .wp-block-buttons .wp-block-button__link { padding: 9px 12px !important; }
  .wp-block-navigation__responsive-container-open { min-width: 40px; min-height: 40px; justify-content: center; align-items: center; }
}
@media (max-width: 479px) {
  .atl-sticky-header .wp-block-buttons { display: none; }
}

/* ---------- Footer ---------- */
footer.wp-block-template-part :is(ul.wp-block-list, ul.wp-block-page-list, .wp-block-navigation ul) { list-style: none; padding-left: 0; }
footer.wp-block-template-part ul.wp-block-list { display: flex; flex-direction: column; gap: var(--space-2); }
footer.wp-block-template-part ul.wp-block-list > li { margin: 0; }
/* Link lists in the footer read as navigation: underline on hover and focus only. Links in text keep theirs. */
footer.wp-block-template-part li a { text-decoration: none; }
footer.wp-block-template-part li a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
footer.wp-block-template-part li a, .atl-footer-nav .wp-block-navigation-item__content { display: inline-block; padding-block: 2px; min-height: 24px; }
/* Room at the bottom right for a floating chat or cookie button, so it never covers the last line. */
.atl-footer-credit { padding-bottom: max(56px, env(safe-area-inset-bottom, 0px)); }

/* ---------- Headings and reading width in content ---------- */
/* Section headings of the theme's patterns (a centred h2 in a full-width group) stay large; h2 in text is smaller. */
.wp-block-group.alignfull :where(h2.wp-block-heading.has-text-align-center):not([class*="-font-size"]) { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.12; }
/* More space above a heading than below it, so it belongs to the text it introduces. */
:is(.wp-block-post-content, .entry-content) > :is(h2, h3) { margin-block-start: 1.6em; }
:is(.wp-block-post-content, .entry-content) > h4 { margin-block-start: 1.4em; }
:is(.wp-block-post-content, .entry-content) > :is(h2, h3, h4) + * { margin-block-start: var(--space-3); }
:is(.wp-block-post-content, .entry-content) > :first-child { margin-block-start: 0; }

/* ---------- Post cards (blog, archive, search) ----------
   Same height in a row, with or without a featured image; the date (or a product's price) sits at the bottom. */
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template > li > .atl-card { flex: 1; overflow: hidden; }
.atl-card > .wp-block-group:last-child { flex: 1; display: flex; flex-direction: column; }
.atl-card > .wp-block-group:last-child > .wp-block-post-excerpt .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.atl-card > .wp-block-group:last-child > :is(.wp-block-post-date, .atl-card-price):last-child { margin-top: auto; padding-top: var(--space-2); }
/* Cards saved before this version had no top padding on the text: give it one when there is no picture. */
.atl-card:not(.atl-post-card):not(:has(> .wp-block-post-featured-image)) > .wp-block-group:first-child { padding-top: var(--space-5); }
.atl-post-card .wp-block-post-featured-image { margin: 0; }
.atl-post-card .wp-block-post-featured-image img { border-radius: 0; }
.atl-post-card .wp-block-post-title a:is(:hover, :focus-visible) { text-decoration: underline; }
/* Products in mixed results: a square picture and the price instead of a date. */
.wp-block-post-template > li.type-product .wp-block-post-featured-image img { aspect-ratio: 1 / 1 !important; object-fit: cover; }
.atl-card-price { font: 700 17px/1.3 var(--font-body); color: var(--ink); }
.atl-card-price del { color: var(--muted); font-weight: 400; margin-right: 6px; }
.atl-card-price ins { text-decoration: none; }

/* ---------- Post featured image: natural shape, never stretched or blown up ---------- */
.wp-block-post-featured-image.atl-post-hero img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(75vh, 720px); margin-inline: auto; object-fit: contain; border-radius: var(--radius-xl); }

/* ---------- Pagination: targets of at least 40px (WCAG 2.5.8 asks for 24px) ---------- */
:is(.wp-block-query-pagination, .wp-block-comments-pagination) { gap: var(--space-2); flex-wrap: wrap; }
:is(.wp-block-query-pagination-numbers, .wp-block-comments-pagination-numbers) { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
:is(.wp-block-query-pagination, .wp-block-comments-pagination, .woocommerce-pagination) :is(a, .page-numbers),
.wc-block-components-pagination__page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
:is(.wp-block-query-pagination, .wp-block-comments-pagination, .woocommerce-pagination) .page-numbers.current,
.wc-block-components-pagination__page--active { background: var(--ink); color: var(--surface); font-weight: 700; }
:is(.wp-block-query-pagination, .wp-block-comments-pagination) a:hover { background: var(--surface-sunken); }

/* ---------- WooCommerce ----------
   Works with the block templates WooCommerce brings for block themes (no theme templates needed) and with
   the classic shortcodes. Colours come from the tokens, so style variations and dark mode follow. */

/* Product pictures in lists: one square shape, unless the block was given its own aspect ratio. */
.wc-block-components-product-image--aspect-ratio-auto img,
.wc-block-grid__product-image img,
.woocommerce ul.products li.product a img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; }
.wc-block-components-product-image img, .woocommerce ul.products li.product a img { border-radius: var(--radius-lg); }

/* Cards: the add-to-cart button lines up at the bottom of every card in a row. */
.wc-block-product-template > li.wc-block-product,
.wc-block-grid__product,
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.wc-block-product > :is(.wp-block-woocommerce-product-button, .wc-block-components-product-button),
.wc-block-grid__product > .wc-block-grid__product-add-to-cart,
.woocommerce ul.products li.product > .button { margin-top: auto; }
.wc-block-product .wp-block-post-title a { text-decoration: none; color: var(--ink); }
.wc-block-product .wp-block-post-title a:is(:hover, :focus-visible) { text-decoration: underline; }

/* Sale badge: one style everywhere, light text on the error colour (6:1 in light and in dark). */
.wc-block-components-product-sale-badge,
.wc-block-components-sale-badge,
.woocommerce span.onsale {
  background: var(--danger); color: var(--surface); border: 0; border-radius: var(--radius-full);
  font: 700 12px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px; min-height: 0; min-width: 0;
}
.wc-block-components-product-image .wc-block-components-product-sale-badge { margin: 10px; }

/* Price and sale price. */
.wc-block-components-product-price, .woocommerce .price, .woocommerce-Price-amount { color: var(--ink); }
.wc-block-components-product-price, .woocommerce .price { font-weight: 700; }
:is(.wc-block-components-product-price, .woocommerce .price) del,
.wc-block-components-product-price__regular { color: var(--muted); font-weight: 400; opacity: 1; }
:is(.wc-block-components-product-price, .woocommerce .price) ins,
.wc-block-components-product-price__value.is-discounted { text-decoration: none; color: var(--danger); background: none; font-weight: 700; }

/* Fields: quantity, selects (sorting, variations), text areas, checkout inputs. */
.woocommerce :is(.quantity .qty, select, textarea, .input-text),
.wp-block-woocommerce-catalog-sorting select,
.wc-block-components-quantity-selector,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background-color: var(--surface); color: var(--ink);
  font: 500 15px/1.4 var(--font-body);
}
.woocommerce :is(select, .quantity .qty, .input-text:not(textarea)), .wp-block-woocommerce-catalog-sorting select { min-height: 44px; padding: 8px 12px; }
.woocommerce .quantity .qty { width: 4.5em; text-align: center; }
.woocommerce textarea { padding: 10px 12px; }
.wc-block-components-quantity-selector { min-height: 44px; }
.wc-block-components-quantity-selector input { color: var(--ink); background: transparent; }
.wc-block-components-quantity-selector__button { min-width: 36px; color: var(--ink); }
.wc-block-components-text-input label, .wc-blocks-components-select__label { color: var(--muted); }

/* Notices. */
.wc-block-components-notice-banner, .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { border-radius: var(--radius-md); color: var(--ink); }
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); padding: var(--space-4) var(--space-5); list-style: none; }
.woocommerce .woocommerce-error { border-left-color: var(--danger); }
.woocommerce .woocommerce-message { border-left-color: var(--success); }
.wc-block-components-notice-banner__dismiss { min-width: 24px; min-height: 24px; }
.wc-block-components-notice-banner a, .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a { color: var(--brand-ink); }

/* Product tabs. */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--line); list-style: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); color: var(--muted); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--brand); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
/* Readable line length for the product description. */
.woocommerce-Tabs-panel { max-width: 36rem; }
.woocommerce-Tabs-panel > h2:first-child { font-size: var(--wp--preset--font-size--x-large); }

/* Related and upsell products. */
:is(.related, .upsells, .cross-sells) > h2 { font-size: var(--wp--preset--font-size--x-large); }

/* Cart and checkout blocks follow the theme. */
:is(.wc-block-cart, .wc-block-checkout) { color: var(--text); }
:is(.wc-block-cart, .wc-block-checkout, .wc-block-mini-cart__drawer) :is(.wc-block-components-totals-wrapper, .wc-block-cart-items td, .wc-block-cart-items th, .wc-block-components-panel) { border-color: var(--line); }
:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-title, .wc-block-components-checkout-step__title { color: var(--ink); font-family: var(--font-display); }
:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-product-name { color: var(--ink); font-weight: 600; }
.wc-block-components-text-input input:focus, .wc-blocks-components-select__select:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.wc-block-components-button:not(.is-link) { border-radius: var(--radius-md); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"], .wc-block-components-radio-control__input { border-color: var(--line-strong); background-color: var(--surface); }

/* ---------- Header search (patterns/header-search.php, assets/js/header-search.js) ----------
   A "Search /" button in the header tools opens a modal panel: the field, voice search where the
   browser has speech recognition, instant results and the voice note. Under 600px the button is
   an icon and the panel fills the top of the screen. Colours come from the tokens, so the dark
   style and automatic dark mode apply. */
.atl-hsearch-wrap { display: flex; }
.atl-hsearch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: 500 15px/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.atl-hsearch:hover { border-color: var(--line-strong); color: var(--ink); }
.atl-hsearch svg { flex: none; }
.atl-hsearch__kbd { margin-left: 18px; }
@media (max-width: 1023px) { .atl-hsearch__kbd { display: none; } }
@media (max-width: 599px) {
  .atl-hsearch { width: 40px; padding: 0; justify-content: center; }
  .atl-hsearch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.atl-sdialog { width: min(680px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 96px); margin: 72px auto auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.atl-sdialog::backdrop { background: color-mix(in srgb, #050a17 55%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.atl-sdialog .atl-spanel { display: flex; flex-direction: column; max-height: calc(100dvh - 96px); }
.atl-sdialog [hidden] { display: none !important; }
.atl-sdialog .atl-spanel { box-sizing: border-box; }
/* The field shows its focus on the whole bar (:focus-within), so the inner input needs no second ring. */
.atl-sdialog .atl-sfield input:focus-visible { outline: none; }
.atl-sdialog .atl-sfield:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.atl-sdialog .atl-sfield { flex: none; height: 60px; }
.atl-sdialog .atl-sfield input { font-size: 17px; }
.atl-sdialog .atl-sfield input::-webkit-search-cancel-button { display: none; }
.atl-sdialog .atl-mic { width: 40px; height: 40px; }
.atl-sdialog .atl-mic[aria-pressed="true"] { border-color: var(--danger); }
.atl-sdialog .atl-sfield__clear { display: grid; place-items: center; }
.atl-sdialog .atl-sfield__clear:hover { background: var(--surface-sunken); color: var(--ink); }
.atl-sdialog .atl-spanel__list { flex: 1 1 auto; max-height: none; min-height: 0; }
.atl-sdialog .atl-spanel__group { list-style: none; }
.atl-sdialog .atl-sres { list-style: none; margin: 0; }
.atl-sdialog .atl-sres--ask b { font-weight: 500; color: var(--brand-ink); }
.atl-sdialog .atl-spanel__empty { margin: 0; }
.atl-sdialog .atl-spanel__foot { flex: none; }
.atl-sdialog .atl-spanel__foot [data-atl-search-voice-note] { flex-basis: 100%; }
@media (max-width: 599px) {
  .atl-sdialog { width: 100%; margin: 0; max-height: 100dvh; }
  .atl-sdialog .atl-spanel { border-radius: 0 0 var(--radius-xl) var(--radius-xl); border-top: 0; max-height: 100dvh; }
  .atl-sdialog [data-atl-search-keys] { display: none; }
}
@media (forced-colors: active) { .atl-hsearch, .atl-sdialog .atl-spanel { border: 1px solid CanvasText; } }

/* ---------- In-page search (search page, 404, any core Search block) ----------
   The header search's field, voice and instant results as a box in the page. Results open under the
   field inside the same panel; the site assistant's AI answer, when on, appears under the form. */
/* No width of its own: the block layout around it (content, wide or full) sets it, like the Search block it replaces. */
.atl-psearch { box-sizing: border-box; margin-block: var(--space-4); }
.atl-psearch__label { display: block; margin-bottom: var(--space-2); font-weight: 600; color: var(--ink); }
.atl-psearch [hidden] { display: none !important; }
.atl-spanel--inline { width: 100%; box-sizing: border-box; overflow: visible; }
.atl-spanel--inline .atl-sfield { border: 0; box-shadow: none; border-radius: var(--radius-xl); padding-right: 6px; }
.atl-spanel--inline .atl-sfield input:focus-visible { outline: none; }
.atl-spanel--inline:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.atl-spanel--inline .atl-spanel__list:not([hidden]) { border-top: 1px solid var(--line); max-height: 420px; }
.atl-spanel--inline .atl-spanel__group, .atl-spanel--inline .atl-sres { list-style: none; margin: 0; }
.atl-spanel--inline .atl-sres--ask b { font-weight: 500; color: var(--brand-ink); }
.atl-spanel--inline .atl-spanel__empty { margin: 0; border-top: 1px solid var(--line); }
.atl-spanel--inline .atl-listening { border-top: 1px solid var(--line); }
.atl-spanel--inline .atl-mic { width: 40px; height: 40px; }
.atl-psearch__submit { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font: 600 15px/1 var(--font-body); cursor: pointer; }
.atl-psearch__submit:hover { background: var(--brand-ink); }
.atl-psearch__note { margin: 0; padding: 8px 16px 12px; font-size: 12px; color: var(--muted); }
@media (max-width: 599px) { .atl-psearch__submit { padding: 0 12px; } .atl-spanel--inline .atl-sfield { gap: 6px; padding-left: 12px; } }
@media (forced-colors: active) { .atl-spanel--inline { border: 1px solid CanvasText; } }

/* ---------- Single post: post column + sidebar (templates/single.html, parts/post-sidebar.html) ----------
   Two columns from 1024px: the post (up to 760px) and a 320px sidebar that stays in view while the post
   scrolls (it scrolls on its own when taller than the window). Below 1024px the sidebar follows the post.
   With no widget to show, the part is left out and the post keeps its column. */
.atl-post-layout { display: block; }
.atl-post-main { min-width: 0; }
.atl-post-main > * { max-width: 760px; }
@media (min-width: 1024px) {
  .atl-post-layout:has(> .atl-post-sidebar) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); align-items: start; }
  .atl-post-layout:has(> .atl-post-sidebar) > .atl-post-main { margin: 0; }
  .atl-post-sidebar { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 88px); max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 1023px) { .atl-post-sidebar { margin-top: var(--space-8); max-width: 760px; } }
.atl-post-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
/* Widgets keep their own height: in the scrolling sidebar a flex child would otherwise shrink (a promo card squeezed to a strip). */
.atl-post-sidebar > * { margin-block: 0; flex-shrink: 0; }
.atl-widget { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.atl-widget[hidden] { display: none; }
.atl-widget > * + * { margin-top: var(--space-3); }
.atl-widget__title.wp-block-heading { margin: 0; font: 700 13px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.atl-widget__text { margin: 0; font-size: 14px; color: var(--text); }
.atl-widget .atl-psearch, .atl-widget .atlaslaunch-ai-search { margin: 0; }
/* On this page */
.atl-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.atl-toc__item a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.35; box-shadow: inset 2px 0 0 var(--line); }
.atl-toc__item.is-sub a { padding-left: 22px; font-size: 13px; }
.atl-toc__item a:hover { color: var(--brand-ink); background: var(--surface-sunken); }
.atl-toc__item a[aria-current] { color: var(--brand-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand); background: var(--surface-sunken); }
/* Related posts and products: compact lists */
.atl-related__list, .atl-spotlight__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.atl-related__item { gap: var(--space-3) !important; align-items: flex-start; }
.atl-related__thumb { flex: none; margin: 0; }
.atl-related__thumb img { width: 72px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); }
.atl-related__title.wp-block-post-title { margin: 0; font: 600 14px/1.35 var(--font-body); }
.atl-related__title a, .atl-spotlight__title a { color: var(--ink); text-decoration: none; }
.atl-related__title a:hover, .atl-spotlight__title a:hover { color: var(--brand-ink); text-decoration: underline; }
.atl-related__date { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.atl-spotlight__item { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); }
.atl-spotlight__title.wp-block-post-title { margin: 0; font: 700 15px/1.3 var(--font-display); }
.atl-spotlight__text { margin: 4px 0 0; font-size: 13px; color: var(--text); }
.atl-spotlight__text p { margin: 0; }
.atl-spotlight__text .wp-block-post-excerpt__more-text { display: none; }
@media (prefers-reduced-motion: no-preference) { html:has(.atl-toc) { scroll-behavior: smooth; } }
.wp-block-post-content :is(h2, h3)[id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px); }
/* Promo card: an image banner (the whole image is a link), a heading, a line and a full-width button. */
.atl-widget--promo { overflow: hidden; }
.atl-promo__image { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; }
.atl-promo__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.atl-promo__image a { display: block; }
.atl-promo__image a:focus-visible { outline-offset: -3px; }
.atl-widget--promo img { display: block; max-width: 100%; height: auto; }
/* Banner promo (the heading and line deleted): just the linked banner, no card around it. A button
   left in it sits on the banner, centred near the bottom, like a sidebar ad. */
.atl-widget--promo:not(:has(.wp-block-heading, p)) { padding: 0; border: 0; background: none; }
.atl-widget--promo:not(:has(.wp-block-heading, p)) .atl-promo__image,
.atl-widget--promo:not(:has(.wp-block-heading, p)) .wp-block-image { margin: 0; }
.atl-widget--promo:not(:has(.wp-block-heading, p)) img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); }
.atl-widget--promo:not(:has(.wp-block-heading, p)) { position: relative; }
.atl-widget--promo:not(:has(.wp-block-heading, p)) .wp-block-buttons { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-4); margin: 0; display: flex; justify-content: center; }
.atl-widget--promo:not(:has(.wp-block-heading, p)) .wp-block-button { width: auto; }
.atl-widget--promo:not(:has(.wp-block-heading, p)) .wp-block-button__link { width: auto; box-shadow: var(--shadow-raised); }
.atl-promo__title.wp-block-heading { margin: 0; font: 700 17px/1.3 var(--font-display); color: var(--ink); }
.atl-promo__actions { margin-top: var(--space-3); }
.atl-promo__actions .wp-block-button__link { width: 100%; text-align: center; }
/* Email signup in the narrow sidebar: the field on its own row, the button under it, full width. */
.atl-widget--signup .avec-form { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.atl-widget--signup .avec-row { display: flex; flex-direction: column; gap: var(--space-2); }
.atl-widget--signup .avec-email { width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font: inherit; }
.atl-widget--signup .avec-submit { width: 100%; min-height: 44px; border: 0; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font: 600 15px/1 var(--font-body); cursor: pointer; }
.atl-widget--signup .avec-submit:hover { background: var(--brand-ink); }
.atl-widget--signup .avec-msg:empty { display: none; }
.atl-widget--signup .avec-form p { margin: 0; }
.atl-widget--signup p:empty { display: none; }
.atl-widget--signup .avec-row > p { display: contents; }
/* One related list per post: while the sidebar shows "Related posts", Smart Local AI's automatic
   block inside the post is not shown (its indexing still runs; its shortcode still works). */
.atl-post-layout:has(.atl-widget--related) .wp-block-post-content > .atlas-ai-rf-container#atlas-ai-relevantflow { display: none; }
/* Product call to action (parts/product-cta.html): text on the left, buttons on the right; stacked
   on phones. Colours come from the tokens, so dark mode and style variations follow. */
.atl-product-cta { display: grid; gap: var(--space-4); align-items: center; margin-block: var(--space-6); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--text); }
.atl-product-cta > * { margin-block: 0; }
.atl-product-cta__text > * { margin-block: 0; }
.atl-product-cta__text > * + * { margin-top: var(--space-2); }
.atl-product-cta__title.wp-block-heading { font: 700 clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem)/1.25 var(--font-display); color: var(--ink); }
.atl-product-cta__line { font-size: 1.0625rem; }
.atl-product-cta__trust { font-size: 14px; color: var(--muted); }
.atl-product-cta__actions.wp-block-buttons { gap: var(--space-3); }
@media (max-width: 781px) {
	.atl-product-cta__actions.wp-block-buttons { flex-direction: column; align-items: stretch; }
	.atl-product-cta__actions .wp-block-button, .atl-product-cta__actions .wp-block-button__link { width: 100%; text-align: center; }
}
@media (min-width: 782px) {
	.atl-product-cta { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-6); column-gap: var(--space-6); }
	.atl-product-cta__actions.wp-block-buttons { flex-wrap: nowrap; justify-content: flex-end; }
}
/* Wide tables scroll inside their own box on phones; the page itself never scrolls sideways. The
   theme's table border would otherwise be added outside the box's full width (a few px too wide). */
.wp-block-table { box-sizing: border-box; max-width: 100%; overflow-x: auto; }