/* assets/v4/workshop.css: every style for /workshop (parts 1 and 2). Loads after site.css and course.css. Tokens only.
   Page frame
   .wk-banner  price bar under the header (navy); .wk-mark tiny yellow tick on that dark bar; .wk-bn-l live countdown
   .wk-sec     section spacing helper; .wk-col 760px reading column; .wk-wide full-width figure; .wk-mid centered narrow block
   .wk-big     big closing statement under a section (.sm = smaller); .wk-h3 sub-heading inside a column
   Hero
   .wk-hero    hero (tight 800-weight headline); .hx two columns from 900px; .wk-hero-t text column
   .wk-cta     button plus fine print (.mid centers it); .wk-fine fine print line; buttons are .btn-main.bevel with the price inside
   Boxes
   .wk-fig     cut-corner image frame (img width/height set in HTML); .wk-quote glass quote with .footer attribution
   .wk-n       small square number badge; .wk-says grid of glass quote tiles; .wk-pair two quotes side by side
   Part 1 sections
   .wk-idea 3 cards; .wk-jobs/.wk-job alternating image and text rows; .wk-steps 3 numbered cards; .wk-replays 2x2 figures with captions
   .wk-lanes 3 cards with image; .wk-cmpw/.wk-cmp comparison table (td.us = our dark column; td.wk-ck check, td.wk-x cross); .wk-result image plus quote
   Part 2 sections
   .wk-josh   photo and short bio row: .wk-josh > figure.wk-fig + div
   .wk-time   morning timeline list: ol.wk-time > li > b.time + text
   .wk-bonus-grid grid of .wk-bonus cards (figure.wk-fig + h3 + p + .wk-val value line, .wk-val s = struck old value)
   .wk-stack  stack list rows: ul.wk-stack > li > span.what + b.val ; .wk-total total row
   .wk-price-block price panel: .wk-now big price, .wk-deadline line, then a .wk-cta button
   .wk-seals / .wk-seal  three guarantee seals: article.wk-seal > figure.wk-fig + h3 + p
   .wk-fit    two lists: div.wk-fit > article.card (ul.fl2 for yes, ul.fl2.no for no)
   .wk-faq / .wk-q  FAQ rows: details.wk-q.bevel.bx > summary + .wk-a
   .wk-final  closing band: section.pic.wk-final > .wrap > article.card.glass.bevel.bx with h2, p, .wk-cta
   .wk-sticky fixed phone buy bar (hidden from 900px): div.wk-sticky > span.wk-sp + a.btn-main */

:root{interpolate-size:allow-keywords}
.wk-sec .hd h2{max-width:22ch;margin-inline:auto;font-size:clamp(1.9rem,2.6vw + 1rem,3.1rem);line-height:1.1;letter-spacing:-.025em}
.wk-sec .hd .sub{max-width:44rem}
.wk-sec{padding-block:clamp(72px,9vw,128px)}
.wk-col{max-width:760px;margin-inline:auto}
.wk-mid{max-width:760px;margin-inline:auto}
.wk-wide{max-width:960px;margin-inline:auto}
.wk-h3{margin:0 0 18px;font:700 clamp(1.3rem,1vw + 1rem,1.7rem)/1.2 var(--fd);color:var(--h)}
.wk-col .wk-h3:not(:first-child){margin-top:clamp(40px,5vw,64px)}
.wk-big{max-width:20ch;margin:clamp(32px,4vw,52px) auto 0;text-align:center;font:800 clamp(1.7rem,2.4vw + 1rem,2.7rem)/1.1 var(--fd);letter-spacing:-.03em;color:var(--it, var(--h))}
.wk-big.sm{max-width:30ch;font-size:clamp(1.3rem,1.2vw + 1rem,1.8rem);font-weight:700;letter-spacing:-.015em}
.d .wk-big{color:var(--h)}

/* banner */
.wk-banner{padding:12px 20px;text-align:center;font:500 .95rem/1.45 var(--fd);color:var(--white);background:var(--navy)}
.wk-banner[hidden]{display:none}
.wk-mark{display:inline-block;width:18px;height:4px;margin-right:10px;vertical-align:middle;background:var(--yellow)}
.wk-bn-l{display:block;font-weight:700;color:var(--white)}
@media(min-width:760px){.wk-bn-l{display:inline;margin-left:6px}}
.wk-bn-l[hidden]{display:none}

/* hero */
.wk-hero{padding-block:clamp(56px,8vw,128px)}
.wk-hero .hx{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
.wk-hero h1{max-width:12ch;font:800 clamp(2.9rem,8.4vw,5.4rem)/.98 var(--fd);letter-spacing:-.045em;color:var(--it)}
.wk-hero .lede{max-width:34rem;margin-top:22px;color:var(--it2)}
.wk-hero .eyebrow{color:var(--it3)}
@media(min-width:900px){.wk-hero .hx{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
/* fix round 8: wider hero from 1024 so it sits shorter (FB#7) */
@media(min-width:1024px){.wk-hero .wrap.hx{width:min(1360px,100% - 80px);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,5vw,80px)}.wk-hero h1{max-width:15ch}.wk-hero .lede{max-width:40rem}.wk-hero-t .wk-quote,.wk-hero .wk-fine{max-width:40rem}}
.wk-cta{display:grid;gap:12px;justify-items:start;margin-top:28px}
.wk-cta.mid{justify-items:center;margin-top:clamp(28px,4vw,44px)}
.wk-cta .btn-main{min-height:58px;padding:0 34px;font-size:1.15rem}
.wk-fine{max-width:30rem;font:500 .98rem/1.45 var(--fd);color:var(--it3, var(--mu))}
.d .wk-fine{color:var(--mu)}
@media(max-width:599px){.wk-cta{justify-items:stretch}.wk-cta .btn-main{width:100%}}

/* shared boxes */
.wk-fig{--cut:var(--bevel-lg);--bc:var(--gl);margin:0;background:var(--bar);overflow:hidden}
.wk-fig img{display:block;width:100%;height:auto}
.wk-quote{--cut:var(--bevel-lg);display:grid;gap:10px;margin:28px 0 0;padding:clamp(18px,2.4vw,26px);color:var(--it, var(--tx))}
.wk-quote p{font:600 clamp(1.1rem,.6vw + 1rem,1.3rem)/1.4 var(--fd);color:var(--it, var(--h))}
.wk-quote footer{font:400 .92rem/1.4 var(--fd);color:var(--it3, var(--mu))}
.wk-quote footer b{color:var(--it, var(--h))}
.d .wk-quote{color:var(--tx)}.d .wk-quote p,.d .wk-quote footer b{color:var(--h)}.d .wk-quote footer{color:var(--mu)}
.wk-hero-t .wk-quote{max-width:34rem}
.wk-mid.wk-quote{margin-top:clamp(28px,4vw,48px)}
.wk-n{display:inline-grid;place-items:center;width:40px;height:40px;margin-bottom:6px;font:800 1.2rem var(--fd);color:var(--white);background:linear-gradient(135deg,var(--cta-a),var(--cta-b));--cut:var(--bevel-md);--band-color:transparent}
.wk-pair{display:grid;gap:16px;margin-top:-10px}
.wk-pair .wk-quote{margin-top:0}
.wk-lead.wk-quote{max-width:46rem;margin:0 auto clamp(32px,4vw,56px);text-align:center}.wk-lead.wk-quote p{font-size:clamp(1.35rem,1.2vw + 1rem,1.85rem)}
@media(min-width:760px){.wk-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* idea, steps, lanes */
.wk-idea,.wk-steps,.wk-lanes{list-style:none;margin:0;padding:0}
.wk-idea .card h3,.wk-steps .card h3{font:700 1.3rem/1.2 var(--fd);letter-spacing:-.01em;color:var(--h)}
.wk-steps{margin-top:clamp(24px,3vw,36px)}
.wk-lanes .card{padding:14px 14px 24px;gap:12px}
.wk-lanes .card p{padding-inline:8px}
.wk-lane{display:grid;gap:8px;grid-template-rows:auto 1fr}
.wk-lane>.eyebrow{margin:0;padding-inline:4px}
.wk-lane>.card{height:100%}
.wk-lanes .wk-fig{margin-bottom:6px}
@media(max-width:899px){.wk-idea,.wk-steps,.wk-lanes{grid-template-columns:minmax(0,1fr)}}

/* problem */
.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)}
@media(min-width:760px){.wk-says{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.wk-says{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pic .wk-big{color:var(--it)}

/* jobs */
.wk-jobs{list-style:none;margin:0 auto;padding:0;display:grid;gap:clamp(36px,5vw,72px);max-width:1040px}
.wk-job{display:grid;gap:20px;align-items:center}
.wk-job h3{font:800 clamp(1.5rem,1.4vw + 1rem,2.1rem)/1.1 var(--fd);letter-spacing:-.02em;color:var(--h)}
.wk-job p{margin-top:10px;font:400 1.15rem/1.55 var(--fd);color:var(--tx)}
@media(min-width:800px){.wk-job{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px)}.wk-job:nth-child(even) .wk-fig{order:2}}

/* replays */
.wk-replays{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:grid;gap:clamp(22px,3vw,36px) 28px;grid-template-columns:minmax(0,1fr)}
.wk-replays li{display:grid;gap:14px;align-content:start}
.wk-replays p{font:600 1.1rem/1.4 var(--fd);color:var(--h)}
@media(min-width:760px){.wk-replays{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* comparison */
.wk-cmpw{--cut:var(--bevel-lg);max-width:960px;margin-inline:auto;overflow:hidden}
.wk-cmp{width:100%;border-collapse:collapse;color:var(--tx)}
.wk-cmp th,.wk-cmp td{padding:18px 22px;text-align:left;vertical-align:top;font:400 1.05rem/1.4 var(--fd);border-bottom:1px solid var(--gl)}
.wk-cmp thead th{font:700 .85rem var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.wk-cmp tbody th{font-weight:700;color:var(--h)}
.wk-cmp .us{color:var(--white);background:var(--navy);border-bottom-color:rgba(255,255,255,.14)}
.wk-cmp thead .us{color:var(--white)}
.wk-cmp tr:last-child th,.wk-cmp tr:last-child td{border-bottom:0}
.wk-ck,.wk-x{position:relative}
.wk-ck::before,.wk-x::before{content:"";display:inline-block;width:18px;height:18px;margin-right:10px;vertical-align:-3px;background-position:center;background-size:100%;background-repeat:no-repeat;clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
.wk-ck::before{background-color:var(--green-ll);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E")}
.wk-x::before{background-color:var(--red-ll);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E")}
@media(max-width:699px){
.wk-cmp,.wk-cmp tbody,.wk-cmp tr,.wk-cmp th,.wk-cmp td{display:block}
.wk-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wk-cmp tr{border-bottom:1px solid var(--gl)}
.wk-cmp tr:last-child{border-bottom:0}
.wk-cmp th,.wk-cmp td{border-bottom:0;padding:12px 18px}
.wk-cmp tbody th{padding-top:18px;font-size:1.1rem}
.wk-cmp td::after{content:attr(data-l);display:block;margin:4px 0 0 28px;font:600 .72rem var(--fd);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
}

/* proof */
.wk-result{display:grid;gap:22px;align-items:center}
.wk-result .wk-quote{margin-top:0}
.wk-result p{margin-top:14px;font:400 1.1rem/1.5 var(--fd);color:var(--tx)}
.wk-result .wk-fig{max-width:340px}
@media(min-width:760px){.wk-result{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}

/* part 2: Josh and morning */
.wk-josh{display:grid;gap:24px;align-items:center;max-width:960px;margin-inline:auto}
.wk-josh .wk-fig{max-width:360px}
.wk-josh h2{font:800 clamp(1.8rem,2.2vw + 1rem,2.8rem)/1.1 var(--fd);letter-spacing:-.025em;color:var(--h)}
.wk-josh p{margin-top:14px;font:400 1.15rem/1.6 var(--fd);color:var(--tx)}
@media(min-width:800px){.wk-josh{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:48px}}
.wk-time{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;gap:12px}
.wk-time li{--cut:var(--bevel-md);display:grid;gap:4px;padding:18px 22px;font:400 1.1rem/1.45 var(--fd);color:var(--tx);background:var(--bar);--bc:var(--gl)}
.wk-time .time{font:700 .9rem var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
@media(min-width:640px){.wk-time li{grid-template-columns:150px minmax(0,1fr);gap:18px}}

/* part 2: stack, bonuses, price */
.wk-stack{list-style:none;margin:0 auto;padding:0;max-width:760px}
.wk-stack li{display:flex;justify-content:space-between;gap:16px;padding:14px 4px;font:500 1.1rem/1.4 var(--fd);color:var(--tx);border-bottom:1px solid var(--gl)}
.wk-stack .val{flex:none;font-weight:700;color:var(--h)}
.wk-stack .wk-total{border-bottom:0;font-weight:800;color:var(--h)}
.wk-bonus-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.wk-bonus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wk-bonus{--cut:var(--bevel-lg);display:grid;gap:10px;align-content:start;padding:14px 14px 22px;color:var(--tx)}
.wk-bonus h3{padding-inline:8px;font:700 1.25rem/1.2 var(--fd);color:var(--h)}
.wk-bonus p{padding-inline:8px;font:400 1.05rem/1.5 var(--fd)}
.wk-bonus ol{margin:0;padding:0 8px 0 30px;display:grid;gap:6px;font:400 1.02rem/1.45 var(--fd)}
.wk-bonus ol b{color:var(--h)}
/* fix round 8: eight half tiles plus the Job Library full width at the end, no empty cell (FB#12) */
@media(min-width:640px){.wk-lib{grid-column:1/-1}}
@media(min-width:1000px){.wk-lib{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:28px}.wk-lib .wk-fig{grid-row:1/span 4}.wk-lib ol,.wk-lib h3,.wk-lib p{grid-column:2}}
.wk-val{padding-inline:8px;font:700 .95rem var(--fd);color:var(--ac)}
.wk-val s{color:var(--mu);font-weight:500}
.wk-price-block{--cut:var(--bevel-lg);display:grid;gap:10px;justify-items:center;max-width:620px;margin:clamp(32px,4vw,52px) auto 0;padding:clamp(26px,4vw,44px);text-align:center;color:var(--it, var(--tx))}
.wk-now{font:800 clamp(3.4rem,9vw,5.5rem)/1 var(--fd);letter-spacing:-.04em;color:var(--it, var(--h))}
.wk-was{font:600 1.3rem var(--fd);color:var(--it3, var(--mu))}
.wk-deadline{font:600 1.05rem/1.4 var(--fd);color:var(--it, var(--h))}
.wk-price-block .wk-cta{justify-items:stretch;width:100%;margin-top:14px}

/* part 2: guarantee */
.wk-seals{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.wk-seals{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wk-seal{--cut:var(--bevel-lg);display:grid;gap:12px;justify-items:center;align-content:start;padding:22px 18px 28px;text-align:center;color:var(--tx)}
.wk-seal .wk-fig{width:min(220px,70%)}
.wk-seal h3{font:700 1.3rem/1.2 var(--fd);color:var(--h)}
.wk-seal p{font:400 1.05rem/1.5 var(--fd)}

/* part 2: fit */
.wk-fit{display:grid;gap:clamp(14px,2vw,22px);max-width:960px;margin-inline:auto;grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){.wk-fit{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wk-fit h3{font:700 1.4rem/1.2 var(--fd);color:var(--h)}
.wk-fit .fl2 li{color:var(--tx)}

/* part 2: FAQ */
.wk-faq{display:grid;gap:12px;max-width:760px;margin-inline:auto}
.wk-q{--cut:var(--bevel-lg);background:var(--bar);color:var(--tx)}
.wk-q summary{position:relative;display:block;padding:18px 56px 18px 22px;font:700 1.1rem/1.35 var(--fd);color:var(--h);cursor:pointer;list-style:none}
.wk-q summary::-webkit-details-marker{display:none}
.wk-q summary::after,.wk-q summary::before{content:"";position:absolute;right:22px;top:50%;width:16px;height:3px;margin-top:-1.5px;background:var(--ac);transition:transform .2s}
.wk-q summary::before{transform:rotate(90deg)}
.wk-q[open] summary::before{transform:rotate(0)}
.wk-q summary:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
.wk-a{padding:0 22px 20px;font:400 1.05rem/1.6 var(--fd);color:var(--tx)}
.wk-q::details-content{block-size:0;overflow:clip;transition:block-size .25s ease,content-visibility .25s allow-discrete}
.wk-q[open]::details-content{block-size:auto}

/* part 2: final band and sticky bar */
.wk-final{padding-block:clamp(72px,9vw,128px)}
.wk-final .card.cta{max-width:760px;margin-inline:auto;text-align:center;justify-items:center;padding:clamp(28px,5vw,56px)}
.wk-final .card.cta h2{font:800 clamp(2rem,3vw + 1rem,3.4rem)/1.05 var(--fd);letter-spacing:-.03em;color:var(--h)}
.wk-final .wk-cta{justify-items:center}
.wk-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));color:var(--white);background:var(--navy);border-top:1px solid rgba(255,255,255,.18)}
.wk-sticky[hidden]{display:none}
.wk-sp{font:600 .9rem/1.3 var(--fd)}
.wk-sticky .btn-main{min-height:48px;padding:0 20px;font-size:1rem}
@media(max-width:899px){body{padding-bottom:72px}}
@media(min-width:900px){.wk-sticky{display:none}}

@media(prefers-reduced-motion:reduce){.wk-q::details-content,.wk-q summary::before,.wk-q summary::after{transition:none}}

/* design QA fixes */
a[data-buy] [data-price-now]{margin-left:.3em}
.wk-mid.wk-quote{margin-inline:auto}
.wk-lib .wk-fig{align-self:start}
.wk-lib .wk-fig img{aspect-ratio:1600/1040}
.wk-guar{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:minmax(0,1fr);justify-items:center}
.wk-guar .wk-seals{width:100%}
/* fix round 8: seals take the full row from 1024, the quote sits centered under them (FB#14) */
.wk-guar .wk-quote{margin:0;width:min(640px,100%);text-align:center}
.wk-final .wk-pair{margin-top:8px}
.wk-final .card.cta>h2{margin-bottom:18px}

/* fix round 1 */
.wk-strip{margin:14px 0 6px}
.wk-strip li{color:var(--it, var(--tx))}
.wk-bonus>.eyebrow{padding-inline:8px}

/* fix round 5: click an image to see it large (workshop-zoom.js) */
.wk-fig img[data-zoom]{cursor:zoom-in}
.wk-fig img[data-zoom]:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.wk-zoom{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:var(--ink);overscroll-behavior:contain}
.wk-zoom[hidden]{display:none}
.wk-zoom-f{margin:0;display:grid;gap:12px;justify-items:center;max-width:100%;max-height:100%}
.wk-zoom-f img{display:block;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain;cursor:default}
.wk-zoom-f figcaption{max-width:min(70ch,100%);font:400 1rem/1.45 var(--fd);color:var(--silver);text-align:center}
.wk-zoom-x{position:absolute;top:12px;right:12px;width:48px;height:48px;padding:0;display:grid;place-items:center;border:0;cursor:pointer;color:var(--white);background:linear-gradient(135deg,var(--cta-a),var(--cta-b));--cut:var(--bevel-ctl);--band-color:var(--cta-a)}
.wk-zoom-x:focus-visible{--band-color:var(--focus);outline:3px solid var(--focus);outline-offset:2px}

/* fix round 8 */
.wk-fig.wk-wide{margin-inline:auto}
@media(min-width:1024px){.wk-hero h1{font-size:clamp(3.2rem,4.4vw,4.6rem)}}