/* ================================================================ Handyman: the pegboard wall */
:root{
  --h-tan:#c89b68; --h-tan-d:#a8793f; --h-board:#d6ab77;
  --h-red:#d8392b; --h-red-d:#b72e21;
  --h-yel:#ffcb3d; --h-yel-d:#e6a915;
  --h-ink:#22201c; --h-ink2:#37332d; --h-muted:#5e584f; --h-line:#e6e1d9;
  --h-slab:'Alfa Slab One',Rockwell,'Roboto Slab','Courier New',serif;
}
.pg-hdy{background:#fff;color:var(--h-ink)}
.pg-hdy h1,.pg-hdy h2{font-family:var(--h-slab);font-weight:400;text-wrap:balance;color:inherit}
.pg-hdy h2{margin:14px 0 0;font-size:clamp(32px,3.9vw,54px);line-height:1.06;letter-spacing:-.005em}
.pg-hdy h2 > span{display:block;color:var(--h-red)}
.pg-hdy :focus-visible{outline-color:var(--h-red)}
.pg-hdy .lab{color:var(--h-muted)}
/* a hex nut in front of each section label */
.pg-hdy .lab::before,.hdy-nut{content:"";display:inline-block;width:13px;height:12px;flex:none;
  background:radial-gradient(circle,transparent 0 2.4px,currentColor 2.9px);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hdy-head{max-width:640px}
.hdy-head > p{margin:18px 0 0;max-width:54ch;font-size:17.5px;line-height:1.6;color:var(--h-muted);text-wrap:pretty}
.hdy-head-row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:26px 40px;flex-wrap:wrap}
.hdy-head-row > div{max-width:640px}
.hdy-head-row > .hdy-tabs{max-width:none}
.hdy-btn-ink{background:var(--h-ink);color:#fff}
.hdy-btn-ink:hover{background:#3d3831}
.hdy-btn-line{background:transparent;color:var(--h-ink);box-shadow:inset 0 0 0 2px var(--h-ink)}
.hdy-btn-line:hover{background:rgba(34,32,28,.07)}
.hdy-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pg-hdy .fine{color:var(--h-ink)}
.pg-hdy .fine .hl{background:var(--h-yel)}
.pg-hdy .fine .dot{background:var(--h-ink)}

/* one pegboard surface for the hero, the pricing display and the closing wall: a hole every --P, with a lit lower lip */
.hdy-hero,.hdy-board,.hdy-close{background-color:var(--h-tan);
  background-image:
    radial-gradient(circle at 50% 50%,#2c1d0f 0 calc(var(--P) * .125),rgba(44,29,15,0) calc(var(--P) * .125 + .8px)),
    radial-gradient(circle at calc(50% + .9px) calc(50% + 1.1px),rgba(255,238,210,.62) 0 calc(var(--P) * .125 + .1px),rgba(255,238,210,0) calc(var(--P) * .125 + 1px)),
    linear-gradient(104deg,rgba(255,250,240,.09),rgba(255,250,240,0) 38%,rgba(70,38,6,0) 62%,rgba(70,38,6,.08));
  background-size:var(--P) var(--P),var(--P) var(--P),100% 100%}

/* ---------------------------------------------------------------- hero: tan hardboard, a hole every --P, anchored to the bottom center
   Holes sit at x = 50% + k·P and y = bottom − P/2 − j·P, so the rack (left: 50% + K·P, bottom: 0, height (n + .5)·P)
   has a hole at every whole-number point of its own grid. Every peg and hook below is placed on those points. */
.hdy-hero{--P:32px;--K:3;--N:16;--n:24;position:relative;container-type:inline-size;overflow:hidden;
  display:flex;align-items:center;min-height:calc(var(--P) * 25);padding-block:calc(var(--P) * 1.5);
  background-position:50% 100%,50% 100%,0 0}
/* the board's frame, top and bottom */
.hdy-hero::before,.hdy-hero::after,.hdy-close::before,.hdy-close::after{content:"";position:absolute;z-index:1;left:0;right:0;height:calc(var(--P) * .26);pointer-events:none;
  background:linear-gradient(180deg,#a97b45,#946535)}
.hdy-hero::before,.hdy-close::before{top:0;box-shadow:0 2px 5px rgba(60,32,6,.28)}
.hdy-hero::after,.hdy-close::after{bottom:0;height:calc(var(--P) * .16);background:linear-gradient(180deg,#8f6232,#a57640);box-shadow:0 -1px 3px rgba(60,32,6,.2)}
.hdy-hero-in{width:100%;position:relative;z-index:3}

/* the plain board screwed to the pegboard: the headline sits here, away from the holes */
.hdy-sign{position:relative;container-type:inline-size;width:calc(min(100cqw,1240px) / 2 - var(--gut) + var(--K) * var(--P) - 28px);
  padding:clamp(30px,3.2vw,46px) clamp(26px,3.3vw,48px) clamp(30px,3vw,42px);border-radius:5px;
  background:linear-gradient(176deg,#dcb384 0%,var(--h-board) 46%,#d1a26c 100%);
  box-shadow:inset 0 1px 0 rgba(255,246,230,.55),inset 0 -2px 0 rgba(96,58,18,.14),0 1px 2px rgba(60,32,6,.32),0 26px 40px -22px rgba(60,32,6,.62)}
.hdy-screw{position:absolute;width:11px;height:11px;border-radius:50%;
  background:linear-gradient(var(--a,40deg),transparent 43%,#4f555b 43% 57%,transparent 57%),radial-gradient(circle at 36% 32%,#fbfcfc 0 1.4px,#c3c9ce 2.8px,#80878e 5.5px);
  box-shadow:0 1px 1px rgba(40,20,0,.45)}
.hdy-sctl{left:11px;top:11px;--a:40deg}.hdy-sctr{right:11px;top:11px;--a:-15deg}
.hdy-scbl{left:11px;bottom:11px;--a:85deg}.hdy-scbr{right:11px;bottom:11px;--a:20deg}
.hdy-k{display:flex;align-items:center;gap:10px;margin:0;font:500 11.5px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#3b2f22}
.hdy-hero h1{margin:18px 0 0;font-size:clamp(34px,9.55cqi,62px);line-height:1.04;letter-spacing:-.014em;color:var(--h-ink)}
.hdy-hero h1 > span{display:block}
.hdy-ul{text-decoration:underline;text-decoration-color:var(--h-red);text-decoration-thickness:.09em;text-underline-offset:.15em;text-decoration-skip-ink:auto}
.hdy-sub{margin:22px 0 0;max-width:46ch;font-size:clamp(16.5px,1.28vw,18.5px);line-height:1.58;color:#2c261f;text-wrap:pretty}
.hdy-sign .fine{margin-top:20px}

/* ---------------------------------------------------------------- the rack: tools and tags on the hole grid */
.hdy-rack{position:absolute;z-index:2;left:calc(50% + var(--K) * var(--P));bottom:0;width:calc(var(--N) * var(--P));height:calc((var(--n) + .5) * var(--P))}
.hdy-tool{position:absolute;left:calc(var(--x) * var(--P));top:calc(var(--y) * var(--P));width:calc(var(--w) * var(--P));height:calc(var(--h) * var(--P));
  overflow:visible;filter:drop-shadow(calc(var(--P) * .06) calc(var(--P) * .14) calc(var(--P) * .1) rgba(52,28,4,.42))}
.hdy-rk-level{--x:3;--y:1}
.hdy-rk-hammer{--x:0;--y:13}
.hdy-rk-drill{--x:5;--y:14}
.hdy-rk-wrench{--x:11;--y:15}

/* a paper job tag on a string: the hook stays put, the string and the tag swing about the hook */
.hdy-tag{--tw:4.4;--len:1.2;--ring:var(--h-red);position:absolute;z-index:1;display:block;
  left:calc((var(--x) - var(--tw) / 2) * var(--P));top:calc((var(--y) - .3) * var(--P));width:calc(var(--tw) * var(--P));
  color:var(--h-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.hdy-tg1{--x:3;--y:5;--len:1}
.hdy-tg2{--x:8;--y:5;--len:1.6;--ring:var(--h-yel)}
.hdy-tg3{--x:13;--y:5;--len:1.25;--ring:var(--h-ink)}
.hdy-j{position:absolute;z-index:3;left:50%;top:0;width:var(--P);height:calc(var(--P) * 1.1);margin-left:calc(var(--P) * -.5);overflow:visible}
.hdy-swing{position:relative;display:block;padding-top:calc((.8 + var(--len)) * var(--P));transform-origin:50% calc(var(--P) * .8);
  filter:drop-shadow(calc(var(--P) * .05) calc(var(--P) * .16) calc(var(--P) * .1) rgba(52,28,4,.38))}
.hdy-str{position:absolute;z-index:2;left:50%;top:calc(var(--P) * .8);width:12px;height:calc((var(--len) + .55) * var(--P));margin-left:-6px;overflow:visible}
.hdy-str path,.hdy-bigstr path,.hdy-pstr path{fill:none;stroke:#8a7456;stroke-width:1.4px;stroke-linecap:round}
.hdy-tagb{position:relative;z-index:1;display:block;min-height:calc(var(--P) * 5.2);
  padding:calc(var(--P) * 1.02) calc(var(--P) * .36) calc(var(--P) * .4);border-radius:2px}
.hdy-tagb::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#fff 0,#fbfaf7 100%);
  clip-path:polygon(calc(var(--P) * .6) 0,calc(100% - var(--P) * .6) 0,100% calc(var(--P) * .6),100% 100%,0 100%,0 calc(var(--P) * .6));
  -webkit-mask:radial-gradient(circle at 50% calc(var(--P) * .55),transparent calc(var(--P) * .11),#000 calc(var(--P) * .11 + .7px));
  mask:radial-gradient(circle at 50% calc(var(--P) * .55),transparent calc(var(--P) * .11),#000 calc(var(--P) * .11 + .7px))}
.hdy-tagb::after{content:"";position:absolute;z-index:-1;left:50%;top:calc(var(--P) * .55);width:calc(var(--P) * .56);height:calc(var(--P) * .56);
  margin:calc(var(--P) * -.28) 0 0 calc(var(--P) * -.28);border-radius:50%;
  background:radial-gradient(circle,transparent 0 calc(var(--P) * .11),var(--ring) calc(var(--P) * .11 + .7px))}
.hdy-tk,.hdy-tt,.hdy-tw,.hdy-tn{display:block;position:relative}
.hdy-tk{font:500 max(9.5px,calc(var(--P) * .3))/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7a705f}
.hdy-tt{margin-top:calc(var(--P) * .16);font:400 calc(var(--P) * .6)/1.04 var(--h-slab);letter-spacing:-.01em}
.hdy-tw{margin-top:calc(var(--P) * .16);font:700 calc(var(--P) * .45)/1.15 var(--body);color:var(--h-red)}
.hdy-tq .hdy-tw{color:var(--h-ink)}
.hdy-tq .hdy-tw::before{content:"✓ ";color:var(--h-red)}
.hdy-tn{margin-top:calc(var(--P) * .22);padding-top:calc(var(--P) * .2);border-top:1px dashed #d6cfc3;font:500 max(11px,calc(var(--P) * .35))/1.3 var(--body);color:var(--h-muted)}
.hdy-tag:focus-visible{outline:none}
.hdy-tag:focus-visible .hdy-tagb{outline:3px solid var(--h-ink);outline-offset:3px}
.hdy-tag:hover .hdy-tt{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------------------------------------------------------------- 01 how it works: a to-do list on the fridge */
.hdy-how{position:relative;overflow:hidden;background:#fff;padding-top:clamp(72px,8vw,120px)}
.hdy-how-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(36px,5vw,80px);align-items:stretch}
.hdy-how .hdy-head{position:sticky;top:calc(var(--head) + 36px);align-self:start;padding-bottom:clamp(72px,8vw,120px)}
.hdy-mini{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.hdy-mini li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500}
.hdy-mini svg{width:20px;height:20px;padding:7px;box-sizing:content-box;border-radius:50%;background:#f3f1ed;color:var(--h-red);flex:none}
.hdy-how .btn{margin-top:30px}
.hdy-fridge{--fz:clamp(96px,10vw,138px);position:relative;display:flex;flex-direction:column;margin-bottom:-56px;
  background:linear-gradient(#3b362f,#3b362f) 0 var(--fz) / 100% 9px no-repeat}
.hdy-freezer,.hdy-door{position:relative;
  background:linear-gradient(90deg,#f3b923 0%,#ffc93a 9%,#ffd257 42%,#ffcd45 78%,#f0b520 96%,#e2a714 100%)}
.hdy-freezer{height:var(--fz);border-radius:30px 30px 5px 5px;box-shadow:inset 0 2px 0 rgba(255,255,255,.45)}
.hdy-door{flex:1;margin-top:9px;border-radius:5px 5px 0 0;padding-bottom:128px;display:flex;flex-direction:column}
.hdy-freezer::after,.hdy-door::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.28) 63%,rgba(255,255,255,0) 70%)}
.hdy-handle{position:absolute;left:clamp(16px,2vw,26px);width:14px;border-radius:8px;
  background:linear-gradient(90deg,#7c838a,#eef1f3 38%,#c2c8cd 62%,#80878e);box-shadow:3px 4px 7px rgba(90,60,0,.35)}
.hdy-h1{bottom:16px;height:52%}
.hdy-h2{top:22px;height:clamp(150px,18vw,230px)}
.hdy-note{position:relative;margin:clamp(40px,4.4vw,60px) clamp(22px,4.4vw,64px) 0 clamp(58px,7vw,98px);padding:62px clamp(20px,2.6vw,34px) 18px;
  background:#fff;rotate:-1.1deg;box-shadow:0 1px 1px rgba(60,40,0,.1),0 22px 30px -18px rgba(90,60,0,.6)}
.hdy-card{position:absolute;z-index:2;right:clamp(-16px,-1vw,-8px);top:-30px;display:grid;gap:2px;width:max-content;max-width:78%;padding:10px 14px 10px 16px;
  background:#fff;rotate:4.5deg;border-left:7px solid var(--h-red);
  box-shadow:0 0 0 1px rgba(34,32,28,.08),0 2px 0 #d9d3c9,0 10px 14px -6px rgba(60,40,0,.45)}
.hdy-card b{font:400 16px/1.1 var(--h-slab);letter-spacing:-.01em}
.hdy-card span{font:500 12.5px/1.3 var(--body);color:var(--h-muted)}
.hdy-card .hdy-card-n{font:500 12px/1.3 var(--mono);letter-spacing:.04em;color:var(--h-ink)}
.hdy-mag{position:absolute;z-index:2;left:clamp(18px,2.4vw,30px);top:-14px;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85) 0 2px,rgba(255,255,255,.2) 5px,rgba(255,255,255,0) 9px),radial-gradient(circle at 50% 45%,#e5493b 0 55%,#a92a1e 100%);
  box-shadow:0 2px 0 #8f2218,0 6px 8px -2px rgba(60,20,0,.45)}
.hdy-nutmag{position:absolute;right:clamp(30px,5vw,76px);bottom:88px;width:36px;height:32px;
  background:radial-gradient(circle,transparent 0 7px,#3a362f 7.6px 10px,#26231f 10.5px);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  filter:drop-shadow(2px 3px 2px rgba(90,60,0,.4))}
.hdy-note-h{margin:0;font:400 32px/1 var(--h-slab);color:var(--h-red);letter-spacing:-.01em}
.hdy-note-s{margin:8px 0 0;padding-bottom:14px;border-bottom:2.5px solid var(--h-ink);font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--h-muted)}
.hdy-todo{list-style:none;margin:0;padding:0}
.hdy-todo li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:15px 0 14px;border-bottom:1px solid var(--h-line)}
.hdy-todo li:last-child{border-bottom:0}
.hdy-box{width:34px;height:32px;overflow:visible;margin-top:-5px}
.hdy-box rect{fill:#fff;stroke:var(--h-ink);stroke-width:2}
.hdy-tick{fill:none;stroke:var(--h-red);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.hdy-todo h3{margin:0;font:700 17px/1.3 var(--body);letter-spacing:-.01em}
.hdy-todo p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--h-muted)}
.hdy-todo.hdy-pre .hdy-tick{stroke-dasharray:1 1.1;stroke-dashoffset:1.05}
.hdy-todo.hdy-pre.hdy-in .hdy-tick{stroke-dashoffset:0;transition:stroke-dashoffset .42s cubic-bezier(.5,0,.3,1) calc(.25s + var(--i) * .32s)}

/* ---------------------------------------------------------------- 02 sample calls: charcoal wall, tag tabs, the big job tag */
.hdy-calls{position:relative;box-shadow:0 -2px 0 var(--h-ink);background:var(--h-ink);color:#f4f0e9;padding-block:clamp(72px,8vw,120px)}
.hdy-calls .lab{color:#cbc2b4}
.hdy-calls h2{color:#fff}
.hdy-calls h2 > span{color:var(--h-yel)}
.hdy-calls .hdy-head p{color:#cfc7ba}
.hdy-calls :focus-visible{outline-color:var(--h-yel)}
.hdy-tabs{display:flex;flex-wrap:wrap;gap:12px}
.hdy-tabs [role=tab]{position:relative;isolation:isolate;display:grid;gap:6px;justify-items:start;padding:13px 22px 13px 50px;border:0;background:none;
  color:#fff;text-align:left;cursor:pointer;transition:color .2s}
.hdy-tabs [role=tab]::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.09);transition:background-color .2s;
  clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px),0 16px);
  -webkit-mask:radial-gradient(circle at 29px 50%,transparent 5px,#000 5.7px);mask:radial-gradient(circle at 29px 50%,transparent 5px,#000 5.7px)}
.hdy-tabs [role=tab]::after{content:"";position:absolute;z-index:-1;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:radial-gradient(circle,transparent 0 5px,rgba(255,255,255,.3) 5.7px)}
.hdy-tabs [role=tab]:hover::before{background:rgba(255,255,255,.16)}
.hdy-tabs [role=tab][aria-selected=true]{color:var(--h-ink)}
.hdy-tabs [role=tab][aria-selected=true]::before{background:#fff}
.hdy-tabs [role=tab][aria-selected=true]::after{background:radial-gradient(circle,transparent 0 5px,var(--h-yel) 5.7px)}
.hdy-tabs b{font:400 18px/1.05 var(--h-slab);letter-spacing:-.005em}
.hdy-tabs span{font:500 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.78}
.hdy-panels{margin-top:52px}
.hdy-panel{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,84px);align-items:start;border-radius:8px}
.hdy-panel:focus-visible{outline-offset:10px}
.hdy-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font:500 11.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#bdb3a4}
.hdy-meta span:last-child{color:var(--h-yel)}
.hdy-lines{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:20px}
.hdy-lines li{display:grid;gap:7px;max-width:54ch}
.hdy-who{font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a99f90}
.hdy-lines q{quotes:"“" "”" "‘" "’";font:500 clamp(18px,1.5vw,20.5px)/1.48 var(--body);color:#f4f0e9}
.hdy-lai q{padding-left:16px;border-left:3px solid var(--h-yel);color:#fff}
.hdy-lai .hdy-who{padding-left:19px;color:var(--h-yel)}
.hdy-lines mark{background:none;color:var(--h-yel);font-weight:700}
.hdy-cnote{margin:28px 0 0;max-width:52ch;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:15px;line-height:1.55;color:#bfb6a8}
.hdy-jobwrap{position:relative;display:flex;justify-content:center;padding-top:72px}
.hdy-bighook{position:absolute;top:0;left:50%;width:40px;height:64px;margin-left:-20px;overflow:visible}
.hdy-jobswing{position:relative;width:min(100%,420px);transform-origin:50% -16px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
.hdy-bigstr{position:absolute;z-index:2;left:50%;top:-16px;width:20px;height:56px;margin-left:-10px;overflow:visible}
.hdy-bigstr path,.hdy-pstr path{stroke:#b9a78c;stroke-width:1.8px}
.hdy-job{position:relative;z-index:1;padding:74px clamp(20px,2.4vw,30px) 22px;color:var(--h-ink)}
.hdy-job::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#fff,#faf8f4);
  clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%,0 28px);
  -webkit-mask:radial-gradient(circle at 50% 40px,transparent 9px,#000 9.7px);mask:radial-gradient(circle at 50% 40px,transparent 9px,#000 9.7px)}
.hdy-job::after{content:"";position:absolute;z-index:-1;left:50%;top:40px;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:radial-gradient(circle,transparent 0 9px,var(--h-yel) 9.7px)}
.hdy-job > header{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:2.5px solid var(--h-ink)}
.hdy-jk{font:500 11px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--h-muted)}
.hdy-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--h-ink);color:#fff;
  font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hdy-partner{position:absolute;top:22px;right:-12px;padding:7px 12px 6px;rotate:5deg;background:var(--h-yel);color:var(--h-ink);
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.hdy-jrows{margin:0}
.hdy-jrows div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--h-line)}
.hdy-jrows dt{padding-top:3px;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--h-muted)}
.hdy-jrows dd{margin:0;display:grid;gap:3px}
.hdy-jrows dd b{font:700 16.5px/1.3 var(--body)}
.hdy-jrows dd span{font-size:14px;line-height:1.4;color:var(--h-muted)}
.hdy-jrows .hdy-visit b{font:400 24px/1.1 var(--h-slab);letter-spacing:-.01em}
.hdy-jrows .hdy-visit .hdy-cal{display:inline-flex;align-items:center;gap:7px;margin-top:4px;font:600 14px/1.2 var(--body);color:var(--h-red)}
.hdy-cal svg{width:16px;height:16px;flex:none}
.hdy-jf{display:flex;align-items:center;gap:8px;margin:16px 0 0;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--h-muted)}
.hdy-jf svg{width:16px;height:16px;flex:none;color:var(--h-ink)}
.hdy-slh{margin:16px 0 4px;font:400 21px/1.1 var(--h-slab)}
.hdy-svc{list-style:none;margin:0;padding:0}
.hdy-svc li{display:flex;align-items:center;gap:11px;padding:9px 8px;margin-inline:-8px;border-bottom:1px solid var(--h-line);font-size:15.5px;line-height:1.35;color:var(--h-muted)}
.hdy-svc li > svg,.hdy-svc li > i{width:18px;height:18px;flex:none}
.hdy-svc li > i{border:1.5px solid #bcb4a7;border-radius:3px}
.hdy-svc .hdy-hit{background:linear-gradient(90deg,rgba(255,203,61,.62),rgba(255,203,61,.38));color:var(--h-ink);font-weight:700}
.hdy-svc .hdy-hit svg{color:var(--h-red)}
.hdy-fine{margin:44px 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#a99f90}

/* ---------------------------------------------------------------- 03 pricing: a price tag on a pegboard display */
.hdy-price{background:#f1efeb;padding-block:clamp(72px,8vw,120px)}
.hdy-price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,84px);align-items:center}
.hdy-head > .hdy-big{max-width:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin:28px 0 0;font:400 clamp(58px,6vw,86px)/1 var(--h-slab);letter-spacing:-.02em;color:var(--h-ink)}
.hdy-cur{align-self:flex-start;margin-top:.12em;font-size:.46em;color:var(--h-red)}
.hdy-per{font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--h-muted)}
.hdy-facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.hdy-facts li{position:relative;padding-left:22px;font-size:16px;line-height:1.45;color:var(--h-ink2)}
.hdy-facts li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:9px;background:var(--h-red);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hdy-price .hdy-head .btn{margin-top:30px}
.hdy-display{min-width:0}
.hdy-board{--P:26px;position:relative;height:calc(var(--P) * 17);margin:9px;border-radius:6px;overflow:hidden;
  background-position:50% 0,50% 0,0 0;
  box-shadow:0 0 0 9px #9d6c37,0 0 0 10px #7e5226,0 30px 44px -26px rgba(60,32,6,.6)}
.hdy-phook{position:absolute;z-index:3;left:50%;top:calc(var(--P) * 1.2);width:var(--P);height:calc(var(--P) * 1.2);margin-left:calc(var(--P) * -.5);overflow:visible}
.hdy-pswing{position:absolute;left:0;right:0;top:calc(var(--P) * 2.12);width:min(300px,calc(100% - 48px));margin-inline:auto;padding-top:calc(var(--P) * 1.2);
  transform-origin:50% 0;filter:drop-shadow(3px 12px 10px rgba(52,28,4,.4))}
.hdy-pstr{position:absolute;z-index:2;left:50%;top:0;width:14px;height:calc(var(--P) * 1.2 + 30px);margin-left:-7px;overflow:visible}
.hdy-ptag{position:relative;z-index:1;padding:58px 22px 0;text-align:center;color:var(--h-ink)}
.hdy-ptag::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:16px 16px 10px 10px;
  background:linear-gradient(180deg,#ffd45a,var(--h-yel) 40%,#fac536);
  -webkit-mask:radial-gradient(circle at 50% 30px,transparent 8px,#000 8.7px);mask:radial-gradient(circle at 50% 30px,transparent 8px,#000 8.7px)}
.hdy-ptag::after{content:"";position:absolute;z-index:-1;left:50%;top:30px;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:radial-gradient(circle,transparent 0 8px,var(--h-ink) 8.7px 12px,transparent 12.7px)}
.hdy-ptag p{margin:0}
.hdy-pk{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4d3d12}
.hdy-pv{margin-top:8px!important}
.hdy-pv strong{font:400 clamp(46px,4.6vw,64px)/1 var(--h-slab);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hdy-pm{margin-top:10px!important;font-size:15.5px;font-weight:500}
.hdy-pm b{font-variant-numeric:tabular-nums}
.hdy-pb{margin-top:6px!important;font-size:13.5px;line-height:1.45;color:#4a3c16;font-variant-numeric:tabular-nums}
.hdy-pstub{margin:20px -22px 0!important;padding:13px 10px 14px;border-top:2px dashed rgba(34,32,28,.45);font:500 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4d3d12}
.hdy-slide{margin:40px 9px 0}
.hdy-slide-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hdy-slide-l label{font:500 11.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--h-muted);cursor:pointer}
.hdy-slide-l b{font:400 24px/1 var(--h-slab);font-variant-numeric:tabular-nums;white-space:nowrap}
.hdy-track{--th:32px;position:relative;height:48px;margin-top:10px}
.hdy-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:12px;margin-top:-6px;border-radius:6px;background:#d8d2c8;box-shadow:inset 0 1px 2px rgba(34,32,28,.25)}
.hdy-track::after{content:"";position:absolute;left:0;top:50%;height:12px;margin-top:-6px;border-radius:6px;pointer-events:none;
  width:calc(var(--th) / 2 + var(--p,.2222) * (100% - var(--th)));background:var(--h-red);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.hdy-track input{position:absolute;z-index:1;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.hdy-track input::-webkit-slider-runnable-track{height:48px;background:transparent}
.hdy-track input::-moz-range-track{height:48px;background:transparent}
.hdy-track input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:8px;border-radius:50%;border:3px solid var(--h-ink);
  background:radial-gradient(circle at 36% 32%,#fff3c4 0 2px,var(--h-yel) 7px);box-shadow:0 4px 8px -2px rgba(34,32,28,.5)}
.hdy-track input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:3px solid var(--h-ink);
  background:radial-gradient(circle at 36% 32%,#fff3c4 0 2px,var(--h-yel) 7px);box-shadow:0 4px 8px -2px rgba(34,32,28,.5)}
.hdy-track input:focus{outline:none}
.hdy-track:has(input:focus-visible){outline:2px solid var(--h-red);outline-offset:6px;border-radius:12px}
.hdy-scale{position:relative;height:16px;margin-top:4px}
.hdy-scale span{position:absolute;top:0;left:calc(16px + var(--f) * (100% - 32px));translate:-50% 0;font:500 11px/1 var(--mono);color:var(--h-muted)}

/* ---------------------------------------------------------------- 04 FAQ */
.hdy-faq{--fq-line:rgba(34,32,28,.16);--fq-muted:var(--h-muted);background:#fff;padding-block:clamp(72px,8vw,120px)}
.hdy-faq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.hdy-faq h2{font-size:clamp(32px,3.5vw,50px)}
.hdy-faq summary i{color:var(--h-red)}
.hdy-faq summary:hover > span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}

/* ---------------------------------------------------------------- closing: a safety-yellow sign on the same pegboard */
.hdy-close{--P:32px;--n:13;position:relative;overflow:hidden;padding-block:calc(var(--P) * 2.5);text-align:center;background-position:50% 100%,50% 100%,0 0}
.hdy-close-in{position:relative;z-index:2}
.hdy-csign{position:relative;max-width:880px;margin:0 auto;padding:clamp(40px,5vw,66px) clamp(22px,5vw,64px) clamp(40px,5vw,60px);border-radius:5px;
  background:linear-gradient(176deg,#ffd65e 0%,var(--h-yel) 48%,#f6bf2c 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7),inset 0 -2px 0 rgba(150,98,0,.22),0 1px 2px rgba(60,32,6,.32),0 28px 42px -22px rgba(60,32,6,.62)}
.hdy-close h2{margin:0 auto;font-size:clamp(34px,5.1vw,70px);line-height:1.02;color:var(--h-ink)}
.hdy-close h2 > span{display:block;color:var(--h-ink)}
.hdy-close p{margin:22px auto 0;font-size:18px;line-height:1.5;color:#3a3120}
.hdy-close .hdy-cta{justify-content:center;margin-top:32px}
.hdy-close :focus-visible{outline-color:var(--h-ink)}
.hdy-crack{position:absolute;z-index:1;bottom:0;width:calc(var(--P) * 5);height:calc((var(--n) + .5) * var(--P))}
.hdy-crack-l{left:calc(50% - 19 * var(--P))}
.hdy-crack-r{left:calc(50% + 15 * var(--P))}
.hdy-ck-hammer{--x:0;--y:1}
.hdy-ck-wrench{--x:0;--y:2}
@media (max-width:1239px){ .hdy-crack{display:none} }

/* ---------------------------------------------------------------- footer */
.hdy-foot{background:var(--h-ink);color:#fff}
.hdy-foot .grid3 i:not(.o){background:var(--h-yel)}
.hdy-foot .grid3 i.o{box-shadow:inset 0 0 0 1.5px var(--h-yel)}
.hdy-foot .p3-tag{font-family:var(--h-slab);font-style:normal;font-size:19px;letter-spacing:-.005em}
.hdy-foot :focus-visible{outline-color:var(--h-yel)}

/* ---------------------------------------------------------------- the pegboard shrinks in steps (whole pixels keep the holes crisp) */
@media (max-width:1239px){ .hdy-hero{--P:28px;--K:2} }
@media (max-width:1079px){ .hdy-hero{--K:1} }
@media (max-width:1079px){ .hdy-hero{--P:26px} }

/* below 960 the board stacks: the sign, then the rack centered under it */
@media (max-width:959px){
  .hdy-close{--P:26px}
  .hdy-hero{--P:26px;--N:24;--n:12;flex-direction:column;align-items:stretch;min-height:0;padding-block:calc(var(--P) * 1.3) 0}
  .hdy-sign{width:auto;max-width:640px;margin-inline:auto}
  .hdy-rack{position:relative;left:auto;bottom:auto;flex:none;margin:calc(var(--P) * .8) 0 0 calc(50% - var(--N) * var(--P) / 2);margin-top:auto}
  .hdy-hero-in{margin-bottom:calc(var(--P) * .6)}
  .hdy-rk-level{--x:7;--y:0}
  .hdy-rk-hammer{--x:0;--y:1}
  .hdy-rk-drill{--x:18;--y:2}
  .hdy-rk-wrench{display:none}
  .hdy-tag{--tw:4.4}
  .hdy-tg1{--x:7;--y:3}.hdy-tg2{--x:12;--y:3}.hdy-tg3{--x:17;--y:3}
  .hdy-how-grid,.hdy-panel,.hdy-price-grid,.hdy-faq-grid{grid-template-columns:minmax(0,1fr)}
  .hdy-how .hdy-head{position:static;padding-bottom:0}
  .hdy-fridge{max-width:640px;width:100%;justify-self:center}
  .hdy-panel{gap:40px}
  .hdy-display{max-width:560px;width:100%;justify-self:center}
}
@media (max-width:767px){
  .hdy-hero{--P:24px;--N:20}
  .hdy-rk-level{--x:5}
  .hdy-rk-hammer{--x:-2}
  .hdy-rk-drill{display:none}
  .hdy-tg1{--x:5}.hdy-tg2{--x:10}.hdy-tg3{--x:15}
}
@media (max-width:599px){
  .hdy-hero{--P:22px;--N:16;--n:10;padding-top:18px}
  .hdy-sign{padding:30px 20px 26px}
  .hdy-screw{width:9px;height:9px}
  .hdy-sctl,.hdy-scbl{left:7px}.hdy-sctr,.hdy-scbr{right:7px}.hdy-sctl,.hdy-sctr{top:7px}.hdy-scbl,.hdy-scbr{bottom:7px}
  .hdy-k{font-size:10.5px;letter-spacing:.08em}
  .hdy-hero h1{font-size:clamp(28px,11.2cqi,44px);margin-top:14px}
  .hdy-sub{margin-top:16px;font-size:16.5px}
  .hdy-cta{margin-top:22px}
  .hdy-cta .btn{flex:1 1 100%}
  .hdy-rk-level{--x:3}
  .hdy-rk-hammer{display:none}
  .hdy-tag{--tw:4.7}
  .hdy-tg1{--x:3}.hdy-tg2{--x:8}.hdy-tg3{--x:13}
  .hdy-tk2{display:none}
  .hdy-tagb{padding-top:calc(var(--P) * 1.02);min-height:calc(var(--P) * 4.4)}
  .hdy-tt{margin-top:0;font-size:max(13px,calc(var(--P) * .66))}
  .hdy-tw{font-size:max(12px,calc(var(--P) * .52))}
  .hdy-tn{display:none}
  .hdy-note{margin:44px 10px 0 42px;padding:56px 18px 12px}
  .hdy-h2{height:130px}
  .hdy-card{right:-8px;max-width:72%}
  .hdy-note-h{font-size:28px}
  .hdy-todo li{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .hdy-box{width:30px;height:28px}
  .hdy-tabs{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .hdy-tabs [role=tab]{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 12px;padding:12px 16px 12px 48px}
  .hdy-panels{margin-top:36px}
  .hdy-lines q{font-size:17.5px}
  .hdy-jobwrap{padding-top:66px}
  .hdy-job{padding-inline:18px}
  .hdy-jrows div{grid-template-columns:minmax(0,1fr);gap:4px}
  .hdy-partner{right:-6px}
  .hdy-board{--P:22px;height:calc(var(--P) * 18.5)}
  .hdy-pswing{width:min(270px,calc(100% - 36px))}
  .hdy-price .hdy-head .btn,.hdy-close .hdy-cta .btn{flex:1 1 100%}
  .hdy-close{--P:22px;padding-block:calc(var(--P) * 1.5)}
  .hdy-csign{padding:44px 20px 24px}
}
@media (max-width:379px){
  .hdy-hero{--P:20px}
  .hdy-sign{padding-inline:16px}
  .hdy-tt{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .hdy-todo.hdy-pre .hdy-tick{stroke-dashoffset:0}
}