/* AiM site layout — built on the Ember Ledger design system.
   Load after design-system/tokens.css and design-system/components/bundle.css.
   Layout only: colours, sizes and radii come from tokens. No gradients or divider lines.

   DEPTH (a site-level extension; Ember Ledger itself is flat, shadow-none).
   Three soft, graphite-tinted layers and nothing else. To return to the flat system, set all three to `none`.
     --lift-1  a card resting one layer above its band
     --lift-2  something floating over cards: hero cluster, form, sticky header, tooltips
     --sink    a recessed well or field
   MOTION is a second site-level extension, at the end of this file. It is all behind prefers-reduced-motion: no-preference. */
:root {
  --lift-1: 0 1px 2px rgb(32 32 32 / 0.05), 0 6px 16px -8px rgb(32 32 32 / 0.14);
  --lift-2: 0 1px 2px rgb(32 32 32 / 0.06), 0 16px 32px -12px rgb(32 32 32 / 0.24);
  --sink: inset 0 1px 3px rgb(32 32 32 / 0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--color-canvas-white); color: var(--color-graphite); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body { font-family: var(--font-inter); font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--color-graphite); background: var(--color-canvas-white); overflow-x: hidden; }

::selection { background: var(--color-graphite); color: var(--color-canvas-white); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 2px; }

.container { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--spacing-20); }
@media (max-width: 480px) { .container { padding: 0 var(--spacing-16); } }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-canvas-white); padding: var(--spacing-16) 0; transition: box-shadow .2s ease; }
.site-header.is-stuck { box-shadow: var(--lift-2); }
@media (max-width: 900px) { .site-header .el-nav__pill { display: none; } }

/* ---- Bands: sections alternate white and ash, separated by whitespace only ---- */
.band { padding: var(--section-gap) 0; }
.band--ash { background: var(--color-ash); }
@media (max-width: 600px) { .band { padding: 56px 0; } }

.section-intro { max-width: 840px; margin-bottom: var(--spacing-36); }
.section-title { font-family: var(--font-polysans); font-size: clamp(28px, 4.2vw, 40px); line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
.section-intro .copy, .section-title + .copy { margin-top: var(--spacing-16); }

.copy { font-size: 16px; line-height: 1.5; color: var(--color-steel); }
.copy strong { color: var(--color-graphite); font-weight: 500; }
.copy + .copy { margin-top: var(--spacing-16); }
.caption { font-size: 14px; line-height: 1.43; color: var(--color-steel); }
.overline { font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-steel); }

.btn-row { display: flex; align-items: center; gap: var(--spacing-12); flex-wrap: wrap; }
.btn-row--center { justify-content: center; }
.btn-block { width: 100%; justify-content: center; padding: 14px var(--spacing-20); }

/* ---- Cards ---- */
/* Depth: cards rise one layer above their band; wells sink into the card they sit on */
.el-data, .el-feature, .score-bar-wrap, .faq-item, .step-visual, .code-snip, .mock-answer { box-shadow: var(--lift-1); }
.el-feature--compact { padding: var(--card-padding); }
.el-feature--compact .el-feature__title { margin-bottom: var(--spacing-12); }
@media (max-width: 720px) { .el-feature { padding: var(--spacing-40) var(--spacing-20); } }

.card-title { font-family: var(--font-polysans); font-size: 18px; line-height: 1.25; font-weight: 400; letter-spacing: -0.02em; }
.card-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--spacing-16); font-size: 15px; line-height: 1.4; color: var(--color-steel); }
.card-list li { position: relative; padding-left: var(--spacing-20); }
.card-list li::before { content: ''; position: absolute; left: 4px; top: 0.6em; width: 4px; height: 4px; background: var(--color-graphite); }
.card-list strong { color: var(--color-graphite); font-weight: 500; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--element-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--element-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--element-gap); }
.span-all { grid-column: 1 / -1; }
@media (max-width: 1020px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .span-all { grid-column: auto; } }
@media (max-width: 600px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.stack > * + * { margin-top: var(--spacing-12); }
.card-stack { display: flex; flex-direction: column; gap: var(--spacing-12); height: 100%; }
.card-stack .push { margin-top: auto; }

/* ---- Hero ---- */
.hero { padding: var(--spacing-140) 0 var(--section-gap); }
@media (max-width: 720px) { .hero { padding: var(--spacing-60) 0 56px; } }
.hero .el-tag { margin-bottom: var(--spacing-20); }
.hero .caption { margin-top: var(--spacing-20); }

.cluster { position: relative; height: 340px; background: var(--color-ash); border-radius: var(--radius-2xl); box-shadow: var(--sink); }
.cluster .el-data { position: absolute; padding: 24px; box-shadow: var(--lift-2); }
.cluster .c1 { left: 28px; top: 28px; width: 290px; z-index: 1; }
.cluster .c2 { right: 28px; top: 80px; width: 230px; z-index: 2; }
.cluster .c3 { left: 112px; bottom: 52px; width: 250px; padding: 20px 24px; display: flex; align-items: center; gap: var(--spacing-16); z-index: 3; }
.cluster .el-data__title { margin-bottom: var(--spacing-12); }
.cluster svg { display: block; }
@media (max-width: 720px) {
  .cluster { height: auto; display: flex; flex-direction: column; gap: var(--spacing-12); padding: var(--spacing-20); }
  .cluster .el-data, .cluster .c1, .cluster .c2, .cluster .c3 { position: static; width: auto; animation: none; }
}

/* ---- Process (sticky split) ---- */
.process-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.process-aside { position: sticky; top: 120px; }
.process-nav { margin: var(--spacing-36) 0 var(--spacing-36); border-left: 1px solid var(--color-mist); }
.process-nav a { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 12px 0 12px var(--spacing-20); font-family: var(--font-polysans); font-size: 16px; letter-spacing: -0.02em; color: var(--color-steel); transition: color .15s ease; }
.process-nav a::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--color-graphite); transform: scaleY(0); transition: transform .2s ease; }
.process-nav .num { font-size: 12px; }
.process-nav a:hover, .process-nav li.active a { color: var(--color-graphite); }
.process-nav li.active a::before { transform: scaleY(1); }

.process-steps, .process-aside { min-width: 0; }
.process-steps { display: flex; flex-direction: column; gap: var(--element-gap); }
.process-step { display: flex; flex-direction: column; gap: var(--spacing-16); scroll-margin-top: 120px; }
.step-head { display: flex; align-items: baseline; gap: var(--spacing-16); }
.step-numeral { font-family: var(--font-polysans); font-size: clamp(48px, 6vw, 66px); line-height: 0.91; letter-spacing: -0.02em; color: var(--color-slate); transition: color .2s ease; }
.process-step.active .step-numeral { color: var(--color-graphite); }
.step-title { font-family: var(--font-polysans); font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
.step-body { color: var(--color-steel); }
.step-visual { background: var(--color-canvas-white); border-radius: var(--radius-lg); padding: var(--spacing-16); }
.visual-caption { font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-steel); margin-bottom: 10px; }
.deliverable { font-size: 14px; color: var(--color-steel); }
.deliverable strong { color: var(--color-graphite); font-weight: 500; }

.audit-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 44px); align-items: center; gap: 6px; font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--color-mist); }
.audit-row:last-child { border-bottom: none; }
.audit-row.head { font-size: 12px; font-weight: 600; color: var(--color-steel); padding-top: 0; }
.audit-row > span:not(:first-child) { text-align: center; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--color-steel); }
.dot.hit { background: var(--color-graphite); border-color: var(--color-graphite); }

.code-snip { background: var(--color-canvas-white); color: var(--color-graphite); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.65; border-radius: var(--radius-lg); padding: var(--spacing-16); overflow-x: auto; white-space: pre; }
.code-snip .k { color: var(--color-steel); }
.code-snip .s { color: var(--color-brass); }

.trend svg { display: block; width: 100%; height: auto; }
.trend polyline { vector-effect: non-scaling-stroke; }
.el-chart .end { fill: var(--color-ember-orange); }
.trend-axis { display: flex; justify-content: space-between; font-family: var(--font-polysans); font-size: 12px; color: var(--color-steel); margin-top: 6px; }

@media (max-width: 900px) {
  .process-split { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-36); }
  .process-aside { position: static; }
  .process-nav { display: none; }
}

/* ---- Pillars (bento) ---- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--element-gap); }
.bento > .span-4 { grid-column: span 4; }
.bento > .span-3 { grid-column: span 3; }
.bento > .span-2 { grid-column: span 2; }
.bento .el-data { display: flex; flex-direction: column; gap: var(--spacing-12); align-items: flex-start; }
.bento .el-data .copy { margin: 0; }
.bento-q { font-size: 14px; font-weight: 500; color: var(--color-steel); }
.bento-visual { margin-top: auto; width: 100%; }
.bento-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-36); align-items: center; }
.bento-split > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-12); }
.bento-split .el-feature__title { margin-bottom: 0; }
.bento-split .copy { margin: 0; }
@media (max-width: 960px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > .span-4, .bento > .span-3, .bento > .span-2 { grid-column: auto; }
  .bento-split { grid-template-columns: minmax(0, 1fr); }
}

.mock-answer { background: var(--color-canvas-white); border-radius: var(--radius-lg); padding: var(--spacing-16); display: flex; flex-direction: column; gap: var(--spacing-12); font-size: 13px; line-height: 1.5; }
.mock-answer .ask { align-self: flex-end; background: var(--color-graphite); color: var(--color-canvas-white); padding: 8px 12px; max-width: 90%; border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg); }
.mock-answer .reply { color: var(--color-steel); }
.el-tag.chip { padding: 2px 10px; font-size: 12px; }

.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-list li { box-shadow: var(--sink); display: flex; align-items: center; gap: var(--spacing-12); font-size: 14px; padding: 10px var(--spacing-12); border-radius: var(--radius-lg); background: var(--color-fog); color: var(--color-steel); border: 1px solid var(--color-fog); }
.rank-list li.you { background: var(--color-canvas-white); color: var(--color-graphite); border-color: var(--color-graphite); }
.rank-list .pos { font-family: var(--font-polysans); font-size: 12px; width: 18px; }

.fix-pair { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.fix-pair div { padding: 10px 14px; border-radius: var(--radius-lg); line-height: 1.45; }
.fix-pair .before { box-shadow: var(--sink); background: var(--color-fog); color: var(--color-steel); }
.fix-pair .before s { text-decoration-color: var(--color-ember-orange); text-decoration-thickness: 2px; }
.fix-pair .after { background: var(--color-canvas-white); border: 1px solid var(--color-graphite); color: var(--color-graphite); }
.fix-pair .tag { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 8px; }

/* ---- Grader teaser stats ---- */
.stat .el-data__value { margin-bottom: var(--spacing-8); }
.stat-label { font-size: 18px; line-height: 1.33; font-weight: 500; margin-bottom: 4px; }
.stat-desc { font-size: 14px; line-height: 1.45; color: var(--color-steel); }

/* ---- Example report (grader teaser) ---- */
.report-preview { margin-bottom: var(--element-gap); }
.report-preview .overline { margin-bottom: var(--spacing-16); }
.report-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--element-gap); }
.report-score { display: flex; align-items: center; gap: var(--spacing-20); }
.report-score .el-chart { flex-shrink: 0; }
.report-bars { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.bar-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; align-items: center; gap: var(--spacing-12); font-size: 13px; line-height: 1.2; padding: 6px 0; color: var(--color-steel); }
.bar-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.bar { display: block; height: 8px; background: var(--color-mist); }
.bar i { display: block; height: 100%; background: var(--color-graphite); }
@media (max-width: 720px) {
  .report-grid { grid-template-columns: minmax(0, 1fr); }
  .report-bars { padding: var(--spacing-20); }
  .bar-row { grid-template-columns: 104px minmax(0, 1fr) 40px; gap: 10px; }
}

/* ---- FAQ ---- */
.faq-accordion { max-width: 880px; margin: var(--spacing-40) auto 0; display: flex; flex-direction: column; gap: var(--spacing-12); }
.faq-item { background: var(--color-canvas-white); border-radius: var(--radius-2xl); overflow: hidden; }
.faq-trigger { width: 100%; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); text-align: left; font-family: var(--font-polysans); font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; }
.faq-trigger:hover { background: var(--color-fog); }
.faq-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-graphite); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; flex-shrink: 0; transition: transform .2s ease, border-color .2s ease; }
.faq-item.active { box-shadow: var(--lift-2); }
.faq-item { transition: box-shadow .2s ease; }
.faq-item.active .faq-arrow { transform: rotate(45deg); border-color: var(--color-ember-orange); }
.faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; padding: 0 28px; color: var(--color-steel); font-size: 15px; line-height: 1.5; }
.faq-item.active .faq-content { grid-template-rows: 1fr; padding-bottom: 24px; }
.faq-content-inner { overflow: hidden; }

/* ---- Final CTA ---- */
.cta-card { text-align: center; }
.cta-card .el-feature__body { margin: var(--spacing-16) auto var(--spacing-36); max-width: 56ch; line-height: 1.4; }
.cta-card .caption { margin-top: var(--spacing-16); }

/* ---- Footer ---- */
.site-footer { padding: var(--spacing-40) 0; }
.footer-flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--element-gap); }
.footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px var(--spacing-20); }
.footer-flex .small { font-size: 12px; line-height: 1.33; color: var(--color-steel); }

/* ---- Grader page ---- */
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-36); } }
.hero-grid .el-hero__lead { max-width: 52ch; line-height: 1.4; }
.hero-checklist { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--color-steel); }
.hero-checklist li { display: flex; align-items: center; gap: 10px; }
.check-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--color-graphite); color: var(--color-canvas-white); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.grader-card { box-shadow: var(--lift-2); }
.grader-title { font-family: var(--font-polysans); font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 6px; }
.grader-hint { font-size: 14px; color: var(--color-steel); margin-bottom: var(--spacing-20); }
.field { margin-bottom: 18px; }
.field-label-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.field-label { font-size: 15px; line-height: 1.33; font-weight: 500; }
.req { color: var(--color-brass); }
.field-input { box-shadow: var(--sink); width: 100%; font-family: inherit; font-size: 16px; color: var(--color-graphite); background: var(--color-canvas-white); border: 1px solid var(--color-slate); border-radius: var(--radius-sm); padding: 13px var(--spacing-16); transition: border-color .15s ease; }
.field-input::placeholder { color: var(--color-slate); }
.field-input:hover, .field-input:focus { border-color: var(--color-graphite); }
.field.has-error .field-input { border: 2px solid var(--color-ember-orange); padding: 12px 15px; }
.field-error, .form-error { font-size: 13px; line-height: 1.4; color: var(--color-graphite); padding-left: 8px; border-left: 2px solid var(--color-ember-orange); margin-top: 6px; }
.field-error { display: none; }
.field.has-error .field-error { display: block; }
.form-error { margin-top: var(--spacing-12); }
.form-error:empty { display: none; }

.tip { position: relative; display: inline-flex; }
.tip-btn { position: relative; }
.tip-btn::after { content: ''; position: absolute; inset: -12px; }
.tip-btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-graphite); font-family: var(--font-polysans); font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--color-graphite); }
.tip-btn:hover, .tip.open .tip-btn { background: var(--color-graphite); color: var(--color-canvas-white); }
.tip-panel { box-shadow: var(--lift-2); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); width: min(260px, 70vw); background: var(--color-graphite); color: var(--color-canvas-white); font-size: 13px; line-height: 1.45; padding: 10px var(--spacing-12); border-radius: var(--radius-sm); opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 5; pointer-events: none; }
.tip:hover .tip-panel, .tip.open .tip-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (max-width: 480px) {
  .tip-panel { left: auto; right: -40px; transform: translateY(4px); }
  .tip:hover .tip-panel, .tip.open .tip-panel { transform: translateY(0); }
}

.grader-submit { margin-top: 10px; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.powered-by { margin-top: var(--spacing-20); text-align: center; }
.powered-by .overline { margin-bottom: var(--spacing-12); }
.engine-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.disclaimer { font-size: 12px; line-height: 1.55; color: var(--color-steel); margin-top: var(--spacing-16); }

.grader-done { display: none; text-align: center; padding: 24px 0 8px; }
.grader-card.submitted form { display: none; }
.grader-card.submitted .grader-done { display: block; }
.done-ring { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--spacing-20); background: var(--color-graphite); color: var(--color-canvas-white); font-size: 26px; display: flex; align-items: center; justify-content: center; }
.done-title { font-family: var(--font-polysans); font-size: 32px; line-height: 1.19; letter-spacing: -0.02em; margin-bottom: 10px; }

.split-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 880px) { .split-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-36); } }
.chat-mock { display: flex; flex-direction: column; gap: 14px; }
.chat-bubble { font-size: 14px; line-height: 1.5; padding: 12px var(--spacing-16); max-width: 88%; }
.chat-bubble.user { align-self: flex-end; background: var(--color-graphite); color: var(--color-canvas-white); border-radius: var(--radius-xl) var(--radius-xl) 0 var(--radius-xl); }
.chat-bubble.ai { align-self: flex-start; background: var(--color-fog); color: var(--color-graphite); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 0; }
.chat-bubble.ai mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-ember-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.chat-meta { font-size: 12px; color: var(--color-steel); text-align: center; letter-spacing: 0.04em; }

.score-bar-wrap { background: var(--color-ash); border-radius: var(--radius-cards); padding: 28px; margin-bottom: var(--spacing-36); }
.score-bar-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--color-steel); margin-bottom: var(--spacing-12); }
.score-bar { display: flex; height: 14px; gap: 3px; }
.score-seg { height: 100%; }
.seg-1 { flex: 40; background: var(--color-graphite); }
.seg-2 { flex: 20; background: var(--color-steel); }
.seg-3 { flex: 20; background: var(--color-slate); }
.seg-4 { flex: 10; background: var(--color-brass); }
.seg-5 { flex: 10; background: var(--color-ember-orange); }
.score-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; color: var(--color-steel); }
.score-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; display: inline-block; }

.dim-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); margin-bottom: var(--spacing-12); }
.dim-num { font-family: var(--font-polysans); font-size: 40px; line-height: 1.2; letter-spacing: -0.02em; }
.dim-desc { color: var(--color-steel); }
.dim-note { margin-top: var(--spacing-16); font-size: 14px; color: var(--color-steel); line-height: 1.5; }
.step-number { font-family: var(--font-polysans); font-size: 40px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--spacing-12); }

/* ---- Depth: the hero cluster's cards drift at different speeds as the page scrolls ---- */
@keyframes drift { from { translate: 0 var(--drift); } to { translate: 0 calc(var(--drift) * -1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cluster .el-data { animation: drift linear both; animation-timeline: view(); }
    .cluster .c1 { --drift: 8px; }
    .cluster .c2 { --drift: 18px; }
    .cluster .c3 { --drift: 28px; }
  }
}

/* ---- Blog ---- */
.post-card { padding: 0; }
.post-card__link { display: flex; flex-direction: column; gap: var(--spacing-12); height: 100%; padding: var(--card-padding); }
.post-card__more { margin-top: auto; padding-top: var(--spacing-8); font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-ember-orange); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-card__link:hover .post-card__more { text-decoration-thickness: 2px; }
.post-card__link:focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 2px; }
.post-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-16); max-width: 640px; }
.post-related__title { margin-bottom: var(--spacing-40); }
.section-intro .overline + .section-title { margin-top: var(--spacing-12); }
@media (max-width: 480px) { .post-card__link, .post-empty { padding: var(--spacing-20); } }

.post-wrap { max-width: 720px; margin: 0 auto; }
.post-meta { margin-top: var(--spacing-40); }
.post-title { margin-top: var(--spacing-12); font-family: var(--font-polysans); font-size: clamp(32px, 5.4vw, 48px); line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.post-deck { margin-top: var(--spacing-20); font-size: 20px; line-height: 1.45; color: var(--color-steel); }
.post-body { margin-top: var(--spacing-40); font-size: 17px; line-height: 1.65; color: var(--color-steel); }
.post-body > * + * { margin-top: var(--spacing-20); }
.post-body strong { color: var(--color-graphite); font-weight: 500; }
.post-body h2 { margin-top: 56px; font-family: var(--font-polysans); font-size: clamp(24px, 3.4vw, 30px); line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; color: var(--color-graphite); }
.post-body h3 { margin-top: var(--spacing-40); font-family: var(--font-polysans); font-size: 20px; line-height: 1.25; font-weight: 400; letter-spacing: -0.02em; color: var(--color-graphite); }
.post-body h2 + *, .post-body h3 + * { margin-top: var(--spacing-12); }
.post-body ul, .post-body ol { display: flex; flex-direction: column; gap: 10px; padding-left: var(--spacing-20); }
.post-body ul { list-style: square; }
.post-body ol { list-style: decimal; }
.post-body li::marker { color: var(--color-graphite); }
.post-body code { font-size: 0.9em; background: var(--color-ash); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--color-graphite); }
.post-body pre { background: var(--color-ash); padding: var(--spacing-20); border-radius: var(--radius-sm); overflow-x: auto; font-size: 14px; line-height: 1.5; }
.post-body pre code { background: none; padding: 0; font-size: inherit; }
.post-body blockquote { background: var(--color-ivory); padding: var(--spacing-20) var(--spacing-36); font-family: var(--font-polysans); font-size: 20px; line-height: 1.4; letter-spacing: -0.02em; color: var(--color-graphite); }
.post-body blockquote p + p { margin-top: var(--spacing-12); }
.post-table { overflow-x: auto; }
.post-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.post-table th, .post-table td { text-align: left; vertical-align: top; padding: var(--spacing-12); border-bottom: 1px solid var(--color-mist); }
.post-table th { color: var(--color-graphite); font-weight: 500; }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-40); }

/* ---- Touch: 44px minimum targets ---- */
@media (max-width: 720px), (pointer: coarse) {
  .el-btn { min-height: 44px; justify-content: center; }
  .el-nav__brand, .footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .code-snip { white-space: pre-wrap; overflow-wrap: anywhere; }
  .footer-links { gap: 0 var(--spacing-20); }
  .faq-trigger { min-height: 56px; }
}

/* ---- Site rebuild 2026-10: header menu, footer, and the new page sections ----
   Spec: plan/pages/01-nav-and-footer.md. Tokens only. The menus are <details> elements, so they work without JS. */

/* Header: What We Do dropdown */
.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; cursor: pointer; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary svg path { stroke: currentColor; fill: none; stroke-width: 1.5; }
.nav-drop[open] > summary svg { transform: rotate(180deg); }
.nav-drop__panel { position: absolute; top: calc(100% + 18px); left: -18px; width: min(860px, 92vw); background: var(--color-canvas-white); border-radius: var(--radius-xl); box-shadow: var(--lift-2); padding: var(--spacing-36); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-20) var(--spacing-36); z-index: 120; }
.nav-drop__panel .overline { margin-bottom: var(--spacing-12); }
.nav-drop__panel ul { display: flex; flex-direction: column; gap: var(--spacing-12); }
.nav-drop__panel li a { display: block; text-decoration: none; color: var(--color-graphite); }
.nav-drop__panel li a:hover .menu-name { text-decoration: underline; text-decoration-color: var(--color-ember-orange); text-underline-offset: 3px; }
.menu-name { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.menu-promise { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--color-steel); }
.menu-all { grid-column: 1 / -1; font-size: 14px; }
.el-nav__end .el-btn { white-space: nowrap; }

/* Header: phone menu (under 900px the pill and the two buttons hide; the Menu button shows) */
.nav-mobile { display: none; position: relative; }
.nav-mobile > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.burger { display: inline-flex; flex-direction: column; gap: 3px; }
.burger i { display: block; width: 14px; height: 1.5px; background: currentColor; }
.nav-mobile__panel { position: fixed; left: 0; right: 0; top: 72px; bottom: 0; overflow-y: auto; background: var(--color-canvas-white); padding: var(--spacing-20) var(--spacing-16) 120px; display: flex; flex-direction: column; gap: var(--spacing-16); z-index: 120; }
.nav-mobile__group > summary { font-family: var(--font-polysans); font-size: 20px; cursor: pointer; padding: var(--spacing-8) 0; }
.nav-mobile__group .menu-group { margin-top: var(--spacing-16); }
.nav-mobile__group .overline { margin-bottom: var(--spacing-8); }
.nav-mobile__group ul { display: flex; flex-direction: column; gap: var(--spacing-8); }
.nav-mobile__group li a { color: var(--color-graphite); text-decoration: none; }
.nav-mobile__group .menu-all { display: inline-block; margin-top: var(--spacing-16); }
.nav-mobile__link { font-family: var(--font-polysans); font-size: 20px; color: var(--color-graphite); text-decoration: none; padding: var(--spacing-8) 0; }
@media (max-width: 1100px) { .nav-score { display: none; } }
@media (max-width: 900px) {
  .nav-book { display: none; }
  .nav-mobile { display: block; }
}

/* Phone: sticky bottom bar with the two calls to action */
.mobile-cta { display: none; }
@media (max-width: 900px) {
  .mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-8); position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; padding: var(--spacing-8) var(--spacing-16) calc(var(--spacing-8) + env(safe-area-inset-bottom)); background: var(--color-canvas-white); box-shadow: var(--lift-2); }
  .mobile-cta .el-btn { justify-content: center; }
  body { padding-bottom: 72px; }
}

/* Footer */
.footer-definition { max-width: 720px; font-size: 14px; line-height: 1.5; color: var(--color-steel); margin-bottom: var(--spacing-36); }
.footer-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-20); margin-bottom: var(--spacing-40); }
.footer-grid .overline { margin-bottom: var(--spacing-12); }
.footer-grid ul { display: flex; flex-direction: column; gap: var(--spacing-8); font-size: 14px; }
@media (max-width: 1020px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Home: hero visual (a labelled example AI answer plus a lead that got a fast reply) */
.hero-visual { display: flex; flex-direction: column; gap: var(--spacing-16); background: var(--color-ash); border-radius: var(--radius-xl); padding: var(--spacing-36); }
.hero-visual .mock-answer { box-shadow: var(--lift-1); }
.lead-ping { display: flex; flex-direction: column; gap: 6px; background: var(--color-canvas-white); border-radius: var(--radius-lg); padding: var(--spacing-16) var(--spacing-20); box-shadow: var(--lift-1); font-size: 14px; color: var(--color-graphite); align-self: flex-end; max-width: 340px; }
.lead-ping__reply { color: var(--color-steel); }
.lead-ping__reply::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ember-orange); margin-right: 8px; }
.hero-grid .btn-row { margin-top: var(--spacing-36); }
@media (max-width: 720px) { .hero-visual { padding: var(--spacing-20); } }

/* Phase cards (home), service cards (hub, glossary), scenario cards */
.phase-card, .service-card, .scenario, .post-link { display: flex; flex-direction: column; gap: var(--spacing-12); text-decoration: none; color: inherit; }
.phase-card .copy, .service-card .copy, .scenario .copy { margin: 0; }
.phase-num { font-family: var(--font-polysans); font-size: 32px; line-height: 1; color: var(--color-slate); }
.phase-links { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: var(--spacing-8); font-size: 14px; }
.service-card .post-card__more, .scenario .post-card__more, .post-link .post-card__more { margin-top: auto; }
.service-card:hover, .scenario:hover, .post-link:hover { box-shadow: var(--lift-2); }

/* "Cost per lead is not cost per job": the steps from an AI question to a review */
.funnel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-8); }
.funnel li { background: var(--color-ash); border-radius: var(--radius-lg); padding: var(--spacing-16); font-size: 14px; font-weight: 500; color: var(--color-graphite); display: flex; flex-direction: column; gap: 6px; }
.funnel li:nth-child(6) { background: var(--color-graphite); color: var(--color-canvas-white); }
.funnel .num { font-size: 12px; color: var(--color-steel); }
.funnel li:nth-child(6) .num { color: var(--color-mist); }
@media (max-width: 900px) { .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.founder { max-width: 880px; margin: 0 auto; }
.founder .card-title { margin-top: var(--spacing-8); }
.founder .copy { margin-top: var(--spacing-12); }

/* What We Do hub: the loop */
.loop { margin-top: var(--spacing-40); }
.loop__steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--spacing-8); counter-reset: loop; }
.loop__steps li { position: relative; background: var(--color-ash); border-radius: var(--radius-lg); padding: var(--spacing-16) var(--spacing-12); font-size: 14px; font-weight: 500; color: var(--color-graphite); display: flex; flex-direction: column; gap: 6px; }
.loop__steps li:not(:last-child)::after { content: '→'; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--color-ember-orange); font-size: 12px; z-index: 1; }
.loop__phase { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-steel); }
.loop figcaption { margin-top: var(--spacing-16); }
@media (max-width: 900px) { .loop__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loop__steps li::after { display: none; } }

/* Service pages */
.short-answer { margin-top: var(--spacing-40); padding: var(--spacing-36); }
.short-answer__text { margin-top: var(--spacing-12); font-family: var(--font-polysans); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; color: var(--color-graphite); }
.search-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-16); }
.search-chips li { background: var(--color-canvas-white); border-radius: var(--radius-full); padding: 8px 14px; font-size: 14px; color: var(--color-graphite); }
.search-chips li::before { content: '\201C'; color: var(--color-steel); }
.search-chips li::after { content: '\201D'; color: var(--color-steel); }
.problem-line { margin-top: var(--spacing-12); font-family: var(--font-polysans); font-size: clamp(22px, 3vw, 30px); line-height: 1.25; color: var(--color-graphite); }
.section-intro .btn-row { margin-top: var(--spacing-36); }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-20); }
.overline a { color: inherit; text-decoration: none; }
.overline a:hover { text-decoration: underline; }

/* Home hero: AEO-first, with the AI phone demo (modelled on Agency AEO's hero phone, drawn in CSS) */
.hero--aeo .hero-grid { align-items: center; }
.hero--aeo .el-hero__lead strong { color: var(--color-graphite); font-weight: 500; }
.hero-contrast { margin-top: var(--spacing-20); font-size: 18px; line-height: 1.45; color: var(--color-steel); }
.hero-contrast strong { display: block; color: var(--color-graphite); font-weight: 500; }
.hero--aeo { padding-top: var(--spacing-60); }

.ai-demo { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16); }
.ai-demo figcaption { margin-top: var(--spacing-8); }
.ai-phone { width: min(280px, 78vw); aspect-ratio: 9 / 17.5; background: var(--color-graphite); border-radius: 46px; padding: 11px; box-shadow: var(--lift-2), 0 0 0 1.5px var(--color-ember-orange); }
.ai-phone__screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--color-canvas-white); display: flex; flex-direction: column; font-size: 13px; line-height: 1.45; color: var(--color-graphite); }
.ai-phone__status { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 6px; font-size: 13px; font-weight: 600; }
.ai-phone__island { width: 84px; height: 24px; border-radius: var(--radius-full); background: var(--color-graphite); }
.ai-phone__bars { display: inline-flex; align-items: flex-end; gap: 2px; }
.ai-phone__bars i { display: block; width: 3px; background: var(--color-graphite); border-radius: 1px; }
.ai-phone__bars i:nth-child(1) { height: 5px; } .ai-phone__bars i:nth-child(2) { height: 8px; } .ai-phone__bars i:nth-child(3) { height: 11px; }
.ai-phone__app { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px 12px; box-shadow: 0 1px 0 var(--color-mist); }
.ai-phone__name { font-family: var(--font-polysans); font-size: 17px; letter-spacing: -0.02em; }
.ai-phone__mode { font-size: 11px; color: var(--color-steel); }
.ai-phone__chat { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 0; overflow: hidden; }
.ai-phone__ask { align-self: flex-end; max-width: 85%; background: var(--color-ash); border-radius: 18px; padding: 8px 12px; }
.ai-phone__thinking { color: var(--color-steel); display: none; }
.ai-phone__answer ol { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-left: 18px; list-style: decimal; }
.ai-phone__answer li::marker { color: var(--color-steel); }
.ai-phone__blur { display: inline-block; height: 9px; border-radius: var(--radius-full); background: var(--color-mist); margin-right: 6px; vertical-align: middle; }
.ai-phone__blur.w1 { width: 46%; } .ai-phone__blur.w2 { width: 34%; } .ai-phone__blur.w3 { width: 22%; }
.ai-phone__why { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.ai-phone__why .ai-phone__blur { display: block; margin: 0; }
.ai-phone__blur.w4 { width: 92%; } .ai-phone__blur.w5 { width: 80%; } .ai-phone__blur.w6 { width: 58%; }
.ai-phone__card { position: absolute; left: 14px; right: 14px; top: 66%; transform: translateY(-50%); background: var(--color-canvas-white); border-radius: 22px; padding: 26px 18px; text-align: center; box-shadow: var(--lift-2), 0 0 0 1px var(--color-mist); }
.ai-phone__card-title { font-family: var(--font-polysans); font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; }
.ai-phone__card-tag { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--color-steel); }
.ai-phone__card-tag::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ember-orange); margin-right: 8px; vertical-align: 1px; }
.ai-phone__input { margin: 12px; border-radius: var(--radius-full); background: var(--color-ash); padding: 10px 16px; color: var(--color-slate); }
.ai-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-8); }
.ai-tab { font: inherit; font-size: 14px; font-weight: 500; color: var(--color-steel); background: none; border: 1px solid var(--color-mist); border-radius: var(--radius-full); padding: 6px 14px; cursor: pointer; }
.ai-tab[aria-selected="true"] { color: var(--color-graphite); border-color: var(--color-graphite); box-shadow: inset 0 -2px 0 var(--color-ember-orange); }
.ai-tab:focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 2px; }

/* Animation states, set by site.js. Without JS the finished answer and card simply show. */
.ai-demo.is-asking .ai-phone__answer, .ai-demo.is-asking .ai-phone__card, .ai-demo.is-answering .ai-phone__why:not(.is-in), .ai-demo.is-thinking .ai-phone__answer, .ai-demo.is-thinking .ai-phone__card { opacity: 0; }
.ai-demo.is-thinking .ai-phone__thinking { display: block; animation: ai-pulse 1s ease-in-out infinite; }
.ai-demo.is-answering .ai-phone__card { opacity: 0; transform: translateY(-40%) scale(.96); }
.ai-demo .ai-phone__answer li { transition: opacity .3s ease; }
.ai-demo.is-answering .ai-phone__answer li:not(.is-in) { opacity: 0; }
.ai-phone__card, .ai-phone__answer { transition: opacity .35s ease, transform .35s ease; }
@keyframes ai-pulse { 50% { opacity: .35; } }
@media (max-width: 920px) { .ai-demo { order: 2; } }

/* ---------- Free tools (/tools/) ---------- */
.grid-1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--element-gap); }
.tool-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--element-gap); align-items: start; margin-top: var(--spacing-40); }
@media (max-width: 900px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }
.tool-form .caption { margin: 0 0 var(--spacing-16); }
.tool-form .field .caption { margin: var(--spacing-8) 0 0; }
.tool-form textarea.field-input { resize: vertical; line-height: 1.45; }
.tool-form select.field-input { appearance: auto; }
.tool-form .grid-2, .tool-form .grid-3 { gap: 0 var(--spacing-16); }
.tool-output { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-16); }
.tool-out-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-16); }
.tool-out-head .el-btn { flex: none; }
.tool-code { margin: 0; padding: var(--spacing-16); background: var(--color-fog); border-radius: var(--radius-sm); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; color: var(--color-graphite); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.check-item { display: flex; gap: var(--spacing-8); align-items: flex-start; font-size: 15px; color: var(--color-graphite); cursor: pointer; }
.check-item input { margin-top: 3px; flex: none; }
.tool-list { margin: 0; padding-left: var(--spacing-20); list-style: decimal; display: flex; flex-direction: column; gap: var(--spacing-8); font-size: 15px; color: var(--color-graphite); }
.tool-verdict { margin: 0; padding-left: var(--spacing-12); border-left: 2px solid var(--color-graphite); font-size: 17px; color: var(--color-graphite); }
.tool-verdict--warn { border-left-color: var(--color-ember-orange); }
.status-pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-tags); font-size: 13px; font-weight: 500; white-space: nowrap; }
.status-pill--ok { background: var(--color-ash); color: var(--color-graphite); }
.status-pill--no { background: var(--color-graphite); color: var(--color-canvas-white); }
.tool-output .post-table { overflow-x: auto; }

/* ---- Motion ----
   A thin layer of polish: one easing curve, short durations, nothing loops except the submit button while it waits.
   Every effect is gated on prefers-reduced-motion: no-preference, so reduced-motion visitors get the static page.
   No gradients, no new colours: the only ember is the thin scroll-progress line.
   site.js adds .is-visible when a .reveal block enters the screen and sets --i (0..5) on grid children for stagger. */
:root { --ease: cubic-bezier(.22, .7, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --stagger: 80ms; }

/* Scroll reveal. Hidden only when scripts are on, so no-JS visitors still see everything.
   Opacity and transform wait their turn in the stagger; translate and box-shadow (the hover lift) never do. */
.reveal { transition: opacity .7s var(--ease) calc(var(--i, 0) * var(--stagger)), transform .7s var(--ease) calc(var(--i, 0) * var(--stagger)), translate .25s var(--ease), box-shadow .25s var(--ease); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal:not(.is-visible) { opacity: 0; transform: translateY(14px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Cards: grid cards rise a few pixels toward you on hover */
  @media (hover: hover) {
    :is(.bento, .grid-2, .grid-3, .grid-4) > :is(.el-data, .el-feature):hover { translate: 0 -3px; box-shadow: var(--lift-2); }
  }

  /* Buttons: lift 1px on hover, press 1px on click, arrow nudges forward */
  .el-btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease, translate .2s var(--ease); }
  @media (hover: hover) { .el-btn:not([disabled]):hover { translate: 0 -1px; } }
  .el-btn:not([disabled]):active { translate: 0 1px; transition-duration: .05s; }
  .el-btn .arrow { display: inline-block; margin-left: -4px; transition: translate .25s var(--ease); }
  .el-btn:not([disabled]):hover .arrow { translate: 4px 0; }

  /* Nav: a thin ember line draws under the hovered item; links thicken smoothly */
  .site-header .el-nav__item { position: relative; }
  .site-header .el-nav__item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--color-ember-orange); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
  .site-header .el-nav__item:is(:hover, :focus-visible)::after { transform: scaleX(1); }
  .site-header .el-nav__item[aria-current="page"]::after { display: none; }
  .el-link, .post-card__more { transition: text-decoration-thickness .15s ease, color .15s ease; }
  .el-link--utility { transition: color .15s ease; }

  /* FAQ: the answer fades in just behind the panel opening */
  .faq-trigger { transition: background-color .15s ease; }
  .faq-content-inner { opacity: 0; transition: opacity .2s ease; }
  .faq-item.active .faq-content-inner { opacity: 1; transition-delay: .1s; }
  .faq-trigger:hover .faq-arrow { border-color: var(--color-ember-orange); }

  /* Charts draw themselves once their card is on screen */
  @keyframes wipe { from { clip-path: inset(-4px 100% -4px -4px); } to { clip-path: inset(-4px -4px -4px -4px); } }
  @keyframes ring { from { stroke-dashoffset: var(--ring); } to { stroke-dashoffset: 0; } }
  @keyframes fill { from { transform: scaleX(0); } }
  @keyframes pop { from { opacity: 0; scale: .5; } }
  @keyframes rise { from { opacity: 0; translate: 0 8px; } }
  .is-visible .el-chart polyline.secondary { animation: wipe 1s var(--ease) .2s both; }
  .is-visible .el-chart polyline.primary { animation: wipe 1.1s var(--ease) .35s both; }
  .is-visible .el-chart .end { transform-box: fill-box; transform-origin: center; animation: pop .4s var(--ease-spring) 1.3s both; }
  .cluster .c3 .primary { --ring: 151px; }
  .report-score .primary { --ring: 226px; }
  .is-visible .el-chart circle.primary { animation: ring 1.1s var(--ease) .4s both; }

  /* Bars and score segments grow in order */
  .is-visible .bar i, .is-visible .score-seg { transform-origin: left; animation: fill .9s var(--ease) calc(.3s + var(--i, 0) * 80ms) both; }

  /* Chat bubbles, rankings, checklists and the before/after fix settle in one after another */
  .is-visible :is(.chat-bubble, .rank-list li, .fix-pair > div, .mock-answer > *, .hero-checklist li) { animation: rise .5s var(--ease) calc(.25s + var(--i, 0) * 90ms) both; }

  /* Form: fields ease their border, a bad field gives a small shake, the button breathes while it waits */
  .field-input { transition: border-color .15s ease, box-shadow .2s ease; }
  @keyframes nudge { 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
  .field.has-error .field-input { animation: nudge .35s var(--ease); }
  @keyframes breathe { 50% { opacity: .55; } }
  .grader-submit[disabled] { animation: breathe 1.4s ease-in-out infinite; }
  .grader-card.submitted .done-ring { animation: pop .55s var(--ease-spring) both; }
  .grader-card.submitted .grader-done > :not(.done-ring) { animation: rise .5s var(--ease) .15s both; }

  /* Reading progress: a 2px ember line along the bottom of the header, driven by scroll position */
  @supports (animation-timeline: scroll()) {
    @keyframes progress { to { transform: scaleX(1); } }
    .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-ember-orange); transform: scaleX(0); transform-origin: left; animation: progress linear both; animation-timeline: scroll(root block); pointer-events: none; }
  }

  /* Page to page: a short cross-fade where the browser supports it, with the header held still */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .process-nav a::before, .step-numeral, .faq-arrow, .faq-content, .tip-panel { transition: none !important; }
}


/* ---- Polish: card text spacing, anchors, results, form controls ---- */
:root { --section-gap: 64px; --card-padding: 32px; }
@media (max-width: 600px) { :root { --card-padding: 24px; } }
.el-data:not(.service-card):not(.phase-card):not(.scenario):not(.post-card) > .card-title + .copy { margin-top: var(--spacing-8); }
[id] { scroll-margin-top: 88px; }
input[type="checkbox"] { accent-color: var(--color-graphite); width: 16px; height: 16px; }
.field-input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 2px; }
.nav-mobile__panel a { border-radius: var(--radius-sm); }
.el-data .card-list + .card-title { margin-top: var(--spacing-20); }
@media (prefers-reduced-motion: no-preference) {
  .tool-output > * { animation: rise .3s var(--ease) both; }
  .tool-output > *:nth-child(2) { animation-delay: .06s; }
  .tool-output > *:nth-child(3) { animation-delay: .12s; }
  .check-item { transition: color .15s ease; }
  .check-item:hover { color: var(--color-ink, var(--color-graphite)); }
  .nav-mobile[open] .nav-mobile__panel { animation: rise .2s var(--ease) both; }
  .status-pill, .tool-verdict { animation: pop .25s var(--ease-spring) both; }
  .el-nav__item { transition: color .15s ease; }
}

/* Glossary index: even cards, three lines of definition each; the full definition is on the term page. */
.glossary-card .copy { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.check-group { margin-top: var(--spacing-8); font-size: 14px; font-weight: 500; color: var(--color-graphite); }
.check-group:first-child { margin-top: 0; }

/* Headings break evenly instead of leaving one word on the last line; body copy avoids single-word last lines. */
h1, h2, h3, .section-title, .el-hero__title, .post-title, .card-title { text-wrap: balance; }
.copy, .el-hero__lead, .post-deck, .post-body p { text-wrap: pretty; }

/* Header dropdowns: a short list under the tab (the mega-menu styles above are for the wider layout, which this does not use). */
.site-header .nav-drop { display: inline-flex; }
.site-header .nav-drop > summary { cursor: pointer; }
.site-header .nav-drop > summary svg { transition: transform .2s ease; }
.site-header .nav-drop > summary[aria-current] { text-decoration: underline; text-decoration-color: var(--color-ember-orange); text-underline-offset: 3px; }
.site-header .nav-drop > summary[aria-current]::after { display: none; }
.site-header .nav-drop__panel { display: flex; flex-direction: column; gap: var(--spacing-12); width: 280px; left: -16px; padding: var(--spacing-20); list-style: none; }
.nav-drop__panel li a { border-radius: var(--radius-sm); }
.nav-drop__panel li a[aria-current="page"] .menu-name { text-decoration: underline; text-decoration-color: var(--color-ember-orange); text-underline-offset: 3px; }
.nav-mobile__label { margin-top: var(--spacing-8); font-size: 14px; font-weight: 500; color: var(--color-steel); }
@media (prefers-reduced-motion: no-preference) {
  .nav-drop[open] > .nav-drop__panel { animation: rise .18s var(--ease) both; }
}

/* Score result: shown in the card where the form was */
.grader-card.submitted .grader-done { text-align: left; padding: 0; }
.grade-result { display: flex; flex-direction: column; gap: var(--spacing-12); }
.grade-company { font-family: var(--font-polysans); font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 400; }
.grade-score { display: flex; align-items: baseline; gap: var(--spacing-12); margin: var(--spacing-8) 0; padding-bottom: var(--spacing-12); border-bottom: 2px solid var(--color-ember-orange); width: fit-content; }
.grade-total { font-family: var(--font-polysans); font-size: 64px; line-height: 1; letter-spacing: -0.02em; }
.grade-of { font-size: 14px; color: var(--color-steel); }
.grade-note { background: var(--color-ivory, var(--color-ash)); padding: var(--spacing-12); font-size: 13px; }
.grade-result .card-title { margin-top: var(--spacing-12); }
.grade-row__head { display: flex; justify-content: space-between; font-size: 14px; }
.grade-bar { height: 8px; background: var(--color-ash); margin-top: 4px; }
.grade-bar i { display: block; height: 100%; background: var(--color-graphite); }
.grade-result .btn-row { margin-top: var(--spacing-16); }