/* v2-home.css — the home page's touch-ups from the 2026-10-04 Claude Design handoff ("Carousel website touch-ups,
   Home + About") below the hero (the hero is v2-hero.css). Linked on / only, after v2-hero.css (v2pages.PAGE_SHEETS).
   Markup: HOME_TOUCHUPS in tools/v2pages.py.
   The page sheets before this one set most of these properties with !important (home-v2-audit.css, v2-chrome.css,
   the tenant page's inline styles), so the rules here carry the same weight and an `html body` prefix to outrank them.

   Ink #1a1714 (tints as rgba(26,24,21,a)) · cobalt #2F55FF · warm off-grey #F1EFEA · hairline #E8E4DD */

/* "Explore Carousel" (the showreel's heading) in the hero's type: Instrument Serif headline, Hanken subtitle (2026-10-05) */
html body #how .reel-head.rh-center .rh-c-h{font-family:"Instrument Serif",ui-serif,Georgia,serif!important;font-weight:400!important;font-style:normal!important;font-variation-settings:normal!important;letter-spacing:-.012em!important;font-size:clamp(32px,3.4vw,46px)!important;line-height:1.06!important;margin:0 auto 10px!important}
html body #how .reel-head.rh-center p.rh-c-sub{font-size:17px!important;margin:0 auto!important;max-width:32em!important;text-align:center!important;font:400 17px/1.45 "Hanken Grotesk",system-ui,sans-serif!important;color:rgba(26,24,21,.62)!important;text-wrap:balance}
@media (max-width:760px){html body #how .reel-head.rh-center .rh-c-h{font-size:clamp(34px,7.6vw,46px)!important}html body #how .reel-head.rh-center p.rh-c-sub{font-size:15px!important;color:rgba(26,24,21,.55)!important;padding:0 16px}}


/* =============================================================== proof band: LED news chyron */
@keyframes ymCyCrawl{to{transform:translateX(-50%)}}
@keyframes ymCyBlink{50%{opacity:.3}}
html body #how.reel-sec.takeover .ym-logos{background:#F1EFEA!important;padding:0!important;height:32px!important;min-height:0!important;overflow:hidden}
html body #how.reel-sec.takeover .ym-logos::after{background:linear-gradient(180deg,#F1EFEA,rgba(241,239,234,0))!important}
html body #how.reel-sec.takeover .ym-logos .ym-logos-vp{display:block!important;height:32px;line-height:0;-webkit-mask-image:none!important;mask-image:none!important}
html body #how .ym-cy{position:relative;display:flex;align-items:stretch;width:100%;height:32px;overflow:hidden;background:#F1EFEA;box-shadow:inset 0 1px 0 #E8E4DD,inset 0 -1px 0 #E8E4DD}
html body #how .ym-cy-tag{flex:none;position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin:6px 0 6px clamp(12px,2vw,24px);padding:0 9px;border-radius:999px;background:#1a1714;color:#FAF9F5;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;line-height:1}
html body #how .ym-cy-tag i{width:7px;height:7px;border-radius:50%;background:#ff5a3c;animation:ymCyBlink 1.4s steps(1) infinite}
/* the live odometer itself is the hidden source; the copies in the crawl show its value */
html body #how .ym-cy .ym-cy-src{position:absolute!important;left:0;top:0;width:40px!important;height:20px!important;opacity:0!important;pointer-events:none;overflow:hidden}
html body #how .ym-cy-vp{position:relative;flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
html body #how .ym-cy-track{display:flex;width:max-content;height:100%;animation:ymCyCrawl 95s linear infinite}
html body #how .ym-cy:hover .ym-cy-track{animation-play-state:paused}
html body #how .ym-cy-set{display:flex;align-items:center;height:100%}
html body #how .ym-cy-i,html body #how .ym-cy-sep,html body #how .ym-cy .ym-odo-copy{font-family:var(--mono)!important;font-size:11.5px!important;font-weight:500!important;font-style:normal;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap;text-shadow:none;color:#575046!important}
html body #how .ym-cy-i>.ym-odo-copy{color:#1a1714!important;font-weight:600!important}
html body #how .ym-cy-sep{padding:0 18px;font-size:8px!important;color:#B8963E!important}
@media (prefers-reduced-motion:reduce){html body #how .ym-cy-track,html body #how .ym-cy-tag i{animation:none}}

/* =============================================================== "Learn what you can check" (#checks-keys) */
html body #features #checks-keys .kx-h.kx-cards-h + .kx-sub.kx-cards-sub:not(#c-z){margin-top:8px!important;line-height:1.35!important}

/* eight keys since Job and Address came off (2026-10-05): two rows of four at every width */
@media (min-width:1001px){html body #features #checks-keys .kx-keys{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* the card: white to warm white, one soft cobalt glow, hairline ring, faint scan lines */
html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y){overflow:visible!important;border:0!important;
  background:radial-gradient(70% 70% at 95% 100%,rgba(47,85,255,.16) 0%,rgba(47,85,255,0) 70%),linear-gradient(160deg,#FFFFFF 0%,#FBFAF7 55%,#F3F1EC 100%)!important;
  box-shadow:0 0 0 1px #E8E4DD,0 30px 60px -30px rgba(26,23,20,.3)!important}
html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y)::before{content:""!important;position:absolute!important;inset:0!important;z-index:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(26,23,20,.018) 0 1px,transparent 1px 3px)!important}
html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y)::after{content:none!important;display:none!important}

/* panels sit in flow (all in one grid cell), so the card grows to fit the longest copy */
html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y):not(#c-x){display:grid!important;align-items:start}
html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y):not(#c-x) .kx-panel{position:relative!important;inset:auto!important;right:auto!important;grid-area:1/1;padding-right:0!important;min-width:0;z-index:3!important}

/* type: cobalt outlined counter, extruded ink title, muted body, cobalt links */
html body #features #checks-keys .kx-panel:not(#c-z):not(#c-y):not(#c-x) .kx-eb{flex:none!important;align-self:flex-start;display:inline-flex;align-items:center;height:28px!important;min-height:28px!important;line-height:1!important;padding:0 12px;border-radius:999px;font-size:11px;letter-spacing:.16em;color:#2F55FF!important;box-shadow:inset 0 0 0 1.5px rgba(47,85,255,.45)!important}
html body #features #checks-keys .kx-panel:not(#c-z):not(#c-y) h3{width:fit-content;font-family:var(--sans)!important;font-weight:900!important;font-size:clamp(32px,3.1vw,44px)!important;line-height:.94!important;letter-spacing:-.035em!important;text-transform:uppercase;color:#14120F!important;text-shadow:0 1px 0 #3a352f,0 2px 0 #4a443d,0 3px 0 #5b544b,0 6px 14px rgba(26,23,20,.2)!important}
html body #features #checks-keys .kx-panel.is-on:not(#c-z):not(#c-y) h3::after{display:none!important}
html body #features #checks-keys .kx-panel:not(#c-z):not(#c-y) h3 + p{margin-top:12px!important}
html body #features #checks-keys .kx-panel:not(#c-z):not(#c-y) p{color:#575046!important}

/* footer: who runs the check, and the docs page that explains it */
html body #features #checks-keys .kx-foot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:12px;border-top:1px solid #E8E4DD}
html body #features #checks-keys .kx-foot .kx-pl{font-size:11px;color:#2F55FF!important}
html body #features #checks-keys .kx-prov{display:flex;flex-wrap:wrap;gap:0 8px}
html body #features #checks-keys .kx-prov b{font-family:var(--sans);font-weight:600;font-size:16px;color:#14120F}
html body #features #checks-keys .kx-prov b+b::before{content:"·";margin-right:8px;font-weight:400;color:#B9B2A5}
html body #features #checks-keys .kx-doc{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:500;font-size:15px;color:#2F55FF;text-decoration:none}
html body #features #checks-keys .kx-doc:hover{color:#14120F}
html body #features #checks-keys .kx-doc span{transition:transform .2s}
html body #features #checks-keys .kx-doc:hover span{transform:translateX(3px)}

/* the character: big on the right, head out of the top, cropped at the card's bottom edge; his nudge stays flat so
   the crop never tilts */
@keyframes kxPokeFlat{0%{transform:scaleX(-1) translateX(0)}35%{transform:scaleX(-1) translateX(10px)}100%{transform:scaleX(-1) translateX(0)}}
@media (min-width:1001px){
  html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y):not(#c-x){min-height:410px!important;padding:clamp(22px,2.4vw,32px)!important}
  html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y):not(#c-x) .kx-panel{margin-right:38%!important}
  html body #features #checks-keys .kx-char:not(#c-z){height:calc(100% + 140px)!important;bottom:-100px!important;right:-24px!important;max-width:80%!important;object-position:right bottom!important;clip-path:inset(-300px -300px 100px -300px)!important;-webkit-mask-image:none!important;mask-image:none!important}
  html body #features #checks-keys .kx-char.is-poke:not(#c-z){animation:kxPokeFlat .5s cubic-bezier(.3,1.6,.5,1)!important}
}
@media (max-width:1000px){
  html body #features #checks-keys .kx-char:not(#c-z):not(#c-y):not(#c-x){height:calc(100% + 130px)!important;bottom:-90px!important;right:-10px!important;max-width:46%!important;object-position:right bottom!important;clip-path:inset(-300px -300px 90px -300px)!important;-webkit-mask-image:none!important;mask-image:none!important}
  html body #features #checks-keys .kx-char.is-poke:not(#c-z):not(#c-y):not(#c-x){animation:kxPokeFlat .5s cubic-bezier(.3,1.6,.5,1)!important}
  html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y):not(#c-x) .kx-panel{margin-right:36%!important}
  html body #features #checks-keys .kx-scr-wrap:not(#c-z):not(#c-y):not(#c-x){margin-top:36px!important}
  html body #features #checks-keys .kx-body:not(#c-z):not(#c-y):not(#c-x){row-gap:16px!important}
}
@media (max-width:560px){
  html body #features #checks-keys .kx-char:not(#c-z):not(#c-y):not(#c-x){height:calc(100% + 70px)!important;bottom:-60px!important;right:-8px!important;max-width:44%!important;clip-path:inset(-300px -300px 60px -300px)!important}
  html body #features #checks-keys .kx-screen:not(#c-z):not(#c-y):not(#c-x) .kx-panel{margin-right:34%!important}
  html body #features #checks-keys .kx-scr-wrap:not(#c-z):not(#c-y):not(#c-x){margin-top:12px!important}
  html body #features #checks-keys .kx-body:not(#c-z):not(#c-y):not(#c-x){gap:16px!important}
}

/* =============================================================== "What you can check" card (.cx.cxx) */
html body #features .ft-grid a.cx.cxx{position:relative!important;overflow:visible!important;isolation:isolate;border:0!important;border-radius:22px!important;
  background:radial-gradient(90% 80% at 0% 100%,rgba(47,85,255,.10) 0%,rgba(47,85,255,0) 60%),linear-gradient(160deg,#FFFFFF 0%,#FBFAF7 60%,#F3F1EC 100%)!important;
  box-shadow:0 0 0 1px #E8E4DD,0 30px 60px -30px rgba(26,23,20,.35)!important}
html body #features .ft-grid a.cx.cxx::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(26,23,20,.018) 0 1px,transparent 1px 3px)}
html body #features .ft-grid a.cx.cxx .cxx-clip{position:absolute;z-index:1;left:0;right:0;bottom:0;top:-140px;overflow:hidden;border-radius:0 0 22px 22px;pointer-events:none}
html body #features .ft-grid a.cx.cxx .cxx-char{position:absolute;left:2%;bottom:-14px;height:calc((100% - 140px) * .66 + 14px);width:auto;max-width:50%;object-fit:contain;object-position:left bottom;filter:drop-shadow(10px 10px 18px rgba(26,23,20,.18));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
html body #features .ft-grid a.cx.cxx:hover .cxx-char{transform:translateY(-6px)}
html body #features .ft-grid a.cx.cxx .cx-cap,html body #features .ft-grid a.cx.cxx .cx-vp{z-index:2}
html body #features .ft-grid a.cx.cxx .cx-eyebrow{display:inline-flex!important;align-items:center;width:fit-content!important;max-width:max-content!important;height:28px;margin-bottom:12px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(47,85,255,.45);font-family:var(--mono)!important;font-size:11px!important;font-weight:500;letter-spacing:.16em!important;text-transform:uppercase;color:#2F55FF!important}
html body #features .ft-grid a.cx.cxx .cx-h{display:flex!important;flex-direction:column!important;gap:4px!important}
html body #features .ft-grid a.cx.cxx .cx-h,html body #features .ft-grid a.cx.cxx .cx-h1,html body #features .ft-grid a.cx.cxx .cx-h2{font-family:var(--sans)!important;font-style:normal!important;font-weight:900!important;font-size:clamp(22px,2.4vw,36px)!important;line-height:.95!important;letter-spacing:-.035em!important;text-transform:uppercase;background:none!important}
html body #features .ft-grid a.cx.cxx .cx-h1,html body #features .ft-grid a.cx.cxx .cx-h2{display:block!important;line-height:1!important}
html body #features .ft-grid a.cx.cxx .cx-h1{color:#14120F!important;-webkit-text-fill-color:#14120F!important;text-shadow:0 1px 0 #3a352f,0 2px 0 #4a443d,0 3px 0 #5b544b,0 6px 14px rgba(26,23,20,.22)!important}
html body #features .ft-grid a.cx.cxx .cx-h2{color:#2F55FF!important;-webkit-text-fill-color:#2F55FF!important;text-shadow:0 1px 0 #2846D6,0 2px 0 #223CB8,0 3px 0 #1C3299,0 6px 14px rgba(47,85,255,.25)!important}
@media (min-width:561px){
  html body #features .ft-grid a.cx.cxx .cx-vp{left:42%!important;right:14px!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important}
  html body #features .ft-grid a.cx.cxx .cx-cap{max-width:40%!important;right:auto!important}
}
/* phones: a 224px header band, caption left and the character (head to waist) right; the list starts below it */
@media (max-width:560px){
  html body #features .ft-grid a.cx.cxx{height:520px!important;min-height:520px!important}
  html body #features .ft-grid a.cx.cxx .cx-vp{left:14px!important;top:224px!important;bottom:12px!important;height:auto!important}
  html body #features .ft-grid a.cx.cxx .cx-cap{max-width:58%!important}
  html body #features .ft-grid a.cx.cxx .cxx-clip{top:0!important;bottom:auto!important;height:224px!important;border-radius:22px 22px 0 0!important;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  html body #features .ft-grid a.cx.cxx .cxx-char{left:auto!important;right:-2%!important;top:16px!important;bottom:auto!important;height:440px!important;max-width:none!important;transform:none!important}
}

/* =============================================================== "Skip the pile" report card (.rp.rp-card.rpx) */
html body #features .ft-grid.ft-scroll:not(#c-z):not(#c-y){padding-top:80px!important;margin-top:-44px!important}   /* room for the pop-outs */
html body #features .ft-grid .rp.rp-card.rpx{position:relative!important;display:block!important;overflow:visible!important;isolation:isolate;min-height:394px;padding:0!important;border-radius:22px!important;
  background:#C9673F!important;box-shadow:0 30px 60px -30px rgba(120,50,20,.55)!important;color:#FFF4E6!important;text-decoration:none!important}
html body #features .ft-grid .rp.rp-card.rpx::before,html body #features .ft-grid .rp.rp-card.rpx::after{display:none!important}
/* the office fades into the solid coral on the left, so the copy stays legible */
html body #features .ft-grid .rp.rp-card.rpx .rpx-bg{position:absolute;z-index:1;inset:0;overflow:hidden;border-radius:22px;pointer-events:none}
html body #features .ft-grid .rp.rp-card.rpx .rpx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#C9673F 0%,#C9673F 30%,rgba(201,103,63,.75) 42%,rgba(201,103,63,0) 58%)}
html body #features .ft-grid .rp.rp-card.rpx .rpx-scene{position:absolute;top:0;bottom:0;left:auto;right:0;width:64%;height:100%;object-fit:cover;object-position:85% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 14%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 14%,#000 40%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
html body #features .ft-grid .rp.rp-card.rpx:hover .rpx-scene{transform:scale(1.03)}
/* she is kicked back in her chair: heels out of the right edge, wheels out of the bottom */
html body #features .ft-grid .rp.rp-card.rpx .rpx-pop{position:absolute;z-index:1;left:61%;right:auto;bottom:-9%;width:50%;height:auto;max-width:none;pointer-events:none;transform:rotate(3deg);transform-origin:50% 100%;filter:drop-shadow(0 22px 22px rgba(80,30,10,.38));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
html body #features .ft-grid .rp.rp-card.rpx:hover .rpx-pop{transform:rotate(0deg) translate(6px,-6px)}
html body #features .ft-grid .rp.rp-card.rpx .rpx-copy{position:absolute;inset:0 auto 0 0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:12px;box-sizing:border-box;width:62%;padding:24px 22px 22px}
html body #features .ft-grid .rp.rp-card.rpx .rpx-tag{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,244,230,.75);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#FFF4E6}
html body #features .ft-grid .rp.rp-card.rpx .rpx-h{display:flex;flex-direction:column;margin-top:auto;font-family:var(--sans);font-weight:900;font-size:clamp(30px,3vw,40px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
html body #features .ft-grid .rp.rp-card.rpx .rpx-h1{color:#14120F}
html body #features .ft-grid .rp.rp-card.rpx .rpx-h2{color:#FFF4E6;text-shadow:0 2px 0 #14120F,0 4px 14px rgba(20,18,15,.35)}
html body #features .ft-grid .rp.rp-card.rpx .rpx-sub{max-width:22ch;font-family:var(--sans);font-size:15.5px;line-height:1.4;color:#FFF4E6;text-shadow:0 1px 10px rgba(110,45,20,.45);text-wrap:pretty}
html body #features .ft-grid .rp.rp-card.rpx .rpx-cta{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:12px;background:#14120F;color:#FFF4E6;font-family:var(--sans);font-weight:600;font-size:15.5px;box-shadow:0 14px 30px -14px rgba(20,18,15,.8),0 2px 0 #000;transition:transform .2s}
html body #features .ft-grid .rp.rp-card.rpx:hover .rpx-cta{transform:translateY(-2px)}
html body #features .ft-grid .rp.rp-card.rpx .rpx-cta i{font-style:normal;transition:transform .2s}
html body #features .ft-grid .rp.rp-card.rpx:hover .rpx-cta i{transform:translateX(3px)}
@media (max-width:760px){
  html body #features .ft-grid .rp.rp-card.rpx{height:400px!important;min-height:400px!important}
  html body #features .ft-grid .rp.rp-card.rpx .rpx-copy{width:100%;justify-content:flex-start}
  html body #features .ft-grid .rp.rp-card.rpx .rpx-h{margin-top:4px}
  html body #features .ft-grid .rp.rp-card.rpx .rpx-sub{max-width:52%}
  html body #features .ft-grid .rp.rp-card.rpx .rpx-cta{margin-top:auto}
  html body #features .ft-grid .rp.rp-card.rpx .rpx-scene{width:100%;object-position:82% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 30%,#000 60%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 30%,#000 60%)}
  html body #features .ft-grid .rp.rp-card.rpx .rpx-bg::after{background:linear-gradient(90deg,#C9673F 0%,#C9673F 36%,rgba(201,103,63,.6) 52%,rgba(201,103,63,0) 70%)}
  html body #features .ft-grid .rp.rp-card.rpx .rpx-pop{left:auto;right:-9%;bottom:-6%;width:auto;height:66%}
}