/* FINAL case study template (Portfolio Figma, section "FINAL template", 267:3564).
   Builds on case-study.css (Template A · Field report) and adds the blocks FINAL
   introduced: the outcome row, the red feature band, the angled gallery, the
   swimlane blueprint, the click-to-load video, actor tags and "Why" lines.
   Loads after case-study.css. Uses tokens only; a brand case study can
   override --cs-band (feature band colour) and --cs-band-on on <body>. */

body.cs-final { --cs-band: var(--c-art); --cs-band-on: var(--c-on-art); --cs-chip-ink: var(--c-art); }

/* Hero: a real image fills the band, the title sits over the gradient */
.fr-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-final .fr-hero { min-height: clamp(380px, 60vh, 518px); }
.cs-final .fr-hero:has(.fr-hero__img)::after { background: linear-gradient(90deg, rgba(22, 20, 19, .88) 0%, rgba(22, 20, 19, .55) 50%, rgba(22, 20, 19, .15) 100%), linear-gradient(180deg, rgba(22, 20, 19, 0) 35%, rgba(22, 20, 19, .92) 100%); }
.cs-final .fr-hero__title { font-size: clamp(56px, 7.6vw, 108.8px); }

.cs-img { display: block; width: 100%; height: auto; }
.cs-prose--wide { max-width: 72ch; }

/* Facts: three cells in one ruled row (Problem, Deliverable, Tools & timeline) */
.cs-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 28px; }

/* Disclosure line under the meta row (NDA version) */
.cs-notice { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; font-family: var(--f-mono); font-size: 13px; line-height: 1.5; color: var(--c-muted); }
.cs-notice svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--c-art); }

/* Demo slot: 880px, centred */
.cs-demo { max-width: 880px; margin: 40px auto 0; }
.cs-demo__ph { display: grid; place-items: center; aspect-ratio: 2 / 1; padding: 24px; background: var(--c-card); border: 1px solid var(--c-ink); text-align: center; font-family: var(--f-mono); }
.cs-demo__ph > span { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 30ch; }
.cs-demo__ph b { font-weight: 400; font-size: 12px; color: var(--c-ink); }
.cs-demo__ph small { font-size: 12px; line-height: 1.5; color: var(--c-muted); }
.cs-demo__icon { width: 18px; height: 18px; color: var(--c-art); }
.cs-demo figcaption, .cs-yt figcaption { margin-top: 10px; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: var(--c-muted); text-align: center; }

/* Looping demo video with a visible pause control */
.cs-loop { position: relative; background: var(--c-card); border: 1px solid var(--c-ink); }
.cs-loop video { display: block; width: 100%; height: auto; }
.cs-loop__btn { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--c-card); border: var(--rule); font-family: var(--f-mono); font-size: 13px; cursor: pointer; }
.cs-loop__btn svg { width: 14px; height: 14px; }

/* THE OUTCOME? */
.cs-outcome { margin-top: 56px; }
.cs-outcome .cs-stats { margin-top: 28px; }
.cs-outcome .cs-stat__v { font-size: clamp(40px, 4.4vw, 52px); line-height: 1.3; }
.cs-outcome__note { margin: 14px 0 0; }

/* Feature band: full bleed, two phones and four numbered features */
.cs-feature { margin-top: 30px; padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 48px); background: var(--cs-band); color: var(--cs-band-on); }
.cs-feature__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1144px; margin: 0 auto; }
.cs-feature__phones { display: flex; justify-content: center; gap: 16px; }
.cs-feature__phone { position: relative; display: grid; place-items: center; width: min(220px, 44%); aspect-ratio: 220 / 464; padding: 16px; border: 6px solid var(--cs-band-on); border-radius: 28px; background: var(--cs-band); color: var(--cs-band-on); font-family: var(--f-mono); font-size: 12px; text-align: center; object-fit: cover; }
div.cs-feature__phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 34%; height: 16px; transform: translateX(-50%); border-radius: 10px; background: var(--c-ink); }
.cs-feature__h { margin: 0; font-family: var(--f-sign); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.cs-feature__text > p { max-width: 46ch; margin: 12px 0 0; font-size: 16px; line-height: 1.6; }
.cs-feature__list { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; }
.cs-feature__list li { display: flex; align-items: center; gap: 12px; }
.cs-feature__list b { flex-shrink: 0; padding: 4px 10px; background: var(--cs-band-on); color: var(--cs-chip-ink); font-weight: 500; }

/* Actor tags: who acts at this step (text, never colour alone) */
.cs-actor { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1.5px solid currentColor; border-radius: var(--radius-pill); font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.cs-actor--admin, .cs-actor--plan-administrator { color: var(--c-ink); background: var(--c-card); }
.cs-actor--member, .cs-actor--plan-member { color: var(--c-card); background: var(--c-ink); border-color: var(--c-ink); }
.cs-players .cs-actor { margin: 0 0 10px; }

/* "Why" line: the evidence behind a decision */
.cs-why { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.cs-why__k { margin-right: 6px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--c-art); }
.fr-pair .cs-why { max-width: 60ch; margin-inline: auto; }

/* Swimlane blueprint: lanes are rows, handoffs are columns */
.cs-lane { display: grid; grid-template-columns: 120px repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: 84px repeat(3, minmax(96px, auto)); margin-top: 28px; background: var(--c-card); border: var(--rule); }
.cs-lane__labels { display: grid; grid-column: 1; grid-row: 1 / span 4; grid-template-rows: subgrid; border-right: var(--rule); }
.cs-lane__labels::before { content: ""; border-bottom: var(--rule); }
.cs-lane__label { display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--c-line); font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.cs-lane__label:last-child { border-bottom: 0; color: var(--c-muted); background: var(--c-paper-2); }
.cs-lane__steps { display: contents; margin: 0; padding: 0; list-style: none; }
.cs-lane__step { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; border-right: 1px solid var(--c-line); }
.cs-lane__step:last-child { border-right: 0; }
.cs-lane__cells { display: grid; grid-row: 2 / span 3; grid-template-rows: subgrid; margin: 0; }
.cs-lane__head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 0; border-bottom: var(--rule); background: none; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-out); }
.cs-lane__head b { font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--c-art); }
.cs-lane__head span { font-weight: 700; font-size: 15px; line-height: 1.25; }
.cs-lane__head small { margin-top: auto; font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); }
.cs-lane__head:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .cs-lane__head:hover { background: var(--c-paper-2); } }
.cs-lane__cell { padding: 12px 14px; border-bottom: 1px solid var(--c-line); font-size: 14px; line-height: 1.45; color: var(--c-body); }
.cs-lane__cell:last-child { border-bottom: 0; background: var(--c-paper-2); }
.cs-lane__cell dt { display: none; }
.cs-lane__cell dd { margin: 0; }
.cs-lane__cell:not(.is-empty) { box-shadow: inset 3px 0 0 var(--c-art); }
.cs-lane__cell:last-child:not(.is-empty) { box-shadow: inset 3px 0 0 var(--c-muted); }
.cs-lane__step.is-on .cs-lane__head { background: var(--c-art-tint); }

/* Click-to-load YouTube: nothing loads from YouTube until the button is pressed */
.cs-design-video { max-width: 880px; margin: 32px 0 0; }
.cs-yt { margin: 0; }
.cs-yt__btn, .cs-yt iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--c-ink); background: var(--c-ink); cursor: pointer; }
.cs-yt__btn img { width: 100%; height: 100%; object-fit: cover; }
.cs-yt__ph { display: flex; align-items: flex-end; justify-content: flex-start; height: 100%; padding: 16px 20px; text-align: left; color: var(--c-paper); font-family: var(--f-mono); font-size: 13px; line-height: 1.5; }
.cs-yt__btn:focus-visible { outline: 3px solid var(--c-art); outline-offset: 3px; }
.cs-yt .cs-play { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .cs-yt__btn:hover .cs-play { background: var(--c-paper); } }

/* Walkthrough: a step pointed at from the swimlane */
.fr-walk__inline { display: none; }
.fr-walk__item.is-linked h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.fr-walk__item .cs-actor { margin-left: 10px; }

/* Gallery: "every screen in the flow, at an angle" */
.cs-gallery { position: relative; margin-top: clamp(56px, 8vw, 96px); }
/* the stage melts into the page at top and bottom instead of cutting a hard band */
.cs-gallery__stage { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%); }
.cs-gallery__stage { height: 640px; overflow: hidden; }
.cs-gallery__grid { display: grid; grid-template-columns: repeat(6, 340px); grid-auto-rows: 453px; gap: 24px; width: 2160px; margin: 0; padding: 0; list-style: none; transform: translate(-360px, -320px) rotate(-14deg); transform-origin: 50% 50%; }
.cs-gallery__tile { display: grid; place-items: center; overflow: hidden; background: var(--c-card); border: 1px solid var(--c-line); box-shadow: var(--shadow-card); font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); text-align: center; padding: 12px; }
.cs-gallery__tile.is-wide { grid-column: span 2; }
.cs-gallery__tile--ink { background: var(--c-ink); color: var(--c-paper); }
.cs-gallery__tile--red { background: var(--c-art); color: var(--c-on-art); }
.cs-gallery__tile img { width: 100%; height: 100%; object-fit: cover; }
.cs-gallery__tile:has(img) { padding: 0; }
.cs-gallery__cap { margin: 4px 0 0; padding: 0 20px; font-family: var(--f-mono); font-size: 13px; line-height: 1.5; color: var(--c-muted); text-align: center; }

.next-issue__arrow { width: 14px; height: 14px; vertical-align: -2px; }


/* Demo + map side by side (Ely): the chat on the left, its branches on the right */
.cs-demo-pair { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 40px; }
.cs-demo-pair .cs-demo { margin: 0; }

/* Chat loop: rebuilt from the real screens. Ely's own blue lives only inside the window. */
.chat { --chat-blue: #00507A; --chat-bubble: #EDEDED; display: flex; flex-direction: column; height: 560px; overflow: hidden; background: #fff; border: 6px solid var(--c-ink); border-radius: 28px; font-family: Arial, "Helvetica Neue", sans-serif; color: #222; }
.chat__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--chat-blue); color: #fff; font-size: 15px; }
.chat__bar b { font-size: 18px; }
.chat__log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; margin: 0; padding: 12px; list-style: none; overflow: hidden; }
.chat__log > li { flex-shrink: 0; }
.chat__msg { display: flex; align-items: flex-end; gap: 6px; max-width: 86%; font-size: 14px; line-height: 1.35; }
.chat__msg span { padding: 9px 12px; border-radius: 12px; background: var(--chat-bubble); }
.chat__msg--user { align-self: flex-end; }
.chat__msg--user span { background: var(--chat-blue); color: #fff; }
.chat__av { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: #8EC5E6; box-shadow: inset 0 0 0 2px #C9D53B; }
.chat__menu { display: flex; flex-direction: column; margin-left: 28px; border: 1px solid #999; border-radius: 12px; overflow: hidden; }
.chat__opt { padding: 9px 12px; border-top: 1px solid #ccc; color: var(--chat-blue); font-weight: 700; font-size: 14px; }
.chat__opt:first-child { border-top: 0; }
.chat__opt.is-pick.is-tapped { background: var(--chat-blue); color: #fff; }
.chat__input { padding: 12px 16px; background: #F2F2F2; border-top: 1px solid #ddd; color: #595959; font-size: 13px; }
.chat__foot { display: flex; justify-content: space-between; padding: 8px 16px; border-top: 1px solid #ddd; font-size: 12px; font-weight: 700; color: var(--chat-blue); }
.js .chat[data-playing] .chat__log > li { display: none; }
.js .chat[data-playing] .chat__log > li.is-shown { display: flex; animation: chat-in 280ms var(--ease-out); }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat__controls { display: flex; justify-content: flex-end; margin-top: 10px; }
.chat__controls .cs-loop__btn { position: static; }
.cs-transcript { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--c-body); }
.cs-transcript summary { min-height: 44px; display: list-item; padding-top: 12px; text-decoration: underline; text-underline-offset: 3px; font-family: var(--f-mono); font-size: 13px; cursor: pointer; }
.cs-transcript ol { margin: 0; padding-left: 20px; }

/* Branch diagram */
.cs-branches { margin: 0; }
.cs-branches__h { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.cs-branches__h b { font-size: 20px; line-height: 1.3; }
.br__root { margin: 0; padding: 12px 14px; background: var(--c-ink); color: var(--c-card); font-family: var(--f-mono); font-size: 13px; line-height: 1.5; }
.br__tree, .br__tree ul { margin: 0; padding: 0; list-style: none; }
.br__tree { padding-left: 18px; border-left: 2px solid var(--c-ink); margin-left: 14px; }
.br__tree ul { margin: 8px 0 0 18px; padding-left: 16px; border-left: 1px solid var(--c-line); }
.br__node { position: relative; margin-top: 10px; }
.br__node::before { content: ""; position: absolute; left: -18px; top: 18px; width: 16px; border-top: 2px solid var(--c-ink); }
.br__tree ul .br__node::before { left: -16px; width: 14px; border-top: 1px solid var(--c-line); }
.br__label { display: inline-block; padding: 7px 12px; background: var(--c-card); border: 1.5px solid var(--c-ink); font-weight: 600; font-size: 14px; }
.br__node.is-inferred > .br__label { border-style: dashed; border-color: var(--c-muted); font-weight: 500; }
.br__label em { margin-left: 6px; font-style: normal; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.br__node small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.br__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--c-line); list-style: none; font-size: 13px; line-height: 1.45; color: var(--c-body); }
.br__controls b { font-family: var(--f-mono); font-weight: 500; color: var(--c-ink); }

/* Persona card */
.cs-persona { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 24px; padding: 24px; background: var(--c-card); border: var(--rule); }
.cs-persona__img { --ar: 1; }
.cs-persona__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 16px; }
.cs-persona__facts dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.cs-persona__facts dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; }
.cs-persona__voice { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.cs-persona__voice .bubble { max-width: 46ch; }
.cs-card__n { display: block; margin-bottom: 6px; font-family: var(--f-sign); font-size: 28px; line-height: 1; color: var(--c-art); }

@media (max-width: 899px) {
  .cs-demo-pair { grid-template-columns: minmax(0, 1fr); }
  .cs-demo--chat { max-width: 360px; margin-inline: auto !important; width: 100%; }
  .cs-persona { grid-template-columns: minmax(0, 1fr); }
  .ik__notes { grid-template-columns: minmax(0, 1fr); }
  .ik__msg { max-width: 92%; }
  .ph--swatches { grid-auto-flow: row; grid-auto-rows: minmax(64px, auto); }
  .cs-persona__img { max-width: 160px; }
}
@media (max-width: 600px) {
  .br__controls, .cs-persona__facts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .js .chat[data-playing] .chat__log > li.is-shown { animation: none; }
}


/* Real images inside frames (phone, desktop, plain) */
.ph--img { padding: 0; place-items: stretch; }
.ph--img::before { display: none; }
.ph--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ph--phone.ph--img::after { z-index: 2; }
.ph--phone.ph--img img { border-radius: 22px; }

/* Hero with character art on the right (no full-bleed screenshot) */
.fr-hero__art { position: absolute; z-index: 1; right: max(24px, calc((100vw - 1240px) / 2 + 48px)); bottom: 0; height: 88%; max-height: 460px; width: auto; object-fit: contain; }

/* Walkthrough with phone screens: a narrower picture column */
.fr-walk--phone { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.fr-walk--phone .fr-walk__fig .ph { --ar: 402 / 872; max-width: 300px; justify-self: center; }
.fr-walk--phone .fr-walk__inline .ph { max-width: 240px; margin: 0; }

/* Landscape as text cells (no screenshots) */
.fr-grid2--text li { padding: 18px 20px; }
.fr-grid2--text b { text-align: left; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.fr-grid2--text .cs-small { margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-body); }
.fr-grid2 li.is-us { background: var(--c-ink); border-color: var(--c-ink); }
.fr-grid2 li.is-us b, .fr-grid2 li.is-us p { color: var(--c-card); }

/* Constraints: only the rule cards are cards; their bullets are plain */
.fr-constraints li li { margin: 0 0 4px; padding: 0; background: none; border: 0; }

.cs-demo__img .ph { --ar: 16 / 10; border: 1px solid var(--c-ink); }
.cs-demo__img .ph--natural { border-color: var(--c-line); background: var(--c-card); }
.ph--natural img { object-fit: contain; }
.cs-demo__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Brand pages: a palette built in code, wide boards, 4:5 posts */
.ph--swatches { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0; gap: 0; place-items: stretch; background: var(--c-card); }
.ph--swatches::before { display: none; }
.sw { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 14px 12px; text-align: left; font-family: var(--f-mono); font-size: 12px; line-height: 1.35; }
.sw b { font-family: var(--f-body); font-size: 15px; font-weight: 700; }
.sw code { font: inherit; }
.sw small { font-size: 12px; }
.ph--board { --ar: 2 / 1; background: var(--c-card); border: 1px solid var(--c-line); }
.ph--board img { object-fit: contain; }
.fr-pair .ph--board { max-width: none; }
.fr-walk__fig .ph--desktop.ph--board-fit img, .fr-walk__inline .ph--board-fit img { object-fit: contain; background: var(--c-card); }
.cs-feature__phones--post .cs-feature__phone { aspect-ratio: 4 / 5; border-radius: 4px; border-width: 4px; padding: 0; }
.cs-feature__phones--post div.cs-feature__phone::before { display: none; }
/* Gallery tiles take the brand's colours when the page sets them */
.cs-final .cs-gallery__tile--ink { background: var(--cs-tile-2, var(--c-ink)); }
.cs-final .cs-gallery__tile--red { background: var(--cs-tile-3, var(--c-art)); }
.cs-callout { margin-top: 32px; padding: 20px 22px; background: var(--c-card); border-left: 4px solid var(--c-art); }
.cs-callout .cs-h4 { color: var(--c-art); margin-bottom: 6px; }
.cs-callout p:last-child { margin: 0; max-width: 70ch; font-size: 16px; line-height: 1.6; color: var(--c-body); }
.cs-quest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(40px, 6vw, 64px); padding: 24px 28px; background: var(--c-card); border: var(--rule); }
.cs-quest p { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.5; }

/* Switch demo (Skin Mode): the brand idea as a real toggle */
.cs-switch { --sw-off: #EFE4D6; --sw-ink: #3A2620; --sw-on: #A3141E; display: grid; justify-items: center; gap: 16px; max-width: 420px; }
.cs-switch__post { width: 100%; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: center; padding: 10%; background: var(--sw-off); color: var(--sw-ink); border: 1px solid var(--c-line); transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out); }
.cs-switch__eyebrow { margin: 0 0 14px; font-family: var(--f-body); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.cs-switch__h { margin: 0; font-family: var(--f-sign); font-size: clamp(48px, 9vw, 76px); line-height: .95; text-transform: uppercase; }
.cs-switch__rule { width: 64px; height: 5px; margin: 20px 0 14px; background: var(--sw-on); transition: background-color 300ms var(--ease-out); }
.cs-switch__state { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.cs-switch.is-on .cs-switch__post { background: var(--sw-on); color: var(--sw-off); }
.cs-switch.is-on .cs-switch__rule { background: var(--sw-off); }
.cs-switch__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px 0 8px; background: var(--c-card); border: var(--rule); border-radius: var(--radius-pill); font-family: var(--f-mono); font-size: 14px; cursor: pointer; }
.cs-switch__track { position: relative; width: 56px; height: 30px; border-radius: 15px; background: var(--sw-ink); transition: background-color 240ms var(--ease-out); }
.cs-switch__knob { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--sw-off); transition: transform 240ms var(--ease-out); }
.cs-switch__btn[aria-pressed="true"] .cs-switch__track { background: var(--sw-on); }
.cs-switch__btn[aria-pressed="true"] .cs-switch__knob { transform: translateX(26px); }
.cs-switch__btn:focus-visible { outline: 3px solid var(--c-art); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cs-switch__post, .cs-switch__rule, .cs-switch__track, .cs-switch__knob { transition: none; } }

/* Photography: a masonry-style grid and a lightbox */
.ph-grid { columns: 3 280px; column-gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.ph-grid__item { break-inside: avoid; margin: 0 0 20px; }
.ph-grid__item--landscape { --ar: 3 / 2; }
.ph-grid__item--portrait { --ar: 4 / 5; }
.ph-grid__item--square { --ar: 1; }
.ph-grid__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--c-paper-2); cursor: zoom-in; }
.ph-grid__btn img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: opacity var(--dur-hover) var(--ease-out); }
.ph-grid__btn:focus-visible { outline: 3px solid var(--c-art); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ph-grid__btn:hover img { opacity: .88; } }
.ph-grid__cap { margin: 6px 0 0; font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); }
.ph-grid__item.is-empty { display: grid; place-items: center; aspect-ratio: var(--ar); border: var(--rule-dashed); background: var(--c-paper-2); font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); }
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(22, 20, 19, .96); color: var(--c-card); }
.lb::backdrop { background: rgba(22, 20, 19, .8); }
.lb__fig { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; margin: 0; padding: 56px 72px; }
.lb__img { max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; }
.lb__cap { margin-top: 12px; font-family: var(--f-mono); font-size: 13px; }
.lb__count { position: absolute; top: 18px; left: 20px; margin: 0; font-family: var(--f-mono); font-size: 13px; }
.lb__btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--c-card); border-radius: 50%; background: transparent; color: var(--c-card); font-size: 18px; cursor: pointer; }
.lb__btn svg { width: 18px; height: 18px; }
.lb__btn:focus-visible { outline: 3px solid var(--c-cloud); outline-offset: 3px; }
.lb__prev { left: 14px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.lb__next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb__close { top: 12px; right: 14px; }
@media (max-width: 600px) { .lb__fig { padding: 56px 12px 72px; } .lb__prev, .lb__next { top: auto; bottom: 12px; transform: none; } .lb__prev svg { transform: rotate(180deg); } .lb__prev { transform: none; } }

/* Walkthrough: every step stays readable (WCAG contrast); the active one is marked with a rule, not by dimming the rest */
.js .cs-final .fr-walk.has-active .fr-walk__item:not(.is-on) { opacity: 1; }
.cs-final .fr-walk__item { position: relative; padding-left: 22px; border-left: 3px solid transparent; transition: border-color var(--dur-ui) var(--ease-out); }
.cs-final .fr-walk__item.is-on { border-left-color: var(--c-art); }

/* Intake demo (Dari) */
.ik { max-width: 960px; padding: 0; background: var(--c-card); border: var(--rule); --ik-teal: #2F6E57; --ik-amber: #8A5A14; --ik-red: #9B3A31; }
.ik__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: var(--rule); }
.ik__title { font-family: var(--f-mono); font-size: 13px; }
.ik__lang { display: inline-flex; border: var(--rule); }
.ik__lang button { min-height: 40px; padding: 0 14px; border: 0; background: none; font-family: var(--f-mono); font-size: 13px; cursor: pointer; }
.ik__lang button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-card); }
.ik__lang button:focus-visible { outline: 3px solid var(--c-art); outline-offset: 2px; }
.ik__log { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 18px 16px; list-style: none; }
.ik__turn { display: flex; flex-direction: column; gap: 8px; }
.ik__msg { display: flex; flex-direction: column; gap: 3px; max-width: 78%; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.ik__msg--dari { align-self: flex-start; background: var(--c-paper-2); border: 1px solid var(--c-line); border-bottom-left-radius: 4px; }
.ik__msg--pt, .ik__msg--care { align-self: flex-end; background: var(--c-ink); color: var(--c-card); border-bottom-right-radius: 4px; }
.ik__msg--care { background: var(--c-ink-2); }
.ik__who { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.ik__lead { font-size: 16px; }
.ik__sub { font-size: 13px; opacity: .78; }
.ik[data-lead="en"] .ik__msg--dari .ik__lead, .ik[data-lead="en"] .ik__msg--pt .ik__lead, .ik[data-lead="en"] .ik__note:first-child .ik__lead { order: 2; font-size: 13px; opacity: .78; }
.ik[data-lead="en"] .ik__msg--dari .ik__sub, .ik[data-lead="en"] .ik__msg--pt .ik__sub, .ik[data-lead="en"] .ik__note:first-child .ik__sub { order: 1; font-size: 16px; opacity: 1; }
.ik__msg .ik__who { order: 0; }
.ik__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; order: 3; }
.ik__tag { padding: 3px 8px; border-radius: 6px; background: var(--c-card); color: var(--c-ink); font-size: 12px; line-height: 1.4; }
.ik__tag b { font-family: var(--f-mono); font-weight: 500; }
.ik__tag--direct b { color: var(--ik-teal); }
.ik__tag--interpreted b { color: var(--ik-amber); }
.ik__tag--uncertain b { color: var(--ik-red); }
.ik__review { margin: 0 16px; padding: 14px 16px; background: var(--c-paper-2); border: 1px dashed var(--c-ink); }
.ik__review ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--c-body); }
.ik__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; }
.ik__note { padding: 14px 16px; background: #fff; border: 1px solid var(--c-line); }
.ik__note--soap { border-color: var(--c-ink); }
.ik__item { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-body); }
.ik__item b { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }
.ik__note .ik__lead { font-size: 15px; }
.ik__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 16px 16px; }
.ik__count { font-family: var(--f-mono); font-size: 12px; color: var(--c-muted); }
.ik figcaption { padding: 12px 16px; border-top: 1px solid var(--c-line); margin: 0; }
.ik:not(.is-live) .ik__controls { display: none; }
.ik.is-live .ik__turn:not(.is-shown) { display: none; }
.ik.is-live:not(.is-review) .ik__review, .ik.is-live:not(.is-split) .ik__notes { display: none; }
.ik.is-live .ik__share { display: none; }
.ik.is-live.is-done .ik__share { display: inline-flex; }
.ik.is-live.is-done .ik__next, .ik.is-live:not(.is-split) .ik__reset { display: none; }
.ik.is-live.is-split .ik__share { display: none; }
.ik.is-live .ik__turn.is-shown:last-child, .ik.is-live .ik__turn.is-new { animation: chat-in 280ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .ik.is-live .ik__turn.is-new { animation: none; } }

/* Phones: the Sections pill waits until the reader is past the top, so it never covers the meta row */
@media (max-width: 1099px) {
  .js .cs-final .qnav:not(.is-scrolled) .qnav__toggle { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
  .cs-final .qnav__toggle { transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { .cs-final .qnav__toggle { transition: none; } }

/* ------------------------------------------------------------------ Phones and tablets */
@media (max-width: 899px) {
  .cs-facts--3 { grid-template-columns: minmax(0, 1fr) !important; }
  .cs-feature__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cs-feature__phones { order: 2; }
  .fr-walk__fig { display: none; }
  .fr-hero__art { right: 8px; height: 46%; opacity: .9; }
  .fr-walk__inline { display: block; margin-bottom: 14px; }
  .fr-walk__inline .ph--desktop { border-width: 4px 4px 12px; }
  .js .fr-walk.has-active .fr-walk__item:not(.is-on) { opacity: 1; }
  .cs-design-video { margin-top: 24px; }
  /* Swimlane becomes a numbered list: one handoff per card, lanes as labelled lines */
  .cs-lane { display: block; border: 0; background: none; }
  .cs-lane__labels { display: none; }
  .cs-lane__steps { display: flex; flex-direction: column; gap: 12px; }
  .cs-lane__step { display: block; background: var(--c-card); border: var(--rule); }
  .cs-lane__step:last-child { border-right: var(--rule); }
  .cs-lane__head { width: 100%; min-height: 56px; }
  .cs-lane__cells { display: block; }
  .cs-lane__cell.is-empty { display: none; }
  .cs-lane__cell dt { display: block; margin-bottom: 2px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
  .cs-gallery__stage { height: 420px; }
  .cs-gallery__grid { grid-template-columns: repeat(6, 220px); grid-auto-rows: 294px; gap: 16px; width: 1400px; transform: translate(-300px, -220px) rotate(-8deg); }
}
@media (max-width: 600px) {
  .fr-hero__art { top: 12px; bottom: auto; right: 4px; height: 34%; }
  .cs-feature__phone { width: 46%; border-width: 4px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-lane__head, .fr-walk__fig .ph { transition: none; }
}

/* Seamless ground: every reading section sits on the one paper tone. Only the hero
   and the brand feature band change colour, so the page reads as one sheet. */
body.cs-final .cs-design { padding: 0; background: none; border: 0; }

/* Quotes and replies in the site's reading face, not the comic hand.
   What people said is italic; what we built is upright. */
body.cs-final { --f-hand: var(--f-body); }
body.cs-final .bubble { padding: 16px 20px; font-family: var(--f-body); font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
body.cs-final .bubble:not(.bubble--ink) { font-style: italic; }
body.cs-final .bubble cite { margin-top: 10px; font-size: 12px; line-height: 1.45; }
/* Phone Sections pill: one line, never "Sections / · / Lesso…" stacked */
.cs-final .qnav__toggle { white-space: nowrap; }
/* Section dots and the phone pill step aside while the footer is on screen */
.qnav { transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear 0s; }
.qnav.is-footer { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui); }