/* modes-pages.css: rules for pages rebuilt onto the -modes system (loaded after modes.css). Mockup only. */
/* ---- old bodies wearing the -modes chrome (.pgo) ---- */
.pgo .oldbody{font-family:var(--sans)}
.pgo .oldbody h1,.pgo .oldbody h2,.pgo .oldbody h3{font-family:var(--serif)!important;font-weight:400!important;font-style:normal!important}
.pgo .oldbody em,.pgo .oldbody i,.pgo .oldbody [style*="italic"]{font-style:normal!important}
.pgo .oldbody{overflow-x:clip}
.pgo .oldbody .fonav,.pgo .oldbody #mcta,.pgo .oldbody #stickyCta{display:none!important}
body.pgo{display:block!important;padding:0!important;margin:0!important;text-align:left!important;min-height:0!important;background:var(--cream)!important;color:var(--ink);font-family:var(--sans)!important;overflow-x:hidden}
body.pgo>.oldbody{display:block;width:100%}
/* Ohad, Oct 29: the top bar scrolls away with the page at every width. Never sticky, fixed or pinned. */
body.pgx .nav,body.pgx .nav.solid,body.pgo .nav,body.pgr .nav{position:relative!important;top:auto!important;z-index:5}
html{scroll-padding-top:0}
/* Industry template (for-*.html), mobile first */
.pgi .ix2{display:grid;gap:16px;margin-top:22px}
.pgi .ixc{background:#fff;border-radius:22px;padding:20px;box-shadow:0 0 0 1px rgba(20,18,22,.08),0 18px 36px -24px rgba(20,18,22,.35)}
.pgi .ixl{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pgi .ixl li{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px;padding:9px 12px;border-radius:12px;background:var(--cream)}
.pgi .ixl b{font-family:var(--mono);font-size:12px;white-space:nowrap;padding:3px 8px;border-radius:6px;color:#fff;background:#12834E}
.pgi .ixl b.r3{background:#1E78B8}.pgi .ixl b.r2{background:#7149C9}.pgi .ixl b.r1{background:#fff;color:var(--body);box-shadow:inset 0 0 0 1px rgba(20,18,22,.15)}
.pgi .ixn{font-size:12.5px;color:var(--mute);margin:12px 0 0}
.pgi .ixb{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pgi .ixb .btn{flex:1 1 auto;justify-content:center}
.btn.gh{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media(min-width:900px){.pgi .ix2{grid-template-columns:1fr 1fr;align-items:start}}
/* Learn chapter (field-notes, lessons, education): light blue */
.pgl .brush,.pgl .kick{color:#1E78B8}
.pgl .lsn{background:#fff;border-radius:22px;padding:24px 22px;box-shadow:0 0 0 1px rgba(20,18,22,.08),0 18px 36px -24px rgba(20,18,22,.35);border-top:6px solid #1E78B8;max-width:420px;margin:0 auto;display:grid;gap:6px}
.pgl .lsn .chk{color:#1E78B8}
.pgl .lsn b{font-family:var(--serif);font-weight:400;font-size:clamp(44px,12vw,64px);line-height:1.05;color:#1E78B8;margin-top:8px}
.pgl .lsn small{font-size:14px;color:var(--body)}
.pgl .lsf{display:flex;gap:8px;margin-top:14px}
.pgl .lsf span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:7px;background:#1E78B8;color:#fff}
.pgl .lsf span+span{background:var(--cream);color:var(--ink)}
.pgl .fnx{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}
.pgl .fni{display:flex;gap:14px;align-items:center;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 0 0 1px rgba(20,18,22,.08);text-decoration:none;color:var(--ink);font-weight:600}
.pgl .fni b{font-family:var(--mono);font-size:12px;background:#1E78B8;color:#fff;border-radius:7px;padding:4px 8px;font-weight:500}
.pgl .fni:hover{box-shadow:0 0 0 2px #1E78B8}
@media(min-width:700px){.pgl .fnx{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.pgl .fnx{grid-template-columns:repeat(4,1fr)}}
.pgl .fnm{margin:18px 0 0;font-size:14px}.pgl .fnm a{color:#1E78B8;font-weight:700}
.pgl .pc4.k-learn .pn b{background:#1E78B8}
.pgl .h2 .pk{color:#1E78B8}
.pgl .lsd{display:grid;gap:16px;margin-top:20px}
.pgl .lsd .dsk{border-top:6px solid #1E78B8}
.pgl .lsq{background:#fff;border-radius:22px;padding:22px 20px;box-shadow:0 0 0 1px rgba(20,18,22,.08)}
.pgl .lsq .chk{color:#1E78B8}
.pgl .lsq ol{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;font-size:15px}
.pgl .lsv{max-width:420px;margin:0 auto}
@media(min-width:900px){.pgl .lsd{grid-template-columns:1fr 1fr}}
/* flow pages (welcome, no-charge, day-one, 404): pgf */
.pgf .fcd{background:#fff;border-radius:22px;padding:24px 22px;box-shadow:0 0 0 1px rgba(20,18,22,.08),0 18px 36px -24px rgba(20,18,22,.35);border-top:6px solid var(--pink);max-width:420px;margin:0 auto;display:grid;gap:6px}
.pgf .fcd .chk{color:var(--pinkd)}
.pgf .fcd .fbg{font-family:var(--serif);font-weight:400;font-size:clamp(44px,12vw,64px);line-height:1.05;color:var(--ink);margin-top:6px}
.pgf .fcd small{font-size:14px;color:var(--body)}
.pgf .fcd ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.pgf .fcd li{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:14px;padding:9px 12px;border-radius:12px;background:var(--cream)}
.pgf .fcd li b{font-weight:700;text-align:right}
.pgf .fcd li b a{color:var(--pinkd)}
.pgf .fcd li b.g{color:#12834E}
.pgf .fcd li i{font-style:normal;font-family:var(--mono);font-size:15px}
.pgf .fft{font-size:12px;color:var(--mute);margin:10px 0 0;line-height:1.5}
.pgf .fnt{display:grid;gap:14px;margin-top:20px}
.pgf .fnc{display:block;background:#fff;border-radius:22px;padding:20px;box-shadow:0 0 0 1px rgba(20,18,22,.08);text-decoration:none;color:inherit}
.pgf .fnc .chk{color:var(--pinkd)}
.pgf .fnc p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--body)}
.pgf .fnc p a,.pgf .fnc p b{color:var(--pinkd);font-weight:700}
.pgf .fnc.big{text-align:center;padding:26px 16px}
.pgf .fnc.big b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(56px,16vw,88px);line-height:1;color:#E8590C}
.pgf .fnc.big b i{font-style:normal}
.pgf .fnc.big span{display:block;margin-top:8px;font-size:14px;color:var(--body)}
.pgf .fnt.two{grid-template-columns:1fr 1fr}
.pgf .fill{font-size:12.5px;color:var(--mute);margin:12px 0 0}
.pgf .fbt{margin-top:14px;width:100%;justify-content:center}
@media(min-width:900px){.pgf .fnt{grid-template-columns:1fr 1fr}}
body.pgo em,body.pgo cite{font-style:normal!important}
/* 320 overflow guard: industry mix card */
.pgi .ix2{grid-template-columns:minmax(0,1fr)}
.pgi .tmx{min-width:0}
.pgi .tmx li{grid-template-columns:minmax(0,1fr) auto auto}
@media(max-width:359px){.pgi .tmx{padding:16px}.pgi .tmx li{gap:6px;padding:9px 9px;font-size:13px}.pgi .tmx li em,.pgi .tmx li b{font-size:12px}}
@media(min-width:900px){.pgi .ix2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* 404 routes */
.pgf .rts .rt{display:grid;gap:6px;border-top:5px solid var(--pink);transition:transform .2s ease,box-shadow .2s ease}
.pgf .rts .rt:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(20,18,22,.1),0 22px 40px -26px rgba(20,18,22,.45)}
.pgf .rt .rth{font-family:var(--serif);font-weight:400;font-size:clamp(24px,6.4vw,30px);line-height:1.15;color:var(--ink);margin-top:4px}
.pgf .rt p{margin:2px 0 0}
.pgf .rt .rtb{margin-top:10px;font-weight:700;color:var(--pinkd);font-size:15px}
.pgf .fql{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pgf .fql a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(20,18,22,.1);color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}
.pgf .fql a:hover{color:var(--pinkd)}
@media(prefers-reduced-motion:reduce){.pgf .rts .rt{transition:none}.pgf .rts .rt:hover{transform:none}}
/* ticker track: modes.css has a global .tr (progress bar, 8px tall, cream) that squashed the ticker */
.tick .tr{height:auto;border-radius:0;background:none;margin-top:0;overflow:visible;align-items:center}
/* Ohad, Oct 29: the Learn hero cards sit centred, like the hero around them, at every width */
.pgl .lsn{text-align:center;justify-items:center}
.pgl .lsn .chk{justify-content:center}
.pgl .lsn .lsf{justify-content:center}
.pgl .lsn b,.pgl .lsn small,.pgl .lsn .chk{text-wrap:balance}
.pgf .fcd>.chk,.pgf .fcd>.fbg,.pgf .fcd>small{text-align:center;justify-self:center}

/* fo-vlad: the value ladder (Field note 01 and the Field Notes index). Ohad, Oct 29 */
.vlad{display:grid;gap:14px;margin-top:22px;background:#fff;border-radius:22px;padding:22px 20px;box-shadow:0 0 0 1px rgba(20,18,22,.08),0 18px 36px -24px rgba(20,18,22,.35);border-top:6px solid #1E78B8}
.vr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 14px;align-items:baseline}
.vl{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.vv{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--body);white-space:nowrap}
.vr.hi .vl{font-weight:800}.vr.hi .vv{color:#1E78B8;font-size:14px}
.vb{grid-column:1/-1;position:relative;display:block;height:10px;border-radius:999px;background:rgba(20,18,22,.06);overflow:hidden}
.vb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--lo);background:rgba(30,120,184,.14)}
.vb i{position:absolute;top:0;bottom:0;left:var(--lo);width:calc(var(--hi) - var(--lo));border-radius:999px;background:#7FB0D6;transform-origin:left center;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.vr.hi .vb i{background:#1E78B8}
.vlad.in .vb i{transform:none}
.vlad.in .vr:nth-child(2) .vb i{transition-delay:.12s}.vlad.in .vr:nth-child(3) .vb i{transition-delay:.24s}
.vlad.in .vr:nth-child(4) .vb i{transition-delay:.36s}.vlad.in .vr:nth-child(5) .vb i{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){.vb i{transform:none!important;transition:none!important}}
.vnote{font-size:12.5px;line-height:1.55;color:var(--mute);margin:14px auto 0;max-width:720px;text-align:center;font-style:italic}
.vtwo{display:grid;gap:14px;margin-top:16px}
.vcard{background:#fff;border-radius:22px;padding:22px 20px;box-shadow:0 0 0 1px rgba(20,18,22,.08);display:grid;gap:6px;text-align:center;justify-items:center}
.vcard .chk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.vcard b{font-family:var(--serif);font-weight:400;font-size:clamp(38px,10vw,52px);line-height:1.05;color:var(--ink)}
.vcard.hi{border-top:6px solid #1E78B8}.vcard.hi .chk,.vcard.hi b{color:#1E78B8}
.vcard p{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--body);max-width:440px}
@media(min-width:900px){
 .vlad{padding:30px 36px;gap:18px}
 .vr{grid-template-columns:270px minmax(0,1fr) 120px;align-items:center;gap:0 22px}
 .vl{font-size:16px}.vv{grid-column:3;grid-row:1;text-align:right;font-size:14px}.vr.hi .vv{font-size:15px}
 .vb{grid-column:2;grid-row:1;height:12px}
 .vtwo{grid-template-columns:1fr 1fr;gap:18px}
}
/* Freebies library + industry code sheets (ported from PR #14, modes style: white cards, pillar top rule, no pastels) */
.fbk{display:block;background:#fff;border-radius:18px;border-top:5px solid var(--c,var(--pinkd));padding:16px 18px;box-shadow:0 0 0 1px rgba(20,18,22,.08),0 18px 36px -26px rgba(20,18,22,.35);min-width:0}
.fbk[hidden],.cdl li[hidden]{display:none}
.fbk summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;position:relative;padding-right:34px;min-height:44px}
.fbk summary::-webkit-details-marker{display:none}
.fbk summary::after{content:"+";position:absolute;right:0;top:-2px;font-size:26px;line-height:1;font-weight:500;color:var(--pinkd)}
.fbk[open] summary::after{content:"\2013"}
.fbk summary .chk{color:var(--c,var(--pinkd))}
.fbk summary b{font-size:18px;line-height:1.25;font-weight:700;color:var(--ink)}
.fbk summary small{font-size:14.5px;line-height:1.5;color:var(--body)}
.fbi{margin-top:14px;padding-top:14px;border-top:1px solid rgba(20,18,22,.08);font-size:15px;line-height:1.55;color:var(--body);overflow-wrap:anywhere}
.fbi ol,.fbi ul{margin:0;padding-left:20px;display:grid;gap:10px}
.fbi ul.tm,.fbi ol.tk{list-style:none;padding-left:0}
.fbi ol.tk li{position:relative;padding-left:26px}
.fbi ol.tk li::before{content:"\2713";position:absolute;left:0;top:0;font-weight:700;color:var(--c)}
.fbi li b{color:var(--ink)}
.fbi ul.tm li b{display:block}
.fbi .why{display:block;color:var(--mute);font-size:14px;margin-top:3px}
.fbi p{margin:0}
.fbi blockquote{margin:10px 0 0;padding:12px 14px;background:var(--cream);border-left:3px solid var(--c);border-radius:0 10px 10px 0;font-style:normal;color:var(--ink)}
table.cst{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.cst th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:0 8px 8px 0}
.cst td{padding:9px 8px 9px 0;border-top:1px solid rgba(20,18,22,.08);vertical-align:top;color:var(--ink)}
.cst td:first-child{width:64px}
.cst td b,.cdl li>b{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.04em;padding:3px 7px;border-radius:6px;background:var(--cream);box-shadow:inset 0 0 0 1px rgba(20,18,22,.12);color:var(--ink)}
.cst td small,.cdl li small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.fbf{display:grid;gap:12px;margin-top:22px}
.fbcs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.fbcs::-webkit-scrollbar{display:none}
.fbc{flex:none;min-height:40px;padding:0 14px;border-radius:12px;border:0;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(20,18,22,.16);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.fbc[aria-pressed="true"]{background:var(--pinkd);color:#fff;box-shadow:none}
.fbs,.cds{display:grid;gap:6px;font-size:13px}
.fbs span,.cds span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fbs select,.cds input{min-height:46px;width:100%;box-sizing:border-box;padding:0 14px;border-radius:12px;border:1.5px solid rgba(20,18,22,.18);background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.fbn{font-size:14px;color:var(--mute);margin:12px 0 0}
.fbg{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
.fbm{margin-top:16px;display:flex;justify-content:center}
.fbm .btn[hidden]{display:none}
.fbd{font-size:13.5px;color:var(--mute);margin:16px 0 0;max-width:680px}
.fbx{margin:8px 0 0}
.cdx{display:grid;gap:4px;margin-top:22px;max-width:520px}
.cdl{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.cdl li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 0 0 1px rgba(20,18,22,.08);font-size:14.5px;line-height:1.45}
.cdl li>b{justify-self:start}
.csx .csh{min-width:0}
.csb{display:block;font-size:19px;line-height:1.25;margin:6px 0 12px}
.csr{display:grid;gap:12px;align-content:start;min-width:0}
.csm{margin:0;font-weight:700}
.csm a{color:var(--pinkd);text-decoration:none}
@media(min-width:700px){.fbf{grid-template-columns:minmax(0,1fr) 240px;align-items:end}.fbg{grid-template-columns:repeat(2,minmax(0,1fr))}.cdl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.fbg{grid-template-columns:repeat(3,minmax(0,1fr))}.cdl{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Industry pages: the trade's own photo behind the hero, low opacity under the existing cream wash (no rotation, no dark block) */
.tbg picture,.tbg img{position:absolute;inset:0;width:100%;height:100%}
.tbg img{object-fit:cover;object-position:center 45%;opacity:.55;filter:saturate(.9)}
.tph{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;max-width:640px}
.tph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid rgba(0,0,0,.08)}
@media (max-width:760px){.tbg img{opacity:.55}.tph{gap:8px}}