/* AI-native dashboard case study — page compositions only.
   Everything visual comes from site.css; this file arranges it. */

.ai-run { padding-left: 0; padding-right: 0; }
.ai-k { color: var(--ink-2); font-size: var(--t-meta); letter-spacing: .04em; text-transform: uppercase; }
.ai-col { align-self: end; }
.ai-title { max-width: none; }
.ai-sub { margin-top: var(--s-4); max-width: 34ch; }
.ai-sub + .cs-head__desc { margin-top: var(--s-2); }
.ai-h { max-width: 30ch; }
.ai-h .ln { display: block; }
.ai-measure { max-width: 36ch; }

.ai-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.ai-list li { padding: 9px 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ai-list li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ai-list--2 { columns: 2; column-gap: var(--g); }
.ai-list--2 li { break-inside: avoid; }

/* opening: before / after, compact, inside the hero */
.ai-ba { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--g); margin-top: var(--s-6); }
.ai-ba__c { position: relative; padding-top: 30px; }
.ai-ba__n { left: 4px; top: 0; }
.ai-ba__h { font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 350; letter-spacing: -0.02em; line-height: 1.08; margin: 10px 0 12px; }
.ai-ba__h em { font-weight: 300; color: var(--conn); }
.ai-ba__p { font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }

/* 02 audience spectrum */
.ai-spec { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: var(--g); }
.ai-spec__c { position: relative; padding-top: 104px; }
.ai-spec__n { left: 40px; top: 40px; }
.ai-spec__n::before { opacity: 0; }
.ai-spec__img { position: absolute; left: 0; top: 0; z-index: 4; width: 80px; height: 80px; border-radius: 50%; background: var(--bg); }
.ai-spec__c--on .ai-spec__img { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--conn-deep); }
.ai-spec__c p:not(.ai-k) { font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); margin-top: 8px; max-width: 34ch; }
.ai-spec__c--on p:not(.ai-k) { color: var(--fg); font-size: var(--t-lede); line-height: 1.3; }
.ai-spec__c--on .ai-k { color: var(--fg); }
.ai-tag { display: inline-block; margin-left: 8px; padding: 3px 7px 2px; background: var(--conn-deep); color: var(--bg); font-size: 10px; letter-spacing: .04em; vertical-align: 1px; }

/* 03 approach */
.ai-big { max-width: 22ch; }
.ai-big .ln { display: block; }
.ai-goals { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); column-gap: var(--g); }
.ai-goals > div { border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-top: var(--s-2); }
.ai-goals h3, .ai-model h3 { font-size: 1.5rem; font-style: italic; font-weight: 400; line-height: 1.1; }
.ai-goals p, .ai-model p { font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); margin-top: 8px; }

/* editorial markers on product shots */
.ai-shot img, .ai-rec img { border-radius: 8px; box-shadow: 0 1px 0 rgba(29,26,21,.06), 0 24px 60px -30px rgba(29,26,21,.35); }
.ai-mk { position: absolute; z-index: 2; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--conn-deep); color: var(--cream); font: 500 12px/26px var(--mono); text-align: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--conn) 55%, transparent); }
.ai-mk--static { position: static; display: inline-block; margin: 0 0 10px; box-shadow: none; }
.js .ai-shot .ai-mk, .js .ai-rec .ai-mk { opacity: 0; transform: scale(.6); transition: opacity .5s var(--ed), transform .5s var(--ed); }
.js .in .ai-shot .ai-mk, .js .in .ai-rec .ai-mk { opacity: 1; transform: none; }
.ai-shot .ai-mk:nth-of-type(2), .ai-rec .ai-mk:nth-of-type(2) { transition-delay: .9s; }
.ai-shot .ai-mk:nth-of-type(3), .ai-rec .ai-mk:nth-of-type(3) { transition-delay: 1.1s; }
.ai-shot .ai-mk:nth-of-type(4), .ai-rec .ai-mk:nth-of-type(4) { transition-delay: 1.3s; }
.ai-shot .ai-mk:nth-of-type(1), .ai-rec .ai-mk:nth-of-type(1) { transition-delay: .7s; }

/* 04 homepage moves — callouts follow the demo video */
.ai-steps--sync li { position: relative; padding-top: var(--s-2); border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ai-steps--sync li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--conn-deep); }
.js .ai-steps--sync.is-live li { opacity: .42; transition: opacity .45s var(--ed); }
.js .ai-steps--sync.is-live li.is-on { opacity: 1; }
.js .ai-steps--sync.is-live li.is-on::before { width: 100%; transition: width var(--seg, 3s) linear; }
@media (prefers-reduced-motion: reduce) { .js .ai-steps--sync.is-live li { opacity: 1; } .ai-steps--sync li::before { display: none; } }
.ai-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--g); }
.ai-steps li { font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); }
.ai-steps b { display: block; font-weight: 400; font-size: var(--t-lede); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 6px; }

/* 05 interaction model — rising system initiative */
.ai-model { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--g); align-items: end; }
.ai-model__axis { position: absolute; left: 0; top: -6px; }
.ai-model__c { display: flex; flex-direction: column; }
.ai-model__bar { position: relative; height: clamp(150px, 16vw, 240px); margin-bottom: var(--s-3); }
.ai-model__bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: color-mix(in srgb, var(--conn-deep) 16%, transparent); border-top: 1px solid var(--conn-deep); transform-origin: bottom; transition: transform 1s var(--ed); }
.js .ai-model:not(.seen) .ai-model__bar::before { transform: scaleY(0); }
.ai-model__c:nth-child(3) .ai-model__bar::before { transition-delay: .15s; }
.ai-model__c:nth-child(4) .ai-model__bar::before { transition-delay: .3s; }
.ai-model__c:nth-child(5) .ai-model__bar::before { transition-delay: .45s; }
.ai-model__n { left: 4px; bottom: var(--h); }
.ai-model__c:last-child .ai-model__bar::before { background: color-mix(in srgb, var(--conn-deep) 30%, transparent); }
.ai-vs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); margin-top: var(--s-4); }
.ai-vs > div { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding-top: var(--s-2); }
.ai-vs p:not(.ai-k) { font-size: var(--t-body-s); line-height: 1.5; margin-top: 8px; }
.ai-chat { width: 100%; }
.ai-chat .vid { border: 1px solid color-mix(in srgb, var(--conn-deep) 25%, transparent); }

/* 06 recommendation logic */
.ai-logic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--g); }
.ai-logic li { position: relative; padding-top: 30px; }
.ai-logic .nd { left: 4px; top: 0; }
.ai-logic p:not(.ai-k) { font-size: var(--t-lede); line-height: 1.2; letter-spacing: -0.01em; margin-top: 6px; }
.ai-logic .ai-mk--static { display: none; }

/* 08 flow */
.ai-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); column-gap: var(--g); }
.ai-flow li { position: relative; padding-top: 34px; font-size: var(--t-lede); line-height: 1.15; letter-spacing: -0.01em; }
.ai-flow li > .rv { display: block; }
.ai-flow .nd { left: 4px; top: 0; }
.ai-agent { --fig-max: 920px; }

/* 07 experience principles */
.ai-xp { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.ai-xp li { display: grid; grid-template-columns: 3rem minmax(0,1fr); column-gap: var(--g); padding: 12px 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); align-items: baseline; }
.ai-xp li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ai-xp .mono { color: var(--ink-2); font-size: var(--t-caption); }
.ai-xp b { font-weight: 400; font-size: var(--t-body); line-height: 1.45; letter-spacing: 0; }
.ai-xp p { font-size: var(--t-body-s); line-height: 1.5; color: var(--ink-2); }

/* closing: from → to */
.ai-fromto { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: var(--g); }
.ai-fromto > div { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding-top: var(--s-2); }
.ai-fromto p { font-size: var(--t-lede); line-height: 1.2; margin: 6px 0 var(--s-3); }
.ai-fromto p:last-child { margin-bottom: 0; }

/* ── Mobile: sequential ── */
@media (max-width: 860px) {
  .ai-ba, .ai-spec, .ai-fromto { grid-template-columns: 1fr; row-gap: var(--s-4); }
  .ai-ba__c { padding-top: 0; }
  .ai-spec__c { padding-top: 0; display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; align-items: start; }
  .ai-spec__img { position: static; width: 64px; height: 64px; }
  .ai-ba__n, .ai-spec__n { display: none; }
  .ai-goals, .ai-steps { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
  .ai-model { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
  .ai-model__bar { height: 90px; }
  .ai-model__n { display: none; }
  .ai-model__axis { position: static; grid-column: 1 / -1; }
  .ai-mk { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; line-height: 20px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--conn) 55%, transparent); }
  .ai-mk--static { margin: 0 0 8px; }
  .ai-logic { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
  .ai-logic li { padding-top: 0; }
  .ai-logic .nd { display: none; }
  .ai-logic .ai-mk--static { display: inline-block; }
  .ai-flow { grid-template-columns: 1fr; }
  .ai-flow li { padding: 12px 0 12px 22px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
  .ai-flow .nd { top: 50%; left: 4px; }
  .ai-list--2 { columns: 1; }
  .ai-chat { max-width: none; }
  .ai-xp li { grid-template-columns: 2.2rem 1fr; row-gap: 6px; }
  .ai-xp p { grid-column: 2; }
}

/* this case runs tighter than StreamLine: same tokens, shorter block rhythm */
.ai-page main .blk { margin-top: clamp(40px, 5vw, 76px); }
.ai-page .ai-model__bar { height: clamp(110px, 11vw, 170px); }
.ai-page .ai-agent { --fig-max: 700px; }

@media (max-width: 860px) {
  /* read as one sentence on phones */
  .ai-h--flow .ln, .ai-h--flow .ln > span { display: inline; }
}

@media (max-width: 860px) {
  /* phones: keep only what carries the story */
  .ai-goals p { display: none; }
  .ai-spec__c:not(.ai-spec__c--on) { display: none; }
  .ai-steps { display: none; }
  .ai-model__bar { display: none; }
}

/* Mobile edit pass: say less on phones */
@media (max-width: 860px) {
  .ai-ba { display: none; }            /* before/after in the hero */
  .ai-goals { display: none; }         /* Fluid / Personalized / ... */
  .ai-model__c .rv p { display: none; } /* keep Surface / Recommend / Converse / Act */
}