/* Case study detail page: narrow reading column, quiet labels, two-column text */
.cs{width:calc(100% - 48px);max-width:var(--width);margin:0 auto;padding-bottom:40px}

/* Hero board: media stack in the middle, discipline chips around it */
.cs-board{position:relative;width:min(860px,calc(100vw - 48px));margin:8px 0 72px;left:50%;transform:translateX(-50%);aspect-ratio:10/3;background:var(--wash);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cs-board-lines{position:absolute;inset:0;width:100%;height:100%}
.cs-board-lines path{fill:none;stroke:var(--quiet);stroke-opacity:.45;stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.cs-stack{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%)}
.cs-tile{position:absolute;width:78%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 24px -14px #25272366}
.cs-tile--back{left:0;top:0;padding:10px 12px;animation:cs-float 7s ease-in-out infinite}
.cs-tile--front{right:-4%;bottom:-6%;animation:cs-float 7s ease-in-out -3.5s infinite}
.cs-tile video{width:100%;height:100%;object-fit:cover;display:block}
.cs-token{display:block;font:500 14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--quiet)}
.cs-chips{list-style:none;margin:0;padding:0}
.cs-chips li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:8px;background:var(--paper);border:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--ink);white-space:nowrap}
.cs-chips li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot)}
@keyframes cs-float{0%,100%{translate:0 0}50%{translate:0 -4px}}

/* Blocks */
.cs-block{margin-bottom:84px}
.cs-label{margin:0 0 6px;font-size:14px;line-height:1.4;color:var(--quiet)}
.cs-lead{margin:0;font-size:22px;line-height:1.35;font-weight:500;letter-spacing:-.3px;color:var(--ink)}
.cs-title{margin:0 0 20px;font-size:15px;line-height:1.45;font-weight:500;color:var(--ink)}
.cs-meta{margin:44px 0 0;padding-bottom:20px;border-bottom:1px dashed var(--line);font-size:14px}
.cs-meta div{display:flex;justify-content:space-between;gap:16px;padding:4px 0}
.cs-meta dt{color:var(--quiet)}
.cs-meta dd{margin:0;color:var(--ink);text-align:right}

.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cs-cols p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--body-ink)}

.cs-frame{margin:0 0 28px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--wash)}
.cs-frame video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.cs-frame--token{padding:28px 28px 18px;margin:32px 0 0}
.cs-frame pre{margin:0;font:14px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);white-space:pre-wrap}
.cs-frame pre span{color:var(--quiet)}
.cs-frame figcaption{margin-top:14px;font-size:14px;color:var(--quiet)}

.cs-stats{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px}
.cs-stats div{padding-bottom:14px;border-bottom:1px solid var(--line)}
.cs-stats strong{display:block;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.4px;color:var(--ink)}
.cs-stats span{font-size:14px;color:var(--quiet)}

.cs-quote{margin:12px 0 0;padding:2px 0 2px 14px;border-left:2px solid var(--ink);font-size:14px;line-height:1.6;color:var(--ink)}
.cs-quote em{font-style:normal;color:var(--accent)}

.cs-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cs-steps li{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-bottom:1px solid var(--line)}
.cs-steps li>span{font-size:14px;color:var(--quiet);font-variant-numeric:tabular-nums}
.cs-steps strong{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:3px}
.cs-steps p{margin:0;font-size:14px;line-height:1.6;color:var(--body-ink)}

.cs-next{margin-top:12px}

/* Sections fade up as they arrive */
.js [data-cs-reveal]{opacity:0;transform:translateY(14px);filter:blur(3px);transition:opacity .7s ease,transform .7s ease,filter .7s ease}
.js [data-cs-reveal].is-in{opacity:1;transform:none;filter:none}

@media(max-width:600px){
  .cs-board{aspect-ratio:auto;padding:20px 16px 16px;margin-bottom:52px}
  .cs-board-lines{display:none}
  .cs-stack{position:relative;left:auto;top:auto;transform:none;width:150px;margin:0 auto 26px}
  .cs-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
  .cs-chips li{position:static;transform:none}
  .cs-lead{font-size:19px}
  .cs-cols{grid-template-columns:1fr;gap:0}
  .cs-stats{gap:16px}
  .cs-stats strong{font-size:22px}
  .cs-block{margin-bottom:64px}
}
@media(prefers-reduced-motion:reduce){.js [data-cs-reveal]{opacity:1;transform:none;filter:none}}

/* Flekh case study media placeholders; replace assets with original project exports. */
.cs-board--flekh{background:#102b24}
.cs-board--flekh>img{width:100%;height:100%;object-fit:cover;object-position:center}
.cs-frame--placeholder{margin-top:28px}
.cs-frame--placeholder>img{display:block;width:100%;height:auto}
.cs-frame--placeholder figcaption{margin:0;padding:12px 16px}
@media(max-width:600px){.cs-board--flekh{padding:0;aspect-ratio:16/9}}

/* Long-form case study: keep narrative readable and image spaces identifiable. */
.cs-prose p{font-size:14px;line-height:1.75;margin:0 0 16px}
.cs-contents{display:flex;flex-wrap:wrap;gap:8px 18px;border-block:1px solid var(--line);padding:16px 0;margin:-40px 0 64px;font-size:14px;color:var(--quiet)}
.cs-contents>span{width:100%;color:var(--ink)}
.cs-contents a:hover{text-decoration:underline;text-underline-offset:4px}
.cs-image-slot{margin:28px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--wash)}
.cs-image-slot__space{min-height:280px;padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px}
.cs-image-slot__space>span{font-size:14px;color:var(--quiet)}
.cs-image-slot__space>strong{font-size:16px;color:var(--ink)}
.cs-image-slot__space p{font-size:14px;line-height:1.6;max-width:380px;margin:0;color:var(--quiet)}
.cs-image-slot figcaption{font-size:14px;color:var(--quiet);border-top:1px solid var(--line);padding:10px 16px}
.cs-live-link{font-size:14px;margin-bottom:48px}
@media(max-width:600px){.cs-meta div{flex-wrap:wrap;gap:2px 12px}.cs-meta dd{max-width:100%;text-align:left}.cs-image-slot__space{min-height:220px;padding:24px}.cs-contents{margin-top:-24px;margin-bottom:48px}}
/* "In short" summary: typed headline, then points that check off one by one */
.cs-summary{height:auto;max-height:none;overflow:visible;margin:-28px 0 40px;padding:24px 24px 20px;border-radius:14px;background:var(--wash)}
.cs-summary+.cs-contents{margin-top:0}
.cs-summary .cs-label span{color:var(--quiet);opacity:.75}
.cs-summary-line{height:auto;min-height:0;margin:4px 0 18px;font-size:16px;line-height:1.6;font-weight:500;letter-spacing:0;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-summary.is-typing [data-cs-type]::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--ink);animation:cs-caret .9s steps(1) infinite}
@keyframes cs-caret{50%{opacity:0}}
.cs-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cs-checks li{position:relative;padding-left:30px}
.cs-checks a{display:block;font-size:15px;line-height:1.55;color:var(--body-ink);transition:color .18s}
.cs-checks a:hover{color:var(--ink)}
.cs-checks li::before{content:'';position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--plane) 14%,transparent)}
.cs-tick{position:absolute;left:0;top:2px;width:20px;height:20px}
.cs-tick path{fill:none;stroke:var(--plane);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:0}
/* animation states (only when the script runs) */
.cs-summary.is-armed .cs-checks li:not(.is-on){display:none}
.cs-summary.is-armed .cs-tick path{stroke-dashoffset:14}
.cs-summary .cs-checks li.is-on{opacity:1;transform:none;animation:cs-check-in .35s ease both}
@keyframes cs-check-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cs-summary .cs-checks li.is-on{animation:none}}
.cs-summary .cs-checks li.is-on .cs-tick path{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease .12s}
@media(max-width:600px){.cs-summary{margin:-16px 0 32px;padding:20px 18px 16px}.cs-summary-line{font-size:16px}.cs-checks a{font-size:14px}}
/* Why / Trade-off rows under each key decision */
.cs-why{margin:20px 0 28px;border-top:1px solid var(--line)}
.cs-why div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cs-why dt{font-size:14px;color:var(--quiet)}
.cs-why dd{margin:0;font-size:16px;line-height:1.6;color:var(--ink)}
/* a gap Rahul still needs to fill: visible on purpose, so it can't ship unnoticed */
.cs-why dd.cs-todo{color:var(--accent);font-style:italic}
@media(max-width:600px){.cs-why div{grid-template-columns:1fr;gap:2px}}
/* short evidence points inside a section */
.cs-points{list-style:none;margin:4px 0 18px;padding:0;border-top:1px solid var(--line)}
.cs-points li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--body-ink)}
.cs-points strong{font-weight:500;color:var(--ink)}
/* Image slots take their final ratio, so placeholders preview the real layout */
.cs-image-slot__space[style*="--ratio"]{aspect-ratio:var(--ratio);min-height:0}
.cs-image-slot__pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.cs-image-slot__pair .cs-image-slot__space{background:var(--wash);padding:20px}
.cs-image-slot img{display:block;width:100%;aspect-ratio:var(--ratio,auto);object-fit:cover}
/* Cover: one 16:9 image everywhere (export 1720×968) */
.cs-board.cs-board--flekh{aspect-ratio:16/9}
@media(max-width:600px){.cs-board.cs-board--flekh{aspect-ratio:16/9}.cs-image-slot__space[style*="--ratio"]{padding:16px}.cs-image-slot__pair .cs-image-slot__space p{display:none}}
/* Real images in slots */
.cs-image-slot--narrow{padding:32px 0 0}
.cs-image-slot--narrow img{width:min(300px,60%);margin:0 auto 32px;border-radius:10px;box-shadow:0 12px 30px -18px #25272355}
.cs-image-slot__pair--img img{width:100%;height:100%;object-fit:cover}
/* Cover: real image, light 1px frame */
.cs-board.cs-board--flekh{background:var(--paper);border:1px solid #E4E7EC}
/* summary labels; the animated headline copy is decorative, so copying picks up the real text once */
.cs-checks a strong{font-weight:500;color:var(--ink)}
[data-cs-type]{user-select:none;-webkit-user-select:none}
.cs-prose p strong{font-weight:500;color:var(--ink)}
/* Full-width looping strip of 16:9 images; static, with arrows at the screen edges */
:root{--page-w:100vw}
@media(min-width:1100px){html.chat-docked{--page-w:calc(100vw - 400px)}}
body.page-cs{overflow-x:clip}
.cs-strip{--tile:min(var(--width),calc(var(--page-w) - 48px));--gap:16px;--gutter:max(24px,calc((var(--page-w) - var(--width)) / 2));position:relative;width:var(--page-w);margin:28px 0 0 calc(50% - var(--page-w) / 2)}
.cs-strip__track{position:relative;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:0 0 4px;scrollbar-width:none;outline:none;scroll-behavior:smooth}
.cs-strip__track::-webkit-scrollbar{display:none}
.cs-strip__track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cs-strip__tile{position:relative;flex:0 0 var(--tile);aspect-ratio:16/9;margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--wash);scroll-snap-align:start}
.cs-strip__tile img{width:100%;height:100%;object-fit:cover;display:block}
.cs-strip__ph{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center}
.cs-strip__ph strong{font-size:16px;font-weight:500;color:var(--ink)}
.cs-strip__ph p{margin:0;font-size:14px;line-height:1.5;color:var(--quiet)}
.cs-strip__ph small{font-size:14px;color:var(--quiet);opacity:.75}
.cs-strip__tag{position:absolute;left:12px;top:12px;padding:3px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink)}
.cs-strip__nav{position:absolute;top:50%;width:40px;height:40px;margin-top:-22px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 20px -10px #25272355;transition:transform .2s;z-index:2}
.cs-strip__nav:hover{transform:scale(1.06)}
.cs-strip__nav--prev{left:16px}
.cs-strip__nav--next{right:16px}
.cs-strip__caption{margin:14px 0 0;font-size:14px;color:var(--quiet)}
@media(max-width:600px){.cs-strip{--tile:calc(var(--page-w) - 72px);--gap:12px}.cs-strip__ph p{display:none}.cs-strip__nav{width:34px;height:34px;margin-top:-19px}.cs-strip__nav--prev{left:8px}.cs-strip__nav--next{right:8px}}
.cs-strip__tile:has(img) .cs-strip__tag{display:none}
/* Marketing tile: the full website drifts slowly upward on a seamless loop */
.cs-scroll{display:flex;flex-direction:column;will-change:transform;animation:cs-scroll var(--dur,120s) linear infinite}
.cs-scroll img{flex:none;width:100%;height:auto;object-fit:initial}
@keyframes cs-scroll{to{transform:translateY(-50%)}}
.cs-strip__tile:hover .cs-scroll,.cs-scroll.is-off{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.cs-scroll{animation:none}.cs-strip__tile:has(.cs-scroll){overflow-y:auto}}
/* System tile: design-system sheets flip like a flipbook */
.cs-flip{position:relative;width:100%;height:100%;background:#fff}
.cs-flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.cs-flip img.is-on{opacity:1}
/* Video in an image slot: same 16:9 frame as the images */
.cs-image-slot video{display:block;width:100%;aspect-ratio:var(--ratio,16/9);object-fit:cover;background:#000}
/* Single-image carousel inside a section: overlay arrows, dots, caption per slide */
.cs-carousel__view{position:relative}
.cs-carousel__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none}
.cs-carousel__track::-webkit-scrollbar{display:none}
.cs-carousel__track:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cs-carousel__track img{flex:0 0 100%;width:100%;aspect-ratio:16/9;object-fit:cover;display:block;scroll-snap-align:start}
.cs-carousel__nav{position:absolute;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent);color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 16px -8px #25272366;transition:transform .2s,opacity .2s;z-index:2}
.cs-carousel__nav:hover{transform:scale(1.06)}
.cs-carousel__nav--prev{left:12px}
.cs-carousel__nav--next{right:12px}
.cs-carousel__dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--paper) 85%,transparent)}
.cs-carousel__dots span{width:6px;height:6px;border-radius:50%;background:var(--quiet);opacity:.35;transition:opacity .2s,width .2s}
.cs-carousel__dots span.is-on{opacity:1;width:16px;border-radius:3px}
@media(max-width:600px){.cs-carousel__nav{width:30px;height:30px;margin-top:-15px}.cs-carousel__nav--prev{left:8px}.cs-carousel__nav--next{right:8px}}
.cs-image-slot--flip .cs-flip{height:auto;aspect-ratio:16/9}
/* inline external link inside case-study text */
.cs-link{color:var(--ink);text-decoration:underline;text-decoration-color:#b4b9ae;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .18s}
.cs-link:hover{text-decoration-color:var(--ink)}
.cs-group{margin:28px 0 8px;font-size:14px;letter-spacing:.2px;color:var(--quiet)}.cs-prose .cs-group:first-child{margin-top:0}
/* Arrow buttons: same frosted glass as the floating "Ask about this project" bar */
.cs-strip__nav,.cs-carousel__nav{border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);background:color-mix(in srgb,var(--paper) 32%,transparent);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);box-shadow:0 8px 32px -12px #10181040}
@supports not (backdrop-filter:blur(1px)){.cs-strip__nav,.cs-carousel__nav{background:var(--paper)}}
/* OurKarma: title before the cover, "Part one / Part two" dividers, two scrolling 9:16 pages */
.cs-block--intro{margin-bottom:84px}
.cs-board.cs-board--ourkarma,.cs-board.cs-board--kpca,.cs-board.cs-board--awesome{aspect-ratio:16/9;background:#572D84;border:0}
.cs-board.cs-board--kpca{background:#2a3330}
.cs-board.cs-board--awesome{background:#1e2433}
.cs-board--ourkarma>img,.cs-board--kpca>img,.cs-board--awesome>img{width:100%;height:100%;object-fit:cover;display:block}
.cs-part{margin:0 0 56px;padding-top:28px;border-top:1px solid var(--line)}
.cs-part .cs-lead{margin:0}
.cs-steps{margin-top:8px}
.cs-pages{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.cs-pages__frame{position:relative;margin:0;aspect-ratio:9/16;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--wash)}
.cs-pages__frame figcaption{position:absolute;left:12px;top:12px;padding:3px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink)}
.cs-pages__frame:hover .cs-scroll{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.cs-pages__frame{overflow-y:auto}}
@media(max-width:600px){.cs-pages{gap:10px}.cs-part{margin-bottom:40px}}
/* "where it went" note after a recommendation; persona facts; persona columns */
.cs-why dd .cs-where{display:block;margin-top:4px;font-style:normal;font-size:14px;color:var(--quiet)}
.cs-meta--persona{margin:0 0 28px}
.cs-cols>div{padding:14px 0;border-top:1px solid var(--line)}
.cs-cols .cs-group{margin:0 0 6px}
.cs-cols p{font-size:16px}
/* Touch devices: sections fade up without the blur, and the arrow buttons skip the frosted glass (both are costly while scrolling) */
@media (pointer:coarse){
  .js [data-cs-reveal]{filter:none!important;transition:opacity .6s ease,transform .6s ease}
  .cs-strip__nav,.cs-carousel__nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
}
/* Captions: quiet italic notes on the page colour, not on the violet frame tint */
body.notebook main :is(.cs-frame,.cs-image-slot) figcaption{font-size:13px;font-style:italic;line-height:1.5}
body.notebook main :is(.cs-frame--placeholder,.cs-image-slot) figcaption{background:var(--paper);border-top:1px solid var(--line)}
/* strip captions match the figure captions */
body.notebook main .cs-strip__caption{font-size:13px;font-style:italic;line-height:1.5}

/* Screen viewer: one screen at a time. Tall pages scroll inside the frame; sets step with arrows or chips; expand for full size. */
.cs-viewer{--vw:min(1120px,calc(var(--page-w) - 48px));position:relative;width:var(--vw);margin:28px 0 0 calc(50% - var(--vw) / 2)}
.cs-viewer__frame{position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.cs-viewer__track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none}
.cs-viewer__track::-webkit-scrollbar{display:none}
.cs-viewer__track:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cs-viewer__slide{flex:0 0 100%;height:100%;overflow-y:auto;overflow-x:hidden;scroll-snap-align:start;scroll-snap-stop:always;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent;background:#fff}
.cs-viewer__slide img{display:block;width:100%;height:auto}
.cs-viewer .cs-carousel__nav{z-index:2}
.cs-viewer__tools{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:6px}
.cs-viewer__expand{width:32px;height:32px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);background:color-mix(in srgb,var(--paper) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);cursor:pointer;transition:transform .18s}
.cs-viewer__expand:hover{transform:scale(1.06)}
.cs-viewer__expand svg{width:14px;height:14px}
.cs-viewer__expand .is-in{display:none}
.cs-viewer.is-zoom .cs-viewer__expand .is-out{display:none}
.cs-viewer.is-zoom .cs-viewer__expand .is-in{display:block}
.cs-viewer__hint{position:absolute;left:50%;bottom:14px;z-index:2;transform:translate(-50%,8px);display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.cs-viewer__hint svg{width:12px;height:12px}
.cs-viewer.is-tall:not(.is-scrolled) .cs-viewer__hint{opacity:.92;transform:translate(-50%,0)}
.cs-viewer__tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.cs-viewer__tab{padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--quiet);font:inherit;font-size:13px;line-height:1.5;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.cs-viewer__tab:hover{color:var(--ink)}
.cs-viewer__tab[aria-current=true]{background:var(--wash);border-color:color-mix(in srgb,var(--ink) 16%,transparent);color:var(--ink)}
.cs-viewer figcaption{margin:10px 2px 0;font-size:13px;font-style:italic;line-height:1.5;color:var(--quiet)}
.cs-viewer-backdrop{position:fixed;inset:0;z-index:89;background:color-mix(in srgb,var(--paper) 72%,#000 28%);opacity:.96}
.cs-viewer.is-zoom{position:fixed;z-index:90;inset:20px;width:auto;margin:0;display:flex;flex-direction:column;padding:14px 14px 12px;border-radius:16px;background:var(--paper);box-shadow:0 30px 80px -20px #0006}
.cs-viewer.is-zoom .cs-viewer__frame{flex:1;min-height:0;aspect-ratio:auto}
.cs-viewer.is-zoom figcaption{margin-top:8px}
html.cs-viewer-open{overflow:hidden}
@media(max-width:600px){
  .cs-viewer__frame{aspect-ratio:4/3}
  .cs-viewer.is-zoom{inset:0;border-radius:0;padding:10px}
  .cs-viewer__tab{padding:3px 9px}
}
@media(prefers-reduced-motion:reduce){.cs-viewer__track{scroll-behavior:auto}.cs-viewer__hint{transition:none}}
.cs-board.cs-board--hausleads{aspect-ratio:16/9;background:#e9eef9;border:1px solid var(--line)}
.cs-board--hausleads>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cs-howto{margin:22px 0 0;padding:12px 14px;border-radius:10px;background:var(--wash);font-size:13px;line-height:1.55;color:var(--body-ink)}
.cs-viewer__slide--natural{background:#f3f4f6;text-align:center;padding:28px 16px}
.cs-viewer__slide--natural img{display:inline-block;width:auto;max-width:100%;height:auto;border-radius:6px}
.cs-viewer__slide--pair{display:flex;justify-content:center;align-items:flex-start;gap:20px}
.cs-viewer__slide--pair img{flex:0 1 auto;min-width:0;max-width:calc(50% - 10px)}
/* Buyer action → agent signal: the two sides of one product, row by row */
.cs-bridge{margin:24px 0 0}
.cs-bridge ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cs-bridge__head{display:grid;grid-template-columns:1fr 56px 1fr;padding:0 0 8px;font-size:13px;color:var(--quiet)}
.cs-bridge__head span:last-child{grid-column:3}
.cs-bridge li{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cs-bridge p{margin:0;font-size:15px;line-height:1.5}
.cs-bridge__from{color:var(--ink)}
.cs-bridge__to{color:var(--body-ink)}
.cs-bridge__to a{display:block;width:fit-content;margin-top:2px;font-size:13px;color:var(--quiet);text-decoration:none}
.cs-bridge__to a:hover{color:var(--plane)}
.cs-bridge__arrow{justify-self:center;width:40px;height:12px;fill:none;stroke:var(--plane);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){
  .cs-bridge__head{display:none}
  .cs-bridge li{grid-template-columns:1fr;gap:6px}
  .cs-bridge__from::before,.cs-bridge__to::before{display:block;font-size:12px;color:var(--quiet)}
  .cs-bridge__from::before{content:'The buyer does'}
  .cs-bridge__to::before{content:'The agent sees'}
  .cs-bridge__arrow{justify-self:start;transform:rotate(90deg);width:20px;margin-left:-4px}
}
/* Phone screens: a row of handsets, scrolls sideways when it runs out of room */
.cs-phones{--vw:min(1120px,calc(var(--page-w) - 48px));width:var(--vw);margin:28px 0 0 calc(50% - var(--vw) / 2);display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.cs-phones:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cs-phones__item{margin:0;scroll-snap-align:start}
.cs-phones__item img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);background:#fff}
.cs-phones__item figcaption{margin:10px 2px 0;font-size:13px;font-style:italic;line-height:1.5;color:var(--quiet)}
.cs-phones__item figcaption strong{font-style:normal;font-weight:500;color:var(--ink)}
@media(max-width:600px){.cs-phones{grid-auto-columns:62%}}