/* Case-study pages — Verdance 2583:176416. Values from tokens.css only. */
/* === FIXED NAV (2583:178594) — 2 CTAs, fixed, bg = page token === */
.cs-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-nav);
width: var(--page-w);
height: var(--cs-nav-h);
margin: 0 auto;
padding: var(--sp-16) var(--page-margin);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--c-bg);
}
/* === PAGE FRAME === */
.cs-page {
position: relative;
width: var(--page-w);
margin: 0 auto;
padding-top: var(--sp-170);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-100);
background: var(--c-bg);
}
/* Top label 2583:178609 — scrolls with the page (as Figma) */
.cs-label {
position: absolute;
left: var(--cs-label-x);
top: var(--cs-label-y);
width: var(--cs-label-w);
font-weight: var(--fw-bold);
font-size: var(--fs-24);
line-height: var(--lh-auto);
text-align: center;
color: var(--c-label-pink);
}
.cs-title {
width: var(--cs-title-w);
font-weight: var(--fw-bold);
font-size: var(--fs-82);
line-height: var(--cs-title-lh);
text-align: center;
color: var(--c-grey-e6e9f3);
}
/* === VIDEO === */
.cs-video { display: block; background: var(--c-bg); }
/* Poster as the video's own background (set by case-study.js as --poster-bg), sized like the video's object-fit:
Safari drops the poster attribute while it loads a source (HLS) and paints nothing until the first frame, so this
keeps the poster visible instead of an empty dark box. Frames cover it once they paint. (owner 2026-10-09) */
video[data-src-desktop] { background-image: var(--poster-bg, none); background-repeat: no-repeat; background-position: center; background-size: contain; }
video.cs-video--wide[data-src-desktop], video.cs-video--full[data-src-desktop], video.cs-video--arrival[data-src-desktop] { background-size: cover; }
.cs-phone__screen video[data-src-desktop] { background-size: 100% 100%; }
/* Poster layer above each video (case-study.js places it on the video's exact box with the video's object-fit):
it hides the video's first moments (Safari shows them shifted / empty) and fades out once the first frame at the
right time has painted, so poster -> video is not a hard cut. Out of flow: no layout change. (owner 2026-10-09) */
.cs-vposter { position: absolute; z-index: 1; margin: 0; max-width: none; max-height: none; pointer-events: none; opacity: 1; transition: opacity var(--dur-poster-fade) linear; }
.cs-vposter.is-gone { opacity: 0; }
/* Loading cue: a 24 px ring at the poster layer's bottom-right, only while a video in view waits > 300 ms for its
first frame (case-study.js adds .is-on); fades with the poster. Hidden with reduced motion. (owner 2026-10-09) */
.cs-vload { position: absolute; z-index: 2; width: var(--sp-24); height: var(--sp-24); margin: 0; box-sizing: border-box; pointer-events: none;
border: var(--sp-2) solid var(--c-vload); border-top-color: transparent; border-radius: 50%; opacity: 0;
transition: opacity var(--dur-poster-fade) linear; animation: cs-vload-spin var(--dur-vload-spin) linear infinite; }
.cs-vload.is-on { opacity: 1; }
@keyframes cs-vload-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cs-vposter { transition: none; } .cs-vload { display: none; } }
.cs-video--hero { width: var(--page-w); height: var(--cs-hero-video-h); object-fit: contain; }
.cs-video--wide { width: var(--cs-wide-w); height: var(--cs-video-wide-h); object-fit: cover; }
/* === META CARD (2583:176420) === */
.cs-meta {
width: var(--cs-meta-w);
padding: var(--sp-24);
display: flex;
flex-direction: column;
gap: var(--sp-24);
border-radius: var(--r-16);
background: var(--c-meta-bg);
}
.cs-meta__row { display: flex; justify-content: space-between; }
.cs-meta__item { display: flex; flex-direction: column; gap: var(--sp-4); }
.cs-meta__key {
font-weight: var(--fw-semibold);
font-size: var(--fs-16);
line-height: var(--lh-150-8);
color: var(--c-grey-e6e9f3);
}
.cs-meta__value {
font-style: italic;
font-size: var(--fs-24);
line-height: var(--lh-150-8);
color: var(--c-grey-8e8e8e);
}
/* === CONTENT COLUMN (2583:176434 / 176435) === */
.cs-content {
width: var(--cs-content-w);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-60);
}
.cs-section {
width: var(--cs-text-w);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-24);
}
.cs-section--wide { width: var(--page-w); gap: var(--sp-12); }
.cs-h2 {
font-weight: var(--fw-bold);
font-size: var(--fs-32);
line-height: var(--lh-32);
text-align: center;
color: var(--c-white);
scroll-margin-top: var(--cs-nav-h);
}
.cs-h2--overview { line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.cs-block { width: 100%; display: flex; flex-direction: column; }
.cs-block--gap { gap: var(--sp-24); }
.cs-lead, .cs-p {
font-size: var(--fs-24);
line-height: var(--lh-40);
}
.cs-lead { font-weight: var(--fw-bold); color: var(--c-white); }
.cs-p { color: var(--c-grey-8e8e8e); }
.cs-p b { font-weight: var(--fw-bold); color: var(--c-white); }
.cs-figure { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-caption {
font-weight: var(--fw-semibold);
font-size: var(--fs-12);
line-height: var(--lh-auto);
text-transform: uppercase;
text-align: center;
color: var(--c-white);
}
.cs-caption--11 { font-size: var(--fs-11); }
/* "Why I built this" figure with callouts */
.cs-why { position: relative; width: var(--cs-text-w); }
.cs-why__img { width: var(--cs-text-w); height: var(--cs-why-img-h); object-fit: cover; }
.cs-note { position: absolute; display: flex; flex-direction: column; gap: var(--sp-6); }
.cs-note--1 { left: var(--cs-note-1-x); top: var(--cs-note-1-y); width: var(--cs-note-1-w); }
.cs-note--2 { left: var(--cs-note-2-x); top: var(--cs-note-2-y); width: var(--cs-note-2-w); }
.cs-note--3 { left: var(--cs-note-3-x); top: var(--cs-note-3-y); width: var(--cs-note-3-w); }
.cs-note__title { font-weight: var(--fw-semibold); font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-white); }
.cs-note__text { font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.cs-arrow { position: absolute; color: var(--c-verdance-fg); }
.cs-arrow--1 { left: var(--cs-arrow-1-x); top: var(--cs-arrow-1-y); }
.cs-arrow--2 { left: var(--cs-arrow-2-x); top: var(--cs-arrow-2-y); }
.cs-arrow--3 { left: var(--cs-arrow-3-x); top: var(--cs-arrow-3-y); }
/* Moodboard + boards */
.cs-moodboard { width: var(--page-w); height: var(--cs-moodboard-h); background: var(--c-moodboard); }
.cs-board { display: block; width: var(--cs-board-w); height: var(--cs-board-h); }
.cs-fontboard { width: var(--cs-wide-w); height: var(--cs-fontboard-h); }
/* === SIDE NAV (2583:178624) — fixed === */
.cs-sidenav {
position: fixed;
left: calc(50% - var(--page-w) / 2 + var(--cs-sidenav-x));
top: var(--cs-sidenav-y);
z-index: var(--z-nav);
width: var(--cs-sidenav-w);
padding: var(--sp-12);
display: flex;
flex-direction: column;
gap: var(--sp-6);
border-radius: var(--r-12);
background: var(--g-side-nav-radial),
linear-gradient(var(--g-side-nav-angle), var(--g-side-nav-linear-stops));
}
.cs-sidenav::before {
content: "";
position: absolute;
inset: 0;
padding: var(--bw-1);
border-radius: var(--r-12);
background: var(--g-side-nav-border);
-webkit-mask: linear-gradient(var(--c-black) 0 0) content-box, linear-gradient(var(--c-black) 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.cs-sidenav a {
width: var(--cs-sidenav-item-w);
font-size: var(--fs-12);
line-height: var(--lh-150-8);
color: var(--c-grey-8e8e8e);
white-space: nowrap;
}
.cs-sidenav a.is-selected { color: var(--c-grey-e6e9f3); } /* Selected 1322:32217 */
/* === STICKY PILL (2608:188737) — fixed bottom === */
.cs-pill {
position: fixed;
left: 50%;
bottom: var(--cs-pill-bottom);
z-index: var(--z-nav);
width: var(--cs-pill-w);
transform: translateX(-50%);
padding: var(--sp-12) var(--sp-16);
display: flex;
align-items: center;
gap: var(--sp-60);
border-radius: var(--r-32);
background: var(--c-pill-bg);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
/* hidden until the Overview comes into view (case-study.js adds .is-visible) */
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, var(--pill-rise));
transition: opacity var(--dur-pill) var(--ease-out), transform var(--dur-pill) var(--ease-out), visibility 0s linear var(--dur-pill);
}
.cs-pill.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%);
transition: opacity var(--dur-pill) var(--ease-out), transform var(--dur-pill) var(--ease-out), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) { /* fade only, no rise */
.cs-pill, .cs-pill.is-visible { transform: translateX(-50%) !important; }
.cs-pill { transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear var(--dur-pill) !important; }
.cs-pill.is-visible { transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear 0s !important; }
}
.cs-pill__logo { width: var(--icon-32); height: var(--icon-32); flex: none; }
.cs-pill__live { display: flex; align-items: center; gap: var(--sp-8); }
.cs-pill__dot {
width: var(--dot-6);
height: var(--dot-6);
border-radius: 50%;
background: var(--c-live-green);
animation: cs-dot var(--dur-dot-cycle) infinite;
}
.cs-pill__live span, .cs-pill__visit {
font-family: var(--font-pp);
font-weight: var(--fw-ultrabold);
font-style: italic;
font-size: var(--fs-14);
line-height: var(--lh-32);
color: var(--c-white);
white-space: nowrap;
}
.cs-pill__visit {
display: inline-flex; align-items: center; justify-content: center;
width: var(--cs-visit-w);
padding: 0 var(--sp-12);
border-radius: var(--r-12);
background: var(--c-verdance-fg);
text-align: center;
}
/* Figma: AFTER_TIMEOUT 0.5s → change, smart animate 0.3s ease-out, both ways */
@keyframes cs-dot {
0%, 31.25% { background: var(--c-live-green); animation-timing-function: var(--ease-out); }
50%, 81.25% { background: var(--c-verdance-fg); animation-timing-function: var(--ease-out); }
100% { background: var(--c-live-green); }
}
html { scroll-behavior: smooth; } /* side-nav scroll (Figma: scroll animate) */
@media (prefers-reduced-motion: reduce) { .cs-pill__dot { animation: none; } }
.cs-para { display: block; }
.cs-para + .cs-para { margin-top: var(--hero-para-gap); } /* Figma paragraph spacing 11 */
/* === CHUNK B === */
.cs-video--full { width: var(--page-w); height: var(--cs-video-full-h); object-fit: cover; }
.cs-video--arrival { width: var(--page-w); height: var(--cs-video-arrival-h); object-fit: cover; }
/* Finished town 2583:176725 */
.cs-town { width: var(--page-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-60); }
.cs-town__title {
font-family: var(--font-pp);
font-weight: var(--fw-ultrabold);
font-style: italic;
font-size: var(--fs-150);
line-height: var(--lh-pp-150);
text-align: center;
white-space: nowrap;
color: var(--c-white);
scroll-margin-top: var(--cs-nav-h);
}
.cs-town__title span { display: block; color: var(--c-verdance-fg); }
.cs-crop { position: relative; overflow: hidden; }
.cs-crop video { position: absolute; max-width: none; }
.cs-crop--tour { width: var(--page-w); height: var(--cs-tour-h); }
.cs-crop--tour video { width: var(--cs-tour-vw); height: var(--cs-tour-vh); left: var(--cs-tour-vx); top: var(--cs-tour-vy); }
/* Phones 2583:176730 */
.cs-phones { display: flex; gap: var(--sp-40); }
.cs-phone { width: var(--cs-phone-col-w); display: flex; flex-direction: column; align-items: center; }
.cs-phone__frame { position: relative; width: var(--cs-phone-col-w); height: var(--cs-phone-frame-h); }
.cs-phone__img { position: absolute; left: var(--sp-8); top: var(--cs-phone-img-y); width: var(--cs-phone-img-w); height: var(--cs-phone-img-h); }
.cs-phone__screen { position: absolute; left: var(--cs-phone-screen-x); width: var(--cs-phone-screen-w); height: var(--cs-phone-screen-h); }
.cs-phone__screen--a { top: var(--cs-phone-screen-y-a); border-radius: var(--r-28); }
.cs-phone__screen--b { top: var(--cs-phone-screen-y-b); border-radius: var(--r-32); background: var(--c-white); }
.cs-phone__screen--a video { width: var(--cs-and-vw); height: var(--cs-and-vh); left: var(--cs-and-vx); top: var(--cs-and-vy); }
.cs-phone__screen--b video { width: var(--cs-iph-vw); height: var(--cs-iph-vh); left: var(--cs-iph-vx); top: var(--cs-iph-vy); }
.cs-phone__screen video { object-fit: fill; } /* non-uniform scale, as Figma */
.cs-phone__label { font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-40); text-align: center; color: var(--c-white); }
.cs-figure--24 { gap: var(--sp-24); } /* film block 2583:176714 uses gap 24 */
/* === CHUNK C === */
.cs-content-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-section--outcome { gap: var(--sp-40); }
.cs-wide { width: var(--cs-wide-card-w); display: flex; flex-direction: column; gap: var(--sp-60); }
.cs-wide__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-wide__charts { display: flex; flex-direction: column; gap: var(--sp-40); }
.cs-lead-150, .cs-p-150 { width: 100%; font-size: var(--fs-24); line-height: var(--lh-150-8); }
.cs-lead-150 { font-weight: var(--fw-semibold); color: var(--c-white); }
.cs-p-150 { color: var(--c-grey-8e8e8e); }
/* Testing: gate image + iPhone bug group */
.cs-gate-img { width: var(--cs-text-w); height: var(--cs-gate-img-h); object-fit: cover; }
.cs-bug { position: relative; width: var(--cs-text-w); height: var(--cs-bug-h); }
.cs-bug__air { position: absolute; left: 0; top: 0; width: var(--cs-text-w); height: var(--cs-air-h); }
.cs-bug__shot { position: absolute; left: var(--cs-shot-x); top: var(--cs-shot-y); width: var(--cs-shot-w); height: var(--cs-shot-h); border-radius: var(--r-35); object-fit: cover; }
.cs-bug__leaf { position: absolute; left: var(--cs-leaf-x); top: var(--cs-leaf-y); width: var(--cs-leaf-w); height: var(--cs-leaf-h); object-fit: cover; }
.cs-bug__arrow { position: absolute; left: var(--cs-bug-arrow-x); top: var(--cs-bug-arrow-y); color: var(--c-verdance-fg); }
.cs-bug__note { position: absolute; left: var(--cs-bug-note-x); top: var(--cs-bug-note-y); width: var(--cs-bug-note-w); font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-white); }
.cs-bug__cap { position: absolute; left: var(--cs-bug-cap-x); top: var(--cs-bug-cap-y); width: var(--cs-bug-cap-w); }
/* Gates */
.cs-gates { width: var(--cs-content-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-gates__row { display: flex; gap: var(--cs-gates-gap); }
.cs-gates__row img { width: var(--cs-gate-w); height: var(--cs-gate-h); object-fit: cover; }
/* Comparison table */
.cs-table { position: relative; display: flex; height: var(--cs-table-h); }
.cs-table__left { width: var(--cs-table-left-w); background: var(--c-card); }
.cs-table__right { width: var(--cs-table-right-w); background: var(--c-verdance-bg); }
.cs-table__head { position: absolute; left: var(--cs-table-head-x); top: var(--cs-table-head-y); width: var(--cs-table-head-w); display: flex; gap: var(--sp-40); padding-left: calc(var(--sp-16) + var(--sp-2)); }
.cs-table__h1 { width: var(--cs-table-col1-w); font-size: var(--fs-24); line-height: var(--lh-40); color: var(--c-strike); }
.cs-table__h2 { width: var(--cs-table-col2-w); font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-24); line-height: var(--lh-40); color: var(--c-white); }
.cs-table__line { position: absolute; top: var(--cs-table-line-y); left: calc(var(--cs-table-head-x) + var(--cs-table-line-x)); width: var(--cs-table-line-w); height: var(--sp-3); background: var(--c-verdance-fg); }
.cs-table__line--grey { left: var(--cs-table-head-x); width: var(--cs-table-grey-w); background: var(--c-table-grey-line); }
.cs-table__list { position: absolute; display: flex; flex-direction: column; gap: var(--sp-24); font-size: var(--fs-20); line-height: var(--lh-40); }
.cs-table__list--old { left: var(--cs-table-left-x); top: var(--cs-table-left-y); width: var(--cs-table-col1-w); color: var(--c-strike); text-decoration: line-through; }
.cs-table__list--new { left: var(--cs-table-right-x); top: var(--cs-table-right-y); width: var(--cs-table-col2-w); font-weight: var(--fw-medium); color: var(--c-white); }
.cs-table__list--new li:last-child { line-height: var(--lh-auto); }
.cs-chart { display: block; }
/* Stat cards */
.cs-stats { display: flex; gap: var(--sp-24); }
.cs-stat { position: relative; width: var(--cs-stat-w); height: var(--cs-stat-h); padding: var(--sp-24); display: flex; flex-direction: column; justify-content: space-between; background: var(--c-card); }
.cs-stat__title { font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-auto); color: var(--c-white); }
.cs-stat__old { font-family: var(--font-inter); font-size: var(--fs-28); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.cs-stat__new { font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-64); line-height: var(--lh-pp-64); text-align: right; color: var(--c-white); }
.cs-stat__note { position: absolute; left: var(--cs-stat-note-x); top: var(--cs-stat-note-y); font-family: var(--font-pp); font-style: italic; font-size: var(--fs-20); line-height: var(--lh-pp-20); color: var(--c-verdance-fg-on-card); }
.cs-stat__arrow { position: absolute; color: var(--c-verdance-fg); }
.cs-stat__arrow--1 { left: var(--cs-stat-arrow-1-x); top: var(--cs-stat-arrow-1-y); }
.cs-stat__arrow--2 { left: var(--cs-stat-arrow-2-x); top: var(--cs-stat-arrow-2-y); }
/* Google scale */
.cs-scale { height: var(--cs-scale-h); padding: var(--sp-40) 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-140); background: var(--c-card); }
.cs-scale__text { width: var(--cs-scale-text-w); display: flex; flex-direction: column; gap: var(--sp-12); }
.cs-scale__title { font-size: var(--fs-24); line-height: var(--lh-auto); color: var(--c-white); }
.cs-scale__desc { font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.cs-scale__scale { position: relative; width: var(--cs-scale-w); display: flex; flex-direction: column; gap: calc(var(--sp-8) + var(--sp-2)); }
.cs-scale__bar { display: block; width: var(--cs-scale-w); height: var(--cs-scale-bar-h); }
.cs-scale__labels { display: flex; }
.cs-scale__col { display: flex; flex-direction: column; gap: var(--sp-8); }
.cs-scale__col:nth-child(1) { width: var(--cs-scale-col-1); }
.cs-scale__col:nth-child(2) { width: var(--cs-scale-col-2); }
.cs-scale__col:nth-child(3) { width: var(--cs-scale-col-3); align-items: center; }
.cs-scale__name { font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-white); }
.cs-scale__range { font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-caption-grey); white-space: nowrap; }
.cs-scale__mark { position: absolute; left: var(--cs-scale-mark-x); top: var(--cs-scale-mark-y); color: var(--c-verdance-fg); }
.cs-scale__mark-text { position: absolute; left: var(--cs-scale-mark-text-x); top: var(--cs-scale-mark-text-y); display: flex; flex-direction: column; }
.cs-scale__mark-text b { font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-40); line-height: var(--lh-pp-40); color: var(--c-white); }
.cs-scale__mark-text span { font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-white); white-space: nowrap; }
/* Takeaways */
.cs-takeaways { width: var(--cs-content-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.cs-head { width: var(--cs-head-w); display: flex; flex-direction: column; gap: var(--sp-24); }
.cs-head .cs-h2 { line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.cs-tk-rows { display: flex; flex-direction: column; align-items: center; gap: var(--tk-row-gap); }
.cs-tk-row { display: flex; gap: var(--tk-col-gap); }
.cs-tk { width: var(--cs-tk-card-w); height: var(--cs-tk-card-h); padding: var(--tk-pad); display: flex; flex-direction: column; gap: var(--tk-gap); background: var(--c-card-2); border-radius: var(--tk-r); }
.cs-tk--wide { width: calc(2 * var(--tk-w) + var(--tk-col-gap)); height: var(--cs-tk-wide-h); flex-direction: row; justify-content: space-between; align-items: center; gap: var(--sp-16); }
.cs-tk__col { width: var(--cs-tk-col-w); display: flex; flex-direction: column; gap: var(--sp-12); }
.cs-tk__head { display: flex; flex-direction: column; gap: var(--sp-12); }
.cs-tk__head svg { width: var(--icon-24); height: var(--icon-24); color: var(--c-verdance-fg-on-card); } /* the project's accent (Figma: icon in the accent) */
.cs-tk__title { font-size: var(--tk-title-fs); line-height: var(--lh-auto); text-transform: capitalize; color: var(--c-white); }
.cs-tk__body { font-size: var(--tk-body-fs); line-height: var(--tk-body-lh); color: var(--c-grey-8e8e8e); }
.cs-tk__take { font-weight: var(--fw-semibold); font-size: var(--fs-18); line-height: var(--lh-160); color: var(--c-verdance-fg-on-card); }
.cs-tk__take--auto { line-height: var(--lh-auto); }
.cs-tk__thumbs { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-tk__thumb-row { display: flex; }
.cs-tk__thumb { width: var(--cs-tk-thumb-col); display: flex; flex-direction: column; gap: var(--sp-17); }
.cs-tk__thumb img { width: var(--cs-tk-thumb-w); height: var(--cs-tk-thumb-h); }
.cs-tk__thumb span, .cs-tk__thumbs > p { font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-caption-grey); }
.cs-tk__thumb span.is-final { color: var(--c-verdance-fg-on-card); }
.cs-tk__thumbs > p { width: 100%; font-size: var(--fs-16); }
/* What's next */
.cs-next { width: var(--cs-content-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.cs-bi { position: relative; display: flex; height: var(--cs-table-h); }
.cs-bi__card { position: relative; width: var(--cs-next-card-w); overflow: hidden; }
.cs-bi__card--en { background: var(--c-cream); }
.cs-bi__card--ar { background: var(--c-verdance-bg); }
.cs-bi__en { position: absolute; left: var(--cs-next-en-x); top: var(--cs-next-en-y); width: var(--cs-next-en-w); display: flex; flex-direction: column; align-items: center; font-family: var(--font-pp); font-size: var(--fs-48); line-height: var(--lh-pp-48); white-space: nowrap; }
.cs-bi__en span:first-child { color: var(--c-ink-333239); }
.cs-bi__en span:last-child { font-weight: var(--fw-ultrabold); font-style: italic; color: var(--c-verdance-fg); }
.cs-bi__ar { position: absolute; left: var(--cs-next-ar-x); top: var(--cs-next-ar-y); width: var(--cs-next-ar-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); font-family: var(--font-arabic); font-size: var(--fs-48); line-height: var(--lh-arabic); white-space: nowrap; }
.cs-bi__ar span:first-child { color: var(--c-white); }
.cs-bi__ar span:last-child { font-weight: var(--fw-bold); color: var(--c-verdance-fg); }
.cs-bi__head { position: absolute; left: var(--cs-table-head-x); top: var(--cs-table-head-y); font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-24); line-height: var(--lh-40); text-align: center; }
.cs-bi__head span { position: absolute; top: 0; }
.cs-bi__head span:first-child { left: calc(var(--sp-16) + var(--sp-2)); width: var(--cs-next-col-en); color: var(--c-verdance-fg); }
.cs-bi__head span:last-child { left: var(--cs-next-col-ar-x); width: var(--cs-next-col-ar); color: var(--c-white); }
.cs-bi__line { position: absolute; left: var(--cs-table-head-x); top: var(--cs-table-line-y); width: var(--cs-next-line-w); height: var(--sp-3); background: var(--c-verdance-fg); }
/* Footer 2583:176947 */
.cs-footer { position: relative; width: var(--page-w); height: var(--cs-footer-h); overflow: hidden; background: var(--c-verdance-bg); }
.cs-footer__draw { position: absolute; left: 0; top: var(--cs-footer-draw-y); width: var(--cs-footer-draw-w); height: var(--cs-footer-draw-h); }
.cs-footer__title, .cs-footer__tag { position: absolute; font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; text-align: center; color: var(--c-cream-text); white-space: nowrap; }
.cs-footer__title { left: var(--cs-footer-title-x); top: var(--cs-footer-title-y); width: var(--cs-footer-title-w); font-size: var(--fs-140); line-height: var(--lh-pp-140); }
.cs-footer__tag { left: var(--cs-footer-tag-x); top: var(--cs-footer-tag-y); width: var(--cs-footer-tag-w); font-size: var(--fs-54); line-height: var(--lh-pp-54); }
.cs-footer__tag .gap { color: var(--c-tag-mid); }
.cs-footer__tag .pink { color: var(--c-verdance-fg); }
.cs-badge {
position: absolute;
left: var(--cs-badge-x);
top: var(--cs-badge-y);
width: var(--cs-badge);
height: var(--cs-badge);
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-8);
border-radius: 50%;
box-shadow: inset 0 0 0 var(--bw-1) var(--c-white);
transition: background-color var(--dur-hover) var(--ease-out);
}
.cs-badge::after { /* hover ring (Rectangle 5193 in 2555:166238) */
content: "";
position: absolute;
left: var(--cs-badge-ring-x);
top: var(--cs-badge-ring-y);
width: var(--cs-badge-ring);
height: var(--cs-badge-ring);
border-radius: 50%;
box-shadow: inset 0 0 0 var(--bw-1) var(--c-white);
opacity: 0;
transition: opacity var(--dur-hover) var(--ease-out);
}
.cs-badge { cursor: pointer; }
.cs-badge:hover, .cs-badge:focus-visible { background-color: var(--c-badge-hover); }
.cs-badge:hover::after, .cs-badge:focus-visible::after { opacity: 1; }
.cs-badge__live { display: flex; align-items: center; gap: var(--sp-4); }
.cs-badge__live .cs-pill__dot { background: var(--c-verdance-fg); animation-delay: calc(var(--dur-dot-cycle) / -2); }
.cs-badge__text { font-family: var(--font-pp); font-weight: var(--fw-ultrabold); font-style: italic; font-size: var(--fs-16); line-height: var(--lh-pp-16); color: var(--c-white); white-space: nowrap; }
.cs-badge svg { width: var(--icon-16); height: var(--icon-16); color: var(--c-white); }
/* Next project 2583:176968 */
.cs-nextproj { width: var(--cs-head-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-nextproj__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.cs-nextproj__label, .cs-textbtn {
padding: var(--sp-8) var(--sp-16);
font-weight: var(--fw-semibold);
font-size: var(--fs-12);
line-height: var(--lh-20);
color: var(--c-grey-e6e9f3);
text-shadow: var(--shadow-btn);
}
.cs-nextproj__label { font-style: italic; }
.cs-nextproj__title { font-weight: var(--fw-bold); font-size: var(--fs-r-next); line-height: var(--lh-hero); text-align: center; color: var(--c-grey-e6e9f3); }
.cs-nextproj__btns { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-nextproj__mock { width: var(--cs-mock-w); height: var(--cs-mock-h); border-radius: var(--r-10); }
.cs-page--verdance .cs-nextproj__mock { border-radius: var(--r-16); } /* MindHYVE mockup 3146:212754: r16 in Figma (2026-10-08) */
/* Social footer 2583:178589 */
.cs-social-footer { width: var(--page-w); height: var(--cs-social-h); display: flex; justify-content: center; align-items: flex-start; }
.cs-social-footer .social { align-self: flex-start; }
/* === EDITOR EXPERIENCE (1322:32944) === */
.cs-page--editor, .cs-page--mta { padding-top: var(--sp-148); gap: var(--sp-80); }
.cs-title--editor { line-height: var(--lh-hero); }
.cs-sidenav--editor { top: var(--ed-sidenav-y); width: var(--ed-sidenav-w); --g-side-nav-angle: var(--g-side-nav-angle-editor); }
.cs-sidenav--editor a { width: var(--ed-sidenav-item-w); }
.ed-hero { width: var(--content-w); height: var(--ed-hero-h); }
.ed-col { width: var(--cs-head-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.ed-col .cs-h2 { line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.ed-wide { width: var(--content-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.ed-text { width: 100%; font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-text .hl { color: var(--c-grey-e6e9f3); }
.ed-text b { font-weight: var(--fw-semibold); color: var(--c-grey-e6e9f3); }
.ed-list { width: 100%; display: flex; flex-direction: column; gap: var(--sp-24); }
.ed-feature { width: var(--cs-head-w); display: flex; flex-direction: column; }
.ed-feature__title { align-self: flex-start; font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-feature); list-style: decimal inside; }
.ed-feature__title li::marker { color: var(--c-feature); }
/* Goals */
.ed-goals { display: flex; flex-direction: column; align-items: center; gap: calc(var(--sp-16) + var(--sp-4)); }
.ed-goals__spacer { width: var(--ed-goal-spacer); height: var(--ed-goal-spacer); }
.ed-goals__emoji { width: var(--ed-emoji); height: var(--ed-emoji); }
.ed-goals__list { display: flex; flex-direction: column; gap: var(--sp-12); }
.ed-goal { width: var(--ed-goal-w); padding: var(--sp-12) var(--sp-24); border-radius: var(--r-12); background: var(--c-goal-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-goal-border); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-goal b { font-weight: var(--fw-semibold); color: var(--c-grey-e6e9f3); }
/* Strategy cards */
.ed-cards { width: var(--ed-cards-w); display: flex; flex-direction: column; gap: var(--sp-24); }
.ed-cards__row { display: flex; justify-content: center; gap: var(--sp-24); }
.ed-card { width: var(--ed-card-w); height: var(--ed-card-h); display: flex; flex-direction: column; border-radius: var(--r-16); overflow: hidden; } /* Figma's white card fill is fully covered by the panel + body; painting it only leaked a light hairline at the clipped corners */
.ed-card__img { width: var(--ed-card-w); height: var(--ed-card-top-h); }
.ed-card__body { flex: 1; padding: var(--ed-card-pad-y) var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-12); background: var(--c-goal-bg); }
.ed-card__title { font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.ed-card__text { font-size: var(--fs-20); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
/* Carousel (component sets 1322:24954 / 27711 / 29316 / 30906) */
.ed-carousel { width: var(--ed-slide-w); display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.ed-carousel:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
.ed-carousel__frame { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.ed-carousel__title { width: var(--cs-head-w); font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-150-8); text-align: center; color: var(--c-grey-e6e9f3); }
.ed-slide { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.ed-carousel__slides { width: 100%; display: grid; justify-items: center; }
.ed-carousel__slides > .ed-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden;
transition: opacity var(--dur-slide) var(--ease-out), visibility 0s linear var(--dur-slide); }
.ed-carousel__slides > .ed-slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--dur-slide) var(--ease-out), visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { .ed-carousel__slides > .ed-slide, .ed-carousel__slides > .ed-slide.is-active { transition: none; } }
.ed-slide > img { width: var(--ed-slide-w); height: var(--ed-slide-img-h); }
.ed-slide figcaption { font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-150-8); text-transform: uppercase; text-align: center; color: var(--c-grey-e6e9f3); }
.ed-carousel__controls { display: flex; align-items: center; gap: var(--sp-12); }
.ed-carousel__count { font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); }
.ed-arrow { width: var(--ed-arrow); height: var(--ed-arrow); color: var(--c-white); }
.ed-arrow svg { width: var(--ed-arrow); height: var(--ed-arrow); overflow: visible; }
.ed-arrow path { transition: transform var(--dur-arrow) var(--ease-out); }
.ed-arrow--next path { transform-origin: var(--ed-arrow-next-origin); }
.ed-arrow--prev path { transform-origin: var(--ed-arrow-prev-origin); }
.ed-arrow:not(:disabled):hover path, .ed-arrow:not(:disabled):focus-visible path { transform: scale(var(--ed-arrow-scale)); }
.ed-arrow:disabled { color: var(--c-arrow-off); cursor: default; }
.ed-feature__title { margin: 0; padding: 0; }
.ed-feature--gap24 { gap: var(--sp-24); }
.ed-feature--gap40 { gap: var(--sp-40); }
.ed-wide--24 { gap: var(--sp-24); }
.ed-paras { width: var(--cs-head-w); display: flex; flex-direction: column; gap: var(--hero-para-gap); } /* Figma paragraph spacing 11 */
.ed-wide > .cs-h2 { line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
/* =====================================================================
SHARED RESPONSIVE RULES (all case-study pages)
The design is 1440 wide. Below 1440 the page narrows instead of
scrolling sideways; at 1440 and above nothing changes.
===================================================================== */
html, body { overflow-x: clip; } /* safety net: never a horizontal scrollbar */
/* Nav: background spans the full window; buttons keep their Figma inset from the 1440 frame */
.cs-nav {
width: 100%;
margin: 0;
padding-left: calc(max(0px, (100% - var(--page-w)) / 2) + var(--page-margin));
padding-right: calc(max(0px, (100% - var(--page-w)) / 2) + var(--page-margin));
}
/* Page frame and wide blocks never exceed the window */
.cs-page { width: 100%; max-width: var(--page-w); }
/* (blocks that Figma deliberately extends past their column — 1440 media in a 920/1436 column —
are not capped; html/body overflow-x: clip keeps them from causing a scrollbar) */
.cs-content, .cs-content-wrap, .cs-gates, .cs-takeaways, .cs-next, .cs-social-footer, .ed-cards { max-width: 100%; }
.ed-wide, .cs-page .ed-hero { max-width: calc(100% - 2 * var(--page-margin)); }
/* Images and videos: rendered at their Figma display size (width/height attributes);
the 2x file is only for sharpness. They never grow, and never get wider than the window.
(100vw, not 100%: Figma places some media wider than their text column on purpose.) */
.cs-page img { max-width: 100vw; }
@media (max-width: 1439.98px) {
.cs-page img { height: auto; }
.cs-gates__row { max-width: calc(100% - 2 * var(--page-margin)); }
.cs-gates__row img { min-width: 0; flex: 0 1 var(--cs-gate-w); }
.cs-video--hero, .cs-video--wide, .cs-video--full, .cs-video--arrival { max-width: 100vw; height: auto; }
.cs-video--hero { aspect-ratio: var(--ar-video-hero); }
.cs-video--wide { aspect-ratio: var(--ar-video-wide); }
.cs-video--full { aspect-ratio: var(--ar-video-full); }
.cs-video--arrival { aspect-ratio: var(--ar-video-arrival); }
}
/* Editor: images stay inside their own cards/columns */
.ed-card img, .ed-carousel img, .ed-goals img { max-width: 100%; }
/* Side nav: Figma position measured from the 1440 frame; never off-screen; hidden over the hero */
.cs-sidenav {
left: calc(max(0px, (100% - var(--page-w)) / 2) + var(--cs-sidenav-x));
top: min(var(--cs-sidenav-y), calc(100vh - var(--cs-sidenav-h) - var(--sp-16)));
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear var(--dur-pill);
}
.cs-sidenav.is-visible { opacity: 1; visibility: visible; transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear 0s; }
.cs-sidenav--editor { top: min(var(--ed-sidenav-y), calc(100vh - var(--ed-sidenav-h) - var(--sp-16))); }
@media (prefers-reduced-motion: reduce) {
.cs-sidenav { transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear var(--dur-pill) !important; }
.cs-sidenav.is-visible { transition: opacity var(--dur-pill) var(--ease-out), visibility 0s linear 0s !important; }
}
/* ===== Editor Experience, half 2 (Figma 1322:34840 - 1322:35360) ===== */
.ed-col--32 { gap: var(--sp-32); }
.ed-journey { width: 100%; padding: var(--sp-24); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24);
background: var(--c-goal-bg); border-radius: var(--r-24); box-shadow: inset 0 0 0 var(--bw-1) var(--c-journey-border); }
.ed-journey__title { font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); }
.ed-journey__cols { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.ed-journey__col { display: flex; flex-direction: column; gap: var(--sp-12); }
.ed-journey__head { font-weight: var(--fw-semibold); font-style: italic; font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-journey__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-12);
font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-journey__list--now { color: var(--c-grey-e6e9f3); }
.ed-impact { width: var(--cs-head-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; justify-content: center; align-items: flex-start; gap: var(--sp-24); }
.ed-impact__icons { flex: none; width: var(--ed-emoji); padding: var(--ed-impact-pad-top) 0 var(--sp-24); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.ed-impact__icons picture, .ed-impact__emoji { display: block; width: var(--ed-emoji); height: var(--ed-emoji); }
.ed-impact__line { width: var(--bw-1); height: var(--ed-impact-line-h); background: var(--c-grey-2c2c2d); }
.ed-impact__list { width: var(--ed-impact-text-w); min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-80); }
.ed-impact__item { display: flex; flex-direction: column; gap: var(--sp-8); }
.ed-impact__title { font-weight: var(--fw-semibold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); }
.ed-impact__text { font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.ed-h2-24 { width: 100%; font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); scroll-margin-top: var(--cs-nav-h); }
.ed-photo { position: relative; width: var(--ed-photo-w); height: var(--ed-photo-h); margin: 0; border-radius: var(--r-24); overflow: hidden;
background: var(--c-goal-bg); box-shadow: 0 0 0 var(--bw-4) var(--c-photo-border); }
.ed-photo img { display: block; width: 100%; height: 100%; }
.ed-photo__me { position: absolute; left: var(--ed-photo-me-x); top: var(--ed-photo-me-y); font-weight: var(--fw-bold); font-size: var(--fs-32); line-height: var(--lh-hero); text-align: center; color: var(--c-white); }
.ed-tk-row { max-width: calc(100% - 2 * var(--page-margin)); display: flex; justify-content: center; gap: var(--tk-col-gap); }
.ed-tk { flex: 0 1 var(--ed-tk-w); min-width: 0; padding: var(--tk-pad); display: flex; flex-direction: column; gap: var(--tk-gap); background: var(--c-card-2); border-radius: var(--tk-r); }
.ed-tk__head { display: flex; flex-direction: column; gap: var(--sp-12); }
.ed-tk__head svg { width: var(--icon-24); height: var(--icon-24); color: var(--c-tk-icon); }
.ed-tk__title { font-weight: var(--fw-bold); font-size: var(--tk-title-fs); line-height: var(--lh-auto); text-transform: capitalize; color: var(--c-white); }
.ed-tk__text { font-size: var(--tk-body-fs); line-height: var(--tk-body-lh); color: var(--c-grey-8e8e8e); }
.ed-col .ed-future { width: var(--ed-future-w); max-width: 100%; }
.ed-rule { width: var(--content-w); max-width: calc(100% - 2 * var(--page-margin)); height: 0; margin: 0 0 calc(-1 * var(--bw-1)); border: 0; border-top: var(--bw-1) solid var(--c-grey-1b1b1c); }
/* ===== MEDIA CORNERS (all case-study pages) =====
Every content image, mockup and video frame: --r-media (16px) on all corners, clipped.
:where() keeps this at zero specificity, so any element with a Figma-specific radius
(.cs-bug__shot 35, .cs-nextproj__mock 10.12, phone screens 28/32, .ed-photo 24) keeps its own. */
:where(.cs-page) :where(img, video, .cs-crop) { border-radius: var(--r-media); }
:where(.cs-page) :where(.cs-crop) { overflow: hidden; }
/* Exception: Verdance media corners follow Figma exactly (mostly 0). Zero specificity, so Figma radii
set by class (.cs-bug__shot 35, .cs-nextproj__mock 10.12, phone screens 28/32) still apply. */
:where(.cs-page--verdance) :where(img, video, .cs-crop) { border-radius: 0; }
/* Not rounded: phone bezels and cut-outs, emoji */
.cs-phone__img, .cs-bug__air, .cs-bug__leaf, .ed-goals__emoji, .ed-impact__emoji { border-radius: 0; }
/* Media inside a rounded, clipping frame: the frame gives the corners */
.cs-crop video, .cs-phone__screen video, .ed-card__img, .ed-photo img { border-radius: 0; }
/* ===== MTA case study (Figma 1322:35380) — builds on the Editor (ed-*) components ===== */
.cs-sidenav--mta { top: min(var(--cs-sidenav-y), calc(100vh - var(--mta-sidenav-h) - var(--sp-16))); width: var(--ed-sidenav-w); --g-side-nav-angle: var(--g-side-nav-angle-mta); }
.cs-sidenav--mta a { width: var(--ed-sidenav-item-w); }
.mta-view { width: var(--content-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.mta-view__cap { width: 100%; display: flex; flex-direction: column; gap: var(--sp-8); text-align: center; font-size: var(--fs-20); line-height: var(--lh-150-8); }
.mta-view__title { font-weight: var(--fw-bold); color: var(--c-grey-e6e9f3); }
.mta-view__sub { color: var(--c-grey-8e8e8e); }
/* Annotated mockups: a stage in Figma px; positions/sizes from --x/--y/--w/--h (unitless Figma px) scale with the stage (cqw) */
.mta-annot { position: relative; max-width: 100%; container-type: inline-size; }
.mta-annot--ev { width: calc(var(--mta-ev-w) * 1px); aspect-ratio: var(--mta-ev-w) / var(--mta-ev-h); --stage: var(--mta-ev-w); } /* Figma panel fill is hidden: notes sit on the page bg */
.mta-annot--lv { width: calc(var(--mta-lv-w) * 1px); aspect-ratio: var(--mta-lv-w) / var(--mta-lv-h); --stage: var(--mta-lv-w); }
.mta-annot__item { position: absolute; left: calc(var(--x) / var(--stage) * 100%); top: calc(var(--y) / var(--stage) * 100cqw); width: calc(var(--w) / var(--stage) * 100%); }
.mta-annot__item:is(svg, img) { height: calc(var(--h) / var(--stage) * 100cqw); }
.mta-annot svg { overflow: visible; color: var(--c-annot-arrow); }
.mta-annot__note { font-weight: var(--fw-medium); font-size: calc(16 / var(--stage) * 100cqw); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.mta-annot__note b { font-weight: var(--fw-bold); color: var(--c-grey-e6e9f3); }
.mta-personas { display: flex; justify-content: center; gap: var(--sp-24); }
.mta-persona { width: var(--mta-persona-w); padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); background: var(--c-goal-bg); border-radius: var(--r-8); overflow: hidden; }
.mta-persona__head { display: flex; align-items: center; gap: var(--mta-persona-gap); }
.mta-persona__head img { flex: none; width: var(--mta-avatar); height: var(--mta-avatar); border-radius: 50%; }
.mta-persona__id { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
.mta-persona__who { display: flex; flex-direction: column; gap: var(--sp-4); }
.mta-persona__name { font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.mta-persona__age { font-weight: var(--fw-medium); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mta-persona__tag { padding: var(--sp-4) var(--sp-8); border-radius: var(--r-8); background: var(--c-tag-bg); font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-130); color: var(--c-grey-e6e9f3); }
.mta-persona__bio { font-weight: var(--fw-medium); font-size: var(--fs-12); line-height: var(--lh-170); color: var(--c-persona-text); }
.mta-persona__needs { display: flex; flex-direction: column; gap: var(--sp-12); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.mta-persona__needs-title { font-weight: var(--fw-bold); }
.mta-persona__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: var(--mta-needs-gap); row-gap: var(--sp-12); font-weight: var(--fw-semibold); } /* Figma: wrap, space-between -> col 2 at 163 / 144 */
.mta-persona__list li { position: relative; padding-left: var(--mta-bullet-indent); }
.mta-persona__list li::before { content: "\2022"; position: absolute; left: var(--mta-bullet-x); }
.ed-cards--40 { gap: var(--sp-40); }
.mta-pain { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); }
.mta-pain__label { font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); }
.mta-notes { display: flex; gap: var(--sp-16); }
.mta-note { flex: 0 1 var(--mta-note-w); min-width: 0; height: var(--mta-note-h); padding: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-12); overflow: hidden;
background: var(--c-bg); border-radius: var(--r-16); box-shadow: var(--sh-note), inset 0 0 0 var(--bw-1) var(--note-c); }
.mta-note--1 { --note-c: var(--c-note-1); } .mta-note--2 { --note-c: var(--c-note-2); } .mta-note--3 { --note-c: var(--c-note-3); } .mta-note--4 { --note-c: var(--c-note-4); }
.mta-note__title { font-family: var(--font-roboto); font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-20); color: var(--c-grey-e6e9f3); }
.mta-note__list { margin: 0; padding: 0 0 0 var(--sp-16); display: flex; flex-direction: column; gap: var(--mta-note-list-gap); list-style: disc;
font-family: var(--font-inter); font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-150); color: var(--c-grey-8e8e8e); }
.mta-note__list b { font-weight: var(--fw-bold); color: var(--c-grey-e6e9f3); }
.mta-note__list b.dim { color: var(--c-grey-8e8e8e); }
.mta-note__list .lt { color: var(--c-grey-e6e9f3); }
.ed-goals--plain .ed-goals__spacer { display: none; }
/* Competitor cards 1322:36149: no container fill; each image r16 + 4px OUTSIDE stroke #5F5F62 */
.mta-comps { width: var(--ed-slide-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--mta-comps-gap); }
.mta-comps__row { display: flex; gap: var(--sp-16); }
.mta-comps__row--b { gap: var(--sp-17); }
.mta-comps img { flex: 1 1 0; min-width: 0; width: var(--mta-comp-w); height: auto; aspect-ratio: var(--mta-comp-ar-a); border-radius: var(--r-16); box-shadow: 0 0 0 var(--bw-4) var(--c-photo-border); }
.mta-comps__row--b img { aspect-ratio: var(--mta-comp-ar-b); }
.ed-col--40 { gap: var(--sp-40); }
.ed-text b.bold { font-weight: var(--fw-bold); }
.mta-annot { margin: 0; }
/* ===== MTA half 2 (Figma 1322:36157 - 1322:37963) ===== */
.mta-col-left { align-items: flex-start; }
.mta-h3 { font-weight: var(--fw-semibold); font-size: var(--fs-24); line-height: var(--lh-hero); color: var(--c-grey-e6e9f3); scroll-margin-top: var(--cs-nav-h); }
.mta-wires { width: var(--ed-slide-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--mta-wire-row-gap); }
.mta-wires__row { display: flex; gap: var(--mta-wire-gap); }
.mta-wires img { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: var(--mta-wire-ar-a); border-radius: var(--r-24); } /* Figma r24, 4px INSIDE stroke baked in */
.mta-wires__row + .mta-wires__row img { aspect-ratio: var(--mta-wire-ar-b); }
.mta-shot { border-radius: var(--r-8); box-shadow: 0 0 0 var(--bw-4) var(--c-photo-border); } /* Figma r8 + 4px OUTSIDE stroke */
.mta-ut { width: var(--ed-slide-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-80); }
.mta-ut__block { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.mta-ut__title { font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-150-8); text-align: center; color: var(--c-grey-e6e9f3); }
.mta-ut__row { width: 100%; display: flex; justify-content: center; gap: var(--sp-16); }
.mta-ut__row img { flex: 0 1 var(--mta-shot-w); min-width: 0; height: auto; aspect-ratio: var(--mta-shot-ar-a); }
.mta-pc { width: 100%; display: flex; justify-content: center; gap: var(--sp-40); }
.mta-pc__col { flex: 0 1 var(--ed-card-w); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.mta-pc__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.mta-pc__fig figcaption { font-size: var(--fs-16); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.mta-pc__fig img { width: 100%; height: auto; aspect-ratio: var(--mta-shot-ar-b); }
.mta-pc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.mta-pc__list li { display: flex; align-items: center; gap: var(--sp-4); font-weight: var(--fw-medium); font-size: var(--fs-16); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.mta-pc__ico { flex: none; width: var(--sp-16); height: var(--sp-16); }
.mta-pc__ico--ok { color: var(--c-pro); } .mta-pc__ico--no { color: var(--c-con); }
.mta-carousels { display: flex; flex-direction: column; align-items: center; gap: var(--sp-80); max-width: 100%; }
.mta-carousel__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.mta-carousel__sub { width: var(--cs-head-w); max-width: 100%; font-size: var(--fs-20); line-height: var(--lh-150-8); text-align: center; color: var(--c-grey-8e8e8e); }
.mta-results, .mta-learn { width: var(--content-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-80); }
.mta-results__top, .mta-learn__top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.mta-results__cards { width: var(--cs-head-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-40); }
.mta-learn__rows { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.ed-journey.mta-survey, .ed-journey.mta-cloud { overflow: hidden; } /* Figma: clip content, r24, 1px INSIDE stroke #1D1E1E */
.mta-survey__table { display: grid; grid-template-columns: var(--mta-survey-cols); column-gap: var(--mta-survey-col-gap); row-gap: var(--sp-12); border-collapse: collapse;
font-weight: var(--fw-medium); font-size: var(--fs-32); line-height: var(--lh-150-8); text-align: center; color: var(--c-grey-8e8e8e); }
.mta-survey__table :is(thead, tbody, tr) { display: contents; }
.mta-survey__table :is(th, td) { padding: 0; font-weight: inherit; }
.mta-survey__h { font-weight: var(--fw-regular); font-style: italic; font-size: var(--fs-48); line-height: var(--lh-150-8); }
.mta-survey__table td:last-child { display: flex; justify-content: center; align-items: center; gap: var(--sp-4); }
.mta-survey__now { color: var(--c-grey-e6e9f3); }
.mta-survey__gain { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-16); }
.mta-survey__up { width: var(--sp-16); height: var(--sp-16); color: var(--c-gain); }
.ed-journey.mta-cloud { position: relative; display: block; height: var(--mta-cloud-h); }
.mta-cloud__w { position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); transform-origin: 0 0; transform: rotate(calc(var(--r) * -1deg));
font-style: italic; font-size: calc(var(--fs) * 1px); line-height: var(--lh-150-8); white-space: nowrap; color: var(--c-grey-e6e9f3); }
.mta-cloud__w--blue { color: var(--c-cloud-blue); }
.mta-cloud__text { position: relative; font-weight: var(--fw-medium); font-size: var(--fs-24); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); }
.mta-impact { width: var(--cs-head-w); max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-24); }
.mta-impact__row { width: 100%; max-width: 100%; }
.mta-impact__icons { padding-top: var(--mta-impact-pad-top); }
.mta-line-a { height: var(--mta-impact-line-a); }
.mta-stroke { -webkit-text-stroke: calc(2 * var(--bw-1)) var(--c-black); paint-order: stroke fill; } /* Figma: 1px OUTSIDE black text stroke */
.mta-next__title { text-wrap: balance; } /* owner's decision: balanced lines (explicit
s in the HTML; balance alone left "Workspace" on its own) */
.mta-next__mock { width: calc(var(--cs-mock-w) + 2 * var(--mta-next-stroke)); max-width: none; height: auto; margin: calc(-1 * var(--mta-next-stroke)); border-radius: var(--mta-next-r); }
/* ===== TEAM WORKSPACE case study (Figma 2235:166662) ===== */
/* isolation: the rotated user-flow diagram sits at z-index -1, above the page background but under later text (as Figma) */
.cs-page--tw { padding-top: var(--sp-100); gap: var(--sp-100); isolation: isolate; }
.cs-sidenav--tw { width: var(--ed-sidenav-w); --g-side-nav-angle: var(--g-side-nav-angle-tw); }
.cs-sidenav--tw a { width: var(--ed-sidenav-item-w); }
.tw-title { line-height: var(--cs-title-lh); text-wrap: balance; }
.tw-title__p { display: block; margin-bottom: var(--sp-11); } /* Figma paragraph spacing 11 after line 1 */
.tw-hero { width: var(--tw-hero-w); max-width: calc(100% - 2 * var(--page-margin)); height: auto; margin: calc(-1 * var(--tw-hero-stroke)); }
:where(.cs-page--tw) .tw-hero { border-radius: var(--tw-hero-r); }
.tw-overview { width: var(--cs-content-w); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.tw-content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-60); }
.tw-col { width: var(--tw-text-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.tw-col--left { align-items: flex-start; }
.tw-sub { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); } /* Figma 2235:167041 */
.tw-text { width: 100%; margin: 0; font-size: var(--fs-24); line-height: var(--lh-40); color: var(--c-grey-8e8e8e); --tw-b: var(--c-white); }
.tw-text--soft { --tw-b: var(--c-tw-label); }
.tw-text b { font-weight: var(--fw-bold); color: var(--tw-b); }
.tw-text ul, .tw-text ol { margin: 0; padding: 0; list-style: none; }
.tw-text li { position: relative; padding-left: var(--sp-36); }
.tw-text ul > li::before { content: "\2022"; position: absolute; left: var(--sp-12); color: var(--tw-b); }
.tw-step { position: relative; padding-left: var(--sp-37); font-weight: var(--fw-bold); color: var(--c-tw-step); } /* Figma ordered list, numbered across text boxes */
.tw-step::before { content: attr(data-n) "."; position: absolute; left: var(--sp-9); }
.tw-gap { display: block; height: var(--lh-40); }
/* Carousels: each slide is a whole Figma card */
.tw-carousel { width: auto; max-width: calc(100% - 2 * var(--page-margin)); gap: var(--sp-12); }
.tw-carousel--persona { gap: calc(var(--sp-16) + var(--tw-cap-gap)); }
.tw-card { box-sizing: border-box; width: var(--tw-matrix-w); max-width: 100%; min-height: var(--tw-matrix-h); padding: var(--sp-24); border-radius: var(--r-40); background: var(--c-tw-card); box-shadow: var(--sh-tw-card); }
.tw-card__title { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-36); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.tw-matrix { position: relative; display: flex; flex-direction: column; gap: var(--sp-33); }
.tw-matrix::before { content: ""; position: absolute; left: calc(var(--sp-24) + var(--tw-col-hl-x)); top: calc(var(--sp-24) + var(--tw-col-hl-y)); width: var(--tw-col-hl-w); height: var(--tw-col-hl-h); border-radius: var(--r-16); background: var(--c-tw-col); }
.tw-matrix__table { position: relative; display: grid; grid-template-columns: repeat(6, var(--tw-col-w)); justify-content: space-between; row-gap: var(--sp-24); margin: 0; font-size: var(--fs-18); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.tw-matrix__table > * { margin: 0; min-height: var(--tw-cell-h); }
.tw-matrix__head { height: var(--tw-head-h); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; font-weight: var(--fw-bold); }
.tw-matrix__head--first { justify-content: flex-end; color: var(--c-white); }
.tw-matrix__feat { font-weight: var(--fw-bold); }
.tw-matrix__table svg { display: block; }
:where(.cs-page--tw) .tw-logo { border-radius: 0; }
:where(.cs-page--tw) .tw-logo--r2 { border-radius: var(--r-2); }
.tw-comp { display: flex; flex-direction: column; gap: var(--sp-40); }
.tw-comp__table { display: flex; flex-direction: column; gap: var(--sp-40); margin: 0; font-size: var(--fs-20); line-height: var(--lh-auto); color: var(--c-grey-e6e9f3); }
.tw-comp__row { display: grid; grid-template-columns: var(--tw-comp-cols); align-items: start; }
.tw-comp__row--head { grid-template-columns: var(--tw-comp-cols-head); font-weight: var(--fw-bold); }
.tw-comp__row > * { margin: 0; }
.tw-comp__name { display: flex; align-items: center; gap: var(--sp-12); font-weight: var(--fw-bold); }
.tw-comp__rule { width: 1px; height: var(--tw-rule-h); background: var(--c-tw-rule); }
.tw-comp__focus { font-weight: var(--fw-bold); }
.tw-persona { width: var(--tw-persona-w); min-height: var(--tw-persona-h); display: flex; gap: var(--sp-40); }
.tw-persona__photo { position: relative; flex: none; width: var(--tw-photo-w); height: var(--tw-photo-h); border-radius: var(--r-30); box-shadow: 0 0 0 var(--tw-photo-stroke) var(--tw-stroke), var(--sh-tw-photo-out); }
.tw-persona__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.cs-page--tw) .tw-persona__photo img { border-radius: var(--r-30); }
.tw-persona__photo::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-30); background: var(--g-tw-photo); box-shadow: var(--sh-tw-photo-in); }
.tw-persona--1 { --tw-stroke: var(--c-tw-p1-stroke); }
.tw-persona--2 { --tw-stroke: var(--c-tw-p2-stroke); }
.tw-persona__id { position: absolute; z-index: 1; left: var(--tw-name-x); top: var(--tw-name-y); display: flex; flex-direction: column; gap: var(--sp-12); color: var(--c-grey-e6e9f3); }
.tw-persona__name { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-36); line-height: var(--lh-auto); }
.tw-persona__facts { margin: 0; display: flex; flex-direction: column; gap: var(--sp-16); font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-auto); }
.tw-persona__facts div { display: flex; gap: var(--sp-10); }
.tw-persona__facts dt, .tw-persona__facts dd { margin: 0; }
.tw-persona__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-24); }
.tw-persona__block { display: flex; flex-direction: column; gap: var(--sp-16); }
.tw-persona__block + .tw-persona__block::before { content: ""; height: 1px; background: repeating-linear-gradient(90deg, var(--c-tw-dash) 0 var(--sp-6), transparent var(--sp-6) var(--sp-12)); }
.tw-chip { align-self: flex-start; display: flex; align-items: center; gap: var(--sp-6); margin: 0; padding: var(--sp-6) var(--sp-16); border-radius: var(--r-16); background: var(--c-tw-chip); font-family: var(--font-inter); font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-18); color: var(--c-white); }
.tw-chip--figtree { font-family: inherit; }
.tw-chip svg { width: var(--tw-chip-icon); height: var(--tw-chip-icon); flex: none; }
.tw-persona__text { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-20); line-height: var(--lh-130-tw); color: var(--c-tw-chip-text); }
/* User-flow diagram 2235:167048: Figma rotates it 5.69deg and lets it run past the page; the WebP is the
rotated render clipped to the 1440 page. It fills a 1224 slot and overlaps the next section (text on top). */
.tw-flow { position: relative; width: min(var(--tw-flow-w), 100vw); aspect-ratio: var(--tw-flow-ar); }
.tw-flow img { position: absolute; z-index: -1; left: 0; top: 0; width: 100%; max-width: none; height: auto; }
:where(.cs-page--tw) .tw-flow img { border-radius: 0; }
.tw-wires { width: var(--tw-wires-w); max-width: calc(100% - 2 * var(--page-margin)); display: flex; justify-content: space-between; }
.tw-wires img { width: var(--tw-wire-w); height: auto; }
:where(.cs-page--tw) .tw-wires img { border-radius: var(--r-17); }
.tw-comp__row > [style*="--w"] { width: calc(var(--w) * 1px); max-width: 100%; } /* Figma text-box widths (wrap points) */
.ed-carousel__slides > .tw-card { align-items: stretch; } /* the slide is the card: Figma's left-aligned content */
.ed-carousel__slides > .tw-persona { flex-direction: row; }
/* ===== Team Workspace, second half ===== */
.tw-step--plain { padding-left: 0; } /* "4. Engineering Alignment": number typed in the text, not a Figma list (no hanging indent) */
.tw-step--plain::before { content: none; }
/* Handover boards (Figma 1436-wide frames): a stage in Figma px; items placed with --x/--y/--w/--h, text sized with --fs */
.tw-board { position: relative; width: calc(var(--tw-board) * 1px); max-width: 100%; aspect-ratio: var(--tw-board) / var(--h); container-type: inline-size; background: var(--c-bg); --u: calc(100cqw / var(--tw-board)); }
.tw-board--clip { overflow: hidden; }
.tw-b { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); margin: 0; }
.tw-b:is(img, svg, .tw-b--box) { height: calc(var(--h) * var(--u)); }
:where(.cs-page--tw) .tw-board img { border-radius: 0; } /* crops of the board: corners are in the image */
.tw-nm { font-family: var(--font-nm); font-size: calc(var(--fs) * var(--u)); color: var(--c-white); }
.tw-nm--b { font-weight: var(--fw-bold); }
.tw-lh-100 { line-height: var(--lh-tw-100); }
.tw-lh-120 { line-height: var(--lh-tw-120); }
.tw-lh-125 { line-height: var(--lh-tw-125); }
.tw-lh-140 { line-height: var(--lh-tw-140); }
.tw-lh-auto { line-height: var(--lh-auto); }
.tw-c { text-align: center; }
.tw-grey { color: var(--c-grey-8e8e8e); }
.tw-spaced { letter-spacing: var(--ls-tw-14); word-break: break-all; } /* Figma wraps the alphabet between letters */
.tw-lower { text-transform: lowercase; }
.tw-3-2 { color: var(--c-tw-3-2); }
.tw-rot { transform-origin: 0 0; transform: matrix(var(--a), var(--b), var(--c), var(--d), 0, 0); }
.tw-rule { background: var(--c-grey-8e8e8e); }
.tw-vdash { width: var(--bw-1); background: repeating-linear-gradient(180deg, var(--c-tw-board-line) 0 var(--sp-8), transparent var(--sp-8) var(--sp-16)); }
.tw-vdash--grid { background: repeating-linear-gradient(180deg, var(--c-tw-grid-line) 0 var(--sp-8), transparent var(--sp-8) var(--sp-16)); }
.tw-label { display: flex; align-items: center; gap: var(--sp-8); font-weight: var(--fw-bold); font-size: calc(var(--fs-20-n) * var(--u)); line-height: var(--lh-auto); color: var(--c-white); white-space: nowrap; }
.tw-label--col { flex-direction: column; }
.tw-label svg { width: calc(var(--icon-24-n) * var(--u)); height: calc(var(--icon-24-n) * var(--u)); flex: none; }
.tw-ccard { box-sizing: border-box; height: calc(var(--h) * var(--u)); padding: calc(var(--fs-16-n) * var(--u)) calc(var(--icon-24-n) * var(--u)); display: flex; flex-direction: column; gap: calc(var(--n-8) * var(--u)); border: var(--bw-1) solid var(--c-tw-comp-stroke); border-radius: var(--r-16); background: var(--c-tw-comp-card); }
.tw-ccard__title { margin: 0; font-family: var(--font-inter); font-weight: var(--fw-regular); font-size: calc(var(--fs-18-n) * var(--u)); line-height: calc(var(--n-28) * var(--u)); color: var(--c-white); white-space: nowrap; }
.tw-ccard img { display: block; width: calc(var(--iw) * var(--u)); height: auto; max-width: none; }
/* Carousel 3 (2235:155512): the Figma prototype's Smart Animate rebuilt as layers. Six phones, one image each,
placed per variant with transform (translate + separate x/y scale) and opacity only; JS sets --tx/--ty/--sx/--sy/--o. */
.tw-c3 { width: var(--tw-c3-w); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); scroll-margin-top: var(--cs-nav-h); }
.tw-c3:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
.tw-c3__stage { position: relative; width: 100%; aspect-ratio: var(--tw-c3-ar); overflow: hidden; container-type: inline-size; background: var(--c-bg); --u: calc(100cqw / var(--tw-c3)); }
.tw-c3__phone { position: absolute; left: 0; top: 0; width: calc(var(--rw) * var(--u)); height: calc(var(--rh) * var(--u)); padding: 0; border: 0; background: none; cursor: default;
transform-origin: 0 0; transform: translate(calc(var(--tx, 0) * var(--u)), calc(var(--ty, 0) * var(--u))) scale(var(--sx, 1), var(--sy, 1)); opacity: var(--o, 0);
transition: transform var(--dur-c3) var(--ease-c3), opacity var(--dur-c3) var(--ease-c3); }
.tw-c3__phone.is-link { cursor: pointer; }
.tw-c3__phone:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: calc(var(--bw-2) * -2); } /* final fixes 5: a visible ring, inset so the stage never clips it */
.tw-c3__phone img { display: block; width: 100%; height: 100%; }
:where(.cs-page--tw) .tw-c3 img { border-radius: 0; }
.tw-c3__arrow, .tw-c3__hint, .tw-c3__dots { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); transition: opacity var(--dur-c3) var(--ease-c3); }
.tw-c3__arrow { width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); pointer-events: none; }
.tw-c3__hint { margin: 0; font-weight: var(--fw-semibold); font-size: calc(var(--fs-16-n) * var(--u)); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); white-space: nowrap; pointer-events: none; }
.tw-c3__dots { display: flex; gap: calc(var(--tw-dot-gap-n) * var(--u)); }
.tw-c3__dot { position: relative; width: calc(var(--tw-dot-n) * var(--u)); height: calc(var(--tw-dot-n) * var(--u)); border-radius: var(--r-32); background: var(--c-white); }
.tw-c3__dot i { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity var(--dur-c3) var(--ease-c3); }
.tw-c3__dot-past { background: var(--c-tw-dot-past); }
.tw-c3__dot-now { background: var(--c-tw-dot-now); }
.tw-c3__dot.is-past .tw-c3__dot-past, .tw-c3__dot.is-now .tw-c3__dot-now { opacity: 1; }
.tw-c3.is-first .tw-c3__dots, .tw-c3:not(.is-first) .tw-c3__hint, .tw-c3:not(.is-first) .tw-c3__arrow { opacity: 0; }
.tw-c3.no-anim :is(.tw-c3__phone, .tw-c3__arrow, .tw-c3__hint, .tw-c3__dots, .tw-c3__dot i) { transition: none; } /* first paint: no move-in */
@media (prefers-reduced-motion: reduce) { .tw-c3__phone, .tw-c3__arrow, .tw-c3__hint, .tw-c3__dots, .tw-c3__dot i { transition: none; } }
.tw-collage { width: calc(var(--tw-board) * 1px); max-width: 100%; height: auto; aspect-ratio: var(--tw-collage-ar); }
:where(.cs-page--tw) .tw-collage { border-radius: var(--r-tw-collage); }
/* Outcome & Impact (2235:168753) */
.tw-h2-outcome { line-height: var(--lh-32); }
.tw-h2-outcome span { color: var(--c-tw-outcome); }
.tw-text--32 { line-height: var(--lh-32); }
.tw-text--32 p + p { margin-top: var(--sp-11); }
.tw-impact { width: var(--cs-head-w); max-width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: var(--sp-24); }
.tw-impact__icons { flex: none; width: var(--ed-emoji); padding-bottom: var(--sp-24); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.tw-impact__icons picture, .tw-impact__icons .ed-impact__emoji { display: block; width: var(--ed-emoji); height: var(--ed-emoji); }
.tw-impact__pad { padding: var(--tw-impact-pad) 0; }
.tw-impact__icons .ed-impact__line:nth-of-type(1) { height: var(--tw-line-1); }
.tw-impact__icons .ed-impact__line:nth-of-type(2) { height: var(--tw-line-2); }
.tw-impact__icons .ed-impact__line:nth-of-type(3) { height: var(--tw-line-3); }
.tw-impact .ed-impact__list { gap: var(--tw-impact-gap); padding: var(--tw-impact-pad) 0; }
/* Key Takeaways (2235:168784) and Future Prospects (2235:168810) */
.tw-learn { width: var(--cs-content-w); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-80); }
.tw-learn .ed-tk { flex-basis: var(--tw-tk-w); }
.tw-learn .ed-tk-row { width: 100%; }
.tw-h2-future { line-height: var(--lh-32); color: var(--c-tw-outcome); }
.tw-handover { width: calc(var(--tw-board) * 1px); max-width: 100%; display: flex; flex-direction: column; } /* Handover Part 1/2: boards stacked, gap 0 */
#dev-handover { scroll-margin-top: var(--cs-nav-h); } /* side-nav targets that are not headings: land below the top bar like the others */
/* Full-flow viewer for the user-flow diagram (opens from .tw-flow) */
.tw-flow[data-flow-open] { cursor: zoom-in; }
.tw-flow[data-flow-open]:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
.tw-viewer { position: fixed; inset: 0; z-index: var(--z-viewer); background: var(--c-bg); opacity: 0; transition: opacity var(--dur-viewer) var(--ease-out); }
.tw-viewer.is-open { opacity: 1; }
.tw-viewer[hidden] { display: none; }
.tw-viewer__canvas { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.tw-viewer__canvas.is-dragging { cursor: grabbing; }
.tw-viewer__canvas:focus { outline: none; } /* focused only by pointer (tabindex -1), never by Tab */
.tw-viewer__img, .tw-viewer__node { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--s, 1)); user-select: none; -webkit-user-drag: none; }
:where(.cs-page--tw, .tw-viewer) .tw-viewer__img { border-radius: 0; }
.tw-viewer.is-anim :is(.tw-viewer__img, .tw-viewer__node) { transition: transform var(--dur-viewer) var(--ease-out); }
.tw-viewer__bar { position: absolute; left: 0; right: 0; top: 0; height: var(--tw-viewer-bar-h); padding: 0 var(--page-margin); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.tw-viewer__group { display: flex; align-items: center; gap: var(--sp-12); pointer-events: auto; }
.tw-viewer__btn { padding: var(--sp-8); }
.tw-viewer__btn[hidden] { display: none; } /* single board: no prev / next */
.tw-viewer__btn:disabled { color: var(--c-arrow-off); cursor: default; }
.tw-viewer__title { margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-16); line-height: var(--lh-150-8); color: var(--c-grey-e6e9f3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tw-viewer, .tw-viewer.is-anim .tw-viewer__img { transition: none; } }
/* =====================================================================
RESPONSIVE — shared (all case-study pages). >= 1190 unchanged.
===================================================================== */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* 0 unless viewport-fit=cover (Verdance) */
@media (max-width: 1189.98px) {
.cs-sidenav { display: none; } /* D3: hidden on tablet + phone */
.cs-nextproj { max-width: calc(100% - 2 * var(--page-margin)); }
.cs-nextproj__mock { max-width: 100%; height: auto; }
/* 44 px hit areas, visuals unchanged: carousel arrows (40) and "Visit site" (32 tall) */
.ed-arrow, .cs-pill__visit { position: relative; }
.ed-arrow::before { content: ""; position: absolute; inset: calc(var(--hit-pad) * -1); }
.cs-pill__visit::before { content: ""; position: absolute; inset: calc(var(--hit-pad-visit) * -1) 0; }
}
/* "Visit site" pill: same show/hide rules; kept clear of the home indicator */
.cs-pill { bottom: max(var(--cs-pill-bottom), env(safe-area-inset-bottom)); }
/* Case-study top bar on phone: pills 44 px tall, labels 14 */
@media (max-width: 767.98px) {
.cs-nav { padding-top: 0; padding-bottom: 0; }
.cs-nav .btn { height: var(--tap); padding: 0 var(--sp-16); font-size: var(--fs-r-min); }
}
/* Carousels: horizontal swipe on touch; vertical page scroll and pinch-zoom stay with the browser */
.ed-carousel__slides, .tw-c3__stage { touch-action: pan-y pinch-zoom; }
/* Full-screen viewer, generic: any element with [data-viewer] (live boards) opens it on tablet + phone */
@media (max-width: 1189.98px) {
[data-viewer] { cursor: zoom-in; }
[data-viewer]:focus-visible { outline: var(--bw-2) solid var(--c-feature); outline-offset: var(--sp-8); }
}
.tw-viewer__node > .tw-viewer__scope { display: block; width: 100%; max-width: none; margin: 0; padding: 0; gap: 0; background: none; } /* board copy keeps its page classes, not the page layout */
.tw-viewer__node { pointer-events: none; }
/* Touch screens (hover: none): default state */
@media (hover: none) {
.ed-arrow:not(:disabled):hover:not(:focus-visible) path { transform: none; }
.cs-badge:hover:not(:focus-visible) { background-color: transparent; }
.cs-badge:hover:not(:focus-visible)::after { opacity: 0; }
}
/* =====================================================================
VERDANCE — tablet + phone (build 4). >= 1190 unchanged.
Column = window - 2 x page margin; every block is its content + spacing.
===================================================================== */
@media (max-width: 1189.98px) {
.cs-page--verdance { padding-top: var(--cs-top-tablet); gap: var(--cs-gap-tablet); --col: calc(100% - 2 * var(--page-margin)); }
.cs-page--verdance .cs-label { position: static; width: auto; margin-bottom: calc(var(--sp-16) - var(--cs-gap-tablet)); font-size: var(--fs-r-body-24); }
.cs-page--verdance .cs-title { width: min(var(--cs-title-w), var(--col)); font-size: var(--fs-r-hero); line-height: var(--lh-r-title); }
.cs-page--verdance .cs-meta { width: var(--col); }
.cs-page--verdance .cs-meta__row { flex-wrap: wrap; gap: var(--sp-24) var(--sp-32); }
.cs-page--verdance .cs-meta__value { font-size: var(--fs-r-body-24); }
.cs-page--verdance :is(.cs-content-wrap, .cs-content, .cs-takeaways, .cs-next) { width: 100%; }
.cs-page--verdance .cs-section { width: min(var(--cs-text-w), var(--col)); container-type: inline-size; }
.cs-page--verdance .cs-section--wide { width: 100%; }
.cs-page--verdance :is(.cs-lead, .cs-p) { font-size: var(--fs-r-body-24); line-height: var(--lh-r-body); }
.cs-page--verdance :is(.cs-lead-150, .cs-p-150) { font-size: var(--fs-r-body-24); }
.cs-page--verdance .cs-h2 { font-size: var(--fs-r-h2); line-height: var(--lh-r-h2); }
.cs-page--verdance .cs-caption { font-size: var(--fs-r-min); }
.cs-page--verdance :is(.cs-moodboard, .cs-board, .cs-fontboard, .cs-chart, .cs-gate-img, .cs-video--wide) { width: 100%; max-width: 100%; height: auto; }
/* Boards that scale as one piece (tap opens the viewer) */
.cs-page--verdance .cs-fit { zoom: min(1, tan(atan2(100cqw, var(--fit-w)))); }
.cs-page--verdance .cs-why { --fit-w: var(--why-w); width: var(--why-w); align-items: flex-start; }
.cs-page--verdance .cs-why > * { translate: var(--why-dx) 0; }
.cs-page--verdance .cs-why > figcaption { width: var(--cs-text-w); }
.cs-page--verdance .cs-bug { --fit-w: var(--bug-w); }
.cs-page--verdance :is(.cs-fit, .cs-phone__frame) img { max-width: none; } /* sizes stay Figma px inside a scaled board */
.cs-page--verdance .cs-why__img { height: var(--cs-why-img-h); }
/* Finished town + desktop tour */
.cs-page--verdance .cs-town { width: 100%; gap: var(--sp-40); }
.cs-page--verdance .cs-town__title { padding: 0 var(--page-margin); font-size: var(--fs-r-display); line-height: var(--lh-pp-r); white-space: normal; }
.cs-page--verdance .cs-town .cs-figure { width: 100%; }
.cs-page--verdance .cs-crop--tour { width: 100%; height: auto; aspect-ratio: var(--tour-ar); }
.cs-page--verdance .cs-crop--tour video {
left: calc(100% * var(--n-tour-vx) / var(--n-tour-w));
top: calc(100% * var(--n-tour-vy) / var(--n-tour-h));
width: calc(100% * var(--n-tour-vw) / var(--n-tour-w));
height: calc(100% * var(--n-tour-vh) / var(--n-tour-h));
max-width: none;
}
/* Phone videos: side by side, scaled to fit */
.cs-page--verdance .cs-phones { width: var(--col); justify-content: center; gap: var(--phones-gap); container-type: inline-size; }
.cs-page--verdance .cs-phone { width: auto; }
.cs-page--verdance .cs-phone__frame { zoom: min(1, tan(atan2(calc((100cqw - var(--phones-gap)) / 2), var(--phone-col-w)))); }
.cs-page--verdance .cs-gates { width: 100%; }
.cs-page--verdance .cs-nextproj__mock { width: 100%; } /* inside the column like the other case studies (.cs-page img max-width 100vw outranked max-width 100%) */
/* Outcome */
.cs-page--verdance :is(.cs-wide, .cs-wide__charts) { width: 100%; }
.cs-page--verdance .cs-table { display: grid; grid-template-columns: var(--table-cols); height: auto; }
.cs-page--verdance :is(.cs-table__left, .cs-table__right, .cs-table__line) { display: none; }
.cs-page--verdance :is(.cs-table__head, .cs-table__list) { display: contents; }
.cs-page--verdance :is(.cs-table__h1, .cs-table__h2) { width: auto; padding: var(--table-cell-pad); font-size: var(--fs-r-body-24); }
.cs-page--verdance .cs-table__h1 { grid-area: 1 / 1; background: var(--c-card); box-shadow: inset 0 calc(var(--sp-3) * -1) 0 var(--c-table-grey-line); }
.cs-page--verdance .cs-table__h2 { grid-area: 1 / 2; background: var(--c-verdance-bg); box-shadow: inset 0 calc(var(--sp-3) * -1) 0 var(--c-verdance-fg); }
.cs-page--verdance .cs-table__list li { padding: var(--table-cell-pad); font-size: var(--fs-r-body-20); line-height: var(--lh-r-body); }
.cs-page--verdance .cs-table__list--old li { grid-column: 1; background: var(--c-card); }
.cs-page--verdance .cs-table__list--new li { grid-column: 2; background: var(--c-verdance-bg); }
.cs-page--verdance .cs-table__list li:nth-child(1) { grid-row: 2; }
.cs-page--verdance .cs-table__list li:nth-child(2) { grid-row: 3; }
.cs-page--verdance .cs-table__list li:nth-child(3) { grid-row: 4; }
.cs-page--verdance .cs-table__list li:nth-child(4) { grid-row: 5; }
.cs-page--verdance .cs-stats { width: 100%; flex-wrap: wrap; justify-content: center; }
.cs-page--verdance .cs-stat { width: calc(50% - var(--sp-12)); }
.cs-page--verdance .cs-scale { height: auto; padding: var(--sp-32) var(--sp-24); gap: var(--scale-gap-r); }
.cs-page--verdance .cs-scale__text, .cs-page--verdance .cs-scale__scale, .cs-page--verdance .cs-scale__bar { width: 100%; }
.cs-page--verdance .cs-scale__bar { height: auto; }
.cs-page--verdance .cs-scale__title { font-size: var(--fs-r-body-24); }
.cs-page--verdance .cs-scale__labels { display: grid; grid-template-columns: calc(100% * var(--n-scale-c1) / var(--n-scale)) calc(100% * var(--n-scale-c2) / var(--n-scale)) 1fr; }
.cs-page--verdance .cs-scale__col { width: auto; align-items: flex-start; }
.cs-page--verdance .cs-scale__range { white-space: normal; }
.cs-page--verdance .cs-scale__mark { left: calc(100% * var(--n-scale-mark) / var(--n-scale)); }
.cs-page--verdance .cs-scale__mark-text { left: calc(100% * var(--n-scale-mark) / var(--n-scale) + var(--scale-mark-text-dx)); right: 0; top: auto; bottom: calc(100% + var(--scale-mark-text-gap)); } /* keeps its Figma 31 px offset from the arrow; a wrapped line grows upward, away from the bar */
.cs-page--verdance .cs-scale__mark-text span { white-space: normal; }
/* Takeaways: one column */
.cs-page--verdance .cs-head { width: min(var(--cs-head-w), var(--col)); }
.cs-page--verdance .cs-tk-rows { width: var(--col); align-items: stretch; }
.cs-page--verdance .cs-tk-row { flex-direction: column; }
.cs-page--verdance .cs-tk, .cs-page--verdance .cs-tk--wide { width: auto; height: auto; }
.cs-page--verdance .cs-tk--wide { flex-direction: column; align-items: stretch; }
.cs-page--verdance .cs-tk__col { width: auto; }
.cs-page--verdance .cs-tk__thumb-row { width: 100%; gap: var(--sp-12); }
.cs-page--verdance .cs-tk__thumb { width: auto; flex: 1 1 0; min-width: 0; }
.cs-page--verdance .cs-tk__thumb img { width: 100%; max-width: var(--cs-tk-thumb-w); height: auto; }
/* What's next: the two cards stacked; label + line inside each card */
.cs-page--verdance .cs-bi { width: var(--col); height: auto; display: grid; grid-template-columns: minmax(0, var(--cs-next-card-w)); justify-content: center; gap: var(--sp-16); }
.cs-page--verdance .cs-bi__card { width: auto; display: flex; align-items: center; justify-content: center; padding: var(--cs-bi-pad) var(--sp-16) var(--sp-48); }
.cs-page--verdance .cs-bi__card--en { grid-area: 1 / 1; }
.cs-page--verdance .cs-bi__card--ar { grid-area: 2 / 1; }
.cs-page--verdance :is(.cs-bi__en, .cs-bi__ar) { position: static; width: auto; font-size: min(var(--fs-48), calc((100vw - 2 * var(--page-margin) - 2 * var(--sp-16)) * var(--n-48) / var(--n-bi-en-w))); }
.cs-page--verdance .cs-bi__en { line-height: var(--lh-pp-r); }
.cs-page--verdance .cs-bi__ar { line-height: var(--lh-arabic-r); }
.cs-page--verdance .cs-bi__head { display: contents; }
.cs-page--verdance .cs-bi__head span { position: relative; z-index: 1; left: 0; width: auto; align-self: start; margin: var(--cs-table-head-y) var(--cs-table-head-x) 0; padding-left: calc(var(--sp-16) + var(--sp-2)); text-align: left; box-shadow: inset 0 calc(var(--sp-3) * -1) 0 var(--c-verdance-fg); }
.cs-page--verdance .cs-bi__head span:first-child { grid-area: 1 / 1; }
.cs-page--verdance .cs-bi__head span:last-child { grid-area: 2 / 1; }
.cs-page--verdance .cs-bi__line { display: none; }
/* Closing frame: restacked (title, tagline, badge, then the drawing) */
.cs-page--verdance .cs-footer { width: 100%; height: auto; padding-top: var(--cs-footer-pad); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-page--verdance :is(.cs-footer__title, .cs-footer__tag) { position: static; width: auto; padding: 0 var(--page-margin); white-space: normal; }
.cs-page--verdance .cs-footer__title { font-size: min(var(--fs-140), calc((100vw - 2 * var(--page-margin)) * var(--n-140) / var(--n-footer-title-w))); line-height: var(--lh-pp-r); }
.cs-page--verdance .cs-footer__tag { font-size: var(--fs-r-body-24); line-height: var(--lh-pp-r); }
.cs-page--verdance .cs-badge { position: relative; left: auto; top: auto; flex: none; z-index: 1; }
.cs-page--verdance .cs-footer__draw { position: static; order: 4; width: 100%; height: auto; }
}
.tw-viewer__scope .cs-fit { zoom: 1; } /* the viewer shows boards at full size */
@media (max-width: 767.98px) {
.cs-page--verdance { padding-top: var(--cs-top-phone); gap: var(--cs-gap-phone); }
.cs-page--verdance .cs-label { margin-bottom: calc(var(--sp-16) - var(--cs-gap-phone)); }
.cs-page--verdance .cs-meta { padding: var(--cs-card-pad-phone); }
.cs-page--verdance .cs-meta__row { flex-direction: column; }
.cs-page--verdance .cs-gates__row { flex-direction: column; }
.cs-page--verdance .cs-gates__row img { flex: none; width: 100%; }
.cs-page--verdance .cs-phones { flex-direction: column; align-items: center; }
.cs-page--verdance .cs-phone__frame { zoom: min(1, tan(atan2(calc(100vw * var(--phone-share)), var(--phone-col-w)))); }
/* comparison: each row a stacked pair, typical above Verdance */
.cs-page--verdance .cs-table { grid-template-columns: minmax(0, 1fr); }
.cs-page--verdance .cs-table__h1 { grid-area: 1 / 1; }
.cs-page--verdance .cs-table__h2 { grid-area: 2 / 1; }
.cs-page--verdance .cs-table__list li { grid-column: 1; }
.cs-page--verdance .cs-table__list--old li:nth-child(1) { grid-row: 3; } .cs-page--verdance .cs-table__list--new li:nth-child(1) { grid-row: 4; }
.cs-page--verdance .cs-table__list--old li:nth-child(2) { grid-row: 5; } .cs-page--verdance .cs-table__list--new li:nth-child(2) { grid-row: 6; }
.cs-page--verdance .cs-table__list--old li:nth-child(3) { grid-row: 7; } .cs-page--verdance .cs-table__list--new li:nth-child(3) { grid-row: 8; }
.cs-page--verdance .cs-table__list--old li:nth-child(4) { grid-row: 9; } .cs-page--verdance .cs-table__list--new li:nth-child(4) { grid-row: 10; }
.cs-page--verdance .cs-stat { width: 100%; }
.cs-page--verdance .cs-tk { padding: var(--cs-card-pad-phone); }
/* scale labels: "Needs improvement" gets the room up to "Poor", which sits at the bar's end (red segment) */
.cs-page--verdance .cs-scale__labels { grid-template-columns: calc(100% * var(--n-scale-c1) / var(--n-scale)) 1fr auto; column-gap: var(--sp-8); }
}
/* ===== Viewer (shared) below 1190: bar + content ===== */
@media (max-width: 1189.98px) {
/* bar: − + × stay at the right; the title takes what is left, 2 lines max, then … */
.tw-viewer__bar { padding: 0 var(--viewer-bar-pad); gap: var(--sp-12); }
.tw-viewer__group:first-child { flex: 1 1 auto; min-width: 0; }
.tw-viewer__group:last-child { flex: none; }
.tw-viewer__title {
flex: 1 1 auto;
min-width: 0;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
}
/* content copies keep their Figma px size (the page's "never wider than the window" image rule doesn't apply in the viewer),
so the measured size is the drawn size and the fit / clamp centring is exact */
.tw-viewer__scope img { max-width: none; }
.tw-viewer__scope > * { width: 100% !important; max-width: none !important; margin: 0 !important; } /* the copy always fills its Figma width (page layout rules don't apply in the viewer) */
/* ===== Verdance comparison table, phone: one card per row ===== */
@media (max-width: 1189.98px) {
.cs-page--verdance .cs-table__list--old li { text-decoration: line-through; } /* Figma strike-through (the list itself is display: contents here) */
}
@media (max-width: 767.98px) {
.cs-page--verdance :is(.cs-table__h1, .cs-table__h2) { display: none; }
.cs-page--verdance .cs-table__list--old li:nth-child(1) { grid-row: 1; } .cs-page--verdance .cs-table__list--new li:nth-child(1) { grid-row: 2; }
.cs-page--verdance .cs-table__list--old li:nth-child(2) { grid-row: 3; } .cs-page--verdance .cs-table__list--new li:nth-child(2) { grid-row: 4; }
.cs-page--verdance .cs-table__list--old li:nth-child(3) { grid-row: 5; } .cs-page--verdance .cs-table__list--new li:nth-child(3) { grid-row: 6; }
.cs-page--verdance .cs-table__list--old li:nth-child(4) { grid-row: 7; } .cs-page--verdance .cs-table__list--new li:nth-child(4) { grid-row: 8; }
.cs-page--verdance .cs-table__list--new li:not(:last-child) { margin-bottom: var(--table-card-gap); }
.cs-page--verdance .cs-table__list li::before {
display: inline-block; /* atomic: the row's strike-through doesn't run through the label */
width: 100%;
margin-bottom: var(--sp-4);
font-weight: var(--fw-semibold);
font-size: var(--fs-12);
line-height: var(--lh-auto);
letter-spacing: var(--ls-card-label);
text-transform: uppercase;
}
.cs-page--verdance .cs-table__list--old li::before { content: "Typical site"; color: var(--c-strike); }
.cs-page--verdance .cs-table__list--new li::before { content: "Verdance"; color: var(--c-verdance-fg); }
}
/* =====================================================================
EDITOR EXPERIENCE (build 5) + MATCH THE ANSWER (build 6, same components) — tablet + phone. >= 1190 unchanged.
===================================================================== */
@media (max-width: 1189.98px) {
:is(.cs-page--editor, .cs-page--mta) { padding-top: var(--cs-top-tablet); gap: var(--cs-gap-tablet); --col: calc(100% - 2 * var(--page-margin)); }
:is(.cs-page--editor, .cs-page--mta) .cs-title--editor { width: min(var(--cs-title-w), var(--col)); font-size: var(--fs-r-hero); }
:is(.cs-page--editor, .cs-page--mta) .ed-hero { width: var(--col); max-width: var(--col); height: auto; }
:is(.cs-page--editor, .cs-page--mta) .cs-meta { width: var(--col); }
:is(.cs-page--editor, .cs-page--mta) .cs-meta__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24) var(--sp-32); }
:is(.cs-page--editor, .cs-page--mta) .cs-meta__value { font-size: var(--fs-r-body-24); }
:is(.cs-page--editor, .cs-page--mta) .ed-col { width: min(var(--cs-head-w), var(--col)); }
:is(.cs-page--editor, .cs-page--mta) .ed-wide { width: var(--col); max-width: var(--col); }
:is(.cs-page--editor, .cs-page--mta) :is(.ed-feature, .ed-paras, .ed-carousel__title) { width: 100%; }
:is(.cs-page--editor, .cs-page--mta) :is(.ed-text, .ed-goal, .ed-feature__title, .ed-journey__title, .ed-journey__head, .ed-journey__list, .ed-impact__title, .ed-impact__text, .ed-card__title, .ed-tk__title) { font-size: var(--fs-r-body-24); }
:is(.cs-page--editor, .cs-page--mta) :is(.ed-card__text, .ed-tk__text, .ed-carousel__title) { font-size: var(--fs-r-body-20); }
:is(.cs-page--editor, .cs-page--mta) .cs-h2 { font-size: var(--fs-r-h2); }
/* Goals: 2 per row, emoji keeps its size */
:is(.cs-page--editor, .cs-page--mta) .ed-goals { width: 100%; }
:is(.cs-page--editor, .cs-page--mta) .ed-goals__list { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
:is(.cs-page--editor, .cs-page--mta) .ed-goal { width: auto; }
/* Strategy boards: 2 per row */
:is(.cs-page--editor, .cs-page--mta) .ed-cards { width: var(--col); }
:is(.cs-page--editor, .cs-page--mta) .ed-card { width: calc(50% - var(--sp-12)); height: auto; }
:is(.cs-page--editor, .cs-page--mta) .ed-card__img { width: 100%; height: auto; }
/* Carousels */
:is(.cs-page--editor, .cs-page--mta) .ed-carousel { width: 100%; }
:is(.cs-page--editor, .cs-page--mta) .ed-slide > img { width: 100%; height: auto; }
:is(.cs-page--editor, .cs-page--mta) .ed-slide figcaption { font-size: var(--fs-r-min); }
/* Journey */
:is(.cs-page--editor, .cs-page--mta) .ed-journey__cols { gap: var(--sp-24); }
/* Impact: timeline kept (emoji level with each result), rebuilt as a grid so it follows the text height */
:is(.cs-page--editor, .cs-page--mta) .ed-impact { width: min(var(--cs-head-w), var(--col)); max-width: none; display: grid; grid-template-columns: var(--ed-emoji) minmax(0, 1fr); gap: 0 var(--sp-24); align-items: start; }
:is(.cs-page--editor, .cs-page--mta) :is(.ed-impact__icons, .ed-impact__list) { display: contents; }
:is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture { grid-column: 1; margin-top: var(--ed-impact-pad-top); }
:is(.cs-page--editor, .cs-page--mta) .ed-impact__line { grid-column: 1; justify-self: center; align-self: stretch; height: auto; margin: var(--ed-impact-line-top) 0 var(--ed-impact-line-end); }
:is(.cs-page--editor, .cs-page--mta) .ed-impact__item { grid-column: 2; }
:is(.cs-page--editor, .cs-page--mta) .ed-impact__item:not(:last-child) { padding-bottom: var(--ed-impact-row-gap); }
:is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture:nth-of-type(1), :is(.cs-page--editor, .cs-page--mta) .ed-impact__line:nth-of-type(1), :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:nth-child(1) { grid-row: 1; }
:is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture:nth-of-type(2), :is(.cs-page--editor, .cs-page--mta) .ed-impact__line:nth-of-type(2), :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:nth-child(2) { grid-row: 2; }
:is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture:nth-of-type(3), :is(.cs-page--editor, .cs-page--mta) .ed-impact__line:nth-of-type(3), :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:nth-child(3) { grid-row: 3; }
:is(.cs-page--editor, .cs-page--mta) .ed-impact__icons picture:nth-of-type(4), :is(.cs-page--editor, .cs-page--mta) .ed-impact__item:nth-child(4) { grid-row: 4; }
/* Hackathon photo */
:is(.cs-page--editor, .cs-page--mta) .ed-photo { width: min(var(--ed-photo-w), var(--col)); height: auto; aspect-ratio: var(--ed-photo-ar); }
:is(.cs-page--editor, .cs-page--mta) .ed-photo__me { left: var(--ed-photo-me-xp); top: var(--ed-photo-me-yp); font-size: var(--fs-r-h2); }
/* Takeaways: 2 per row */
:is(.cs-page--editor, .cs-page--mta) .ed-tk-row { width: var(--col); }
:is(.cs-page--editor, .cs-page--mta) .ed-tk { flex: 1 1 0; }
/* Next project: mockup full width of the column */
:is(.cs-page--editor, .cs-page--mta) .cs-nextproj__mock { width: 100%; }
}
@media (max-width: 767.98px) {
:is(.cs-page--editor, .cs-page--mta) { padding-top: var(--cs-top-phone); gap: var(--cs-gap-phone); }
:is(.cs-page--editor, .cs-page--mta) .cs-meta { padding: var(--cs-card-pad-phone); }
:is(.cs-page--editor, .cs-page--mta) .cs-meta__row { grid-template-columns: 1fr; }
:is(.cs-page--editor, .cs-page--mta) .ed-goals__list { grid-template-columns: 1fr; }
:is(.cs-page--editor, .cs-page--mta) .ed-goal { padding: var(--sp-12) var(--sp-16); }
:is(.cs-page--editor, .cs-page--mta) .ed-cards__row { flex-direction: column; }
:is(.cs-page--editor, .cs-page--mta) .ed-card { width: 100%; }
:is(.cs-page--editor, .cs-page--mta) .ed-journey__cols { flex-direction: column; }
:is(.cs-page--editor, .cs-page--mta) .ed-tk-row { flex-direction: column; gap: var(--sp-24); }
:is(.cs-page--editor, .cs-page--mta) .ed-tk { flex: none; padding: var(--cs-card-pad-phone); }
}
/* =====================================================================
MATCH THE ANSWER — page-specific, tablet + phone (build 6)
===================================================================== */
@media (max-width: 1189.98px) {
.cs-page--mta :is(.mta-view__cap, .mta-carousel__sub, .mta-ut__title) { font-size: var(--fs-r-body-20); }
.cs-page--mta .mta-h3 { font-size: var(--fs-r-body-24); }
.cs-page--mta :is(.mta-view, .mta-results, .mta-learn) { width: var(--col); max-width: var(--col); }
/* Personas */
.cs-page--mta .mta-personas { width: 100%; }
.cs-page--mta .mta-persona { flex: 1 1 0; min-width: 0; max-width: var(--mta-persona-w); }
/* Pain-point notes: 2 per row */
.cs-page--mta .mta-pain { width: 100%; }
.cs-page--mta .mta-pain__label { font-size: var(--fs-r-body-24); }
.cs-page--mta .mta-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.cs-page--mta .mta-note { height: auto; } /* content height; cards in a tablet row stay equal (grid stretch) */
/* Image grids: 2 per row */
.cs-page--mta :is(.mta-comps, .mta-wires, .mta-ut) { width: 100%; }
.cs-page--mta .mta-wires { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.cs-page--mta .mta-wires__row { display: contents; }
.cs-page--mta .mta-wires img { width: 100%; }
.cs-page--mta .mta-ut__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.cs-page--mta .mta-ut__row img { width: 100%; }
/* Results: survey + word cloud */
.cs-page--mta .mta-results__cards { width: 100%; }
.cs-page--mta :is(.mta-carousels, .mta-carousel__head) { width: 100%; }
.cs-page--mta .ed-journey.mta-cloud {
height: auto;
container-type: inline-size;
--cs: calc((100cqw + 2 * var(--sp-24)) / var(--n-cloud-w)); /* one Figma px, scaled to the card */
}
.cs-page--mta .mta-cloud__text { font-size: var(--fs-r-body-24); margin-bottom: calc((var(--n-cloud-h) - var(--n-cloud-top)) * var(--cs) - var(--sp-24)); } /* bottom padding + this = the words area */
.cs-page--mta .mta-cloud__w { /* words keep their Figma layout, scaled, anchored to the card's bottom so a taller intro never meets them */
left: calc(var(--x) * var(--cs));
top: auto;
bottom: calc((var(--n-cloud-h) - var(--y) - var(--fs) * var(--n-cloud-lh)) * var(--cs));
font-size: calc(var(--fs) * var(--cs));
}
.cs-page--mta .mta-impact { width: 100%; }
.cs-page--mta .ed-impact__icons picture { margin-top: var(--mta-impact-pad-top); }
.cs-page--mta .ed-impact__line { margin: var(--mta-impact-line-top) 0 var(--mta-impact-line-end); }
/* Next project: mockup full width (its baked-in stroke stays outside, as Figma) */
.cs-page--mta .mta-next__mock { width: calc(100% + 2 * var(--mta-next-stroke)); max-width: none; }
}
@media (max-width: 767.98px) {
.cs-page--mta .mta-personas { flex-direction: column; align-items: stretch; }
.cs-page--mta .mta-persona { flex: none; max-width: none; }
.cs-page--mta .mta-persona__list { grid-template-columns: 1fr; }
.cs-page--mta .mta-notes { grid-template-columns: 1fr; }
.cs-page--mta .mta-comps__row { flex-direction: column; }
.cs-page--mta .mta-comps img { flex: none; width: 100%; }
.cs-page--mta :is(.mta-wires, .mta-ut__row) { grid-template-columns: 1fr; }
.cs-page--mta .mta-pc { flex-direction: column; gap: var(--sp-32); }
.cs-page--mta .mta-pc__col { flex: none; }
}
/* Sideways-scrolling tables (shared, phone): scroll inside their card, never the page; an edge fades while there is more */
@media (max-width: 767.98px) {
[data-hscroll] {
max-width: 100%;
align-self: stretch;
overflow-x: auto;
overscroll-behavior-x: contain;
--fade-l: 0px; --fade-r: 0px;
-webkit-mask-image: linear-gradient(to right, transparent, var(--c-black) var(--fade-l), var(--c-black) calc(100% - var(--fade-r)), transparent);
mask-image: linear-gradient(to right, transparent, var(--c-black) var(--fade-l), var(--c-black) calc(100% - var(--fade-r)), transparent);
}
[data-hscroll].has-more-right { --fade-r: var(--hscroll-fade); }
}
/* =====================================================================
HEADING + CARD SPACING (owner rule, all case studies, all widths)
===================================================================== */
/* Main centred section heading -> next element: 24 */
.ed-col--32 > .cs-h2 + * { margin-top: calc(var(--gap-heading) - var(--sp-32)); }
.cs-page .cs-town { gap: var(--gap-heading); }
/* Other headings -> their paragraph: 0 (line height only) */
.cs-tk__head + .cs-tk__body, .ed-card__title + .ed-card__text, .ed-tk__head + .ed-tk__text, .mta-note__title + .mta-note__list { margin-top: calc(var(--gap-heading-text) - var(--sp-12)); }
.ed-impact__item, .ed-feature--gap24, .ed-feature--gap40, .mta-col-left, .mta-view__cap, .mta-carousel__head { gap: var(--gap-heading-text); }
.ed-h2-24 + .ed-text { margin-top: calc(var(--gap-heading-text) - var(--sp-24)); }
.tw-sub > .tw-step + * { margin-top: calc(var(--gap-heading-text) - var(--sp-16)); }
.tw-col > .tw-step + * { margin-top: calc(var(--gap-heading-text) - var(--sp-24)); }
/* Stacked cards, >= 1190: the vertical gap equals the list's own (Figma) row gap */
.cs-page--editor > .ed-tk-row + .ed-tk-row, .tw-learn .ed-tk-row + .ed-tk-row { margin-top: calc(var(--tk-row-gap) - var(--sp-80)); }
.mta-learn__rows { gap: var(--tk-row-gap); }
.ed-cards--40 { gap: var(--sp-24); }
/* Stacked cards, tablet 24 / phone 16 */
@media (max-width: 1189.98px) {
.cs-page :is(.cs-tk-rows, .cs-tk-row, .cs-stats, .ed-goals__list, .ed-cards, .ed-cards__row, .ed-tk-row, .mta-learn__rows, .mta-notes, .mta-personas) { gap: var(--card-gap); }
.cs-page--editor > .ed-tk-row + .ed-tk-row { margin-top: calc(var(--card-gap) - var(--cs-gap-tablet)); }
.tw-learn .ed-tk-row + .ed-tk-row { margin-top: calc(var(--card-gap) - var(--sp-80)); }
.cs-page :is(.ed-impact) .ed-impact__item:not(:last-child) { padding-bottom: var(--card-gap); }
}
@media (max-width: 767.98px) {
.cs-page--editor > .ed-tk-row + .ed-tk-row { margin-top: calc(var(--card-gap) - var(--cs-gap-phone)); }
}
/* Impact timelines at every width: grid, so each emoji stays level with its result whatever the text height
(the title -> text gap is now 0, which the fixed-length desktop lines could not follow) */
.cs-page .ed-impact { display: grid; grid-template-columns: var(--ed-emoji) minmax(0, 1fr); gap: 0 var(--sp-24); align-items: start; }
.cs-page .ed-impact :is(.ed-impact__icons, .ed-impact__list) { display: contents; }
.cs-page .ed-impact .ed-impact__icons picture { grid-column: 1; margin-top: var(--ed-impact-pad-top); }
.cs-page .ed-impact .ed-impact__line { grid-column: 1; justify-self: center; align-self: stretch; height: auto; margin: var(--ed-impact-line-top) 0 var(--ed-impact-line-end); }
.cs-page .ed-impact .ed-impact__item { grid-column: 2; }
.cs-page .ed-impact .ed-impact__item:not(:last-child) { padding-bottom: var(--ed-impact-item-gap); }
.cs-page .ed-impact :is(.ed-impact__icons picture:nth-of-type(1), .ed-impact__line:nth-of-type(1), .ed-impact__item:nth-child(1)) { grid-row: 1; }
.cs-page .ed-impact :is(.ed-impact__icons picture:nth-of-type(2), .ed-impact__line:nth-of-type(2), .ed-impact__item:nth-child(2)) { grid-row: 2; }
.cs-page .ed-impact :is(.ed-impact__icons picture:nth-of-type(3), .ed-impact__line:nth-of-type(3), .ed-impact__item:nth-child(3)) { grid-row: 3; }
.cs-page .ed-impact :is(.ed-impact__icons picture:nth-of-type(4), .ed-impact__item:nth-child(4)) { grid-row: 4; }
.cs-page--mta .ed-impact .ed-impact__icons picture { margin-top: var(--mta-impact-pad-top); }
.cs-page--mta .ed-impact .ed-impact__line { margin: var(--mta-impact-line-top) 0 var(--mta-impact-line-end); }
/* Team Workspace: same idea, its own offsets (emoji level with the title; row 2's emoji sits in a 4 px pad box) */
.cs-page .tw-impact { display: grid; grid-template-columns: var(--ed-emoji) minmax(0, 1fr); gap: 0 var(--sp-24); align-items: start; }
.cs-page .tw-impact :is(.tw-impact__icons, .ed-impact__list) { display: contents; }
.cs-page .tw-impact .tw-impact__icons > :is(picture, .tw-impact__pad) { grid-column: 1; }
.cs-page .tw-impact .ed-impact__line { grid-column: 1; justify-self: center; align-self: stretch; height: auto; margin: var(--tw-impact-line-top) 0 var(--sp-24); }
.cs-page .tw-impact .ed-impact__item { grid-column: 2; padding-top: var(--tw-impact-pad); }
.cs-page .tw-impact .ed-impact__item:not(:last-child) { padding-bottom: var(--tw-impact-gap); }
.cs-page .tw-impact .tw-impact__icons > :nth-child(1), .cs-page .tw-impact .tw-impact__icons > :nth-child(2), .cs-page .tw-impact .ed-impact__item:nth-child(1) { grid-row: 1; }
.cs-page .tw-impact .tw-impact__icons > :nth-child(3), .cs-page .tw-impact .tw-impact__icons > :nth-child(4), .cs-page .tw-impact .ed-impact__item:nth-child(2) { grid-row: 2; }
.cs-page .tw-impact .tw-impact__icons > :nth-child(5), .cs-page .tw-impact .tw-impact__icons > :nth-child(6), .cs-page .tw-impact .ed-impact__item:nth-child(3) { grid-row: 3; }
.cs-page .tw-impact .tw-impact__icons > :nth-child(7), .cs-page .tw-impact .ed-impact__item:nth-child(4) { grid-row: 4; }
.cs-page .tw-impact .tw-impact__icons > :nth-child(2) { margin-bottom: var(--tw-impact-line-end-pad); } /* next emoji is 4 px into its row */
.cs-page .tw-impact .tw-impact__icons > :nth-child(4) { margin-top: var(--tw-impact-line-top-pad); } /* this row's emoji box is 48 tall */
@media (max-width: 1189.98px) {
.cs-page :is(.ed-impact, .tw-impact) .ed-impact__item:not(:last-child) { padding-bottom: var(--card-gap); }
}
/* =====================================================================
TEAM WORKSPACE (build 7) + item 0 of the spacing rule
===================================================================== */
/* Spacing, all widths: card title -> its table 24 (was 33 / 40) */
.tw-matrix, .tw-comp { gap: var(--gap-heading); }
/* The matrix column highlight belongs to the table (follows it when the gap changes or the table scrolls) */
.tw-matrix::before { content: none; }
.tw-matrix__table { z-index: 0; }
.tw-matrix__table::before { content: ""; position: absolute; z-index: -1; left: var(--tw-col-hl-x); top: calc(var(--tw-hl-above) * -1); width: var(--tw-col-hl-w); height: var(--tw-col-hl-h); border-radius: var(--r-16); background: var(--c-tw-col); }
@media (max-width: 1189.98px) {
.cs-page--tw { padding-top: var(--cs-top-tablet); gap: var(--cs-gap-tablet); --col: calc(100% - 2 * var(--page-margin)); }
/* Hero title: Figma breaks only at >= 1190; balanced wrapping below */
.cs-page--tw .tw-title { width: min(var(--cs-title-w), var(--col)); font-size: var(--fs-r-hero); line-height: var(--lh-r-title); }
.cs-page--tw .tw-title br { display: none; }
.cs-page--tw .tw-title__p { display: inline; margin: 0; }
.cs-page--tw .tw-title__p::after { content: " "; }
.cs-page--tw .tw-hero { max-width: var(--col); }
.cs-page--tw .cs-meta { width: var(--col); }
.cs-page--tw .cs-meta__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24) var(--sp-32); }
.cs-page--tw .cs-meta__value { font-size: var(--fs-r-body-24); }
.cs-page--tw .cs-h2 { font-size: var(--fs-r-h2); }
.cs-page--tw .tw-text { font-size: var(--fs-r-body-24); line-height: var(--lh-r-body); }
.cs-page--tw .tw-text .tw-gap { height: calc(1em * var(--lh-r-body)); }
/* Carousel 1: the cards fit the column; their tables scroll sideways inside (tablet too: 948 / 1030 px don't fit) */
.cs-page--tw .tw-carousel { width: var(--col); max-width: var(--col); }
.cs-page--tw .tw-carousel .ed-carousel__slides { grid-template-columns: minmax(0, 1fr); } /* the track never grows to the table's width */
.cs-page--tw .tw-card { width: 100%; min-height: 0; padding: var(--sp-24); }
.cs-page--tw .ed-col { width: min(var(--cs-head-w), var(--col)); }
.cs-page--tw .ed-text { font-size: var(--fs-r-body-24); }
.cs-page--tw .tw-card__title { font-size: var(--fs-r-h2); }
.cs-page--tw .tw-matrix__table { grid-template-columns: repeat(6, var(--tw-col-w)); column-gap: var(--tw-matrix-col-gap); justify-content: start; padding: var(--tw-hl-above) 0 var(--tw-hl-below); margin: calc(var(--tw-hl-above) * -1) 0 calc(var(--tw-hl-below) * -1); }
.cs-page--tw .tw-matrix__table::before { top: 0; }
.cs-page--tw .tw-comp__table > .tw-comp__row { min-width: var(--tw-comp-min); }
.cs-page--tw [data-hscroll] {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
--fade-l: 0px; --fade-r: 0px;
-webkit-mask-image: linear-gradient(to right, transparent, var(--c-black) var(--fade-l), var(--c-black) calc(100% - var(--fade-r)), transparent);
mask-image: linear-gradient(to right, transparent, var(--c-black) var(--fade-l), var(--c-black) calc(100% - var(--fade-r)), transparent);
}
.cs-page--tw [data-hscroll].has-more-right { --fade-r: var(--hscroll-fade); }
/* Persona carousel: full column; photo beside the text from 900 up, above it below */
.cs-page--tw .tw-persona { width: 100%; min-height: 0; }
.cs-page--tw .tw-persona__text { font-size: var(--fs-r-body-20); }
.cs-page--tw .tw-persona__name { font-size: var(--fs-r-h2); }
/* Wireframes: 4 in a row (scaled) */
.cs-page--tw .tw-wires { max-width: var(--col); }
/* Takeaways: 2 per row */
.cs-page--tw .tw-learn .ed-tk-row { width: var(--col); }
.cs-page--tw .tw-learn .ed-tk { flex: 1 1 0; min-width: 0; }
.cs-page--tw :is(.ed-tk__title) { font-size: var(--fs-r-body-24); }
.cs-page--tw .ed-tk__text { font-size: var(--fs-r-body-20); }
.cs-page--tw :is(.ed-impact__title, .ed-impact__text) { font-size: var(--fs-r-body-24); }
.cs-page--tw .cs-nextproj__mock { width: 100%; }
}
@media (max-width: 899.98px) {
.cs-page--tw .ed-carousel__slides > .tw-persona { flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-page--tw .tw-persona__photo { width: min(var(--tw-photo-w), 100%); height: auto; aspect-ratio: var(--tw-photo-w) / var(--tw-photo-h); }
.cs-page--tw .tw-persona__id { top: var(--tw-name-yp); }
.cs-page--tw .tw-persona__body { width: 100%; }
}
@media (max-width: 767.98px) {
.cs-page--tw { padding-top: var(--cs-top-phone); gap: var(--cs-gap-phone); }
.cs-page--tw .cs-meta { padding: var(--cs-card-pad-phone); }
.cs-page--tw .cs-meta__row { grid-template-columns: 1fr; }
.cs-page--tw .tw-card { padding: var(--cs-card-pad-phone); }
.cs-page--tw .tw-wires { flex-wrap: wrap; row-gap: var(--card-gap); }
.cs-page--tw .tw-wires img { width: calc(50% - var(--card-gap) / 2); }
.cs-page--tw .tw-learn .ed-tk-row { flex-direction: column; }
.cs-page--tw .tw-learn .ed-tk { flex: none; padding: var(--cs-card-pad-phone); }
}
/* =====================================================================
Phone / tablet fixes: sticky first table column, MTA personas, TW persona photo, carousel 3 dots
===================================================================== */
/* Sticky first column in sideways-scrolling tables: ONE continuous opaque surface (card colour; each cell's
background bleeds --sc into the row gaps, so the Feature Matrix highlight never shows between rows), and a
1 px divider along its full right edge only while the table is scrolled. No shadows. */
@media (max-width: 1189.98px) {
.cs-page--tw .tw-matrix__table { --sc: var(--sticky-cover); }
.cs-page--tw .tw-comp__table { --sc: var(--sticky-cover-comp); }
.cs-page--tw :is(.tw-matrix__table [role="row"] > :first-child, .tw-comp__row > :first-child) {
position: sticky; left: 0; z-index: 2; align-self: stretch;
background: var(--c-tw-card);
box-shadow: 0 var(--sc) 0 0 var(--c-tw-card), 0 calc(var(--sc) * -1) 0 0 var(--c-tw-card);
}
/* stretched to the row height so later columns can't show beneath it; name stays at the top */
.cs-page--tw .tw-comp__row > :first-child { align-items: flex-start; }
.cs-page--tw .has-more-left :is([role="row"] > :first-child, .tw-comp__row > :first-child) {
box-shadow: 0 var(--sc) 0 0 var(--c-tw-card), 0 calc(var(--sc) * -1) 0 0 var(--c-tw-card),
var(--bw-1) 0 0 0 var(--c-sticky-line), var(--bw-1) var(--sc) 0 0 var(--c-sticky-line), var(--bw-1) calc(var(--sc) * -1) 0 0 var(--c-sticky-line);
}
}
@media (max-width: 767.98px) {
/* MTA survey on phone: labels | Before | After (DOM order is Before | label | After; dense placement keeps the rows) */
.cs-page--mta .mta-survey__table { --sc: var(--sticky-cover); grid-template-columns: max-content max-content max-content;
grid-auto-flow: row dense; column-gap: var(--mta-survey-col-gap-phone); }
.cs-page--mta .mta-survey__table tr > :nth-child(1) { grid-column: 2; }
.cs-page--mta .mta-survey__table tr > :nth-child(3) { grid-column: 3; }
.cs-page--mta .mta-survey__table tr > :nth-child(2) {
grid-column: 1; position: sticky; left: 0; z-index: 2; text-align: left;
background: var(--c-goal-bg);
box-shadow: 0 var(--sc) 0 0 var(--c-goal-bg), 0 calc(var(--sc) * -1) 0 0 var(--c-goal-bg);
}
.cs-page--mta .mta-survey__table.has-more-left tr > :nth-child(2) {
box-shadow: 0 var(--sc) 0 0 var(--c-goal-bg), 0 calc(var(--sc) * -1) 0 0 var(--c-goal-bg),
var(--bw-1) 0 0 0 var(--c-sticky-line), var(--bw-1) var(--sc) 0 0 var(--c-sticky-line), var(--bw-1) calc(var(--sc) * -1) 0 0 var(--c-sticky-line);
}
/* TW Competitor on phone: narrow sticky column, logo (32) stacked above the name, no divider; the other columns
keep their Figma widths (header offsets stay 4 px left of the rows, as in Figma) */
.cs-page--tw .tw-comp__row { grid-template-columns: var(--tw-comp-col1-phone) 161px 351px 1fr; }
.cs-page--tw .tw-comp__row--head { grid-template-columns: calc(var(--tw-comp-col1-phone) - 4px) 167px 344px 1fr; }
.cs-page--tw .tw-comp__table > .tw-comp__row { min-width: var(--tw-comp-min-phone); }
.cs-page--tw .tw-comp__name { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.cs-page--tw .tw-comp__name .tw-logo { width: var(--tw-comp-logo-phone); height: auto; }
.cs-page--tw .tw-comp__rule { display: none; }
/* TW Feature Matrix on phone: first column 140 (labels wrap to 2 lines); the highlight band starts where it ends */
.cs-page--tw .tw-matrix__table { --tw-col-hl-x: var(--tw-matrix-col1-phone); grid-template-columns: var(--tw-matrix-col1-phone) repeat(5, var(--tw-col-w)); }
/* MTA survey on phone: all text smaller, same proportions; fits at 390 without scrolling (360 still scrolls) */
.cs-page--mta .mta-survey__table { font-size: var(--mta-survey-fs-phone); }
.cs-page--mta .mta-survey__h { font-size: var(--mta-survey-h-fs-phone); }
.cs-page--mta .mta-survey__gain { font-size: var(--mta-survey-gain-fs-phone); }
.cs-page--mta .mta-survey__up { width: var(--mta-survey-gain-fs-phone); height: var(--mta-survey-gain-fs-phone); }
/* MTA personas fill the column */
.cs-page--mta .mta-persona { width: 100%; }
/* TW: persona photo capped and centred; carousel 3 without dots (counter + arrows stay) */
.cs-page--tw .tw-persona__photo { width: min(var(--tw-photo-max-phone), 100%); }
/* overlay scaled down slightly so name + facts stay inside the 280 px photo */
.cs-page--tw .tw-persona__id { gap: var(--sp-8); }
.cs-page--tw .tw-persona__name { font-size: var(--fs-20); }
.cs-page--tw .tw-persona__facts { gap: var(--sp-8); font-size: var(--fs-14); }
.cs-page--tw .tw-c3__dots { display: none; }
}
/* TW persona photo on tablet: never wider than 360 */
@media (min-width: 768px) and (max-width: 1189.98px) {
.cs-page--tw .tw-persona__photo { flex: none; width: min(var(--tw-photo-max-tablet), 100%); height: auto; aspect-ratio: var(--tw-photo-w) / var(--tw-photo-h); }
.cs-page--tw .tw-persona__id { top: var(--tw-name-yp); }
}
/* === Tap areas (C1): at least 44 x 44 (--tap), invisible; elements larger than 44 keep their own size === */
.cs-textbtn, .cs-nav .btn, .cs-nextproj__btns .btn { position: relative; }
.cs-textbtn::after, .cs-nav .btn::after, .cs-nextproj__btns .btn::after { content: ""; position: absolute;
inset: min(0px, calc((100% - var(--tap)) / 2)) min(0px, calc((100% - var(--tap)) / 2)); } /* top bar + Next Project pills (36 tall) too, 2026-10-08 */
/* C2: MTA small text at 14 px (--fs-r-min) on phone: pain-point notes and persona cards (Figma 12 kept >= 768) */
@media (max-width: 767.98px) {
.cs-page--mta :is(.mta-note__list, .mta-persona__age, .mta-persona__tag, .mta-persona__bio, .mta-persona__needs) { font-size: var(--fs-r-min); }
}
/* C4: no lone short word on the last line of these headings on phone (balanced wrapping; wording unchanged) */
@media (max-width: 767.98px) {
:is(.cs-tk__head, .ed-tk__head, .ed-feature__title, .ed-impact__title) { text-wrap: balance; }
}
/* ===== MindHYVE design system (Figma 2815:142486), chunk 1: shell, hero, meta, S1–S2 ===== */
.cs-label--mh { left: 0; right: 0; width: auto; color: var(--c-mh-gold); }
.cs-sidenav--mh { --g-side-nav-angle: var(--g-side-nav-angle-mh); top: min(var(--cs-sidenav-y), calc(100vh - var(--mh-sidenav-h) - var(--sp-16))); }
.cs-page--mh .cs-p b.mh-sb { font-weight: var(--fw-semibold); } /* SemiBold lead-ins (Bold ones use plain ) */
.mh-quote { width: var(--mh-quote-w); max-width: calc(100vw - 2 * var(--page-margin)); align-self: flex-start;
font-weight: var(--fw-semibold); font-style: italic; font-size: var(--fs-56); line-height: var(--lh-auto); text-align: center; color: var(--c-white); }
/* Hero: brand / mode switcher = the original look (prototype.html / HERO-SPEC.md; reference hero-original-2x.webp) */
.mh-hero { width: var(--mh-hero-w); max-width: calc(100% - 2 * var(--page-margin)); padding-bottom: var(--sp-12); --mh-accent: var(--c-mh-arthur); } /* Figma frame 780 = stage 700 + 20 + controls 48 + 12 */
.mh-hero__stage { position: relative; aspect-ratio: var(--mh-stage-ar); border-radius: var(--r-20); background: var(--c-mh-stage);
box-shadow: inset 0 0 0 var(--bw-1) var(--c-mh-line); overflow: hidden; } /* inset ring: % positions measure the full 1192 */
.mh-hero__desk { position: absolute; left: var(--mh-desk-x); top: var(--mh-desk-y); width: var(--mh-desk-w); aspect-ratio: var(--mh-desk-ar);
border-radius: var(--r-12); overflow: hidden; border: var(--bw-1) solid var(--c-mh-screen-line);
box-shadow: 0 0 0 var(--bw-6) var(--c-mh-bezel), 0 0 0 calc(var(--bw-6) + var(--bw-1)) var(--c-mh-bezel-ring); } /* rim OUTSIDE the 882 x 551 screen: outer radius 12 + 6 = 18 */
.mh-hero__phone { position: absolute; right: var(--mh-phone-right); bottom: var(--mh-phone-bottom); width: var(--mh-phone-w); aspect-ratio: var(--mh-phone-ar);
border-radius: var(--r-26); overflow: hidden; border: var(--bw-6) solid var(--c-mh-bezel); box-shadow: 0 0 0 var(--bw-1) var(--c-mh-bezel-ring); }
/* dark mode: dark screens on the dark stage get a light 1 px outline and a soft shadow (no frames) */
.mh-hero[data-mode="dark"] .mh-hero__desk { box-shadow: 0 0 0 var(--bw-6) var(--c-mh-bezel), 0 0 0 calc(var(--bw-6) + var(--bw-1)) var(--c-mh-dark-edge), var(--mh-dark-shadow); }
.mh-hero[data-mode="dark"] .mh-hero__phone { box-shadow: 0 0 0 var(--bw-1) var(--c-mh-dark-edge), var(--mh-dark-shadow); }
/* Layering: each device is its own stacking context (the JS gives the screen images z-index 1-2 for the cross-fade);
the phone (rim, ring and screen together) sits above the whole desktop, the label above both. */
.mh-hero__desk { z-index: 1; }
.mh-hero__phone { z-index: 2; }
.mh-hero__tag { z-index: 3; }
.mh-hero__desk, .mh-hero__phone { transition: border-color var(--dur-mh-fade) var(--ease-mh-fade), box-shadow var(--dur-mh-fade) var(--ease-mh-fade); }
.cs-page .mh-hero__screen img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top;
will-change: clip-path, opacity; backface-visibility: hidden; }
:where(.cs-page--mh) .mh-hero__screen img { border-radius: 0; } /* the screens clip the corners */
.mh-hero__tag { position: absolute; left: var(--mh-tag-x); bottom: var(--mh-tag-y); height: var(--mh-tag-h); min-width: var(--mh-tag-min-w);
display: flex; align-items: center; padding: 0 var(--sp-14); font-size: var(--fs-14); color: var(--c-mh-fg);
background: var(--c-mh-tag-bg); border: var(--bw-1) solid var(--c-mh-line); border-radius: var(--r-pill); white-space: nowrap; }
.mh-hero__dot { flex: none; width: var(--mh-dot); height: var(--mh-dot); margin-right: var(--sp-8);
border-radius: 50%; background: var(--mh-accent); } /* switches instantly with the chips (no colour interpolation) */
.mh-hero__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); margin-top: var(--sp-20); }
.mh-seg { display: inline-flex; align-items: center; gap: var(--mh-brand-btn-gap); height: var(--mh-pp); padding: 0 var(--mh-seg-pad);
background: var(--c-mh-chip); border: var(--bw-1) solid var(--c-mh-line); border-radius: var(--r-pill); }
.mh-seg + .mh-seg { gap: 0; }
.mh-seg button, .mh-pp { min-height: var(--mh-btn-h); padding: 0; border-radius: var(--r-pill);
font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-tw-100); color: var(--c-mh-muted); }
.mh-seg button[data-b] { width: var(--mh-brand-btn-w); }
.mh-seg button[data-m="light"] { width: var(--mh-mode-light-w); }
.mh-seg button[data-m="dark"] { width: var(--mh-mode-dark-w); }
/* chips: the active fill and text switch instantly when the wipe / cross-fade starts (label() in mindhyve-hero.js);
no background-color transition, so gold -> blue never passes through mixed colours (owner 2026-10-08) */
.mh-seg button[aria-pressed="true"] { background: var(--mh-accent); color: var(--c-mh-on-primary); }
.mh-pp { width: var(--mh-pp); height: var(--mh-pp); display: inline-flex; align-items: center; justify-content: center;
background: var(--c-mh-chip); border: var(--bw-1) solid var(--c-mh-line); }
.mh-pp svg { width: var(--mh-pp-icon-w); height: var(--mh-pp-icon-h); flex: none; fill: currentColor; }
.mh-pp .mh-pp__play { transform: translateX(var(--mh-pp-play-shift)); }
.mh-pp[data-state="playing"] .mh-pp__play, .mh-pp[data-state="paused"] .mh-pp__pause { display: none; }
.mh-hero button:focus-visible { outline: var(--bw-2) solid var(--mh-accent); outline-offset: var(--bw-2); }
@media (max-width: 767.98px) { /* hero phone layout (owner 2026-10-08, v2): no stage box, the phone floats on the page; controls centred, chips sized to their text */
.cs-page--mh .mh-hero { margin-top: calc(var(--sp-24) - var(--cs-gap-phone)); } /* 24 from the title block */
.mh-hero__desk { display: none; }
.mh-hero__stage { aspect-ratio: auto; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.mh-hero__phone { position: relative; right: auto; bottom: auto; width: min(calc(100% * var(--n-mh-phone-share)), var(--mh-phone-only-max)); }
.mh-hero__tag { position: relative; left: auto; bottom: auto; }
.mh-hero__controls { margin-top: var(--sp-16); display: grid; grid-template-columns: 1fr auto auto 1fr; gap: var(--sp-12); } /* equal side tracks: both rows centred */
.mh-seg:first-child { grid-column: 1 / -1; justify-self: center; }
.mh-seg + .mh-seg { grid-column: 2; }
.mh-pp { grid-column: 3; }
.mh-seg { height: var(--mh-pp); padding: calc((var(--mh-pp) - var(--tap)) / 2) var(--mh-seg-pad); } /* 48 tall like the pause button; segments 44 */
.mh-seg button { min-height: var(--tap); }
.mh-seg button[aria-pressed="false"] { color: var(--c-mh-seg-idle-phone); }
}
@media (prefers-reduced-motion: reduce) { .mh-seg button, .mh-hero__dot, .mh-hero__desk, .mh-hero__phone { transition: none; } }
/* ===== MindHYVE chunk 2a: S3–S10 ===== */
.mh-wide { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); width: 100%; }
.mh-wide > .mh-quote { align-self: center; }
/* Annotated dashboards (S3 2848:147704, S4 2848:147724): image + orange arrows (SVG) + live callout labels.
Figure size in Figma px via --w / --h; every child placed in % of it, so it scales below 1440. */
.mh-annot { position: relative; width: calc(var(--w) * 1px); max-width: calc(100% - 2 * var(--page-margin)); aspect-ratio: var(--w) / var(--h); }
.mh-annot__pic { position: absolute; left: calc(var(--x) / var(--w) * 100%); top: 0; width: calc(var(--iw) / var(--w) * 100%); }
.mh-annot__img { display: block; width: 100%; height: auto; }
.mh-annot__mk, .mh-annot__list { display: none; } /* < 1190 only: numbered markers + list replace arrows and callouts */
.mh-annot__arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--c-mh-orange); }
.mh-annot__arrows path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.mh-annot--s3 .mh-annot__arrows path { stroke-width: var(--mh-arrow-s3); }
.mh-annot--s4 .mh-annot__arrows path { stroke-width: var(--mh-arrow-s4); }
.mh-callout { position: absolute; left: calc(var(--x) / var(--w) * 100%); top: calc(var(--y) / var(--h) * 100%); width: var(--mh-callout-w);
font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-white); }
/* Comparison panels (S5 2873:148136, S7 2873:148197) */
.mh-cmp { width: var(--mh-cmp-w); max-width: calc(100vw - 2 * var(--page-margin)); display: flex; justify-content: center; gap: var(--mh-cmp-gap); }
.mh-panel { flex: 0 1 var(--mh-panel-w); min-width: 0; height: var(--mh-panel-h); padding: var(--mh-panel-pad); border-radius: var(--mh-panel-r);
background: var(--c-mh-panel); box-shadow: inset 0 0 0 var(--mh-panel-bw) var(--c-mh-panel); }
.mh-panel__in { width: var(--mh-panel-inner-w); max-width: 100%; height: 100%; display: flex; flex-direction: column; gap: var(--mh-panel-gap); }
.mh-panel__head { display: flex; flex-direction: column; gap: var(--mh-panel-head-gap); }
.mh-panel__title { font-weight: var(--fw-bold); font-size: var(--fs-mh-panel-title); line-height: var(--lh-mh-panel-title); color: var(--c-white); }
.mh-panel__title--chance { color: var(--c-mh-coral); }
.mh-panel__sub { font-size: var(--fs-mh-panel-sub); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mh-panel__groups { display: flex; flex-direction: column; gap: var(--mh-panel-gap); }
.mh-panel__group { display: flex; flex-direction: column; gap: var(--mh-panel-group-gap); }
.mh-panel__label { font-size: var(--fs-mh-panel-group); line-height: var(--lh-auto); color: var(--c-white); }
.mh-chips { display: flex; flex-wrap: wrap; gap: var(--mh-panel-group-gap); }
.mh-chip { height: var(--mh-chip-h); padding: 0 var(--mh-chip-pad); display: inline-flex; align-items: center; border-radius: var(--mh-chip-r);
background: var(--c-mh-chip-bg); box-shadow: inset 0 0 0 var(--mh-panel-bw) var(--c-mh-chip-line);
font-weight: var(--fw-bold); font-size: var(--fs-mh-chip); line-height: var(--lh-mh-chip); color: var(--c-white); white-space: nowrap; }
.mh-chip--brand { box-shadow: inset 0 0 0 var(--mh-panel-bw) var(--c-mh-orange); color: var(--c-mh-orange); }
.mh-chip--chance { position: relative; background: none; box-shadow: none; color: var(--c-mh-coral); }
/* Dashed border (Figma: inside stroke, dash/gap equal): SVG rect inset by half the stroke, rx = half its height;
pathLength = 2 x (number of dash periods that fit the pill), dasharray 1 1 -> the dashes tile evenly all the way
round and every chip starts at the same point (top edge, where the left corner ends). */
.mh-dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mh-dash rect { x: calc(var(--mh-dash-bw) / 2); y: calc(var(--mh-dash-bw) / 2); width: calc(100% - var(--mh-dash-bw)); height: calc(100% - var(--mh-dash-bw));
rx: calc((var(--mh-chip-h) - var(--mh-dash-bw)) / 2); fill: none; stroke: var(--c-mh-coral); stroke-width: var(--mh-dash-bw); stroke-dasharray: 1 1; }
.mh-panel__nothing { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-medium);
font-size: var(--fs-mh-panel-title); line-height: var(--lh-auto); color: var(--c-white); }
.cs-section .mh-cmp { align-self: center; }
/* Goals (S8) */
.mh-goals { display: flex; flex-direction: column; gap: var(--sp-8); }
/* Research cards (S9 2868:147867) */
.mh-rcards { width: var(--mh-rcards-w); max-width: calc(100vw - 2 * var(--page-margin)); padding: var(--mh-rcards-pad) 0; display: flex; justify-content: center; gap: var(--sp-24); align-self: center; }
.mh-rcard { flex: 0 1 var(--mh-rcard-w); min-width: 0; height: var(--mh-rcard-h); padding: var(--mh-rcard-pad); display: flex; flex-direction: column;
border-radius: var(--r-16); box-shadow: inset 0 0 0 var(--bw-1) var(--c-mh-card-line); }
.mh-rcard--chosen { padding: var(--mh-rcard-pad-chosen); box-shadow: inset 0 0 0 var(--mh-rcard-chosen-bw) var(--c-mh-gold); }
.mh-rcard__body { flex: none; height: var(--mh-rcard-body-h); display: flex; flex-direction: column; gap: var(--sp-8); }
.mh-rcard__kind { font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mh-rcard--chosen .mh-rcard__kind { color: var(--c-mh-gold); }
.mh-rcard__name { font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-40); color: var(--c-white); }
.mh-rcard__text { font-size: var(--fs-16); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mh-pill { align-self: flex-start; height: var(--mh-pill-h); padding: 0 var(--mh-pill-pad); display: inline-flex; align-items: center; border-radius: var(--mh-pill-r);
background: var(--c-mh-orange); font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-40); color: var(--c-mh-chosen-text); }
/* S10 mini cards (2886:168902, 1:1 since 2026-10-08) */
.mh-minis { width: var(--mh-minis-w); max-width: calc(100vw - 2 * var(--page-margin)); display: flex; justify-content: center; gap: var(--sp-24); align-self: center; }
.mh-mini { flex: 0 1 var(--mh-mini-w); min-width: 0; height: var(--mh-mini-h); display: flex; flex-direction: column; align-items: center; justify-content: center;
border-radius: var(--mh-mini-r); background: var(--c-mh-panel); box-shadow: inset 0 0 0 var(--mh-mini-bw) var(--c-mh-mini-line); }
.mh-mini__in { width: var(--mh-mini-in-w); max-width: calc(100% - 2 * var(--mh-mini-in-x)); display: flex; flex-direction: column; gap: var(--mh-mini-gap); }
.mh-mini__in--brand { align-items: center; gap: var(--mh-brand-gap); }
.mh-mini__text { align-self: stretch; display: flex; flex-direction: column; gap: var(--mh-mini-text-gap); }
.mh-mini__text--narrow { align-self: flex-start; width: var(--mh-mini-text-narrow); max-width: 100%; }
.mh-mini__title { font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-mh-mini-title); color: var(--c-white); }
.mh-mini__body { font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mh-mini__note { font-weight: var(--fw-medium); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mh-mini__label { font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); white-space: nowrap; }
/* card 1: atoms (row spread over 352, bottoms aligned) */
.mh-atoms { display: flex; justify-content: space-between; align-items: flex-end; }
.mh-atom { display: flex; flex-direction: column; gap: var(--sp-6); }
.mh-atom .mh-mini__label { font-weight: var(--fw-bold); }
.mh-atom__box { width: calc(var(--aw) * 1px); height: calc(var(--ah) * 1px); border-radius: var(--mh-mini-r); background: var(--c-mh-panel);
box-shadow: inset 0 0 0 var(--mh-mini-bw) var(--c-mh-mini-line); }
.mh-atom__box--tile { padding: var(--mh-tile-pad); display: flex; flex-direction: column; gap: var(--mh-bar-h); background: var(--c-mh-template-bg);
box-shadow: inset 0 0 0 var(--mh-mini-bw) var(--c-mh-template); }
.mh-atom__bar { height: var(--mh-bar-h); border-radius: var(--mh-bar-r); background: var(--c-mh-template); }
.mh-atom__bar:first-child { width: var(--mh-bar-short); }
.mh-atom__bar--mid { background: var(--c-mh-bar-mid); }
.mh-atom__bar--dark { background: var(--c-grey-2c2c2d); }
/* card 2: value -> meaning */
.mh-vm { display: flex; flex-direction: column; gap: var(--mh-vm-desc-gap); }
.mh-vm__top { display: flex; flex-direction: column; gap: var(--mh-vm-rule-gap); }
.mh-vm__row { display: flex; align-items: center; gap: var(--mh-vm-gap); }
.mh-vm__col { display: flex; flex-direction: column; gap: var(--mh-vm-col-gap); }
.mh-vm__chip { width: var(--mh-vm-value-w); justify-content: center; height: var(--mh-vm-chip-h); padding: 0 var(--mh-vm-chip-pad); display: inline-flex; align-items: center; gap: var(--mh-vm-chip-gap);
border-radius: var(--mh-vm-chip-r); background: var(--c-mh-chip-bg); box-shadow: inset 0 0 0 var(--mh-vm-chip-bw) var(--c-mh-chip-line);
font-weight: var(--fw-bold); font-size: var(--fs-mh-mini-chip); line-height: var(--lh-mh-vm-chip); color: var(--c-white); }
.mh-vm__chip--meaning { width: var(--mh-vm-meaning-w); background: var(--c-mh-orange-10); box-shadow: inset 0 0 0 var(--mh-vm-chip-bw) var(--c-mh-orange); color: var(--c-mh-orange); }
.mh-vm__dot { width: var(--mh-vm-dot); height: var(--mh-vm-dot); border-radius: 50%; background: var(--c-mh-gold); }
.mh-vm__col--meaning .mh-mini__label { color: var(--c-mh-orange); }
.mh-vm__arrow { position: relative; align-self: stretch; width: var(--mh-vm-arrow-w); color: var(--c-white); }
.mh-vm__arrow svg { position: absolute; left: var(--mh-vm-arrow-x); top: var(--mh-vm-arrow-y); }
.mh-vm__rule { height: 0; border-top: var(--mh-mini-bw) solid var(--c-mh-mini-rule); }
/* card 3: brand layer (Figma group 2886:168947, 250.9 x 135.06; children in its px) */
.mh-brands { position: relative; flex: none; width: var(--mh-brands-w); height: var(--mh-brands-h); }
.mh-brands svg { position: absolute; overflow: visible; stroke: var(--c-white); stroke-width: var(--mh-curve-w); fill: none; }
.mh-brands__chip { position: absolute; left: var(--mh-brand-chip-x); top: 0; height: var(--mh-brand-chip-h); width: var(--mh-brand-chip-w); justify-content: center; padding: 0 var(--mh-brand-chip-pad); display: inline-flex; align-items: center;
border-radius: var(--mh-brand-chip-r); background: var(--c-mh-orange-10); box-shadow: inset 0 0 0 var(--mh-brand-chip-bw) var(--c-mh-orange);
font-weight: var(--fw-bold); font-size: var(--fs-mh-brand-chip); line-height: var(--lh-mh-brand-chip); color: var(--c-mh-orange); }
.mh-brands__b { position: absolute; top: var(--mh-brand-row-y); width: var(--mh-brand-dot); display: flex; flex-direction: column; align-items: center; gap: var(--mh-brand-label-gap);
font-weight: var(--fw-semibold); font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-white); white-space: nowrap; }
.mh-brands__b::before { content: ""; flex: none; width: var(--mh-brand-dot); height: var(--mh-brand-dot); border-radius: 50%; background: var(--c); }
/* S10 layers / patterns diagram (2899:193395, image; Figma radius 8) */
.mh-diagram { width: var(--mh-diagram-w); max-width: calc(100vw - 2 * var(--page-margin)); height: auto; align-self: center; }
:where(.cs-page--mh) .mh-diagram { border-radius: var(--mh-diagram-r); }
/* ===== MindHYVE chunk 2b: S11 The architecture (2815:142760) ===== */
.cs-section--s11 { gap: var(--mh-s11-gap); }
.mh-s11-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.mh-quote--center { align-self: center; }
.mh-s11-fig { display: flex; flex-direction: column; align-items: center; gap: var(--mh-flow-caption-gap); margin: 0; }
.mh-s11-cap { font-weight: var(--fw-semibold); font-size: var(--fs-14); line-height: var(--lh-auto); text-align: center; color: var(--c-grey-8e8e8e); }
/* Architecture diagram (native port of variable-flow-interactive-v3.html). Own stacking context: nothing inside
can paint over or under the neighbours. The box is reserved (1228:640) before the script builds it. */
.mh-flow { position: relative; z-index: 0; isolation: isolate; width: var(--mh-flow-w); max-width: calc(100vw - 2 * var(--page-margin));
aspect-ratio: var(--mh-flow-ar); container-type: inline-size; border-radius: var(--mh-flow-r); overflow: hidden;
background: var(--c-mh-flow-card); box-shadow: inset 0 0 0 var(--mh-flow-bw) var(--c-mh-flow-line); }
.mh-flow__fallback { display: block; width: 100%; height: auto; }
:where(.cs-page--mh) .mh-flow__fallback { border-radius: 0; } /* the box clips the corners (Figma image has them) */
.mh-flow__stage { --u: calc(100cqw / 1228); position: absolute; inset: 0; font-family: var(--font-figtree); color: var(--c-mh-fg);
--b1: var(--c-mh-arthur-light); --b2: var(--c-mh-arthur); --ring: var(--c-mh-arthur); }
.mh-flow__stage[data-brand="Justine"] { --b1: var(--c-mh-justine-light); --b2: var(--c-mh-justine); --ring: var(--c-mh-justine); }
.mh-flow__stage[data-brand="Chiron"] { --b1: var(--c-mh-chiron-light); --b2: var(--c-mh-chiron); --ring: var(--c-mh-chiron); }
.mh-flow__stage::after { content: ""; position: absolute; inset: 0; border-radius: var(--mh-flow-r); box-shadow: inset 0 0 0 var(--mh-flow-bw) var(--c-mh-flow-line); pointer-events: none; z-index: 9; }
.mh-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mh-flow .s-hub0 { stop-color: var(--c-mh-flow-hub-0); } .mh-flow .s-hub1 { stop-color: var(--c-mh-flow-hub-1); }
.mh-flow .s-glow { stop-color: var(--ring); transition: stop-color var(--dur-mh-flow-ring); }
.mh-flow .s-blue { stop-color: var(--c-mh-justine); }
.mh-flow .s-a { stop-color: var(--c-mh-arthur); } .mh-flow .s-j { stop-color: var(--c-mh-justine); } .mh-flow .s-c { stop-color: var(--c-mh-chiron); }
.mh-flow .s-b1 { stop-color: var(--b1); } .mh-flow .s-b2 { stop-color: var(--b2); }
.mh-flow .rail { stroke: var(--c-mh-gold); }
.mh-flow .r { transition: opacity var(--dur-mh-flow-dim) ease; }
.mh-flow .r-left { opacity: var(--op-mh-flow-left); }
.mh-flow__stage[data-hbrand] .r-left:not(.on) { opacity: var(--op-mh-flow-left-dim); }
.mh-flow__stage[data-layer] .r-right { opacity: var(--op-mh-flow-right-dim); }
.mh-flow__stage[data-layer] .r-right.on { opacity: 1; }
.mh-flow .hubring { stroke: var(--ring); transition: stroke var(--dur-mh-flow-ring); }
.mh-flow .lbl { position: absolute; font-size: calc(var(--u) * var(--fs-mh-flow-lbl)); letter-spacing: var(--ls-mh-flow-lbl); text-transform: uppercase;
color: var(--c-mh-muted); font-weight: var(--fw-medium); white-space: nowrap; }
.mh-flow .lbl.c { transform: translateX(-50%); }
.mh-flow .lbl.g { color: var(--c-mh-gold); }
.mh-flow .hub { position: absolute; left: calc(var(--u) * var(--g-mh-hub-x)); top: calc(var(--u) * var(--g-mh-hub-y)); width: calc(var(--u) * var(--g-mh-hub-size));
height: calc(var(--u) * var(--g-mh-hub-size)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.mh-flow .hub .k { font-size: calc(var(--u) * var(--fs-mh-flow-hubk)); letter-spacing: var(--ls-mh-flow-hubk); color: var(--ring); font-weight: var(--fw-medium);
text-transform: uppercase; transition: color var(--dur-mh-flow-ring); }
.mh-flow .hub .n { font-size: calc(var(--u) * var(--fs-mh-flow-hubn)); font-weight: var(--fw-semibold); line-height: var(--lh-tw-100);
margin: calc(var(--u) * var(--g-mh-hub-n-top)) 0 calc(var(--u) * var(--g-mh-hub-n-bottom)); }
.mh-flow .hub .s { font-size: calc(var(--u) * var(--fs-mh-flow-14)); color: var(--c-mh-muted); line-height: var(--lh-mh-flow-hub); }
.mh-flow .hubnote { position: absolute; left: calc(var(--u) * var(--g-mh-note-x)); width: calc(var(--u) * var(--g-mh-note-w)); top: calc(var(--u) * var(--g-mh-note-y));
text-align: center; pointer-events: none; }
.mh-flow .hubnote b { display: block; font-weight: var(--fw-medium); font-size: calc(var(--u) * var(--fs-mh-flow-14)); color: var(--c-mh-fg); }
.mh-flow .hubnote span { display: block; font-size: calc(var(--u) * var(--fs-mh-flow-14)); color: var(--c-mh-muted); margin-top: calc(var(--u) * var(--g-mh-note-gap)); }
.mh-flow .glass { background: linear-gradient(180deg, var(--c-mh-flow-glass-top), var(--c-mh-flow-glass-bottom)), var(--c-mh-flow-glass);
border: var(--bw-1) solid var(--c-mh-flow-edge); }
.mh-flow .brand { position: absolute; left: calc(var(--u) * var(--g-mh-pad)); top: calc(var(--u) * var(--top)); width: calc(var(--u) * var(--g-mh-brand-w));
height: calc(var(--u) * var(--g-mh-brand-h)); border-radius: calc(var(--u) * var(--g-mh-brand-r)); display: flex; align-items: center; gap: calc(var(--u) * var(--g-mh-brand-gap));
padding: 0 calc(var(--u) * var(--g-mh-brand-pad)); cursor: pointer; color: inherit; font: inherit; text-align: left;
transition: border-color var(--dur-mh-flow-ui), background var(--dur-mh-flow-ui); }
.mh-flow .brand .dot { flex: none; width: calc(var(--u) * var(--g-mh-dot)); height: calc(var(--u) * var(--g-mh-dot)); border-radius: 50%; background: var(--c);
box-shadow: inset 0 0 0 var(--mh-flow-dot-ring-w) var(--c-mh-flow-dot-ring); }
.mh-flow .brand .t { display: flex; flex-direction: column; justify-content: center; }
.mh-flow .brand .nm { font-size: calc(var(--u) * var(--fs-mh-flow-brand)); font-weight: var(--fw-semibold); line-height: var(--lh-mh-flow-brand); }
.mh-flow .brand .sub { font-size: calc(var(--u) * var(--fs-mh-flow-sub)); color: var(--c-mh-muted); max-height: 0; opacity: 0; overflow: hidden;
transition: max-height var(--dur-mh-flow-ring) ease, opacity var(--dur-mh-flow-ring) ease, margin var(--dur-mh-flow-ring) ease; }
.mh-flow .brand:hover .sub, .mh-flow .brand:focus-visible .sub { max-height: calc(var(--u) * var(--g-mh-sub-h)); opacity: 1; margin-top: calc(var(--u) * var(--g-mh-sub-gap)); }
.mh-flow .brand.sel { border-color: var(--c-mh-flow-edge-sel); }
.mh-flow .card { position: absolute; left: calc(var(--u) * var(--g-mh-cards-x)); width: calc(var(--u) * var(--g-mh-card-w)); height: calc(var(--u) * var(--g-mh-card-h));
top: calc(var(--u) * var(--top)); border-radius: calc(var(--u) * var(--g-mh-card-r)); overflow: hidden; cursor: pointer; color: inherit; font: inherit; text-align: left; padding: 0;
transition-property: left, width, height, top, border-color, box-shadow, opacity; transition-duration: var(--dur-mh-flow-card); transition-timing-function: var(--ease-mh-flow-card); }
.mh-flow .card .head { display: flex; align-items: center; height: calc(var(--u) * var(--g-mh-card-h)); padding: 0 calc(var(--u) * var(--g-mh-card-pad)); }
.mh-flow .card .name { font-size: calc(var(--u) * var(--fs-mh-flow-card)); font-weight: var(--fw-semibold); }
.mh-flow .card .body { display: block; padding: 0 calc(var(--u) * var(--g-mh-card-pad)) calc(var(--u) * var(--g-mh-card-pad-b)); opacity: 0; transform: translateY(calc(var(--u) * var(--g-mh-body-shift)));
transition: opacity var(--dur-mh-flow-ui) ease var(--dur-mh-flow-body-delay), transform var(--dur-mh-flow-ring) ease var(--dur-mh-flow-body-delay); }
.mh-flow .card .body .h { display: block; margin: 0 0 calc(var(--u) * var(--g-mh-h4-gap)); font-size: calc(var(--u) * var(--fs-mh-flow-h4)); letter-spacing: var(--ls-mh-flow-lbl);
text-transform: uppercase; color: var(--c-mh-muted); font-weight: var(--fw-medium); }
.mh-flow .card .body .p { display: block; margin: 0 0 calc(var(--u) * var(--g-mh-p-gap)); font-size: calc(var(--u) * var(--fs-mh-flow-p)); line-height: var(--lh-mh-flow-p); color: var(--c-mh-fg); }
.mh-flow .card .body .p em { font-style: normal; color: var(--c-mh-muted); display: block; font-size: calc(var(--u) * var(--fs-mh-flow-sub)); margin-top: calc(var(--u) * var(--g-mh-em-gap)); }
.mh-flow .card .body .p strong { font-weight: var(--fw-semibold); color: var(--ring); }
.mh-flow .card.on { left: calc(var(--u) * var(--g-mh-card-on-x)); width: calc(var(--u) * var(--g-mh-card-on-w)); height: calc(var(--u) * var(--g-mh-card-on-h));
top: calc(var(--u) * var(--ontop)); z-index: 6; border-color: var(--ring); box-shadow: 0 0 calc(var(--u) * var(--g-mh-card-shadow)) var(--c-mh-flow-shadow); }
.mh-flow .card.on .body { opacity: 1; transform: none; }
.mh-flow__stage[data-layer] .card:not(.on) { opacity: var(--op-mh-flow-card-dim); }
.mh-flow .card:focus-visible, .mh-flow .brand:focus-visible, .mh-flow .autoctl:focus-visible { outline: var(--mh-flow-focus) solid var(--c-white); outline-offset: var(--mh-flow-focus); }
.mh-flow .badge { position: absolute; left: calc(var(--u) * (var(--g-mh-rail-x) - var(--g-mh-badge) / 2)); top: calc(var(--u) * var(--top)); width: calc(var(--u) * var(--g-mh-badge));
height: calc(var(--u) * var(--g-mh-badge)); border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--c-mh-flow-card); border: calc(var(--u) * var(--g-mh-badge-bw)) solid var(--c-mh-flow-badge-line); color: var(--c-mh-gold);
font-size: calc(var(--u) * var(--fs-mh-flow-badge)); font-weight: var(--fw-semibold); letter-spacing: var(--ls-mh-flow-badge); pointer-events: none;
transition: background var(--dur-mh-flow-ui), color var(--dur-mh-flow-ui), opacity var(--dur-mh-flow-ui), border-color var(--dur-mh-flow-ring); }
.mh-flow__stage[data-layer] .badge:not(.on) { border-color: var(--c-mh-flow-badge-line-dim); color: var(--c-mh-flow-badge-num-dim); } /* never element opacity: the opaque backing must keep the rail behind the number */
.mh-flow .badge.on { background: var(--ring); border-color: var(--ring); color: var(--c-mh-on-primary); }
.mh-flow .card .prog { position: absolute; left: 0; bottom: 0; height: calc(var(--u) * var(--g-mh-prog-h)); width: 0; background: var(--ring); opacity: 0; }
.mh-flow__stage[data-auto] .card.on .prog { opacity: 1; animation: mh-flow-fill var(--dur-mh-flow-auto) linear forwards; }
@keyframes mh-flow-fill { from { width: 0; } to { width: 100%; } }
.mh-flow .autoctl { position: absolute; left: calc(var(--u) * var(--g-mh-pad)); top: calc(var(--u) * var(--g-mh-ctl-y)); display: flex; align-items: center; gap: calc(var(--u) * var(--g-mh-ctl-gap));
height: calc(var(--u) * var(--g-mh-ctl-h)); padding: 0 calc(var(--u) * var(--g-mh-ctl-pad)); border-radius: var(--r-pill); background: var(--c-mh-flow-pill-bg);
border: var(--bw-1) solid var(--c-mh-flow-pill-line); color: var(--c-mh-muted); font: inherit; font-size: calc(var(--u) * var(--fs-mh-flow-ctl)); letter-spacing: var(--ls-mh-flow-ctl);
cursor: pointer; transition: color var(--dur-mh-flow-ui), border-color var(--dur-mh-flow-ui); }
.mh-flow .autoctl:hover:not([aria-disabled="true"]) { color: var(--c-mh-fg); border-color: var(--c-mh-flow-pill-line-hover); }
.mh-flow .autoctl[aria-disabled="true"] { cursor: default; }
.mh-flow .autoctl .d { width: calc(var(--u) * var(--g-mh-ctl-dot)); height: calc(var(--u) * var(--g-mh-ctl-dot)); border-radius: 50%; background: var(--c-mh-flow-pill-off); }
.mh-flow__stage[data-auto] .autoctl .d { background: var(--ring); box-shadow: 0 0 calc(var(--u) * var(--g-mh-ctl-dot)) var(--ring); } /* dot lit = running now */
@media (prefers-reduced-motion: reduce) { .mh-flow *, .mh-flow *::before, .mh-flow *::after { transition: none !important; animation: none !important; } }
/* ===== MindHYVE chunk 3a: S12 Foundations, S13 Primitives to patterns, S14 pull line, S15 One click ===== */
.mh-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.mh-stack40 { display: flex; flex-direction: column; align-items: center; gap: var(--sp-40); }
.cs-section > .mh-stack40 { width: 100%; }
/* wide media centred over the 920 column (Figma x 106, 1228 wide); each its own stacking context */
.mh-board, .mh-video { position: relative; z-index: 0; isolation: isolate; display: block; width: var(--mh-media-w);
max-width: calc(100vw - 2 * var(--page-margin)); height: auto; align-self: center; flex: none; }
.mh-video { aspect-ratio: var(--ar); background: var(--c-bg); object-fit: contain; }
:where(.cs-page--mh) .mh-video { border-radius: var(--mh-video-r); }
.mh-quote--s14 { width: var(--mh-quote-s14-w); align-self: center; }
/* ===== MindHYVE S12 / S13 live boards (ports of foundations-board.html / button-600-wall.html) ===== */
/* box: reserved 1228:850, own stacking context; the fixed 1228 x 850 stage scales down with it (--s set by JS) */
.mh-pt { position: relative; z-index: 0; isolation: isolate; width: var(--mh-pt-w); max-width: calc(100vw - 2 * var(--page-margin));
aspect-ratio: var(--mh-pt-ar); align-self: center; flex: none; overflow: hidden; border-radius: var(--mh-pt-r); }
.mh-pt__fallback { display: block; width: 100%; height: auto; }
:where(.cs-page--mh) .mh-pt__fallback { border-radius: 0; }
.mh-pt__stage { position: absolute; left: 0; top: 0; width: var(--mh-pt-w); height: var(--mh-pt-h); transform: scale(var(--s, 1)); transform-origin: 0 0;
background: var(--c-mh-flow-card); border: var(--mh-pt-bw) solid var(--c-mh-flow-line); border-radius: var(--mh-pt-r); overflow: hidden;
font-family: var(--font-figtree); color: var(--c-mh-fg); --acc: var(--c-mh-gold); --glow: var(--c-mh-pt-glow-arthur); }
.mh-pt__stage button { font: inherit; color: inherit; }
.mh-pt :focus-visible { outline: var(--bw-2) solid var(--c-white); outline-offset: var(--bw-2); }
.mh-pt .pt-badge { position: absolute; left: var(--fs-24); top: var(--fs-22); display: flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-12); letter-spacing: var(--ls-mh-pt-wide);
text-transform: uppercase; color: var(--acc); font-weight: var(--fw-medium); }
.mh-pt .pt-badge i { display: flex; width: var(--mh-pt-34px); height: var(--mh-pt-34px); border-radius: 50%; border: var(--bw-2) solid var(--c-mh-flow-badge-line); align-items: center; justify-content: center;
font-style: normal; font-size: var(--fs-mh-pt-13); font-weight: var(--fw-semibold); letter-spacing: var(--ls-mh-pt-badge); color: var(--acc); background: var(--c-mh-flow-card); }
.mh-bw .pt-badge i { border-color: var(--acc); }
.mh-pt .autoctl { position: absolute; right: var(--fs-24); top: var(--fs-22); display: flex; align-items: center; gap: var(--fs-8); height: var(--r-30); padding: 0 var(--fs-14); border-radius: var(--r-pill);
background: var(--c-mh-flow-pill-bg); border: var(--bw-1) solid var(--c-mh-flow-pill-line); color: var(--c-mh-muted); font-size: var(--fs-12); letter-spacing: var(--ls-mh-pt-ctl); cursor: pointer;
transition: color var(--dur-mh-pt-ui), border-color var(--dur-mh-pt-ui); }
.mh-pt .autoctl:hover:not([aria-disabled="true"]) { color: var(--c-mh-fg); border-color: var(--c-mh-flow-pill-line-hover); }
.mh-pt .autoctl[aria-disabled="true"] { cursor: default; }
.mh-pt .autoctl .d { width: var(--fs-8); height: var(--fs-8); border-radius: 50%; background: var(--c-mh-flow-pill-off); }
.mh-pt__stage[data-auto] .autoctl .d { background: var(--acc); box-shadow: 0 0 var(--fs-8) var(--acc); } /* lit = running now */
.mh-pt .readout { position: absolute; left: var(--fs-24); top: var(--mh-pt-758px); width: var(--mh-pt-1180px); height: var(--mh-pt-68px); border-radius: var(--r-16); background: var(--c-mh-pt-readout);
border: var(--bw-1) solid var(--c-mh-flow-edge); display: flex; align-items: center; gap: var(--fs-14); padding: 0 var(--fs-24); }
.mh-pt .readout .nm { font-size: var(--fs-mh-pt-17); font-weight: var(--fw-semibold); }
.mh-pt .readout .val { margin-left: auto; font-size: var(--fs-14); color: var(--c-mh-muted); text-align: right; }
.mh-pt .pt-pick { cursor: pointer; }
/* --- S12 foundations board --- */
.mh-fb .mh-pt__stage::before { content: ""; position: absolute; left: calc(-1 * var(--mh-pt-120px)); top: calc(-1 * var(--sp-160)); width: var(--mh-pt-640px); height: var(--mh-pt-520px);
background: radial-gradient(closest-side, var(--c-mh-pt-glow-arthur), transparent); pointer-events: none; }
.mh-fb .panel { position: absolute; border-radius: var(--mh-pt-r-panel); background: linear-gradient(180deg, var(--c-mh-pt-panel-top), var(--c-mh-pt-panel-bottom)), var(--c-mh-pt-panel);
border: var(--bw-1) solid var(--c-mh-pt-panel-line); padding: var(--fs-18) var(--fs-20); overflow: hidden; }
.mh-fb .panel h3 { margin: 0; font-size: var(--fs-mh-pt-17); font-weight: var(--fw-semibold); }
.mh-fb .panel .sub { font-size: var(--fs-mh-pt-12-5); color: var(--c-mh-muted); margin-top: var(--sp-3); }
.mh-fb .hl { outline: var(--bw-2) solid var(--c-mh-gold); outline-offset: var(--mh-pt-hl-off); transition: outline-color var(--dur-mh-pt-ui); }
.mh-fb .ramps { margin-top: var(--fs-16); }
.mh-fb .shades, .mh-fb .ramp { display: flex; align-items: center; }
.mh-fb .shades { padding-left: var(--fs-150); margin-bottom: var(--sp-6); }
.mh-fb .shades span { width: var(--sp-48); text-align: center; font-size: var(--fs-mh-pt-11); color: var(--c-mh-muted); }
.mh-fb .ramp { margin-bottom: var(--fs-16); }
.mh-fb .ramp .nm { width: var(--fs-150); flex: none; }
.mh-fb .ramp .nm b { display: block; font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.mh-fb .ramp .nm span { font-size: var(--fs-12); color: var(--c-mh-muted); }
.mh-fb .ramp .sw { width: var(--mh-pt-44px); height: var(--mh-pt-52px); margin-right: var(--sp-4); border-radius: var(--mh-pt-r-sw); position: relative; transition: transform var(--dur-mh-pt-fast); padding: 0; border: 0; background: var(--c); }
.mh-fb .ramp .sw:hover { transform: translateY(calc(-1 * var(--sp-3))); }
.mh-fb .ramp .sw.base::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-3)); border: var(--bw-2) solid var(--c-white); border-radius: var(--mh-pt-r-sw-ring); pointer-events: none; }
.mh-fb .seg { position: absolute; right: var(--fs-20); top: var(--fs-16); display: flex; border: var(--bw-1) solid var(--c-mh-flow-pill-line); border-radius: var(--r-pill); padding: var(--sp-3); background: var(--c-mh-pt-seg-bg); }
.mh-fb .seg button { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--c-mh-muted); background: transparent; border: 0; border-radius: var(--r-pill); padding: var(--sp-6) var(--sp-12); cursor: pointer;
transition: background var(--dur-mh-pt-ui), color var(--dur-mh-pt-ui); }
.mh-fb .seg button[aria-pressed="true"] { background: var(--c-mh-gold); color: var(--c-mh-on-primary); }
.mh-fb .types { margin-top: var(--fs-10); font-family: var(--font-inter); }
.mh-fb .trow { display: flex; justify-content: space-between; align-items: baseline; border-bottom: var(--bw-1) solid var(--c-mh-pt-row-line); padding: var(--sp-2) 0; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.mh-fb .trow .s { font-weight: var(--fw-semibold); letter-spacing: var(--ls-mh-pt-tight); line-height: var(--lh-mh-pt-11); transition: font-size var(--dur-mh-pt-type) var(--ease-mh-flow-card); white-space: nowrap; }
.mh-fb .trow .t { font-family: var(--font-figtree); font-size: var(--fs-12); color: var(--c-mh-muted); white-space: nowrap; }
.mh-fb .trow .t b { color: var(--c-mh-fg); font-weight: var(--fw-semibold); }
.mh-fb .trow.p .s, .mh-fb .trow.c .s { font-weight: var(--fw-regular); }
.mh-fb .bars { display: flex; align-items: flex-end; gap: var(--sp-9); height: var(--fs-150); margin-top: var(--fs-14); }
.mh-fb .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding: 0; border: 0; background: none; }
.mh-fb .bar i { display: block; width: 100%; height: var(--h); background: var(--c-mh-gold); border-radius: var(--sp-4) var(--sp-4) 0 0; min-height: var(--sp-2); opacity: var(--op-mh-pt-bar); transition: opacity var(--dur-mh-pt-fast); }
.mh-fb .bar span { font-size: var(--fs-mh-pt-11); color: var(--c-mh-muted); margin-top: var(--sp-6); }
.mh-fb .bar:hover i { opacity: 1; }
.mh-fb .rads { display: grid; grid-template-columns: repeat(4, var(--mh-pt-58px)); gap: var(--fs-10) var(--mh-pt-29px); margin-top: var(--sp-12); }
.mh-fb .rad { text-align: center; font-size: var(--fs-mh-pt-11); color: var(--c-mh-muted); padding: 0; border: 0; background: none; }
.mh-fb .rad i { display: block; width: var(--mh-pt-58px); height: var(--mh-pt-58px); background: var(--c-mh-pt-rad-fill); border: var(--bw-2) solid var(--c-mh-gold); margin-bottom: var(--sp-6); border-radius: var(--r); }
.mh-fb .surf { margin-top: var(--sp-12); background: var(--c-mh-pt-surf); border-radius: var(--mh-pt-r-el); padding: var(--fs-18); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fs-20) var(--fs-16); }
.mh-fb .el { height: var(--fs-56); border-radius: var(--r-12); background: var(--c-white); display: flex; align-items: center; justify-content: center; font-size: var(--fs-12);
font-weight: var(--fw-medium); color: var(--c-mh-pt-el-text); padding: 0; border: 0; box-shadow: var(--sh); }
.mh-fb .readout .dot { width: var(--fs-22); height: var(--fs-22); border-radius: 50%; background: var(--c, var(--c-mh-gold)); flex: none; box-shadow: inset 0 0 0 var(--mh-pt-bw) var(--c-mh-flow-dot-ring); }
/* --- S13 button wall --- */
.mh-bw .mh-pt__stage::before { content: ""; position: absolute; left: calc(-1 * var(--sp-140)); top: calc(-1 * var(--mh-pt-180px)); width: var(--mh-pt-680px); height: var(--mh-pt-540px);
background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; transition: background var(--dur-mh-flow-ring); }
.mh-bw .big { position: absolute; left: var(--fs-24); top: var(--sp-80); display: flex; align-items: center; gap: var(--fs-22); }
.mh-bw .big .n { font-size: var(--fs-mh-pt-84); font-weight: var(--fw-semibold); line-height: var(--lh-mh-pt-07); height: var(--mh-pt-big-n-h); letter-spacing: var(--ls-mh-pt-big); display: block; }
.mh-bw .big .t { display: flex; flex-direction: column; gap: var(--sp-3); transform: translateY(calc(-1 * var(--bw-1))); }
.mh-bw .big .t b { display: block; font-size: var(--fs-mh-pt-22); font-weight: var(--fw-semibold); line-height: var(--lh-mh-pt-115); }
.mh-bw .big .t span { font-size: var(--fs-14); color: var(--c-mh-muted); line-height: var(--lh-mh-pt-13); }
.mh-bw .count { position: absolute; right: var(--fs-24); top: var(--mh-pt-84px); text-align: right; font-size: var(--fs-14); color: var(--c-mh-muted); line-height: var(--lh-mh-pt-13); }
.mh-bw .count b { display: block; font-size: var(--fs-mh-pt-30); font-weight: var(--fw-semibold); color: var(--c-mh-fg); line-height: var(--lh-mh-pt-11); }
.mh-bw .brands { position: absolute; right: var(--mh-pt-190px); top: var(--fs-22); display: flex; gap: var(--sp-6); }
.mh-bw .brands button { display: flex; align-items: center; gap: var(--fs-8); font-size: var(--fs-mh-pt-12-5); font-weight: var(--fw-medium); color: var(--c-mh-muted); background: var(--c-mh-flow-pill-bg);
border: var(--bw-1) solid var(--c-mh-flow-edge); border-radius: var(--r-pill); height: var(--r-30); padding: 0 var(--sp-12) 0 var(--fs-8); cursor: pointer; }
.mh-bw .brands button i { width: var(--fs-14); height: var(--fs-14); border-radius: 50%; display: block; background: var(--c); }
.mh-bw .brands button[aria-pressed="true"] { color: var(--c-mh-fg); border-color: var(--c-mh-pt-on-line); }
.mh-bw .filters { position: absolute; left: var(--fs-24); top: var(--mh-pt-168px); width: var(--mh-pt-1180px); display: flex; gap: var(--fs-18); }
.mh-bw .fg .l { font-size: var(--fs-mh-pt-11); letter-spacing: var(--ls-mh-pt-wide); text-transform: uppercase; color: var(--c-mh-muted); font-weight: var(--fw-medium); margin-bottom: var(--sp-7); }
.mh-bw .fg .c { display: flex; gap: var(--sp-5); }
.mh-bw .chip { font-size: var(--fs-mh-pt-12-5); font-weight: var(--fw-medium); color: var(--c-mh-muted); background: var(--c-mh-flow-pill-bg); border: var(--bw-1) solid var(--c-mh-flow-edge);
border-radius: var(--r-pill); height: var(--r-28); padding: 0 var(--fs-10); cursor: pointer; white-space: nowrap; transition: background var(--dur-mh-pt-fast), color var(--dur-mh-pt-fast), border-color var(--dur-mh-pt-fast); }
.mh-bw .chip:hover { color: var(--c-mh-fg); border-color: var(--c-mh-flow-pill-line-hover); }
.mh-bw .chip[aria-pressed="true"] { background: var(--acc); color: var(--c-mh-on-primary); border-color: var(--acc); }
.mh-bw .wall { position: absolute; left: var(--fs-24); top: var(--mh-pt-238px); width: var(--mh-pt-1180px); }
.mh-bw .blk { position: absolute; width: var(--mh-pt-380px); border-radius: var(--r-16); background: var(--c-mh-pt-blk); border: var(--bw-1) solid var(--c-mh-pt-blk-line); padding: var(--sp-12) var(--fs-10) var(--fs-10); }
.mh-bw .blk .h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--sp-2) var(--fs-8); }
.mh-bw .blk .h b { font-size: var(--fs-mh-pt-13); font-weight: var(--fw-semibold); }
.mh-bw .blk .h span { font-size: var(--fs-12); color: var(--c-mh-muted); }
.mh-bw .blk .h em { font-style: normal; color: var(--acc); font-size: var(--fs-mh-pt-11-5); margin-left: var(--fs-8); font-weight: var(--fw-medium); }
.mh-bw .grid { display: grid; grid-template-columns: repeat(12, var(--r-30)); grid-auto-rows: var(--mh-pt-21px); }
.mh-bw .tile { display: flex; align-items: center; justify-content: center; transition: opacity var(--dur-mh-pt-tile); padding: 0; border: 0; background: none; }
.mh-bw .mb { display: flex; align-items: center; justify-content: center; width: var(--fs-24); height: var(--fs-14); border-radius: var(--sp-4); border: var(--bw-1) solid transparent; box-sizing: border-box; }
.mh-bw .mb.ic { width: var(--fs-14); }
.mh-bw .mb u { display: block; width: var(--sp-12); height: var(--sp-3); border-radius: var(--sp-2); }
.mh-bw .mb.ic u { width: var(--sp-5); height: var(--sp-5); border-radius: 50%; }
.mh-bw .mb.lk u { text-decoration: none; box-shadow: 0 var(--sp-3) 0 calc(-1 * var(--bw-1)) currentColor; }
.mh-bw .dim { opacity: var(--op-mh-pt-dim); }
.mh-bw .tile.hov .mb { outline: var(--bw-2) solid var(--c-white); outline-offset: var(--bw-2); }
.mh-bw .readout .mini { display: flex; align-items: center; justify-content: center; width: var(--mh-pt-44px); height: var(--r-30); flex: none; }
.mh-bw .readout .mini .mb { transform: scale(1.6); }
.mh-bw .readout .mini[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mh-pt *, .mh-pt *::before, .mh-pt *::after { transition: none !important; } }
/* ===== MindHYVE S18 audit story (port of audit-story-v3.html). Box reserved 1228:560, own stacking context. ===== */
.mh-as { position: relative; z-index: 0; isolation: isolate; width: var(--mh-pt-w); max-width: calc(100vw - 2 * var(--page-margin)); aspect-ratio: var(--mh-as-ar);
align-self: center; flex: none; overflow: hidden; border-radius: var(--mh-pt-r); }
.mh-as__fallback { display: block; width: 100%; height: auto; }
:where(.cs-page--mh) .mh-as__fallback { border-radius: 0; }
.mh-as .mh-as__stage { position: absolute; left: 0; top: 0; width: var(--mh-pt-w); height: var(--mh-as-h); transform: scale(var(--s, 1)); transform-origin: 0 0;
border-radius: var(--mh-pt-r); overflow: hidden; border: var(--mh-pt-bw) solid var(--c-mh-flow-line); background: var(--c-mh-as-card); font-family: var(--font-figtree); color: var(--c-mh-fg); }
.mh-as .mh-as__stage > * { transition: opacity var(--dur-mh-as-fade) ease; }
.mh-as .mh-as__stage.out > * { opacity: 0 !important; }
.mh-as .steps { position: absolute; left: var(--mh-pt-44px); top: var(--r-26); display: flex; align-items: center; gap: var(--sp-12); }
.mh-as .st { display: flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-mh-as-15); font-weight: var(--fw-medium); color: var(--c-mh-as-idle); transition: color var(--dur-mh-as-ui); }
.mh-as .st i { width: var(--mh-pt-34px); height: var(--mh-pt-34px); border-radius: 50%; border: var(--bw-2) solid var(--c-mh-as-ring); display: flex; align-items: center; justify-content: center; font-style: normal;
font-size: var(--fs-14); font-weight: var(--fw-semibold); transition: all var(--dur-mh-as-ui); }
.mh-as .st.done { color: var(--c-mh-as-done); }
.mh-as .st.done i { border-color: var(--c-mh-gold); color: var(--c-mh-gold); }
.mh-as .st.on { color: var(--c-white); font-weight: var(--fw-semibold); }
.mh-as .st.on i { background: var(--c-mh-gold); border-color: var(--c-mh-gold); color: var(--c-mh-on-primary); }
.mh-as .sl { width: var(--r-28); height: var(--sp-2); background: var(--c-mh-bezel-ring); }
.mh-as .cap { position: absolute; left: var(--mh-pt-44px); top: var(--sp-80); right: var(--mh-pt-44px); font-size: var(--fs-32); font-weight: var(--fw-semibold); letter-spacing: var(--ls-mh-as-cap); line-height: var(--lh-mh-pt-115);
transition: opacity var(--dur-mh-as-ui) ease, transform var(--dur-mh-as-ui) ease; }
.mh-as .cap.swap { opacity: 0; transform: translateY(var(--sp-6)); }
.mh-as .grid { position: absolute; left: var(--mh-pt-44px); top: var(--sp-140); width: var(--mh-pt-528px); display: grid; grid-template-columns: repeat(5, var(--mh-pt-96px)); grid-auto-rows: var(--mh-pt-144px); gap: var(--sp-12); }
.mh-as .tile { position: relative; border-radius: var(--r-16); background: var(--c-mh-as-panel); border: var(--bw-1) solid var(--c-mh-flow-line); display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: var(--sp-14); opacity: 0; transform: translateY(var(--sp-10));
transition: opacity var(--dur-mh-as-in) ease, transform var(--dur-mh-as-in) ease, border-color var(--dur-mh-as-ui), background var(--dur-mh-as-ui); }
.mh-as .tile.in { opacity: 1; transform: none; }
.mh-as .tile svg.i { width: var(--r-30); height: var(--r-30); fill: none; stroke: var(--c-mh-as-idle); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-mh-as-ui); }
.mh-as .tile svg.i text { fill: var(--c-mh-as-idle); stroke: none; font-family: var(--font-figtree); font-weight: var(--fw-bold); transition: fill var(--dur-mh-as-ui); }
.mh-as .tile b { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--c-mh-muted); transition: color var(--dur-mh-as-ui); }
.mh-as .tile .ck { position: absolute; right: var(--sp-8); top: var(--sp-8); width: var(--mh-pt-r-panel); height: var(--mh-pt-r-panel); border-radius: 50%; background: var(--c-mh-gold); display: flex; align-items: center; justify-content: center;
transform: scale(0); transition: transform var(--dur-mh-as-ck) var(--ease-mh-as-ck); }
.mh-as .tile .ck svg { width: var(--sp-10); height: var(--sp-10); fill: none; stroke: var(--c-mh-on-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mh-as .tile.done svg.i { stroke: var(--c-mh-as-tile-done); }
.mh-as .tile.done svg.i text { fill: var(--c-mh-as-tile-done); }
.mh-as .tile.done b { color: var(--c-mh-as-tile-done); }
.mh-as .tile.done .ck { transform: scale(1); }
.mh-as .grid.focus .tile:not(.hit) { opacity: var(--op-mh-as-dim); }
.mh-as .grid.focus .tile.hit { background: var(--c-mh-gold); border-color: var(--c-mh-gold); }
.mh-as .grid.focus .tile.hit svg.i { stroke: var(--c-mh-on-primary); }
.mh-as .grid.focus .tile.hit b { color: var(--c-mh-on-primary); font-weight: var(--fw-semibold); }
.mh-as .grid.focus .tile.hit .ck { transform: scale(0); }
.mh-as .arrow { position: absolute; left: 0; top: 0; pointer-events: none; }
.mh-as .arrow .ln { stroke: var(--c-mh-gold); stroke-width: 3; stroke-linecap: butt; fill: none; stroke-dasharray: 48; stroke-dashoffset: 48; transition: stroke-dashoffset var(--dur-mh-as-arrow) ease; }
.mh-as .arrow .hd { fill: var(--c-mh-gold); opacity: 0; transition: opacity var(--dur-mh-as-head) ease; }
.mh-as .arrow.on .ln { stroke-dashoffset: 0; }
.mh-as .arrow.on .hd { opacity: 1; transition-delay: var(--dur-mh-as-ui); }
.mh-as .mh-as__stage.nt * { transition: none !important; }
.mh-as .card { position: absolute; left: var(--mh-pt-640px); top: var(--sp-140); width: var(--mh-pt-544px); height: var(--mh-pt-300px); border-radius: var(--mh-pt-r); background: var(--c-mh-as-panel); border: var(--bw-1) solid var(--c-mh-flow-line);
padding: var(--mh-pt-22px) var(--sp-24); opacity: 0; transform: translateY(var(--sp-10)); transition: opacity var(--dur-mh-as-fade) ease, transform var(--dur-mh-as-fade) ease, border-color var(--dur-mh-as-in); }
.mh-as .card.in { opacity: 1; transform: none; }
.mh-as .card.won { border-color: var(--c-mh-as-won); }
.mh-as .card .k { font-size: var(--fs-12); letter-spacing: var(--ls-mh-pt-wide); text-transform: uppercase; color: var(--c-mh-gold); font-weight: var(--fw-medium); }
.mh-as .blk { margin-top: var(--sp-20); }
.mh-as .blk .l { font-size: var(--fs-12); letter-spacing: var(--ls-mh-as-blk); text-transform: uppercase; color: var(--c-mh-as-idle); font-weight: var(--fw-medium); }
.mh-as .before .t { margin-top: var(--sp-6); font-size: var(--fs-20); font-weight: var(--fw-medium); color: var(--c-mh-as-before); }
.mh-as .after { opacity: 0; transform: translateY(var(--sp-8)); transition: opacity var(--dur-mh-as-after) ease, transform var(--dur-mh-as-after) ease; }
.mh-as .after.in { opacity: 1; transform: none; }
.mh-as .after .l { color: var(--c-mh-gold); }
.mh-as .after .row { display: flex; align-items: baseline; gap: var(--sp-12); margin-top: var(--sp-4); }
.mh-as .after .n { font-size: var(--fs-mh-as-58); line-height: var(--lh-tw-100); font-weight: var(--fw-semibold); letter-spacing: var(--ls-mh-pt-big); min-width: var(--sp-70); }
.mh-as .after .t { font-size: var(--fs-18); color: var(--c-mh-as-after); font-weight: var(--fw-medium); }
.mh-as .sep { height: var(--bw-1); background: var(--c-mh-flow-line); margin: var(--sp-24) 0 var(--sp-4); }
.mh-as .strip { display: flex; justify-content: space-between; margin-top: var(--sp-12); height: var(--sp-16); }
.mh-as .strip i { display: block; width: var(--sp-4); height: var(--sp-16); border-radius: var(--sp-2); background: var(--c-mh-as-tick); }
.mh-as .after .strip i { transition: background var(--dur-mh-as-tick); }
.mh-as .after .strip i.f { background: var(--c-mh-gold); }
.mh-as .also { position: absolute; top: var(--mh-pt-458px); height: var(--mh-pt-64px); border-radius: var(--r-16); background: var(--c-mh-as-panel); border: var(--bw-1) solid var(--c-mh-flow-line); display: flex; align-items: center;
gap: var(--sp-16); padding: 0 var(--sp-20); opacity: 0; transform: translateY(var(--sp-10)); transition: opacity var(--dur-mh-as-after) ease, transform var(--dur-mh-as-after) ease; }
.mh-as .also.in { opacity: 1; transform: none; }
.mh-as .a1 { left: var(--mh-pt-44px); width: var(--mh-pt-585px); }
.mh-as .a2 { left: var(--mh-pt-643px); width: var(--mh-pt-541px); }
.mh-as .also .ic { flex: none; width: var(--sp-40); height: var(--sp-40); border-radius: var(--r-12); border: var(--bw-1) solid var(--c-mh-as-ic-line); display: flex; align-items: center; justify-content: center; }
.mh-as .also .ic svg { width: var(--mh-pt-21px); height: var(--mh-pt-21px); fill: none; stroke: var(--c-mh-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-as .also b { font-size: var(--fs-mh-as-19); font-weight: var(--fw-semibold); }
.mh-as .also span { font-size: var(--fs-mh-as-15); color: var(--c-mh-muted); margin-left: var(--sp-8); }
/* pause control (addition to Figma): the diagram's Auto-play pill; hidden until keyboard focus, shown on hover */
.mh-as .autoctl { position: absolute; right: var(--sp-24); top: var(--mh-pt-22px); z-index: 2; display: flex; align-items: center; gap: var(--sp-8); height: var(--r-30); padding: 0 var(--sp-14); border-radius: var(--r-pill);
background: var(--c-mh-flow-pill-bg); border: var(--bw-1) solid var(--c-mh-flow-pill-line); color: var(--c-mh-muted); font: inherit; font-family: var(--font-figtree); font-size: var(--fs-12);
letter-spacing: var(--ls-mh-pt-ctl); cursor: pointer; opacity: 0; transition: opacity var(--dur-mh-pt-ui), color var(--dur-mh-pt-ui), border-color var(--dur-mh-pt-ui); }
.mh-as:hover .autoctl, .mh-as .autoctl:focus-visible { opacity: 1; }
.mh-as .autoctl:hover { color: var(--c-mh-fg); border-color: var(--c-mh-flow-pill-line-hover); }
.mh-as .autoctl:focus-visible { outline: var(--bw-2) solid var(--c-white); outline-offset: var(--bw-2); }
.mh-as .autoctl .d { width: var(--sp-8); height: var(--sp-8); border-radius: 50%; background: var(--c-mh-flow-pill-off); }
.mh-as .autoctl[aria-pressed="true"] .d { background: var(--c-mh-gold); box-shadow: 0 0 var(--sp-8) var(--c-mh-gold); }
.mh-as .autoctl[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mh-as *, .mh-as *::before, .mh-as *::after { transition: none !important; } }
/* ===== MindHYVE chunk 3c: S19 Outcome, S20 What I learned ===== */
/* before / after table (live text). Own stacking context: the two halves are a background, never on top. */
.mh-ba { position: relative; z-index: 0; isolation: isolate; width: var(--mh-ba-w); height: var(--mh-ba-h); max-width: calc(100vw - 2 * var(--page-margin)); align-self: center; flex: none;
padding: var(--mh-ba-pad); border-radius: var(--r-16); overflow: hidden;
background: linear-gradient(90deg, var(--c-mh-ba-before) 0 50%, var(--c-mh-ba-after) 50% 100%); }
.mh-ba__grid { display: grid; align-items: start; grid-template-columns: var(--mh-ba-col) var(--mh-ba-col); column-gap: var(--mh-ba-gap); }
.mh-ba__head { margin-bottom: var(--mh-ba-head-gap); }
.mh-ba__head p { font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-40); color: var(--c-white); }
.mh-ba__head p + p { color: var(--c-mh-on-primary); }
.mh-ba__rows { display: flex; flex-direction: column; gap: var(--mh-ba-rows-gap); margin: 0; padding: 0; list-style: none; }
.mh-ba__row { display: flex; flex-direction: column; gap: var(--mh-ba-row-gap); }
.mh-ba__label { padding-bottom: var(--bw-2); box-shadow: 0 var(--bw-1) 0 var(--c-mh-ba-line); font-weight: var(--fw-semibold); font-size: var(--fs-20); line-height: var(--lh-40); color: var(--c-mh-ba-label); }
.mh-ba__cell { font-size: var(--fs-20); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mh-ba__cell--after { color: var(--c-mh-on-primary); }
/* outcome cards (live HTML; bars, dots, ticks, figures in CSS / SVG) */
.mh-oc { align-self: flex-start; width: var(--mh-oc-w); max-width: calc(100vw - 2 * var(--page-margin)); display: grid; grid-template-columns: repeat(3, var(--mh-oc-card-w)); gap: var(--mh-oc-row-gap) var(--sp-24);
margin: 0; padding: 0; list-style: none; }
.mh-oc__card { position: relative; z-index: 0; isolation: isolate; height: var(--mh-oc-card-h); padding: var(--mh-oc-pad); display: flex; flex-direction: column; justify-content: space-between;
border-radius: var(--r-16); box-shadow: inset 0 0 0 var(--bw-1) var(--c-mh-card-line); }
.mh-oc__top { display: flex; flex-direction: column; gap: var(--sp-8); }
.mh-oc__label { font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-mh-oc-label); }
.mh-oc__n { font-weight: var(--fw-bold); font-size: var(--fs-mh-oc-n); line-height: var(--lh-auto); color: var(--c-white); }
.mh-oc__n small { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--c-grey-8e8e8e); }
.mh-oc__desc { font-weight: var(--fw-medium); font-size: var(--fs-14); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mh-oc__desc b { font-weight: var(--fw-bold); color: var(--c-white); }
.mh-oc__s { font-weight: var(--fw-medium); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-white); }
/* 1 · three brands -> one system */
.mh-oc__sys { position: relative; display: flex; flex-direction: column; gap: var(--sp-24); }
.mh-oc__chips { display: flex; gap: var(--sp-12); }
.mh-oc__chip { width: var(--mh-oc-chip-w); height: var(--mh-oc-chip-h); display: inline-flex; align-items: center; justify-content: center; gap: var(--mh-vm-chip-gap); border-radius: var(--mh-vm-chip-r);
background: var(--c-mh-chip-bg); box-shadow: inset 0 0 0 var(--mh-vm-chip-bw) var(--c-mh-chip-line); font-weight: var(--fw-bold); font-size: var(--fs-12); line-height: var(--lh-mh-oc-chip); color: var(--c-white); }
.mh-oc__chip i { width: var(--mh-vm-dot); height: var(--mh-vm-dot); border-radius: 50%; background: var(--c); }
.mh-oc__links { position: absolute; left: 0; right: 0; top: var(--mh-oc-chip-h); height: var(--sp-24); }
.mh-oc__links i { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1px); width: var(--bw-1); background: var(--c-mh-chip-line); } /* Figma lines at 38 / 129 / 221 */
.mh-oc__box { position: relative; height: var(--mh-oc-box-h); display: flex; align-items: center; justify-content: center; border-radius: var(--r-16); background: var(--c-mh-chip-bg);
font-weight: var(--fw-bold); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-mh-oc-label); }
.mh-oc__box .mh-dash rect { x: calc(var(--mh-oc-dash-bw) / 2); y: calc(var(--mh-oc-dash-bw) / 2); width: calc(100% - var(--mh-oc-dash-bw)); height: calc(100% - var(--mh-oc-dash-bw));
rx: calc((var(--mh-oc-box-h) - var(--mh-oc-dash-bw)) / 2); fill: none; stroke: var(--c-mh-oc-label); stroke-width: var(--mh-oc-dash-bw); stroke-dasharray: var(--sp-4); }
/* 2 · 3 brands x 2 modes x 3 sizes */
.mh-oc__modes { display: flex; flex-direction: column; gap: var(--sp-8); }
.mh-oc__mhead { display: flex; gap: var(--sp-16); padding-left: var(--mh-oc-grid-x); font-weight: var(--fw-medium); font-size: var(--fs-12); line-height: var(--lh-mh-oc-chip); color: var(--c-white); }
.mh-oc__mhead span { text-align: center; }
.mh-oc__mhead span:first-child { width: var(--mh-oc-light-w); } .mh-oc__mhead span:last-child { width: var(--mh-oc-dark-w); }
.mh-oc__mrow { display: grid; grid-template-columns: var(--mh-oc-grid-x) 1fr; align-items: center; height: var(--sp-14); }
.mh-oc__cells { display: flex; align-items: flex-end; gap: var(--sp-16); }
.mh-oc__cells i { width: var(--mh-oc-cell-w); height: var(--mh-oc-cell-h); border-radius: var(--r-12); background: var(--c); }
.mh-oc__cells i.dk { width: var(--mh-oc-cell-w-dark); background: var(--c-mh-oc-cell); box-shadow: inset 0 0 0 var(--bw-1) var(--c); }
/* 3 · variables */
.mh-oc__vars { display: flex; flex-direction: column; gap: var(--sp-10); }
.mh-oc__bar { display: flex; gap: var(--bw-1); height: var(--mh-oc-bar-h); border-radius: var(--r-16); overflow: hidden; }
.mh-oc__bar i { flex: var(--v) 1 0; min-width: 0; background: var(--c); } /* segments share the bar (minus the 1 px gaps) by value */
.mh-oc__legend { display: flex; flex-direction: column; gap: var(--sp-8); }
.mh-oc__lrow { display: flex; gap: var(--sp-4); }
.mh-oc__lrow + .mh-oc__lrow { gap: var(--sp-8); } /* Figma: row 1 items 4 apart, row 2 items 8 apart */
.mh-oc__li { display: flex; align-items: center; gap: var(--sp-8); }
.mh-oc__li::before { content: ""; width: var(--mh-oc-dot); height: var(--mh-oc-dot); border-radius: 50%; background: var(--c); }
.mh-oc__li span { display: flex; gap: var(--sp-6); font-weight: var(--fw-medium); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
.mh-oc__li b { font-weight: var(--fw-medium); color: var(--c-white); }
/* 4 · component sets */
.mh-oc__comps { display: flex; flex-direction: column; gap: var(--sp-8); }
.mh-oc__crow { display: flex; align-items: center; gap: var(--sp-12); }
.mh-oc__crow .mh-oc__s:first-child { width: var(--mh-oc-name-w); }
.mh-oc__track { position: relative; width: var(--mh-oc-track-w); height: var(--mh-oc-cell-h); border-radius: var(--r-12); background: var(--c-mh-oc-track); overflow: hidden; }
.mh-oc__track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: var(--r-12); background: var(--c-mh-gold); } /* value / largest */
.mh-oc__crow .mh-oc__s:last-child { width: var(--mh-oc-num-w); text-align: center; }
.mh-oc__more { font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-auto); color: var(--c-grey-8e8e8e); }
/* 5 · 67 ticks */
.mh-oc__ticks { display: flex; flex-direction: column; gap: var(--sp-6); }
.mh-oc__trow { display: flex; justify-content: space-between; }
.mh-oc__trow i { width: var(--mh-oc-tick-w); height: var(--mh-oc-tick-h); border-radius: var(--r-16); background: var(--c-mh-gold); }
/* 6 · six developers */
.mh-oc__figs { display: flex; gap: var(--sp-12); }
.mh-oc__figs svg { width: var(--mh-oc-fig); height: var(--mh-oc-fig); flex: none; }
.mh-goals6 { display: flex; flex-direction: column; gap: var(--sp-24); }
.mh-stack40 > .cs-block, .mh-stack40 > .mh-goals6 { width: 100%; }
/* S20 What I learned: 2 x 2 cards, 1152 wide over the 920 column */
.mh-learn { width: var(--mh-learn-w); max-width: calc(100vw - 2 * var(--page-margin)); display: grid; grid-template-columns: repeat(2, minmax(0, var(--mh-learn-card-w)));
justify-content: center; gap: var(--tk-row-gap) var(--tk-col-gap); margin: 0; padding: 0; list-style: none; align-self: center; }
.mh-learn__card { position: relative; z-index: 0; isolation: isolate; min-height: var(--mh-learn-card-h); padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-12);
border-radius: var(--r-16); background: var(--c-grey-1a1a1b); }
.mh-learn__head { display: flex; flex-direction: column; gap: var(--sp-12); }
.mh-learn__head svg { width: var(--sp-24); height: var(--sp-24); flex: none; color: var(--c-mh-arthur); } /* Figma 3146:203442: the accent #FDA400 */
.mh-learn__title { font-weight: var(--fw-bold); font-size: var(--tk-title-fs); line-height: var(--lh-auto); color: var(--c-white); }
.mh-learn__text { font-size: var(--tk-body-fs); line-height: var(--tk-body-lh); color: var(--c-grey-8e8e8e); }
/* =====================================================================
MINDHYVE — tablet + phone, R1 (base layout, title, meta, hero, text, videos, next project, footer).
>= 1190 unchanged. Same rules as Verdance: column = window - 2 x page margin.
===================================================================== */
@media (max-width: 1189.98px) {
.cs-page--mh { padding-top: var(--cs-top-tablet); gap: var(--cs-gap-tablet); --col: calc(100% - 2 * var(--page-margin)); }
.cs-page--mh .cs-label { position: static; width: auto; margin-bottom: calc(var(--sp-16) - var(--cs-gap-tablet)); font-size: var(--fs-r-body-24); }
.cs-page--mh .cs-title { width: min(var(--cs-title-w), var(--col)); font-size: var(--fs-r-hero); line-height: var(--lh-r-title); }
.cs-page--mh .mh-hero { max-width: var(--col); }
.cs-page--mh .cs-meta { width: var(--col); }
.cs-page--mh .cs-meta__row { flex-wrap: wrap; gap: var(--sp-24) var(--sp-32); }
.cs-page--mh .cs-meta__value { font-size: var(--fs-r-body-24); }
.cs-page--mh .cs-content { width: 100%; }
.cs-page--mh .cs-section { width: min(var(--cs-text-w), var(--col)); container-type: inline-size; }
.cs-page--mh :is(.cs-lead, .cs-p) { font-size: var(--fs-r-body-24); line-height: var(--lh-r-body); }
.cs-page--mh .cs-h2 { font-size: var(--fs-r-h2); line-height: var(--lh-r-h2); }
.cs-page--mh .mh-quote { width: 100%; max-width: 100%; font-size: var(--fs-r-mh-quote); }
.cs-page--mh .mh-video { max-width: 100%; }
.cs-page--mh .cs-nextproj__mock { width: 100%; }
/* hero chips: 44 px hit areas, visuals unchanged (40 tall inside the 48 group) */
.cs-page--mh .mh-seg button { position: relative; }
.cs-page--mh .mh-seg button::before { content: ""; position: absolute; inset: calc(var(--hit-pad) * -1) 0; }
}
/* hero, tablet only: below ~870 the 37 px label would touch the desktop rim (fixed height vs shrinking % gap);
the stage gets 24 px more height, positions stay in % (phone keeps its own layout) */
@media (min-width: 768px) and (max-width: 1189.98px) {
.cs-page--mh .mh-hero { container-type: inline-size; }
.cs-page--mh .mh-hero__stage { aspect-ratio: auto; height: calc(100cqw * var(--n-mh-stage-h) + var(--mh-tag-room-tablet)); }
}
@media (max-width: 767.98px) {
.cs-page--mh { padding-top: var(--cs-top-phone); gap: var(--cs-gap-phone); }
.cs-page--mh .cs-label { margin-bottom: calc(var(--sp-16) - var(--cs-gap-phone)); }
.cs-page--mh .cs-meta { padding: var(--cs-card-pad-phone); }
.cs-page--mh .cs-meta__row { flex-direction: column; }
}
/* =====================================================================
MINDHYVE — tablet + phone, R2 (text diagrams: S3/S4, S5/S7 panels, S9 cards + minis, S10). >= 1190 unchanged.
===================================================================== */
@media (max-width: 1189.98px) {
/* S3 / S4: image at most its Figma width, numbered gold markers where each arrow points, the callouts as a list below */
.cs-page--mh .mh-wide { width: var(--col); }
.cs-page--mh .mh-annot { width: 100%; max-width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.cs-page--mh .mh-annot__pic { position: relative; left: auto; width: calc(var(--iw) * 1px); max-width: 100%; }
.cs-page--mh :is(.mh-annot__arrows, .mh-callout) { display: none; }
.cs-page--mh .mh-annot__mk { position: absolute; left: clamp(calc(var(--mh-mk) / 2), var(--mx), calc(100% - var(--mh-mk) / 2)); top: var(--my);
width: var(--mh-mk); height: var(--mh-mk); translate: -50% -50%; display: grid; place-items: center; border-radius: 50%;
background: var(--c-mh-gold); box-shadow: 0 0 0 var(--bw-2) var(--c-mh-on-primary);
font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-tw-100); color: var(--c-mh-on-primary); }
.cs-page--mh .mh-annot__list { width: calc(var(--iw) * 1px); max-width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: mk;
display: flex; flex-direction: column; gap: var(--sp-12); }
.cs-page--mh .mh-annot__list li { counter-increment: mk; display: flex; align-items: flex-start; gap: var(--sp-12);
font-weight: var(--fw-bold); font-size: var(--fs-r-body-20); line-height: var(--lh-r-body); color: var(--c-white); }
.cs-page--mh .mh-annot__list li::before { content: counter(mk); flex: none; width: var(--mh-mk); height: var(--mh-mk); margin-top: calc((1lh - var(--mh-mk)) / 2);
display: grid; place-items: center; border-radius: 50%; background: var(--c-mh-gold); font-size: var(--fs-14); line-height: var(--lh-tw-100); color: var(--c-mh-on-primary); }
/* S5 / S7 comparison panels: stacked, chips wrap */
.cs-page--mh .mh-cmp { width: 100%; max-width: 100%; flex-direction: column; gap: var(--card-gap); }
.cs-page--mh .mh-wide > .mh-cmp { width: 100%; } /* .mh-wide is already the column */
.cs-page--mh .mh-panel { flex: none; width: 100%; height: auto; }
.cs-page--mh .mh-panel__in { width: auto; height: auto; }
/* S9 research cards: 2 x 2 (phone 1 column); the pill stays at the bottom */
.cs-page--mh .mh-rcards { width: 100%; max-width: 100%; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.cs-page--mh .mh-rcard { height: auto; min-height: var(--mh-rcard-h); gap: var(--sp-16); }
.cs-page--mh .mh-rcard__body { height: auto; }
.cs-page--mh .mh-pill { margin-top: auto; }
/* S9 mini diagrams: one column; chip labels at least 12 px (chips grow, the brand chip stays centred on its curves) */
.cs-page--mh .mh-minis { width: 100%; max-width: 100%; flex-direction: column; gap: var(--card-gap); }
.cs-page--mh .mh-mini { flex: none; width: 100%; height: auto; min-height: var(--mh-mini-h); padding: var(--sp-24) 0; }
.cs-page--mh { --fs-mh-mini-chip: var(--fs-12); --fs-mh-brand-chip: var(--fs-12); }
.cs-page--mh .mh-vm__chip { width: auto; min-width: var(--mh-vm-value-w); }
.cs-page--mh .mh-vm__chip--meaning { min-width: var(--mh-vm-meaning-w); }
.cs-page--mh .mh-brands__chip { width: auto; min-width: var(--mh-brand-chip-w); left: calc(var(--mh-brand-chip-x) + var(--mh-brand-chip-w) / 2); translate: -50% 0; white-space: nowrap; }
/* S10: scales with the column; tap opens the shared viewer */
.cs-page--mh .mh-diagram { max-width: 100%; }
}
@media (max-width: 767.98px) {
.cs-page--mh .mh-rcards { grid-template-columns: minmax(0, 1fr); }
.cs-page--mh .mh-panel { padding: var(--cs-card-pad-phone); }
}
/* =====================================================================
MINDHYVE — tablet + phone, R3 (S11 / S12 / S13 static images + viewer, S18 reflowed story). >= 1190 unchanged.
===================================================================== */
.mh-static { display: none; } /* >= 1190: the live components (the images are lazy, so never downloaded here) */
@media (max-width: 1189.98px) {
/* S11 / S12 / S13: the live default image, scaled to the column, own radius; tap opens the shared viewer */
.cs-page--mh :is(.mh-flow, .mh-fb, .mh-bw) { display: none; } /* the JS builds them only at >= 1190 */
.cs-page--mh .mh-static { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); }
.cs-page--mh .mh-hint { font-family: var(--font-figtree); font-size: var(--fs-14); line-height: var(--lh-auto); text-align: center; color: var(--c-grey-8e8e8e); }
/* S18 audit story, reflowed: steps, caption, ten tiles in 2 x 5, the result card, the two follow-ups */
.cs-page--mh .mh-as { width: 100%; max-width: 100%; aspect-ratio: auto; }
.cs-page--mh .mh-as .mh-as__stage { position: relative; width: 100%; height: auto; transform: none; display: flex; flex-direction: column; gap: var(--sp-20); padding: var(--sp-24); }
.cs-page--mh .mh-as :is(.steps, .cap, .grid, .card, .also) { position: static; }
.cs-page--mh .mh-as .steps { gap: var(--sp-8); }
.cs-page--mh .mh-as .sl { flex: 1 1 auto; min-width: var(--sp-8); max-width: var(--r-28); }
.cs-page--mh .mh-as .cap { font-size: var(--fs-r-h2); min-height: 2lh; }
.cs-page--mh .mh-as .grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--mh-pt-96px); }
.cs-page--mh .mh-as .arrow { display: none; }
.cs-page--mh .mh-as .card { width: 100%; height: auto; }
.cs-page--mh .mh-as .also { width: 100%; height: auto; min-height: var(--mh-pt-64px); padding: var(--sp-12) var(--sp-20); }
.cs-page--mh .mh-as .mh-as__stage { padding-top: calc(var(--sp-24) + var(--r-30) + var(--sp-16)); } /* room for the pause control, top right */
.cs-page--mh .mh-as .autoctl { right: var(--sp-24); top: var(--sp-24); opacity: 1; }
.cs-page--mh .mh-as .autoctl::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--tap)) / 2)) min(0px, calc((100% - var(--tap)) / 2)); }
}
@media (hover: none) { .mh-as .autoctl { opacity: 1; } } /* touch: the pause control is always visible */
@media (max-width: 767.98px) {
.cs-page--mh .mh-as .mh-as__stage { padding: calc(var(--cs-card-pad-phone) + var(--r-30) + var(--sp-16)) var(--cs-card-pad-phone) var(--cs-card-pad-phone); }
.cs-page--mh .mh-as .autoctl { right: var(--cs-card-pad-phone); top: var(--cs-card-pad-phone); }
.cs-page--mh .mh-as .cap { min-height: 3lh; }
.cs-page--mh .mh-as .strip i { width: var(--sp-2); } /* 67 ticks still read as ticks in a phone-wide card */
}
/* =====================================================================
MINDHYVE — tablet + phone, R4 (S19 table + Outcome cards, S20 cards). >= 1190 unchanged.
===================================================================== */
@media (max-width: 1189.98px) {
/* S19 Before / After: two columns while they fit (the 50 / 50 background still splits between them) */
.cs-page--mh .mh-ba { width: 100%; max-width: 100%; height: auto; }
.cs-page--mh .mh-ba__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-page--mh .mh-ba__head p { font-size: var(--fs-r-body-24); }
.cs-page--mh :is(.mh-ba__label, .mh-ba__cell) { font-size: var(--fs-r-body-20); }
/* Outcome cards: 2 columns; figures keep their Figma size (258 wide), bars stay proportional */
.cs-page--mh .mh-oc { width: 100%; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.cs-page--mh .mh-oc__card { height: auto; min-height: var(--mh-oc-card-h); gap: var(--sp-24); }
.cs-page--mh :is(.mh-oc__sys, .mh-oc__vars) { width: calc(var(--mh-oc-card-w) - 2 * var(--mh-oc-pad)); max-width: 100%; }
/* S20: 2 columns over the column width */
.cs-page--mh .mh-learn { width: 100%; max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.cs-page--mh .mh-learn__card { min-height: 0; }
.cs-page--mh .mh-learn__title { font-size: var(--fs-r-body-24); }
.cs-page--mh .mh-learn__text { font-size: var(--fs-r-body-20); }
}
@media (max-width: 767.98px) {
/* S19: each row = label, then a dark Before panel, then a gold After panel */
.cs-page--mh .mh-ba { padding: 0; border-radius: 0; overflow: visible; background: none; }
.cs-page--mh .mh-ba__head { display: none; }
.cs-page--mh .mh-ba__rows { gap: var(--sp-32); }
.cs-page--mh .mh-ba__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); }
.cs-page--mh .mh-ba__cell { padding: var(--cs-card-pad-phone); border-radius: var(--r-16); background: var(--c-mh-ba-before); }
.cs-page--mh .mh-ba__cell--after { background: var(--c-mh-ba-after); }
.cs-page--mh .mh-ba__cell::before { content: "Before" / ""; display: block; margin-bottom: var(--sp-8); font-weight: var(--fw-bold); color: var(--c-white); }
.cs-page--mh .mh-ba__cell--after::before { content: "After" / ""; color: var(--c-mh-on-primary); }
.cs-page--mh .mh-oc { grid-template-columns: minmax(0, 1fr); }
.cs-page--mh .mh-learn { grid-template-columns: minmax(0, 1fr); }
.cs-page--mh .mh-learn__card { padding: var(--cs-card-pad-phone); }
}
/* =====================================================================
MINDHYVE — tablet + phone, R5 (review fixes 2026-10-08). >= 1190 unchanged.
===================================================================== */
@media (max-width: 1189.98px) {
/* S3 / S4 lists: the circle centred on the FIRST line (the circle's own 1lh is its 14 px number, so use the item's line box) */
.cs-page--mh .mh-annot__list li::before { margin-top: calc((var(--fs-r-body-20) * var(--lh-r-body) - var(--mh-mk)) / 2); }
/* card lists hug their content: no leftover desktop heights */
.cs-page--mh :is(.mh-rcard, .mh-mini, .mh-oc__card) { min-height: 0; }
.cs-page--mh .mh-pill { margin-top: 0; } /* 16 below the text (card gap) */
.cs-page--mh .mh-oc__card { justify-content: flex-start; } /* 24 between the text and the figure (card gap) */
.cs-page--mh .mh-oc { align-items: start; } /* tablet rows: each card keeps its own height */
/* media corners: 16 on tablet (12 on phone below) — videos (and their posters), the S18 story, the S11–S13 stills */
.cs-page--mh :is(.mh-video, .mh-as, .mh-as .mh-as__stage, .mh-slides) { border-radius: var(--r-16); }
/* Outcome cards: every figure fills the card's inner width */
.cs-page--mh :is(.mh-oc__sys, .mh-oc__vars) { width: 100%; }
.cs-page--mh .mh-oc__chip { flex: 1 1 0; width: auto; }
.cs-page--mh .mh-oc__links i { margin-left: calc(var(--bw-1) / -2); } /* lines at the chip centres */
.cs-page--mh .mh-oc__links i:nth-child(1) { left: calc((100% - 2 * var(--sp-12)) / 6); }
.cs-page--mh .mh-oc__links i:nth-child(2) { left: 50%; }
.cs-page--mh .mh-oc__links i:nth-child(3) { left: calc(100% - (100% - 2 * var(--sp-12)) / 6); }
.cs-page--mh :is(.mh-oc__mhead, .mh-oc__mrow) { display: grid; grid-template-columns: var(--mh-oc-grid-x) repeat(6, minmax(0, 1fr)); gap: 0; padding-left: 0; }
.cs-page--mh .mh-oc__mhead span:first-child { grid-column: 2 / 5; width: auto; }
.cs-page--mh .mh-oc__mhead span:last-child { grid-column: 5 / 8; width: auto; }
.cs-page--mh .mh-oc__cells { display: contents; }
.cs-page--mh .mh-oc__cells i { justify-self: center; }
.cs-page--mh .mh-oc__track { flex: 1 1 auto; width: auto; }
.cs-page--mh .mh-oc__figs { justify-content: space-between; }
}
@media (max-width: 767.98px) {
.cs-page--mh :is(.mh-video, .mh-as, .mh-as .mh-as__stage, .mh-slides) { border-radius: var(--r-12); }
}
/* MINDHYVE < 1190: S11 / S12 / S13 slideshows (js/mindhyve-slides.js). The box keeps one ratio per show (all its
slides share one crop size), slides are stacked and cross-fade. */
@media (max-width: 1189.98px) {
.cs-page--mh .mh-s11-fig { width: 100%; } /* the centred figure would shrink to the 1228 box */
.cs-page--mh .mh-slides { position: relative; width: calc(var(--w) * 1px); max-width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; }
.cs-page--mh .mh-slides__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 0; opacity: 0; object-fit: contain;
transition: opacity var(--dur-mh-slide-fade) ease; }
.cs-page--mh .mh-slides__img.is-on { opacity: 1; }
.cs-page--mh .mh-slides__dots { display: flex; justify-content: center; gap: var(--sp-8); }
.cs-page--mh .mh-slides__dots i { width: var(--mh-slide-dot); height: var(--mh-slide-dot); border-radius: 50%; background: var(--c-mh-flow-pill-off); }
.cs-page--mh .mh-slides__dots i.is-on { background: var(--c-mh-gold); }
}
@media (prefers-reduced-motion: reduce) { .cs-page--mh .mh-slides__img { transition: none; } }
/* S12 slides are whole cards (images cropped to the card's outer edge): the box adds no corner of its own, and the
page-colour margin around the card is the box's padding (the slides are contained and centred inside it) */
@media (max-width: 1189.98px) {
.cs-page--mh .mh-slides.mh-slides--cards { border-radius: 0; } /* keyed on the box itself, so the viewer's copy gets it too */
.cs-page--mh .mh-slides--cards .mh-slides__img { inset: var(--sp-8); width: calc(100% - 2 * var(--sp-8)); height: calc(100% - 2 * var(--sp-8)); }
}
/* =====================================================================
PORTFOLIO FRAME BRAND (owner 2026-10-10; markup tools/gen/cs_frame.py, behaviour js/cs-frame.js).
Yellow only on the frame: top bar, reading progress, Next Project buttons + cursor pill, the yellow footer.
Case-study content keeps its own palette. Focus ring + selection: base.css (global, yellow).
===================================================================== */
/* A2 reading progress: 3 px line at the very top, above the top bar; a transform, so no layout shift */
.cs-progress { position: fixed; top: 0; left: 0; right: 0; height: var(--cs-progress-h); z-index: var(--z-progress); pointer-events: none; }
.cs-progress__bar { display: block; width: 100%; height: 100%; background: var(--c-brand); transform: scaleX(0); transform-origin: 0 50%; }
@media print { .cs-progress { display: none; } }
/* A1 header (owner 2026-10-10): dark full-width bar (.cs-nav, 85 px / 72 phone = --cs-nav-h); left the white UR. seal
(homepage seal SVG, ring spin = js/nav-seal.js), right the outlined "Next Project" button, sized for the bar */
.cs-nav { height: var(--cs-nav-h); }
.cs-seal { position: relative; display: block; flex: none; width: var(--nav-seal); height: var(--nav-seal); color: var(--c-brand-paper); }
.cs-seal svg { display: block; width: 100%; height: 100%; }
.cs-seal .seal-dot { fill: var(--c-brand); }
.cs-nav .btn.cs-nav__next { height: var(--cs-next-h); padding: 0 var(--sp-20); font-size: var(--fs-16); }
.cs-nav .btn.cs-nav__next svg { width: var(--icon-20); height: var(--icon-20); }
/* owner 2026-10-21 (round 2): on case studies the top bar's buttons are dark at rest and fill solid yellow with ink text on
hover or keyboard focus (never the translucent fill); Next Project keeps its 2 px lift */
.cs-nav .btn.cs-nav__next { color: var(--c-white); } /* white text at rest, like the Visitor wall pill beside it */
@media (hover: hover) {
.cs-nav .btn.cs-nav__next:hover { background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; }
}
.cs-nav .btn.cs-nav__next:focus-visible { background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; outline: var(--bw-2) solid var(--c-white); outline-offset: 3px; }
@media (max-width: 767.98px) {
.cs-seal { width: var(--nav-seal-phone); height: var(--nav-seal-phone); }
.cs-nav .btn.cs-nav__next { height: var(--tap); padding: 0 var(--sp-16); font-size: var(--fs-r-min); }
}
/* A4 Next Project: the yellow button (near-black bold text), lifts 2 px on hover; "Back to Homepage" unchanged */
.cs-nextproj__btns .btn, .cs-nextproj__btns .btn:hover, .cs-nextproj__btns .btn:focus-visible {
background: var(--c-brand); color: var(--c-on-brand); font-weight: var(--fw-bold); box-shadow: none; }
.cs-nextproj__btns .btn { transition: transform var(--dur-hover) var(--ease-out); }
.cs-nextproj__btns .btn:hover, .cs-nextproj__btns .btn:focus-visible { transform: translateY(-2px); }
/* "Back to Homepage": the SECONDARY button (dark pill; solid yellow with ink text on pointer hover / focus) */
.cs-textbtn { display: inline-flex; align-items: center; min-height: var(--btn-h); padding: 0 var(--btn-pad-x); border-radius: var(--r-24);
background: var(--c-btn-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border), var(--shadow-btn); text-shadow: none;
font-weight: var(--fw-medium); font-size: var(--btn-fs); color: var(--c-grey-e6e9f3);
transition: background-color var(--dur-btn) ease, box-shadow var(--dur-btn) ease, color var(--dur-btn) ease, transform var(--dur-btn) ease; }
@media (hover: hover) {
.cs-textbtn:hover, .cs-textbtn:focus-visible {
background: var(--c-brand); box-shadow: none; color: var(--c-on-brand); transform: translateY(-2px); } /* solid yellow, ink text (owner 2026-10-21) */
}
@media (max-width: 767.98px) { .cs-textbtn { min-height: 0; padding: var(--btn-pad-phone); font-size: var(--btn-fs-phone); } }
/* A5 page end: the homepage's yellow footer, full width under the case study */
.cs-endframe { width: 100%; max-width: var(--page-w); margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
.cs-nextproj__btns .btn, .cs-textbtn { transition: none; }
.cs-nextproj__btns .btn:hover, .cs-nextproj__btns .btn:focus-visible, .cs-textbtn:hover, .cs-textbtn:focus-visible { transform: none; }
}
/* header -> first line of the case study (the label on Verdance / MindHYVE, else the title): 64 px on desktop for all
5 (owner 2026-10-10); the label -> title spacing is kept. Tablet / phone: --cs-top-tablet / --cs-top-phone */
@media (min-width: 1190px) {
:is(.cs-page--verdance, .cs-page--mh) .cs-label { top: calc(var(--cs-nav-h) + var(--cs-title-gap)); }
:is(.cs-page--verdance, .cs-page--mh) { padding-top: calc(var(--cs-nav-h) + var(--cs-title-gap) + var(--sp-170) - var(--cs-label-y)); }
:is(.cs-page--editor, .cs-page--mta, .cs-page--tw) { padding-top: calc(var(--cs-nav-h) + var(--cs-title-gap)); }
}
/* v4.2 (owner 2026-10-14): the 40 px carousel arrows (Editor, Match the Answer, Team Workspace) get an invisible 44 x 44 tap area, the C1 method */
.ed-arrow { position: relative; }
.ed-arrow::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--tap)) / 2)); }
/* v4.3 (owner 2026-10-14): MindHYVE board controls get an invisible tap area (the C1 ::after method), up to 44 px, never over a
neighbour: as tall as 44 where nothing sits above or below; as wide as half the gap to the next control on each side.
Grids with no gap (the type rows, the colour tiles) keep their size: there is no room without overlapping. */
:is(.mh-seg button, .mh-fb .seg button, .mh-bw .brands button, .mh-bw .chip, .mh-fb .bar) { position: relative; }
:is(.mh-seg button, .mh-fb .seg button, .mh-bw .brands button, .mh-bw .chip, .mh-flow .autoctl, .mh-pt__stage .autoctl, .mh-as .autoctl, .autoctl)::after {
content: ""; position: absolute; top: min(0px, calc((100% - var(--tap)) / 2)); bottom: min(0px, calc((100% - var(--tap)) / 2)); left: 0; right: 0; }
.mh-seg button::after { left: calc(var(--mh-brand-btn-gap) / -2); right: calc(var(--mh-brand-btn-gap) / -2); }
.mh-bw .brands button::after { left: calc(var(--sp-6) / -2); right: calc(var(--sp-6) / -2); }
.mh-bw .chip::after { left: calc(var(--sp-5) / -2); right: calc(var(--sp-5) / -2); }
.mh-fb .bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--sp-9) / -2); right: calc(var(--sp-9) / -2); }
/* v4.5: the MindHYVE diagram labels (absolute) keep their bottom edge with the quiet label style: up by the height they gained */
:root body .mh-flow .lbl { margin-top: calc(var(--u) * var(--fs-mh-flow-lbl) * 1.2 - var(--lbl-q-fs) * var(--lbl-q-lh)); }
/* v4.5.2: the two diagram labels that are eyebrows keep their bottom edge at the eyebrow size */
:root body .mh-flow .lbl:not(.c) { margin-top: calc(var(--u) * var(--fs-mh-flow-lbl) * 1.2 - var(--eyebrow-fs) * var(--eyebrow-lh)); }
/* ===== MTA pain point cards with drawn mini screens (owner 2026-10-18; reference ~/Downloads/mta-pain-points/
mta-pain-points-reference.html). 2 x 2 above 900 px, one column at 900 and below; the grid spans today's row. Each card:
a teal frame with a light mini screen (HTML + inline SVG, aria-hidden, with two tags), then the heading and real list
items. Hover (pointer devices): lift 3 px, yellow border; card 02 draws its arrows and nudges the cursor, card 04 switches
the preview off and shifts the panes. Reduced motion and touch: static. */
.mta-pp { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mta-pp-gap); }
.mta-pp__card { background: var(--c-goal-bg); border: var(--bw-1) solid var(--mta-pp-line); border-radius: var(--mta-pp-r); overflow: hidden; display: flex; flex-direction: column; min-width: 0;
transition: border-color 0.35s, transform 0.35s var(--mta-pp-ease); }
.mta-pp__vis { height: var(--mta-pp-vis-h); background: var(--mta-pp-frame); position: relative; overflow: hidden; display: grid; place-items: center; }
.mta-pp__vis::before { content: ""; position: absolute; inset: 0;
background: radial-gradient(100% 120% at 50% -10%, var(--mta-pp-glow), transparent 62%), radial-gradient(60% 60% at 100% 100%, var(--mta-pp-shade), transparent 70%); }
.mta-pp .ui { position: relative; width: var(--mta-pp-ui-w); background: var(--mta-pp-ui); border-radius: 12px; box-shadow: var(--mta-pp-ui-shadow); color: var(--mta-pp-ui-text);
font-family: var(--font-figtree); font-size: 11px; line-height: normal; overflow: hidden; text-align: left; }
.mta-pp .ui .tb { height: 26px; background: var(--mta-pp-ui-bar); border-bottom: var(--bw-1) solid var(--mta-pp-ui-line); display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.mta-pp .ui .tb i { width: 8px; height: 8px; border-radius: 50%; background: var(--mta-pp-ui-dot); }
.mta-pp .ui .tb span { margin-left: 8px; font-size: 10px; font-weight: var(--fw-semibold); color: var(--mta-pp-ui-muted); }
.mta-pp .ui .in { padding: 12px; }
.mta-pp .field { background: var(--mta-pp-ui-field); border: var(--bw-1) solid var(--mta-pp-ui-line); border-radius: 7px; padding: 7px 9px; line-height: 1.4; position: relative; }
.mta-pp .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--mta-pp-ui-code); }
.mta-pp .tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.mta-pp .tabs b { font-size: 10px; font-weight: var(--fw-semibold); padding: 4px 9px; border-radius: 6px; color: var(--mta-pp-ui-muted); background: var(--mta-pp-ui-bar); }
.mta-pp .tabs b.on { background: var(--mta-pp-ui-tint); color: var(--mta-pp-ui-tint-ink); }
.mta-pp .tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; background: var(--c-on-brand); color: var(--c-brand-paper);
font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--mta-pp-tag-fs); line-height: normal; padding: var(--mta-pp-tag-pad); border-radius: 999px;
box-shadow: var(--mta-pp-tag-shadow); white-space: nowrap; transition: transform 0.4s var(--mta-pp-ease); }
.mta-pp .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); box-shadow: var(--mta-pp-dot-ring); }
.mta-pp .tag--tr { right: 5%; top: 20px; } .mta-pp .tag--tl { left: 5%; top: 20px; }
.mta-pp .tag--bl { left: 5%; bottom: 18px; } .mta-pp .tag--br { right: 5%; bottom: 18px; }
.mta-pp .hl { outline: 1.6px solid var(--c-brand); outline-offset: 2px; box-shadow: var(--mta-pp-hl-ring); }
/* card body */
.mta-pp__body { padding: var(--mta-pp-pad); }
.mta-pp__hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.mta-pp__n { font-family: var(--font-figtree); font-weight: var(--fw-extrabold); color: var(--c-brand); font-size: var(--mta-pp-n-fs); }
.mta-pp__h { margin: 0; font-family: var(--font-figtree); font-size: var(--mta-pp-h-fs); font-weight: var(--fw-bold); line-height: 1.25; color: var(--c-white); }
.mta-pp__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.mta-pp__list li { display: grid; grid-template-columns: 10px 1fr; gap: 12px; font-family: var(--font-figtree); font-size: var(--mta-pp-li-fs); color: var(--c-grey-afafaf); line-height: var(--mta-pp-li-lh); }
.mta-pp__list li::before { content: ""; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: var(--mta-pp-teal); }
.mta-pp__list li b { color: var(--c-white); font-weight: var(--fw-semibold); }
/* 01: question and answer */
.mta-pp .qa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mta-pp .qa-row .field { min-height: 40px; color: var(--mta-pp-ui-code); }
.mta-pp .qa-row .field small { display: block; height: 5px; width: 70%; border-radius: 3px; background: var(--mta-pp-ui-skel); margin-top: 5px; }
.mta-pp .qmark { position: absolute; top: -8px; left: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand);
font-family: var(--font-figtree); font-weight: var(--fw-extrabold); font-size: 10px; display: grid; place-items: center; }
/* 02: arrows */
/* follow-up (owner 2026-10-18): one grid, four equal rows; question and answer boxes wrap to at most 2 lines (same size) and
share a row, so the arrows meet the box centres (1/8, 3/8, 5/8, 7/8 of the height); phones keep the one-line ellipsis */
.mta-pp .mat { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); grid-template-rows: repeat(4, 1fr); align-items: stretch; }
.mta-pp .mat .col { display: contents; }
.mta-pp .col div { grid-column: 1; margin: calc(var(--mta-pp-mat-gap) / 2) 0; display: flex; align-items: center; background: var(--mta-pp-ui-field); border: var(--bw-1) solid var(--mta-pp-ui-line); border-radius: 7px; padding: 6px 8px; font-size: 10px; line-height: 1.3;
color: var(--mta-pp-ui-code); min-width: 0; overflow: hidden; }
.mta-pp .col div > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mta-pp .col.r div { grid-column: 3; }
.mta-pp .col div:nth-child(1) { grid-row: 1; } .mta-pp .col div:nth-child(2) { grid-row: 2; } .mta-pp .col div:nth-child(3) { grid-row: 3; } .mta-pp .col div:nth-child(4) { grid-row: 4; }
.mta-pp .col.r div { gap: 6px; }
.mta-pp .col.r div em { font-style: normal; font-weight: var(--fw-bold); font-size: 9px; color: var(--mta-pp-ui-tint-ink); background: var(--mta-pp-ui-tint); border-radius: 4px; padding: 1px 5px; }
.mta-pp .mat svg { grid-column: 2; grid-row: 1 / 5; width: 100%; height: 100%; display: block; }
.mta-pp .mat path { stroke: var(--mta-pp-teal); stroke-width: 1.6; fill: none; stroke-dasharray: 120; stroke-dashoffset: 0; }
.mta-pp .nodrag { position: absolute; z-index: 3; width: 30px; height: 30px; right: 15%; top: 44%; }
/* 03: explanation */
.mta-pp .exp .lab { font-weight: var(--fw-bold); font-size: 11px; margin-bottom: 6px; }
.mta-pp .exp .box { height: 34px; overflow: hidden; font-size: 11px; line-height: 1.5; color: var(--mta-pp-ui-code); }
.mta-pp .exp .box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(transparent, var(--mta-pp-ui-field)); }
.mta-pp .typo { text-decoration: underline wavy var(--mta-pp-red); text-decoration-thickness: 1.2px; text-underline-offset: 2px; }
.mta-pp .sbar { position: absolute; right: 3px; top: 4px; width: 3px; height: 12px; border-radius: 2px; background: var(--mta-pp-ui-dash); }
.mta-pp .ghost { margin-top: 8px; border: 1.5px dashed var(--mta-pp-ui-dash); border-radius: 7px; height: 62px; display: grid; place-items: center; color: var(--mta-pp-ui-muted); font-size: 10px; }
/* 04: preview */
.mta-pp .pv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mta-pp .pv .pane { border: var(--bw-1) solid var(--mta-pp-ui-line); border-radius: 8px; background: var(--mta-pp-ui-field); padding: 8px; }
.mta-pp .pv .pane h5 { margin: 0 0 6px; font-size: 10px; color: var(--mta-pp-ui-muted); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.mta-pp .pv .ln { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.mta-pp .pv .ln b { width: 12px; height: 12px; border-radius: 3px; background: var(--mta-pp-ui-tint); flex: none; }
.mta-pp .pv .ln i { display: block; height: 5px; border-radius: 3px; background: var(--mta-pp-ui-skel); }
.mta-pp .pv .ln:nth-child(2) i { width: 70%; } .mta-pp .pv .ln:nth-child(3) i { width: 55%; } .mta-pp .pv .ln:nth-child(4) i { width: 64%; }
.mta-pp .tgl { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--mta-pp-ui-muted); margin-bottom: 8px; }
.mta-pp .tgl span { width: 24px; height: 13px; border-radius: 7px; background: var(--mta-pp-teal); position: relative; transition: background 0.3s; }
.mta-pp .tgl span::after { content: ""; position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--mta-pp-ui-field); transition: right 0.3s; }
.mta-pp .dup { outline: 1.6px dashed var(--mta-pp-red); outline-offset: 3px; }
/* hover and motion: pointer devices only (a tap leaves nothing stuck on) */
@media (hover: hover) and (pointer: fine) {
.mta-pp__card:hover { border-color: var(--mta-pp-line-hover); transform: translateY(-3px); }
.mta-pp__card:hover .tag { transform: translateY(-2px); }
.mta-pp__card:hover .mat path { animation: mta-pp-draw 1.6s ease both; }
.mta-pp__card:hover .mat path:nth-child(2) { animation-delay: 0.15s; } .mta-pp__card:hover .mat path:nth-child(3) { animation-delay: 0.3s; } .mta-pp__card:hover .mat path:nth-child(4) { animation-delay: 0.45s; }
.mta-pp__card:hover .nodrag { animation: mta-pp-nudge 0.9s ease-in-out infinite; }
.mta-pp__card:hover .tgl span { background: var(--mta-pp-ui-dash); } .mta-pp__card:hover .tgl span::after { right: 13px; }
.mta-pp__card:hover .pv { animation: mta-pp-shift 1.4s ease-in-out infinite alternate; }
}
@keyframes mta-pp-draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes mta-pp-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -3px); } }
@keyframes mta-pp-shift { from { transform: translateX(0); } to { transform: translateX(-10px); } }
@media (max-width: 900px) { .mta-pp { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
.mta-pp .mat { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); }
.mta-pp .col div > span { display: block; white-space: nowrap; text-overflow: ellipsis; } /* phones: one line with an ellipsis */
.mta-pp__vis { height: var(--mta-pp-vis-h-phone); } .mta-pp .ui { width: var(--mta-pp-ui-w-phone); }
.mta-pp .tag { font-size: var(--mta-pp-tag-fs-phone); padding: var(--mta-pp-tag-pad-phone); }
}
@media (prefers-reduced-motion: reduce) { .mta-pp *, .mta-pp__card { animation: none !important; transition: none !important; } }
/* Folds covers fix 1 (owner 2026-10-18): the Next project mock is a link to the next case study (display: contents, so the
layout is unchanged) with the Work cards' Read disc (pointer devices) and hover (js/folds.js) */
.cs-nextproj__link { display: contents; }
.cs-read-cur { position: fixed; left: 0; top: 0; z-index: var(--z-pg-cur); width: var(--pg-cur-view); height: var(--pg-cur-view); margin: calc(var(--pg-cur-view) / -2) 0 0 calc(var(--pg-cur-view) / -2);
border-radius: 50%; background: var(--c-brand); pointer-events: none; display: grid; place-items: center; opacity: 0; will-change: transform; transition: opacity 0.2s; }
.cs-read-cur span { font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: 12px; line-height: 1; color: var(--c-on-brand); white-space: nowrap; }
.cs-read-cur.is-on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cs-nextproj__link img { cursor: pointer; } }
@media (hover: none), (pointer: coarse) { .cs-read-cur { display: none; } }
/* round 4 (owner 2026-10-18): Figma layers over the Folds canvas (js/folds.js) */
.folds-pic { display: contents; }
img.folds-ly-img { object-fit: cover; }
.folds-cv { z-index: 0; }
/* round 5: the next-* layers are 860 x 488 at 2x and fill the box exactly; the MTA box drops its baked-stroke offsets for them */
.mta-next__mock.folds-ly-img { width: min(var(--cs-mock-w), 100%) !important; height: auto; margin: 0; border-radius: var(--r-10); }
/* Editor hackathon photo: Uzair's hand-drawn "Me" arrow (white, transparent), an image layer that scales with the photo */
.ed-photo img.ed-photo__arrow { position: absolute; left: var(--ed-photo-arrow-x); top: var(--ed-photo-arrow-y); width: var(--ed-photo-arrow-w); height: auto; border-radius: 0; pointer-events: none; }
/* framed section images (owner 2026-10-18): a taller export fits inside its frame (contain, centred, never cropped); the folds fill around it */
/* ===== Case study refresh (owner 2026-10-19): Editor Experience and Match the Answer ===== */
/* eyebrows like MindHYVE / Verdance, in the project colour */
.cs-label--ed { left: 0; right: 0; width: auto; color: var(--c-ed-eyebrow); }
.cs-label--mta { left: 0; right: 0; width: auto; color: var(--c-mta-eyebrow); }
/* goals as MindHYVE lead-in lines; plain white subheads */
.cs-goals { display: flex; flex-direction: column; gap: var(--sp-8); width: 100%; }
.cs-goals .cs-p b.mh-sb { font-weight: var(--fw-semibold); color: var(--c-white); }
.cs-sub { align-self: flex-start; margin: 0; font-size: var(--fs-r-body-24); line-height: var(--lh-hero); color: var(--c-white); }
/* results on the Folds panel */
.cs-results-wrap { width: 100%; }
.cs-results { position: relative; isolation: isolate; overflow: hidden; width: 100%; border-radius: var(--r-18);
padding: var(--res-pad-top) var(--res-pad-x) var(--res-pad-x); background: var(--c-ed-deep); }
.cs-results[data-folds-panel="#407B7E"] { background: var(--c-mta-deep); }
.cs-results > .folds-gd, .cs-results > canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cs-results::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--c-res-scrim); pointer-events: none; }
.cs-results[data-folds-panel="#407B7E"]::after { background: var(--c-res-scrim-mta); }
.cs-results__list { position: relative; z-index: 1; display: grid; gap: var(--sp-40); margin: 0; padding: 0; list-style: none; }
.cs-results__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-results__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-results__item { display: flex; flex-direction: column; gap: var(--sp-12); }
.cs-results__num { margin: 0; font-weight: var(--fw-black); font-style: italic; font-size: var(--fs-104); line-height: 1; letter-spacing: -0.02em; color: var(--c-white); font-variant-numeric: tabular-nums; }
.cs-results__title { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-150-8); color: var(--c-white); }
.cs-results__text { margin: 0; font-size: var(--fs-16); line-height: var(--lh-150-8); color: var(--c-res-text); }
@media (max-width: 1189px) { .cs-results__list--4, .cs-results__list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
.cs-results { padding: var(--sp-48) var(--sp-24) var(--sp-32); }
.cs-results__list--4, .cs-results__list--3 { grid-template-columns: 1fr; gap: var(--sp-32); }
.cs-results__num { font-size: var(--fs-64); }
}
/* Editor before / after panel */
.cs-ba { width: 100%; display: flex; flex-direction: column; gap: var(--sp-24); }
.cs-ba__title { margin: 0; }
.cs-ba__cols { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-18); overflow: hidden; }
.cs-ba__col { padding: var(--sp-40) var(--sp-40) var(--sp-32); background: var(--c-ba-dark); }
.cs-ba__col--now { background: var(--c-ed-frame); }
.cs-ba__head { margin: 0 0 var(--sp-16); font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-150-8); color: var(--c-white); }
.cs-ba__list { margin: 0; padding: 0; list-style: none; }
.cs-ba__list li { padding: var(--sp-16) 0; border-top: 1px solid var(--c-ba-line); font-size: var(--fs-r-body-20); line-height: var(--lh-150-8); color: var(--c-grey-8e8e8e); }
.cs-ba__col--now .cs-ba__list li { border-top-color: var(--c-ba-line-now); color: var(--c-white); }
@media (max-width: 767px) { .cs-ba__cols { grid-template-columns: 1fr; } .cs-ba__col { padding: var(--sp-24); } }
/* MTA survey bar chart (Verdance chart style) */
.cs-surveychart { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); }
.cs-surveychart .cs-chart { width: 100%; height: auto; border-radius: var(--r-18); }
.cs-bars__bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.cs-bars__val { opacity: 0; transition: opacity .4s ease .7s; }
.cs-bars.is-in .cs-bars__bar { transform: none; }
.cs-bars.is-in .cs-bars__val { opacity: 1; }
.cs-bars .cs-bars__bar:nth-of-type(2n) { transition-delay: .12s; }
/* MTA ribbon */
.cs-ribbon-wrap { width: 100%; display: flex; flex-direction: column; gap: var(--sp-32); }
.cs-ribbon { position: relative; width: 100vw; max-width: 100vw; align-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.cs-ribbon__rows { width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-8);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cs-ribbon__row { display: flex; width: max-content; }
.cs-ribbon__track { display: flex; flex: none; align-items: center; animation: cs-ribbon-l var(--ribbon-speed) linear infinite; }
.cs-ribbon__row--rev .cs-ribbon__track { animation-name: cs-ribbon-r; }
@keyframes cs-ribbon-l { to { transform: translateX(-50%); } }
@keyframes cs-ribbon-r { from { transform: translateX(-50%); } to { transform: none; } }
.cs-ribbon__w { flex: none; white-space: nowrap;
font-weight: var(--fw-black); font-style: italic; font-size: var(--fs-52); line-height: 1.2; color: var(--c-white); }
.cs-ribbon__w--grey { color: var(--c-ribbon-grey); }
.cs-ribbon__w--teal { color: var(--c-ribbon-teal); }
.cs-ribbon__star { width: var(--sp-24); height: var(--sp-24); flex: none; margin: 0 var(--sp-24); color: var(--c-brand); }
.cs-ribbon:hover .cs-ribbon__track { animation-play-state: paused; }
.cs-ribbon__g { display: inline-flex; align-items: center; flex: none; }
@media (max-width: 767px) { .cs-ribbon__w { font-size: var(--fs-34); } .cs-ribbon__star { width: var(--sp-16); height: var(--sp-16); margin: 0 var(--sp-16); } }
@media (prefers-reduced-motion: reduce) {
.cs-bars__bar, .cs-bars__val { transform: none; opacity: 1; transition: none; }
/* one still, wrapped row; each ✦ sits before its word and the row clips the first one on every line, so no line starts or ends with a ✦ */
.cs-ribbon__rows { -webkit-mask-image: none; mask-image: none; padding: 0 var(--page-margin); }
.cs-ribbon__row--rev, .cs-ribbon__track > :nth-child(n+9) { display: none; }
.cs-ribbon__row { width: 100%; overflow: hidden; }
.cs-ribbon__track { animation: none; flex-wrap: wrap; justify-content: flex-start; row-gap: var(--sp-8); flex: 1; margin-left: calc(-3 * var(--sp-24)); }
.cs-ribbon__g .cs-ribbon__star { order: -1; }
}
/* captions below images and clean frames (Verdance radius + hairline) */
.cs-figcap { margin-top: var(--sp-12); }
.cs-figcap__sub { display: block; margin-top: var(--sp-8); font-weight: var(--fw-regular); text-transform: none; font-size: var(--fs-14); color: var(--c-grey-8e8e8e); }
.cs-page--mta .mta-comps img, .cs-page--mta .mta-wires img, .cs-page--mta .mta-ut__row img, .cs-page--editor .ed-photo {
box-shadow: 0 0 0 1px var(--c-hairline) !important; border: 0 !important; border-radius: var(--r-16); }
/* ===== Case study refresh part 2 (owner 2026-10-19) ===== */
/* A1: the results panel says what it shows */
.cs-results__head { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--sp-24); row-gap: var(--sp-8);
padding-bottom: var(--sp-16); margin: calc(var(--sp-24) - var(--res-pad-top)) 0 var(--sp-40); border-bottom: 1px solid var(--c-res-head-line); }
.cs-results__kicker, .cs-results__how { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: var(--lh-auto); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-res-head); }
.cs-results__kicker { display: inline-flex; align-items: center; gap: var(--sp-8); }
.cs-results__star { width: var(--sp-12); height: var(--sp-12); flex: none; color: var(--c-brand); }
@media (max-width: 767px) { .cs-results__head { flex-direction: column; margin-top: calc(var(--sp-24) - var(--sp-48)); margin-bottom: var(--sp-32); } }
/* item 0.1: image-card text gets the pain point card padding (--mta-pp-pad) */
:is(.cs-page--editor, .cs-page--mta) .ed-card__body { padding: var(--mta-pp-pad); }
/* A3: pain point visuals on teal Folds; the mini screens and labels stay on top */
.mta-pp__vis > :not(.folds-panel-g) { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .cs-ribbon__g .cs-ribbon__star { order: -1; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .cs-ribbon__track { margin-left: calc(-3 * var(--sp-16)); } }
/* Team Workspace outcomes (owner 2026-10-19): the results panel at the board width, deep TW blue */
.cs-page--tw .cs-results-wrap { width: calc(var(--tw-board) * 1px); max-width: calc(100% - 2 * var(--page-margin)); }
.cs-results--tw { background: var(--c-tw-deep); }
.cs-results--tw::after { background: var(--c-res-scrim-tw); }
.cs-results__unit { margin-left: 0.12em; font-size: 0.32em; font-weight: var(--fw-bold); font-style: normal; letter-spacing: 0; }
.cs-label--tw { left: 0; right: 0; width: auto; color: var(--c-tw-eyebrow); }
.cs-leadins { width: 100%; display: flex; flex-direction: column; gap: var(--sp-8); }
.cs-leadins b { color: var(--c-white); }
.cs-results--tw .cs-results__num { font-size: clamp(var(--fs-64), 6vw, var(--fs-88)); }
/* A2: 40 px above and below the results panel (MindHYVE's paragraph-to-figure gap, mh-s11-fig / mh-video); the offsets cancel each page's own section gap */
@media (min-width: 1190px) {
.cs-page--editor .cs-results-wrap { margin-top: calc(var(--sp-40) - var(--sp-80)); margin-bottom: calc(var(--sp-40) - var(--sp-80)); }
.cs-page--mta .cs-results-wrap { margin-top: calc(var(--sp-40) - var(--sp-80)); margin-bottom: calc(var(--sp-40) - var(--sp-80)); }
}
@media (max-width: 1189px) { :is(.cs-page--editor, .cs-page--mta) .cs-results-wrap { margin-top: var(--res-gap-adj-t, 0px); margin-bottom: var(--res-gap-adj-b, 0px); } }
.cs-page--tw .cs-results-wrap { margin-top: calc(var(--sp-40) - 60px); margin-bottom: calc(var(--sp-40) - 60px); }
@media (min-width: 768px) and (max-width: 1189px) { .cs-page--editor { --res-gap-adj-t: -32px; --res-gap-adj-b: -32px; } .cs-page--mta { --res-gap-adj-t: calc(-1 * var(--sp-40)); --res-gap-adj-b: -32px; } }
@media (max-width: 767px) { .cs-page--editor { --res-gap-adj-t: calc(-1 * var(--sp-16)); --res-gap-adj-b: calc(-1 * var(--sp-16)); } .cs-page--mta { --res-gap-adj-t: calc(-1 * var(--sp-40)); --res-gap-adj-b: calc(-1 * var(--sp-16)); } }
p + .cs-leadins, .cs-leadins + p { margin-top: var(--sp-8); }
/* results: figure, title and description rows shared across each panel row (subgrid), so the descriptions always start level (owner 2026-10-19) */
.cs-results__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--sp-12); align-content: start; }
.cs-results__num { align-self: end; }
/* round 4 (owner 2026-10-19): phones get one continuous scrim over the whole results panel, a vertical gradient in the project colour (no shape follows the text) */
@media (max-width: 767.98px) {
.cs-results::after { background: var(--c-res-scrim-ph-ed); }
.cs-results[data-folds-panel="#407B7E"]::after { background: var(--c-res-scrim-ph-mta); }
.cs-results--tw::after { background: var(--c-res-scrim-ph-tw); }
/* Editor before / after: Verdance's phone comparison styles (cell padding, uppercase card labels, card colours, 12 px gap); each list stays its own group */
.cs-ba__cols { grid-template-columns: minmax(0, 1fr); gap: var(--table-card-gap); border-radius: 0; overflow: visible; }
.cs-ba__col { padding: var(--table-cell-pad); background: var(--c-card); }
.cs-ba__col--now { background: var(--c-ed-frame); }
.cs-ba__head { margin: 0 0 var(--sp-4); font-weight: var(--fw-semibold); font-size: var(--fs-12); line-height: var(--lh-auto); letter-spacing: var(--ls-card-label); text-transform: uppercase; color: var(--c-strike); }
.cs-ba__col--now .cs-ba__head { color: var(--c-ed-label-now); }
.cs-ba__list li, .cs-ba__col--now .cs-ba__list li { padding: 0; border-top: 0; font-size: var(--fs-r-body-20); line-height: var(--lh-r-body); }
.cs-ba__list li { color: var(--c-strike); }
}
.cs-sidenav.is-cut { opacity: 0 !important; visibility: hidden !important; transition: none !important; } /* a fling reaches a full-width piece within a frame */
/* eyebrow in the normal flow above the title (owner 2026-10-19): Editor, MTA and Team Workspace follow MindHYVE / Verdance exactly */
@media (min-width: 1190px) {
:is(.cs-page--editor, .cs-page--mta, .cs-page--tw) .cs-label { top: calc(var(--cs-nav-h) + var(--cs-title-gap)); }
:is(.cs-page--editor, .cs-page--mta, .cs-page--tw) { padding-top: calc(var(--cs-nav-h) + var(--cs-title-gap) + var(--sp-170) - var(--cs-label-y)); }
}
@media (max-width: 1189.98px) {
:is(.cs-page--editor, .cs-page--mta, .cs-page--tw) .cs-label { position: static; width: auto; margin-bottom: calc(var(--sp-16) - var(--cs-gap-tablet)); font-size: var(--fs-r-body-24); }
}
@media (max-width: 767.98px) {
:is(.cs-page--editor, .cs-page--mta, .cs-page--tw) .cs-label { margin-bottom: calc(var(--sp-16) - var(--cs-gap-phone)); }
}
@media (max-width: 767.98px) { .cs-ba__cols { gap: 0; } } /* one unit like a Verdance phone pair: dark on top, blue directly below, square corners (owner 2026-10-19) */
/* MTA survey chart on phones (owner 2026-10-19): HTML rows instead of the scaled SVG; one shared 0 to 100 % scale (every track
has the same width: the value column is fixed), the desktop colours; the hidden table stays for screen readers */
.cs-pbars { display: none; }
@media (max-width: 767.98px) {
.cs-surveychart .cs-chart { display: none; }
.cs-pbars { display: flex; flex-direction: column; gap: var(--sp-24); padding: var(--sp-24) var(--sp-16); border-radius: var(--r-18); background: var(--c-chart-bg); }
.cs-pbars__title { margin: 0; font-size: var(--fs-r-body-20); line-height: var(--lh-150-8); color: var(--c-white); }
.cs-pbars__key { display: flex; gap: var(--sp-16); margin: 0; font-family: var(--font-inter); font-size: var(--fs-14); line-height: 1.3; color: var(--c-chart-val-before); }
.cs-pbars__k { display: inline-flex; align-items: center; gap: var(--sp-8); }
.cs-pbars__k::before { content: ""; width: var(--sp-12); height: var(--sp-12); border-radius: 3px; background: var(--c-bar-before); }
.cs-pbars__k--a::before { background: var(--c-bar-after); }
.cs-pbars__m { display: flex; flex-direction: column; gap: var(--sp-8); }
.cs-pbars__name { margin: 0; font-size: var(--fs-16); line-height: 1.4; color: var(--c-white); }
.cs-pbars__row { display: grid; grid-template-columns: minmax(0, 1fr) var(--pbars-val-w); align-items: center; column-gap: var(--sp-8); }
.cs-pbars__track { display: block; height: var(--sp-16); }
.cs-pbars__bar { display: block; width: var(--v); height: 100%; border-radius: 3px; background: var(--c-bar-after); transform-origin: left center; transform: scaleX(0); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.cs-pbars__bar--b { background: var(--c-bar-before); }
.cs-bars.is-in .cs-pbars__bar { transform: none; }
.cs-pbars__val { font-family: var(--font-inter); font-size: var(--fs-14); line-height: 1.3; color: var(--c-white); white-space: nowrap; }
.cs-pbars__val--b { color: var(--c-chart-val-before); }
.cs-pbars__gain { margin-left: var(--sp-8); font-weight: var(--fw-semibold); color: var(--c-bar-gain); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) { .cs-pbars__bar { transform: none; transition: none; } }
.cs-sub--in { margin: var(--sp-24) 0 var(--sp-8); }
/* the hero is display: contents in the flex column, so its (no UA display: none) became a 0 px flex item and doubled the gap */
.folds-pic > source { display: none; } /* all widths (owner 2026-10-19): it still selects the image; inside a display: contents it was a 0 px flex item (Editor, MTA, Team Workspace main; the Editor / MTA image cards) */
/* >= 1190 (owner 2026-10-19): Editor and MTA title -> hero image gap matches Verdance (its page gap, --sp-100); only this gap changes */
@media (min-width: 1190px) { :is(.cs-page--editor, .cs-page--mta) > .folds-pic > img.ed-hero { margin-top: calc(var(--sp-100) - var(--sp-80)); } }
/* phones (owner 2026-10-19): the comparison is one joined card: rounded outer corners (--r-16, the page's card radius), square where the blocks meet */
@media (max-width: 767.98px) {
.cs-ba__cols { border-radius: var(--r-16); overflow: hidden; }
.cs-ba__col { border-radius: var(--r-16) var(--r-16) 0 0; }
.cs-ba__col--now { border-radius: 0 0 var(--r-16) var(--r-16); }
}