/* assets/v4/home-platform.css: kaizn.ai homepage rebuild (decision 6472). Loads after home.css. Colors from tokens.css only.
   Photo frames: .pf is the bevel host with NO padding; the image is the inner .bevel-in, flush to the cut (spec: beveled-corners 2026-10-19). */
.home .k-home .k-na{margin-left:auto}
.home .k-home .k-na .k-login{display:inline-flex}
.home .k-home .k-na .k-cta{display:inline-flex}
@media(max-width:900px){.home .k-home .k-na .k-login,.home .k-home .k-na .k-cta{display:inline-flex}}
@media(max-width:380px){.home .k-home .k-lg img{max-width:104px}.home .k-home .k-cta{padding:8px 12px}}
.pf{display:block;width:100%;height:auto;min-height:0;place-items:normal;font:inherit;justify-self:stretch;--cut:var(--bevel-lg);--band:1px;--band-color:var(--line);margin:0;padding:0;overflow:visible}
.pf:hover{--band-color:var(--line)}
.pf img{width:100%;height:auto}
/* hero mock: the picture is a dark panel on a darker field. Crop to the panel's own border box (x 93..2307, y 93..1707 of 2400x1800) and clip to the panel's own chamfer (21px), so the frame is the panel's line and nothing of it is cut. The shadow sits on the figure, outside the clip. */
.pf.hf-hero-fig{--cut:0;--band:0;--band-color:transparent;background:none;filter:drop-shadow(0 28px 44px rgba(0,0,0,.45));overflow:visible}
.pf .crop{overflow:hidden;aspect-ratio:2214/1614;clip-path:polygon(.95% 0,99.05% 0,100% 1.3%,100% 98.7%,99.05% 100%,.95% 100%,0 98.7%,0 1.3%)}
.pf .crop img{width:108.401%;max-width:none;margin:-4.2005% 0 0 -4.2005%}
/* .bevel-in (tokens.css) bevels every photo corner; a tile photo meets text below, so only its top corners are cut */
@supports(corner-shape:bevel){.tile .shot img{border-radius:calc(var(--cut) - var(--band)) calc(var(--cut) - var(--band)) 0 0;corner-shape:bevel}}
@supports not (corner-shape:bevel){.tile .shot img{border-radius:0}}
.home .eyebrow{margin-bottom:14px}
.hero-copy .eyebrow{color:var(--it3)}
.hero-copy .lede{margin-top:clamp(22px,2.2vw,32px);font-size:clamp(1.1rem,.5vw + 1rem,1.3rem);line-height:1.5;text-wrap:balance}
.hero-copy .acts{margin-top:clamp(32px,3.4vw,48px)}
.hero-copy .member{margin:18px 0 0;font:400 1rem/1.4 var(--fd);color:var(--it2)}
.member a,.fine a{color:var(--it);font-weight:600;text-underline-offset:4px}
.member a:hover,.fine a:hover{color:var(--ac)}
.btn-main{min-height:52px;padding-inline:30px}
.home .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4.5vw,80px);align-items:center}
.home .hero-grid h1{max-width:12ch;font-size:clamp(2.5rem,3.3vw + .9rem,4.6rem);line-height:1.08;text-wrap:balance}
.hero-copy>:last-child{margin-bottom:0}
.hero-copy .member+.member{margin-top:8px}
.hero-copy .eyebrow{margin-bottom:18px}
.home .hf-hero-fig{width:100%;justify-self:stretch}

/* S2: Kai swamped by mail, then sorted (ported from /workshop #problem at 46fb227; decision 6392). Script: workshop/2026-11-11-workshop-problem-v01.js sets .wk-pb-js, .is-seen, .is-in, .is-tidy on the section. Without the script, or with reduced motion, both pictures and the three lines show still. */
#problem{overflow-x:clip}
.wk-says{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.wk-says li{--cut:var(--bevel-lg);padding:22px 24px;font:600 clamp(1.1rem,.5vw + 1rem,1.3rem)/1.4 var(--fd);color:var(--it)}
#problem .wk-pb{display:grid;gap:clamp(24px,4vw,48px);max-width:1000px;margin:0 auto;align-items:center}
#problem .wk-pb-fig{--cut:var(--bevel-lg);--bc:var(--gl);margin:0;background:var(--bar);overflow:hidden;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px}
#problem .wk-pb-fig>div{position:relative;background:var(--bar)}
#problem .wk-pb-fig img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
#problem .wk-pb-cap{display:block;padding:10px 14px;font:700 .95rem/1.3 var(--fd);color:var(--h);background:var(--bar)}
#problem .wk-pb .wk-says{max-width:none;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){#problem .wk-pb .wk-says{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){#problem .wk-pb .wk-says{grid-template-columns:repeat(3,minmax(0,1fr))}}
#problem .wk-pb .wk-says li{margin:0}
#problem.wk-pb-js .wk-pb{grid-template-columns:minmax(0,1fr)}
#problem.wk-pb-js .wk-pb-fig{display:block;position:relative;max-width:340px;width:100%;margin-inline:auto}
#problem.wk-pb-js .wk-pb-fig>div{position:relative}
#problem.wk-pb-js .wk-pb-fig>div+div{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
#problem.wk-pb-js .wk-pb-cap{position:absolute;left:0;bottom:0;right:0}
#problem.wk-pb-js.is-tidy .wk-pb-fig>div+div{opacity:1}
@media(min-width:900px){#problem.wk-pb-js .wk-pb{grid-template-columns:minmax(0,340px) minmax(0,1fr)}#problem.wk-pb-js .wk-pb-fig{margin:0}}
#problem.wk-pb-js .wk-pb .wk-says{--k:.5;grid-template-columns:minmax(0,1fr);gap:22px;padding:14px 12px}
@media(min-width:900px){#problem.wk-pb-js .wk-pb .wk-says{--k:1;gap:30px;padding:14px 20px}}
#problem.wk-pb-js .wk-says li{--tx:calc(var(--mx,0) * 1px * var(--k));--ty:calc(var(--my,0) * 1px);transform:translate(var(--tx),var(--ty)) rotate(calc(var(--mr,0) * 1deg));transition:transform 1.1s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--i) * .1s)}
#problem.wk-pb-js .wk-says li:nth-child(1){--i:0;--mx:-14;--my:2;--mr:-1.4}
#problem.wk-pb-js .wk-says li:nth-child(2){--i:1;--mx:16;--my:-2;--mr:1.2}
#problem.wk-pb-js .wk-says li:nth-child(3){--i:2;--mx:-8;--my:2;--mr:-1}
#problem.wk-pb-js .wk-says li:nth-child(4){--i:3;--mx:18;--my:-2;--mr:1.5}
#problem.wk-pb-js .wk-says li:nth-child(5){--i:4;--mx:-16;--my:2;--mr:-1.6}
#problem.wk-pb-js .wk-says li:nth-child(6){--i:5;--mx:10;--my:-2;--mr:1}
#problem.wk-pb-js:not(.is-seen) .wk-says li{opacity:0}
#problem.wk-pb-js.is-in:not(.is-tidy) .wk-says li{animation:wk-pb-in .9s cubic-bezier(.3,.6,.3,1) backwards;animation-delay:calc(var(--i) * .12s)}
#problem.wk-pb-js.is-tidy .wk-says li{transform:none;animation:none;opacity:1}
@keyframes wk-pb-in{0%{opacity:0;transform:translate(calc(var(--tx) + 24px),calc(var(--ty) - 24px)) rotate(4deg)}100%{opacity:1;transform:translate(var(--tx),var(--ty)) rotate(calc(var(--mr) * 1deg))}}
@media(prefers-reduced-motion:reduce){#problem .wk-pb-fig>div+div,#problem .wk-says li{transition:none!important;animation:none!important}}

/* S3: tiles (decision 6557). Four in one row from 1280px, a 2x2 grid below that, one column on a phone. Equal heights; every picture sits in the same 3:2 box. */
.tiles{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.tile{--cut:var(--bevel-lg);display:flex;flex-direction:column;padding:0;overflow:visible}
.tile .shot{display:block;width:100%;margin:0}
.tile .shot img{aspect-ratio:3/2;object-position:50% 0;object-fit:cover;width:100%;height:auto}
.tile .shot.sq img{object-fit:contain;object-position:50% 50%;background:var(--ground)}
.tile.guide .shot{padding:clamp(12px,1.4vw,18px) clamp(12px,1.4vw,18px) 0}
.here{display:inline-flex;width:fit-content;padding:3px 10px;font:700 .75rem/1.3 var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--h);border:1px solid var(--accent);position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tile .tx{flex:1;display:grid;gap:8px;align-content:start;padding:clamp(18px,2vw,26px);padding-top:clamp(16px,1.8vw,22px)}
.tile h3{font-size:clamp(1.3rem,.8vw + 1rem,1.6rem);line-height:1.15;color:var(--h)}
.tile p{font:400 1.05rem/1.5 var(--fd);color:var(--tx)}
.tile .kick{color:var(--ac)}
.after-grid{margin-top:clamp(26px,3.4vw,44px)}

/* S4: the roadmap. Desktop: one winding SVG road above a five-column ordered list; phone: the same road turned vertical. */
.road{position:relative}
.rd-h{display:block;width:100%;height:auto;overflow:visible}
.rd-body{fill:none;stroke:var(--line);stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
.rd-fill{fill:none;stroke:var(--pg);stroke-width:29;stroke-linecap:round;stroke-linejoin:round}
.rd-live{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.rd-node{stroke-width:3}
.rd-node{fill:var(--accent);stroke:var(--ground)}
.rd-num{font:700 22px var(--fd);text-anchor:middle;dominant-baseline:central}
.rd-num{fill:var(--white)}
.rd-tag rect{fill:var(--ground);stroke:var(--accent);stroke-width:2}
.rd-tag text{font:700 14px var(--fd);fill:var(--h);text-anchor:middle;dominant-baseline:central}
.rd-flag line{stroke:var(--h);stroke-width:3;stroke-linecap:round}
.rd-flag path{fill:var(--accent)}
.stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:6px 0 0;padding:0;list-style:none}
.stops li{display:flex;padding-inline:8px}
.stops li>.stop{flex:1}
.stop{--cut:var(--bevel-lg);display:grid;gap:8px;align-content:start;height:100%;padding:16px 16px 18px;margin:0}
.stop h3{font-size:1.1rem;line-height:1.2;color:var(--h)}
.stop p{font:400 .95rem/1.45 var(--fd);color:var(--tx)}
.stops .n,.rd-v{display:none}
.road-note{margin-top:clamp(20px,2.4vw,30px);text-align:center;display:grid;gap:6px}
.road-note p{font:400 1rem/1.45 var(--fd);color:var(--it2)}
.road-note .big{font:600 1.15rem/1.4 var(--fd);color:var(--it)}
.after-grid{display:flex;justify-content:center}

@media(max-width:1000px){
 .rd-h{display:none}
 .road{padding-left:0}
 .stops{display:block;position:relative;margin-top:0}
 .road::before,.stops::before,.stops::after{content:"";position:absolute;top:0;bottom:0;-webkit-mask:none;mask:none}
 .road::before{left:5px;width:34px;background:var(--line);z-index:0}
 .stops::before{left:8px;width:28px;background:var(--pg);z-index:0}
 .stops::after{left:21px;width:2px;z-index:0;background:repeating-linear-gradient(to bottom,var(--accent) 0 6px,transparent 6px 14px)}
 .stops li{position:relative;z-index:1;padding:0 0 18px 68px}
 .stops li:last-child{padding-bottom:0}
 .stops .n{display:grid;position:absolute;left:0;top:calc(50% - 9px);transform:translateY(-50%);place-items:center;width:44px;height:44px;font:700 1.2rem var(--fd);--cut:var(--bevel-md);--band:2px;--band-color:var(--ground)}
 .stops .n{color:var(--white);background:var(--accent)}
 .stops .n:hover{--band-color:var(--ground)}
 .here{position:static;width:fit-content;height:auto;overflow:visible;clip:auto}
 .stop{height:auto;padding:16px 18px}
 .stop p{font-size:1rem}
}
@media(max-width:900px){
 .home .hero-grid{grid-template-columns:minmax(0,1fr)}
 .home .hf-hero-fig{max-width:560px;justify-self:center}
 .home .hero-grid h1{max-width:none}
}
@media(max-width:1279px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.tiles{grid-template-columns:minmax(0,1fr);max-width:480px;margin-inline:auto}}
@media(max-width:480px){
 .hero-copy .acts .btn-main{width:100%}
}
.final{display:grid;justify-items:center;gap:0;text-align:center}
.final .sub{margin-inline:auto}
.final .acts{margin-top:26px;justify-content:center}
.final .fine{margin-top:16px;color:var(--it2)}
.incl{display:grid;gap:10px;margin:22px 0 4px;padding:0;list-style:none;text-align:left}
.incl li{position:relative;padding-left:30px;font:600 1.1rem/1.4 var(--fd);color:var(--it)}
.incl li::before{content:"";position:absolute;left:0;top:.3em;width:14px;height:14px;background:var(--accent);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}

/* Private by design block (decision 6520): one beveled glass card, tokens only */
.priv-c{max-width:52rem;margin-inline:auto}
.priv-c .eyebrow{margin:0}
.priv-l{width:fit-content;color:var(--it);font:600 1.0625rem/1.4 var(--fd);text-underline-offset:4px}
.priv-l:hover{color:var(--ac)}

/* Live workshop band (decision 6530): tokens only, reuses the privacy card */
.live-c h2{margin:0;color:var(--it)}
.live-c p{margin:0}
.live-c .btn-main{width:fit-content}

/* Page rhythm (decision 6535): one section padding, the two small bands side by side under the hero */
.home main>.pic{padding-block:clamp(56px,7vw,112px)}
.home main>.pic.hero-full{padding-block:clamp(40px,5vw,80px);min-height:min(calc(100svh - 80px),820px)}
.home main>.pic.duo{padding-block:clamp(24px,3vw,40px)}
.duo-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:stretch}
.duo-g .priv-l{margin-top:auto;padding-top:4px}
.duo-g .priv-c{display:flex;flex-direction:column;gap:12px;max-width:none;margin:0;padding:clamp(20px,2.4vw,32px)}
@media(max-width:800px){.duo-g{grid-template-columns:minmax(0,1fr)}}
/* Kai Link tile: the picture is a light panel; in the dark theme it is inverted into the dark tile look */
.hf-tp{display:flex;justify-content:center;text-align:center}
.hf-tp .tpb{justify-content:center;flex-wrap:wrap}

/* Kai Link tile: the three steps as HTML, one border per box, arrows between, stacked on a phone */
.tile.guide .shot.kl{display:grid;grid-template-columns:minmax(0,1fr);align-content:stretch;aspect-ratio:3/2;gap:6px;padding:clamp(12px,1.4vw,18px) clamp(12px,1.4vw,18px) 0}
.klb{--cut:var(--bevel-md);--bc:var(--line);display:grid;align-content:center;gap:6px;min-height:0;padding:8px 14px;background:var(--pg);font:600 1rem/1.3 var(--fd);color:var(--h)}
.klb code{font:500 .85rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--it);overflow-wrap:anywhere}
.kla{display:none;align-self:center;justify-self:center;width:14px;height:16px;background:var(--accent);clip-path:polygon(0 0,100% 50%,0 100%)}
.kld{display:flex;gap:6px}.kld i{flex:1;max-width:40px;height:8px;background:var(--line)}.kld i.on{background:var(--accent)}

/* proof: the text-message pair reads as one block, the quote card matches the screenshot's height */
@media(min-width:720px){.home .wl{align-items:stretch}.home .wl .gp{align-content:center;padding-inline:clamp(24px,3vw,40px)}}

/* Private by design, front and center (decision 6548). Tokens only, beveled boxes via .bevel. */
.priv-s .priv-hd{display:grid;justify-items:center;text-align:center;gap:0;margin-bottom:clamp(28px,4vw,48px)}
.priv-s .priv-hd .eyebrow{margin-bottom:14px}
.priv-s h2{margin:0;color:var(--it);font:800 clamp(2.1rem,4.6vw + .6rem,4.2rem)/1.06 var(--fd);letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
.priv-sub{margin:20px auto 0;max-width:34rem;color:var(--it);font:500 clamp(1.15rem,.6vw + 1rem,1.45rem)/1.45 var(--fd)}
.priv-s .priv-l{margin-top:18px}
.priv-card{--cut:var(--bevel-xl);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:clamp(12px,2vw,28px);max-width:860px;margin-inline:auto;padding:clamp(16px,2.4vw,28px)}
.priv-side{--cut:var(--bevel-lg);--bc:var(--gl);display:grid;align-content:center;gap:14px;padding:clamp(18px,2.4vw,28px);background:var(--bar);min-width:0}
.priv-lab{font:700 .8125rem/1 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.priv-doc{margin:0;font:600 clamp(1.1rem,.5vw + 1rem,1.3rem)/1.7 var(--fd);color:var(--h)}
.priv-doc b{font-weight:800}
.priv-enc{background:var(--navy);--bc:var(--line)}
.priv-enc .priv-lab{color:var(--fog)}
.priv-enc .priv-ct{font:500 clamp(1.05rem,.4vw + .95rem,1.2rem)/1.7 var(--fm);color:var(--silver);overflow-wrap:anywhere;letter-spacing:.02em}
.priv-chip{--cut:var(--bevel-sm);--bc:var(--line);justify-self:start;padding:5px 10px;font:700 .8125rem/1 var(--fm);color:var(--white);background:var(--graphite);letter-spacing:.04em}
.priv-mid{display:grid;place-items:center;color:var(--accent)}
.priv-mid .ic{width:36px;height:36px}
@media(max-width:700px){.priv-card{grid-template-columns:minmax(0,1fr)}.priv-mid .ic{width:30px;height:30px}}
.priv-sub .nb{white-space:nowrap}

/* Hero picture sizes (decision 6557): a 1200px file on phones, a 2400px file on larger screens. Only this stylesheet's pages (the homepage and Kaizn Premium) use these. */
.home .pic-layered-peaks{--pic-d:url(/assets/imagery/backgrounds-v1/2026-11-12-layered-peaks-2400-v01.webp);--pic-l:url(/assets/imagery/backgrounds-v4/2026-11-12-layered-peaks-day-2400-v01.webp)}
@media(max-width:900px){.home .pic-layered-peaks{--pic-d:url(/assets/imagery/backgrounds-v1/2026-11-12-layered-peaks-1200-v01.webp);--pic-l:url(/assets/imagery/backgrounds-v4/2026-11-12-layered-peaks-day-1200-v01.webp)}}

/* One calm reveal (decision 6557). assets/v4/2026-11-12-reveal-v01.js adds .rv to blocks that start below the first screen and .in when they scroll into view, once. No script or reduced motion: nothing is hidden. */
@media(prefers-reduced-motion:no-preference){
 .rv{opacity:0;transform:translateY(16px);transition:opacity 500ms cubic-bezier(.22,1,.36,1),transform 500ms cubic-bezier(.22,1,.36,1)}
 .rv.in{opacity:1;transform:none}
 .btn-main,.btn-glass{transition:transform 150ms ease-out,filter 150ms ease-out}
 .btn-main:hover,.btn-glass:hover{transform:translateY(-1px);filter:brightness(1.06)}
 .btn-main:active,.btn-glass:active{transform:none}
}

/* the live workshop band sits right under the privacy section, so the privacy section keeps a shorter bottom pad (decisions 6530, 6535) */
.home main>.pic.priv-s{padding-bottom:clamp(28px,3.5vw,56px)}

/* Academy tile: the four course covers in a 2x2 grid, each keeps its full 16:9 (decision 6556) */
.tile .shot.cvg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:6px;aspect-ratio:3/2;padding:clamp(8px,1vw,12px);background:var(--ground)}
.tile .shot.cvg img{aspect-ratio:16/9;object-fit:cover;object-position:50% 50%;border-radius:0}
@supports(corner-shape:bevel){.tile .shot.cvg img{border-radius:var(--bevel-sm);corner-shape:bevel}}