/* =========================================================================
   AI Writing Systems - Page-Specific Base Styles
   -------------------------------------------------------------------------
   Extends global.css. Do NOT redefine global tokens.
   Page accent: soft teal (--aws-accent: #0e7c86). Used sparingly.
   Different from ClickUp purple, Ramble red, Society warm pink.
   ========================================================================= */

/* -------- Page-scoped tokens -------------------------------------------- */
.ai-writing-systems-page {
  --aws-accent: #0e7c86;
  --aws-accent-soft: #4fb3bb;
  --aws-accent-dark: #0a5e66;
  --aws-accent-tint: #e6f4f5;        /* very pale teal for hover/active */
  --aws-accent-tint-strong: #cfe7e9; /* pale teal for borders/active states */
  --aws-card-bg: #ffffff;
  --aws-card-border: #d9e3e6;
  --aws-card-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  --aws-section-gap: 22px;
  --aws-radius: 12px;
  --aws-radius-sm: 8px;
  --brand-avatar-bg: #d9efef;
}

/* Subtle page background, distinct from ClickUp's blue gradient.
   Flat low-opacity teal tint so the accent reads at the same intensity
   at every scroll position — radial top-anchored gradients faded out
   visibly toward the bottom of long pages. (Wave 12 styling fix.) */
.ai-writing-systems-page .case-study-page {
  background:
    radial-gradient(circle at 8% 6%, rgba(14, 124, 134, 0.13), rgba(14, 124, 134, 0) 33%),
    radial-gradient(circle at 92% 10%, rgba(79, 179, 187, 0.12), rgba(79, 179, 187, 0) 32%),
    linear-gradient(180deg, #f1f9f9 0%, #ffffff 34%, #f4faf9 100%);
}

/* Match the sibling pages: themed top-nav active underline uses this page's accent. */
.ai-writing-systems-page .site-nav a.current::after {
  background: var(--aws-accent);
}

/* -------- Sidebar accent override (within this page only) --------------- */
.ai-writing-systems-page .section-nav {
  background:
    radial-gradient(circle at 100% 0%, rgba(14, 124, 134, 0.10), rgba(14, 124, 134, 0) 42%),
    linear-gradient(180deg, #f7fbfb 0%, #f1f7f7 100%);
  border-color: var(--aws-card-border);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.ai-writing-systems-page .section-nav a:hover {
  background: var(--aws-accent-tint);
}

.ai-writing-systems-page .section-nav a.is-active {
  background: var(--aws-accent-tint);
  color: var(--aws-accent-dark);
}

@media (max-width: 1023px) {
  .ai-writing-systems-page .section-nav a.is-active {
    border-color: var(--aws-accent-tint-strong);
  }
}

/* -------- Section shell -------------------------------------------------- */
.aws-section {
  grid-column: 2 / 3;
  margin-bottom: var(--aws-section-gap);
  background:
    radial-gradient(circle at 100% 0%, rgba(79, 179, 187, 0.08), rgba(79, 179, 187, 0) 40%),
    radial-gradient(circle at 0% 100%, rgba(14, 124, 134, 0.05), rgba(14, 124, 134, 0) 36%),
    #ffffff;
  border: 1px solid var(--aws-card-border);
  border-radius: var(--aws-radius);
  padding: 30px;
  box-shadow: var(--aws-card-shadow);
  scroll-margin-top: calc(var(--header-height) + 26px);
}

/* Removed (Wave 13.10): #overview.aws-section { margin-bottom: 0 }
   This rule was zeroing the hero's bottom margin, collapsing the gap
   between section 1 (Overview) and section 2 (The Current Problem)
   while all other section pairs got the standard --aws-section-gap.
   Now the hero uses the same gap as every other section. */

.ai-writing-systems-page .bottom-nav {
  grid-column: 2 / 3;
  border-color: var(--aws-card-border);
  background:
    radial-gradient(circle at 96% 8%, rgba(14, 124, 134, 0.08), rgba(14, 124, 134, 0) 40%),
    linear-gradient(180deg, #f7fbfb 0%, #f1f7f7 100%);
}

.ai-writing-systems-page .case-content {
  display: contents;
}

.ai-writing-systems-page .project-links a,
.ai-writing-systems-page .jump-links a {
  color: var(--aws-accent);
}

.ai-writing-systems-page .project-links a:hover,
.ai-writing-systems-page .jump-links a:hover {
  color: var(--aws-accent-dark);
}

/* -------- Section header (h2 + lede) ------------------------------------ */
.aws-section-header {
  max-width: 780px;
  margin: 0 0 22px;
}

.aws-section-header:last-child {
  margin-bottom: 0;
}

.aws-h2 {
  margin: 0;
  font-size: clamp(1.45rem, 1.15rem + 0.9vw, 1.85rem);
  line-height: 1.25;
  color: var(--text);
  font-weight: 700;
}

.aws-section-lede {
  margin: 10px 0 0;
  font-style: italic;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* -------- Overview (hero) section --------------------------------------- */
.aws-overview .overview-title {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.65rem);
  line-height: 1.15;
}

.aws-overview .overview-tagline {
  margin: 14px 0 6px;
  font-style: italic;
  font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 600;
  color: var(--aws-accent-dark);
  line-height: 1.4;
  max-width: 780px;
}

.aws-overview .overview-subtitle {
  margin: 0 0 10px;
  color: var(--text);
  font-weight: 500;
  font-size: clamp(1.02rem, 0.92rem + 0.4vw, 1.15rem);
  line-height: 1.5;
  max-width: 780px;
}

.aws-overview .overview-question {
  margin: 4px 0 22px;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.55rem);
  color: var(--aws-accent);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.aws-overview .overview-copy {
  max-width: 780px;
  margin-top: 20px;
}

.aws-overview .overview-copy p {
  margin: 0 0 14px;
}

.aws-overview .overview-copy p:last-child {
  margin-bottom: 0;
}

/* -------- Reusable: Cards ----------------------------------------------- */
.aws-card {
  background: var(--aws-card-bg);
  border: 1px solid var(--aws-card-border);
  border-radius: var(--aws-radius);
  padding: 24px;
  box-shadow: var(--aws-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aws-card.is-muted {
  background: #f7fbfb;
}

.aws-card h3,
.aws-card .aws-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.aws-card p {
  margin: 0;
  color: var(--text);
}

.aws-card p.aws-card-meta {
  color: var(--muted);
  font-size: 0.92rem;
}

/* -------- Reusable: Buttons (page-scoped, mirror global .btn shape) ----- */
.aws-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.aws-button.primary {
  background: var(--aws-accent);
  color: #ffffff;
  border-color: var(--aws-accent);
}

.aws-button.primary:hover,
.aws-button.primary:focus-visible {
  background: var(--aws-accent-dark);
  border-color: var(--aws-accent-dark);
}

.aws-button.secondary {
  background: #ffffff;
  color: var(--aws-accent);
  border-color: var(--aws-accent);
}

.aws-button.secondary:hover,
.aws-button.secondary:focus-visible {
  background: var(--aws-accent-tint);
}

.aws-button.ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--aws-card-border);
}

.aws-button.ghost:hover,
.aws-button.ghost:focus-visible {
  color: var(--text);
  border-color: var(--aws-accent-soft);
  background: var(--aws-accent-tint);
}

.aws-button:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 2px;
}

.aws-button.is-small {
  padding: 8px 16px;
  font-size: 0.88rem;
}

/* -------- Reusable: Tags / chips ---------------------------------------- */
.aws-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--aws-accent-dark);
  background: var(--aws-accent-tint);
  border: 1px solid var(--aws-accent-tint-strong);
  border-radius: 999px;
  line-height: 1.4;
}

.aws-tag.is-muted {
  color: var(--muted);
  background: #f1f4f4;
  border-color: var(--border-strong);
}

.aws-tag.is-solid {
  color: #ffffff;
  background: var(--aws-accent);
  border-color: var(--aws-accent);
}

/* -------- Reusable: Grids ----------------------------------------------- */
.aws-grid-3,
.aws-grid-4 {
  display: grid;
  gap: 18px;
}

.aws-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aws-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .aws-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .aws-grid-3,
  .aws-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* -------- Reusable: Modal ----------------------------------------------- */
.aws-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-modal-backdrop.is-open {
  display: flex;
  opacity: 1;
}

.aws-modal {
  background: #ffffff;
  border: 1px solid var(--aws-card-border);
  border-radius: var(--aws-radius);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-modal-backdrop.is-open .aws-modal {
  transform: translateY(0);
  opacity: 1;
}

.aws-modal.is-wide {
  max-width: 960px;
}

.aws-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.aws-modal-header h3,
.aws-modal-header .aws-modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.aws-modal-close {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.aws-modal-close:hover,
.aws-modal-close:focus-visible {
  color: var(--text);
  background: var(--aws-accent-tint);
}

.aws-modal-content {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  line-height: 1.65;
}

.aws-modal-content > *:first-child {
  margin-top: 0;
}

.aws-modal-content > *:last-child {
  margin-bottom: 0;
}

.aws-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #fbfdfd;
}

/* -------- Lock body scroll when modal is open ---------------------------- */
.ai-writing-systems-page.has-modal-open {
  overflow: hidden;
}

/* -------- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aws-modal-backdrop,
  .aws-modal {
    transition: none;
  }

  .aws-button,
  .aws-tag,
  .aws-card {
    transition: none;
  }
}

/* -------- Responsive padding -------------------------------------------- */
@media (max-width: 768px) {
  .aws-section {
    padding: 24px;
  }

  .aws-modal {
    max-width: 100%;
  }

  .aws-modal-header,
  .aws-modal-content,
  .aws-modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .aws-button {
    width: 100%;
  }
}


/* ==== Section 4 (Methodology Testing — MODIFIED) ==== */
/* ============================================================
   Section 4 — Methodology testing tabs
   Hero section. All classes prefixed .aws-s4-

   Wave 5 modification:
   - Output card sized to comfortably hold 130–150 word real outputs
     (no scrollbars, no clipping).
   - `.aws-s4-output-text.is-long` switches to a serif face at a slightly
     smaller size with generous line-height for long-form readability.
   - Multi-paragraph rendering supported via inner <p> elements.
   - New `.aws-s4-tester-video-wrap` figure placed below the panel and
     above the summary card. It reuses the shared `.aws-video-wrap` kit
     defined in the What-I-Built component (don't redefine here).
   ============================================================ */

.aws-s4-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

/* ---------- Intro ---------- */

.aws-s4-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}

.aws-s4-h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.aws-s4-lede {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------- Tabs ---------- */

.aws-s4-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.aws-s4-tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: #fafafa;
  padding: 16px 18px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  border-right: 1px solid var(--border);
  transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1),
              color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-s4-tab:last-child {
  border-right: 0;
}

.aws-s4-tab:hover {
  background: #f4f4f4;
  color: var(--text);
}

.aws-s4-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--aws-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-s4-tab.active {
  background: #fff;
  color: var(--text);
}

.aws-s4-tab.active::after {
  transform: scaleX(1);
}

.aws-s4-tab-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted-soft);
  text-transform: uppercase;
}

.aws-s4-tab.active .aws-s4-tab-num {
  color: var(--aws-accent);
}

.aws-s4-tab-label {
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.3;
}

.aws-s4-tab.active .aws-s4-tab-label {
  font-weight: 600;
}

.aws-s4-tab:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: -2px;
}

/* ---------- Panel ---------- */

/* Wave 6 modification: panel stacks vertically — diagram on top, output below.
   The diagram + result wraps each cap to a centered max-width so they don't
   stretch awkwardly across the full container width. */
.aws-s4-panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: stretch;
}

.aws-s4-diagram-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.aws-s4-result-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* New: short, plain-English description under the "How it's wired" label,
   above the diagram. One sentence summarising what the phase tested. */
.aws-s4-phase-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

.aws-s4-diag-label,
.aws-s4-result-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

/* ---------- Diagram ---------- */

.aws-s4-diagram {
  background: #fafbfc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 20px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-s4-diagram.is-fading {
  opacity: 0;
}

.aws-s4-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.aws-s4-node {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  position: relative;
  text-align: center;
  min-width: 64px;
}

.aws-s4-node-process {
  background: var(--aws-accent-tint);
  border-color: var(--aws-accent-tint-strong);
  color: var(--aws-accent-dark);
  font-weight: 600;
}

.aws-s4-node-output {
  background: #fff;
  border-color: var(--aws-accent);
  color: var(--aws-accent-dark);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--aws-accent-tint);
}

.aws-s4-node-with-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.aws-s4-node-with-side > span {
  display: block;
}

.aws-s4-side-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.aws-s4-side-connector {
  width: 2px;
  height: 16px;
  background: var(--aws-accent);
  position: relative;
}

.aws-s4-side-connector::before,
.aws-s4-side-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.aws-s4-side-connector::before {
  top: -1px;
  border-bottom: 5px solid var(--aws-accent);
}

.aws-s4-side-connector::after {
  bottom: -1px;
  border-top: 5px solid var(--aws-accent);
}

.aws-s4-side-node {
  background: #fff;
  border: 1.5px dashed var(--aws-accent);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--aws-accent-dark);
  white-space: nowrap;
}

.aws-s4-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-soft);
  font-size: 1.15rem;
  line-height: 1;
  width: 22px;
  flex-shrink: 0;
  user-select: none;
}

.aws-s4-arrow::before {
  content: "→";
  font-weight: 400;
}

/* ---------- Output card ---------- */

.aws-s4-output-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--aws-accent);
  border-radius: 10px;
  padding: 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  /* No max-height; the card grows to fit ~150 words of output without scrolling. */
}

.aws-s4-output-card.is-fading {
  opacity: 0;
}

.aws-s4-output-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aws-s4-rating-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fdecc8;
  color: #8a5a00;
  border: 1px solid #f3d28f;
}

.aws-s4-rating-pill[data-rating="2"] {
  background: #fdecc8;
  color: #8a5a00;
  border-color: #f3d28f;
}

.aws-s4-rating-pill[data-rating="3"] {
  background: #f4ecd8;
  color: #6b5a1e;
  border-color: #e3d4a3;
}

.aws-s4-rating-pill[data-rating="4"] {
  background: #d8ecdf;
  color: #1f6b46;
  border-color: #b3d9bf;
}

.aws-s4-rating-pill[data-rating="5"] {
  background: #cfe9d6;
  color: #14573a;
  border-color: #98c9a8;
}

.aws-s4-rating-meta {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Output text — long-form variant ---------- */

.aws-s4-output-text {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  font-style: normal;
  font-family: Georgia, "Times New Roman", serif;
  border-left: 0;
}

/* `.is-long` is set on the output container when it holds a 130–150 word
   real generation. We drop the size slightly and increase the leading so
   the long block reads comfortably. Paragraphs stack with breathing room. */
.aws-s4-output-text.is-long {
  font-size: 0.9375rem;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Generous max-height — but tall enough that no realistic 150-word block
     overflows. We don't actually scroll; this just guards against runaway
     content if the data ever grows. */
  max-height: none;
  overflow: visible;
}

.aws-s4-output-text.is-long p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: var(--text);
}

/* Render emphasised single-line interjections (the "Okay girl. Do your
   thing." beats Olivia uses) as visually quiet but italicised. */
.aws-s4-output-text.is-long em,
.aws-s4-output-text.is-long i {
  font-style: italic;
  color: var(--text);
}

/* `<strong>` inside an output is a verbatim emphasis from her real text,
   not a UI accent — keep it bold-but-default-coloured. */
.aws-s4-output-text.is-long strong,
.aws-s4-output-text.is-long b {
  font-weight: 700;
  color: var(--text);
}

.aws-s4-quote {
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--muted);
}

/* ---------- Tester video (NEW) ---------- */

/* The `<figure>` wrapper sits between the panel and the summary card.
   It lays out the video card + caption with consistent spacing.
   The inner `.aws-video-wrap` is the shared kit (defined in the
   What-I-Built component CSS); we only style the figure-level layout
   here so this component doesn't redefine the kit. */
.aws-s4-tester-video-wrap {
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.aws-s4-tester-video-wrap figcaption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* The video wrap inside the figure caps to a sensible max width on very
   wide viewports so the 16:9 frame doesn't dwarf the panel above it. */
.aws-s4-tester-video-wrap .aws-video-wrap {
  max-width: 100%;
  margin: 0 auto;
}

/* ---------- Summary card ---------- */

.aws-s4-summary {
  margin-top: 8px;
}

.aws-s4-sum-h {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.aws-s4-sum-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aws-s4-sum-list li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.aws-s4-sum-list li strong {
  color: var(--aws-accent-dark);
  font-weight: 600;
}

.aws-s4-sum-list li.aws-s4-sum-unexpected {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--aws-accent-tint-strong);
}

.aws-s4-sum-list li.aws-s4-sum-unexpected em {
  font-style: italic;
  color: var(--aws-accent);
  font-weight: 600;
  margin-right: 4px;
}

/* ---------- Loop / revise arrow (Wave 6) ---------- */

/* The "Critic → Writer (revises)" arrow is a curved back-arrow that wraps
   under the writer/critic pair, indicating a revise loop. We render it as
   a small labelled badge above the row so it reads as "feedback returns
   to the writer" without forcing an SVG. */
.aws-s4-flow-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.aws-s4-loop-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.aws-s4-loop-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--aws-accent-tint);
  border: 1px dashed var(--aws-accent);
  color: var(--aws-accent-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.aws-s4-loop-arrow::before {
  content: "↺";
  font-size: 0.95rem;
  line-height: 1;
}

/* "Plan" pre-stage badge — a small caption that sits above the writer node
   in planner-on diagrams. Used inside `.aws-s4-node-with-plan` to render the
   plan-then-write relationship without taking up a full inline node slot. */
.aws-s4-node-with-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.aws-s4-plan-badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aws-accent-dark);
  background: #fff;
  border: 1px dashed var(--aws-accent);
  border-radius: 999px;
  padding: 3px 9px;
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
  .aws-s4-panel {
    /* Already vertical at all breakpoints (Wave 6 — diagram above output) */
    gap: 28px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .aws-s4-tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .aws-s4-tab {
    flex: 0 0 auto;
    min-width: 180px;
    border-right: 1px solid var(--border);
  }

  .aws-s4-diagram {
    padding: 22px 14px;
    min-height: 220px;
  }

  .aws-s4-flow {
    flex-direction: column;
    gap: 8px;
  }

  .aws-s4-arrow {
    transform: rotate(90deg);
    height: 18px;
    width: auto;
  }

  .aws-s4-node {
    width: auto;
    min-width: 140px;
  }

  .aws-s4-side-connector {
    height: 12px;
  }

  .aws-s4-output-card {
    padding: 18px 18px;
  }

  .aws-s4-output-text.is-long {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .aws-s4-h3 {
    font-size: 1.3rem;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .aws-s4-tab,
  .aws-s4-tab::after,
  .aws-s4-diagram,
  .aws-s4-output-card {
    transition: none;
  }
}

/* ==== Section 5 — Watch it write (Wave 5 modification) ==== */
/*
  This is the same Section 5 CSS that ships in
  /home/focusmode/Documents/Programming/2026-marketing-portfolio/styles/ai-writing-systems.css
  (lines 2235–2548). Per the architecture plan: "The streaming reveal markup
  is unchanged; only the content piped through changes. CSS likely needs
  zero edits — flag for QA only."

  Included verbatim here so the component package is self-contained for the
  integration agent. The .aws-s5- prefix is preserved (this is a modification,
  not a rename). No new selectors added.
*/

.aws-s5-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.aws-s5-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}

.aws-s5-h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.aws-s5-lede {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Brief card */

.aws-s5-brief-card {
  background: #f6f7f8;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aws-s5-brief-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

.aws-s5-brief-text {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

.aws-s5-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* Stage layout */

.aws-s5-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .aws-s5-stage {
    grid-template-columns: 1fr;
  }
}

/* Email card */

.aws-s5-email-card {
  background: #fdfdfb;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.aws-s5-email-head {
  border-bottom: 1px solid var(--border);
  padding: 14px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aws-s5-email-head p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.aws-s5-email-label {
  color: var(--muted-soft);
  font-weight: 500;
  margin-right: 4px;
}

.aws-s5-email-from {
  font-size: 13px;
  color: var(--muted);
}

.aws-s5-email-subject {
  font-weight: 600;
  font-size: 15px;
}

.aws-s5-email-preview {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.aws-s5-caret {
  display: none;
  width: 7px;
  height: 16px;
  background: var(--aws-accent);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: aws-s5-blink 1s steps(2, start) infinite;
}

.aws-s5-stage[data-state="typing-subject"] .aws-s5-caret {
  display: inline-block;
}

@keyframes aws-s5-blink {
  to { visibility: hidden; }
}

.aws-s5-email-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.aws-s5-stream {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  animation: aws-s5-stream-in 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.aws-s5-stream em {
  color: var(--muted);
}

.aws-s5-stream strong {
  color: var(--text);
}

@keyframes aws-s5-stream-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.aws-s5-email-foot {
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  background: var(--aws-accent-tint);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  animation: aws-s5-stream-in 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.aws-s5-perf-line {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.aws-s5-perf-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* Annotations panel */

.aws-s5-annotations {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 16px;
}

@media (max-width: 900px) {
  .aws-s5-annotations {
    position: static;
  }
}

.aws-s5-anno-h {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

.aws-s5-anno-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted-soft);
  font-style: italic;
}

.aws-s5-stage[data-state="generating"] .aws-s5-anno-empty,
.aws-s5-stage[data-state="done"] .aws-s5-anno-empty {
  display: none;
}

.aws-s5-anno-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aws-s5-chip {
  background: #ffffff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--aws-accent);
  border-radius: 6px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateX(6px);
  animation: aws-s5-chip-in 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes aws-s5-chip-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.aws-s5-chip-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.aws-s5-chip-source {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Button states */

.aws-s5-generate-btn[hidden],
.aws-s5-reset-btn[hidden] {
  display: none;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .aws-s5-stream,
  .aws-s5-chip,
  .aws-s5-email-foot {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .aws-s5-caret {
    animation: none;
  }
}

/* ==== Section 8 ==== */
/* Section 8 — How I work / journal modal */

.aws-s8-container {
  max-width: 720px;
}

.aws-s8-pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.aws-s8-text {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text);
}

.aws-s8-open-btn {
  align-self: flex-start;
}

/* Modal width override — narrower than the shell .is-wide (960px) */
.aws-s8-modal-wide {
  max-width: 800px;
}

.aws-s8-modal-content {
  padding-top: 18px;
  padding-bottom: 22px;
}

.aws-s8-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.aws-s8-entry {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.aws-s8-entry:first-child {
  padding-top: 4px;
}

.aws-s8-entry:last-child {
  border-bottom: 0;
  padding-bottom: 6px;
}

.aws-s8-entry-date {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aws-accent);
}

.aws-s8-entry-headline {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

.aws-s8-entry-body {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--muted);
}

.aws-s8-modal-foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--muted-soft);
}

@media (max-width: 767px) {
  .aws-s8-pitch {
    gap: 14px;
  }

  .aws-s8-text {
    font-size: 1.02rem;
  }

  .aws-s8-open-btn {
    align-self: stretch;
    text-align: center;
  }

  .aws-s8-modal-wide {
    max-width: 100%;
    max-height: calc(100vh - 24px);
  }

  .aws-s8-entry {
    padding: 18px 0;
  }
}

/* ==== Problem (merged with Hypothesis) ====
 * Component: aws-problem
 * Mount: #aws-problem-mount inside <section id="problem">
 * Layout: stacked single column — bold lead, narrative, emphasized question,
 *         italic lead-in, numbered hypothesis list, closing line.
 */

.aws-prob-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 780px;
}

/* Bold lead — the headline takeaway under the H2 */
.aws-prob-bold-lead {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
}

/* Narrative paragraphs */
.aws-prob-narrative {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aws-prob-lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
}

/* The pivot question — visually emphasized, italic + accent color */
.aws-prob-question {
  margin: 8px 0 0;
  padding: 18px 22px;
  background: var(--aws-accent-tint);
  border-left: 4px solid var(--aws-accent);
  border-radius: 6px;
  font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.25rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  color: var(--aws-accent-dark);
}

/* Italic lead-in to the list */
.aws-prob-hyp-leadin {
  margin: 6px 0 -4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.aws-prob-hyp-leadin em {
  font-style: italic;
}

/* Numbered hypothesis list — clean vertical sequence with large accent numbers */
.aws-prob-hyp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aws-prob-hyp-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid var(--aws-card-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(14, 124, 134, 0.04);
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-prob-hyp-item:hover {
  border-color: var(--aws-accent-tint-strong);
  box-shadow: 0 6px 18px rgba(14, 124, 134, 0.08);
  transform: translateY(-1px);
}

.aws-prob-hyp-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--aws-accent);
}

.aws-prob-hyp-text {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

.aws-prob-closing {
  margin: 12px 0 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
}

/* Mobile */
@media (max-width: 767px) {
  .aws-prob-container {
    gap: 20px;
  }
  .aws-prob-lead,
  .aws-prob-closing {
    font-size: 1rem;
  }
  .aws-prob-question {
    padding: 14px 16px;
    border-left-width: 3px;
  }
  .aws-prob-hyp-item {
    gap: 14px;
    padding: 12px 14px;
  }
  .aws-prob-hyp-num {
    min-width: 36px;
    font-size: 1.65rem;
  }
  .aws-prob-hyp-text {
    font-size: 1rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aws-prob-hyp-item {
    transition: none;
  }
  .aws-prob-hyp-item:hover {
    transform: none;
  }
}

/* ==== What I Built ==== */
/* ==== What I Built (NEW) ==== */
/* Component slug: aws-what-i-built
   This file ALSO defines the shared `.aws-video-wrap` / `.aws-video` /
   `.aws-video-pending` / `.aws-video-caption` kit. Other components on the page
   (Knowledge Base graph, Analysis graph + tester, Watch It Write) reuse it.
   Don't duplicate these rules in their CSS. */

/* ---------- Container ---------- */

.aws-built-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/* Split layout: left = text/stats (~60%), right = vertical video (~40%) */
.aws-built-container--split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 36px;
  align-items: start;
  max-width: 1040px;
}

.aws-built-col-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.aws-built-col-video {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

/* Vertical (9:16) video wrapper — capped height so it doesn't dominate.
   Double-class selector boosts specificity so it overrides the base
   .aws-video-wrap { aspect-ratio: 16/9 } rule defined later in the file. */
.aws-video-wrap.aws-video-wrap--vertical {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 360px;
  max-height: 640px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid var(--aws-accent-tint-strong);
  box-shadow: 0 10px 28px rgba(14, 124, 134, 0.12);
}

.aws-video-wrap.aws-video-wrap--vertical .aws-video {
  object-fit: contain;
  background: #000;
}

.aws-built-video-wrap--vertical {
  width: 100%;
  align-items: center;
}

/* Text column should align stats narrative consistently with no inner max */
.aws-built-container--split .aws-built-narrative {
  margin: 0;
  max-width: none;
}

.aws-built-container--split .aws-built-stats {
  margin: 0;
}

/* Step 1: section header lives inside the text column so the right-column
   video aligns with the top of the header (Wave 12 styling fix). The flex
   container (.aws-built-col-text) provides 28px gap between children, so
   strip the header's own bottom margin. */
.aws-built-container--split .aws-built-section-header {
  margin-bottom: 0;
}

/* Tablet: stack — text on top, video centered below */
@media (max-width: 1023px) {
  .aws-built-container--split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .aws-video-wrap.aws-video-wrap--vertical {
    max-width: 380px;
    max-height: 560px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .aws-built-container--split {
    gap: 24px;
  }
  .aws-video-wrap.aws-video-wrap--vertical {
    max-width: 320px;
    max-height: 520px;
  }
}

/* ---------- Narrative ---------- */

.aws-built-narrative {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.aws-built-narrative p {
  margin: 0 0 14px 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
}

.aws-built-narrative p:last-child {
  margin-bottom: 0;
}

/* ---------- Video figure wrapper (component-scoped outer) ---------- */

.aws-built-video-wrap {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ---------- Shared `.aws-video-*` kit (used by all videos on the page) ---------- */

.aws-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--aws-accent-tint, #e6f4f5);
  border: 1px solid var(--aws-accent-tint-strong, #cfe7e9);
  box-shadow: 0 1px 2px rgba(14, 124, 134, 0.04);
}

.aws-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
  z-index: 2;
}

/* Pending placeholder — sits behind the <video> element by default.
   When the video has a working source/poster it covers the placeholder.
   When the JS error handler (or initial state) marks the wrap `.is-pending`,
   we hide the <video> and show the placeholder card. */
.aws-video-pending {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(14, 124, 134, 0.10) 0%,
      rgba(14, 124, 134, 0.04) 55%,
      rgba(14, 124, 134, 0) 100%
    ),
    var(--aws-accent-tint, #e6f4f5);
  color: var(--aws-accent-dark, #0a5e66);
  text-align: center;
  pointer-events: none;
}

.aws-video-pending-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--aws-accent, #0e7c86);
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  padding-left: 4px; /* optical centering of triangle glyph */
  box-shadow: 0 4px 14px rgba(14, 124, 134, 0.25);
}

.aws-video-pending-text {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--aws-accent-dark, #0a5e66);
}

/* When `.is-pending` is on the wrap, hide the video element and surface the
   placeholder. Integration agent / JS toggles this when the source 404s or
   when the file isn't yet recorded. */
.aws-video-wrap.is-pending .aws-video {
  display: none;
}

.aws-video-wrap.is-pending .aws-video-pending {
  z-index: 3;
}

/* Caption — shared across all videos on the page */
.aws-video-caption,
.aws-built-caption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted, #666);
  font-style: italic;
  text-align: center;
}

/* Fallback text node inside <video> (rendered by browser if codec unsupported) */
.aws-video-fallback {
  margin: 0;
  padding: 16px;
  color: var(--muted, #666);
  font-size: 0.9375rem;
  text-align: center;
}

/* ---------- Stats row ---------- */

.aws-built-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.aws-built-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px;
  background: #ffffff;
  border: 1px solid var(--aws-card-border, #d9e3e6);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(14, 124, 134, 0.04);
  text-align: left;
}

.aws-built-stat-num {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--aws-accent, #0e7c86);
}

.aws-built-stat-label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted, #666);
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
  .aws-built-container {
    gap: 28px;
  }
  .aws-built-stats {
    gap: 14px;
  }
  .aws-built-stat-num {
    font-size: 2.125rem;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .aws-built-container {
    gap: 24px;
  }
  .aws-built-narrative p {
    font-size: 1rem;
    line-height: 1.65;
  }
  .aws-built-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .aws-built-stat {
    padding: 16px 16px;
  }
  .aws-built-stat-num {
    font-size: 2rem;
  }
  .aws-video-pending-icon {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .aws-video {
    /* don't autoplay-loop spinning content for users who opt out */
    animation: none;
  }
}

/* ==== Knowledge Base ==== */
/* ==== Knowledge Base (modified) ====
   Component: aws-knowledge-base-mod
   Prefix: .aws-kb-
   Reuses .aws-video-wrap kit from component 2C (aws-what-i-built) — DO NOT redefine
   that block here; it's part of the shared video kit.

   In-page surface is a lede + Obsidian graph video + a single CTA.
   The 44-book grid + filters + book detail all live inside one modal that swaps
   panes between "library" (grid) and "detail" (single book) states.
*/

/* --- Container ----------------------------------------------------------- */

.aws-kb-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.aws-kb-lede {
  margin: 0;
  max-width: 720px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
}

/* --- Obsidian graph video ----------------------------------------------- */

.aws-kb-video-wrap {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aws-kb-video {
  /* size hint — actual aws-video-wrap base styles come from the shared kit */
  width: 100%;
  max-width: 880px;
  align-self: flex-start;
}

.aws-kb-video-caption {
  margin: 0;
  max-width: 720px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
}

/* --- CTA row ------------------------------------------------------------ */

.aws-kb-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

.aws-kb-open-list {
  /* uses .aws-button.primary base — only spacing adjustments here */
  white-space: nowrap;
}

.aws-kb-cta-meta {
  margin: 0;
}

/* --- Modal -------------------------------------------------------------- */
/* The shared .aws-modal-* kit handles backdrop, panel base, transitions,
   close-button basics. We only override the panel width and add per-pane styles. */

.aws-kb-modal-wide {
  /* mirrors the existing .aws-modal.is-wide pattern but scoped to KB */
  max-width: 1040px;
  width: calc(100% - 32px);
}

.aws-kb-modal-header {
  /* ensures wide title doesn't crowd close button */
  gap: 16px;
}

.aws-kb-modal-content {
  /* swap container — allow either pane to scroll inside it */
  display: block;
}

.aws-kb-modal-content[data-aws-kb-state="library"] .aws-kb-state-detail { display: none; }
.aws-kb-modal-content[data-aws-kb-state="detail"]  .aws-kb-state-library { display: none; }

.aws-kb-modal-footer {
  /* re-uses base footer pattern */
}

/* --- Pane: library ------------------------------------------------------ */

.aws-kb-state-library {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.aws-kb-modal-lede {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Filter bar */
.aws-kb-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: #f7f9fa;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.aws-kb-filter {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  font-family: inherit;
}

.aws-kb-filter:hover {
  color: var(--text);
  background: #ffffff;
}

.aws-kb-filter:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 2px;
}

.aws-kb-filter.is-active {
  background: #ffffff;
  color: var(--aws-accent);
  border-color: var(--aws-accent-tint-strong);
  box-shadow: 0 1px 2px rgba(14, 124, 134, 0.08);
}

/* Grid */
.aws-kb-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.aws-kb-book {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-kb-book.is-hidden {
  display: none;
}

.aws-kb-book-button {
  appearance: none;
  width: 100%;
  height: 100%;
  min-height: 130px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-kb-book-button:hover {
  border-color: var(--aws-accent-tint-strong);
  box-shadow: 0 4px 12px rgba(14, 124, 134, 0.08);
  transform: translateY(-1px);
}

.aws-kb-book-button:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 2px;
}

.aws-kb-book-title {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--text);
}

.aws-kb-book-author {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
  flex-grow: 1;
}

.aws-kb-book-cat-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--muted-soft);
  background: #f3f5f6;
  border-radius: 4px;
  padding: 2px 7px;
}

/* --- Pane: detail ------------------------------------------------------- */

.aws-kb-state-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aws-kb-detail-back {
  appearance: none;
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--aws-accent);
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-kb-detail-back:hover {
  background: var(--aws-accent-tint);
  border-color: var(--aws-accent-tint-strong);
}

.aws-kb-detail-back:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 2px;
}

.aws-kb-detail-title {
  margin: 8px 0 0 0;
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text);
}

.aws-kb-detail-author {
  margin: 0 0 8px 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.aws-kb-detail-teaches {
  margin: 0 0 14px 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

.aws-kb-detail-techniques-h {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aws-kb-detail-techniques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: aws-kb-tech;
}

.aws-kb-detail-techniques li {
  position: relative;
  padding: 10px 12px 10px 36px;
  background: var(--aws-accent-tint);
  border-left: 3px solid var(--aws-accent);
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}

.aws-kb-detail-techniques li::before {
  content: counter(aws-kb-tech);
  counter-increment: aws-kb-tech;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--aws-accent);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1023px) {
  .aws-kb-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .aws-kb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .aws-kb-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .aws-kb-filter {
    flex-shrink: 0;
  }

  .aws-kb-book-button {
    min-height: 110px;
    padding: 12px;
  }

  .aws-kb-cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .aws-kb-detail-title {
    font-size: 1.2rem;
  }
}

@media (max-width: 374px) {
  .aws-kb-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aws-kb-filter,
  .aws-kb-book,
  .aws-kb-book-button,
  .aws-kb-detail-back {
    transition: none;
  }

  .aws-kb-book-button:hover {
    transform: none;
  }

  .aws-kb-video video {
    /* in case the shared kit doesn't already pause autoplay under reduced motion */
    animation: none;
  }
}

/* ==== Analysis ==== */
/* ==== Analysis (NEW) ==== */
/* Section 6 — Step 3: Analyze every line for the moves it's making.
   Three zones: A (graph video), B (line tagging), C (pattern encoder). */

/* ---------- Container & shared zone shell ---------- */

.aws-anal-container {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1080px;
}

.aws-anal-zone {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 36px;
  border-top: 1px solid var(--aws-accent-tint-strong);
  position: relative;
}

.aws-anal-zone:first-child {
  padding-top: 0;
  border-top: 0;
}

.aws-anal-zone-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aws-accent-dark);
}

.aws-anal-zone-h {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.65rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.aws-anal-zone-lede,
.aws-anal-zone-sub {
  margin: 0;
  color: var(--muted);
  max-width: 720px;
  line-height: 1.65;
}

.aws-anal-zone-lede {
  font-size: 1rem;
}

.aws-anal-zone-sub {
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .aws-anal-container {
    gap: 48px;
  }
  .aws-anal-zone {
    padding-top: 28px;
  }
}

/* Shared `.aws-video-*` kit lives in the What I Built CSS — do not redefine here. */

/* ---------- Zone A: cross-referencing mount (component injected by Wave 6 integration) ---------- */

#aws-anal-zone-a-mount {
  margin-top: 8px;
}

/* ---------- Zone B: Line tagging ---------- */

.aws-anal-tag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .aws-anal-tag-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.aws-anal-tag-frame {
  padding: 36px 32px;
  gap: 18px;
}

.aws-anal-line {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.45;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.aws-anal-line-attribution {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted-soft);
  letter-spacing: 0.01em;
}

.aws-anal-tag-phrase {
  position: relative;
  cursor: pointer;
  border-bottom: 1px dotted var(--aws-accent-soft);
  padding-bottom: 1px;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  border-radius: 2px;
}

.aws-anal-tag-phrase:hover,
.aws-anal-tag-phrase:focus-visible,
.aws-anal-tag-phrase.is-active,
.aws-anal-tag-phrase.is-locked,
.aws-anal-tag-phrase.is-revealed {
  color: var(--aws-accent-dark);
  border-bottom-color: var(--aws-accent);
  border-bottom-style: solid;
  background-color: var(--aws-accent-tint-strong);
  box-shadow: 0 0 0 2px var(--aws-accent-tint-strong);
  border-radius: 3px;
}

.aws-anal-tag-phrase:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 3px;
}

.aws-anal-tag-text {
  color: inherit;
}

.aws-anal-tags-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aws-anal-tags-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.aws-anal-tags-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.aws-anal-show-all[aria-pressed="true"] {
  background-color: var(--aws-accent-tint);
  border-color: var(--aws-accent);
  color: var(--aws-accent-dark);
}

.aws-anal-tags-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aws-anal-tag {
  border: 1px solid var(--border);
  border-left: 3px solid var(--aws-accent-soft);
  border-radius: 10px;
  padding: 14px 16px;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aws-anal-tag:hover,
.aws-anal-tag:focus-visible {
  border-color: var(--aws-accent);
  border-left-color: var(--aws-accent);
}

.aws-anal-tag:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 2px;
}

.aws-anal-tag.is-active,
.aws-anal-tag.is-locked,
.aws-anal-tag.is-revealed {
  border-color: var(--aws-accent);
  border-left-color: var(--aws-accent-dark);
  background-color: var(--aws-accent-tint);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(14, 124, 134, 0.08);
}

.aws-anal-tag.is-locked {
  border-color: var(--aws-accent-dark);
}

.aws-anal-tag-name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
}

.aws-anal-tag-explain,
.aws-anal-tag-source {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
              margin-top 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-anal-tag.is-active .aws-anal-tag-explain,
.aws-anal-tag.is-locked .aws-anal-tag-explain,
.aws-anal-tag.is-revealed .aws-anal-tag-explain,
.aws-anal-tag.is-active .aws-anal-tag-source,
.aws-anal-tag.is-locked .aws-anal-tag-source,
.aws-anal-tag.is-revealed .aws-anal-tag-source {
  max-height: 240px;
  opacity: 1;
}

.aws-anal-tag-source {
  color: var(--muted-soft);
  font-size: 0.82rem;
}

.aws-anal-tag-source span {
  color: var(--text);
}

/* ---------- Zone C: Pattern encoder ---------- */

.aws-anal-encoder-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 16px;
  background-color: var(--aws-accent-tint);
  border: 1px solid var(--aws-accent-tint-strong);
  border-radius: 12px;
}

.aws-anal-select-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.aws-anal-select {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background-color: #fff;
  border: 1px solid var(--aws-card-border);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-anal-select:hover,
.aws-anal-select:focus-visible {
  border-color: var(--aws-accent);
}

.aws-anal-select:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 2px;
}

.aws-anal-encode-btn {
  flex: 0 0 auto;
}

.aws-anal-encoder-stage {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 8px;
  opacity: 1;
}

.aws-anal-encoder-stage[data-state="idle"] {
  opacity: 0.55;
}

.aws-anal-encoder-stage[data-state="idle"] .aws-anal-passage-card {
  border-style: dashed;
}

.aws-anal-passage-card {
  padding: 28px 28px;
  gap: 14px;
}

.aws-anal-passage {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.aws-anal-passage-source {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted-soft);
  letter-spacing: 0.01em;
}

.aws-anal-passage-sentence {
  display: inline;
  background-color: transparent;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  transition: background-color 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-anal-passage-sentence.is-pulsed {
  background-color: var(--aws-accent-tint);
}

/* Whole-passage pulse on first reveal */
.aws-anal-passage {
  transition: background-color 360ms cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 4px;
}
.aws-anal-passage.is-pulsed {
  background-color: var(--aws-accent-tint);
}

/* Encoder phrase + text spans (Zone C, hoverable) */
.aws-anal-encoder-text {
  color: inherit;
}

.aws-anal-encoder-phrase {
  position: relative;
  cursor: pointer;
  border-bottom: 1px dotted var(--aws-accent-soft);
  padding-bottom: 1px;
  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  border-radius: 2px;
}

.aws-anal-encoder-phrase:hover,
.aws-anal-encoder-phrase:focus-visible,
.aws-anal-encoder-phrase.is-active,
.aws-anal-encoder-phrase.is-locked {
  color: var(--aws-accent-dark);
  border-bottom-color: var(--aws-accent);
  border-bottom-style: solid;
  background-color: var(--aws-accent-tint-strong);
  box-shadow: 0 0 0 2px var(--aws-accent-tint-strong);
  border-radius: 3px;
}

.aws-anal-encoder-phrase:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 3px;
}

.aws-anal-encoder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .aws-anal-encoder-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.aws-anal-patterns,
.aws-anal-cross-refs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aws-anal-patterns-h,
.aws-anal-xrefs-h {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.aws-anal-patterns-list,
.aws-anal-xrefs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Pattern chip */
.aws-anal-pattern-chip {
  border: 1px solid var(--aws-card-border);
  border-left: 3px solid var(--aws-accent-soft);
  border-radius: 10px;
  padding: 14px 16px;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-anal-pattern-chip.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.aws-anal-pattern-chip:hover,
.aws-anal-pattern-chip:focus-visible {
  border-color: var(--aws-accent);
  border-left-color: var(--aws-accent);
}

.aws-anal-pattern-chip:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 2px;
}

.aws-anal-pattern-chip.is-active {
  border-color: var(--aws-accent);
  border-left-color: var(--aws-accent-dark);
  background-color: var(--aws-accent-tint);
  box-shadow: 0 2px 8px rgba(14, 124, 134, 0.08);
}

.aws-anal-pattern-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.aws-anal-pattern-explain {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

.aws-anal-pattern-source {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted-soft);
  font-style: italic;
}

/* Cross-reference card */
.aws-anal-xref-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--aws-accent-soft);
  border-radius: 8px;
  padding: 12px 14px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-anal-xref-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.aws-anal-xref-card.is-active {
  border-color: var(--aws-accent);
  border-left-color: var(--aws-accent-dark);
  background-color: var(--aws-accent-tint);
}

.aws-anal-xref-line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
}

.aws-anal-xref-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted-soft);
}

.aws-anal-xref-pattern-tag {
  display: inline-block;
  padding: 2px 8px;
  background-color: var(--aws-accent-tint);
  color: var(--aws-accent-dark);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.aws-anal-xref-source {
  letter-spacing: 0.01em;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .aws-anal-tag-phrase,
  .aws-anal-tag,
  .aws-anal-tag-explain,
  .aws-anal-tag-source,
  .aws-anal-pattern-chip,
  .aws-anal-xref-card,
  .aws-anal-passage,
  .aws-anal-passage-sentence,
  .aws-anal-encoder-phrase,
  .aws-anal-select {
    transition: none;
  }
  .aws-anal-tag.is-active,
  .aws-anal-tag.is-locked,
  .aws-anal-tag.is-revealed,
  .aws-anal-pattern-chip.is-revealed,
  .aws-anal-xref-card.is-revealed {
    transform: none;
  }
}

/* ==== Why This Matters ==== */
/* ==== Why This Matters (NEW) ==== */

.aws-why-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

/* ---- Thesis prose ---- */
.aws-why-thesis {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}

.aws-why-thesis-lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  font-weight: 500;
}

.aws-why-thesis-p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

.aws-why-thesis-strong {
  font-weight: 700;
  color: var(--text);
}

/* ---- 2x2 grid ---- */
.aws-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.aws-why-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 26px 26px;
  border-radius: 10px;
  border: 1px solid var(--border, #eaeaea);
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Broken side — muted, faded */
.aws-why-side-broken {
  background: #fafafa;
  border-color: #e8e8e8;
  box-shadow: none;
}

/* Possible side — accent-tinted, slightly elevated */
.aws-why-side-possible {
  background: var(--aws-accent-tint, #e6f4f5);
  border-color: var(--aws-accent-tint-strong, #cfe7e9);
  box-shadow: 0 4px 14px rgba(14, 124, 134, 0.08);
}

.aws-why-side-possible:hover,
.aws-why-side-possible:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(14, 124, 134, 0.14);
}

/* Side heading */
.aws-why-side-h {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.aws-why-side-broken .aws-why-side-h {
  color: #999;
}

.aws-why-side-possible .aws-why-side-h {
  color: var(--aws-accent-dark, #0a5e66);
}

/* List */
.aws-why-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.aws-why-side-item {
  position: relative;
  padding-left: 56px;
  min-height: 48px;
}

/* Big number */
.aws-why-side-num {
  position: absolute;
  top: -6px;
  left: 0;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}

.aws-why-side-broken .aws-why-side-num {
  color: #c0c0c0;
}

.aws-why-side-possible .aws-why-side-num {
  color: var(--aws-accent, #0e7c86);
}

.aws-why-side-label {
  margin: 0 0 4px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.aws-why-side-broken .aws-why-side-label {
  color: #555;
}

.aws-why-side-possible .aws-why-side-label {
  color: var(--text);
}

.aws-why-side-desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.aws-why-side-broken .aws-why-side-desc {
  color: #888;
}

.aws-why-side-possible .aws-why-side-desc {
  color: var(--text);
}

/* ---- Synthesis closer ---- */
.aws-why-synthesis {
  margin: 8px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 1.1875rem;
  line-height: 1.5;
  font-style: italic;
  font-weight: 500;
  color: var(--aws-accent-dark, #0a5e66);
}

/* ---- Tablet ---- */
@media (max-width: 1023px) {
  .aws-why-grid {
    gap: 14px;
  }
  .aws-why-side {
    padding: 24px 22px 22px;
  }
  .aws-why-side-num {
    font-size: 2.5rem;
  }
  .aws-why-synthesis {
    font-size: 1.125rem;
  }
}

/* ---- Mobile — single column, broken first then possible ---- */
@media (max-width: 767px) {
  .aws-why-container {
    gap: 28px;
  }
  .aws-why-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .aws-why-side {
    padding: 22px 20px 20px;
  }
  .aws-why-side-item {
    padding-left: 48px;
  }
  .aws-why-side-num {
    font-size: 2.25rem;
  }
  .aws-why-side-label {
    font-size: 1rem;
  }
  .aws-why-side-desc {
    font-size: 0.9rem;
  }
  .aws-why-synthesis {
    font-size: 1.0625rem;
    text-align: left;
  }
  .aws-why-thesis-lead {
    font-size: 1rem;
  }
  .aws-why-thesis-p {
    font-size: 0.9375rem;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .aws-why-side {
    transition: none;
  }
  .aws-why-side-possible:hover,
  .aws-why-side-possible:focus-within {
    transform: none;
  }
}

/* ==== Analysis Zone A — Cross-reference network (Wave 6 NEW) ==== */
/* aws-azone-a — Analysis Zone A
 * Two-library cross-reference network animation.
 * Visualizes the system connecting the canon to her body of work. */

.aws-azone-a-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px;
  background: var(--aws-card-bg);
  border: 1px solid var(--aws-card-border);
  border-radius: var(--aws-radius);
  box-shadow: var(--aws-card-shadow);
}

/* -------- Header -------- */
.aws-azone-a-header {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aws-azone-a-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aws-accent);
}

.aws-azone-a-h {
  margin: 0;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.aws-azone-a-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.55;
  max-width: 640px;
}

/* -------- Stage (3-col grid: books | svg | emails) -------- */
.aws-azone-a-stage {
  position: relative;
  display: grid;
  /* Book and email columns are tight on the sides; the MIDDLE column
     takes all remaining width so the connection lines have room to breathe.
     The SVG overlay sits position:absolute over the whole stage, so we
     have to explicitly anchor the books to col 1 and the emails to col 3
     — otherwise auto-placement collapses emails into the 1fr middle slot. */
  grid-template-columns: 220px 1fr 240px;
  gap: 0;
  align-items: stretch;
  min-height: 580px;
}

.aws-azone-a-col-books {
  grid-column: 1;
}

.aws-azone-a-col-emails {
  grid-column: 3;
}

.aws-azone-a-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.aws-azone-a-col-label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-soft);
  padding: 0 4px;
}

.aws-azone-a-col-books .aws-azone-a-col-label {
  text-align: left;
}

.aws-azone-a-col-emails .aws-azone-a-col-label {
  text-align: right;
}

.aws-azone-a-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* -------- Nodes (book + email tiles) -------- */
.aws-azone-a-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--aws-card-border);
  border-radius: var(--aws-radius-sm);
  cursor: pointer;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

.aws-azone-a-node:focus-visible {
  border-color: var(--aws-accent);
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.18);
}

.aws-azone-a-book {
  align-items: flex-start;
  border-left: 3px solid var(--aws-accent-tint-strong);
  text-align: left;
}

.aws-azone-a-email {
  align-items: flex-end;
  border-right: 3px solid var(--aws-accent-tint-strong);
  text-align: right;
}

.aws-azone-a-book-title,
.aws-azone-a-email-subject {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.aws-azone-a-book-author {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

/* Active state — applied to the focused/hovered/cycling node */
.aws-azone-a-node.is-active {
  border-color: var(--aws-accent);
  background: var(--aws-accent-tint);
  box-shadow: 0 4px 14px rgba(14, 124, 134, 0.18);
  transform: translateX(0);
}

.aws-azone-a-book.is-active {
  border-left-color: var(--aws-accent);
  border-left-width: 3px;
}

.aws-azone-a-email.is-active {
  border-right-color: var(--aws-accent);
  border-right-width: 3px;
}

/* Connected (the partner side) — slightly less prominent than the active node */
.aws-azone-a-node.is-connected {
  border-color: var(--aws-accent-soft);
  background: #f4fafa;
}

.aws-azone-a-book.is-connected {
  border-left-color: var(--aws-accent-soft);
}

.aws-azone-a-email.is-connected {
  border-right-color: var(--aws-accent-soft);
}

/* Dimmed (when something else is active and this isn't connected) */
.aws-azone-a-node.is-dimmed {
  opacity: 0.35;
}

/* -------- SVG overlay -------- */
.aws-azone-a-svg-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  /* This wrap floats above the grid, spanning the full stage so the SVG
     coordinates can reference book-edge to email-edge across all 3 columns. */
  grid-column: 1 / -1;
}

.aws-azone-a-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aws-azone-a-path {
  fill: none;
  stroke: var(--aws-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    stroke-width 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Drawn — line is laid down */
.aws-azone-a-path.is-drawn {
  opacity: 0.18;
}

/* Active — currently part of the focused/cycling subset */
.aws-azone-a-path.is-active {
  opacity: 0.85;
  stroke-width: 2;
}

/* Dimmed — another node has focus */
.aws-azone-a-path.is-faded {
  opacity: 0.06;
}

/* -------- Controls -------- */
.aws-azone-a-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 4px;
}

.aws-azone-a-hint {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  font-style: italic;
}

.aws-azone-a-restart-btn[hidden] {
  display: none;
}

/* -------- Cycle pulse on active path (subtle ambient motion) -------- */
@keyframes awsAzoneAPulse {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.32; }
}

.aws-azone-a-container[data-aws-zone-a-state="cycling"] .aws-azone-a-path.is-drawn:not(.is-active):not(.is-faded) {
  animation: awsAzoneAPulse 4.5s ease-in-out infinite;
}

.aws-azone-a-container[data-aws-zone-a-state="settled"] .aws-azone-a-path.is-drawn:not(.is-active):not(.is-faded) {
  animation: awsAzoneAPulse 6s ease-in-out infinite;
}

/* -------- Responsive — stack to single column under 768px -------- */
@media (max-width: 767px) {
  .aws-azone-a-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 18px;
  }

  .aws-azone-a-svg-wrap {
    display: none;
  }

  .aws-azone-a-col-emails .aws-azone-a-col-label {
    text-align: left;
  }

  .aws-azone-a-email {
    align-items: flex-start;
    text-align: left;
    border-right: none;
    border-left: 3px solid var(--aws-accent-tint-strong);
  }

  .aws-azone-a-email.is-active {
    border-left-color: var(--aws-accent);
  }

  .aws-azone-a-email.is-connected {
    border-left-color: var(--aws-accent-soft);
  }

  /* On mobile we lose the visual lines — use a hint chip instead */
  .aws-azone-a-node.is-connected::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--aws-accent);
  }

  .aws-azone-a-controls {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .aws-azone-a-node,
  .aws-azone-a-path {
    transition: none;
  }

  .aws-azone-a-container[data-aws-zone-a-state="cycling"] .aws-azone-a-path.is-drawn,
  .aws-azone-a-container[data-aws-zone-a-state="settled"] .aws-azone-a-path.is-drawn {
    animation: none;
  }
}


/* ==== Wider case-study layout (Wave 7 — page-scoped only) ==========
   The cross-reference network in Step 3 needs as much horizontal room
   as the viewport will give it. Bump the container, narrow the sidebar,
   add gap, and lift the .aws-anal-container's 1080px cap so Zone A
   (the cross-ref network) can use the full available width.
   Other case-study pages are untouched.
   ================================================================== */
.ai-writing-systems-page main .container,
.ai-writing-systems-page.case-study-page > .container,
.ai-writing-systems-page .case-study-page > .container {
  max-width: 1440px;
}
.ai-writing-systems-page .case-layout {
  grid-template-columns: 200px minmax(0, 1fr);
  /* Split gap: 56px between sidebar and content (column-gap), but
     no row-gap — sections drive their own vertical spacing via
     margin-bottom. Combined `gap: 56px` was adding 56px between
     every pair of sections on top of their 22px margin-bottom. */
  column-gap: 56px;
  row-gap: 0;
}
.ai-writing-systems-page .aws-anal-container {
  max-width: none;
}
@media (max-width: 1023px) {
  .ai-writing-systems-page main .container,
  .ai-writing-systems-page.case-study-page > .container,
  .ai-writing-systems-page .case-study-page > .container {
    max-width: 100%;
  }
}

/* ==== Brain mascot (Wave 9) ==========================================
   Adds a whimsical brain-with-face CTA next to the Step 2 lede. Acts as
   a button that opens the existing knowledge-base modal. The original
   text button (#aws-kb-open-list) stays intact below the video as a
   keyboard-friendly fallback.
   Prefixes:
     .aws-kb-intro-*   — 2-col layout wrapper for lede + brain
     .aws-kb-brain-*   — the mascot itself, face, and speech bubble
   ==================================================================== */

/* Two-column layout for lede + brain */
.aws-kb-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.aws-kb-intro-row .aws-kb-lede {
  /* override the global max-width inside the 2-col layout so the lede
     can fill its column without leaving an awkward dead strip */
  max-width: none;
}

@media (max-width: 1023px) {
  .aws-kb-intro-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .aws-kb-intro-row .aws-kb-brain-wrap {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* --- Brain wrap + button reset ---------------------------------------- */

.aws-kb-brain-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 240px;
}

.aws-kb-brain-btn {
  /* unstyled native button -> our composition */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 14px;
  position: relative;
  border-radius: 18px;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter   220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-kb-brain-btn:hover {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 6px 18px rgba(14, 124, 134, 0.18));
}

.aws-kb-brain-btn:active {
  transform: translateY(0) scale(0.97);
  filter: drop-shadow(0 2px 6px rgba(14, 124, 134, 0.18));
}

.aws-kb-brain-btn:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 4px;
}

/* --- Speech bubble ---------------------------------------------------- */

.aws-kb-brain-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1.5px solid var(--aws-accent-tint-strong, #cfe7e9);
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(14, 124, 134, 0.10);
  max-width: 260px;
  text-align: center;
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.aws-kb-brain-btn:hover .aws-kb-brain-bubble {
  box-shadow: 0 6px 20px rgba(14, 124, 134, 0.18);
  border-color: var(--aws-accent);
}

/* the little tail pointing down at the brain */
.aws-kb-brain-bubble::before,
.aws-kb-brain-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid var(--aws-accent-tint-strong, #cfe7e9);
  transform: translateX(-50%);
}
.aws-kb-brain-bubble::after {
  bottom: -8px;
  border-top-color: #ffffff;
}

.aws-kb-brain-bubble-text {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--aws-accent);
  letter-spacing: 0.005em;
}

/* --- Brain shape ------------------------------------------------------ */
/* Built from two pink rounded "hemispheres" plus a few inner-fold marks
   to suggest wrinkles. The whole thing sits in a square box so the
   bobbing animation has a clean origin. */

.aws-kb-brain {
  position: relative;
  width: 180px;
  height: 150px;
  /* idle bob applies to the brain only, not the whole button. that way
     the speech bubble feels stable while the brain "breathes". */
  animation: aws-kb-brain-bob 4s ease-in-out infinite;
  transform-origin: 50% 60%;
}

/* soft contact shadow under the brain */
.aws-kb-brain-shadow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 110px;
  height: 14px;
  background: radial-gradient(
    ellipse at center,
    rgba(14, 124, 134, 0.22) 0%,
    rgba(14, 124, 134, 0.0) 70%
  );
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(1px);
  z-index: 0;
}

.aws-kb-brain-hemi {
  position: absolute;
  top: 6px;
  width: 56%;
  height: 88%;
  background: linear-gradient(
    160deg,
    #ffc7d4 0%,
    #f7a5b9 55%,
    #e98aa5 100%
  );
  border: 2px solid #c4708a;
  box-shadow:
    inset -4px -6px 0 rgba(196, 112, 138, 0.18),
    inset  4px  6px 0 rgba(255, 255, 255, 0.35);
  z-index: 1;
}

/* Left hemisphere: rounded everywhere except its right-bottom inner lobe
   which we hint at with a flatter radius. */
.aws-kb-brain-hemi-l {
  left: 2%;
  border-radius: 60% 45% 55% 65% / 55% 50% 60% 55%;
  transform: rotate(-3deg);
}

.aws-kb-brain-hemi-r {
  right: 2%;
  border-radius: 45% 60% 65% 55% / 50% 55% 55% 60%;
  transform: rotate(3deg);
}

/* The inner valley between hemispheres: a soft shadow line down the middle */
.aws-kb-brain::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: 5px;
  height: 80%;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(167, 80, 105, 0) 0%,
    rgba(167, 80, 105, 0.35) 25%,
    rgba(167, 80, 105, 0.45) 70%,
    rgba(167, 80, 105, 0) 100%
  );
  border-radius: 4px;
  z-index: 2;
  pointer-events: none;
}

/* Wrinkle folds — short curved strokes drawn with rounded borders */
.aws-kb-brain-fold {
  position: absolute;
  border: 2px solid #c4708a;
  border-radius: 50%;
  background: transparent;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
}
.aws-kb-brain-fold-1 {
  top: 14%;
  left: 14%;
  width: 28px;
  height: 16px;
  border-bottom-color: transparent;
  border-right-color: transparent;
  transform: rotate(-18deg);
}
.aws-kb-brain-fold-2 {
  top: 16%;
  right: 14%;
  width: 28px;
  height: 16px;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(18deg);
}
.aws-kb-brain-fold-3 {
  bottom: 22%;
  left: 18%;
  width: 22px;
  height: 14px;
  border-top-color: transparent;
  border-right-color: transparent;
  transform: rotate(20deg);
}
.aws-kb-brain-fold-4 {
  bottom: 24%;
  right: 18%;
  width: 22px;
  height: 14px;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-20deg);
}

/* --- Face ------------------------------------------------------------- */

.aws-kb-brain-face {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.aws-kb-brain-eye {
  position: absolute;
  top: 44%;
  width: 14px;
  height: 14px;
  background: var(--text, #1a1a1a);
  border-radius: 50%;
  transform-origin: center;
  animation: aws-kb-brain-blink 6s ease-in-out infinite;
}

/* tiny white catchlight to keep eyes friendly, not stare-y */
.aws-kb-brain-eye::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
}

.aws-kb-brain-eye-l { left: 30%; }
.aws-kb-brain-eye-r { right: 30%; }

.aws-kb-brain-smile {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 28px;
  height: 14px;
  border: 2.5px solid var(--text, #1a1a1a);
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 28px 28px;
  transform: translateX(-50%);
  background: transparent;
}

/* Soft cheek blush — sells the "friendly" read */
.aws-kb-brain-cheek {
  position: absolute;
  top: 56%;
  width: 12px;
  height: 8px;
  background: rgba(214, 92, 122, 0.45);
  border-radius: 50%;
  filter: blur(1px);
}
.aws-kb-brain-cheek-l { left: 22%; }
.aws-kb-brain-cheek-r { right: 22%; }

/* --- Animations ------------------------------------------------------- */

@keyframes aws-kb-brain-bob {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-7px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes aws-kb-brain-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 98%      { transform: scaleY(0.1); }
}

/* --- Mobile sizing ---------------------------------------------------- */

@media (max-width: 767px) {
  .aws-kb-brain-wrap { min-height: 200px; }
  .aws-kb-brain {
    width: 150px;
    height: 124px;
  }
  .aws-kb-brain-bubble { padding: 8px 14px; max-width: 220px; }
  .aws-kb-brain-bubble-text { font-size: 0.88rem; }
}

/* --- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aws-kb-brain,
  .aws-kb-brain-eye {
    animation: none;
  }
  .aws-kb-brain-btn,
  .aws-kb-brain-bubble {
    transition: none;
  }
  .aws-kb-brain-btn:hover {
    transform: none;
  }
  .aws-kb-brain-btn:active {
    transform: none;
  }
}

/* ==== Canon enrichment (Wave 9) ==== */
/* Detail-state additions: "Why it matters" + "How it shows up in
   Olivia's writing" sit between the teaches sub-line and the
   techniques list. Eyebrow heads, comfortable reading line-height,
   generous spacing between sections. */

.aws-kb-detail-why-h,
.aws-kb-detail-olivia-h {
  margin: 18px 0 8px 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--aws-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.aws-kb-detail-why,
.aws-kb-detail-olivia {
  margin: 0 0 6px 0;
  max-width: 62ch;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.65;
}

.aws-kb-detail-olivia {
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  .aws-kb-detail-why,
  .aws-kb-detail-olivia {
    font-size: 0.94rem;
    line-height: 1.6;
  }
  .aws-kb-detail-why-h,
  .aws-kb-detail-olivia-h {
    margin-top: 14px;
  }
}

/* ==== Cross-reference modal (Wave 8) ==== */
/* The shared .aws-modal-* kit handles backdrop, panel base, transitions,
   scroll lock, and reduced-motion. These rules add the connection-explanation
   surface on top of that base. Prefix: .aws-azone-a-modal- */

.aws-azone-a-modal {
  max-width: 720px;
}

.aws-azone-a-modal-header {
  align-items: flex-start;
  gap: 16px;
  padding: 22px 26px 18px;
}

.aws-azone-a-modal-titlewrap {
  flex: 1 1 auto;
  min-width: 0;
}

.aws-azone-a-modal-eyebrow {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aws-accent);
  font-weight: 600;
}

.aws-azone-a-modal-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  word-break: break-word;
}

.aws-azone-a-modal-author {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 400;
}

.aws-azone-a-modal-author:empty {
  display: none;
}

.aws-azone-a-modal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 26px 16px;
  border-bottom: 1px solid var(--border);
  background: #fbfdfd;
}

.aws-azone-a-modal-tab {
  appearance: none;
  background: #ffffff;
  border: 1px solid var(--aws-card-border);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aws-azone-a-modal-tab:hover,
.aws-azone-a-modal-tab:focus-visible {
  border-color: var(--aws-accent);
  color: var(--aws-accent-dark);
  background: var(--aws-accent-tint);
  outline: none;
}

.aws-azone-a-modal-tab.is-active {
  background: var(--aws-accent);
  border-color: var(--aws-accent);
  color: #ffffff;
}

.aws-azone-a-modal-tab.is-active:hover,
.aws-azone-a-modal-tab.is-active:focus-visible {
  background: var(--aws-accent-dark);
  border-color: var(--aws-accent-dark);
  color: #ffffff;
}

.aws-azone-a-modal-content {
  padding: 24px 26px 22px;
}

.aws-azone-a-modal-oneliner {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}

.aws-azone-a-modal-quote {
  margin: 0 0 18px;
  padding: 10px 0 10px 16px;
  border-left: 3px solid var(--aws-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  background: transparent;
}

.aws-azone-a-modal-explanation {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
}

.aws-azone-a-modal-explanation p {
  margin: 0 0 12px;
}

.aws-azone-a-modal-explanation p:last-child {
  margin-bottom: 0;
}

.aws-azone-a-modal-footer {
  padding: 14px 26px;
}

.aws-azone-a-modal-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted-soft);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .aws-azone-a-modal {
    max-height: 100vh;
    height: 100vh;
    max-width: 100%;
    border-radius: 0;
  }

  .aws-azone-a-modal-header {
    padding: 18px 18px 14px;
  }

  .aws-azone-a-modal-title {
    font-size: 1.18rem;
  }

  .aws-azone-a-modal-tabs {
    padding: 12px 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .aws-azone-a-modal-tab {
    flex: 0 0 auto;
  }

  .aws-azone-a-modal-content {
    padding: 18px 18px 16px;
  }

  .aws-azone-a-modal-explanation {
    font-size: 1rem;
  }

  .aws-azone-a-modal-footer {
    padding: 12px 18px;
  }
}

/* ==========================================================================
   Wave 11 — Design pass (visual hierarchy + interactability cues)
   See: ot-deliverable/wave11/audit/design-audit.md

   Vocabulary:
   - --aws-accent-bold (#0a5d65): louder cousin of --aws-accent for static
     command-the-eye surfaces (badges, primary CTAs, headline numerals).
   - --aws-spotlight-bg (#fdfaf2): warm cream for "this is the takeaway" cards.
   - Card hover convention: translateY(-2px) + accent border + accent shadow.
   - Static cards (no cursor:pointer) get NO hover state — absence becomes
     the convention for "this isn't clickable."
   ========================================================================== */

/* --- Color tokens (additions) --- */
.ai-writing-systems-page {
  --aws-accent-bold: #0a5d65;
  --aws-spotlight-bg: #fdfaf2;
  --aws-spotlight-border: #f0e9d6;
  --aws-shadow-accent: 0 10px 24px rgba(14, 124, 134, 0.14);
  --aws-shadow-accent-strong: 0 14px 32px rgba(14, 124, 134, 0.22);
  --aws-numeric-display: var(--aws-accent-bold);
}

/* --- Page-wide changes --- */

/* Eyebrow utility — single source of truth for tracked-uppercase labels */
.ai-writing-systems-page .aws-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aws-accent-bold);
  margin: 0;
}

/* --- Numbered step badges --- */
.ai-writing-systems-page .aws-section-header--step {
  position: relative;
  padding-left: 60px;
  min-height: 44px;
}

.ai-writing-systems-page .aws-step-badge {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--aws-accent-bold);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(14, 124, 134, 0.28);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .ai-writing-systems-page .aws-section-header--step {
    padding-left: 0;
    padding-top: 56px;
  }
  .ai-writing-systems-page .aws-step-badge {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }
}

/* --- Display stats / numerals --- */

/* Bump the existing built-stat numerals to display weight */
.ai-writing-systems-page .aws-built-stat-num {
  font-size: 3rem;
  font-weight: 700;
  color: var(--aws-accent-bold);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Headline stat (first stat in the row — "196") wins over peers */
.ai-writing-systems-page .aws-built-stats .aws-built-stat:first-child .aws-built-stat-num {
  font-size: 3.4rem;
}

.ai-writing-systems-page .aws-built-stats .aws-built-stat:first-child {
  border-color: var(--aws-accent);
  border-top: 3px solid var(--aws-accent-bold);
  background: var(--aws-accent-tint);
}

/* Stat label readability bump */
.ai-writing-systems-page .aws-built-stat-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

/* --- Primary CTA + button polish --- */
.ai-writing-systems-page .aws-button.primary {
  background: var(--aws-accent-bold);
  border-color: var(--aws-accent-bold);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 14px 32px;
  box-shadow: 0 6px 18px rgba(14, 124, 134, 0.28);
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.2s ease,
              box-shadow 0.2s ease;
}

.ai-writing-systems-page .aws-button.primary:hover,
.ai-writing-systems-page .aws-button.primary:focus-visible {
  background: var(--aws-accent-dark);
  border-color: var(--aws-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(14, 124, 134, 0.36);
}

/* Small primary button keeps its compact padding */
.ai-writing-systems-page .aws-button.primary.is-small {
  padding: 8px 18px;
}

/* --- Card hover convention --- */
/* Shared signature for clickable cards: translateY -2px + accent border + accent shadow */
.ai-writing-systems-page .aws-kb-book-button:hover,
.ai-writing-systems-page .aws-kb-book-button:focus-visible,
.ai-writing-systems-page .aws-azone-a-node:hover,
.ai-writing-systems-page .aws-azone-a-node:focus-visible,
.ai-writing-systems-page .aws-anal-xref-card:hover,
.ai-writing-systems-page .aws-anal-xref-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--aws-accent);
  box-shadow: 0 10px 24px rgba(14, 124, 134, 0.15);
  cursor: pointer;
}

/* Stronger hover on the 44 book cards (44 cards × weak hover = directory) */
.ai-writing-systems-page .aws-kb-book-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(14, 124, 134, 0.18);
  background: var(--aws-accent-tint);
}

/* Drop the false-interactability hover on hypothesis items (decision: not clickable) */
.ai-writing-systems-page .aws-prob-hyp-item:hover {
  transform: none;
  box-shadow: none;
  cursor: default;
}

.ai-writing-systems-page .aws-prob-hyp-item {
  border-color: var(--aws-accent-tint-strong);
}

/* --- Spotlight payoff moments --- */

/* Section 2 — the question quote */
.ai-writing-systems-page .aws-prob-question {
  background: var(--aws-spotlight-bg);
  border: 1px solid var(--aws-spotlight-border);
  border-left: 5px solid var(--aws-accent-bold);
  padding: 22px 26px;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);
}

/* Section 4 — the methodology summary card ("Three things I expected. One I didn't.") */
.ai-writing-systems-page .aws-s4-summary {
  background: var(--aws-spotlight-bg);
  border-color: var(--aws-spotlight-border);
  border-left: 4px solid var(--aws-accent-bold);
}

.ai-writing-systems-page .aws-s4-sum-h {
  font-size: 1.25rem;
}

/* Section 5 — the brief card (warm spotlight + accent stripe) */
.ai-writing-systems-page .aws-s5-brief-card {
  background: var(--aws-spotlight-bg);
  border: 1px solid var(--aws-spotlight-border);
  border-left: 4px solid var(--aws-accent-bold);
  padding: 22px 24px;
}

/* Section 8 — the why-synthesis (centered closure card) */
.ai-writing-systems-page .aws-why-synthesis {
  padding: 24px 32px;
  background: var(--aws-spotlight-bg);
  border: 1px solid var(--aws-spotlight-border);
  border-left: 4px solid var(--aws-accent-bold);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(14, 124, 134, 0.08);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.3rem);
}

/* --- Section-specific touches --- */

/* §1 Overview — the question lands harder */
.ai-writing-systems-page .aws-overview .overview-question {
  font-size: clamp(1.4rem, 1.1rem + 0.85vw, 1.7rem);
  border-left: 4px solid var(--aws-accent-bold);
  padding-left: 14px;
  margin-top: 18px;
  margin-bottom: 18px;
}

/* §2 Problem — the bold lead is the section's billboard thesis */
.ai-writing-systems-page .aws-prob-bold-lead {
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.6rem);
  color: var(--aws-accent-dark);
  border-left: 4px solid var(--aws-accent-bold);
  padding-left: 16px;
  line-height: 1.35;
}

/* §2 Problem — "My hypothesis:" eyebrow promotion */
.ai-writing-systems-page .aws-prob-hyp-leadin {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-style: normal;
  color: var(--aws-accent-bold);
  font-size: 0.85rem;
  border-left: 4px solid var(--aws-accent-bold);
  padding-left: 12px;
  line-height: 1;
  padding-top: 4px;
  padding-bottom: 4px;
}
.ai-writing-systems-page .aws-prob-hyp-leadin em {
  font-style: normal;
}

/* §3 Knowledge Base — demote the secondary CTA so brain mascot wins */
.ai-writing-systems-page .aws-kb-cta-row .aws-button.primary.aws-kb-open-list {
  background: #ffffff;
  color: var(--aws-accent-bold);
  border: 1px solid var(--aws-accent);
  box-shadow: none;
  font-weight: 600;
}
.ai-writing-systems-page .aws-kb-cta-row .aws-button.primary.aws-kb-open-list:hover,
.ai-writing-systems-page .aws-kb-cta-row .aws-button.primary.aws-kb-open-list:focus-visible {
  background: var(--aws-accent-tint);
  color: var(--aws-accent-bold);
  border-color: var(--aws-accent);
  transform: translateY(-1px);
}

/* §3 Knowledge Base — brain mascot ambient breathing */
@keyframes aws-brain-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
.ai-writing-systems-page .aws-kb-brain-btn {
  animation: aws-brain-breathe 3.6s ease-in-out infinite;
  transform-origin: center center;
}
.ai-writing-systems-page .aws-kb-brain-btn:hover,
.ai-writing-systems-page .aws-kb-brain-btn:focus-visible {
  animation-play-state: paused;
}

/* §3 Knowledge Base — filter bar contrast reversal: active wins */
.ai-writing-systems-page .aws-kb-filter.is-active {
  background: var(--aws-accent-bold);
  color: #ffffff;
  border-color: var(--aws-accent-bold);
  box-shadow: 0 2px 8px rgba(14, 124, 134, 0.20);
}
.ai-writing-systems-page .aws-kb-filter.is-active:hover {
  background: var(--aws-accent-dark);
  color: #ffffff;
}

/* §4 Analysis — Zone A path opacity bump (lines must be visible) */
.ai-writing-systems-page .aws-azone-a-path.is-drawn {
  opacity: 0.32;
  stroke-width: 1.75;
}
.ai-writing-systems-page .aws-azone-a-path.is-active {
  opacity: 0.95;
}

/* §4 Analysis — tagged phrase resting state stronger */
.ai-writing-systems-page .aws-anal-tag-phrase {
  text-decoration: underline;
  text-decoration-color: var(--aws-accent-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background-color: rgba(230, 244, 245, 0.4);
  border-radius: 3px;
  padding: 1px 2px;
}

/* §4 Analysis — zone H3 step up from body */
.ai-writing-systems-page .aws-anal-zone-h {
  font-size: clamp(1.55rem, 2.3vw, 1.85rem);
}

/* §4 Analysis — zone eyebrow promotion (uses eyebrow utility values) */
.ai-writing-systems-page .aws-anal-zone-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--aws-accent-bold);
  text-transform: uppercase;
  border-left: 4px solid var(--aws-accent-bold);
  padding-left: 12px;
  line-height: 1.4;
}

/* §5 Methodology — active tab wins clearly */
.ai-writing-systems-page .aws-s4-tab.active {
  background: var(--aws-accent-tint);
  border-color: var(--aws-accent);
}
.ai-writing-systems-page .aws-s4-tab.active::after,
.ai-writing-systems-page .aws-s4-tab.active .aws-s4-tab-underline {
  background: var(--aws-accent-bold);
  height: 4px;
}

/* §5 Methodology — tab numeral louder */
.ai-writing-systems-page .aws-s4-tab-num {
  font-size: 0.92rem;
  font-weight: 700;
}

/* §5 Methodology — tab pre-hover affordance */
.ai-writing-systems-page .aws-s4-tab:not(.active):hover {
  border-bottom: 2px solid var(--aws-accent-tint-strong);
}

/* §6 Watch It Write — the Generate button is the page's marquee CTA */
@keyframes aws-cta-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(14, 124, 134, 0.28); transform: translateY(0); }
  50%      { box-shadow: 0 10px 26px rgba(14, 124, 134, 0.36); transform: translateY(-1px); }
}
.ai-writing-systems-page .aws-s5-generate-btn {
  padding: 14px 36px;
  animation: aws-cta-pulse 2.6s ease-in-out infinite;
}
.ai-writing-systems-page .aws-s5-generate-btn:hover,
.ai-writing-systems-page .aws-s5-generate-btn:focus-visible {
  animation-play-state: paused;
}

/* §6 Watch It Write — annotations panel header */
.ai-writing-systems-page .aws-s5-anno-h {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aws-accent-bold);
  border-left: 4px solid var(--aws-accent-bold);
  padding-left: 10px;
  line-height: 1.4;
}

/* §6 Watch It Write — empty-state instruction more visible */
.ai-writing-systems-page .aws-s5-anno-empty {
  color: var(--aws-accent-bold);
  font-style: normal;
  font-size: 1rem;
  font-weight: 500;
}

/* §6 Watch It Write — perf-line numerals as display stats (inline) */
.ai-writing-systems-page .aws-s5-perf-line strong {
  color: var(--aws-accent-bold);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.1em;
}

/* §7 Why This Matters — thesis lead reads as a claim */
.ai-writing-systems-page .aws-why-thesis-lead {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--aws-card-border);
  margin-bottom: 18px;
}

/* §7 Why This Matters — named problems as inline pills */
.ai-writing-systems-page .aws-why-thesis-strong {
  display: inline-block;
  padding: 2px 10px;
  background: var(--aws-accent-tint);
  border-left: 3px solid var(--aws-accent-bold);
  border-radius: 2px;
  margin-right: 6px;
  font-weight: 700;
  color: var(--aws-accent-dark);
}

/* §7 Why This Matters — "broken" side warm-mute (not gray-dead) */
.ai-writing-systems-page .aws-why-side-broken {
  background: #f7f5f1;
  border-color: #e6e3dd;
}

/* §8 How I Work — the Open the journal button gets the same pulse */
.ai-writing-systems-page .aws-s8-open-btn {
  padding: 14px 36px;
  animation: aws-cta-pulse 2.6s ease-in-out infinite;
}
.ai-writing-systems-page .aws-s8-open-btn:hover,
.ai-writing-systems-page .aws-s8-open-btn:focus-visible {
  animation-play-state: paused;
}

/* --- Reduced motion safety: disable all Wave 11 animations --- */
@media (prefers-reduced-motion: reduce) {
  .ai-writing-systems-page .aws-kb-brain-btn,
  .ai-writing-systems-page .aws-s5-generate-btn,
  .ai-writing-systems-page .aws-s8-open-btn {
    animation: none;
  }
  .ai-writing-systems-page .aws-button.primary,
  .ai-writing-systems-page .aws-kb-book-button,
  .ai-writing-systems-page .aws-azone-a-node,
  .ai-writing-systems-page .aws-anal-xref-card,
  .ai-writing-systems-page .aws-s4-tab {
    transition: none;
  }
  .ai-writing-systems-page .aws-button.primary:hover,
  .ai-writing-systems-page .aws-kb-book-button:hover,
  .ai-writing-systems-page .aws-azone-a-node:hover,
  .ai-writing-systems-page .aws-anal-xref-card:hover {
    transform: none;
  }
}

/* ==== Wave 12 — Cross-ref modal excerpt rendering (before/highlight/after) ==== */

/* When the excerpt structure is in play, the legacy quote rules need to
   step back: no left border (the inner wrap handles its own framing),
   no italic on the container (per-child styles control italic), and
   block-level layout for the before / target / after stack. */
.aws-azone-a-modal-quote.aws-azone-a-modal-excerpt {
  margin: 0 0 18px;
  padding: 18px 22px;
  border-left: 3px solid var(--aws-accent);
  background: #fff;
  border-radius: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.7;
  font-style: normal;
  color: var(--text);
}

/* Before / after: muted italic context that recedes so the eye
   tracks straight to the highlighted target line. */
.aws-azone-a-modal-excerpt .aws-azone-a-modal-before,
.aws-azone-a-modal-excerpt .aws-azone-a-modal-after {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.aws-azone-a-modal-excerpt .aws-azone-a-modal-before {
  margin-bottom: 10px;
}

.aws-azone-a-modal-excerpt .aws-azone-a-modal-after {
  margin-top: 10px;
}

/* Target wrap is the paragraph that holds the highlighted span; it
   keeps the highlight from stretching across the full container width
   and lets line-wraps break gracefully. */
.aws-azone-a-modal-excerpt .aws-azone-a-modal-target-wrap {
  margin: 0;
}

/* The highlighted target line — marker-pen pull-quote effect using
   the page's teal accent tint. box-decoration-break: clone makes the
   highlight wrap cleanly across multiple lines. */
.aws-azone-a-modal-excerpt .aws-azone-a-modal-target {
  background-color: var(--aws-accent-tint-strong);
  color: var(--text);
  padding: 2px 6px;
  border-radius: 3px;
  font-style: normal;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Defensive: if a context paragraph slipped through empty (shouldn't
   happen given the JS guard), don't leave a visible gap. */
.aws-azone-a-modal-excerpt .aws-azone-a-modal-before:empty,
.aws-azone-a-modal-excerpt .aws-azone-a-modal-after:empty {
  display: none;
}

@media (max-width: 768px) {
  .aws-azone-a-modal-quote.aws-azone-a-modal-excerpt {
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* ==== Watch It Write enhancements (Wave 13) ====
 *
 * Adds three interactive layers on top of the streaming reveal:
 *   1. Bidirectional hover (output paragraph <-> annotation chip).
 *   2. Agentic process hints (planner / critic / retrieval) — RED.
 *   3. Brief-retrieval popovers on hoverable brief phrases.
 *
 * Red color choice: --aws-s5-agentic-red = #c0392b. Distinct from the
 * teal accent (--aws-accent) used for voice highlighting, and distinct
 * from Ramble's more saturated identity red. Used only on agentic
 * markers and their tooltips so "red = agent decision" reads cleanly.
 */

.aws-s5-stage {
  --aws-s5-agentic-red: #c0392b;
  --aws-s5-agentic-red-tint: rgba(192, 57, 43, 0.08);
  --aws-s5-link-glow: rgba(20, 184, 166, 0.12);
}

/* Brief-card needs to be a positioning context for the retrieval popover */
.aws-s5-brief-card {
  position: relative;
}

/* --- Brief retrieval phrases --- */
.aws-s5-brief-phrase {
  background: linear-gradient(transparent 60%, var(--aws-accent-tint, rgba(20, 184, 166, 0.18)) 60%);
  background-size: 100% 100%;
  cursor: help;
  border-radius: 2px;
  padding: 0 2px;
  transition: background-color 160ms ease, box-shadow 160ms ease;
  outline: none;
}

.aws-s5-brief-phrase:hover,
.aws-s5-brief-phrase:focus-visible,
.aws-s5-brief-phrase.is-active {
  background: var(--aws-accent-tint, rgba(20, 184, 166, 0.22));
  box-shadow: inset 0 -2px 0 var(--aws-accent, #14b8a6);
}

.aws-s5-brief-phrase:focus-visible {
  outline: 2px solid var(--aws-accent, #14b8a6);
  outline-offset: 2px;
}

/* --- Brief retrieval popover --- */
.aws-s5-retrieval-pop {
  position: absolute;
  left: 20px;
  right: 20px;
  top: calc(100% - 6px);
  z-index: 20;
  background: #ffffff;
  border: 1px solid var(--border-strong, #d6d3cf);
  border-left: 3px solid var(--aws-accent, #14b8a6);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px rgba(20, 30, 50, 0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 540px;
}

.aws-s5-retrieval-pop[hidden] {
  display: none;
}

.aws-s5-retrieval-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft, #8a8a8a);
}

.aws-s5-retrieval-phrase {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1a1a1a);
}

.aws-s5-retrieval-list {
  margin: 4px 0 0;
  padding-left: 18px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aws-s5-retrieval-item {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #1a1a1a);
}

/* --- Bidirectional hover states --- */
.aws-s5-stream-linked {
  cursor: pointer;
  border-left: 2px solid transparent;
  padding-left: 8px;
  margin-left: -10px;
  border-radius: 2px;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.aws-s5-stream-linked:hover,
.aws-s5-stream-linked:focus-visible,
.aws-s5-stream-linked.is-active {
  background: var(--aws-s5-link-glow);
  border-left-color: var(--aws-accent, #14b8a6);
  outline: none;
}

.aws-s5-stream-linked:focus-visible {
  box-shadow: 0 0 0 2px var(--aws-accent, #14b8a6);
}

.aws-s5-chip-linked {
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.aws-s5-chip-linked:hover,
.aws-s5-chip-linked:focus-visible,
.aws-s5-chip-linked.is-active {
  background: var(--aws-s5-link-glow);
  border-left-color: var(--aws-accent, #14b8a6);
  box-shadow: 0 1px 6px rgba(20, 30, 50, 0.06);
  outline: none;
}

.aws-s5-chip-linked:focus-visible {
  box-shadow: 0 0 0 2px var(--aws-accent, #14b8a6);
}

/* --- Stream row (paragraph + agentic marker side-by-side) --- */
.aws-s5-stream-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

.aws-s5-stream-row .aws-s5-stream {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Agentic process markers (RED) --- */
.aws-s5-agentic-marker {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aws-s5-agentic-red-tint);
  color: var(--aws-s5-agentic-red);
  border: 1px solid var(--aws-s5-agentic-red);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: help;
  position: relative;
  transition: background-color 160ms ease, transform 160ms ease;
}

.aws-s5-agentic-marker:hover,
.aws-s5-agentic-marker:focus-visible {
  background: rgba(192, 57, 43, 0.16);
  outline: none;
}

.aws-s5-agentic-marker:focus-visible {
  box-shadow: 0 0 0 2px var(--aws-s5-agentic-red);
}

.aws-s5-agentic-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aws-s5-agentic-red);
  flex: 0 0 auto;
}

.aws-s5-agentic-label {
  white-space: nowrap;
}

/* Tooltip body — reveals on hover/focus of the marker */
.aws-s5-agentic-tip {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 280px;
  background: #1a1a1a;
  color: #f7f7f5;
  border-radius: 6px;
  padding: 10px 12px;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  z-index: 25;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  white-space: normal;
}

.aws-s5-agentic-tip::before {
  content: "";
  position: absolute;
  right: 18px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: #1a1a1a;
  transform: rotate(45deg);
  border-radius: 1px;
}

.aws-s5-agentic-marker:hover .aws-s5-agentic-tip,
.aws-s5-agentic-marker:focus-visible .aws-s5-agentic-tip,
.aws-s5-agentic-marker:focus .aws-s5-agentic-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.aws-s5-agentic-tip-kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aws-s5-agentic-red);
}

.aws-s5-agentic-tip-body {
  color: #f7f7f5;
}

/* --- Mobile adaptation --- */
@media (max-width: 720px) {
  .aws-s5-stream-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .aws-s5-agentic-marker {
    align-self: flex-start;
    margin-top: 0;
    margin-left: 0;
  }
  /* On narrow screens, the tooltip would overflow the card. Pin it
     to the marker's left edge and constrain width. */
  .aws-s5-agentic-tip {
    right: auto;
    left: 0;
    width: min(260px, calc(100vw - 60px));
  }
  .aws-s5-agentic-tip::before {
    right: auto;
    left: 18px;
  }
  .aws-s5-retrieval-pop {
    left: 12px;
    right: 12px;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .aws-s5-stream-linked,
  .aws-s5-chip-linked,
  .aws-s5-brief-phrase,
  .aws-s5-agentic-marker,
  .aws-s5-agentic-tip {
    transition: none;
  }
  .aws-s5-agentic-tip {
    transform: none;
  }
}

/* ==== Wave 13 — copy revision pass ==== */

/* Hero — single-line large hook + sub-header below body */
.aws-overview .overview-hook {
  margin: 18px 0 24px;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--aws-accent-dark);
  max-width: 880px;
}

.aws-overview .overview-subhead {
  margin: 22px 0 0;
  padding: 16px 20px;
  background: var(--aws-accent-tint);
  border-left: 4px solid var(--aws-accent);
  border-radius: 6px;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.15rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  color: var(--aws-accent-dark);
  max-width: 820px;
}

/* Problem — compact treatment */
.aws-section--compact .aws-h2--compact {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.85rem);
}

.aws-section--compact .aws-prob-container {
  gap: 16px;
}

.aws-section--compact .aws-prob-narrative {
  gap: 6px;
}

.aws-section--compact .aws-prob-hyp-list {
  gap: 8px;
}

.aws-section--compact .aws-prob-hyp-item {
  padding: 12px 16px;
  gap: 14px;
}

.aws-section--compact .aws-prob-hyp-num {
  font-size: 2.25rem;
  min-width: 38px;
}

.aws-section--compact .aws-prob-hyp-text {
  line-height: 1.35;
}

.aws-section--compact .aws-prob-question {
  padding: 14px 18px;
}

/* Override the global section-specific bold lead since we removed the bold-lead in this section */
.ai-writing-systems-page .aws-section--compact .aws-h2--compact {
  font-size: clamp(1.5rem, 1.25rem + 0.85vw, 1.8rem);
}

/* Analysis — flow visualization */
.aws-anal-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin-bottom: 12px;
}

.aws-anal-intro-p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
}

.aws-anal-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 12px 0;
}

.aws-anal-flow-step {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--aws-card-border);
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(14, 124, 134, 0.04);
  flex: 1 1 220px;
}

.aws-anal-flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--aws-accent);
  flex: 0 0 auto;
  padding: 0 4px;
}

.aws-anal-intro-closer {
  margin: 8px 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  color: var(--aws-accent-dark);
  line-height: 1.5;
}

.aws-anal-zone-lede-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 14px;
}

.aws-anal-zone-lede-stack .aws-anal-zone-lede {
  margin: 0;
}

/* Knowledge Base — stacked lede paragraphs */
.aws-kb-lede-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Methodology — How Did I Test This and What I've Learned subsections */
.aws-s4-howtest {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  max-width: 820px;
}

.aws-s4-howtest-h,
.aws-s4-learned-h {
  margin: 8px 0 4px;
  font-size: clamp(1.4rem, 1.15rem + 0.85vw, 1.7rem);
}

.aws-s4-placeholder {
  padding: 12px 16px;
  background: #fff8e1;
  border: 1px dashed #d4a017;
  border-radius: 6px;
  font-style: italic;
  color: #8a6a13;
}

.aws-s4-learned {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  max-width: 820px;
}

.aws-s4-learned-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aws-s4-learned-list li {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
}

/* Watch It Write — intro list */
.aws-s5-intro-list {
  margin: 8px 0 12px 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aws-s5-intro-list li {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
}

/* Collaborative Interface section */
.aws-collab-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 860px;
}

.aws-collab-narrative {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aws-collab-narrative p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
}

#aws-collab-mount:empty {
  min-height: 0;
}

/* Why This Matters — 3-row variant */
.aws-why-grid--three .aws-why-side-list {
  gap: 24px;
}

/* Synthesis closer promoted to H2 */
.aws-why-synthesis-h {
  margin: 24px auto 0;
  max-width: 880px;
  text-align: center;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--aws-accent-dark);
  padding: 28px 32px;
  background: var(--aws-spotlight-bg);
  border: 1px solid var(--aws-spotlight-border);
  border-left: 4px solid var(--aws-accent-bold);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(14, 124, 134, 0.08);
  letter-spacing: -0.005em;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .aws-anal-flow-step {
    flex: 1 1 100%;
  }
  .aws-anal-flow-arrow {
    transform: rotate(90deg);
    width: 100%;
  }
  .aws-overview .overview-hook {
    font-size: 1.5rem;
  }
  .aws-why-synthesis-h {
    padding: 20px 22px;
    text-align: left;
  }
}
/* ==== Collaborative interface section (Wave 13) ==== */
/* Component slug: aws-collab
   Section:        "I Built a More Collaborative AI Writing Interface"
   Mount:          #aws-collab-mount (placed by A4 between
                   #watch-it-write and #why-this-matters)
   Reuses the shared .aws-video-wrap / .aws-video / .aws-video-pending /
   .aws-video-caption kit defined in the What-I-Built component CSS.
   Visual continuity with Step 1's .aws-built-container--split, but with
   a 1.2fr / 1fr ratio (text slightly wider than the 16:9 video) and a
   horizontal-video frame instead of the 9:16 vertical used in Step 1. */

/* ---------- Container ---------- */

.aws-collab-container {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

/* ---------- Text column ---------- */

.aws-collab-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.aws-collab-lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text);
  font-weight: 500;
}

.aws-collab-body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
}

/* The closing claim — emphasized with an accent border-left and slightly
   larger / semibold treatment. Matches the way emphasized "thesis" lines
   are surfaced elsewhere on the page (Why-This-Matters thesis-strong),
   without re-using that component's class. */
.aws-collab-claim {
  margin: 6px 0 0 0;
  padding: 10px 0 10px 18px;
  border-left: 3px solid var(--aws-accent, #0e7c86);
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 600;
  color: var(--aws-accent-dark, #0a5e66);
}

/* ---------- Video column ---------- */

.aws-collab-video-wrap {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

/* The 16:9 frame inside the figure — shared kit handles aspect-ratio,
   border, radius, and the pending placeholder. We only cap the max
   width on very wide viewports so it doesn't dwarf the text column. */
.aws-collab-video-wrap .aws-video-wrap {
  max-width: 100%;
  margin: 0 auto;
}

.aws-collab-caption {
  /* .aws-video-caption already provides margin/font/color/style/center.
     This selector exists only as a hook for future tweaks. */
}

/* ---------- Tablet: stack ---------- */

@media (max-width: 1023px) {
  .aws-collab-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .aws-collab-video-wrap .aws-video-wrap {
    max-width: 720px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  .aws-collab-container {
    gap: 22px;
  }
  .aws-collab-text {
    gap: 16px;
  }
  .aws-collab-lead {
    font-size: 1.0625rem;
  }
  .aws-collab-body {
    font-size: 1rem;
  }
  .aws-collab-claim {
    font-size: 1.0625rem;
    padding-left: 14px;
  }
}


/* ==========================================================================
   Wave 13.5 — Section polish
   1) Vertical analysis flow (centered, bullet-sized)
   2) "What I've Learned" cards (was plain bullets)
   3) Testing variables list (matches the rest of methodology)
   4) Watch It Write intro list — match lede typography
   5) Collab section — stack video below text
   ========================================================================== */

/* --- 1. Analysis flow → vertical, centered, smaller --- */
.aws-anal-flow.aws-anal-flow--vertical {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin: 22px auto 22px;
  padding: 0;
  list-style: none;
  max-width: 640px;
}

.aws-anal-flow.aws-anal-flow--vertical .aws-anal-flow-step {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 520px;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid var(--aws-card-border);
  border-radius: 8px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(14, 124, 134, 0.06);
  text-align: center;
}

.aws-anal-flow.aws-anal-flow--vertical .aws-anal-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--aws-accent);
}

/* --- 2. "What I've Learned" — cards with accent check, not plain bullets --- */
.aws-s4-learned-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.aws-s4-learned-list li {
  position: relative;
  padding: 14px 18px 14px 46px;
  background: #ffffff;
  border: 1px solid var(--aws-card-border);
  border-left: 3px solid var(--aws-accent);
  border-radius: 8px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(14, 124, 134, 0.05);
}

.aws-s4-learned-list li::before {
  content: "\2713";
  position: absolute;
  left: 16px;
  top: 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--aws-accent);
  line-height: 1.55;
}

/* --- 3. Testing variables list — readable, scannable --- */
.aws-s4-vars-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.aws-s4-vars-list li {
  position: relative;
  padding: 12px 18px 12px 36px;
  background: #fafdfd;
  border: 1px solid var(--aws-card-border);
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}

.aws-s4-vars-list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--aws-accent);
}

.aws-s4-vars-list strong {
  color: var(--text);
  font-weight: 600;
}

/* --- 4. Watch It Write intro list — match lede typography --- */
.aws-s5-intro-list {
  list-style: none;
  counter-reset: aws-s5-step;
  margin: 12px 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.aws-s5-intro-list li {
  position: relative;
  padding: 4px 0 4px 38px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  counter-increment: aws-s5-step;
}

.aws-s5-intro-list li::before {
  content: counter(aws-s5-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--aws-accent);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- 5. Collab section — stack video below text (was 2-col side-by-side) --- */
.aws-collab-container {
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 880px;
}

.aws-collab-video-wrap .aws-video-wrap {
  max-width: 880px;
}

@media (max-width: 1023px) {
  .aws-collab-video-wrap .aws-video-wrap {
    max-width: 100%;
  }
}


/* ==========================================================================
   Wave 13.6 — Polish round
   1) Force-hide [hidden] on result-wrap (display:flex was overriding native)
   2) Left-align collab text + video to H2 (no auto-centering)
   ========================================================================== */

.aws-s4-result-wrap[hidden],
[hidden][data-aws-shelf] {
  display: none !important;
}

.aws-collab-container {
  margin-left: 0;
  margin-right: 0;
}

.aws-collab-video-wrap {
  align-items: stretch;
}

.aws-collab-video-wrap .aws-video-wrap {
  margin-left: 0;
  margin-right: 0;
}

.aws-collab-text,
.aws-collab-lead,
.aws-collab-body,
.aws-collab-claim {
  text-align: left;
}


/* ==========================================================================
   Wave 13.7 — Layout fix: sidebar grid-row span
   The .section-nav-wrapper was only in row 1, which stretched row 1 to
   the sidebar's full height (~400px with 9 nav items). The hero section
   (which lives in row 1 / column 2) is shorter than that, so the row
   extra ate as visible whitespace between section 1 and section 2.
   Page-scoped fix: make the sidebar span every row so each section's
   row is sized only by its own content. Other case studies keep their
   existing behavior.
   ========================================================================== */
.ai-writing-systems-page .section-nav-wrapper {
  grid-row: 1 / -1;
}


/* ==========================================================================
   Wave 13.8 — Section nav out of the grid (per Brent's instruction)
   The section nav box was occupying a grid track, which forced row 1 to
   match the sidebar's height when section 1 (hero) was shorter — leaving
   visible empty space inside the hero section's box. Pull the sidebar
   out of grid flow entirely with position:absolute so it floats over
   the layout. Inner .section-nav uses position:sticky for scroll-pinning.
   ========================================================================== */

.ai-writing-systems-page .case-layout {
  position: relative;
}

.ai-writing-systems-page .section-nav-wrapper {
  /* Override global.css sticky on the wrapper — pull it out of grid flow. */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  /* Reset any earlier grid placement (Wave 13.7's grid-row: 1 / -1). */
  grid-row: unset;
  grid-column: unset;
}

.ai-writing-systems-page .section-nav {
  /* Sticky moves from wrapper to inner nav so the nav still pins on scroll. */
  position: sticky;
  top: calc(var(--header-height) + 16px);
}

/* Mobile / tablet — revert to default flow (sidebar becomes a horizontal
   scrolling nav at the top of the page, per global.css behavior). */
@media (max-width: 1023px) {
  .ai-writing-systems-page .section-nav-wrapper {
    position: static;
    width: auto;
  }
  .ai-writing-systems-page .section-nav {
    position: static;
  }
}


/* ==========================================================================
   Wave 13.9 — Restore consistent section spacing
   Wave 13.7 set row-gap: 0 + Wave 13.8 pulled the sidebar out of grid.
   Result: section spacing is now driven entirely by .aws-section
   margin-bottom (--aws-section-gap = 22px), which can read as no gap
   visually depending on the section's padding. Bump it so every pair
   of sections has a clear, uniform gap.
   ========================================================================== */

.ai-writing-systems-page {
  --aws-section-gap: 36px;
}


/* ==========================================================================
   Wave 13.11 — Narrow the section card width
   Caps each section card and centers it within the content column.
   Tune the max-width (currently 1000px) to taste.
   The !important is a safety net so this rule wins regardless of any
   higher-specificity rule defined elsewhere — three sections (#overview,
   #problem, #collab-interface) were not respecting the cap without it.
   ========================================================================== */
.ai-writing-systems-page .aws-section {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ==========================================================================
   Tab switcher between the AWS case-study articles
   --------------------------------------------------------------------------
   Sits directly under the overview hero. Four cards on wide screens, then
   two-up and stacked layouts as the viewport narrows.
   ========================================================================== */
.ai-writing-systems-page .aws-tabswitch-section {
  padding: 22px;
}

.ai-writing-systems-page .aws-tabswitch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ai-writing-systems-page .aws-tabswitch-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}

.ai-writing-systems-page .aws-tabswitch-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.ai-writing-systems-page .aws-tabswitch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--aws-accent-tint);
  color: var(--aws-accent-dark);
}

.ai-writing-systems-page .aws-tabswitch-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.ai-writing-systems-page .aws-tabswitch-card.is-active .aws-tabswitch-icon {
  background: #ffffff;
}

.ai-writing-systems-page .aws-tabswitch-card {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid var(--aws-card-border);
  border-radius: var(--aws-radius);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.ai-writing-systems-page .aws-tabswitch-card:hover {
  background: var(--aws-accent-tint);
  border-color: var(--aws-accent-tint-strong);
}

.ai-writing-systems-page .aws-tabswitch-card:focus-visible {
  outline: 2px solid var(--aws-accent);
  outline-offset: 2px;
}

.ai-writing-systems-page .aws-tabswitch-card.is-active {
  background: var(--aws-accent-tint);
  border-color: var(--aws-accent);
  box-shadow: 0 8px 22px rgba(14, 124, 134, 0.14);
  transform: translateY(-1px);
}

.ai-writing-systems-page .aws-tabswitch-title {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.ai-writing-systems-page .aws-tabswitch-card.is-active .aws-tabswitch-title {
  color: var(--aws-accent-dark);
}

.ai-writing-systems-page .aws-tabswitch-desc {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .ai-writing-systems-page .aws-tabswitch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .ai-writing-systems-page .aws-tabswitch {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Tab panels: hidden attribute is honored, but enforce display:none for
   reliability across browsers and overriding inherited display rules. */
.ai-writing-systems-page .aws-tab-panel[hidden] {
  display: none !important;
}

.ai-writing-systems-page .aws-tab-panel {
  display: contents; /* let inner .aws-section rows participate in the grid */
}

/* Sidebar nav: per-tab variants. The inactive nav must be force-hidden
   because global.css sets .section-nav { display: flex } which overrides
   the browser default [hidden] { display: none }. */
.ai-writing-systems-page .aws-section-nav[hidden] {
  display: none !important;
}

/* ==========================================================================
   Brand-voice article (Tab 2) - portfolio-aligned typography
   --------------------------------------------------------------------------
   The article was written in a warm-newsprint palette. Inside the portfolio
   we let the body text + headings use the portfolio's typography variables,
   while leaving every embedded <figure class="asset ..."> alone (each is
   self-contained with scoped CSS and renders fine).
   ========================================================================== */
.ai-writing-systems-page .bv-article {
  display: contents;
}

.ai-writing-systems-page .bv-section {
  /* Reuse the standard .aws-section card chrome; tweak inner spacing */
}

.ai-writing-systems-page .bv-section p {
  margin: 0 0 14px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 780px;
}

.ai-writing-systems-page .bv-section p:last-child {
  margin-bottom: 0;
}

.ai-writing-systems-page .bv-lead {
  font-size: 1.18rem !important;
  font-weight: 500;
  color: var(--aws-accent-dark);
  margin: 0 0 18px !important;
  max-width: 780px;
}

.ai-writing-systems-page .bv-pullquote {
  margin: 6px 0 14px !important;
  padding: 10px 16px;
  border-left: 3px solid var(--aws-accent);
  background: var(--aws-accent-tint);
  color: var(--aws-accent-dark);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}

.ai-writing-systems-page .bv-h2 {
  margin: 0 0 16px;
}

.ai-writing-systems-page .bv-list {
  margin: 0 0 14px;
  padding-left: 22px;
  max-width: 780px;
}

.ai-writing-systems-page .bv-list li {
  margin: 0 0 6px;
  line-height: 1.6;
  color: var(--text);
}

.ai-writing-systems-page .bv-list li:last-child {
  margin-bottom: 0;
}

.ai-writing-systems-page .bv-meme {
  margin: 18px 0 24px;
  text-align: center;
}

.ai-writing-systems-page .bv-meme img {
  display: inline-block;
  max-width: min(420px, 100%);
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--aws-card-border);
  box-shadow: var(--aws-card-shadow);
}

/* Keep embedded blog figures comfortable inside the portfolio card.
   The figures' own scoped CSS handles internal styling; we just ensure
   they have a clean upper bound so they don't bust the .aws-section
   max-width. */
.ai-writing-systems-page .bv-section figure.asset {
  max-width: 100%;
}

/* The cosine-angle figure uses a fixed inner stage; let it center cleanly */
.ai-writing-systems-page .bv-section figure.asset-cosine {
  display: block;
  margin-left: auto;
  margin-right: auto;
}