/*
ASANA Article Engine v0.3 — Semantic Editorial Design System
Article Engine owns semantic presentation. ASANA Visual Theme Builder owns the actual palette/font tokens.
No storefront palette is hard-coded here.
*/

body.asana-article-engine-active {
  background: var(--asana-color-page);
  color: var(--asana-color-body);
}

.asana-article-shell {
  --aae-page: var(--asana-color-page);
  --aae-surface: var(--asana-color-surface);
  --aae-soft: var(--asana-color-surface-soft);
  --aae-heading: var(--asana-color-heading);
  --aae-body: var(--asana-color-body);
  --aae-muted: var(--asana-color-muted);
  --aae-border: var(--asana-color-border);
  --aae-primary: var(--asana-color-primary);
  --aae-accent: var(--asana-color-highlight, var(--asana-color-secondary, var(--asana-color-primary)));
  --aae-on-primary: var(--asana-color-on-primary);
  --aae-display: var(--asana-font-display, inherit);
  --aae-ui: var(--asana-font-ui, inherit);
  --aae-accent-font: var(--asana-font-accent, var(--aae-display));
  --aae-radius: var(--asana-radius-card, 18px);
  --aae-control-radius: var(--asana-radius-button, 10px);
  color: var(--aae-body);
  font-family: var(--aae-ui);
  padding-bottom: clamp(52px, 8vw, 110px);
}

.asana-article-shell h1,
.asana-article-shell h2,
.asana-article-shell h3,
.asana-article-shell h4,
.asana-article-shell h5,
.asana-article-shell h6 {
  color: var(--aae-heading);
  font-family: var(--aae-display);
  font-weight: 500;
  letter-spacing: -.025em;
}

.asana-article-header {
  padding-top: clamp(34px, 5vw, 70px);
}

.asana-breadcrumbs {
  color: var(--aae-muted);
  font-size: 12px;
}
.asana-breadcrumbs a { color: inherit; }
.asana-breadcrumb-separator { opacity: .45; }

.asana-article-kicker,
.asana-author__label,
.asana-route-eyebrow {
  color: var(--aae-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.asana-article-title {
  font-size: clamp(42px, 6vw, 76px);
  line-height: .98;
  max-width: 950px;
}

.asana-article-dek {
  color: var(--aae-muted);
  font-family: var(--aae-display);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.48;
  max-width: 760px;
  margin-block: 4px 0;
}

.asana-article-meta {
  color: var(--aae-muted);
  font-size: 12px;
  border-top: 1px solid var(--aae-border);
  padding-top: 14px;
}

.asana-article-surface {
  background: color-mix(in srgb, var(--aae-soft) 72%, var(--aae-surface));
  border: 1px solid var(--aae-border);
  border-radius: var(--aae-radius);
}

.asana-article-toc {
  padding: clamp(18px, 3vw, 28px);
}
.asana-article-toc summary {
  color: var(--aae-heading);
  cursor: pointer;
  font-family: var(--aae-display);
  font-size: 20px;
  list-style: none;
}
.asana-article-toc summary::-webkit-details-marker { display:none; }
.asana-article-toc summary::after {
  content: '+';
  float: right;
  color: var(--aae-accent);
  font-family: var(--aae-ui);
  font-weight: 400;
}
.asana-article-toc details[open] summary::after { content: '–'; }
.asana-article-toc a {
  color: var(--aae-body);
  font-size: 13px;
  text-decoration: none;
}
.asana-article-toc a:hover { color: var(--aae-primary); }

.asana-article-content {
  color: var(--aae-body);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.78;
}
.asana-article-content > p { margin-block: 0 1.15em; }
.asana-article-content p + p { margin-top: 1.05em; }

.asana-article-content h2 {
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.08;
  margin-top: 2.6em;
  padding-top: .9em;
  border-top: 1px solid var(--aae-border);
}
.asana-article-content h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.16;
  margin-top: 2.15em;
}
.asana-article-content h4 {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.22;
  margin-top: 1.8em;
}

.asana-article-content a:not(.asana-button) {
  color: var(--aae-primary);
  text-decoration-color: color-mix(in srgb, var(--aae-primary) 48%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.asana-article-content a:not(.asana-button):hover {
  text-decoration-color: currentColor;
}
.asana-article-content strong { color: var(--aae-heading); }
.asana-article-content em { color: color-mix(in srgb, var(--aae-body) 82%, var(--aae-accent)); }

.asana-article-content mark {
  background: color-mix(in srgb, var(--aae-accent) 15%, transparent);
  color: var(--aae-heading);
  padding: .06em .18em;
  border-radius: .22em;
}

.asana-article-content hr {
  width: 68px;
  height: 1px;
  margin: 54px auto;
  border: 0;
  background: var(--aae-border);
}

/* Quotes become editorial pull quotes automatically. */
.asana-article-content blockquote {
  position: relative;
  margin: 44px 0;
  padding: 8px 0 8px clamp(28px, 5vw, 54px);
  color: var(--aae-heading);
  font-family: var(--aae-display);
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.38;
  border-left: 1px solid var(--aae-border);
}
.asana-article-content blockquote::before {
  content: '“';
  position: absolute;
  left: 10px;
  top: -20px;
  color: var(--aae-accent);
  font-family: var(--aae-display);
  font-size: clamp(54px, 7vw, 84px);
  line-height: 1;
  opacity: .52;
}
.asana-article-content blockquote p { margin: 0; }
.asana-article-content blockquote cite {
  display: block;
  margin-top: 12px;
  color: var(--aae-muted);
  font-family: var(--aae-ui);
  font-size: 12px;
  font-style: normal;
}

/* Lists remain native content, but feel deliberately art-directed. */
.asana-article-content ul,
.asana-article-content ol {
  margin-block: 24px 32px;
}
.asana-article-content li { padding-left: .3em; }
.asana-article-content li::marker { color: var(--aae-accent); font-weight: 800; }
.asana-article-content li + li { margin-top: .62em; }

/* Tables need no special block/module. */
.asana-article-content table {
  width: 100%;
  margin-block: 34px;
  border-spacing: 0;
  border-collapse: separate;
  overflow: hidden;
  border: 1px solid var(--aae-border);
  border-radius: var(--aae-radius);
  background: var(--aae-surface);
  font-size: 14px;
  line-height: 1.5;
}
.asana-article-content th,
.asana-article-content td {
  padding: 14px 16px;
  border-right: 1px solid var(--aae-border);
  border-bottom: 1px solid var(--aae-border);
  text-align: left;
  vertical-align: top;
}
.asana-article-content th:last-child,
.asana-article-content td:last-child { border-right: 0; }
.asana-article-content tr:last-child td { border-bottom: 0; }
.asana-article-content th {
  background: var(--aae-soft);
  color: var(--aae-heading);
  font-weight: 800;
}
.asana-article-content tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--aae-soft) 36%, var(--aae-surface));
}

/* Native details/summary become the FAQ/accordion visual language. */
.asana-article-content details,
.asana-article-details {
  margin-block: 12px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--aae-border);
  border-radius: 0;
  background: transparent;
}
.asana-article-content details:last-of-type { border-bottom: 1px solid var(--aae-border); }
.asana-article-content details summary,
.asana-article-details summary {
  position: relative;
  padding: 18px 42px 18px 0;
  color: var(--aae-heading);
  cursor: pointer;
  font-weight: 750;
  list-style: none;
}
.asana-article-content details summary::-webkit-details-marker,
.asana-article-details summary::-webkit-details-marker { display:none; }
.asana-article-content details summary::after,
.asana-article-details summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aae-accent);
  font-size: 22px;
  font-weight: 400;
}
.asana-article-content details[open] summary::after,
.asana-article-details[open] summary::after { content:'–'; }
.asana-article-content details > :not(summary),
.asana-article-details__body {
  color: var(--aae-muted);
}
.asana-article-content details > :last-child { margin-bottom: 20px; }

/* Semantic callouts: these are meaning classes, never visual-builder modules. */
.asana-article-content .asana-callout,
.asana-article-content .asana-key-takeaway,
.asana-article-content .asana-learn,
.asana-article-content .asana-tip,
.asana-article-content .asana-definition,
.asana-article-content .asana-sources,
.asana-article-content .asana-note,
.asana-article-note,
.asana-facts-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--aae-radius);
}

.asana-article-content .asana-key-takeaway,
.asana-article-content .asana-learn,
.asana-article-note,
.asana-facts-card {
  background: color-mix(in srgb, var(--aae-soft) 76%, var(--aae-surface));
  border: 1px solid var(--aae-border);
}
.asana-article-content .asana-key-takeaway::before,
.asana-article-content .asana-learn::before,
.asana-article-note::before {
  content:'';
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:3px;
  background: var(--aae-accent);
  opacity:.55;
}

.asana-article-content .asana-tip {
  border-top: 1px solid var(--aae-border);
  border-bottom: 1px solid var(--aae-border);
  border-radius: 0;
  padding-inline: 0;
}

.asana-article-content .asana-definition {
  background: var(--aae-surface);
  border: 1px solid var(--aae-border);
}
.asana-article-content .asana-definition > :first-child {
  color: var(--aae-accent);
  font-family: var(--aae-display);
  font-size: clamp(22px,2.5vw,30px);
}

.asana-article-content .asana-sources {
  border-top: 1px solid var(--aae-border);
  border-radius: 0;
  padding-inline: 0;
  color: var(--aae-muted);
  font-size: 13px;
}

.asana-facts-card h2,
.asana-facts-card h3,
.asana-facts-card h4 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.asana-facts-card ul { margin-bottom: 0; }

/* Optional deliberate drop-cap treatment. */
.asana-article-content .asana-dropcap > p:first-child::first-letter,
.asana-article-content p.asana-dropcap::first-letter {
  float: left;
  margin: .07em .14em 0 0;
  color: var(--aae-heading);
  font-family: var(--aae-display);
  font-size: 4.2em;
  line-height: .72;
}

.asana-author {
  padding: clamp(22px, 3vw, 34px);
}
.asana-author__avatar img {
  border-radius: 50%;
}
.asana-author__content h2 { margin: 4px 0 7px; }
.asana-author__role { margin: 0 0 10px; color: var(--aae-muted); font-size: 13px; font-weight: 700; }
.asana-author__bio { color: var(--aae-muted); line-height: 1.65; }
.asana-author__social a { color: var(--aae-primary); font-size: 12px; font-weight: 750; }

.asana-related > h2 {
  font-size: clamp(28px, 3vw, 38px);
  margin-bottom: 22px;
}
.asana-related-card {
  transition: transform .18s ease, border-color .18s ease;
}
.asana-related-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--aae-primary) 24%, var(--aae-border));
}
.asana-related-card h3 { font-family: var(--aae-display); color: var(--aae-heading); }
.asana-related-card p { color: var(--aae-muted); font-size: 13px; line-height: 1.55; }

.asana-article-comments {
  border-top: 1px solid var(--aae-border);
  padding-top: 30px;
}

@media (max-width:760px) {
  .asana-article-title { font-size: clamp(38px, 12vw, 56px); }
  .asana-article-dek { font-size: 18px; }
  .asana-article-content { font-size: 16px; line-height: 1.72; }
  .asana-article-content h2 { font-size: 31px; }
  .asana-article-content h3 { font-size: 25px; }
  .asana-article-content table { font-size: 12px; }
  .asana-article-content th,
  .asana-article-content td { padding: 11px 10px; }
  .asana-article-content blockquote { padding-left: 34px; }
}

@media (prefers-reduced-motion:reduce) {
  .asana-related-card { transition:none; }
}


/* v0.3.1 — Gemstone Library profile: semantic tokens only */
.asana-article-shell--gemstone .asana-gemstone-lead-media{margin-top:24px}
.asana-gemstone-lead-media figure{overflow:hidden;border-radius:var(--aae-radius);background:var(--aae-soft)}
.asana-gemstone-lead-media img{max-height:640px;object-fit:cover}
.asana-gemstone-header{margin-top:clamp(30px,5vw,58px)}
.asana-gemstone-intro{max-width:720px;color:var(--aae-body);font-family:var(--aae-display);font-size:clamp(19px,2.1vw,25px);line-height:1.5}
.asana-gemstone-profile{background:color-mix(in srgb,var(--aae-soft) 72%,var(--aae-surface));border:1px solid var(--aae-border);border-radius:calc(var(--aae-radius) + 4px);box-shadow:0 16px 50px color-mix(in srgb,var(--aae-heading) 6%,transparent)}
.asana-gemstone-profile__eyebrow{margin-bottom:8px;color:var(--aae-accent);font-size:10px;font-weight:850;letter-spacing:.17em}
.asana-gemstone-profile h2{margin:0;color:var(--aae-heading);font-family:var(--aae-display);font-size:clamp(29px,3.2vw,42px);line-height:1.08}
.asana-gemstone-profile__copy>p{max-width:700px;margin:13px 0 0;color:var(--aae-muted);font-size:14px;line-height:1.65}
.asana-gemstone-profile__stone img{border-radius:50%;border:1px solid var(--aae-border);box-shadow:0 10px 28px color-mix(in srgb,var(--aae-heading) 8%,transparent)}
.asana-gemstone-profile__meanings span{padding:7px 11px;border:1px solid var(--aae-border);border-radius:999px;background:var(--aae-surface);color:var(--aae-heading);font-size:11px;font-weight:760}
.asana-gemstone-profile__facts{border-top:1px solid var(--aae-border);border-left:1px solid var(--aae-border)}
.asana-gemstone-fact{border-right:1px solid var(--aae-border);border-bottom:1px solid var(--aae-border);background:color-mix(in srgb,var(--aae-surface) 70%,transparent)}
.asana-gemstone-fact span{margin-bottom:5px;color:var(--aae-muted);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.asana-gemstone-fact strong{color:var(--aae-heading);font-family:var(--aae-display);font-size:16px;font-weight:600;line-height:1.35}
.asana-gemstone-profile__fun{border-top:1px solid var(--aae-border)}
.asana-gemstone-profile__fun span{color:var(--aae-accent);font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.asana-gemstone-profile__fun p{color:var(--aae-muted);font-size:13px;line-height:1.6}


/* v0.3.2 — Courageous Editorial pass
   Stronger hierarchy without turning the article into a dashboard.
   Still 100% semantic-token driven: no independent palette. */

.asana-article-shell {
  --aae-rule-strong: color-mix(in srgb, var(--aae-heading) 20%, var(--aae-border));
  --aae-accent-soft: color-mix(in srgb, var(--aae-accent) 10%, var(--aae-surface));
}

/* HERO / OPENING — generous, magazine-like, but quiet. */
.asana-gemstone-lead-media figure,
.asana-article-lead-media figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--aae-border);
  border-radius: calc(var(--aae-radius) + 8px);
  background: var(--aae-soft);
}
.asana-gemstone-lead-media figure::after,
.asana-article-lead-media figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aae-surface) 34%, transparent);
}
.asana-gemstone-lead-media img { max-height: 560px; }

.asana-gemstone-header,
.asana-article-header {
  position: relative;
  padding-bottom: clamp(24px, 4vw, 38px);
  border-bottom: 1px solid var(--aae-rule-strong);
}
.asana-article-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.asana-article-kicker::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--aae-accent);
}
.asana-article-title {
  max-width: 900px;
  font-size: clamp(48px, 6.7vw, 86px);
  line-height: .94;
  letter-spacing: -.045em;
}
.asana-gemstone-intro,
.asana-article-dek {
  max-width: 790px;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.48;
}
.asana-article-meta {
  border-top: 0;
  padding-top: 3px;
  font-size: 11px;
  letter-spacing: .025em;
}

/* GEMSTONE PROFILE — one confident dark editorial block. */
.asana-gemstone-profile {
  overflow: hidden;
  color: var(--aae-on-primary);
  background:
    linear-gradient(135deg,
      var(--aae-primary),
      color-mix(in srgb, var(--aae-primary) 84%, var(--aae-accent))
    );
  border: 0;
  box-shadow: 0 22px 65px color-mix(in srgb, var(--aae-heading) 12%, transparent);
}
.asana-gemstone-profile__eyebrow {
  color: color-mix(in srgb, var(--aae-on-primary) 72%, var(--aae-accent));
}
.asana-gemstone-profile h2,
.asana-gemstone-profile__copy > p,
.asana-gemstone-profile__fun p,
.asana-gemstone-fact strong {
  color: var(--aae-on-primary);
}
.asana-gemstone-profile__copy > p,
.asana-gemstone-profile__fun p {
  opacity: .78;
}
.asana-gemstone-profile h2 {
  max-width: 680px;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -.035em;
}
.asana-gemstone-profile__stone img {
  border: 1px solid color-mix(in srgb, var(--aae-on-primary) 30%, transparent);
  border-radius: 24px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--aae-heading) 28%, transparent);
}
.asana-gemstone-profile__meanings span {
  color: var(--aae-on-primary);
  background: color-mix(in srgb, var(--aae-on-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--aae-on-primary) 24%, transparent);
}
.asana-gemstone-profile__facts {
  border-top-color: color-mix(in srgb, var(--aae-on-primary) 20%, transparent);
  border-left-color: color-mix(in srgb, var(--aae-on-primary) 20%, transparent);
}
.asana-gemstone-fact {
  background: color-mix(in srgb, var(--aae-on-primary) 5%, transparent);
  border-right-color: color-mix(in srgb, var(--aae-on-primary) 20%, transparent);
  border-bottom-color: color-mix(in srgb, var(--aae-on-primary) 20%, transparent);
}
.asana-gemstone-fact span,
.asana-gemstone-profile__fun span {
  color: color-mix(in srgb, var(--aae-on-primary) 66%, var(--aae-accent));
}
.asana-gemstone-profile__fun {
  border-top-color: color-mix(in srgb, var(--aae-on-primary) 20%, transparent);
}

/* CONTENT HEADINGS — visual rhythm without extra markup. */
.asana-article-content { counter-reset: asana-section; }
.asana-article-content > h2 {
  counter-increment: asana-section;
  position: relative;
  margin-top: clamp(70px, 9vw, 112px);
  padding-top: 24px;
  border-top: 2px solid var(--aae-heading);
  font-size: clamp(34px, 4.3vw, 52px);
  letter-spacing: -.04em;
}
.asana-article-content > h2::before {
  content: counter(asana-section, decimal-leading-zero);
  display: block;
  margin-bottom: 11px;
  color: var(--aae-accent);
  font-family: var(--aae-ui);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .18em;
}
.asana-article-content > h3 {
  position: relative;
  padding-left: 18px;
  font-size: clamp(25px, 3vw, 35px);
  letter-spacing: -.03em;
}
.asana-article-content > h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .15em;
  width: 3px;
  border-radius: 99px;
  background: var(--aae-accent);
}
.asana-article-content > h4 {
  color: color-mix(in srgb, var(--aae-heading) 88%, var(--aae-accent));
  font-size: clamp(20px, 2.2vw, 26px);
}

/* Body — a little more editorial and less web-default. */
.asana-article-content {
  font-size: clamp(17px, 1.28vw, 19px);
  line-height: 1.76;
}
.asana-article-content > p { margin-bottom: 1.22em; }
.asana-article-content strong { font-weight: 780; }
.asana-article-content mark {
  padding: .03em .22em .08em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--aae-accent) 16%, var(--aae-surface));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.asana-article-content hr {
  width: 100%;
  margin: clamp(58px, 8vw, 92px) 0;
  background: var(--aae-border);
}

/* PULL QUOTE — typography, not another card. */
.asana-article-content blockquote {
  margin: clamp(54px, 8vw, 92px) max(-7vw, -70px);
  padding: clamp(36px, 5vw, 58px) clamp(38px, 7vw, 86px);
  border: 0;
  border-top: 1px solid var(--aae-rule-strong);
  border-bottom: 1px solid var(--aae-rule-strong);
  text-align: center;
  font-size: clamp(30px, 4.1vw, 48px);
  line-height: 1.22;
  letter-spacing: -.03em;
}
.asana-article-content blockquote::before {
  position: static;
  display: block;
  content: '“';
  height: .52em;
  margin-bottom: 18px;
  color: var(--aae-accent);
  font-size: clamp(74px, 9vw, 112px);
  line-height: .72;
  opacity: .72;
}

/* KEY TAKEAWAY — substantial, but not a generic dashboard card. */
.asana-article-content > .asana-key-takeaway {
  padding: clamp(30px, 5vw, 50px);
  border: 0;
  border-left: 6px solid var(--aae-accent);
  border-radius: 0 var(--aae-radius) var(--aae-radius) 0;
  background: color-mix(in srgb, var(--aae-soft) 74%, var(--aae-surface));
}
.asana-article-content > .asana-key-takeaway::before { display: none; }
.asana-article-content > .asana-key-takeaway h2,
.asana-article-content > .asana-key-takeaway h3 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: clamp(30px, 3.5vw, 42px);
}

/* WHAT YOU'LL LEARN — intentionally dark and high contrast. */
.asana-article-content > .asana-learn {
  padding: clamp(32px, 5vw, 52px);
  border: 0;
  background: var(--aae-primary);
  color: var(--aae-on-primary);
}
.asana-article-content > .asana-learn::before { display:none; }
.asana-article-content > .asana-learn h2,
.asana-article-content > .asana-learn h3,
.asana-article-content > .asana-learn strong,
.asana-article-content > .asana-learn li {
  color: var(--aae-on-primary);
}
.asana-article-content > .asana-learn h3 {
  margin: 0 0 24px;
  padding: 0;
  font-size: clamp(31px, 3.7vw, 44px);
}
.asana-article-content > .asana-learn ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 15px 34px;
  margin: 0;
}
.asana-article-content > .asana-learn li::marker {
  color: color-mix(in srgb, var(--aae-on-primary) 62%, var(--aae-accent));
}

/* DEFINITION — a sharp reference block. */
.asana-article-content > .asana-definition {
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--aae-rule-strong);
  border-radius: 0;
  background: var(--aae-surface);
}
.asana-article-content > .asana-definition > :first-child {
  margin-bottom: 8px;
  color: var(--aae-accent);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
}

/* TIP + NOTE — distinctly different from the big callouts. */
.asana-article-content > .asana-tip {
  position: relative;
  padding: 22px 0 22px 36px;
  border-top: 1px solid var(--aae-rule-strong);
  border-bottom: 1px solid var(--aae-rule-strong);
}
.asana-article-content > .asana-tip::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 22px;
  color: var(--aae-accent);
  font-size: 17px;
}
.asana-article-content > .asana-note {
  padding: 24px 28px;
  background: var(--aae-accent-soft);
  border: 1px dashed color-mix(in srgb, var(--aae-accent) 42%, var(--aae-border));
  border-radius: var(--aae-control-radius);
}

/* LISTS — native HTML gets stronger editorial treatment. */
.asana-article-content > ol {
  list-style: none;
  counter-reset: asana-step;
  padding-left: 0;
  margin-block: 34px 44px;
}
.asana-article-content > ol > li {
  counter-increment: asana-step;
  position: relative;
  min-height: 52px;
  padding: 4px 0 26px 70px;
  border-bottom: 1px solid var(--aae-border);
}
.asana-article-content > ol > li + li { margin-top: 22px; }
.asana-article-content > ol > li::before {
  content: counter(asana-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--aae-accent);
  font-family: var(--aae-display);
  font-size: 34px;
  line-height: 1;
}

/* TABLE — stronger header and calmer body. */
.asana-article-content .wp-block-table { margin-block: 38px 48px; }
.asana-article-content table {
  font-size: 14px;
  border: 1px solid var(--aae-rule-strong);
  border-radius: calc(var(--aae-radius) - 4px);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--aae-heading) 5%, transparent);
}
.asana-article-content th {
  padding-block: 16px;
  color: var(--aae-on-primary);
  background: var(--aae-primary);
  border-color: color-mix(in srgb, var(--aae-on-primary) 16%, transparent);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.asana-article-content td { padding: 15px 17px; }
.asana-article-content tbody tr:hover td {
  background: color-mix(in srgb, var(--aae-accent) 6%, var(--aae-surface));
}

/* FAQ — larger touch targets and a graphic + control. */
.asana-article-content details {
  margin: 0;
  border-top: 1px solid var(--aae-rule-strong);
}
.asana-article-content details:last-of-type { border-bottom-color: var(--aae-rule-strong); }
.asana-article-content details summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 20px 58px 20px 0;
  font-size: clamp(17px, 1.65vw, 20px);
  font-weight: 780;
}
.asana-article-content details summary::after {
  right: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--aae-border);
  border-radius: 50%;
  background: var(--aae-surface);
  font-size: 20px;
}
.asana-article-content details[open] summary {
  color: var(--aae-primary);
}
.asana-article-content details[open] summary::after {
  color: var(--aae-on-primary);
  background: var(--aae-primary);
  border-color: var(--aae-primary);
}
.asana-article-content details > :not(summary) {
  max-width: 690px;
  padding-right: 44px;
  font-size: 15px;
  line-height: 1.7;
}

/* TOC — compact index rather than another big card. */
.asana-article-toc {
  padding: clamp(22px, 3vw, 30px);
  border-radius: 0;
  border-width: 1px 0;
  background: transparent;
}
.asana-article-toc summary {
  font-size: 22px;
}
.asana-article-toc nav {
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 30px;
  row-gap: 10px;
}
.asana-article-toc a {
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--aae-border) 70%, transparent);
}

/* CTA — usable by a plain anchor with .asana-button. */
.asana-article-action { margin-block: 38px 50px !important; }
.asana-article-action .asana-button,
.asana-article-content .asana-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--aae-primary);
  border-radius: var(--aae-control-radius);
  background: var(--aae-primary);
  color: var(--aae-on-primary) !important;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .03em;
  text-decoration: none !important;
  transition: transform .16s ease, opacity .16s ease;
}
.asana-article-action .asana-button:hover,
.asana-article-content .asana-button:hover { transform: translateY(-2px); opacity: .92; }

/* SOURCES / CONTINUE READING — quieter bibliography treatment. */
.asana-article-content > .asana-sources {
  margin-top: 68px;
  padding: 30px 0 0;
  border-top: 2px solid var(--aae-heading);
  color: var(--aae-muted);
}
.asana-article-content > .asana-sources h3 {
  margin: 0 0 18px;
  padding: 0;
  font-size: clamp(28px, 3.2vw, 38px);
}
.asana-article-content > .asana-sources ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 28px;
  margin: 0;
}

/* AUTHOR + RELATED — more editorial finish. */
.asana-author {
  border: 0;
  border-top: 2px solid var(--aae-heading);
  border-radius: 0;
  background: transparent;
}
.asana-author__avatar img {
  border: 1px solid var(--aae-border);
}
.asana-related > h2 {
  padding-top: 18px;
  border-top: 2px solid var(--aae-heading);
  font-size: clamp(34px, 4vw, 48px);
}
.asana-related-card {
  overflow: hidden;
}
.asana-related-card h3,
.asana-related-card p {
  margin-inline: 18px;
}
.asana-related-card h3 { margin-top: 16px; }
.asana-related-card p { margin-bottom: 20px; }

@media (max-width: 760px) {
  .asana-article-title { font-size: clamp(44px, 13vw, 62px); }
  .asana-gemstone-lead-media img { max-height: 480px; }
  .asana-gemstone-profile { border-radius: var(--aae-radius); }
  .asana-gemstone-profile__stone { max-width: 180px; }
  .asana-article-content > h2 { margin-top: 72px; font-size: 34px; }
  .asana-article-content > h3 { padding-left: 14px; font-size: 26px; }
  .asana-article-content blockquote {
    margin-inline: 0;
    padding: 34px 18px;
    font-size: 30px;
  }
  .asana-article-content > .asana-learn ul,
  .asana-article-content > .asana-sources ul,
  .asana-article-toc nav { grid-template-columns: 1fr; }
  .asana-article-content > ol > li { padding-left: 56px; }
  .asana-article-content > ol > li::before { font-size: 29px; }
  .asana-article-content details summary { min-height: 66px; padding-right: 50px; }
}

/* v0.3.3 — banners become editorial breathing points, not generic ad boxes */
.asana-article-auto-banner{position:relative}
.asana-article-auto-banner .asana-banner__image{
	border-radius:var(--asana-radius-lg,18px);
	box-shadow:0 18px 48px color-mix(in srgb,var(--asana-color-heading,#38224f) 10%,transparent);
}
.asana-article-auto-banner .asana-banner__link{transition:transform .22s ease,opacity .22s ease}
.asana-article-auto-banner .asana-banner__link:hover{transform:translateY(-2px)}
.asana-article-auto-banner .asana-banner__link:focus-visible{outline-color:var(--asana-color-primary,#3d2557)}
@media(prefers-reduced-motion:reduce){.asana-article-auto-banner .asana-banner__link{transition:none}.asana-article-auto-banner .asana-banner__link:hover{transform:none}}

/* v0.3.7 — Gold-standard long-form QA pass
   Wider reading measure, clearer one-column navigation, better opening rhythm,
   and stronger separation between editorial utilities. */
.asana-article-shell {
  --asana-article-content-width: 820px;
  --asana-article-wide-width: 1080px;
}

/* Opening rhythm: keep media expansive, but bring the reading column closer to it. */
.asana-gemstone-header,
.asana-article-header {
  width: min(100%, 820px);
}
.asana-gemstone-intro,
.asana-article-dek {
  max-width: 820px;
}
.asana-gemstone-intro {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.58;
}

/* Gemstone profile: bolder but easier to scan. */
.asana-gemstone-profile {
  padding: clamp(30px, 4.5vw, 54px);
}
.asana-gemstone-profile__top {
  grid-template-columns: minmax(0, 1fr) 190px;
}
.asana-gemstone-profile__copy > p {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.7;
}
.asana-gemstone-fact {
  padding: 18px 20px;
}
.asana-gemstone-fact span {
  font-size: 9.5px;
}
.asana-gemstone-fact strong {
  font-size: 15px;
  line-height: 1.42;
}

/* Hoisted opening callouts: these now sit before the article index. */
.asana-article-feature-stack {
  display: grid;
  gap: 18px;
  margin-top: clamp(34px, 5vw, 58px);
  margin-bottom: clamp(30px, 4vw, 48px);
}
.asana-article-feature-stack > .asana-key-takeaway,
.asana-article-feature-stack > .asana-learn {
  margin: 0;
}
.asana-article-feature-stack > .asana-key-takeaway {
  padding: clamp(26px, 4vw, 38px) clamp(28px, 4.5vw, 44px);
}
.asana-article-feature-stack > .asana-key-takeaway h3 {
  font-size: clamp(27px, 3vw, 36px);
}
.asana-article-feature-stack > .asana-learn {
  border-radius: var(--aae-radius);
}
.asana-article-feature-stack > .asana-learn h3 {
  margin-bottom: 20px;
}
.asana-article-feature-stack > .asana-learn ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  list-style: none;
  counter-reset: asana-learn-item;
}
.asana-article-feature-stack > .asana-learn li {
  counter-increment: asana-learn-item;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--aae-on-primary) 20%, transparent);
  line-height: 1.5;
}
.asana-article-feature-stack > .asana-learn li::before {
  content: counter(asana-learn-item, decimal-leading-zero);
  color: color-mix(in srgb, var(--aae-on-primary) 62%, var(--aae-accent));
  font-family: var(--aae-display);
  font-size: 22px;
  line-height: 1;
}
.asana-article-feature-stack > .asana-learn li::marker { content: ''; }

/* Table of contents: a true reading index, not a two-column utility grid. */
.asana-article-toc {
  padding: 24px 0 8px;
  border-top: 2px solid var(--aae-heading);
  border-bottom: 1px solid var(--aae-rule-strong);
}
.asana-article-toc summary {
  padding: 0 48px 18px 0;
  font-family: var(--aae-display);
  font-size: clamp(27px, 3vw, 36px);
  letter-spacing: -.025em;
}
.asana-article-toc summary::after {
  top: 3px;
}
.asana-article-toc nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: 0;
}
.asana-article-toc a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid color-mix(in srgb, var(--aae-border) 72%, transparent);
  border-bottom: 0;
  color: var(--aae-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.asana-article-toc a:first-child { border-top: 0; }
.asana-toc-link__index {
  color: var(--aae-accent);
  font-family: var(--aae-display);
  font-size: 18px;
  font-weight: 500;
}
.asana-article-toc a:hover {
  color: var(--aae-primary);
  transform: translateX(3px);
}

/* Long-form copy: slightly wider and calmer, still comfortably readable. */
.asana-article-content {
  font-size: clamp(17px, 1.22vw, 18.5px);
  line-height: 1.78;
}
.asana-article-content > h2 {
  margin-top: clamp(76px, 8vw, 108px);
}
.asana-article-content > h3 {
  margin-top: clamp(44px, 5vw, 62px);
}
.asana-article-content > h4 {
  margin-top: 34px;
}

/* Keep banners expansive, but make their cadence feel intentional. */
.asana-article-content > .asana-article-auto-banner {
  margin-top: clamp(62px, 8vw, 92px);
  margin-bottom: clamp(62px, 8vw, 92px);
}

/* FAQ should feel like a destination at the end of a long article. */
.asana-article-content details summary {
  min-height: 76px;
  font-size: clamp(18px, 1.55vw, 20px);
}
.asana-article-content details > :not(summary) {
  max-width: 730px;
  font-size: 16px;
}

/* Author: clearly a credentialed end-note, not a tiny utility card. */
.asana-author {
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 26px;
  padding-top: 28px;
}
.asana-author__avatar img {
  width: 108px;
  height: 108px;
}
.asana-author__content h2 {
  font-size: clamp(28px, 3vw, 38px);
}
.asana-author__bio {
  max-width: 690px;
  font-size: 14px;
  line-height: 1.72;
}

/* Related reading: editorial cards with consistent media and stronger titles. */
.asana-related-grid {
  gap: 24px;
}
.asana-related-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.asana-related-card__media {
  overflow: hidden;
  border-radius: var(--aae-radius);
  background: var(--aae-soft);
}
.asana-related-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.asana-related-card h3,
.asana-related-card p {
  margin-inline: 0;
}
.asana-related-card h3 {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.18;
}
.asana-related-card p {
  display: none;
}

@media (max-width: 760px) {
  .asana-article-shell {
    --asana-article-content-width: 100%;
    --asana-article-wide-width: 100%;
  }
  .asana-gemstone-profile__top {
    grid-template-columns: 1fr;
  }
  .asana-article-feature-stack > .asana-learn li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }
  .asana-article-toc a {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }
  .asana-author {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 18px;
  }
  .asana-author__avatar img {
    width: 82px;
    height: 82px;
  }
}

/* v0.3.9 — Full-bleed editorial hero
   Featured media becomes the opening canvas. The article title and navigation
   sit on the image; the lede remains below for a quieter reading transition. */
.asana-article-hero {
  position: relative;
  width: 100vw;
  max-width: none;
  min-height: clamp(500px, 62vh, 720px);
  margin-top: 0;
  margin-right: calc(50% - 50vw);
  margin-bottom: clamp(40px, 5vw, 66px);
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--aae-primary);
}
.asana-article-hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}
.asana-article-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.asana-article-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--aae-primary) 94%, transparent) 0%,
      color-mix(in srgb, var(--aae-primary) 78%, transparent) 31%,
      color-mix(in srgb, var(--aae-heading) 34%, transparent) 52%,
      transparent 76%
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--aae-heading) 34%, transparent) 0%,
      transparent 48%
    );
  pointer-events: none;
}
.asana-article-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - 64px), 1200px);
  min-height: clamp(500px, 62vh, 720px);
  margin-inline: auto;
  padding-block: clamp(58px, 9vw, 110px) clamp(48px, 7vw, 92px);
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.asana-article-hero__breadcrumbs {
  margin-bottom: clamp(24px, 3vw, 38px);
  color: color-mix(in srgb, var(--aae-on-primary) 78%, transparent);
  font-family: var(--aae-ui);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.asana-article-hero__breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.asana-article-hero__breadcrumbs a:hover,
.asana-article-hero__breadcrumbs a:focus-visible {
  color: var(--aae-on-primary);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.asana-article-hero__breadcrumbs .asana-breadcrumb-separator {
  color: color-mix(in srgb, var(--aae-on-primary) 42%, transparent);
}
.asana-article-hero__kicker {
  margin-bottom: 14px;
  color: color-mix(in srgb, var(--aae-on-primary) 76%, var(--aae-accent));
}
.asana-article-hero__kicker::before {
  background: color-mix(in srgb, var(--aae-on-primary) 72%, var(--aae-accent));
}
.asana-article-hero__title {
  max-width: 760px;
  margin: 0;
  color: var(--aae-on-primary);
  font-size: clamp(54px, 7.4vw, 98px);
  line-height: .91;
  letter-spacing: -.052em;
  text-wrap: balance;
  text-shadow: 0 5px 28px color-mix(in srgb, var(--aae-heading) 34%, transparent);
}
.asana-article-hero__meta {
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: 0;
  border: 0;
  color: color-mix(in srgb, var(--aae-on-primary) 76%, transparent);
  font-size: 11px;
}
.asana-article-opening {
  margin-top: clamp(34px, 4.5vw, 54px);
  margin-bottom: clamp(38px, 5vw, 62px);
}
.asana-article-opening .asana-gemstone-intro,
.asana-article-opening .asana-article-dek {
  margin: 0;
  max-width: 820px;
  color: var(--aae-heading);
  font-family: var(--aae-display);
  font-size: clamp(21px, 2.15vw, 28px);
  line-height: 1.52;
  letter-spacing: -.012em;
}

@media (max-width: 760px) {
  .asana-article-hero {
    min-height: clamp(470px, 74svh, 620px);
    margin-bottom: 32px;
  }
  .asana-article-hero__veil {
    background:
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--aae-primary) 96%, transparent) 0%,
        color-mix(in srgb, var(--aae-primary) 76%, transparent) 47%,
        color-mix(in srgb, var(--aae-heading) 22%, transparent) 72%,
        transparent 100%
      );
  }
  .asana-article-hero__inner {
    width: min(calc(100% - 36px), 1200px);
    min-height: clamp(470px, 74svh, 620px);
    padding-block: 42px 38px;
  }
  .asana-article-hero__breadcrumbs {
    margin-bottom: 20px;
    font-size: 9px;
    letter-spacing: .1em;
  }
  .asana-article-hero__title {
    max-width: 100%;
    font-size: clamp(44px, 13.5vw, 64px);
    line-height: .94;
  }
  .asana-article-hero__meta {
    margin-top: 20px;
    gap: 7px 10px;
  }
  .asana-article-opening {
    margin-top: 28px;
    margin-bottom: 34px;
  }
  .asana-article-opening .asana-gemstone-intro,
  .asana-article-opening .asana-article-dek {
    font-size: clamp(19px, 5.3vw, 23px);
  }
}

/* v0.3.10 — Hero contrast + hierarchy correction
   The hero is an image canvas, so it needs its own guaranteed light ink rather
   than inheriting the normal article heading token. Keep the breadcrumb, title
   and meta as one clean editorial stack; no duplicate kicker line. */
.asana-article-hero {
  --aae-hero-ink: var(--asana-color-surface, #fff);
}
.asana-article-hero__veil {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--aae-primary) 91%, transparent) 0%,
      color-mix(in srgb, var(--aae-primary) 72%, transparent) 30%,
      color-mix(in srgb, var(--aae-heading) 22%, transparent) 52%,
      transparent 76%
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--aae-heading) 24%, transparent) 0%,
      transparent 50%
    );
}
.asana-article-hero__breadcrumbs {
  margin-bottom: clamp(24px, 3vw, 34px);
  color: color-mix(in srgb, var(--aae-hero-ink) 80%, transparent);
}
.asana-article-hero__breadcrumbs a:hover,
.asana-article-hero__breadcrumbs a:focus-visible {
  color: var(--aae-hero-ink);
}
.asana-article-hero__breadcrumbs .asana-breadcrumb-separator {
  color: color-mix(in srgb, var(--aae-hero-ink) 44%, transparent);
}
.asana-article-hero__kicker { display: none !important; }
.asana-article-shell .asana-article-hero__title {
  max-width: 700px;
  color: var(--aae-hero-ink);
  font-size: clamp(54px, 6.5vw, 92px);
  line-height: .92;
  letter-spacing: -.05em;
  text-shadow: 0 5px 30px color-mix(in srgb, var(--aae-heading) 32%, transparent);
}
.asana-article-hero__meta {
  margin-top: clamp(26px, 3.2vw, 34px);
  color: color-mix(in srgb, var(--aae-hero-ink) 78%, transparent);
}
@media (max-width: 760px) {
  .asana-article-hero__veil {
    background:
      linear-gradient(
        0deg,
        color-mix(in srgb, var(--aae-primary) 94%, transparent) 0%,
        color-mix(in srgb, var(--aae-primary) 74%, transparent) 48%,
        color-mix(in srgb, var(--aae-heading) 16%, transparent) 74%,
        transparent 100%
      );
  }
  .asana-article-hero__breadcrumbs { margin-bottom: 18px; }
  .asana-article-shell .asana-article-hero__title {
    max-width: 100%;
    font-size: clamp(44px, 13vw, 62px);
  }
}


/* v0.3.11 — editorial imagery uses the same quiet publication language as the hero. */
.asana-article-editorial-image{border-radius:var(--aae-radius);overflow:hidden;background:var(--aae-soft)}
.asana-article-editorial-image__img{border-radius:inherit}
.asana-article-editorial-image figcaption{color:var(--aae-muted);font-size:12px;line-height:1.5;padding-inline:2px}
.asana-article-gallery-wrap{margin-block:clamp(56px,8vw,96px)}
.asana-article-gallery__track{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--aae-primary) 38%,transparent) transparent}
.asana-article-gallery__item .asana-article-editorial-image__img{aspect-ratio:4/3;object-fit:cover}


/* v0.3.15 — Brand assurance strip
   A menu-height proof bar immediately below the hero. It establishes ASANA as
   both an editorial authority and a real shop without turning the article
   opening into a promotional card. */
.asana-article-shell--brand-strip .asana-article-hero {
  margin-bottom: 0;
}
.asana-article-brand-strip {
  position: relative;
  z-index: 2;
  width: 100vw;
  max-width: none;
  min-height: 58px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  border-top: 1px solid color-mix(in srgb, var(--aae-border) 86%, transparent);
  border-bottom: 1px solid var(--aae-border);
  background: color-mix(in srgb, var(--aae-bg) 94%, var(--aae-surface));
  color: var(--aae-muted);
  font-family: var(--aae-ui);
  font-size: 10px;
  font-weight: 680;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.asana-article-brand-strip__inner {
  display: flex;
  width: min(calc(100% - 64px), 1200px);
  min-height: 58px;
  margin-inline: auto;
  align-items: stretch;
}
.asana-article-brand-strip__brand,
.asana-article-brand-strip__proof,
.asana-article-brand-strip__cta {
  display: inline-flex;
  min-width: 0;
  padding: 0 22px;
  align-items: center;
  white-space: nowrap;
}
.asana-article-brand-strip__brand {
  padding-left: 0;
  color: var(--aae-primary);
  font-weight: 820;
  letter-spacing: .12em;
  text-decoration: none;
}
.asana-article-brand-strip__proof,
.asana-article-brand-strip__cta {
  border-left: 1px solid var(--aae-border);
}
.asana-article-brand-strip__proof {
  flex: 1 1 auto;
  justify-content: center;
  color: color-mix(in srgb, var(--aae-heading) 78%, var(--aae-muted));
}
.asana-article-brand-strip__cta {
  padding-right: 0;
  color: var(--aae-primary);
  font-weight: 800;
  text-decoration: none;
}
.asana-article-brand-strip__brand:hover,
.asana-article-brand-strip__brand:focus-visible,
.asana-article-brand-strip__cta:hover,
.asana-article-brand-strip__cta:focus-visible {
  color: var(--aae-accent);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.asana-article-shell--brand-strip .asana-article-opening {
  margin-top: clamp(30px, 4vw, 46px);
}

@media (max-width: 980px) {
  .asana-article-brand-strip {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .asana-article-brand-strip::-webkit-scrollbar { display: none; }
  .asana-article-brand-strip__inner {
    width: max-content;
    min-width: 100%;
    padding-inline: 22px;
  }
  .asana-article-brand-strip__brand,
  .asana-article-brand-strip__proof,
  .asana-article-brand-strip__cta {
    flex: 0 0 auto;
    padding-inline: 18px;
  }
  .asana-article-brand-strip__brand { padding-left: 0; }
  .asana-article-brand-strip__cta { padding-right: 0; }
}

@media (max-width: 600px) {
  .asana-article-brand-strip,
  .asana-article-brand-strip__inner {
    min-height: 52px;
  }
  .asana-article-brand-strip {
    font-size: 9px;
    letter-spacing: .065em;
  }
  .asana-article-brand-strip__inner { padding-inline: 18px; }
  .asana-article-brand-strip__brand,
  .asana-article-brand-strip__proof,
  .asana-article-brand-strip__cta { padding-inline: 15px; }
  .asana-article-brand-strip__brand { padding-left: 0; }
  .asana-article-brand-strip__cta { padding-right: 0; }
}