/* AIRC Design System — component styles. Class prefix: airc-. Tokens come from tokens.css.
   Layout components are CSS containers: they adapt to the width they are given (@container), not the viewport. */

/* ---------- Base ---------- */
.airc, .airc * { box-sizing: border-box; }
.airc { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--navy); background: var(--white); -webkit-font-smoothing: antialiased; }
.airc h1, .airc h2, .airc h3, .airc h4 { font-family: var(--font-heading); margin: 0; text-wrap: balance; color: var(--navy); }
.airc p { margin: 0; }
:where(.airc) a { color: var(--blue-600); text-underline-offset: 3px; }
:where(.airc) a:hover { color: var(--navy); }
.airc :focus-visible, .airc .is-focus { outline: var(--focus-width) solid var(--orange-600); outline-offset: 2px; }
.airc svg.lucide { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.airc-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--ink-muted); }
.airc-muted { color: var(--ink-muted); }
.airc-small { font-size: 14px; line-height: 1.5; }

/* ---------- Button ---------- */
.airc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target); padding: 10px 20px; border-radius: var(--radius-sm); border: 1.5px solid transparent; font: 600 16px/1.25 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.airc-btn--primary { background: var(--orange-600); color: var(--white); }
.airc-btn--primary:hover { background: var(--orange-700); color: var(--white); }
.airc-btn--secondary { background: var(--white); color: var(--blue-600); border-color: var(--blue-600); }
.airc-btn--secondary:hover { background: var(--surface); color: var(--navy); border-color: var(--navy); }
.airc-btn--dark { background: var(--navy); color: var(--white); }
.airc-btn--dark:hover { background: var(--ink-muted); color: var(--white); }
.airc-btn--ghost { background: transparent; color: var(--navy); }
.airc-btn--ghost:hover { background: var(--surface); color: var(--navy); }
.airc-btn--lg { min-height: 52px; padding: 14px 28px; font-size: 17px; }
.airc-btn--sm { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.airc-btn--block { width: 100%; }
.airc-btn--icon { width: var(--touch-target); padding: 0; }
.airc-btn[disabled], .airc-btn.is-disabled { background: var(--surface); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }

/* ---------- Pills ---------- */
.airc-pill { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 12px; border-radius: var(--radius-pill); font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.airc-pill svg.lucide { width: 14px; height: 14px; }
.airc-pill--tool { background: var(--orange-600); color: var(--white); }
.airc-pill--tool-soft { background: var(--orange-50); color: var(--orange-700); }
.airc-pill--free { background: var(--green-600); color: var(--white); }
.airc-pill--format { background: var(--surface); color: var(--navy); border: 1px solid var(--line); }
.airc-pill--progress { background: var(--white); color: var(--blue-600); border: 1px solid var(--blue-600); }
.airc-pill--done { background: var(--white); color: var(--green-600); border: 1px solid var(--green-600); }
.airc-pill--locked { background: var(--surface); color: var(--ink-muted); }
.airc-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Header ---------- */
.airc-header { container-type: inline-size; position: sticky; top: 0; z-index: 10; background: var(--white); border-bottom: 1px solid var(--line); }
.airc-header__bar { display: flex; align-items: center; gap: var(--space-4); height: var(--header-height); max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
.airc-header__logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--navy); font: 700 20px/1 var(--font-heading); letter-spacing: .02em; }
.airc-header__logo img { width: 40px; height: 40px; }
.airc-header__nav { display: none; gap: var(--space-1); margin-left: var(--space-4); }
.airc-header__nav a { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--navy); text-decoration: none; font-weight: 600; }
.airc-header__nav a:hover, .airc-header__nav a[aria-current] { background: var(--surface); }
.airc-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.airc-header__signin { display: none; }
@container (min-width: 900px) {
  .airc-header__bar { padding: 0 var(--space-5); }
  .airc-header__nav, .airc-header__signin { display: inline-flex; }
  .airc-header__menu { display: none; }
}

/* ---------- Mobile menu (drawer) ---------- */
.airc-drawer { position: relative; display: flex; min-height: 560px; background: rgba(3, 19, 39, .45); }
.airc-drawer__panel { display: flex; flex-direction: column; width: min(320px, 86%); background: var(--white); box-shadow: var(--shadow-raised); }
.airc-drawer__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--line); }
.airc-drawer__nav { display: grid; gap: 2px; padding: var(--space-3); }
.airc-drawer__nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--navy); text-decoration: none; font-weight: 600; }
.airc-drawer__nav a svg.lucide { color: var(--blue); }
.airc-drawer__nav a:hover, .airc-drawer__nav a[aria-current] { background: var(--surface); }
.airc-drawer__foot { display: grid; gap: var(--space-2); margin-top: auto; padding: var(--space-4); border-top: 1px solid var(--line); }

/* ---------- Hero ---------- */
.airc-hero { container-type: inline-size; background: var(--white); }
.airc-hero__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-7) var(--space-4); display: grid; gap: var(--space-5); justify-items: start; }
.airc-hero h1 { font-size: 36px; line-height: 1.05; letter-spacing: -.02em; max-width: 14ch; }
.airc-hero__lead { font-size: 18px; color: var(--ink-muted); max-width: 52ch; }
.airc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.airc-underline { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 70 4, 160 3, 297 9' fill='none' stroke='%23F36C00' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .32em no-repeat; padding-bottom: .12em; }
@container (min-width: 720px) {
  .airc-hero__inner { padding: var(--space-9) var(--space-5) var(--space-8); }
  .airc-hero h1 { font-size: 56px; max-width: 18ch; }
}

/* ---------- Grid ---------- */
.airc-grid { container-type: inline-size; }
.airc-grid__items { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@container (min-width: 600px) { .airc-grid__items { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 960px) { .airc-grid__items { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Course card / Product card ---------- */
.airc-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: var(--navy); transition: box-shadow .15s, transform .15s; }
.airc-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); color: var(--navy); }
.airc-card__thumb { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--surface); overflow: hidden; }
.airc-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.airc-card__thumb--empty { display: grid; place-items: center; color: var(--ink-muted); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M16 0H0V16' fill='none' stroke='%23E3E8EF'/%3E%3C/svg%3E"); }
.airc-card__thumb--empty svg.lucide { width: 32px; height: 32px; color: var(--ink-muted); }
.airc-card__tags { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.airc-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-5); }
.airc-card__title { font: 600 20px/1.3 var(--font-heading); }
.airc-card__foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 14px; color: var(--ink-muted); }
.airc-card__foot strong { color: var(--navy); font-weight: 500; }
.airc-card__price { font: 700 22px/1 var(--font-heading); color: var(--navy); }
.airc-card__desc { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

/* ---------- Course page ---------- */
.airc-course { container-type: inline-size; }
.airc-course__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); display: grid; gap: var(--space-5); }
.airc-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); list-style: none; margin: 0; padding: 0; }
.airc-crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line); }
.airc-crumbs a { color: var(--ink-muted); text-decoration: none; }
.airc-crumbs [aria-current] { color: var(--navy); }
.airc-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--navy); display: grid; place-items: center; }
.airc-video__play { width: 72px; height: 72px; border-radius: var(--radius-pill); border: 0; background: var(--orange-600); color: var(--white); display: grid; place-items: center; cursor: pointer; }
.airc-video__play svg.lucide { width: 28px; height: 28px; fill: currentColor; }
.airc-video__caption { position: absolute; left: var(--space-4); bottom: var(--space-4); font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--white); background: rgba(3, 19, 39, .72); padding: 8px 10px; border-radius: var(--radius-pill); }
.airc-course__title { display: grid; gap: var(--space-3); }
.airc-course__title h1 { font-size: 30px; line-height: 1.1; }
.airc-buybox { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-card); align-self: start; }
.airc-buybox__price { display: flex; align-items: baseline; gap: var(--space-2); }
.airc-buybox__price strong { font: 700 36px/1 var(--font-heading); }
.airc-specs { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.airc-specs li { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.airc-specs__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--surface); color: var(--blue); display: grid; place-items: center; }
.airc-specs dt, .airc-specs__k { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.airc-specs__v { font-weight: 500; }
@container (min-width: 900px) {
  .airc-course__inner { grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--space-7); padding: var(--space-6) var(--space-5) var(--space-8); }
  .airc-crumbs, .airc-course__main { grid-column: 1; }
  .airc-buybox { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: calc(var(--header-height) + var(--space-5)); }
  .airc-course__title h1 { font-size: 44px; }
}
.airc-course__main { display: grid; gap: var(--space-5); }

/* ---------- Lesson player ---------- */
.airc-player { container-type: inline-size; background: var(--surface); }
.airc-player__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-4); display: grid; gap: var(--space-4); }
.airc-player__top { display: flex; align-items: center; gap: var(--space-3); }
.airc-player__top a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--navy); text-decoration: none; font-weight: 600; min-height: var(--touch-target); }
.airc-player__stage { display: grid; gap: var(--space-3); }
.airc-player__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.airc-player__actions .airc-btn { padding-inline: 10px; }
@container (min-width: 960px) { .airc-player__actions { display: flex; justify-content: space-between; } }
.airc-player__frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--navy); }
.airc-player__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--white); background: linear-gradient(transparent, rgba(3, 19, 39, .85)); font: 500 12px/1 var(--font-mono); }
.airc-player__bar button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--white); cursor: pointer; border-radius: var(--radius-sm); }
.airc-player__track { flex: 1; height: 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .3); }
.airc-player__track span { display: block; height: 100%; border-radius: inherit; background: var(--orange); }
.airc-player__lesson { display: grid; gap: var(--space-1); }
.airc-player__lesson h1 { font-size: 22px; line-height: 1.25; }
.airc-lessons { display: grid; gap: var(--space-2); align-self: start; }
.airc-module { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.airc-module > summary { list-style: none; display: grid; grid-template-columns: 32px 1fr auto 20px; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 56px; cursor: pointer; font-weight: 600; }
.airc-module > summary::-webkit-details-marker { display: none; }
.airc-module > summary:focus-visible { outline-offset: -4px; }
.airc-module__num { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--navy); color: var(--white); display: grid; place-items: center; font: 500 13px/1 var(--font-mono); }
.airc-module__meta { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); letter-spacing: .04em; }
.airc-module[open] .airc-module__chev { transform: rotate(180deg); }
.airc-module ol { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-2); }
.airc-lesson { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--space-3); align-items: center; min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--navy); text-decoration: none; font-size: 15px; }
.airc-lesson:hover { background: var(--surface); color: var(--navy); }
.airc-lesson__state { width: 24px; height: 24px; border-radius: var(--radius-pill); display: grid; place-items: center; }
.airc-lesson__state svg.lucide { width: 14px; height: 14px; }
.airc-lesson--done .airc-lesson__state { background: var(--green-600); color: var(--white); }
.airc-lesson--done { color: var(--ink-muted); }
.airc-lesson--current { background: var(--orange-50); font-weight: 600; }
.airc-lesson--current .airc-lesson__state { border: 2px solid var(--orange); color: var(--orange-700); }
.airc-lesson--locked { color: var(--ink-muted); }
.airc-lesson--locked .airc-lesson__state { color: var(--ink-muted); }
.airc-lesson__time { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
@container (min-width: 960px) {
  .airc-player__inner { grid-template-columns: minmax(0, 1fr) 360px; padding: var(--space-5); column-gap: var(--space-5); }
  .airc-player__top { grid-column: 1 / -1; }
}

/* ---------- Progress, empty state ---------- */
.airc-progress { display: grid; gap: var(--space-1); }
.airc-progress__bar { height: 8px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.airc-progress__bar span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.airc-progress__row { display: flex; justify-content: space-between; font: 500 12px/1.3 var(--font-mono); color: var(--ink-muted); letter-spacing: .04em; }
.airc-empty { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-7) var(--space-5); border: 1px dashed var(--line); border-radius: var(--radius-md); background: var(--surface); }
.airc-empty__icon { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--white); color: var(--blue); display: grid; place-items: center; border: 1px solid var(--line); }
.airc-empty p { color: var(--ink-muted); max-width: 40ch; }

/* ---------- Student dashboard ---------- */
.airc-dash { container-type: inline-size; background: var(--surface); }
.airc-dash__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-4); display: grid; gap: var(--space-5); }
.airc-dash__nav { display: flex; gap: var(--space-1); overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 4px var(--space-4); }
.airc-dash__nav a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-weight: 600; white-space: nowrap; }
.airc-dash__nav a[aria-current] { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1px var(--line); }
.airc-dash__main { display: grid; gap: var(--space-6); }
.airc-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-4); }
.airc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.airc-panel__head h2 { font-size: 22px; }
.airc-resume { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--line); }
.airc-resume__path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--ink-muted); font-size: 14px; }
.airc-mycourse { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: center; }
.airc-mycourse__thumb { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.airc-mycourse__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.airc-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.airc-row { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.airc-row__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface); color: var(--blue); display: grid; place-items: center; }
.airc-row__title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.airc-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 14px; color: var(--ink-muted); }
@container (min-width: 960px) {
  .airc-dash__inner { grid-template-columns: 220px minmax(0, 1fr); padding: var(--space-6) var(--space-5); column-gap: var(--space-6); }
  .airc-dash__nav { flex-direction: column; margin: 0; padding: 0; overflow: visible; align-self: start; }
  .airc-mycourse { grid-template-columns: 160px 1fr; }
}

/* ---------- Forms ---------- */
.airc-field { display: grid; gap: 6px; }
.airc-field > label { font-weight: 600; font-size: 15px; }
.airc-input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--white); font: 400 16px/1.4 var(--font-body); color: var(--navy); }
.airc-input::placeholder { color: var(--ink-muted); }
.airc-input:hover { border-color: var(--navy); }
.airc-input:focus, .airc-input.is-focus { outline: var(--focus-width) solid var(--orange-600); outline-offset: 1px; border-color: var(--navy); }
.airc-input-wrap { position: relative; }
.airc-input-wrap .airc-input { padding-right: 52px; }
.airc-input-wrap button { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-muted); display: grid; place-items: center; cursor: pointer; border-radius: var(--radius-sm); }
.airc-field__help { font-size: 14px; color: var(--ink-muted); }
.airc-field--error .airc-input { border-color: var(--orange-700); }
.airc-field--error .airc-field__help { color: var(--orange-700); display: flex; gap: var(--space-1); align-items: center; }
.airc-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-muted); font-size: 14px; }
.airc-divider::before, .airc-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Modal ---------- */
.airc-modal-scrim { display: grid; place-items: center; padding: var(--space-4); background: rgba(3, 19, 39, .45); }
.airc-modal { position: relative; width: min(420px, 100%); background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); padding: var(--space-6) var(--space-5) var(--space-5); display: grid; gap: var(--space-4); }
.airc-modal__close { position: absolute; top: var(--space-2); right: var(--space-2); }
.airc-modal__logo { justify-self: center; width: 72px; height: 72px; }
.airc-modal h2 { font-size: 24px; text-align: center; }
.airc-modal__sub { text-align: center; color: var(--ink-muted); }
.airc-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); }
.airc-seg button { min-height: 40px; border: 0; border-radius: var(--radius-pill); background: transparent; font: 600 15px/1 var(--font-body); color: var(--ink-muted); cursor: pointer; }
.airc-seg button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.airc-modal__legal { font-size: 13px; color: var(--ink-muted); text-align: center; }

/* ---------- Footer ---------- */
.airc-footer { container-type: inline-size; background: var(--surface); border-top: 1px solid var(--line); }
.airc-footer__cols { max-width: var(--content-max); margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-6); display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.airc-footer h2 { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.airc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.airc-footer li a { display: inline-flex; min-height: 36px; align-items: center; color: var(--navy); text-decoration: none; }
.airc-footer li a:hover { color: var(--blue-600); text-decoration: underline; }
.airc-footer__brand { display: grid; gap: var(--space-3); align-content: start; }
.airc-footer__brand img { width: 56px; height: 56px; }
.airc-footer__brand p { color: var(--ink-muted); font-size: 15px; max-width: 34ch; }
.airc-footer__social { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.airc-footer__social a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--line); color: var(--navy); text-decoration: none; font-weight: 600; font-size: 14px; }
.airc-footer__contact li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; }
.airc-footer__contact svg.lucide { color: var(--blue); margin-top: 3px; width: 18px; height: 18px; }
.airc-footer__promise { font: 500 12px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--navy); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.airc-footer__base { border-top: 1px solid var(--line); }
.airc-footer__base p { max-width: var(--content-max); margin: 0 auto; padding: var(--space-4); font-size: 14px; color: var(--ink-muted); }
@container (min-width: 900px) {
  .airc-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; padding: var(--space-8) var(--space-5) var(--space-7); }
  .airc-footer__base p { padding: var(--space-4) var(--space-5); }
}

/* ---------- Preview helpers (design-system pages only) ---------- */
.ds-stage { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding: 24px; background: var(--surface); }
.ds-phone { width: 375px; max-width: 100%; flex: none; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--white); }
.ds-wide { flex: 1 1 640px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
.ds-cap { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--white); }
.ds-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ds-col { display: grid; gap: 16px; }
/* Example thumbnails for previews only — real thumbnails come from docs/image-style-prompts.md */
.ds-thumb-a { background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 320 180%27 preserveAspectRatio=%27xMidYMid slice%27%3E%3Cdefs%3E%3Cpattern id=%27g%27 width=%2720%27 height=%2720%27 patternUnits=%27userSpaceOnUse%27%3E%3Cpath d=%27M20 0H0V20%27 fill=%27none%27 stroke=%27%230099DD%27 stroke-opacity=%27.18%27/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%23EEF4F9%27/%3E%3Crect width=%27320%27 height=%27180%27 fill=%27url%28%23g%29%27/%3E%3Cg stroke=%27%230079B0%27 stroke-width=%271%27 fill=%27none%27 opacity=%27.6%27%3E%3Ccircle cx=%27110%27 cy=%2796%27 r=%2770%27/%3E%3Cpath d=%27M20 170H300M40 20V175%27/%3E%3Cpath d=%27M110 20v10M110 162v10%27/%3E%3C/g%3E%3Ccircle cx=%27190%27 cy=%2792%27 r=%2754%27 fill=%27none%27 stroke=%27%237F8FA3%27 stroke-width=%2718%27 stroke-dasharray=%2711 9%27/%3E%3Ccircle cx=%27190%27 cy=%2792%27 r=%2744%27 fill=%27%23AEBACA%27/%3E%3Ccircle cx=%27190%27 cy=%2792%27 r=%2730%27 fill=%27%23C9D3DE%27/%3E%3Ccircle cx=%27190%27 cy=%2792%27 r=%2712%27 fill=%27%23EEF4F9%27/%3E%3Ccircle cx=%27110%27 cy=%27120%27 r=%2730%27 fill=%27none%27 stroke=%27%230099DD%27 stroke-width=%272%27 stroke-dasharray=%274 3%27/%3E%3Ccircle cx=%27232%27 cy=%2750%27 r=%276%27 fill=%27%23F36C00%27/%3E%3Cpath d=%27M150 150H260%27 stroke=%27%23031327%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M150 146v8M260 146v8%27 stroke=%27%23031327%27/%3E%3C/svg%3E") center / cover; }
.ds-thumb-b { background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 320 180%27 preserveAspectRatio=%27xMidYMid slice%27%3E%3Cdefs%3E%3Cpattern id=%27g%27 width=%2720%27 height=%2720%27 patternUnits=%27userSpaceOnUse%27%3E%3Cpath d=%27M20 0H0V20%27 fill=%27none%27 stroke=%27%230099DD%27 stroke-opacity=%27.18%27/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%27320%27 height=%27180%27 fill=%27%23EEF4F9%27/%3E%3Crect width=%27320%27 height=%27180%27 fill=%27url%28%23g%29%27/%3E%3Cg fill=%27none%27 stroke=%27%230079B0%27 opacity=%27.55%27%3E%3Crect x=%2740%27 y=%2740%27 width=%27120%27 height=%2790%27/%3E%3Cpath d=%27M40 130l40-30h120l-40 30M160 40l40-30v90%27/%3E%3C/g%3E%3Cpath d=%27M120 70l70-30 80 30v60l-80 30-70-30z%27 fill=%27%23AEBACA%27/%3E%3Cpath d=%27M120 70l70 30 80-30%27 fill=%27none%27 stroke=%27%23EEF4F9%27 stroke-width=%272%27/%3E%3Cpath d=%27M190 100v60%27 stroke=%27%23EEF4F9%27 stroke-width=%272%27/%3E%3Cpath d=%27M190 100l80-30v60l-80 30z%27 fill=%27%238C9BAD%27/%3E%3Cg fill=%27%2300D2FE%27%3E%3Ccircle cx=%2790%27 cy=%27150%27 r=%272%27/%3E%3Ccircle cx=%2798%27 cy=%27146%27 r=%272%27/%3E%3Ccircle cx=%27106%27 cy=%27150%27 r=%272%27/%3E%3Ccircle cx=%2784%27 cy=%27142%27 r=%272%27/%3E%3Ccircle cx=%27112%27 cy=%27142%27 r=%272%27/%3E%3C/g%3E%3Crect x=%27228%27 y=%2760%27 width=%2714%27 height=%2714%27 rx=%273%27 fill=%27%23F36C00%27/%3E%3C/svg%3E") center / cover; }