/* Option 6 BIG Insights page. Tokens only; theme-aware through the shared semantic variables.
   Visual encoding used across the page:
     --style-a  progression-oriented players   (category token: progression)
     --style-b  alliance-oriented players          (category token: alliance)
     blue       behavior / the double lifecycle grid
     text-2     experiences, captions, secondary */
:root { --style-a: var(--color-category-progression); --style-b: var(--color-category-alliance); }

.status-tag { display: inline-flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-lg); font-size: var(--type-caption-font-size); font-weight: var(--font-weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.status-tag::before { content: ""; width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
.status-tag[data-status="published"] { color: var(--color-semantic-success); }
.status-tag[data-status="coming"] { color: var(--ink-blue); }

/* Hero */
.insights-lead { padding-block: var(--space-3xl) var(--space-2xl); }
.insights-hero { display: grid; align-items: start; }
.insights-hero-copy { min-width: 0; }
.insights-hero-copy .lede { max-width: var(--supporting-copy-max); }
.section-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xl); }
.section-nav a { padding: var(--space-sm) var(--space-md); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-full); color: var(--text-2); font-size: var(--type-body-sm-font-size); text-decoration: none; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.section-nav a:hover { color: var(--text); border-color: var(--text-2); }
.insights-hero-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 35%; border-radius: var(--radius-lg); }
.insights-figure figcaption { margin-top: var(--space-md); font-size: var(--type-body-sm-font-size); color: var(--text-2); }
.insights-figure q { display: block; color: var(--text); font-weight: var(--font-weight-semibold); }
.insights-figure figcaption span { display: block; margin-top: var(--space-xs); }

/* Featured article */
.feature-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); align-items: center; padding: var(--space-3xl); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--canvas); box-shadow: var(--shadow-raised); }
.feature-copy h2 { font-size: var(--type-h1-font-size); line-height: var(--type-h1-line-height); }
.feature-copy > p { margin-top: var(--space-lg); }
.takeaways { margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.takeaways li { margin-top: var(--space-sm); font-size: var(--type-body-sm-font-size); }
.feature-copy .byline { font-size: var(--type-body-sm-font-size); color: var(--text-2); }
.feature-copy .btns { margin-top: var(--space-2xl); }
.feature-figure { margin: 0; min-width: 0; color: var(--text); }
.feature-figure a { display: block; }
.feature-figure img { display: block; width: 100%; height: auto; }
.feature-figure .dl-cells rect { fill: var(--blue); fill-opacity: var(--alpha-tint); stroke: var(--blue); stroke-opacity: var(--alpha-border); }
.feature-figure figcaption { margin-top: var(--space-md); font-size: var(--type-body-sm-font-size); color: var(--text-2); }
.feature-figure figcaption a { color: var(--link); }

.section-heading-stacked .section-lede { margin-top: var(--space-lg); max-width: var(--supporting-copy-max); color: var(--text-2); }

/* Player lifecycle: stage explorer (CSS-only tabs; works without JavaScript) */
.dl-explorer { border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--canvas); overflow: hidden; }
.dl-radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dl-tabs { display: flex; gap: var(--space-xs); padding: var(--space-md); border-bottom: var(--border-hairline) solid var(--border); background: var(--surface); }
.dl-tab { position: relative; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--type-body-sm-font-size); font-weight: var(--font-weight-semibold); cursor: pointer; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.dl-tab:hover { color: var(--text); }
.dl-tab::after { content: ""; position: absolute; left: var(--space-lg); right: var(--space-lg); bottom: var(--space-sm); height: var(--border-thick); background: linear-gradient(90deg, var(--blue), transparent); opacity: 0; transition: opacity var(--fast) var(--ease); }
#dl-soft:checked ~ .dl-tabs [for="dl-soft"], #dl-growth:checked ~ .dl-tabs [for="dl-growth"], #dl-mature:checked ~ .dl-tabs [for="dl-mature"] { color: var(--text); background: var(--canvas); }
#dl-soft:checked ~ .dl-tabs [for="dl-soft"]::after, #dl-growth:checked ~ .dl-tabs [for="dl-growth"]::after, #dl-mature:checked ~ .dl-tabs [for="dl-mature"]::after { opacity: 1; }
#dl-soft:focus-visible ~ .dl-tabs [for="dl-soft"], #dl-growth:focus-visible ~ .dl-tabs [for="dl-growth"], #dl-mature:focus-visible ~ .dl-tabs [for="dl-mature"] { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.dl-panel { display: none; padding: var(--space-2xl); }
#dl-soft:checked ~ [data-stage="soft"], #dl-growth:checked ~ [data-stage="growth"], #dl-mature:checked ~ [data-stage="mature"] { display: block; }
.dl-panel h3 { font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); }
.dl-panel > p { margin-top: var(--space-sm); max-width: var(--supporting-copy-max); color: var(--text-2); }
.dl-rows { list-style: none; margin: var(--space-xl) 0 0; padding: 0; }
.dl-rows li { display: grid; grid-template-columns: .7fr 1fr 1.2fr; gap: var(--space-xl); padding-block: var(--space-md); border-top: var(--border-hairline) solid var(--border); font-size: var(--type-body-sm-font-size); }
.dl-rows .dl-head { border-top: 0; padding-bottom: var(--space-sm); color: var(--text-2); font-size: var(--type-caption-font-size); letter-spacing: .06em; text-transform: uppercase; }
.dl-stage-name { font-weight: var(--font-weight-semibold); }
.dl-stage-name small { display: block; font-size: var(--type-caption-font-size); font-weight: var(--font-weight-regular); color: var(--text-2); }
.dl-fit { color: var(--ink-blue); }
.dl-test { margin-top: var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-md); background: var(--wash); font-size: var(--type-body-sm-font-size); }
.dl-expand { margin-top: var(--space-lg); }
.dl-expand summary { cursor: pointer; font-size: var(--type-body-sm-font-size); font-weight: var(--font-weight-semibold); color: var(--link); }
.dl-matrix-scroll { overflow-x: auto; margin-top: var(--space-lg); }
.dl-matrix { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: var(--space-xs); font-size: var(--type-body-sm-font-size); }
.dl-matrix caption { caption-side: bottom; padding-top: var(--space-sm); text-align: left; font-size: var(--type-caption-font-size); color: var(--text-2); }
.dl-matrix th { text-align: left; padding: var(--space-sm); font-weight: var(--font-weight-semibold); }
.dl-matrix thead th { text-align: center; }
.dl-matrix td { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--wash); vertical-align: top; }
.dl-matrix thead td { background: transparent; }
.dl-expand .text-link { margin-top: var(--space-lg); }

.principle-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4xl); align-items: start; }
.principle-steps { list-style: none; margin: 0; padding: 0; }
.principle { position: relative; display: grid; grid-template-columns: var(--space-4xl) minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-2xl); }
.principle + .principle { border-top: var(--border-hairline) solid var(--border); }
.principle-icon { display: grid; place-items: center; width: var(--space-4xl); height: var(--space-4xl); color: var(--text); }
.principle-icon svg { width: var(--space-xl); height: var(--space-xl); }
.principle-body .ordinal { margin-bottom: var(--space-sm); }
.principle-body h3 { font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); }
.principle-body > p:not(.ordinal) { margin-top: var(--space-sm); max-width: var(--supporting-copy-max); }

/* Applications */
.example { padding-top: var(--space-3xl); border-top: var(--border-hairline) solid var(--border); }
.example + .example { margin-top: var(--space-3xl); }
.example-head h3 { font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); }
.example-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-3xl); align-items: start; margin-top: var(--space-xl); }
.example-figure { margin: 0; padding: var(--space-xl); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); background: var(--canvas); color: var(--text); }
.example-figure svg { width: 100%; height: auto; }
.example-figure figcaption { margin-top: var(--space-md); font-size: var(--type-body-sm-font-size); color: var(--text-2); }
.mix-a, .mix-a rect { fill: var(--style-a); }
.mix-b, .mix-b rect { fill: var(--style-b); }
.tl-line { stroke: var(--blue); }
.tl-window { fill: var(--blue); fill-opacity: var(--alpha-subtle); stroke: var(--blue); stroke-opacity: var(--alpha-border); stroke-dasharray: 4 4; }
.tl-dots circle { fill: var(--canvas); stroke: var(--blue); stroke-width: 2; }
.qa { margin: 0; }
.qa > div + div { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--border-hairline) solid var(--border); }
.qa dt { font-size: var(--type-caption-font-size); font-weight: var(--font-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.qa dd { margin: var(--space-xs) 0 0; font-size: var(--type-body-sm-font-size); }
.qa dd a { color: var(--link); }
.decision-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); list-style: none; margin: var(--space-2xl) 0 0; padding: 0; }
.decision-row li { padding: var(--space-lg); border-radius: var(--radius-md); background: var(--surface); }
.decision-team { display: block; font-size: var(--type-caption-font-size); font-weight: var(--font-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-blue); }
.decision-row p { margin-top: var(--space-xs); font-size: var(--type-body-sm-font-size); }

/* Research */
.references { margin-top: 0; }
.references > .field-label { margin-bottom: var(--space-md); }
.reading h3 { font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); }
.reading h3 a { color: var(--text); text-decoration: none; }
.reading h3 a:hover { text-decoration: underline; }

/* Terms */
.terms-intro { max-width: var(--supporting-copy-max); }
.term-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-3xl); margin: var(--space-xl) 0 0; }
.term-list > div { padding-top: var(--space-lg); border-top: var(--border-hairline) solid var(--border); }
.term-list dt { font-weight: var(--font-weight-semibold); }
.term-list dd { margin: var(--space-sm) 0 0; font-size: var(--type-body-sm-font-size); color: var(--text-2); }

@media (max-width: 1100px) {
  .feature-card { gap: var(--space-2xl); padding: var(--space-2xl); }
  .example-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .principle-layout { grid-template-columns: 1fr; gap: var(--space-xl); }
}
@media (max-width: 800px) {
  .insights-figure { margin-right: 0; }
  .feature-card { grid-template-columns: 1fr; }
  .principle { grid-template-columns: var(--space-3xl) minmax(0, 1fr); gap: var(--space-lg); }
  .principle-icon { width: var(--space-3xl); height: var(--space-3xl); }
  .principle-icon svg { width: var(--space-xl); height: var(--space-xl); }
  .principle-body h3 { font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); }
  .dl-rows li { grid-template-columns: 1fr; gap: var(--space-xs); }
  .dl-rows .dl-head { display: none; }
  .dl-q::before { content: "Question: "; color: var(--text-2); }
  .dl-fit::before { content: "Palladio AI: "; color: var(--text-2); }
  .decision-row { grid-template-columns: 1fr; }
  .term-list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .feature-card, .dl-panel, .example-figure,  .dl-tab { padding: var(--space-sm) var(--space-md); }
  .dl-tab::after { left: var(--space-md); right: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) { .dl-tab, .section-nav a { transition: none; } }

.takeaways li{display:flex;align-items:flex-start;gap:var(--space-md)}
.takeaways .ui-icon{width:20px;height:20px;color:var(--ink-blue);margin-top:2px}
.takeaways li>div{min-width:0}

/* Player behavior: paired editorial rows and theme-aware landscape SVGs. */
.lifecycle-heading { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.lifecycle-heading > p { max-width: var(--supporting-copy-max); }
.lifecycle-byline { margin-top: var(--space-lg); font-size: var(--type-body-font-size); max-width: var(--supporting-copy-max); }
.lifecycle-editorial { display: grid; gap: var(--space-3xl); }
.lifecycle-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "copy visual" "context visual"; gap: var(--space-xl) var(--space-3xl); align-items: start; }
.lifecycle-main-copy { grid-area: copy; }
.lifecycle-context-copy { grid-area: context; }
.lifecycle-row > .lifecycle-visual { grid-area: visual; align-self: start; }
.lifecycle-copy h3, .lifecycle-foundations h3 { font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); }
.lifecycle-copy h3:not(:first-child) { margin-top: var(--space-xl); }
.lifecycle-copy p { margin-top: var(--space-md); font-size: var(--type-body-font-size); max-width: var(--supporting-copy-max); }
.lifecycle-copy .lifecycle-value { color: var(--ink-blue); }
.lifecycle-visual { margin: 0; width: 100%; max-width: none; justify-self: stretch; min-width: 0; overflow: hidden; padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--wash); }
.lifecycle-diagram { width: 100%; height: auto; font-family: var(--font-family-base); }
.diagram-title { fill: var(--text); font-size: var(--type-h2-font-size); font-weight: var(--font-weight-bold); }
.diagram-subtitle { fill: var(--text-2); font-size: var(--type-h3-font-size); }
.diagram-label { fill: var(--ink-blue); font-size: var(--type-body-sm-font-size); font-weight: var(--font-weight-semibold); letter-spacing: .06em; }
.diagram-body { fill: var(--text); font-size: var(--type-h3-font-size); }
.diagram-strong { font-weight: var(--font-weight-semibold); }
.ribbon-start { stop-color: var(--color-brand-blue); stop-opacity: var(--alpha-border); }
.ribbon-middle { stop-color: var(--color-brand-blue); stop-opacity: var(--alpha-tint); }
.ribbon-end { stop-color: var(--color-brand-sky); stop-opacity: var(--alpha-subtle); }
.diagram-hairline { stroke-width: var(--border-hairline); }
.diagram-links { stroke: var(--blue); stroke-opacity: var(--alpha-border); stroke-width: var(--border-hairline); }
.diagram-node { fill: var(--blue); }
.diagram-halo { fill: var(--blue); fill-opacity: var(--alpha-subtle); stroke: var(--blue); stroke-opacity: var(--alpha-tint); }
.diagram-core { fill: var(--surface); stroke: var(--blue); stroke-opacity: var(--alpha-border); stroke-width: var(--border-hairline); }
.lifecycle-foundations { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: var(--border-hairline) solid var(--border); }
.lifecycle-foundations-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); margin-top: var(--space-md); }
.lifecycle-foundations-body p { font-size: var(--type-body-font-size); }
@media (max-width: 800px) {
 .lifecycle-heading, .lifecycle-editorial, .lifecycle-foundations-body { grid-template-columns: 1fr; gap: var(--space-xl); }

}

/* 16 px minimum. HTML labels keep that floor as diagrams resize. */
.lifecycle-graph { position: relative; isolation: isolate; }
.lifecycle-diagram { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: var(--alpha-border); }
.lifecycle-graph .diagram-ribbons { opacity: var(--alpha-border); }
.diagram-copy h4 { font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); }
.diagram-copy > p { font-size: var(--type-body-font-size); margin-top: var(--space-sm); }
.diagram-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-3xl); margin-top: var(--space-2xl); }
.diagram-stage h5 { margin: 0; font-size: var(--type-body-font-size); line-height: var(--type-h2-line-height); }
.diagram-stage p { font-size: var(--type-body-font-size); margin-top: var(--space-sm); }
.diagram-column:last-child, .opportunity-stage > .endpoint-right { text-align: right; }
.diagram-column p { margin-top: var(--space-2xl); }
.diagram-center { grid-column: 1 / -1; text-align: center; color: var(--text); padding-block: var(--space-xl); }
@media (max-width: 1100px) {
 .lifecycle-editorial, .lifecycle-foundations-body { grid-template-columns: 1fr; }
 .lifecycle-row { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "context"; }
 .lifecycle-row > .lifecycle-visual { margin: 0; }
}
@media (max-width: 520px) {
 .diagram-stage { gap: var(--space-xl) var(--space-lg); }
 .diagram-stage h5, .diagram-stage p { overflow-wrap: anywhere; }
}

/* Functional connections stay opaque and follow the label anchors, not the artwork. */
.diagram-stage { position: relative; isolation: isolate; }
.diagram-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.diagram-connectors path { fill: none; stroke: var(--ink-blue); stroke-width: var(--border-thick); }
.diagram-stage .diagram-endpoint { display: flex; align-items: center; gap: var(--space-md); padding: 0; min-width: 0; }
.diagram-stage .endpoint-left { justify-content: flex-end; text-align: right; }
.diagram-stage .endpoint-right { justify-content: flex-start; text-align: left; }
.diagram-anchor { position: static; display: block; flex: 0 0 var(--space-sm); width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-full); background: var(--ink-blue); }
.endpoint-left .diagram-anchor { order: 2; }
.endpoint-right .diagram-anchor { order: -1; }
.diagram-label-copy { min-width: 0; }
.purpose-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24%; }
.purpose-stage .diagram-column:first-of-type h5 { text-align: right; padding-right: calc(var(--space-sm) + var(--space-md)); }
.purpose-stage .diagram-column:last-child h5 { text-align: left; padding-left: calc(var(--space-sm) + var(--space-md)); }
.opportunity-stage .diagram-center { padding-block: var(--space-md); margin-top: 0; }
.diagram-center strong { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--space-4xl) * 2); height: calc(var(--space-4xl) * 2); border: var(--border-thick) solid var(--ink-blue); border-radius: var(--radius-full); background: var(--surface); }

@media (max-width: 520px) {
 .lifecycle-copy h3, .lifecycle-foundations h3 { font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); }
}

/* Shared diagram composition: equal card width, title spacing, and plotting area. */
.lifecycle-graph { display: flex; flex-direction: column; gap: var(--space-2xl); }
.lifecycle-graph .diagram-stage { margin-top: 0; min-height: calc(var(--space-4xl) * 5); }
.purpose-stage .diagram-column { display: grid; grid-template-rows: minmax(var(--space-3xl), auto) repeat(3, minmax(var(--space-3xl), 1fr)); }
.purpose-stage .diagram-column h5 { align-self: center; }
.purpose-stage .diagram-column p { margin-top: 0; }
.opportunity-stage { row-gap: var(--space-md); align-content: space-between; }
.opportunity-stage > .diagram-endpoint { align-self: center; }
.opportunity-stage .diagram-center { padding-block: var(--space-sm); }
@media (max-width: 520px) {
 .lifecycle-visual { padding: var(--space-lg); }
 .lifecycle-graph { gap: var(--space-xl); }
 .purpose-stage { column-gap: var(--space-2xl); }
 .diagram-stage .diagram-endpoint { gap: var(--space-sm); }
 .opportunity-stage { column-gap: var(--space-lg); row-gap: var(--space-xl); }
}

/* The title and its underline move together as one element. */
.coming-soon-title {
 transform-origin: left center;
 animation: coming-soon-pulse 3.6s ease-in-out infinite;
}
.coming-soon-title::after {
 background: linear-gradient(90deg, var(--blue), var(--ink-blue), var(--blue), transparent);
 background-size: 250% 100%;
 animation: coming-soon-shimmer 3.6s ease-in-out infinite;
}
@keyframes coming-soon-pulse {
 0%, 100% { transform: translateY(0) scale(1); }
 50% { transform: translateY(calc(var(--space-xs) * -1)) scale(1.035); }
}
@keyframes coming-soon-shimmer {
 0%, 100% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
 .coming-soon-title, .coming-soon-title::after { animation: none; transform: none; }
}

/* A compact editorial preview on the page grid. */
main > .section.insights-teaser { padding-block: var(--space-2xl); }
.insights-teaser .section-heading { margin: 0; }
.insights-teaser .eyebrow { margin-bottom: var(--space-md); }