/* app_pages: the rules the home, terms and privacy pages use, ported 2026-09-09 from the prototype's
   styles.css, hex to tokens. What the shell owns (.card, .ctrace, .pill, .btn, .cap, .sec, .wrap,
   the type scale) is not repeated here. Classes as the prototype has them. */

/* ---------- home hero: LOCKED single title, the who-sends-the-emails card (Design Lab 16, 0511) ---------- */
.hero-home{padding-top:calc(var(--secpad) * .42);padding-bottom:calc(var(--secpad) * .5)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4.5cqw,64px);align-items:start}
.hero-copy{min-width:0}
/* the hero form stands in the left column under its words; the shell centres every other form (0511) */
.hero-copy .cap{margin-top:32px}
.hero-copy .cap,.hero-copy .cap-slot{margin-left:0}
.hero-copy .cap-note{margin-top:12px}
.hero-side{min-width:0}
.mlabel{font:600 10px/1 var(--fm);letter-spacing:.2em;color:var(--faint)}
/* the underline under "pyRevit + AI" draws itself once the hero is in */
.hero-home .herot .hl{position:relative}
.hero-home .herot .hl::after{content:"";position:absolute;left:2px;right:2px;bottom:-7px;height:3px;border-radius:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:0 50%;
  animation:heroDraw .8s .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes heroDraw{to{transform:scaleX(1)}}
.hg-card{background:var(--s1);border:1px solid var(--hl2);border-radius:var(--rc);padding:20px;min-width:0;overflow:hidden}
.hg-from{display:flex;flex-direction:column;gap:16px;padding:20px 22px 22px}
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hs-me{display:flex;align-items:center;gap:14px;min-width:0}
/* a square with rounded corners, never a circle (Erik, 0511 round three) */
/* the bigger photo, framed on the face (Erik's pick 02 of home_from, 0600) */
.hs-me img{flex:none;width:88px;height:88px;border-radius:var(--rb);object-fit:cover;object-position:center 8%;border:1px solid var(--hl2)}
.hs-me>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.hs-me b{font:800 20px/1.2 var(--fd);color:var(--ink)}
.hs-me div>span{font:500 10px/1 var(--fm);letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
/* what he made, under the role, in plain case (Erik 2026-09-28, 0600) */
.hs-me div>span.hs-made{font:500 12px/1.35 var(--fd);letter-spacing:0;color:var(--dim);text-transform:none}
.hs-q{margin:0;padding:16px 18px;border:1px solid var(--hl1);border-radius:var(--rb);background:var(--s2);
  font:500 14.5px/1.6 var(--fd);color:var(--dim2)}
.hs-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--hl2);border-radius:var(--rb);overflow:hidden}
.hs-figs>div{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px}
.hs-figs>div+div{border-left:1px solid var(--hl1)}
.hs-figs b{font:800 1.35rem/1 var(--fd);color:var(--ink)}
.hs-figs div>span{font:500 8.5px/1.35 var(--fm);letter-spacing:.14em;color:var(--faint)}
@container page (max-width:520px){
  .hs-figs b{font-size:1.1rem}
  .hs-figs>div{padding:12px 10px}
}

/* ---------- trust marquee ---------- */
.marq-label{font:500 11px/1 var(--fm);letter-spacing:.2em;color:var(--faint);text-align:center;margin-bottom:20px}
.marq{overflow:hidden;border-top:1px solid var(--hl1);border-bottom:1px solid var(--hl1);padding:16px 0}
.marq-in{display:flex;gap:48px;width:max-content;animation:marq 30s linear infinite}
.marq-in span{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--fm);letter-spacing:.18em;color:var(--faint);white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- the advantage (belief) + the 80/20 figure with the crane ---------- */
.belief{border:1px solid var(--hl1);border-radius:var(--rc);padding:clamp(30px,5cqw,56px);text-align:center;
  background:var(--s1)}
.belief h2{font-size:clamp(1.6rem,3.4cqw,2.4rem);line-height:1.15}
.belief h2 em{font-style:italic;font-weight:500;color:var(--acc)}
.belief .brow{margin-top:26px;display:grid;gap:22px;max-width:46rem;margin-inline:auto}
.belief .brow p{font:400 1.2rem/1.65 var(--fd);color:var(--dim);text-wrap:balance}
.belief .brow p br{content:""}
.belief .brow p b{color:var(--ink);font-weight:600}
.belief .brow p .hl{color:var(--acc);font-weight:600}
.belief-h2{text-wrap:balance}
.belief-h2 em,.belief-h2 i{white-space:nowrap} /* i: a stored run's italic (0605) */
.blf-v{display:block;margin:36px auto 0;max-width:40rem;text-align:left}
.blf-v figcaption{margin-top:16px;font:400 12.5px/1.6 var(--fd);color:var(--dim);text-align:center}
.b1-bar{display:flex;height:68px;border:1px solid var(--hl2);border-radius:var(--rb);overflow:hidden}
.b1-bar span{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 10px;text-align:center}
.b1-bar b{font:500 10px/1.5 var(--fm);letter-spacing:.12em;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.b1-have{flex:80;background:var(--s3);color:var(--ink);
  border-right:1px solid var(--acc)}
.b1-need{flex:20;background:var(--canvas);color:var(--acc)}
.b1-need b{font-size:9px;letter-spacing:.08em;white-space:normal}
.b1-need b i{display:block;font-style:normal}
/* a plain hover on each part of the bar, the crane's bob untouched (Erik 2026-09-28, 0600) */
.b1-have,.b1-need{transition:background-color .2s,color .2s}
.b1-have:hover{background:rgb(from var(--s3) calc(r + 14) calc(g + 14) calc(b + 14))}
.b1-need:hover{background:rgb(from var(--acc) r g b / .16)}
.b1-dims{display:flex;margin-top:16px;padding-bottom:6px}
.b1-col{min-width:0}.b1-d80{flex:80}.b1-d20{flex:20}
.b1-d20 .sh-dim b{color:var(--acc)}
.b1-cap{margin-top:10px;text-align:center;font:400 12.5px/1.5 var(--fd);color:var(--dim2)}
/* the site crane, final (Erik 2026-09-02: variant 5): the trolley at x103-113/y40 carries the cable and hook */
.blf-v1.has-crane{position:relative;padding-top:72px}
/* the earth the crane stands on, its ground line level with the crane's footing (the svg's y 246, 222px under the
   figure's top), running the card's whole width and fading to its foot; the card clips it (0600) */
.belief:has(.has-crane){position:relative;overflow:hidden;isolation:isolate}
.blf-v1.has-crane::after{content:"";position:absolute;top:222px;left:-100vw;right:-100vw;height:120px;z-index:-1;
  border-top:1px solid var(--hl3);background:repeating-linear-gradient(-45deg,rgba(255,255,255,.13) 0 1px,transparent 1px 7px);
  mask-image:linear-gradient(black 0,black 18px,transparent 90px)}
/* the 01 and 02 of the home's two steps read STEP 01 and STEP 02: the word above the shell's faint digits */
.sec-step::after{content:"STEP";position:absolute;top:22px;right:clamp(16px,4cqw,56px);
  font:600 12px/1 var(--fm);letter-spacing:.34em;color:rgba(255,255,255,.16);pointer-events:none}
.b1-crane{position:absolute;left:-96px;top:-24px;width:120px;height:250px;fill:none;
  stroke:var(--faint);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.b1-crane .b1-cr-acc{stroke:var(--acc)}
.b1-crane circle{fill:none}
.b1-crane .b1-bcn{fill:var(--acc);stroke:none;animation:b1bcn 1.6s steps(1) infinite}
.b1-cable{position:absolute;left:11px;top:24px;width:2px;height:32px;background:var(--faint);
  animation:b1cable 6s ease-in-out infinite}
.b1-lift{position:relative;transform-origin:100% 100%;animation:b1bob 6s ease-in-out infinite}
.b1-hook{position:absolute;left:4px;bottom:calc(100% + 1px);width:16px;height:18px;fill:none;
  stroke:var(--faint);stroke-width:1.4;stroke-linecap:round}
.b1-hook .b1-cr-acc{stroke:var(--acc)}
@keyframes b1bob{0%,100%{transform:rotate(0)}50%{transform:rotate(.7deg)}}
@keyframes b1cable{0%,100%{height:32px}50%{height:24px}}
@keyframes b1bcn{0%,60%{opacity:1}60.1%,100%{opacity:.15}}

/* ---------- pyRevit + AI in a nutshell: the 3-station loop ---------- */
.nut-h{text-wrap:balance}
.nut-sub{text-wrap:pretty;max-width:52rem}
.nut{border:1px solid var(--hl1);border-radius:var(--rc);background:var(--s1);padding:clamp(16px,2.4cqw,24px);min-width:0}
.nut-steps{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.nut-tab{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border:1px solid var(--hl2);border-radius:var(--rb);
  background:none;font:600 12.5px/1 var(--fd);color:var(--faint);cursor:pointer;transition:color .16s,border-color .16s}
.nut-tab:hover{color:var(--dim);border-color:var(--hl3)}
.nut-n{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;
  background:var(--s3);font:600 10px/1 var(--fm);color:var(--faint);transition:background .16s,color .16s}
.nut-tab.on{color:var(--ink);border-color:var(--acc)}
.nut-tab.on .nut-n{background:var(--acc);color:var(--acc-ink)}
.nut-grid{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.3fr) 28px minmax(0,1fr);gap:12px;align-items:stretch}
.nut-arr{align-self:center;width:28px;height:12px;fill:none;stroke:var(--hl3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.nut-st{display:flex;flex-direction:column;gap:12px;min-width:0;opacity:.38;transition:opacity .45s}
.nut[data-step="1"] .nut-you,.nut[data-step="2"] .nut-ai,.nut[data-step="3"] .nut-rvt{opacity:1}
.nut[data-step="2"] .nut-you,.nut[data-step="3"] .nut-you,.nut[data-step="3"] .nut-ai{opacity:.72}
.nut[data-step="2"] .nut-a1,.nut[data-step="3"] .nut-a1,.nut[data-step="3"] .nut-a2{stroke:var(--acc)}
.nut-k{display:flex;align-items:center;gap:8px;font:500 10px/1 var(--fm);letter-spacing:.2em;color:var(--faint)}
.nut-say{border:1px solid var(--hl2);border-radius:var(--rb);background:var(--canvas);padding:14px 16px;min-height:76px;
  font:500 15px/1.5 var(--fd);color:var(--ink)}
.nut-say .sh-cur{opacity:0;transition:opacity .2s}
.nut[data-step="1"] .nut-say .sh-cur{opacity:1}
.codebox{border:1px solid var(--hl2);border-radius:var(--rc);overflow:hidden;background:var(--s1);min-width:0}
.cb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;
  border-bottom:1px solid var(--hl1);background:var(--s2)}
.cb-head span{font:500 11px/1 var(--fm);color:var(--faint);letter-spacing:.06em}
.codebox pre{margin:0;padding:18px;font:400 12.5px/1.7 var(--fm);color:var(--dim);overflow-x:auto}
.ck{color:var(--c-docs)} .cs{color:var(--c-blog)}
.nut-code pre{padding:14px 16px;font-size:12px}
.nut-code .nl{display:block;opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .3s ease}
.nut[data-step="2"] .nl{opacity:1;transform:none;transition-delay:calc(var(--i) * .24s)}
.nut[data-step="3"] .nl{opacity:1;transform:none}
.nut-rb{border:1px solid var(--hl2);border-radius:var(--rb);background:var(--canvas);overflow:hidden}
.nut-rbtabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--hl1)}
.nut-rbtabs span{font:500 11px/1 var(--fd);color:var(--faint);padding:6px 9px;border:1px solid transparent;border-radius:6px}
.nut-rbtabs span.on{color:var(--acc);border-color:var(--acc)}
.nut-rbbody{display:flex;gap:8px;padding:12px 10px 8px}
.nut-rbbtn{display:flex;flex-direction:column;align-items:center;gap:7px;width:74px;padding:8px 2px;text-align:center;
  font:500 10px/1.25 var(--fd);color:var(--faint);border:1px solid transparent;border-radius:7px}
.nut-rbbtn i{width:28px;height:28px;border-radius:6px;background:var(--s3);border:1px solid var(--hl2)}
.nut-rbyou{color:var(--acc);border-color:var(--acc);opacity:0;transform:scale(.6);transition:transform .5s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.nut-rbyou i{background:var(--s3);border-color:var(--acc)}
.nut[data-step="3"] .nut-rbyou{opacity:1;transform:none}
.nut-rbfoot{display:flex;justify-content:flex-end;padding:0 10px 10px;min-height:34px}
.nut-toast{display:inline-flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid rgba(74,222,128,.4);border-radius:6px;
  background:var(--s1);font:500 10.5px/1 var(--fm);color:var(--green);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.nut-toast .pdot{background:var(--green)} .nut-toast .pdot::after{border-color:var(--green)}
.nut[data-step="3"] .nut-toast{opacity:1;transform:none;transition-delay:.9s}
.nut-note{margin-top:22px;font:400 .95rem/1.6 var(--fd);color:var(--dim);max-width:44rem;text-wrap:pretty}
.nut-foot{color:var(--ink);font:600 1.15rem/1.5 var(--fd);max-width:none;text-align:center;margin:26px 0 4px}

/* ---------- split (video beside copy), the StarterKit card, the YouTube frames ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5cqw,64px);align-items:center}
.split-txt{min-width:0}
.split-txt h3{font-size:1.5rem;margin-bottom:12px;letter-spacing:-.02em}
.split-txt > p{color:var(--dim);line-height:1.6;margin-bottom:22px}
.split.flip > .split-txt{order:2}
.skopt{margin-top:20px}
.skopt h3{margin:10px 0 14px;font-size:1.3rem;letter-spacing:-.01em}
.skopt-sub{margin:-8px 0 14px;color:var(--dim);font-size:.95rem}
.ytv{position:relative;border:1px solid var(--hl2);border-radius:var(--rc);overflow:hidden;background:rgb(0,0,0)}
.ytv iframe{display:block;width:100%;aspect-ratio:16/9;border:none}
.ytv-wide{max-width:880px;margin:28px auto 0}
/* the poster, the shell's [data-play] button (0513): it covers the frame and spins while YouTube loads */
.ytv-poster{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;padding:0;border:0;background:rgb(0,0,0);cursor:pointer}
.ytv-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the dimming layer lets a right click through to the picture under it (a slot, U-02) */
.ytv-poster::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);pointer-events:none}
.ytv-play{position:relative;z-index:1;width:68px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.28);
  background:rgba(11,11,11,.74);color:var(--ink);display:grid;place-items:center;transition:background .14s,border-color .14s}
.ytv-poster:hover .ytv-play{background:rgba(11,11,11,.92);border-color:var(--acc)}
.ytv-play svg{width:24px;height:24px;fill:currentColor}

/* ---------- ready to begin: braces breathe, the caret blinks, the underline draws itself ---------- */
.rgd{text-align:center;padding:56px 0}
.rgd-line{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3cqw,26px)}
.rgd-nw{white-space:nowrap}
.rgd-h{font-size:clamp(2rem,5.5cqw,3.4rem);font-weight:800;letter-spacing:-.02em;margin:0}
.rgd-brace{font:300 clamp(3rem,7.5cqw,5rem)/1 var(--fm);color:var(--faint);animation:rgdBr 5s ease-in-out infinite}
.rgd-br2{animation-name:rgdBr2}
.rgd-cur{display:inline-block;width:.5ch;height:.85em;margin-left:12px;background:var(--acc);vertical-align:-.06em;animation:rgdCur 1.1s steps(1) infinite}
.rgd-under{display:block;width:min(300px,60%);height:8px;margin:20px auto 0}
.rgd-under path{stroke:var(--acc);stroke-width:2;fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:rgdDraw 4s linear infinite}
@keyframes rgdBr{0%,100%{transform:translateX(0)}50%{transform:translateX(-9px)}}
@keyframes rgdBr2{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
@keyframes rgdCur{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes rgdDraw{0%{stroke-dashoffset:1;opacity:1}55%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* a 320px phone: the braces' floor pushed the closing one 21px past the window (0688) */
@container page (max-width:360px){
  .rgd-h{font-size:1.7rem}
  .rgd-brace{font-size:2.2rem}
  .rgd-line{gap:6px}
}

/* ---------- why start here: the first tool and the conveyor ---------- */
.wsh-h{font-size:2.3rem;line-height:1.12;margin-bottom:20px}
.wsh-sub{font-size:1.05rem;line-height:1.7;color:var(--dim);margin-bottom:30px;max-width:46rem}
.wsh-sub b{color:var(--ink)}
.wsh-panel{background:var(--s1);border:1px solid var(--hl1);border-radius:var(--rc);padding:24px 26px;min-width:0}
.wsh-dashes{display:flex;gap:8px;margin-bottom:22px}
.wsh-dashes i{width:56px;height:4px;border-radius:3px;background:rgb(58,58,58)}
.wsh-dashes i.on{background:var(--acc)}
.wsh-row{display:flex;align-items:flex-start;gap:16px;min-width:0}
.wsh-first{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px}
.wsh-first b{font:600 13px/1 var(--fd);color:var(--acc);white-space:nowrap}
.wsh-restcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px}
.wsh-next{font:500 13px/1 var(--fd);color:var(--faint);white-space:nowrap}
.wsh-ic{width:58px;height:58px;flex:none;display:grid;place-items:center;background:var(--s2);border:1px solid var(--hl2);border-radius:13px}
.wsh-ic svg{width:26px;height:26px;fill:none;stroke:rgb(111,111,111);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.wsh-ic.wsh-you{width:64px;height:64px;background:transparent;border:1.5px solid var(--acc);border-radius:14px;animation:wshpulse 6.4s ease-in-out infinite}
.wsh-ic.wsh-you svg{stroke:var(--acc);width:30px;height:30px}
@keyframes wshpulse{0%,100%{box-shadow:0 0 0 0 rgb(from var(--acc) r g b / 0)}50%{box-shadow:0 0 18px 1px rgb(from var(--acc) r g b / .3)}}
/* the conveyor: ten tiles stream out of the first one; --wsh-run is the row width, measured by home.js */
.wsh-rest{width:100%;position:relative;height:66px;min-width:0;overflow:hidden;margin-left:-6px;padding-top:3px}
.wsh-rest .wsh-ic{position:absolute;left:0;top:3px;opacity:0;animation:wshconv 28s linear infinite}
.wsh-rest .wsh-ic:nth-child(1){animation-delay:0s}
.wsh-rest .wsh-ic:nth-child(2){animation-delay:-2.8s}
.wsh-rest .wsh-ic:nth-child(3){animation-delay:-5.6s}
.wsh-rest .wsh-ic:nth-child(4){animation-delay:-8.4s}
.wsh-rest .wsh-ic:nth-child(5){animation-delay:-11.2s}
.wsh-rest .wsh-ic:nth-child(6){animation-delay:-14s}
.wsh-rest .wsh-ic:nth-child(7){animation-delay:-16.8s}
.wsh-rest .wsh-ic:nth-child(8){animation-delay:-19.6s}
.wsh-rest .wsh-ic:nth-child(9){animation-delay:-22.4s}
.wsh-rest .wsh-ic:nth-child(10){animation-delay:-25.2s}
@keyframes wshconv{0%  {transform:translateX(-64px) scale(1.35);opacity:0}
  6%  {transform:translateX(calc((var(--wsh-run,560px) + 64px) * .06 - 64px)) scale(1);opacity:.95}
  45% {opacity:.55}
  80% {opacity:.22}
  96% {opacity:.05}
  100%{transform:translateX(var(--wsh-run,560px)) scale(1);opacity:0}}
.wsh-note{flex:none;align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;
  font:400 12px/1 var(--fd);color:var(--dim);margin-left:auto;padding-left:8px;text-align:center}
.wsh-shrug{font:400 15px/1 var(--fm);font-style:normal;color:var(--hl3);letter-spacing:.02em;white-space:nowrap}
.wsh-quote{margin-top:22px;text-align:center;font:italic 400 .95rem/1.5 var(--fd);color:var(--dim)}

/* ---------- the outcome: the Sunday-night ribbon ---------- */
.outc{text-align:center}
.outc-kick{display:block;font:600 11px/1 var(--fm);letter-spacing:.22em;color:var(--acc);margin-bottom:18px}
.outc-h{font-size:2.25rem;margin-bottom:16px}
.outc-h em.hl{font-style:italic}
.outc-sub{color:var(--dim);line-height:1.65;max-width:40rem;margin:0 auto 40px}
.rb2{position:relative;background:var(--s1);border:1px solid var(--hl2);border-radius:14px;max-width:900px;margin:0 auto;text-align:left;min-width:0}
.rb2-tabs{display:flex;gap:4px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--hl1);overflow-x:auto;scrollbar-width:none}
.rb2-tabs span{flex:none;font:500 12px/1 var(--fd);color:var(--faint);padding:8px 12px;border:1px solid transparent;border-radius:8px}
.rb2-tabs span.on{color:var(--acc);border-color:var(--acc)}
.rb2-body{display:flex;flex-wrap:wrap;padding:16px 10px;row-gap:18px}
.rb2-group{display:flex;flex-direction:column;gap:10px;padding:0 16px;border-right:1px solid var(--hl1);min-width:0}
.rb2-group:last-child{border-right:none}
.rb2-glabel{text-align:center;font:500 10px/1 var(--fm);letter-spacing:.08em;color:var(--faint)}
.rb2-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rb2-btn{display:flex;flex-direction:column;align-items:center;gap:8px;width:78px;padding:9px 2px;text-align:center;
  font:400 10.5px/1.3 var(--fd);color:var(--faint);border:1px solid transparent;border-radius:9px;transition:background .16s,color .16s}
.rb2-btn:hover{background:var(--s2);color:var(--dim)}
.rb2-btn i{width:30px;height:30px;border-radius:7px;background:var(--s3);border:1px solid var(--hl2)}
.rb2-you{color:var(--acc);border-color:var(--acc)}
.rb2-you:hover{color:var(--acc);background:var(--s2)}
.rb2-you i{background:var(--s3);border-color:var(--acc)}
.rb2.in .rb2-you{animation:rbglow 1.8s ease-out .6s 1}
@keyframes rbglow{0%{box-shadow:0 0 0 0 rgb(from var(--acc) r g b / 0)}35%{box-shadow:0 0 28px 3px rgb(from var(--acc) r g b / .4)}100%{box-shadow:0 0 0 0 rgb(from var(--acc) r g b / 0)}}
.outc-after{margin:32px auto 0;color:var(--dim);line-height:1.8;font-size:1rem}
.outc-after b{color:var(--ink)}
.outc-div{border-top:1px dashed var(--hl2);max-width:900px;margin:44px auto}
/* the social proof under the closing form, as quiet as the note above it (0511) */
.outc-proof{margin-top:10px;text-align:center}

/* ---------- the story with the photo ---------- */
.story-grid{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(26px,4cqw,52px);align-items:start}
.story-photo{border-radius:18px;overflow:hidden;border:1px solid var(--hl2);background:var(--s1);min-width:0}
.story-photo img{display:block;width:100%;height:auto}
.story-tx{min-width:0}
.story-p{margin-top:16px;font-size:1rem;line-height:1.7;color:var(--dim);max-width:46rem}
.story-quote{margin-top:26px;padding:20px 0;max-width:44rem;
  border-top:1px solid var(--hl2);border-bottom:1px solid var(--hl2)}
.story-quote b{display:block;font:600 1.05rem/1.4 var(--fd);color:var(--ink)}
.story-quote i{display:block;margin-top:8px;font:italic 600 1.05rem/1.4 var(--fd);color:var(--acc)}
/* a box emptied on purpose (0713) renders nothing: its wrapper takes no line either; in edit mode the slot's span keeps it open to retype */
.story-p:empty,.story-quote>:empty{display:none}

/* ---------- popular videos ---------- */
.podhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.podhead h2{margin-bottom:10px}
.podhead .sec-sub{margin:0}
.podhead .btn{flex:none}
.podgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.podgrid-home{grid-template-columns:repeat(4,minmax(0,1fr))}
.epcard{min-width:0}
.eppod{display:block;text-decoration:none;color:inherit;min-width:0}
.epthumb{position:relative;aspect-ratio:16/9;border:1px solid var(--hl1);border-radius:var(--rc);overflow:hidden;background:var(--s2)}
.epimg{display:block}
.epimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.podgrid .eppod .epimg img{filter:grayscale(.28) brightness(.94);transition:filter .3s ease}
.podgrid .eppod:hover .epimg img{filter:grayscale(0) brightness(1.04)}
.epplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:12px;
  background:var(--s1);border:1px solid var(--hl3);opacity:0;transition:opacity .16s,background .16s}
.epplay::before{content:"";position:absolute;left:19px;top:15px;border-left:12px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.epcard:hover .epplay{opacity:1}
.epcard .epplay:hover{background:var(--acc)}
.eplen-badge{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);border:1px solid var(--hl2);color:var(--ink);font:500 10px/1 var(--fm);padding:4px 7px;border-radius:5px;letter-spacing:.06em;z-index:2}
.epmeta{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.ep-no{font:600 11px/1 var(--fm);letter-spacing:.14em;color:var(--faint);flex:none}
.ep-views{display:inline-flex;align-items:center;gap:5px}.ep-views svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.eppod h3{font-size:.95rem;line-height:1.4;margin:12px 0 8px}
.ep-yt{display:inline-flex;align-items:center;gap:8px;font:600 9.5px/1 var(--fm);letter-spacing:.16em;color:var(--faint)}
.eppod:hover .epthumb{border-color:var(--hl3)}
.eppod:hover .ep-yt{color:var(--dim)}

/* ---------- the academy pointer, the legal pages (the FAQ is the shell's, 0635) ---------- */
.az-calm{padding:30px}
.az-calm h3{margin-bottom:10px}
.az-calm p{margin-bottom:20px;max-width:44rem}
.lgl h2{margin:34px 0 0;font-size:1.18rem}
.lgl h2:first-child{margin-top:0}
.lgl p{margin-top:10px;font:400 .95rem/1.7 var(--fd);color:var(--dim);max-width:62ch}
/* the legal hero: a reading intro, not a pitch, and a short step into the first section (Erik 0719) */
.sec.lgl-hero{padding-bottom:calc(var(--secpad) * .35)}
.lgl-hero + .sec{padding-top:calc(var(--secpad) * .35)}
.lgl-hero .sub{font-size:.95rem;line-height:1.7;max-width:62ch}
.lgl-note{margin-top:36px;padding-top:16px;border-top:1px solid var(--hl1);
  font:400 11px/1.5 var(--fm) !important;color:var(--dim) !important}

/* ---------- container breakpoints (the site window, not the browser) ---------- */
@container page (max-width:1100px){
  .podgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container page (max-width:980px){
  .b1-crane,.b1-cable,.b1-hook,.blf-v1.has-crane::after{display:none}
  .blf-v1.has-crane{padding-top:0}
  .b1-lift{animation:none}
}
@container page (max-width:900px){
  .belief .brow p br{display:none}
  .nut-grid{grid-template-columns:minmax(0,1fr)}
  .nut-arr{display:none}
}
@container page (max-width:820px){
  .split,.hero-grid{grid-template-columns:minmax(0,1fr)}
  .split.flip > .split-txt{order:0}
  .podhead{flex-direction:column;align-items:flex-start;gap:16px}
  .story-grid{grid-template-columns:minmax(0,1fr)}
  .story-photo{max-width:320px}
  .wsh-note{display:none}
}
@container page (max-width:700px){
  .b1-bar b{font-size:9px;letter-spacing:.05em}
  .b1-need b{font-size:8px}
  .b1-bar span{padding:0 6px}
  .b1-need b i.b1-w1{display:none}
  .b1-dims{flex-direction:column;gap:16px;margin-top:20px}
  .b1-d80,.b1-d20{flex:none}
  .b1-cap{text-align:left;margin-top:8px}
}
@container page (max-width:640px){
  .podgrid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- reduced motion: every loop of these pages stops, the final state shows ---------- */
@media (prefers-reduced-motion:reduce){
  .marq-in{animation:none !important}
  .hero-home .herot .hl::after{animation:none;transform:scaleX(1)}
  .b1-lift,.b1-cable{animation:none}
  .b1-bcn{animation:none !important}
  .nut .nut-st{opacity:1}
  .nut .nl,.nut .nut-rbyou,.nut .nut-toast{opacity:1;transform:none;transition:none}
  .rgd-brace,.rgd-cur{animation:none}
  .rgd-under path{animation:none;stroke-dashoffset:0}
  .wsh-ic.wsh-you{animation:none}
  .wsh-rest{display:flex;gap:10px;align-items:center;height:auto;margin-left:0;overflow:visible}
  .wsh-rest .wsh-ic{position:static;animation:none;transform:none}
  .wsh-rest .wsh-ic:nth-child(1){opacity:.92}
  .wsh-rest .wsh-ic:nth-child(2){opacity:.82}
  .wsh-rest .wsh-ic:nth-child(3){opacity:.72}
  .wsh-rest .wsh-ic:nth-child(4){opacity:.62}
  .wsh-rest .wsh-ic:nth-child(5){opacity:.52}
  .wsh-rest .wsh-ic:nth-child(6){opacity:.42}
  .wsh-rest .wsh-ic:nth-child(7){opacity:.34}
  .wsh-rest .wsh-ic:nth-child(8){opacity:.26}
  .wsh-rest .wsh-ic:nth-child(9){opacity:.18}
  .wsh-rest .wsh-ic:nth-child(10){opacity:.12}
  .rb2.in .rb2-you{animation:none}
}