/* Marketing consumes the published Mystrix palette, fonts and radii. */
:root {
  --mk-canvas:var(--st-canvas); --mk-surface:var(--st-surface-1);
  --mk-raised:var(--st-surface-2); --mk-well:var(--st-well);
  --mk-text:var(--st-text); --mk-muted:var(--st-text-dim);
  --mk-rule:var(--st-rule); --mk-control-rule:var(--st-text-dim);
  --mk-accent:var(--st-primary); --mk-on-accent:var(--st-on-accent);
  --mk-success:var(--st-positive); --mk-danger:var(--st-danger);
  font-family:var(--st-font-ui); color-scheme:dark;
}
:root[data-theme="light"] {
  --mk-canvas:var(--st-parchment); --mk-surface:#fff; --mk-raised:#f5f1fc;
  --mk-well:#ece4d3; --mk-text:var(--st-ink); --mk-muted:#4a4238;
  --mk-rule:#e7dfd0; --mk-control-rule:#8a7c62;
  --mk-accent:var(--st-amethyst-deep); --mk-on-accent:#fff;
  --mk-success:#2f6859; --mk-danger:#a01b1f; color-scheme:light;
}
* { box-sizing:border-box }
body { margin:0; background:var(--mk-canvas); color:var(--mk-text); font-size:16px; line-height:1.5 }
a { color:var(--mk-accent); text-underline-offset:3px }
a:hover { text-decoration-thickness:2px }
button, input, textarea, select { font:inherit }
:where(a, button, input, textarea, select, summary):focus-visible { outline:3px solid var(--mk-accent); outline-offset:4px }
:where(input, textarea, select):focus-visible { outline-offset:2px }
[hidden] { display:none !important }
h1, h2, h3, p, output { overflow-wrap:anywhere }
h1, h2, h3 { font-family:var(--st-font-display); line-height:1.18; letter-spacing:var(--st-tracking-display) }
h1 { font-size:clamp(32px,4vw,52px); margin:12px 0 24px; font-weight:650 }
h2 { font-size:25px; margin:0 0 16px; font-weight:600 }
h3 { font-size:21px; margin:0 0 12px }
p { line-height:1.65; margin:0 0 16px }
p:last-child { margin-bottom:0 }
.shell-header, main, .shell-footer { max-width:1200px; margin-inline:auto; padding:24px 32px }
.shell-header { border-bottom:1px solid var(--mk-rule) }
.shell-header-top { display:flex; justify-content:space-between; align-items:center; gap:20px; min-width:0 }
.brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--mk-text); text-decoration:none; font-family:var(--st-font-display); font-weight:650; font-size:24px; line-height:1.1 }
.brand img { width:32px; height:32px; object-fit:contain }
.brand span { display:block; font:500 12px/1.5 var(--st-font-ui); letter-spacing:.08em; color:var(--mk-muted) }
.shell-tools { display:flex; align-items:center; gap:12px; min-width:0 }
.theme-toggle { width:44px; height:44px; padding:0; border:1px solid var(--mk-rule); background:var(--mk-surface); color:var(--mk-accent); font-size:22px }
.shell-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:20px }
.shell-nav a { display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:var(--st-radius); color:var(--mk-muted); text-decoration:none; font-size:14px; font-weight:550 }
.shell-nav a:hover { color:var(--mk-text); background:var(--mk-raised) }
.shell-nav a[aria-current="page"] { color:var(--mk-accent); background:var(--st-amethyst-wash); box-shadow:inset 0 -2px var(--mk-accent) }
.shell-nav .button { margin-inline-start:auto; color:var(--mk-on-accent) }
.shell-nav .button:hover { color:var(--mk-on-accent); background:var(--mk-accent) }
.account-menu { position:relative; margin:0; min-width:0 }
.account-menu > summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; margin:0; border:1px solid var(--mk-rule); border-radius:var(--st-radius); color:var(--mk-text); background:var(--mk-surface); list-style:none; font-size:14px }
.account-menu > summary::-webkit-details-marker { display:none }
.account-avatar { display:grid; place-items:center; min-width:26px; height:26px; border-radius:50%; background:var(--st-amethyst-wash); color:var(--mk-accent); font-weight:700 }
.account-name { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.account-panel { position:absolute; inset-inline-end:0; top:calc(100% + 8px); width:min(300px,calc(100vw - 40px)); padding:16px; z-index:10; border:1px solid var(--mk-control-rule); border-radius:var(--st-radius); background:var(--mk-surface); box-shadow:var(--st-shadow) }
.account-panel p { margin:0 0 8px; font-size:13px; color:var(--mk-muted) }
.account-panel strong { display:block; color:var(--mk-text); font-size:14px }
.account-panel a { display:flex; align-items:center; min-height:44px; padding:10px 8px; color:var(--mk-text); text-decoration:none; border-radius:var(--st-radius-sm) }
.account-panel a:hover { background:var(--mk-raised) }
.skip-link { position:fixed; inset-inline-start:16px; top:12px; z-index:30; padding:12px 16px; background:var(--mk-surface); color:var(--mk-accent); border:2px solid var(--mk-accent); border-radius:var(--st-radius); transform:translateY(-180%) }
.skip-link:focus { transform:none }
main { min-height:60vh; padding-block:36px 56px }
main:focus { outline:none }
.shell-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px; border-top:1px solid var(--mk-rule); color:var(--mk-muted); font-size:13px }
.shell-footer p { margin:0 }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 16px }
.footer-links a { display:inline-flex; align-items:center; min-width:44px; min-height:44px }
.locale-form { display:flex; flex-wrap:wrap; align-items:end; gap:12px }
.locale-form label { margin:0; font-size:13px }
.locale-form select { width:auto; max-width:100%; min-width:140px }
.hero { padding:48px 0 40px; max-width:900px }
.hero h1 { font-size:clamp(38px,5vw,64px); max-width:16ch }
.lead { font-size:20px; color:var(--mk-muted); max-width:660px }
.eyebrow { color:var(--mk-accent); font-size:12px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0 }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid > *, .split > *, .creative-grid > *, .page-heading > * { min-width:0 }
.card { min-width:0; background:var(--mk-surface); border:1px solid var(--mk-rule); border-radius:var(--st-radius-lg); padding:28px; margin-bottom:20px }
.grid > .card { margin:0 }
.muted, .field-help { color:var(--mk-muted); font-size:14px }
.button, button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; max-width:100%; border:1px solid transparent; border-radius:var(--st-radius); background:var(--mk-accent); color:var(--mk-on-accent); padding:10px 18px; font-weight:600; line-height:1.4; cursor:pointer; overflow-wrap:anywhere; text-align:center; text-decoration:none }
.button:hover, button:hover { filter:brightness(1.08); text-decoration:none }
.small { padding:8px 14px; font-size:14px }
.secondary { background:var(--mk-raised); color:var(--mk-text); border-color:var(--mk-control-rule) }
button:disabled { opacity:.55; cursor:wait }
label { display:block; min-width:0; margin:0 0 20px; font-size:14px; color:var(--mk-text); font-weight:500 }
input, textarea, select { display:block; width:100%; min-width:0; max-width:100%; min-height:44px; margin-top:8px; padding:11px 12px; border:1px solid var(--mk-control-rule); border-radius:var(--st-radius-sm); background:var(--mk-well); color:var(--mk-text) }
input::placeholder, textarea::placeholder { color:var(--mk-muted); opacity:1 }
input[type="checkbox"], input[type="radio"] { display:inline-block; width:20px; min-height:20px; height:20px; margin:0 8px 0 0; vertical-align:middle; accent-color:var(--mk-accent) }
label:has(input[type="checkbox"]), label:has(input[type="radio"]) { min-height:44px; padding-block:10px }
textarea { min-height:104px; resize:vertical }
select[multiple] { min-height:160px }
option { padding:6px }
.split { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; align-items:start }
.narrow { max-width:500px; margin:24px auto }
.narrow h1 { font-size:36px }
.page-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px }
.page-heading h1 { margin-bottom:0 }
.badge { display:inline-block; border-radius:var(--st-radius-pill); background:var(--mk-raised); padding:5px 12px; color:var(--mk-muted); font-size:12px; font-weight:600 }
.table-wrap { min-width:0; max-width:100%; overflow:auto; scrollbar-gutter:stable }
table { width:100%; border-collapse:collapse; font-size:14px }
th, td { text-align:start; border-bottom:1px solid var(--mk-rule); padding:16px 12px; white-space:nowrap }
th { color:var(--mk-muted); font-weight:500 }
.creative-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
.creative-preview { display:block; width:100%; max-width:300px; aspect-ratio:6/5; object-fit:contain; background:var(--mk-well); border-radius:var(--st-radius-sm); margin-bottom:16px }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)) }
.metrics span { display:block; color:var(--mk-muted); font-size:13px }
.metrics strong { display:block; font-size:28px; font-weight:600; margin-top:12px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.actions > a:not(.button) { display:inline-flex; align-items:center; min-height:44px }
details { margin:24px 0 }
summary { cursor:pointer; color:var(--mk-accent); margin-bottom:16px; min-height:44px; padding-block:10px }
dialog { width:calc(100% - 40px); max-width:560px; max-height:calc(100% - 40px); overflow:auto; border:1px solid var(--mk-control-rule); border-radius:var(--st-radius-lg); padding:24px; background:var(--mk-surface); color:var(--mk-text) }
dialog::backdrop { background:rgba(11,10,16,.72) }
dialog h2 { margin-top:0 }
#notice:not(:empty) { position:fixed; bottom:24px; inset-inline-start:50%; transform:translateX(-50%); background:var(--mk-raised); color:var(--mk-text); border:1px solid var(--mk-control-rule); border-inline-start:3px solid var(--mk-accent); border-radius:var(--st-radius); padding:16px; width:max-content; max-width:calc(100vw - 40px); overflow-wrap:anywhere; z-index:20 }
[dir="rtl"] #notice:not(:empty) { transform:translateX(50%) }
.error { color:var(--mk-danger) }
.empty-state { text-align:center; padding:40px 24px }
.empty-state h2 { margin-bottom:12px }
@media (max-width:740px) {
  .shell-header, main, .shell-footer { padding-inline:20px }
  .shell-header-top { gap:12px }
  .shell-nav { gap:6px }
  .shell-nav a { padding-inline:10px }
  main { padding-block:28px 40px }
  .hero { padding-top:20px }
  .grid, .grid.two, .split, .creative-grid { grid-template-columns:minmax(0,1fr) }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .card { padding:22px }
  .page-heading { align-items:flex-start }
}
@media (max-width:540px) {
  .shell-header, main, .shell-footer { padding-inline:12px }
  .card { padding:16px 12px }
  .empty-state { padding:24px 12px }
  .account-panel { width:min(300px,calc(100vw - 24px)) }
  dialog { width:calc(100% - 24px); padding:20px 16px }
  #notice:not(:empty) { max-width:calc(100vw - 24px); padding:12px }
  .account-name { display:none }
  .account-menu > summary { width:44px; padding:8px; justify-content:center }
  .shell-tools { gap:8px }
  .shell-nav .button { margin-inline-start:0 }
  .shell-nav { justify-content:flex-start }
  .brand { font-size:22px }
  .brand img { width:28px; height:28px }
}
@media (max-width:420px) { .metrics { grid-template-columns:minmax(0,1fr) } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto; transition:none !important; animation:none !important } }
/* Advertiser page components inherit the shell's surface and control roles. */
.terms-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; margin-block:20px }
.terms-grid div { min-width:0 }
.terms-grid dt { color:var(--mk-muted); font-size:13px; margin-bottom:4px }
.terms-grid dd { margin:0; overflow-wrap:anywhere }
.progress-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-block:20px }
.progress-grid > * { min-width:0; padding:16px; border:1px solid var(--mk-rule); border-radius:var(--st-radius); background:var(--mk-raised) }
.callout { padding:16px 20px; border-inline-start:3px solid var(--mk-accent); border-radius:var(--st-radius-sm); background:var(--mk-raised); margin-block:20px }
.placement-preview { width:min(100%,300px); min-width:0; padding:0; border:1px solid var(--mk-rule); border-radius:var(--st-radius); overflow:hidden; background:var(--mk-well) }
.placement-preview canvas, .placement-preview img { display:block; width:100%; height:auto; aspect-ratio:6/5; object-fit:contain }
.destination { overflow-wrap:anywhere; word-break:break-word }
.creative-card h3 { margin-block:12px; overflow-wrap:anywhere }
.campaign-status { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:24px }
.badge[data-status="active"], .badge[data-status="approved"] { color:var(--mk-success); background:var(--st-verdigris-wash) }
.badge[data-status="rejected"] { color:var(--mk-danger); background:var(--st-error-wash) }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.worklist-filters { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto auto; gap:12px; align-items:end; margin-bottom:24px }
.worklist-filters label { margin:0 }
.worklist-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:24px }
@media (max-width:740px) {
  .terms-grid, .progress-grid, .worklist-filters { grid-template-columns:minmax(0,1fr) }
  .terms-grid { row-gap:6px }
  .terms-grid dd { margin-bottom:12px }
  .worklist-filters .button, .worklist-filters button { justify-self:start }
}
@media (max-width:540px) {
  .progress-grid > * { padding:12px 0; border:0; border-block-start:1px solid var(--mk-rule); border-radius:0; background:transparent }
  .callout { padding:12px }
}