/* ════════ case-study.css — layout system for case-study pages ════════ */
/* ════════ v7 case-study system (v7c) ════════ */
:root{--v-prose:#333}
.v7c-wide{max-width:1280px;margin:0 auto}
.v7c-hero{padding:96px 80px 0}
.v7c-hero-img{aspect-ratio:1280/564;border-radius:16px;background:var(--v-band);border:1px solid #efefef}
.v7c-head{padding:96px var(--v-pad) 88px}
.v7c-eyebrow{gap:0}
.v7c-eyebrow span+span::before{content:'·';margin:0 12px}
.v7c-title{font-family:var(--v-serif);font-weight:400;font-size:max(clamp(44px,calc(44px + (100vw - 360px) / 10),48px),min(5vw,72px));line-height:1.04;letter-spacing:-.02em;color:var(--v-ink);margin-top:16px}
.v7c-intro{font-size:20px;line-height:1.5;color:var(--v-ink2);max-width:680px;margin-top:20px}
.v7c-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;padding-top:24px;border-top:1px solid var(--v-line)}
.v7c-meta>div{padding-right:24px}
.v7c-meta>div+div{padding-left:24px;border-left:1px solid var(--v-line)}
.v7c-meta dt{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink3)}
.v7c-meta dd{font-size:16px;line-height:1.5;color:var(--v-prose);margin-top:8px}

.v7c-sec{padding:var(--v-gap) var(--v-pad)}
.v7c-h2{margin:12px 0 56px}
.v7c-sec>.v7-wrap>.v7-lbl+.v7c-prose{margin-top:20px}
.v7c-prose{font-size:18px;line-height:1.65;color:var(--v-prose);max-width:720px}
.v7c-prose p+p{margin-top:1.1em}
/* In-prose text links (Oct 27): body font and size, ink colour, persistent underline (matches About's vlog link); not colour alone */
.v7 .v7c-prose a.v7-link{display:inline;font:inherit;color:var(--v-ink);border-bottom:0;padding-bottom:0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.v7c-fig{margin-top:64px}
.v7c-shot{aspect-ratio:1152/629;border-radius:16px}
.v7c-fig figcaption{font-size:15px;color:var(--v-ink3);margin-top:16px}

/* argument */
.v7c-arg{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:64px;align-items:start}
.v7c-points{list-style:none;display:flex;flex-direction:column;gap:56px}
.v7c-points .v7-card-t{margin:10px 0 12px}
.v7c-points p{font-size:18px;line-height:1.6;color:var(--v-ink2)}
.v7c-evidence{display:flex;flex-direction:column;gap:32px;position:sticky;top:104px}
.v7c-eg{background:#fff;border:1px solid #ececec;border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.v7c-eg .v7-img{aspect-ratio:16/8;min-height:0}
.v7c-eg figcaption{font-size:14px;line-height:1.5;color:var(--v-ink2);padding:16px 8px 4px}
.v7c-eg b{color:var(--v-ink);font-weight:600;margin-right:8px}

/* negotiation */
.v7c-cols{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.v7c-cols .v7-card-t{margin-bottom:16px}
.v7c-strip-wrap{margin:96px calc(-1 * var(--v-pad)) 0}
.v7c-strip-ctl{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:0 var(--v-pad);max-width:calc(1152px + 2 * var(--v-pad))}
.v7c-arrows{display:flex;gap:8px}
.v7 .v7c-arrow{width:44px;height:44px;border-radius:50%;border:1px solid #d4d4d4;font-size:16px;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,opacity .2s}
.v7 .v7c-arrow:hover{border-color:var(--v-ink)}
.v7 .v7c-arrow:disabled{opacity:.3;cursor:default}
.v7c-strip{list-style:none;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(var(--v-pad),calc((100vw - 1152px)/2));padding:0 max(var(--v-pad),calc((100vw - 1152px)/2)) 8px;scrollbar-width:none;outline:none}
.v7c-strip::-webkit-scrollbar{display:none}
.v7c-strip li{flex:0 0 280px;scroll-snap-align:start}
.v7c-strip .v7-img{aspect-ratio:9/19;min-height:0;border-radius:24px}
.v7c-quote{font-family:var(--v-sans);font-weight:500;font-size:clamp(30px,3.4vw,48px);line-height:1.12;letter-spacing:-.03em;color:var(--v-ink);border-left:1px solid var(--v-ink);padding:8px 0 8px 48px;margin:120px 0 0 0;max-width:1000px}
.v7c-quote em{font-family:var(--v-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* before / after */
.v7c-dark{background:#000;color:#fff}
.v7c-dark .v7-lbl{color:rgba(255,255,255,.6)}
.v7c-dark .v7-display{color:#fff}
.v7c-ba{position:relative;aspect-ratio:1152/720;border-radius:16px;overflow:hidden;user-select:none;-webkit-user-select:none}
.v7c-ba-layer{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px}
.v7c-ba-layer span{font-size:12px;color:rgba(255,255,255,.55)}
.v7c-ba-after{background:#262626;justify-content:flex-end}
.v7c-ba-before{background:#3a3a3a;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.v7c-chip{position:absolute;top:16px;font-size:13px;font-weight:500;background:#000;color:#fff;border-radius:6px;padding:5px 10px;z-index:2;pointer-events:none}
.v7c-chip-l{left:16px}.v7c-chip-r{right:16px}
.v7c-ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;z-index:2;pointer-events:none}
.v7c-ba-handle span{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.v7c-ba-range{touch-action:pan-y;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3;margin:0;-webkit-appearance:none;appearance:none}
.v7c-ba-range:focus-visible~.v7c-ba-handle span,.v7c-ba:has(.v7c-ba-range:focus-visible) .v7c-ba-handle span{outline:2px solid #fff;outline-offset:3px}
.v7c-ba-note{margin-top:56px}
.v7c-ba-note .v7c-prose{color:rgba(255,255,255,.78);margin-top:16px}

/* effort timeline */
.v7c-tl{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.v7c-tl::before{content:'';position:absolute;left:0;right:0;top:6px;height:1px;background:var(--v-line)}
.v7c-tl li{position:relative;padding-right:20px;display:flex;flex-direction:column;gap:8px}
.v7c-tl-dot{width:13px;height:13px;border-radius:50%;background:#fff;border:1.5px solid var(--v-ink);margin-bottom:12px;position:relative}
.v7c-tl li.is-key .v7c-tl-dot{background:var(--v-ink)}
.v7c-tl-d{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink3)}
.v7c-tl-t{font-size:17px;line-height:1.45;color:var(--v-prose)}
.v7c-tl li.is-key .v7c-tl-t{color:var(--v-ink);font-weight:500}

/* outcome */
.v7c-kicker{margin-top:80px}
.v7c-kicker-line{font-family:var(--v-sans);font-weight:500;font-size:clamp(30px,3.4vw,48px);line-height:1.1;letter-spacing:-.03em;color:var(--v-ink);margin-top:24px}
.v7c-kicker-line em{font-family:var(--v-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* end */
.v7c-end{padding-bottom:64px}
.v7 .v7c-next{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:96px;padding:40px 0 0;border:none;border-top:1px solid var(--v-line);background:none;z-index:auto}
.v7 .v7c-back{text-decoration:none;display:inline-flex;align-items:center;font-size:16px;color:var(--v-ink2);min-height:44px}
.v7 .v7c-back:hover{color:var(--v-ink)}
.v7 .v7c-fwd{text-decoration:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.v7 .v7c-fwd .v7-card-t{transition:opacity .2s}
.v7 .v7c-fwd:hover .v7-card-t{opacity:.65}

/* case-study responsive */
@media(max-width:1200px){.v7c-hero{padding-left:var(--v-pad);padding-right:var(--v-pad)}}
@media(max-width:1024px){
  .v7c-meta{grid-template-columns:1fr 1fr;row-gap:24px}
  .v7c-meta>div:nth-child(3){padding-left:0;border-left:none}
  .v7c-arg{grid-template-columns:1fr;gap:48px}
  .v7c-evidence{position:static}
  .v7c-cols{grid-template-columns:1fr;gap:48px}
}
@media(max-width:768px){
  .v7c-hero{padding-top:84px}
  .v7c-hero-img{aspect-ratio:4/3}
  .v7c-head{padding:56px var(--v-pad) 64px}
  .v7c-intro{font-size:18px}
  .v7c-meta{grid-template-columns:1fr;margin-top:40px;padding-top:0;border-top:none}
  .v7c-meta>div,.v7c-meta>div+div{padding:16px 0;border-left:none;border-top:1px solid var(--v-line)}
  .v7c-h2{margin-bottom:36px}
  .v7c-prose{font-size:17px}
  .v7c-fig{margin-top:40px}
  .v7c-shot{aspect-ratio:4/3}
  .v7c-strip-wrap{margin-top:64px}
  .v7c-strip li{flex-basis:220px}
  .v7c-quote{padding-left:20px;margin-top:72px}
  .v7c-ba{aspect-ratio:4/5}
  .v7c-tl{grid-template-columns:1fr;gap:28px;padding-left:32px}
  .v7c-tl::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .v7c-tl li{padding-right:0}
  .v7c-tl-dot{position:absolute;left:-32px;top:2px;margin:0}
  .v7c-kicker{margin-top:56px}
  .v7 .v7c-next{flex-direction:column;align-items:flex-start;margin-top:64px}
  .v7 .v7c-fwd{text-decoration:none;align-items:flex-start;text-align:left}
}

/* ── shared case-study components (added for Gemini / CYC / PFM) ── */
.v7c-eyebrow .v7-pill{margin-left:12px}
.v7c-points.is-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.v7c-points.is-3 li{border-top:1px solid var(--v-line);padding-top:24px}
/* two points in a row (Oct 26): gap matches the two-column evidence below, so each point sits over its screen */
.v7c-points.is-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.v7c-points.is-2 li{border-top:1px solid var(--v-line);padding-top:24px}
@media(max-width:768px){.v7c-points.is-2{grid-template-columns:1fr;gap:40px}}
.v7c-dark .v7c-points li{border-color:rgba(255,255,255,.2)}
.v7c-dark .v7c-points .v7-card-t{color:#fff}
.v7c-dark .v7c-points p{color:rgba(255,255,255,.72)}
.v7c-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v7c-frame{position:relative}
.v7c-frame .v7-img{aspect-ratio:1/1;min-height:0;border-radius:16px}
.v7c-dark .v7c-frame .v7-img{background:#262626}
.v7c-dark .v7-img span{color:rgba(255,255,255,.55)}
.v7c-frame .v7c-chip{left:16px}
.v7c-frame-wide{margin-top:24px}
.v7c-frame-wide .v7-img{aspect-ratio:16/7}
.v7c-note{font-size:15px;color:var(--v-ink3);margin-top:16px}
.v7c-dark .v7c-note{color:rgba(255,255,255,.6)}
.v7c-quote.is-solo{margin-top:72px}
@media(max-width:1024px){
  .v7c-points.is-3{grid-template-columns:1fr;gap:40px}
}
@media(max-width:768px){
  .v7c-pair{grid-template-columns:1fr}
  .v7c-frame-wide .v7-img{aspect-ratio:4/3}
}
.v7c-eyebrow .v7-pill::before{content:none}

/* comparison: two big numbers */
.v7c-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:48px;align-items:start}
.v7c-vs-n{font-family:var(--v-serif);font-size:clamp(56px,6vw,96px);line-height:1;letter-spacing:-.02em;color:var(--v-ink)}
.v7c-vs-l{font-size:17px;line-height:1.55;color:var(--v-ink2);margin-top:16px;max-width:420px}
.v7c-vs-mid{font-family:var(--v-serif);font-style:italic;font-size:24px;color:var(--v-ink3);padding-top:28px}
.v7c-vs-foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--v-line)}
/* media + text split */
.v7c-media{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.v7c-media .v7-img{aspect-ratio:4/3;min-height:0;border-radius:16px}
.v7c-media h3{margin-bottom:16px}
/* metrics */
.v7c-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.v7c-metrics>div{border-top:1px solid var(--v-line);padding:28px 0 40px}
.v7c-metrics dt{font-family:var(--v-serif);font-size:clamp(48px,5vw,72px);line-height:1;letter-spacing:-.02em;color:var(--v-ink)}
.v7c-metrics dd{font-size:16px;line-height:1.5;color:var(--v-ink2);margin-top:12px;max-width:300px}
/* chart */
.v7c-chart{background:#fff;border:1px solid #ececec;border-radius:16px;padding:32px;margin-top:40px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.v7c-chart-box{position:relative;height:380px}
.v7c-chart-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--v-ink3);text-align:center;padding:24px}
/* progression of steps */
.v7c-steps{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch}
.v7c-step{background:#fff;border:1px solid #ececec;border-radius:16px;padding:28px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.v7c-step.is-key{border-color:var(--v-ink)}
.v7c-step .v7-card-t{margin:10px 0 8px}
.v7c-step p:last-child{font-size:15px;color:var(--v-ink2)}
.v7c-step-arrow{align-self:center;height:1px;background:var(--v-ink);margin:0 10px;position:relative}
.v7c-step-arrow::after{content:'';position:absolute;right:0;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--v-ink);border-right:0}
.v7c-dark .v7c-strip .v7-img{background:#262626}
.v7c-strip figcaption{font-size:14px;color:var(--v-ink2);margin-top:12px}
.v7c-dark .v7c-strip figcaption{color:rgba(255,255,255,.7)}
.v7c-dark .v7c-arrow{color:#fff;border-color:rgba(255,255,255,.3)}
.v7c-dark .v7c-arrow:hover{border-color:#fff}
.v7c-dark .v7-meta{color:rgba(255,255,255,.6)}
@media(max-width:1024px){
  .v7c-media{grid-template-columns:1fr;gap:32px}
  .v7c-metrics{grid-template-columns:1fr 1fr}
  .v7c-steps{grid-template-columns:1fr}
  .v7c-step-arrow{width:1px;height:40px;margin:6px 0 6px 32px}
  .v7c-step-arrow::after{right:auto;left:-4px;top:auto;bottom:0;border:4.5px solid transparent;border-top:7px solid var(--v-ink);border-bottom:0}
}
@media(max-width:768px){
  .v7c-vs{grid-template-columns:1fr;gap:16px}
  .v7c-vs-mid{padding-top:0}
  .v7c-metrics{grid-template-columns:1fr}
  .v7c-metrics>div{padding:20px 0 24px;display:flex;align-items:baseline;gap:20px}
  .v7c-metrics dt{min-width:120px;font-size:44px}
  .v7c-metrics dd{margin-top:0}
  .v7c-chart{padding:16px}
  .v7c-chart-box{height:300px}
}

/* hub diagram (PFM scope) */
/* org restructure */
.v7c-org{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:start}
.v7c-org-col>.v7-lbl{margin-bottom:16px}
.v7c-org-col ol{list-style:none;display:flex;flex-direction:column;align-items:stretch}
.v7c-org-col li{background:#fff;border:1px solid #ececec;border-radius:10px;padding:14px 16px;font-size:16px;color:var(--v-prose);position:relative}
.v7c-org-col li+li{margin-top:24px}
.v7c-org-col li+li::before{content:'';position:absolute;left:24px;top:-25px;width:1px;height:24px;background:#cfcfcf}
.v7c-org-col li.is-me{background:#000;border-color:#000;color:#fff;font-weight:500}
.v7c-org-col li.is-faint{color:var(--v-ink3)}
.v7c-org-col .v7c-note{margin-top:20px}
.v7c-org-arrow{align-self:center;height:1px;background:var(--v-ink);margin:0 14px;position:relative}
.v7c-org-arrow::after{content:'';position:absolute;right:0;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--v-ink);border-right:0}
.v7c-aside{background:var(--v-card);border-radius:16px;padding:28px}
.v7c-aside p:not(.v7-lbl){font-size:17px;line-height:1.6;color:var(--v-prose);margin-top:12px}
/* artifacts grid */
.v7c-grid2{display:grid;grid-template-columns:1fr 1fr;gap:48px 24px}
.v7c-grid2 .v7-img{aspect-ratio:4/3;min-height:0;border-radius:16px}
.v7c-grid2 figcaption{margin-top:20px}
.v7c-grid2 figcaption h3{font-family:var(--v-serif);font-weight:400;font-size:24px;line-height:1.2;color:var(--v-ink);margin-bottom:8px}
.v7c-grid2 figcaption p{font-size:16px;line-height:1.55;color:var(--v-ink2)}
.v7c-dark .v7c-grid2 .v7-img{background:#262626}
.v7c-dark .v7c-grid2 h3{color:#fff}
.v7c-dark .v7c-grid2 figcaption p{color:rgba(255,255,255,.7)}
/* practices */
.v7c-practices{display:grid;grid-template-columns:1fr 1fr;gap:24px;list-style:none}
.v7c-practices li{background:#fff;border:1px solid #ececec;border-radius:16px;padding:28px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.v7c-practices .v7-card-t{margin:10px 0 10px}
.v7c-practices p:last-child{font-size:17px;line-height:1.6;color:var(--v-ink2)}
/* timeline with titles */
.v7c-tl.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v7c-tl-h{font-family:var(--v-serif);font-size:24px;line-height:1.15;color:var(--v-ink)}
.v7c-tl-p{font-size:15px;line-height:1.5;color:var(--v-ink2)}
.v7c-big-prose{font-size:22px;line-height:1.55;color:var(--v-ink);max-width:860px}
.v7c-big-prose p+p{margin-top:1em}
@media(max-width:1024px){
  .v7c-org{grid-template-columns:1fr}
  .v7c-org-arrow{width:1px;height:40px;margin:16px 0 16px 24px}
  .v7c-org-arrow::after{right:auto;left:-4px;top:auto;bottom:0;border:4.5px solid transparent;border-top:7px solid var(--v-ink);border-bottom:0}
}
@media(max-width:768px){
  .v7c-grid2,.v7c-practices{grid-template-columns:1fr}
  .v7c-tl.is-4{grid-template-columns:1fr}
  .v7c-big-prose{font-size:19px}
}

/* ── About + Contract (home-system pages that borrow case-study components) ── */
.v7p-hero{padding:168px var(--v-pad) 88px}
.v7p-stamp{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px}
.v7p-hero .v7c-meta{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:72px}
.v7p-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;list-style:none}
.v7p-cards li{background:#fff;border:1px solid #ececec;border-radius:16px;padding:32px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.v7p-cards .v7-card-t{margin:12px 0 12px}
.v7p-cards li>p:not(.v7-lbl){font-size:17px;line-height:1.6;color:var(--v-ink2);margin-bottom:24px}
.v7p-cards .v7p-eg-meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--v-line);display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--v-ink3)}
.v7p-cards .v7p-eg-meta strong{color:var(--v-ink);font-weight:600}
.v7c-points .v7p-num{font-family:var(--v-serif);font-style:italic;font-size:22px;color:var(--v-ink3)}
.v7c-metrics .v7-link{margin-top:16px}
.v7c-metrics dd p{margin-bottom:6px;color:var(--v-ink);font-weight:500}
.v7p-fit{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v7p-fit>div{border-radius:16px;padding:32px;background:#fff;border:1px solid var(--v-ink)}
.v7p-fit>div.is-no{background:transparent;border:1px dashed #c4c4c4}
.v7p-fit h3{font-family:var(--v-sans);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.v7p-fit .is-no h3{color:var(--v-ink3)}
.v7p-fit h3 span{width:22px;height:22px;border-radius:50%;background:#000;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:0}
.v7p-fit .is-no h3 span{background:#bdbdbd}
.v7p-fit ul{list-style:none}
.v7p-fit li{font-size:17px;line-height:1.55;color:var(--v-prose);padding:14px 0;border-top:1px solid var(--v-line)}
.v7p-fit li:first-child{border-top:none;padding-top:0}
.v7p-glance{border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:28px}
.v7p-glance-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15px}
.v7p-glance-row:first-of-type{border-top:none}
.v7p-glance-row span:first-child{color:rgba(255,255,255,.6)}
.v7p-glance-row span:last-child{color:#fff;text-align:right}
.v7 .v7p-foot-btn{display:inline-block;background:#fff;color:#000;border-radius:12px;padding:13px 20px;font-family:var(--v-black);font-weight:500;font-size:16px;text-decoration:none;margin-right:20px;transition:opacity .2s}
.v7 .v7p-foot-btn:hover{opacity:.85}
.v7 .v7p-foot-link{color:#fff;font-size:16px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
/* about */
.v7p-about{display:grid;grid-template-columns:302px minmax(0,1fr);gap:64px;align-items:start}
.v7p-about .v7-portrait{margin-bottom:32px}
.v7p-about-meta{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media(max-width:1024px){
  .v7p-hero .v7c-meta,.v7p-about-meta{grid-template-columns:1fr 1fr 1fr!important;row-gap:24px}
  .v7p-hero .v7c-meta>div:nth-child(4),.v7p-about-meta>div:nth-child(4){padding-left:0;border-left:none}
  .v7p-about{grid-template-columns:1fr;gap:32px}
}
@media(max-width:768px){
  .v7p-hero{padding:120px var(--v-pad) 64px}
  .v7p-hero .v7c-meta,.v7p-about-meta{grid-template-columns:1fr!important}
  .v7p-hero .v7c-meta>div:nth-child(4),.v7p-about-meta>div:nth-child(4){padding-left:0}
  .v7p-cards,.v7p-fit{grid-template-columns:1fr}
  .v7p-cards li,.v7p-fit>div{padding:24px}
  .v7 .v7p-foot-btn{margin:0 0 20px}
}

/* about: personal rewrite (Oct 24) */
.v7p-about-meta.is-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.v7p-family{aspect-ratio:2/1;min-height:0;border-radius:16px} /* 2:1 so the headline shows above the fold at 1440×900 (Phil, Oct 25); 4:3 phone crop below 768 */
.v7p-hero-photo{padding-top:112px}
.v7p-family-cap{font-size:14px;line-height:1.5;color:var(--v-ink3);margin-top:12px} /* Oct 27: same voice and size as the Off the clock captions */
.v7p-who{margin-top:72px}
.v7p-br-m{display:none}
@media(max-width:768px){.v7p-br-m{display:inline}}
.v7p-hero-photo .v7-sub{color:var(--v-ink)}
.v7p-intro{margin-top:40px}
/* meta beside the prose above 1024px (Phil, Oct 24); below that it drops under the prose as a 2-col, then 1-col row */
@media(min-width:1025px){
  .v7p-intro{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:80px;align-items:start}
  .v7p-intro .v7p-about-meta.is-4{grid-template-columns:1fr!important;margin-top:6px;padding-top:0;border-top:none}
  .v7p-intro .v7c-meta>div,.v7p-intro .v7c-meta>div+div{padding:20px 0 28px;border-left:none;border-top:1px solid var(--v-line)}
}
.v7p-make{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
.v7p-make .v7-img{aspect-ratio:4/3;min-height:0;border-radius:16px;background:#262626}
.v7p-make figcaption{margin-top:20px}
.v7p-make h3{font-family:var(--v-serif);font-weight:400;font-size:24px;line-height:1.2;color:#fff;margin-bottom:8px}
.v7p-make p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.7)}
.v7p-outro{margin-top:72px}
/* About "Where to start" (Oct 25): Home's .v7-card as compact horizontal cards, one per row (echoes the Off the clock rows).
   Phone sits on the card's bottom edge; the image sets the card height and the text centers beside it.
   Smaller than Home's grid on purpose, so About points to the work without restaging Home. */
.v7p-grid2{display:grid;gap:24px}
.v7p-grid2>.v7-card{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:center}
.v7p-grid2>.v7-card>.v7-img{margin:24px 24px 0;align-self:end;aspect-ratio:1/1.05;min-height:0}
.v7p-grid2>.v7-card>.v7-card-body{padding:28px 48px 28px 24px}
.v7p-grid2 .v7-card-d{max-width:620px}
@media(max-width:768px){
  .v7p-grid2{gap:20px}
  .v7p-grid2>.v7-card{display:block}
  .v7p-grid2>.v7-card>.v7-img{margin:16px 16px 0;aspect-ratio:4/3}
  .v7p-grid2>.v7-card>.v7-card-body{padding:24px 20px}
}
.v7c-dark .v7p-outro p{font-size:20px;line-height:1.5;color:#fff}
@media(max-width:768px){
  .v7p-outro{margin-top:56px}
}
.v7p-quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px;list-style:none}
.v7p-quotes li{border:1px dashed #c4c4c4;border-radius:16px;padding:32px}
.v7p-quotes blockquote{font-family:var(--v-serif);font-size:28px;line-height:1.25;color:var(--v-ink3)}
.v7p-cite{margin-top:20px;font-size:15px;color:var(--v-ink3)}
/* temporary marker for invented or unconfirmed content; remove each with its content before hosting */
.v7p-ph{display:block;width:fit-content;border:1px dashed currentColor;border-radius:999px;padding:4px 10px;margin-bottom:12px;font-family:var(--v-sans);font-weight:600;font-size:11px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink3)}
.v7c-dark .v7p-ph{color:rgba(255,255,255,.6)}
@media(max-width:1024px){
  .v7p-about-meta.is-4{grid-template-columns:1fr 1fr!important}
  .v7p-about-meta.is-4>div:nth-child(3){padding-left:0;border-left:none}
  .v7p-about-meta.is-4>div:nth-child(4){padding-left:24px;border-left:1px solid var(--v-line)}
}
@media(max-width:768px){
  .v7p-about-meta.is-4{grid-template-columns:1fr!important}
  .v7p-about-meta.is-4>div:nth-child(4){padding-left:0;border-left:none}
  .v7p-family{aspect-ratio:4/3}
  .v7p-hero-photo{padding-top:84px}
  .v7p-who{margin-top:40px}
  .v7p-make,.v7p-quotes{grid-template-columns:1fr}
  .v7p-quotes li{padding:24px}
  .v7p-quotes blockquote{font-size:24px}
}

/* ── CYC restyle (Oct 14): reusable patterns ── */
/* screen beneath a section's prose */
.v7c-under{margin-top:72px}
.v7c-under .v7c-shot{min-height:0}
/* vs. pair on a dark stage — the "before" number recedes */
.v7c-dark .v7c-vs-n{color:#fff}
.v7c-dark .v7c-vs .is-past .v7c-vs-n{color:rgba(255,255,255,.45)}
.v7c-dark .v7c-vs-l{color:rgba(255,255,255,.6)}
.v7c-dark .v7c-vs-mid{color:rgba(255,255,255,.7)}
.v7c-dark .v7c-vs-foot{border-top-color:rgba(255,255,255,.16)}
.v7c-dark .v7c-vs-foot .v7c-prose{color:rgba(255,255,255,.72)}
/* points left, annotated screen right */
.v7c-annot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}
.v7c-annot .v7c-points{gap:48px}
/* stacked example screens with captions (CYC value exchange) */
.v7c-shots{display:flex;flex-direction:column;gap:40px}
.v7c-shots .v7-img{aspect-ratio:588/264;min-height:0;border-radius:16px}
.v7-band .v7c-shots .v7-img{background:#fff;border:1px solid var(--v-line)}
/* text left, captioned screen right (CYC situation) */
.v7c-sidecap{display:grid;grid-template-columns:minmax(0,656fr) minmax(0,432fr);gap:64px;align-items:start}
.v7c-sidecap{margin-top:20px}
.v7c-sidecap .v7c-prose{max-width:none}
.v7c-sidecap .v7-img{aspect-ratio:432/399;min-height:0;border-radius:16px}
/* caption under a screen */
.v7c-cap figcaption{font-size:16px;line-height:1.55;color:var(--v-prose);margin-top:16px}
.v7c-shots .v7c-cap figcaption{font-size:15px}
.v7c-cap figcaption b{font-weight:600;color:var(--v-ink)}
/* meta: emphasise one item without a box */
@media(max-width:1024px){
  .v7c-annot{grid-template-columns:1fr;gap:48px}
  .v7c-sidecap{grid-template-columns:1fr;gap:40px}
  .v7c-sidecap .v7-img{aspect-ratio:4/3}
}
@media(max-width:768px){
  .v7c-under{margin-top:48px}
}

/* ── PFM restructure (Oct 14) ── */
/* product cards */
.v7c-prods{display:grid;grid-template-columns:1fr 1fr;gap:24px;list-style:none;margin-top:56px}
.v7c-prods li{background:#fff;border:1px solid #ececec;border-radius:16px;padding:24px 24px 32px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.v7c-prods .v7-img{aspect-ratio:512/300;min-height:0;border-radius:10px}
.v7c-prods .v7-card-t{margin:28px 0 10px}
.v7c-prods p{font-size:17px;line-height:1.6;color:var(--v-ink2)}
/* intro paragraph directly before a card grid */
.v7c-prose+.v7c-practices{margin-top:56px}
/* timeline + big prose on a dark stage */
.v7c-dark .v7c-big-prose{color:rgba(255,255,255,.88)}
.v7c-dark .v7c-tl::before{background:rgba(255,255,255,.22)}
.v7c-dark .v7c-tl-dot{background:#000;border-color:#fff}
.v7c-dark .v7c-tl li.is-key .v7c-tl-dot{background:#fff}
.v7c-dark .v7c-tl-d{color:rgba(255,255,255,.55)}
.v7c-dark .v7c-tl-h{color:#fff}
.v7c-dark .v7c-tl-p{color:rgba(255,255,255,.62)}
.v7c-dark .v7c-cap figcaption{color:rgba(255,255,255,.72)}
@media(max-width:768px){
  .v7c-prods{grid-template-columns:1fr;margin-top:40px}
  .v7c-prods li{padding:16px 16px 24px}

}
.v7c-dark .v7c-under .v7-img{background:#1a1a1a;border:1px solid rgba(255,255,255,.08)}

/* Auto Hub: design decisions under the before/after slider */
.ah-decisions{margin-top:56px}

/* ════════ smoke hero (opt-in: .v7c-hero.v7c-smoke) ════════
   Full-bleed band; the hero image floats inside it over slow, drifting
   gray-to-white clouds. Each cloud is a soft radial gradient moved with
   transform only (no blur filter), on its own loop length so the pattern
   never visibly repeats. The band starts at the top of the page, behind the
   frosted nav, so it never depends on the nav's exact height.
   Image sits at the 1152 content width (aligned with the nav) so the smoke
   has room to show around it. The image sits flush on the band's bottom
   edge (no bottom padding, square bottom corners) so it rises out of it.
   Reduced motion = still gradient. */
.v7c-hero.v7c-smoke{position:relative;overflow:hidden;isolation:isolate;padding:calc(72px + 104px) var(--v-pad) 0;background:#e9e9e9}
.v7c-smoke .v7c-wide{position:relative;z-index:1;max-width:1152px}
.v7c-smoke .v7c-hero-img{background:#fff;border:0;border-radius:16px 16px 0 0;box-shadow:0 -1px 2px rgba(0,0,0,.04),0 -24px 64px -28px rgba(0,0,0,.24)}
.v7c-smoke-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.v7c-smoke-fx i{position:absolute;display:block;border-radius:50%;will-change:transform;animation:v7cSmokeA 11s ease-in-out infinite alternate}
.v7c-smoke-fx i:nth-child(1){width:52vw;height:52vw;left:-16vw;top:-18vw;background:radial-gradient(closest-side,#fff 0%,rgba(255,255,255,.75) 40%,rgba(255,255,255,0));animation-duration:12s}
.v7c-smoke-fx i:nth-child(2){width:46vw;height:46vw;right:-12vw;top:-10vw;background:radial-gradient(closest-side,rgba(0,0,0,.22),rgba(0,0,0,.08) 50%,rgba(0,0,0,0));animation-name:v7cSmokeB;animation-duration:9s}
.v7c-smoke-fx i:nth-child(3){width:50vw;height:50vw;left:26vw;bottom:-30vw;background:radial-gradient(closest-side,#fff 0%,rgba(255,255,255,.7) 45%,rgba(255,255,255,0));animation-name:v7cSmokeC;animation-duration:14s}
.v7c-smoke-fx i:nth-child(4){width:40vw;height:40vw;left:-14vw;bottom:-14vw;background:radial-gradient(closest-side,rgba(0,0,0,.2),rgba(0,0,0,.07) 50%,rgba(0,0,0,0));animation-name:v7cSmokeB;animation-duration:13s;animation-delay:-5s}
.v7c-smoke-fx i:nth-child(5){width:38vw;height:38vw;right:-10vw;bottom:-16vw;background:radial-gradient(closest-side,#fff 0%,rgba(255,255,255,.65) 45%,rgba(255,255,255,0));animation-duration:8s;animation-delay:-3s}
@keyframes v7cSmokeA{0%{transform:translate3d(0,0,0) scale(1,1)}50%{transform:translate3d(18vw,8vw,0) scale(1.25,.82)}100%{transform:translate3d(-8vw,16vw,0) scale(.88,1.3)}}
@keyframes v7cSmokeB{0%{transform:translate3d(0,0,0) scale(1,1)}50%{transform:translate3d(-20vw,12vw,0) scale(.82,1.32)}100%{transform:translate3d(-6vw,-8vw,0) scale(1.28,.86)}}
@keyframes v7cSmokeC{0%{transform:translate3d(0,0,0) scale(1,1)}50%{transform:translate3d(14vw,-16vw,0) scale(1.3,.84)}100%{transform:translate3d(-16vw,-6vw,0) scale(1,1.25)}}
@media(max-width:768px){
  .v7c-hero.v7c-smoke{padding:calc(64px + 40px) var(--v-pad) 0}
  .v7c-smoke-fx i:nth-child(n){width:110vw;height:110vw}
}
/* dark variant (Hummingbird): charcoal clouds on black */
.v7c-smoke-fx.is-dark i:nth-child(odd){background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,.11) 50%,rgba(255,255,255,0))}
.v7c-smoke-fx.is-dark i:nth-child(even){background:radial-gradient(closest-side,rgba(255,255,255,.17),rgba(255,255,255,.06) 50%,rgba(255,255,255,0))}
@media (prefers-reduced-motion:reduce){.v7c-smoke-fx i{animation:none}}

/* ════════ real images on phones ════════
   Heroes: a separate phone crop via <picture> (source media="(max-width:768px)",
   1456×1092, 4:3); without one, the desktop image is cropped to 4:3.
   Wide screens (.v7c-shot, wide frames): once they hold a real <img>, phones show
   the whole image at its own shape instead of cropping it to 4:3.
   Before/after: keeps its desktop 16:10 on phones once it holds images, so both
   layers stay whole and aligned. Placeholders keep their phone boxes. */
@media(max-width:768px){
  .v7c-shot:has(>img),.v7c-frame-wide .v7-img:has(>img){aspect-ratio:auto;padding:0}
  .v7c-shot>img,.v7c-frame-wide .v7-img>img{position:static;display:block;width:100%;height:auto}
  .v7c-ba:has(img){aspect-ratio:1152/720}
  .v7c-smoke .v7c-hero-img:has(>picture){border-radius:0} /* the phone crops carry their own corners (Oct 22) */
}

/* ════════ stacked argument (Oct 16) ════════
   Three points as a ruled row (.v7c-points.is-3), with the evidence screens below
   as two columns. Used on Auto Hub "Priority & resource" (.v7c-arg + .v7c-evidence)
   and CYC "The value exchange" (.v7c-annot + .v7c-shots). */
.v7c-arg.is-stacked,.v7c-annot.is-stacked{display:block}
.v7c-arg.is-stacked .v7c-evidence,.v7c-annot.is-stacked .v7c-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;position:static;margin-top:64px;align-items:start}
@media(max-width:1024px){.v7c-arg.is-stacked .v7c-evidence,.v7c-annot.is-stacked .v7c-shots{margin-top:48px}}
@media(max-width:768px){.v7c-arg.is-stacked .v7c-evidence,.v7c-annot.is-stacked .v7c-shots{grid-template-columns:1fr;gap:32px}}

/* Smoke hero with a real image (Oct 16): the slot's box-shadow was drawn for the
   white placeholder rectangle. With a transparent export it outlines an invisible box
   (a hard edge across the gap between devices). Instead, shadow the image's own shape. */
.v7c-smoke .v7c-hero-img:has(>img),.v7c-smoke .v7c-hero-img:has(>picture){box-shadow:none;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.04)) drop-shadow(0 -12px 24px rgba(0,0,0,.10))}

/* Example screens (Oct 16): opaque screenshot crops get a hairline so their edges read
   on a white card or band (Auto Hub "Priority & resource" .v7c-eg, CYC value exchange
   .v7c-shots). Transparent device exports elsewhere stay borderless. */
.v7c-eg .v7-img:has(>img),.v7c-shots .v7-img:has(>img){border:1px solid var(--v-line)!important}

/* Before/after with device-frame exports (Oct 16): the slot takes the image's own shape
   (set inline on .v7c-ba), drops its radius so the frames' corners aren't clipped, and the
   layers lose their placeholder fills so the frames sit on the section. Both exports must
   share the same frames pixel for pixel; only the screens differ. */
.v7c-ba:has(img){border-radius:0}
.v7c-ba-layer:has(>img){background:transparent;padding:0}
.v7c-ba-layer>img{object-fit:contain}

/* Before/after labels (Oct 16): dark gray pills so they read on the black section.
   Above 768px they sit in the slider's top corners; at 768px and below the laptop fills
   the width, so they move under the slider instead of covering the screen. */
.v7c-ba .v7c-chip{background:#2a2a2a;color:#fff}
@media(max-width:768px){
  .v7c-ba:has(img){overflow:visible;margin-bottom:64px}
  .v7c-ba:has(img) .v7c-chip{top:auto;bottom:-40px}
  .v7c-ba:has(img) .v7c-chip-l{left:0}
  .v7c-ba:has(img) .v7c-chip-r{right:0}
}

/* Carousel screens with phone-frame exports (Oct 16): the slot takes the export's shape
   (1560:3250), drops its radius and placeholder fill, and fits the frame whole. */
.v7c-strip .v7-img:has(>img){aspect-ratio:1560/3250;border-radius:0;padding:0;background:transparent}
.v7c-strip .v7-img>img{object-fit:contain}

/* Desktop carousel (.v7c-strip.is-desk, Oct 26; first used on Hummingbird 01): 16:10 desktop
   screenshots instead of phones. 864px slides, three-quarters of the content width (Phil
   asked for 20% larger than 720, Oct 26), so about a quarter of the next one shows at 1440;
   85vw on narrower screens. Plain screenshots, so filled slots keep the 16px radius; no hairline or shadow (the app's own gray frame defines the edge, like Hummingbird's section screens; Oct 26). */
.v7c-strip.is-desk li{flex:0 0 min(864px,85vw)}
.v7c-strip.is-desk .v7-img,.v7c-strip.is-desk .v7-img:has(>img){aspect-ratio:16/10;border-radius:16px}
.v7c-strip.is-desk .v7-img>img{object-fit:cover}

/* Side-caption screen, filled (Oct 17): the slot takes the export's own shape at every
   width (no 4:3 crop when it stacks at 1024 and below), capped at its desktop width of
   432px. A frame export (.is-frame) keeps its own corners: this beats the slot's 16px radius. */
.v7c-sidecap .v7-img:has(>img){aspect-ratio:auto;padding:0;max-width:432px}
.v7c-sidecap .v7-img>img{position:static;display:block;width:100%;height:auto}
.v7c-sidecap .v7-img.is-frame{border-radius:0}

/* Example screens that draw their own border and corners (CYC E.g. 01/02, Oct 17):
   .is-frame here means no slot hairline, radius or shadow; the export's own edge reads. */
.v7c-shots .v7-img.is-frame:has(>img){border:0!important;border-radius:0;filter:none}

/* ── PFM restructure (Oct 18): owner tags, reframe note ── */
.v7c-prods p.pfm-owner{margin-top:28px;font-size:13px;line-height:1.4;color:var(--v-ink3)}
.v7c-prods .pfm-owner+.v7-card-t{margin-top:8px}
.pfm-after{margin-top:56px}

/* PFM feature map (Oct 20): coded P6 in the Workflows section. Desktop SVG;
   stacked HTML version at 1024px and below (the SVG's labels get too small). */
.pfm-map-d{display:block;width:100%;height:auto;overflow:visible}
.pfm-map-d text{font-family:var(--v-sans)}
.pfm-map-lbl{font-size:13px;font-weight:600;letter-spacing:1.2px;fill:var(--v-ink3)}
.pfm-map-key text{font-size:15px;fill:var(--v-ink)}
.pfm-map-note text,.pfm-map-note{font-size:14px;fill:var(--v-ink2)}
.pfm-map-node rect{fill:#fff;stroke:var(--v-line)}
.pfm-map-node text{font-family:var(--v-serif)!important;font-size:24px;fill:var(--v-ink)}
.pfm-map-node.is-shared rect{stroke:var(--v-ink)}
.pfm-map-node.is-shared text{font-size:26px}
.pfm-map-node.is-apart rect{fill:none;stroke:#bdbdbd;stroke-dasharray:5 4}
.pfm-map-node.is-apart text{fill:var(--v-ink3)}
.pfm-map-m{display:none}
@media(max-width:1024px){
  .pfm-map-d{display:none}
  .pfm-map-m{display:block;max-width:480px;border:1px dashed #cfcfcf;border-radius:14px;padding:16px 14px 16px}
  .pfm-map-m .v7-lbl{font-size:12px}
  .pfm-map-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0;padding:0}
  .pfm-map-grid li,.pfm-map-box,.pfm-map-apart{background:#fff;border:1px solid var(--v-line);border-radius:10px;padding:12px 10px;font-family:var(--v-serif);font-size:20px;line-height:1.15;text-align:center;color:var(--v-ink)}
  .pfm-map-box{border-color:var(--v-ink)}
  .pfm-map-down{text-align:center;font-size:14px;line-height:1.45;color:var(--v-ink2);margin:10px 0}
  .pfm-map-down span{display:block;font-size:16px;color:#9a9a9a}
  .pfm-map-keym{font-size:15px;line-height:1.45;color:var(--v-ink);margin:6px 0 10px}
  .pfm-map-aside{font-size:14px;line-height:1.45;color:var(--v-ink2);margin-top:12px}
  .pfm-map-apart{margin-top:14px;background:transparent;border-style:dashed;border-color:#bdbdbd;color:var(--v-ink3)}
  .pfm-map-apart small{display:block;font-family:var(--v-sans);font-size:13px;line-height:1.35;margin-top:4px}
}

/* PFM narrative pass (Oct 21): the senior designer's screens in the human outcome (dark).
   Three phones in a row; a scroll row at 768px and below. Filled slots take the export's shape. */
.pfm-her-lbl{margin:96px 0 24px}
.pfm-her{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:888px}
.pfm-her .v7-img{aspect-ratio:9/19;min-height:0;border-radius:24px;background:#262626}
.pfm-her .v7-img:has(>img){aspect-ratio:1560/3250;border-radius:0;background:transparent}
@media(max-width:768px){
  .pfm-her-lbl{margin-top:72px}
  .pfm-her{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--v-pad);gap:16px;margin:0 calc(-1 * var(--v-pad));padding:0 var(--v-pad) 8px;scrollbar-width:none}
  .pfm-her::-webkit-scrollbar{display:none}
  .pfm-her li{flex:0 0 220px;scroll-snap-align:start}
}

/* ════════ Gemini (Oct 22) ════════ */
/* Four-step ladder: .v7c-steps.is-4 (the base .v7c-steps holds three). Stacks at 900px and
   below; from 1100px down to 901px the cards and arrows tighten to stay in one row. */
.v7c-steps.is-4{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr)}
.v7c-steps.is-4 .v7c-step{padding:24px}
.v7c-steps.is-4 .v7-card-t{font-size:28px}
@media(max-width:1100px){
  .v7c-steps.is-4{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr)}
  .v7c-steps.is-4 .v7c-step{padding:20px}
  .v7c-steps.is-4 .v7-card-t{font-size:24px}
  .v7c-steps.is-4 .v7c-step-arrow{width:auto;height:1px;margin:0 4px}
  .v7c-steps.is-4 .v7c-step-arrow::after{left:auto;right:0;top:-4px;bottom:auto;border:4.5px solid transparent;border-left:7px solid var(--v-ink);border-right:0}
}
@media(max-width:900px){
  .v7c-steps.is-4{grid-template-columns:1fr}
  .v7c-steps.is-4 .v7c-step-arrow{width:1px;height:40px;margin:6px 0 6px 32px}
  .v7c-steps.is-4 .v7c-step-arrow::after{right:auto;left:-4px;top:auto;bottom:0;border:4.5px solid transparent;border-top:7px solid var(--v-ink);border-bottom:0}
}
/* Ladder screens (.gm-ladder, Oct 22): a 4:5 screen flush across the top of each step card
   (prompt + the widget's answer). At 900px and below the cards stack and the screen moves to the
   card's left at a fixed width, so a stacked card doesn't become a showcase. */
.gm-step-shot{margin:-24px -24px 20px;aspect-ratio:4/5;min-height:0;border-radius:15px 15px 0 0;box-shadow:0 1px 0 #ececec}
.gm-ladder-cap{font-size:15px;color:var(--v-ink3);margin-top:20px}
@media(max-width:1100px){.gm-step-shot{margin:-20px -20px 16px}}
@media(max-width:900px){
  .gm-ladder .v7c-step{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:20px;align-items:center}
  .gm-step-shot{margin:-20px 0 -20px -20px;border-radius:15px 0 0 15px;box-shadow:1px 0 0 #ececec}
}
@media(max-width:768px){.gm-ladder .v7c-step{grid-template-columns:120px minmax(0,1fr);column-gap:16px}}
/* Upgrade round trip (.gm-trip, Oct 22): one screen per point, above the point's rule. Since Oct 23 the
   surface name sits in the point's label ("01 · In the widget"), not a chip. Three columns down to 769px; stacks at 768px with the screen capped at 440px. */
.gm-trip.v7c-points.is-3 li{border-top:0;padding-top:0}
.gm-trip-shot .v7-img{aspect-ratio:4/3}
.gm-trip-shot .v7-img:has(>img){aspect-ratio:1128/979} /* Oct 23: Phil's phone-frame exports are taller than 4:3; the slot takes their shape */
.gm-trip-shot .v7-img:has(>img){border:1px solid var(--v-line)!important}
.gm-trip-txt{border-top:1px solid var(--v-line);padding-top:24px;margin-top:28px}
@media(max-width:1024px){.gm-trip.v7c-points.is-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
@media(max-width:768px){
  .gm-trip.v7c-points.is-3{grid-template-columns:1fr;gap:48px}
  .gm-trip-shot{max-width:440px}
  .gm-trip-txt{margin-top:20px}
}
/* Surface map (.gm-surf): four places a step can live, from inside the chat to outside it.
   Gemini's reply is dashed (its words, not ours); the widget is outlined in black (where the
   controlled language lived). */
.gm-surf{margin-top:72px}
.gm-surf-axis{display:flex;align-items:center;gap:16px;margin-bottom:20px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink3)}
.gm-surf-axis i{flex:1;height:1px;background:var(--v-ink);position:relative}
.gm-surf-axis i::before,.gm-surf-axis i::after{content:'';position:absolute;top:-4px;border:4.5px solid transparent}
.gm-surf-axis i::before{left:0;border-right:7px solid var(--v-ink);border-left:0}
.gm-surf-axis i::after{right:0;border-left:7px solid var(--v-ink);border-right:0}
.gm-surf-axis-m{display:none}
.gm-surf-cols{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gm-surf-cols>li{background:#fff;border:1px solid #ececec;border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.04);display:flex;flex-direction:column}
.gm-surf-cols>li.is-theirs{background:transparent;border:1px dashed #bdbdbd;box-shadow:none}
.gm-surf-cols>li.is-key{border-color:var(--v-ink)}
.gm-surf-cols .v7-card-t{font-size:28px;margin:10px 0 6px}
.gm-surf-who{font-size:15px;line-height:1.45;color:var(--v-ink);font-weight:500}
.gm-surf-cols ul{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--v-line)}
.gm-surf-cols ul li{font-size:15px;line-height:1.45;color:var(--v-ink2);padding-left:14px;position:relative}
.gm-surf-cols ul li+li{margin-top:10px}
.gm-surf-cols ul li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:#9a9a9a}
.gm-surf-tag{margin-top:auto;padding-top:20px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink)}
.gm-pair .v7-img{aspect-ratio:4/3}
/* "Borrow, don't rebuild" (Oct 23): opaque, square desktop exports; the slot draws the corners and hairline.
   Chips sit bottom-left, the one corner that's empty in both screens. */
.gm-pair:not(.is-desk) .v7-img:has(>img){aspect-ratio:1128/957;border:1px solid var(--v-line)!important} /* error pair (Oct 23): framed phones on white, taller than 4:3 */
@media(max-width:768px){ /* chips would cover the phone; move them under the screen, like the before/after pills */
  .gm-pair:not(.is-desk) .v7c-frame:has(img){display:flex;flex-direction:column;align-items:flex-start}
  .gm-pair:not(.is-desk) .v7c-frame:has(img) .v7-img{align-self:stretch}
  .gm-pair:not(.is-desk) .v7c-frame:has(img) .v7c-chip{position:static;order:2;margin-top:12px}
}
.gm-pair.is-desk .v7-img{aspect-ratio:1128/892}
.gm-pair.is-desk .v7-img:has(>img){border:1px solid var(--v-line)!important;border-radius:16px}
.gm-pair.is-desk .v7c-chip{top:auto;bottom:16px}
.gm-surf figcaption{font-size:15px;color:var(--v-ink2);margin-top:20px}
/* Surface map on the dark stage (Oct 23): the map became Gemini's one black section. */
.v7c-dark .v7c-prose{color:rgba(255,255,255,.78)}
.v7c-dark .gm-surf-axis,.v7c-dark .gm-surf-axis-m{color:rgba(255,255,255,.6)!important}
.v7c-dark .gm-surf-axis i{background:#fff}
.v7c-dark .gm-surf-axis i::before{border-right-color:#fff}
.v7c-dark .gm-surf-axis i::after{border-left-color:#fff}
.v7c-dark .gm-surf-cols>li{background:#141414;border-color:rgba(255,255,255,.14);box-shadow:none}
.v7c-dark .gm-surf-cols>li.is-theirs{background:transparent;border-color:rgba(255,255,255,.32)}
.v7c-dark .gm-surf-cols>li.is-key{border-color:#fff}
.v7c-dark .gm-surf-cols .v7-card-t,.v7c-dark .gm-surf-who,.v7c-dark .gm-surf-tag{color:#fff}
.v7c-dark .gm-surf-cols ul{border-top-color:rgba(255,255,255,.14)}
.v7c-dark .gm-surf-cols ul li{color:rgba(255,255,255,.72)}
.v7c-dark .gm-surf-cols ul li::before{background:rgba(255,255,255,.45)}
.v7c-dark .gm-surf figcaption{color:rgba(255,255,255,.6)}
@media(max-width:1100px){
  .gm-surf-cols{grid-template-columns:1fr 1fr}
  .gm-surf-axis{display:none}
  .gm-surf-axis-m{display:block;margin-bottom:16px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink3)}
}
@media(max-width:768px){
  .gm-surf{margin-top:48px}
  .gm-surf-cols{grid-template-columns:1fr;gap:12px}
}

/* About · Off the clock strip (Oct 26): three images in a row; on phones one swipeable row (each card ~78% wide, next one peeks). */
.v7p-trio{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.v7p-trio .v7-img{aspect-ratio:4/3;min-height:0;border-radius:16px;background:#262626}
.v7c-dark .v7p-otc a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:768px){.v7p-trio{display:flex;gap:12px;margin:40px calc(-1*var(--v-pad)) 0;padding:0 var(--v-pad);scroll-padding-left:var(--v-pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.v7p-trio::-webkit-scrollbar{display:none}.v7p-trio li{flex:0 0 78%;scroll-snap-align:start}}
/* About trio captions (Oct 26): same treatment as the carousel captions on a dark stage */
.v7p-trio figcaption{font-size:14px;line-height:1.5;color:rgba(255,255,255,.7);margin-top:12px}
/* About hero caption (Oct 27): tighten the gap after it on desktop so the headline still clears the fold at 1440x900 */
@media(min-width:769px){.v7p-family-cap+.v7p-who{margin-top:40px}}
/* Eyebrow pill on small phones (Oct 27): below 480 it can't share the line, so it takes its own line on purpose, flush left, 6px below (it used to wrap with its 12px indent and no gap). */
@media(max-width:479px){.v7c-eyebrow{row-gap:6px}.v7c-eyebrow::after{content:"";flex-basis:100%;order:1}.v7c-eyebrow .v7-pill{order:2;margin-left:0}}

/* Gemini password page (Oct 27): work/gemini-locked.html, served in place of the case by the Netlify edge function.
   The smoke band holds a white card where the hero image would sit, flush on the band's bottom edge like the case heroes. */
.gm-gate .v7c-wide{max-width:1152px}
.gm-gate-card{position:relative;background:#fff;border-radius:16px 16px 0 0;padding:72px 80px 80px;box-shadow:0 -1px 2px rgba(0,0,0,.04),0 -24px 64px -28px rgba(0,0,0,.24)}
.gm-gate-form{margin-top:48px;max-width:560px}
.gm-gate-form .v7-lbl{margin-bottom:12px}
.gm-gate-row{display:flex;gap:12px;flex-wrap:wrap}
.gm-gate-row input{flex:1 1 240px;min-width:0;font-family:var(--v-sans);font-size:16px;line-height:22px;padding:13px 16px;border:1px solid #d4d4d4;border-radius:12px;background:#fff;color:var(--v-ink);transition:border-color .2s}
.gm-gate-row input:hover,.gm-gate-row input[aria-invalid="true"]{border-color:var(--v-ink)}
.gm-gate-row input:focus-visible{outline:2px solid var(--v-ink);outline-offset:2px;border-color:var(--v-ink)}
.v7 .gm-gate-row .v7-btn{cursor:pointer}
.gm-gate-err{margin-top:12px;font-size:15px;line-height:1.5;color:var(--v-ink);font-weight:500}
.gm-gate-ask{margin-top:40px;padding-top:24px;border-top:1px solid var(--v-line);font-size:17px;line-height:1.6;color:var(--v-ink2);max-width:560px}
.v7 .gm-gate-ask a.v7-link{display:inline;font:inherit;color:var(--v-ink);border-bottom:0;padding-bottom:0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(max-width:768px){.gm-gate-card{padding:40px 24px 48px}.gm-gate-form{margin-top:36px}}
@media(max-width:479px){.gm-gate-row .v7-btn{flex:1 1 100%}}