/*!
 * Ask Ayce web design system, v2.0 (2026-10-10). Follows 01 Brand Book/BRAND-POSITION-2026-10-10.md.
 * Generated file: edit build/ask-ayce.src.css and build/build_tokens.py, then run build/build_all.sh.
 * Layers: fonts > tokens > base > layout/grid > utilities > components > states > motion.
 * Class prefix: aa-. Theme: data-theme="light|dark" on any element (defaults to the OS setting).
 */

/* ------------------------------------------------------------------ fonts */
/* Body + UI: Atkinson Hyperlegible Next, self-hosted (SIL OFL, fonts/OFL-AtkinsonHyperlegibleNext.txt) so pages can
   preload it and it never swaps in after first paint (that swap was the only layout shift on load). font-display:
   optional keeps a late font from moving text; pages preload fonts/AtkinsonHyperlegibleNext-VF.woff2 so it is in time.
   Small mono labels use the system monospace stack (no Google Fonts import): the site makes no third-party request,
   so the footer promise "no tracking pixels" covers fonts too. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-VF.woff2") format("woff2-variations"), url("../fonts/AtkinsonHyperlegibleNext-VF.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: optional;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: optional;
}

/* Hello fonts: local install first (the names Figma sees), then the bundled woff2. */
@font-face {
  font-family: "Hello Imperfect";
  src: local("Hello-Imperfect"), local("HelloImperfectRegular"), url("../fonts/Hello-Imperfect.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Hello-Good Notes";
  src: local("Hello-Good Notes"), local("HelloGoodNotesRegular"), url("../fonts/Hello-GoodNotes.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Hello-Good Notes Doodles";
  src: local("Hello-Good Notes Doodles"), local("HelloGoodNotesDoodles"), url("../fonts/Hello-Doodles.woff2") format("woff2");
  font-display: block;
}

/* ------------------------------------------------------------------ tokens */
/* Ask Ayce design tokens. Generated by build/build_tokens.py; edit there, not here. */
:root {
  --aa-paper: #FBF8EF;
  --aa-charcoal: #2B2A28;
  --aa-lemon: #F7DF4F;
  --aa-moss: #55624A;
  --aa-graphite: #6B6862;
  --aa-white: #FFFFFF;
  --aa-dot: #DAD5C6;
  --aa-butter: #FCF1B5;
  --aa-sage: #D5DDC3;  /* sage: retired on Ask Ayce 2026-10-17; belongs to Ask AI-yce */
  --aa-peach: #F5D3BC;
  --aa-lilac: #D9D0EC;
  --aa-error: #B3261E;
  --aa-error-wash: #FBE3E3;
  --aa-error-light: #FF9C8F;
  --aa-success: #1E6B4A;
  --aa-success-wash: #E2F0E8;
  --aa-success-light: #86D3AE;

  --aa-font-display: "Hello Imperfect", "Hello-Imperfect", "Arial Narrow", Impact, sans-serif;
  --aa-font-notes: "Hello-Good Notes", "Hello Good Notes", "Segoe Print", "Bradley Hand", cursive;
  --aa-font-doodles: "Hello-Good Notes Doodles", "Hello Good Notes Doodles", cursive;
  --aa-font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --aa-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --aa-fs-display: clamp(64px, calc(64px + 5.3333vw - 20.8px), 120px);
  --aa-lh-display: 0.88;
  --aa-ls-display: 0.01em;
  --aa-fs-h1: clamp(44px, calc(44px + 2.6667vw - 10.4px), 72px);
  --aa-lh-h1: 0.9;
  --aa-ls-h1: 0.01em;
  --aa-fs-h2: clamp(32px, calc(32px + 1.5238vw - 5.94px), 48px);
  --aa-lh-h2: 0.92;
  --aa-ls-h2: 0.0em;
  --aa-fs-h3: clamp(24px, calc(24px + 0.7619vw - 2.97px), 32px);
  --aa-lh-h3: 1.0;
  --aa-ls-h3: 0.0em;
  --aa-fs-kicker: clamp(24px, calc(24px + 0.7619vw - 2.97px), 32px);
  --aa-lh-kicker: 1.1;
  --aa-ls-kicker: 0.0em;
  --aa-fs-body: clamp(17px, calc(17px + 0.0952vw - 0.37px), 18px);
  --aa-lh-body: 1.6;
  --aa-ls-body: 0.0em;
  --aa-fs-small: 15px;
  --aa-lh-small: 1.5;
  --aa-ls-small: 0.0em;
  --aa-fs-mono: 13px;
  --aa-lh-mono: 1.5;
  --aa-ls-mono: 0.01em;

  --aa-space-4: 4px;
  --aa-space-8: 8px;
  --aa-space-12: 12px;
  --aa-space-16: 16px;
  --aa-space-24: 24px;
  --aa-space-32: 32px;
  --aa-space-48: 48px;
  --aa-space-64: 64px;
  --aa-space-96: 96px;
  --aa-space-128: 128px;

  --aa-radius-note-tl: 14px;
  --aa-radius-note-tr: 18px;
  --aa-radius-note-br: 12px;
  --aa-radius-note-bl: 20px;
  --aa-radius-button-tl: 12px;
  --aa-radius-button-tr: 16px;
  --aa-radius-button-br: 10px;
  --aa-radius-button-bl: 14px;
  --aa-radius-sticky: 3px;
  --aa-radius-input: 10px;
  --aa-radius-chip: 999px;
  --aa-radius-pill: 999px;
  --aa-radius-note: 14px 18px 12px 20px;
  --aa-radius-button: 12px 16px 10px 14px;
  --aa-border-hairline: 1px;
  --aa-border-pencil: 1.5px;
  --aa-border-pen: 2px;
  --aa-border-marker: 3px;

  --aa-grid-desktop-columns: 12;
  --aa-grid-desktop-gutter: 24px;
  --aa-grid-desktop-margin: 120px;
  --aa-grid-desktop-max: 1200px;
  --aa-grid-desktop-breakpoint: 1024px;
  --aa-grid-tablet-columns: 8;
  --aa-grid-tablet-gutter: 20px;
  --aa-grid-tablet-margin: 40px;
  --aa-grid-tablet-max: 688px;
  --aa-grid-tablet-breakpoint: 768px;
  --aa-grid-mobile-columns: 4;
  --aa-grid-mobile-gutter: 16px;
  --aa-grid-mobile-margin: 20px;
  --aa-grid-mobile-max: 350px;
  --aa-grid-mobile-breakpoint: 0px;
  --aa-duration-fast: 120ms;
  --aa-duration-base: 200ms;
  --aa-duration-draw: 500ms;
  --aa-ease-out: cubic-bezier(.2,.8,.2,1);
  --aa-dot-pitch: calc(100vw / 30);  /* canvas width / 30, paper only */
}

:root,
[data-theme="light"] {
  --aa-color-bg-page: var(--aa-paper);
  --aa-color-bg-surface: var(--aa-white);
  --aa-color-bg-surface-sunken: var(--aa-paper);
  --aa-color-bg-accent: var(--aa-lemon);
  --aa-color-bg-inverse: var(--aa-charcoal);
  --aa-color-bg-mood: var(--aa-moss);
  --aa-color-text-primary: var(--aa-charcoal);
  --aa-color-text-secondary: var(--aa-graphite);
  --aa-color-text-on-accent: var(--aa-charcoal);
  --aa-color-text-on-tint: var(--aa-charcoal);
  --aa-color-text-secondary-on-tint: var(--aa-charcoal);
  --aa-color-text-inverse: var(--aa-paper);
  --aa-color-text-on-mood: var(--aa-paper);
  --aa-color-text-link: var(--aa-charcoal);
  --aa-color-border-strong: var(--aa-charcoal);
  --aa-color-border-subtle: var(--aa-dot);
  --aa-color-grid-dot: var(--aa-dot);
  --aa-color-focus-ring: var(--aa-charcoal);
  --aa-color-focus-halo: var(--aa-lemon);
  --aa-color-state-hover-wash: rgb(43 42 40 / 0.07);
  --aa-color-state-error: var(--aa-error);
  --aa-color-state-error-bg: var(--aa-error-wash);
  --aa-color-state-error-text: var(--aa-charcoal);
  --aa-color-state-success: var(--aa-success);
  --aa-color-state-success-bg: var(--aa-success-wash);
  --aa-color-state-success-text: var(--aa-charcoal);
  --aa-color-state-disabled-bg: var(--aa-paper);
  --aa-color-state-disabled-text: var(--aa-graphite);
  --aa-color-series-tried-it: var(--aa-butter);
  --aa-color-series-hyperfixation: var(--aa-lilac);
  --aa-color-series-side-hustle: var(--aa-peach);
  --aa-color-series-beauty-of-boring: var(--aa-paper);  /* the beauty of boring: owner to pick a tint; paper until then */
  --aa-color-shadow-color: rgb(43 42 40 / 0.18);
  --aa-color-shadow-offset: var(--aa-charcoal);
  --aa-shadow-sticky: 0px 8px 18px -6px var(--aa-color-shadow-color);
  --aa-shadow-lift: 0px 2px 6px 0px var(--aa-color-shadow-color);
  --aa-shadow-offset: 3px 3px 0px 0px var(--aa-color-shadow-offset);
  --aa-shadow-offset-hover: 5px 5px 0px 0px var(--aa-color-shadow-offset);
  color-scheme: light;
}

[data-theme="dark"] {
  --aa-color-bg-page: var(--aa-charcoal);
  --aa-color-bg-surface: var(--aa-moss);
  --aa-color-bg-surface-sunken: var(--aa-charcoal);
  --aa-color-bg-accent: var(--aa-lemon);
  --aa-color-bg-inverse: var(--aa-paper);
  --aa-color-bg-mood: var(--aa-moss);
  --aa-color-text-primary: var(--aa-paper);
  --aa-color-text-secondary: rgb(251 248 239 / 0.86);
  --aa-color-text-on-accent: var(--aa-charcoal);
  --aa-color-text-on-tint: var(--aa-charcoal);
  --aa-color-text-secondary-on-tint: var(--aa-charcoal);
  --aa-color-text-inverse: var(--aa-charcoal);
  --aa-color-text-on-mood: var(--aa-paper);
  --aa-color-text-link: var(--aa-lemon);
  --aa-color-border-strong: var(--aa-paper);
  --aa-color-border-subtle: rgb(251 248 239 / 0.28);
  --aa-color-grid-dot: rgb(251 248 239 / 0.12);
  --aa-color-focus-ring: var(--aa-lemon);
  --aa-color-focus-halo: var(--aa-charcoal);
  --aa-color-state-hover-wash: rgb(251 248 239 / 0.1);
  --aa-color-state-error: var(--aa-error-light);
  --aa-color-state-error-bg: var(--aa-error-wash);
  --aa-color-state-error-text: var(--aa-charcoal);
  --aa-color-state-success: var(--aa-success-light);
  --aa-color-state-success-bg: var(--aa-success-wash);
  --aa-color-state-success-text: var(--aa-charcoal);
  --aa-color-state-disabled-bg: var(--aa-charcoal);
  --aa-color-state-disabled-text: rgb(251 248 239 / 0.62);
  --aa-color-series-tried-it: var(--aa-butter);
  --aa-color-series-hyperfixation: var(--aa-lilac);
  --aa-color-series-side-hustle: var(--aa-peach);
  --aa-color-series-beauty-of-boring: var(--aa-paper);  /* the beauty of boring: owner to pick a tint; paper until then */
  --aa-color-shadow-color: rgb(43 42 40 / 0.55);
  --aa-color-shadow-offset: var(--aa-charcoal);
  --aa-shadow-sticky: 0px 8px 18px -6px var(--aa-color-shadow-color);
  --aa-shadow-lift: 0px 2px 6px 0px var(--aa-color-shadow-color);
  --aa-shadow-offset: 3px 3px 0px 0px var(--aa-color-shadow-offset);
  --aa-shadow-offset-hover: 5px 5px 0px 0px var(--aa-color-shadow-offset);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --aa-color-bg-page: var(--aa-charcoal);
    --aa-color-bg-surface: var(--aa-moss);
    --aa-color-bg-surface-sunken: var(--aa-charcoal);
    --aa-color-bg-accent: var(--aa-lemon);
    --aa-color-bg-inverse: var(--aa-paper);
    --aa-color-bg-mood: var(--aa-moss);
    --aa-color-text-primary: var(--aa-paper);
    --aa-color-text-secondary: rgb(251 248 239 / 0.86);
    --aa-color-text-on-accent: var(--aa-charcoal);
    --aa-color-text-on-tint: var(--aa-charcoal);
    --aa-color-text-secondary-on-tint: var(--aa-charcoal);
    --aa-color-text-inverse: var(--aa-charcoal);
    --aa-color-text-on-mood: var(--aa-paper);
    --aa-color-text-link: var(--aa-lemon);
    --aa-color-border-strong: var(--aa-paper);
    --aa-color-border-subtle: rgb(251 248 239 / 0.28);
    --aa-color-grid-dot: rgb(251 248 239 / 0.12);
    --aa-color-focus-ring: var(--aa-lemon);
    --aa-color-focus-halo: var(--aa-charcoal);
    --aa-color-state-hover-wash: rgb(251 248 239 / 0.1);
    --aa-color-state-error: var(--aa-error-light);
    --aa-color-state-error-bg: var(--aa-error-wash);
    --aa-color-state-error-text: var(--aa-charcoal);
    --aa-color-state-success: var(--aa-success-light);
    --aa-color-state-success-bg: var(--aa-success-wash);
    --aa-color-state-success-text: var(--aa-charcoal);
    --aa-color-state-disabled-bg: var(--aa-charcoal);
    --aa-color-state-disabled-text: rgb(251 248 239 / 0.62);
    --aa-color-series-tried-it: var(--aa-butter);
    --aa-color-series-hyperfixation: var(--aa-lilac);
    --aa-color-series-side-hustle: var(--aa-peach);
    --aa-color-series-beauty-of-boring: var(--aa-paper);  /* the beauty of boring: owner to pick a tint; paper until then */
    --aa-color-shadow-color: rgb(43 42 40 / 0.55);
    --aa-color-shadow-offset: var(--aa-charcoal);
    --aa-shadow-sticky: 0px 8px 18px -6px var(--aa-color-shadow-color);
    --aa-shadow-lift: 0px 2px 6px 0px var(--aa-color-shadow-color);
    --aa-shadow-offset: 3px 3px 0px 0px var(--aa-color-shadow-offset);
    --aa-shadow-offset-hover: 5px 5px 0px 0px var(--aa-color-shadow-offset);
    color-scheme: dark;
  }
}


/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--aa-color-bg-page);
  color: var(--aa-color-text-primary);
  font-family: var(--aa-font-body);
  font-size: var(--aa-fs-body);
  line-height: var(--aa-lh-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
[data-theme] { background-color: var(--aa-color-bg-page); color: var(--aa-color-text-primary); }
img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
.aa-series-card ul, .aa-pricing ul, .aa-footer ul, .aa-nav ul, .aa-checklist ul, .aa-pagination ul, .aa-breadcrumbs ol, .aa-faq ul.aa-plain { list-style: none; padding: 0; margin: 0; }
a { color: var(--aa-color-text-link); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--aa-lemon); color: var(--aa-charcoal); }

:focus { outline: none; }
:focus-visible, .is-focus {
  outline: 3px solid var(--aa-color-focus-ring);
  outline-offset: 3px;
}
.aa-skip {
  position: absolute; left: var(--aa-space-16); top: -100px; z-index: 100;
  background: var(--aa-lemon); color: var(--aa-charcoal); padding: 12px 20px;
  border: 2px solid var(--aa-charcoal); border-radius: var(--aa-radius-button); font-weight: 700;
}
.aa-skip:focus { top: var(--aa-space-16); }
.aa-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;
}

/* ------------------------------------------------------------------ type */
.aa-display, .aa-h1, .aa-h2, .aa-h3 {
  font-family: var(--aa-font-display);
  font-weight: 400;
  text-transform: uppercase;
  text-wrap: balance;
}
.aa-display { font-size: var(--aa-fs-display); line-height: var(--aa-lh-display); letter-spacing: var(--aa-ls-display); }
.aa-h1 { font-size: var(--aa-fs-h1); line-height: var(--aa-lh-h1); letter-spacing: var(--aa-ls-h1); }
.aa-h2 { font-size: var(--aa-fs-h2); line-height: var(--aa-lh-h2); }
.aa-h3 { font-size: var(--aa-fs-h3); line-height: var(--aa-lh-h3); }
.aa-kicker {
  display: block;
  font-family: var(--aa-font-notes);
  font-size: var(--aa-fs-kicker);
  line-height: var(--aa-lh-kicker);
  font-weight: 400;
  text-transform: none;
  margin-bottom: var(--aa-space-8);
}
.aa-note { font-family: var(--aa-font-notes); font-size: 24px; line-height: 1.15; }
.aa-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 60ch; }
.aa-body { font-size: var(--aa-fs-body); line-height: var(--aa-lh-body); }
.aa-small { font-size: var(--aa-fs-small); line-height: var(--aa-lh-small); }
.aa-muted { color: var(--aa-color-text-secondary); }
.aa-mono, .aa-path {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  line-height: var(--aa-lh-mono);
  letter-spacing: var(--aa-ls-mono);
}
/* exact menu path or prompt the reader should copy */
.aa-path {
  display: block;
  padding: 10px 14px;
  background: var(--aa-color-bg-page);
  border: 1.5px dashed var(--aa-color-border-strong);
  border-radius: 8px 10px 7px 11px;
  font-size: 14px;
  color: var(--aa-color-text-primary);
}

/* Lemon highlighter swipe (brand rules 6-10): one per section, only behind the payoff word or phrase
   (three words or fewer) set in Hello Imperfect or Good Notes, only on paper, white or photo grounds.
   Never on a series tint, lemon, charcoal or moss, never behind a mark, icon, ami, number or series name.
   The guards below switch it off on forbidden grounds so a stray class cannot break the rule. */
.aa-swipe {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--aa-color-text-on-accent);
  white-space: nowrap;
  padding: 0 .04em;
}
.aa-swipe::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.08em; right: -.1em; top: .3em; bottom: .02em;
  background: var(--aa-lemon);
  border-radius: .08em .22em .12em .26em;
  transform: rotate(-1.6deg) skewX(-6deg);
  transform-origin: left center;
}
.aa-swipe--thin::before { top: .58em; }
[data-theme="dark"] .aa-swipe::before, .aa-ground-lemon .aa-swipe::before, .aa-ground-moss .aa-swipe::before,
.aa-ground-charcoal .aa-swipe::before, .aa-hero--plate .aa-swipe::before, .aa-hero--friday .aa-swipe::before,
[class*="aa-tint-"] .aa-swipe::before, .aa-sticky .aa-swipe::before, .aa-series-card .aa-swipe::before,
.aa-footer .aa-swipe::before, .aa-callout .aa-swipe::before { display: none; }
[data-theme="dark"] .aa-swipe, .aa-ground-charcoal .aa-swipe, .aa-ground-moss .aa-swipe, .aa-footer .aa-swipe { color: var(--aa-lemon); }
.aa-ground-lemon .aa-swipe, .aa-hero--friday .aa-swipe, [class*="aa-tint-"] .aa-swipe, .aa-sticky .aa-swipe, .aa-series-card .aa-swipe, .aa-callout .aa-swipe { color: inherit; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aa-swipe::before { display: none; }
  :root:not([data-theme="light"]) .aa-swipe { color: var(--aa-lemon); }
  :root:not([data-theme="light"]) [data-theme="light"] .aa-swipe::before { display: block; }
  :root:not([data-theme="light"]) [data-theme="light"] .aa-swipe { color: var(--aa-color-text-on-accent); }
}
/* Payoff color on dark grounds: lemon type instead of a swipe (rule 9, reversed = lemon type, no swipe). */
.aa-payoff { color: var(--aa-lemon); }

/* ------------------------------------------------------------------ layout + grid */
.aa-container {
  width: 100%;
  max-width: calc(var(--aa-grid-desktop-max) + 2 * var(--aa-gutter-x, 120px));
  margin-inline: auto;
  padding-inline: var(--aa-gutter-x, 120px);
}
:root { --aa-gutter-x: 120px; --aa-cols: 12; --aa-gap: 24px; }
@media (max-width: 1279px) { :root { --aa-gutter-x: 64px; } }
@media (max-width: 1023px) { :root { --aa-gutter-x: 40px; --aa-cols: 8; --aa-gap: 20px; } }
@media (max-width: 767px)  { :root { --aa-gutter-x: 20px; --aa-cols: 4; --aa-gap: 16px; } }

.aa-grid {
  display: grid;
  grid-template-columns: repeat(var(--aa-cols), minmax(0, 1fr));
  gap: var(--aa-gap);
}
/* spans: desktop / tablet (t-) / mobile (m-) */
.aa-col-12 { grid-column: span min(12, var(--aa-cols)); }
.aa-col-8 { grid-column: span min(8, var(--aa-cols)); }
.aa-col-7 { grid-column: span min(7, var(--aa-cols)); }
.aa-col-6 { grid-column: span min(6, var(--aa-cols)); }
.aa-col-5 { grid-column: span min(5, var(--aa-cols)); }
.aa-col-4 { grid-column: span min(4, var(--aa-cols)); }
.aa-col-3 { grid-column: span min(3, var(--aa-cols)); }
@media (max-width: 1023px) {
  .aa-t-8 { grid-column: span 8; } .aa-t-6 { grid-column: span 6; }
  .aa-t-4 { grid-column: span 4; }
}
@media (max-width: 767px) {
  .aa-m-4 { grid-column: span 4; } .aa-m-2 { grid-column: span 2; }
}
/* auto-fit card grid that never overflows */
.aa-cards {
  display: grid;
  gap: var(--aa-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--aa-card-min, 260px)), 1fr));
}
.aa-stack > * + * { margin-top: var(--aa-stack, var(--aa-space-16)); }
.aa-cluster { display: flex; flex-wrap: wrap; gap: var(--aa-cluster, var(--aa-space-12)); align-items: center; }
.aa-section { padding-block: clamp(64px, 8vw, 128px); }
.aa-section--tight { padding-block: clamp(48px, 5vw, 64px); }

/* ------------------------------------------------------------------ utilities */
/* Dot grid (rule 25): paper only, pitch = canvas width / 30 from the one --aa-dot-pitch variable. */
.aa-dots {
  background-image: radial-gradient(var(--aa-color-grid-dot) 1.2px, transparent 1.6px);
  background-size: var(--aa-dot-pitch) var(--aa-dot-pitch);
  background-position: calc(var(--aa-dot-pitch) / 2) calc(var(--aa-dot-pitch) / 2);
}
[data-theme="dark"] .aa-dots, .aa-dots[data-theme="dark"] { background-image: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aa-dots { background-image: none; } :root:not([data-theme="light"]) [data-theme="light"] .aa-dots { background-image: radial-gradient(var(--aa-color-grid-dot) 1.2px, transparent 1.6px); } }
.aa-surface { background: var(--aa-color-bg-surface); }
.aa-ground-paper { background-color: var(--aa-color-bg-page); }
.aa-ground-lemon { background-color: var(--aa-lemon); color: var(--aa-charcoal); }
.aa-ground-moss { background-color: var(--aa-moss); color: var(--aa-paper); }
.aa-ground-charcoal { background-color: var(--aa-charcoal); color: var(--aa-paper); }
/* Series tints (rules 3-5): text on a tint is charcoal, secondary text included. Always pair with the series name. */
.aa-tint-tried-it { background-color: var(--aa-color-series-tried-it); }
.aa-tint-hyperfixation { background-color: var(--aa-color-series-hyperfixation); }
.aa-tint-side-hustle { background-color: var(--aa-color-series-side-hustle); }
.aa-tint-beauty-of-boring { background-color: var(--aa-color-series-beauty-of-boring); } /* the beauty of boring: owner to pick a tint; paper until then */
[class*="aa-tint-"], .aa-sticky, .aa-series-card, .aa-callout, .aa-ground-lemon, .aa-hero--friday, .aa-tag[class*="aa-tag--"]:not(.aa-tag--ink) {
  color: var(--aa-charcoal);
  --aa-color-text-primary: var(--aa-charcoal);
  --aa-color-text-secondary: var(--aa-color-text-secondary-on-tint);
}
/* ami: raster masters only. Plain file on paper, white or lemon; keyline file on charcoal, moss and dark mode. */
.aa-ami { display: block; width: 100%; height: auto; }
.aa-ami--keyline, .aa-when-dark { display: none; }
[data-theme="dark"] .aa-ami--plain, [data-theme="dark"] .aa-when-light { display: none; }
[data-theme="dark"] .aa-ami--keyline, [data-theme="dark"] .aa-when-dark { display: block; }
[data-theme="light"] .aa-ami--plain, [data-theme="light"] .aa-when-light { display: block; }
[data-theme="light"] .aa-ami--keyline, [data-theme="light"] .aa-when-dark { display: none; }
.aa-ground-moss .aa-ami--plain, .aa-ground-charcoal .aa-ami--plain, .aa-hero--plate .aa-ami--plain { display: none; }
.aa-ground-moss .aa-ami--keyline, .aa-ground-charcoal .aa-ami--keyline, .aa-hero--plate .aa-ami--keyline { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aa-ami--plain, :root:not([data-theme="light"]) .aa-when-light { display: none; }
  :root:not([data-theme="light"]) .aa-ami--keyline, :root:not([data-theme="light"]) .aa-when-dark { display: block; }
  :root:not([data-theme="light"]) [data-theme="light"] .aa-ami--plain, :root:not([data-theme="light"]) [data-theme="light"] .aa-when-light { display: block; }
  :root:not([data-theme="light"]) [data-theme="light"] .aa-ami--keyline, :root:not([data-theme="light"]) [data-theme="light"] .aa-when-dark { display: none; }
}
/* the series name that travels with every tint */
.aa-series-name { display: inline-block; font-family: var(--aa-font-body); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: lowercase; line-height: 1.3; padding: 2px 9px; border: 1.5px solid var(--aa-charcoal); border-radius: 999px; background: rgb(255 255 255 / .55); color: var(--aa-charcoal); }
.aa-pencil-border { border: var(--aa-border-pen) solid var(--aa-color-border-strong); border-radius: var(--aa-radius-note); }
.aa-tilt-l { transform: rotate(-1.4deg); } .aa-tilt-r { transform: rotate(1.2deg); }
.aa-center { text-align: center; }
.aa-doodle { display: inline-block; color: currentColor; pointer-events: none; }
.aa-doodle svg { width: 100%; height: auto; }
.aa-icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================== COMPONENTS */

/* ---------- Button ---------- */
.aa-btn {
  --aa-btn-bg: transparent;
  --aa-btn-fg: var(--aa-color-text-primary);
  --aa-btn-border: var(--aa-color-border-strong);
  --aa-btn-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  min-width: 44px;
  padding: 11px 22px;
  background: var(--aa-btn-bg);
  color: var(--aa-btn-fg);
  border: 2px solid var(--aa-btn-border);
  border-radius: var(--aa-radius-button);
  box-shadow: var(--aa-btn-shadow);
  font-family: var(--aa-font-body);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--aa-duration-fast) var(--aa-ease-out),
              box-shadow var(--aa-duration-fast) var(--aa-ease-out),
              background-color var(--aa-duration-fast) linear;
}
.aa-btn .aa-icon { width: 20px; height: 20px; }
.aa-btn--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.aa-btn--lg { min-height: 56px; padding: 14px 28px; font-size: 19px; }
.aa-btn--block { display: flex; width: 100%; }

.aa-btn--primary {
  --aa-btn-bg: var(--aa-lemon);
  --aa-btn-fg: var(--aa-charcoal);
  --aa-btn-border: var(--aa-charcoal);
  --aa-btn-shadow: var(--aa-shadow-offset);
}
.aa-btn--primary:hover, .aa-btn--primary.is-hover {
  transform: translate(-2px, -2px);
  --aa-btn-shadow: var(--aa-shadow-offset-hover);
}
.aa-btn--primary:active, .aa-btn--primary.is-active {
  transform: translate(2px, 2px);
  --aa-btn-shadow: 1px 1px 0 0 var(--aa-color-border-strong);
}
.aa-btn--secondary { --aa-btn-bg: var(--aa-color-bg-surface); }
.aa-btn--secondary:hover, .aa-btn--secondary.is-hover { --aa-btn-bg: var(--aa-color-state-hover-wash); }
.aa-btn--ghost { --aa-btn-border: transparent; }
.aa-btn--ghost:hover, .aa-btn--ghost.is-hover { --aa-btn-bg: var(--aa-color-state-hover-wash); --aa-btn-border: var(--aa-color-border-subtle); }
.aa-btn--link {
  --aa-btn-border: transparent;
  padding: 10px 4px;
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  color: var(--aa-color-text-link);
}
.aa-btn--link:hover, .aa-btn--link.is-hover {
  --aa-btn-bg: var(--aa-lemon);
  color: var(--aa-charcoal);
  text-decoration-thickness: 3px;
}
.aa-btn:focus-visible, .aa-btn.is-focus { outline: 3px solid var(--aa-color-focus-ring); outline-offset: 4px; }
.aa-btn:disabled, .aa-btn.is-disabled, .aa-btn[aria-disabled="true"] {
  --aa-btn-bg: var(--aa-color-state-disabled-bg);
  --aa-btn-fg: var(--aa-color-state-disabled-text);
  --aa-btn-border: var(--aa-color-state-disabled-text);
  --aa-btn-shadow: none;
  border-style: dashed;
  transform: none;
  cursor: not-allowed;
  text-decoration: none;
}
.aa-btn--link:disabled, .aa-btn--link.is-disabled { --aa-btn-border: transparent; --aa-btn-bg: transparent; }

/* ---------- Nav bar ---------- */
.aa-nav {
  container-type: inline-size;
  container-name: nav;
  position: relative;
  background: var(--aa-color-bg-page);
  border-bottom: 2px solid var(--aa-color-border-strong);
}
.aa-nav__bar {
  display: flex; align-items: center; gap: var(--aa-space-24);
  min-height: 80px; padding-block: 12px;
}
.aa-nav__brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; border-radius: 8px; }
.aa-nav__brand img { height: 44px; width: auto; }
.aa-nav__brand .aa-logo-dark { display: none; }
[data-theme="dark"] .aa-nav__brand .aa-logo-light { display: none; }
[data-theme="dark"] .aa-nav__brand .aa-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aa-nav__brand .aa-logo-light { display: none; }
  :root:not([data-theme="light"]) .aa-nav__brand .aa-logo-dark { display: block; }
}
.aa-nav__links { display: flex; gap: 4px; margin-left: auto; }
.aa-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px;
  color: var(--aa-color-text-primary); text-decoration: none; font-weight: 600; font-size: 16px;
  border-radius: 10px 12px 9px 13px;
}
.aa-nav__link:hover, .aa-nav__link.is-hover { background: var(--aa-color-state-hover-wash); }
.aa-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.aa-nav__cta { margin-left: 8px; }
.aa-nav__toggle {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  background: transparent; border: 2px solid var(--aa-color-border-strong);
  border-radius: var(--aa-radius-button); font-weight: 700;
}
.aa-nav__panel { display: none; }
@container nav (max-width: 900px) {
  .aa-nav__links, .aa-nav__cta { display: none; }
  .aa-nav__toggle { display: inline-flex; }
  .aa-nav__brand img { height: 38px; }
  .aa-nav__bar { min-height: 68px; }
  .aa-nav.is-open .aa-nav__panel { display: block; }
}
.aa-nav__panel {
  border-top: 2px solid var(--aa-color-border-strong);
  padding: var(--aa-space-16) 0 var(--aa-space-24);
}
.aa-nav__panel ul { display: grid; gap: 4px; }
.aa-nav__panel .aa-nav__link { font-size: 20px; }
.aa-nav__panel li { display: flex; }
.aa-nav__panel .aa-note { margin: var(--aa-space-16) 0 var(--aa-space-12); color: var(--aa-color-text-secondary); }

/* ---------- Footer ---------- */
.aa-footer {
  background: var(--aa-charcoal);
  color: var(--aa-paper);
  padding-block: var(--aa-space-64) var(--aa-space-32);
  container-type: inline-size;
  --aa-color-text-link: var(--aa-paper);
  --aa-color-focus-ring: var(--aa-lemon);
}
[data-theme="dark"] .aa-footer, .aa-footer[data-theme="dark"] { border-top: 2px dashed rgb(251 248 239 / .28); }
.aa-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--aa-space-32); }
.aa-footer__brand img { width: 220px; }
.aa-footer__brand p { margin-top: var(--aa-space-16); max-width: 32ch; color: rgb(251 248 239 / .8); }
.aa-footer h3 { font-family: var(--aa-font-notes); font-weight: 400; font-size: 24px; margin-bottom: var(--aa-space-8); color: var(--aa-lemon); }
.aa-footer ul:not(.aa-social) { display: grid; gap: 0; }
.aa-footer ul a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.aa-footer ul a:hover { text-decoration: underline; }
.aa-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.aa-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--aa-space-16); justify-content: space-between; align-items: center;
  margin-top: var(--aa-space-48); padding-top: var(--aa-space-24); border-top: 1.5px solid rgb(251 248 239 / .28);
  font-size: var(--aa-fs-small); color: rgb(251 248 239 / .8);
}
@container (max-width: 900px) { .aa-footer__top { grid-template-columns: 1fr 1fr; } }
@container (max-width: 520px) { .aa-footer__top { grid-template-columns: 1fr; } }

/* ---------- Hero (3 variants) ---------- */
.aa-hero { position: relative; padding-block: clamp(56px, 7vw, 112px); overflow: hidden; container-type: inline-size; }
.aa-hero__inner { display: grid; grid-template-columns: 7fr 5fr; gap: var(--aa-space-48); align-items: center; }
.aa-hero__title { margin-bottom: var(--aa-space-24); }
.aa-hero__body { max-width: 52ch; margin-bottom: var(--aa-space-32); }
.aa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--aa-space-16); align-items: center; }
.aa-hero__tonight {
  display: flex; gap: 12px; align-items: flex-start; margin-top: var(--aa-space-32);
  font-family: var(--aa-font-notes); font-size: 24px; line-height: 1.15; max-width: 34ch;
}
.aa-hero__tonight .aa-doodle { width: 30px; margin-top: -2px; color: var(--aa-color-text-primary); }
.aa-hero__art { position: relative; min-height: 360px; }
@container (max-width: 860px) {
  .aa-hero__inner { grid-template-columns: 1fr; }
  .aa-hero__art { min-height: 300px; max-width: 460px; }
}
/* 1: notes on dot paper */
.aa-hero--notes { background-color: var(--aa-color-bg-page); }
.aa-hero--notes .aa-hero__art { min-height: 460px; }
.aa-hero--notes .aa-sticky { position: absolute; width: min(62%, 280px); }
.aa-hero--notes .aa-sticky:nth-of-type(1) { left: 2%; top: 0; --aa-tilt: -1.8deg; }
.aa-hero--notes .aa-sticky:nth-of-type(2) { right: 0; top: 150px; --aa-tilt: 1.4deg; }
.aa-hero--notes .aa-sticky:nth-of-type(3) { left: 8%; top: 300px; --aa-tilt: -0.8deg; }
.aa-hero__arrow { position: absolute; width: 92px; left: -64px; top: 330px; color: var(--aa-color-text-primary); transform: scaleX(-1) rotate(10deg); }
@container (max-width: 860px) { .aa-hero__arrow { display: none; } }
/* 2: mood plate (moss): lemon caps, then ami (paper keyline) below the title. ami never covers type and carries no props here. */
.aa-hero--plate { background: var(--aa-moss); color: var(--aa-paper); --aa-color-focus-ring: var(--aa-lemon); --aa-color-text-link: var(--aa-paper); }
.aa-hero--plate .aa-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 0; }
.aa-hero--plate .aa-kicker { color: var(--aa-paper); }
.aa-hero--plate .aa-hero__title { color: var(--aa-lemon); font-size: clamp(64px, 11vw, 168px); line-height: .84; margin-bottom: 0; position: relative; z-index: 0; }
.aa-hero--plate .aa-hero__subject { position: relative; z-index: 1; width: min(240px, 52%); margin-top: var(--aa-space-16); font-size: clamp(64px, 11vw, 168px); color: var(--aa-paper); }
.aa-hero--plate .aa-hero__subject svg { width: 100%; }
.aa-hero--plate .aa-hero__body { margin: var(--aa-space-24) auto var(--aa-space-32); text-align: center; color: var(--aa-paper); }
.aa-hero--plate .aa-hero__actions { justify-content: center; }
.aa-hero--plate .aa-btn--secondary { --aa-btn-bg: transparent; --aa-btn-fg: var(--aa-paper); --aa-btn-border: var(--aa-paper); }
.aa-hero--plate .aa-btn--secondary:hover { --aa-btn-bg: rgb(251 248 239 / .12); }

/* 3: Ask Ayce Friday (lemon ground, Friday Q&A series only) */
.aa-hero--friday { background: var(--aa-lemon); color: var(--aa-charcoal); --aa-color-text-primary: var(--aa-charcoal); --aa-color-text-secondary: var(--aa-charcoal); --aa-color-focus-ring: var(--aa-charcoal); --aa-color-text-link: var(--aa-charcoal); --aa-color-border-strong: var(--aa-charcoal); --aa-color-bg-surface: var(--aa-white); }
.aa-hero--friday .aa-btn--primary { --aa-btn-bg: var(--aa-charcoal); --aa-btn-fg: var(--aa-lemon); }
.aa-hero--friday .aa-btn--primary:focus-visible { outline-color: var(--aa-charcoal); }
.aa-hero--friday .aa-hero__answer {
  background: var(--aa-paper); color: var(--aa-charcoal);
  border: 2px solid var(--aa-charcoal); border-radius: var(--aa-radius-note);
  padding: var(--aa-space-24); position: relative;
}
.aa-hero--friday .aa-hero__answer .aa-note { font-size: 26px; }
.aa-hero--friday .aa-reaction { position: absolute; right: -18px; top: -48px; }

/* ---------- Section header ---------- */
.aa-section-header { max-width: 760px; margin-bottom: var(--aa-space-48); position: relative; }
.aa-section-header .aa-h2 { margin-bottom: var(--aa-space-16); }
.aa-section-header--center { margin-inline: auto; text-align: center; }
.aa-section-header__doodle { position: absolute; width: 64px; right: -72px; top: 8px; color: var(--aa-color-text-primary); }
@media (max-width: 1100px) { .aa-section-header__doodle { display: none; } }

/* ---------- Note card (base for the hand-drawn cards) ---------- */
.aa-note-card {
  position: relative;
  background: var(--aa-color-bg-surface);
  color: var(--aa-color-text-primary);
  border: 2px solid var(--aa-color-border-strong);
  border-radius: var(--aa-radius-note);
  padding: var(--aa-space-24);
}
.aa-note-card .aa-kicker { font-size: 24px; margin-bottom: 4px; }
.aa-note-card .aa-h3 { margin-bottom: var(--aa-space-12); }
.aa-note-card p + .aa-path { margin-top: var(--aa-space-16); }

/* ---------- Sticky note ---------- */
.aa-sticky {
  --aa-tilt: -1.2deg;
  position: relative;
  background: var(--aa-sticky-bg, var(--aa-white));
  color: var(--aa-charcoal);
  padding: var(--aa-space-24) var(--aa-space-24) var(--aa-space-32);
  border-radius: var(--aa-radius-sticky) var(--aa-radius-sticky) 4px 14px / var(--aa-radius-sticky) var(--aa-radius-sticky) 4px 10px;
  box-shadow: var(--aa-shadow-sticky);
  transform: rotate(var(--aa-tilt));
  font-family: var(--aa-font-notes);
  font-size: 26px;
  line-height: 1.12;
}
.aa-sticky__label { display: block; font-family: var(--aa-font-display); text-transform: uppercase; font-size: 22px; letter-spacing: .02em; margin-bottom: 8px; }
.aa-sticky { border: 1.5px solid rgb(43 42 40 / .14); }
.aa-sticky--tried-it { --aa-sticky-bg: var(--aa-color-series-tried-it); }
.aa-sticky--hyperfixation { --aa-sticky-bg: var(--aa-color-series-hyperfixation); }
.aa-sticky--side-hustle { --aa-sticky-bg: var(--aa-color-series-side-hustle); }
.aa-sticky--beauty-of-boring { --aa-sticky-bg: var(--aa-color-series-beauty-of-boring); }
.aa-sticky .aa-series-name { margin-bottom: 10px; }
.aa-sticky--tilt-r { --aa-tilt: 1.5deg; }

/* ---------- Series card (four series: the beauty of boring, hobby hyperfixation, hobby to side hustle, tried it) ---------- */
.aa-series-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--aa-space-12);
  padding: var(--aa-space-24);
  background: var(--aa-series-bg, var(--aa-white));
  color: var(--aa-charcoal);
  border: 2px solid var(--aa-charcoal);
  border-radius: var(--aa-radius-note);
  text-decoration: none;
  transition: transform var(--aa-duration-base) var(--aa-ease-out), box-shadow var(--aa-duration-base) var(--aa-ease-out);
  --aa-color-focus-ring: var(--aa-charcoal);
}
[data-theme="dark"] .aa-series-card { --aa-color-focus-ring: var(--aa-lemon); }
.aa-series-card--tried-it { --aa-series-bg: var(--aa-color-series-tried-it); }
.aa-series-card--hyperfixation { --aa-series-bg: var(--aa-color-series-hyperfixation); }
.aa-series-card--side-hustle { --aa-series-bg: var(--aa-color-series-side-hustle); }
.aa-series-card--beauty-of-boring { --aa-series-bg: var(--aa-color-series-beauty-of-boring); }
.aa-series-card__ami { width: 88px; height: auto; margin-bottom: 4px; }
.aa-series-card__title { font-family: var(--aa-font-display); text-transform: uppercase; font-size: 30px; line-height: .95; }
.aa-series-card__line { font-family: var(--aa-font-notes); font-size: 22px; line-height: 1.1; }
.aa-series-card ul { display: grid; gap: 6px; font-size: 16px; line-height: 1.4; }
.aa-series-card li { padding-left: 20px; position: relative; }
.aa-series-card li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50% 40% 55% 45%; }
.aa-series-card__more { margin-top: auto; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; padding-top: 8px; }
a.aa-series-card:hover, .aa-series-card.is-hover { transform: translate(-2px, -3px) rotate(-.4deg); box-shadow: 5px 6px 0 0 var(--aa-charcoal); }

/* ---------- Tag + chip ---------- */
.aa-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--aa-tag-bg, var(--aa-color-bg-page));
  color: var(--aa-charcoal);
  border: 1.5px solid var(--aa-charcoal);
  border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
  text-decoration: none; white-space: nowrap;
}
.aa-tag:not([class*="aa-tag--"]) { color: var(--aa-color-text-primary); border-color: var(--aa-color-border-strong); }
.aa-tag--tried-it { --aa-tag-bg: var(--aa-color-series-tried-it); }
.aa-tag--hyperfixation { --aa-tag-bg: var(--aa-color-series-hyperfixation); }
.aa-tag--side-hustle { --aa-tag-bg: var(--aa-color-series-side-hustle); }
.aa-tag--beauty-of-boring { --aa-tag-bg: var(--aa-color-series-beauty-of-boring); }
.aa-tag--lemon { --aa-tag-bg: var(--aa-lemon); }
.aa-tag--ink { --aa-tag-bg: var(--aa-charcoal); color: var(--aa-paper); }
[data-theme="dark"] .aa-tag--ink { border-color: var(--aa-paper); }
.aa-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px;
  background: var(--aa-color-bg-surface); color: var(--aa-color-text-primary);
  border: 2px solid var(--aa-color-border-strong); border-radius: 999px;
  font-size: 15px; font-weight: 600;
}
.aa-chip:hover, .aa-chip.is-hover { background: var(--aa-color-state-hover-wash); }
.aa-chip[aria-pressed="true"] { background: var(--aa-color-bg-inverse); color: var(--aa-color-text-inverse); border-color: var(--aa-color-border-strong); }
.aa-chip[aria-pressed="true"]::before { content: ""; width: 12px; height: 7px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-48deg) translate(1px, -2px); }
.aa-chip:disabled, .aa-chip.is-disabled { border-style: dashed; color: var(--aa-color-state-disabled-text); border-color: var(--aa-color-state-disabled-text); background: transparent; cursor: not-allowed; }

/* ---------- Post card ---------- */
.aa-post-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--aa-color-bg-surface); color: var(--aa-color-text-primary);
  border: 2px solid var(--aa-color-border-strong); border-radius: var(--aa-radius-note);
  overflow: hidden;
  transition: transform var(--aa-duration-base) var(--aa-ease-out), box-shadow var(--aa-duration-base) var(--aa-ease-out);
}
.aa-post-card__media { aspect-ratio: 4 / 3; display: grid; place-items: center; border-bottom: 2px solid var(--aa-color-border-strong); color: var(--aa-charcoal); }
.aa-post-card__media svg { width: 52%; }
.aa-post-card__body { display: flex; flex-direction: column; gap: 10px; padding: var(--aa-space-24); flex: 1; }
.aa-post-card__title { font-family: var(--aa-font-display); text-transform: uppercase; font-size: 30px; line-height: .95; }
.aa-post-card__title a { color: inherit; text-decoration: none; }
.aa-post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.aa-post-card__title a:focus-visible { outline: none; }
.aa-post-card:has(a:focus-visible), .aa-post-card.is-focus { outline: 3px solid var(--aa-color-focus-ring); outline-offset: 4px; }
.aa-post-card__meta { margin-top: auto; display: flex; gap: 12px; font-size: var(--aa-fs-small); color: var(--aa-color-text-secondary); }
.aa-post-card:hover, .aa-post-card.is-hover { transform: translate(-2px, -3px); box-shadow: 5px 6px 0 0 var(--aa-charcoal); }

/* ---------- Video card ---------- */
.aa-video-card { position: relative; display: flex; flex-direction: column; gap: 12px; color: var(--aa-color-text-primary); }
.aa-video-card__frame {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--aa-moss); color: var(--aa-paper);
  border: 2px solid var(--aa-color-border-strong); border-radius: var(--aa-radius-note);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 22% 16px 0; text-align: center;
}
.aa-video-card__frame .aa-kicker { font-size: 22px; color: var(--aa-paper); margin-bottom: 2px; }
.aa-video-card__cover { font-family: var(--aa-font-display); text-transform: uppercase; color: var(--aa-lemon); font-size: 44px; line-height: .86; }
.aa-video-card__frame svg.aa-illo { width: 70%; margin-top: -10px; color: var(--aa-paper); }
.aa-video-card__play {
  position: absolute; left: 50%; bottom: 18%; translate: -50% 0;
  width: 64px; height: 64px; border-radius: 52% 48% 50% 50%;
  background: var(--aa-lemon); border: 2px solid var(--aa-charcoal); color: var(--aa-charcoal);
  display: grid; place-items: center;
}
.aa-video-card__play svg { width: 24px; margin-left: 4px; fill: currentColor; }
.aa-video-card__time { position: absolute; right: 12px; top: 12px; background: var(--aa-charcoal); color: var(--aa-paper); font-family: var(--aa-font-mono); font-size: 13px; padding: 2px 8px; border-radius: 6px; }
.aa-video-card__title { font-weight: 700; font-size: 17px; line-height: 1.35; }
.aa-video-card__title a { color: inherit; text-decoration: none; }
.aa-video-card__title a::after { content: ""; position: absolute; inset: 0; }
.aa-video-card__title a:focus-visible { outline: none; }
.aa-video-card.is-focus { outline: none; }
.aa-video-card:has(a:focus-visible) .aa-video-card__frame, .aa-video-card.is-focus .aa-video-card__frame { outline: 3px solid var(--aa-color-focus-ring); outline-offset: 4px; }
.aa-video-card:hover .aa-video-card__play, .aa-video-card.is-hover .aa-video-card__play { transform: scale(1.08) rotate(-4deg); }
.aa-video-card__play { transition: transform var(--aa-duration-base) var(--aa-ease-out); }

/* ---------- Freebie card ---------- */
.aa-freebie-card { display: grid; grid-template-columns: 150px 1fr; gap: var(--aa-space-24); align-items: center; }
.aa-freebie-card__sheet {
  position: relative; aspect-ratio: 3 / 4; background: var(--aa-white); color: var(--aa-charcoal);
  border: 2px solid var(--aa-charcoal); border-radius: 4px 6px 3px 5px; padding: 14px 12px;
  transform: rotate(-2deg);
  font-family: var(--aa-font-notes); font-size: 15px; line-height: 1.25;
}
.aa-freebie-card__sheet b { display: block; font-family: var(--aa-font-display); font-weight: 400; font-size: 18px; line-height: .95; margin-bottom: 8px; }
.aa-freebie-card__sheet i { display: block; font-style: normal; padding-left: 18px; position: relative; margin-bottom: 4px; }
.aa-freebie-card__sheet i::before { content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 2px 3px 2px 3px; }
.aa-freebie-card .aa-h3 { margin: 6px 0 10px; }
.aa-freebie-card p { margin-bottom: var(--aa-space-16); }
@container (max-width: 420px) { .aa-freebie-card { grid-template-columns: 1fr; } .aa-freebie-card__sheet { width: 150px; } }
.aa-freebie-wrap { container-type: inline-size; }

/* ---------- Quote / testimonial ---------- */
.aa-quote { position: relative; padding: var(--aa-space-48) var(--aa-space-32) var(--aa-space-24); margin-top: 24px; }
.aa-quote__mark { position: absolute; left: 20px; top: -30px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50% 46% 52% 48%; background: var(--aa-charcoal); border: 2px solid var(--aa-charcoal); color: var(--aa-paper); font-family: var(--aa-font-display); font-size: 64px; line-height: 1; padding-top: 22px; overflow: hidden; }
.aa-quote blockquote p { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.45; font-weight: 600; }
.aa-quote figcaption { margin-top: var(--aa-space-16); font-family: var(--aa-font-notes); font-size: 24px; line-height: 1.1; }
.aa-quote figcaption span { display: block; font-family: var(--aa-font-body); font-size: var(--aa-fs-small); color: var(--aa-color-text-secondary); margin-top: 4px; }

/* ---------- FAQ accordion (native details/summary) ---------- */
.aa-faq { border-top: 2px solid var(--aa-color-border-strong); }
.aa-faq__item { border-bottom: 2px solid var(--aa-color-border-strong); }
.aa-faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  min-height: 64px; padding: 14px 4px;
  font-weight: 700; font-size: 19px; line-height: 1.35;
  border-radius: 6px;
}
.aa-faq__item summary::-webkit-details-marker { display: none; }
.aa-faq__item summary:hover, .aa-faq__item summary.is-hover { background: var(--aa-color-state-hover-wash); }
.aa-faq__icon { position: relative; width: 36px; height: 36px; flex-shrink: 0; border: 2px solid var(--aa-color-border-strong); border-radius: 48% 52% 46% 54%; }
.aa-faq__icon::before, .aa-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; background: currentColor; border-radius: 2px; translate: -50% -50%; transition: transform var(--aa-duration-base) var(--aa-ease-out); }
.aa-faq__icon::after { transform: rotate(90deg); }
.aa-faq__item[open] .aa-faq__icon { background: var(--aa-color-bg-inverse); color: var(--aa-color-text-inverse); }
.aa-faq__item[open] .aa-faq__icon::after { transform: rotate(0deg); }
.aa-faq__answer { padding: 0 56px 24px 4px; max-width: 70ch; }
.aa-faq__answer > * + * { margin-top: 12px; }

/* ---------- Form fields ---------- */
.aa-field { display: grid; gap: 6px; }
.aa-label { font-weight: 700; font-size: 16px; line-height: 1.3; }
.aa-label .aa-optional { font-weight: 400; color: var(--aa-color-text-secondary); }
.aa-hint { font-size: var(--aa-fs-small); color: var(--aa-color-text-secondary); line-height: 1.4; }
.aa-input, .aa-textarea, .aa-select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--aa-color-bg-surface);
  color: var(--aa-color-text-primary);
  border: 2px solid var(--aa-color-border-strong);
  border-radius: 10px 12px 9px 13px;
  font-size: 17px; line-height: 1.4;
  transition: box-shadow var(--aa-duration-fast) linear;
}
[data-theme="dark"] .aa-input, [data-theme="dark"] .aa-textarea, [data-theme="dark"] .aa-select { background: rgb(251 248 239 / .06); }
.aa-input::placeholder, .aa-textarea::placeholder { color: var(--aa-color-text-secondary); opacity: 1; }
.aa-textarea { min-height: 120px; resize: vertical; }
.aa-input:hover, .aa-textarea:hover, .aa-select:hover, .aa-input.is-hover { box-shadow: 0 0 0 4px var(--aa-color-state-hover-wash); }
.aa-input:focus-visible, .aa-textarea:focus-visible, .aa-select:focus-visible,
.aa-input:focus, .aa-textarea:focus, .aa-select:focus, .aa-input.is-focus, .aa-textarea.is-focus, .aa-select.is-focus {
  outline: 3px solid var(--aa-color-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--aa-color-focus-halo);
}
.aa-input:disabled, .aa-textarea:disabled, .aa-select:disabled { border-style: dashed; border-color: var(--aa-color-state-disabled-text); color: var(--aa-color-state-disabled-text); background: transparent; cursor: not-allowed; box-shadow: none; }
.aa-select-wrap { position: relative; }
.aa-select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.aa-select-wrap .aa-select-wrap__chev { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; pointer-events: none; }
.aa-field.is-invalid .aa-input, .aa-field.is-invalid .aa-textarea, .aa-input[aria-invalid="true"] { border-width: 3px; border-style: solid; border-color: var(--aa-color-state-error); }
.aa-message {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 12px; border-radius: 8px 10px 7px 11px;
  font-size: var(--aa-fs-small); line-height: 1.4; font-weight: 600; color: var(--aa-charcoal);
}
.aa-message svg { width: 20px; height: 20px; margin-top: 1px; }
/* error and success have their own tones (rule 4): never a series tint */
.aa-message--error { background: var(--aa-color-state-error-bg); color: var(--aa-color-state-error-text); border: 1.5px solid var(--aa-error); }
.aa-message--error svg { color: var(--aa-error); }
.aa-message--success { background: var(--aa-color-state-success-bg); color: var(--aa-color-state-success-text); border: 1.5px solid var(--aa-success); }
.aa-message--success svg { color: var(--aa-success); }
.aa-message[hidden] { display: none; }

/* checkbox + radio */
.aa-check, .aa-radio { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 8px 0; cursor: pointer; line-height: 1.4; }
.aa-check input, .aa-radio input {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 26px; height: 26px; margin-top: -1px;
  background: var(--aa-color-bg-surface);
  border: 2px solid var(--aa-color-border-strong);
  display: grid; place-items: center; cursor: pointer;
}
.aa-check input { border-radius: 5px 7px 4px 8px; }
.aa-radio input { border-radius: 50% 46% 52% 48%; }
.aa-check input:checked { background: var(--aa-color-bg-inverse); border-color: var(--aa-color-border-strong); }
.aa-check input:checked::after { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--aa-color-text-inverse); border-bottom: 3px solid var(--aa-color-text-inverse); transform: rotate(-48deg) translate(1px, -1px); }
.aa-radio input:checked { border-color: var(--aa-color-border-strong); }
.aa-radio input:checked::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--aa-color-text-primary); }
.aa-check input:focus-visible, .aa-radio input:focus-visible, .aa-check input.is-focus, .aa-radio input.is-focus { outline: 3px solid var(--aa-color-focus-ring); outline-offset: 3px; }
.aa-check:hover input, .aa-radio:hover input, .aa-check.is-hover input, .aa-radio.is-hover input { box-shadow: 0 0 0 4px var(--aa-color-state-hover-wash); }
.aa-check input:disabled, .aa-radio input:disabled { border-style: dashed; border-color: var(--aa-color-state-disabled-text); background: transparent; cursor: not-allowed; }
.aa-check:has(input:disabled), .aa-radio:has(input:disabled) { color: var(--aa-color-state-disabled-text); cursor: not-allowed; }
.aa-fieldset { border: 0; padding: 0; margin: 0; }
.aa-fieldset legend { font-weight: 700; margin-bottom: 4px; padding: 0; }

/* ---------- Newsletter signup ---------- */
.aa-newsletter {
  position: relative;
  background: var(--aa-color-bg-surface);
  border: 2px solid var(--aa-color-border-strong);
  border-radius: var(--aa-radius-note);
  padding: var(--aa-space-32);
  container-type: inline-size;
}
.aa-newsletter .aa-h3 { margin-bottom: 8px; }
.aa-newsletter__row { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--aa-space-16); }
.aa-newsletter__row .aa-field { flex: 1; }
.aa-newsletter__row .aa-btn { margin-top: 28px; }
.aa-newsletter .aa-message { margin-top: 10px; }
.aa-newsletter__fine { margin-top: 12px; font-size: var(--aa-fs-small); color: var(--aa-color-text-secondary); }
@container (max-width: 520px) { .aa-newsletter__row { flex-direction: column; align-items: stretch; } .aa-newsletter__row .aa-btn { margin-top: 0; } }

/* ---------- Breadcrumbs ---------- */
.aa-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: var(--aa-fs-small); }
.aa-breadcrumbs li { display: inline-flex; align-items: center; }
.aa-breadcrumbs li + li::before { content: "/"; font-family: var(--aa-font-notes); font-size: 22px; margin: 0 6px; color: var(--aa-color-text-secondary); transform: rotate(8deg); }
.aa-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--aa-color-text-primary); font-weight: 600; border-radius: 6px; }
.aa-breadcrumbs [aria-current="page"] { font-weight: 700; padding: 0 4px; }

/* ---------- Pagination ---------- */
.aa-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aa-pagination a, .aa-pagination span[aria-current], .aa-pagination .aa-pagination__gap {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 2px solid var(--aa-color-border-strong); border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
  color: var(--aa-color-text-primary); text-decoration: none; font-weight: 700;
}
.aa-pagination a:hover, .aa-pagination a.is-hover { background: var(--aa-color-state-hover-wash); }
.aa-pagination span[aria-current="page"] { background: var(--aa-color-bg-inverse); color: var(--aa-color-text-inverse); }
.aa-pagination .aa-pagination__gap { border-color: transparent; }
.aa-pagination .aa-pagination__step { border-radius: var(--aa-radius-button); gap: 6px; display: inline-flex; align-items: center; }
.aa-pagination [aria-disabled="true"] { border-style: dashed; color: var(--aa-color-state-disabled-text); border-color: var(--aa-color-state-disabled-text); pointer-events: none; }

/* ---------- Callout ("heads up") ---------- */
.aa-callout {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: var(--aa-space-16) var(--aa-space-24) var(--aa-space-24);
  background: var(--aa-white); color: var(--aa-charcoal);
  border: 2px solid var(--aa-charcoal); border-left: 8px solid var(--aa-callout-bar, var(--aa-charcoal));
  border-radius: 6px 18px 12px 8px;
  --aa-color-text-link: var(--aa-charcoal); --aa-color-focus-ring: var(--aa-charcoal);
}
.aa-callout__mark { width: 34px; margin-top: 8px; }
.aa-callout .aa-kicker { font-size: 26px; margin-bottom: 2px; }
.aa-callout p { font-size: 16px; line-height: 1.5; }
/* meaning lives in the kicker text and the bar tone, never in a series tint */
.aa-callout--tip { --aa-callout-bar: var(--aa-success); }
.aa-callout--warn { --aa-callout-bar: var(--aa-error); }

/* ---------- Step list ---------- */
.aa-steps { display: grid; gap: var(--aa-space-24); counter-reset: aa-step; }
.aa-steps > li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; counter-increment: aa-step; }
.aa-steps > li::before {
  content: counter(aa-step);
  display: grid; place-items: center; width: 52px; height: 52px;
  background: var(--aa-color-bg-surface); color: var(--aa-color-text-primary); border: 2px solid var(--aa-color-border-strong);
  border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%;
  font-family: var(--aa-font-display); font-size: 32px; line-height: 1; padding-top: 4px;
}
.aa-steps__title { font-family: var(--aa-font-notes); font-size: 26px; line-height: 1.15; margin-bottom: 6px; padding-top: 8px; }
.aa-steps .aa-path { margin-top: 10px; }

/* ---------- Checklist ---------- */
.aa-checklist { padding: var(--aa-space-24) var(--aa-space-32); }
.aa-checklist .aa-h3 { margin-bottom: var(--aa-space-12); }
.aa-checklist ul { display: grid; gap: 0; }
.aa-checklist .aa-check { font-family: var(--aa-font-notes); font-size: 24px; line-height: 1.15; align-items: center; }
.aa-checklist .aa-check input { margin-top: 0; }
.aa-checklist .aa-check:has(input:checked) span { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--aa-color-text-secondary); }
.aa-checklist__progress { margin-top: 12px; font-size: var(--aa-fs-small); color: var(--aa-color-text-secondary); }

/* ---------- Pricing card ---------- */
.aa-pricing { display: flex; flex-direction: column; gap: var(--aa-space-16); }
.aa-pricing__price { font-family: var(--aa-font-display); font-size: clamp(48px, 4.4vw, 64px); line-height: .9; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.aa-pricing__price small { font-family: var(--aa-font-body); font-size: 16px; color: var(--aa-color-text-secondary); white-space: nowrap; }
.aa-pricing ul { display: grid; gap: 8px; font-size: 16px; line-height: 1.4; }
.aa-pricing li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.aa-pricing li svg { width: 22px; height: 22px; margin-top: 1px; }
.aa-pricing .aa-btn { margin-top: auto; }
.aa-pricing--featured { border-width: 3px; }
.aa-pricing__flag { position: absolute; top: -16px; right: 20px; transform: rotate(3deg); }

/* ---------- Stat ---------- */
.aa-stat { position: relative; display: grid; gap: 4px; padding: 8px; }
.aa-stat__value { position: relative; z-index: 0; display: inline-block; justify-self: start; font-family: var(--aa-font-display); font-size: clamp(56px, 6vw, 88px); line-height: .9; padding: 10px 16px 0; }
.aa-stat__ring { position: absolute; inset: -14px -24px -10px -20px; width: auto; color: var(--aa-color-text-primary); }
.aa-stat__ring svg { width: 100%; height: 100%; }
.aa-stat__label { font-family: var(--aa-font-notes); font-size: 24px; line-height: 1.15; margin-top: 8px; }
.aa-stat__source { font-size: var(--aa-fs-small); color: var(--aa-color-text-secondary); }

/* ---------- Link-in-bio button ---------- */
.aa-linkbio { display: grid; gap: 14px; max-width: 420px; }
.aa-linkbio__btn {
  display: grid; grid-template-columns: 40px 1fr 24px; gap: 14px; align-items: center;
  min-height: 64px; padding: 10px 16px;
  background: var(--aa-color-bg-surface); color: var(--aa-color-text-primary);
  border: 2px solid var(--aa-color-border-strong); border-radius: var(--aa-radius-button);
  text-decoration: none; font-weight: 700; font-size: 17px; line-height: 1.25;
  transition: transform var(--aa-duration-fast) var(--aa-ease-out), box-shadow var(--aa-duration-fast) var(--aa-ease-out);
}
.aa-linkbio__btn small { display: block; font-weight: 400; font-size: 14px; color: var(--aa-color-text-secondary); }
.aa-linkbio__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50% 46% 52% 48%; background: var(--aa-color-state-hover-wash); color: var(--aa-color-text-primary); border: 1.5px solid var(--aa-color-border-strong); }
.aa-linkbio__icon svg { width: 22px; height: 22px; }
.aa-linkbio__btn:hover, .aa-linkbio__btn.is-hover { transform: translate(-2px, -2px); box-shadow: var(--aa-shadow-offset); }
.aa-linkbio__btn--featured { background: var(--aa-lemon); color: var(--aa-charcoal); border-color: var(--aa-charcoal); }
.aa-linkbio__btn--featured small { color: var(--aa-charcoal); }
.aa-linkbio__btn--featured .aa-linkbio__icon { background: var(--aa-paper); color: var(--aa-charcoal); border-color: var(--aa-charcoal); }

/* ---------- Social icon row ---------- */
.aa-social { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-social a {
  display: grid; place-items: center; width: 48px; height: 48px;
  color: inherit; border: 2px solid currentColor; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  transition: transform var(--aa-duration-fast) var(--aa-ease-out), background-color var(--aa-duration-fast) linear;
}
/* [link] placeholders (href="#link-*"): Ayce fills these in site_links.LINKS. Until then they keep the live-link
   look, never jump the page (ask-ayce.js) and carry aria-disabled + title="coming soon". */
a[href^="#link-"][aria-disabled="true"] { cursor: default; }
.aa-social a:hover, .aa-social a.is-hover { background: var(--aa-lemon); color: var(--aa-charcoal); border-color: var(--aa-charcoal); transform: rotate(-6deg); }
.aa-social .aa-icon { width: 24px; height: 24px; }

/* ---------- ami reaction badge (raster master, never recolored, redrawn or cropped) ---------- */
.aa-reaction { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.aa-reaction__face {
  width: var(--aa-reaction-size, 96px); height: var(--aa-reaction-size, 96px);
  border-radius: 50%; background: var(--aa-paper); border: 2px solid var(--aa-charcoal);
  display: grid; place-items: center; overflow: hidden;
}
.aa-reaction__face img { width: 86%; height: auto; }
.aa-reaction__face .aa-ami--keyline { display: none !important; }
.aa-reaction__face .aa-ami--plain { display: block !important; }
.aa-reaction__label {
  font-family: var(--aa-font-notes); font-size: 20px; line-height: 1;
  background: var(--aa-color-bg-page); color: var(--aa-color-text-primary);
  border: 1.5px solid var(--aa-color-border-strong); border-radius: 999px; padding: 4px 12px 5px; transform: rotate(-2deg);
}
.aa-reaction--sm { --aa-reaction-size: 64px; }
.aa-reaction--lg { --aa-reaction-size: 140px; }

/* ---------- Ask-mark divider ---------- */
.aa-divider { display: flex; align-items: center; gap: 20px; color: var(--aa-color-text-primary); margin-block: var(--aa-space-48); }
.aa-divider__line { flex: 1; height: 14px; }
.aa-divider__line svg { width: 100%; height: 14px; }
.aa-divider__mark { width: 36px; }
.aa-divider__mark .aa-logo-dark { display: none; }
[data-theme="dark"] .aa-divider__mark .aa-logo-light { display: none; }
[data-theme="dark"] .aa-divider__mark .aa-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aa-divider__mark .aa-logo-light { display: none; }
  :root:not([data-theme="light"]) .aa-divider__mark .aa-logo-dark { display: block; }
}

/* ---------- Doodle arrow callout ---------- */
.aa-doodle-callout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 24px 8px; }
.aa-doodle-callout__note { font-family: var(--aa-font-notes); font-size: 28px; line-height: 1.12; max-width: 18ch; grid-column: 1; }
.aa-doodle-callout__arrow { width: 120px; color: var(--aa-color-text-primary); grid-column: 1; justify-self: end; margin-top: -10px; transform: rotate(8deg); }
.aa-doodle-callout__target { position: relative; grid-column: 2; grid-row: 1 / span 2; display: inline-flex; padding: 22px 26px; }
.aa-doodle-callout__ring { position: absolute; inset: 0; color: var(--aa-color-text-primary); }
.aa-doodle-callout__ring svg { width: 100%; height: 100%; }
@media (max-width: 767px) {
  .aa-doodle-callout { grid-template-columns: 1fr; }
  .aa-doodle-callout__note { max-width: none; }
  .aa-doodle-callout__arrow { width: 72px; justify-self: center; transform: rotate(70deg); margin: 0; }
  .aa-doodle-callout__target { grid-column: 1; grid-row: auto; justify-self: center; }
}
/* settings row used as the thing the arrow points at */
.aa-setting { display: inline-flex; align-items: center; gap: 16px; padding: 12px 16px; background: var(--aa-white); color: var(--aa-charcoal); border: 1.5px solid var(--aa-charcoal); border-radius: 12px; font-weight: 600; }
.aa-toggle { width: 52px; height: 30px; border-radius: 999px; background: var(--aa-moss); border: 2px solid var(--aa-charcoal); position: relative; }
.aa-toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--aa-white); border: 1.5px solid var(--aa-charcoal); }

/* ---------- Illustration (pencil line + lemon fill, off-register) ---------- */
.aa-illo { color: var(--aa-charcoal); }
.aa-illo .fill { fill: var(--aa-lemon); }
.aa-illo .line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  .aa-swipe.is-drawn::before { animation: aa-swipe-draw var(--aa-duration-draw) var(--aa-ease-out) both; }
  @keyframes aa-swipe-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}