/* v2-chrome.css — the 2026-09-29 chrome handoff ("Carousel website form setup"): header/nav rhythm, the visual
   mobile menu, the key-cap footer (footer.ft3), the Start screening chooser (#startModal), the hero composer's
   Book a demo row, and the phone sizing of the checks screen. Linked straight after v2-responsive.css on every
   v2 page (v2pages.add_responsive), the order the design reference loads them in. Markup: src/v2/chrome/.
   Behaviour: src/chrome-v3.js. Each block below is one of the handoff's override sheets, kept in its order; the
   character ring (12e), which the handoff retired in 12i, is left out. */

/* ======== nav-v3.css ======== */
/* nav-v3.css — header/nav pass (design change #01, see HANDOFF-CLAUDE-CODE.md).
   Loaded after v2-responsive.css. Changes 01–06 in HANDOFF-CLAUDE-CODE.md.
   Desktop layout: brand + links left, actions right, on a 56px row, 36px controls. */
@media (min-width:1081px){
  
  html body header#header .pbar{height:32px!important;min-height:32px!important}
  html body header#header > .wrap{padding:0 28px!important}
  html body header#header > .wrap > nav{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;height:56px!important;min-height:56px!important;align-items:center!important;gap:0!important}
  html body header#header .brand{justify-self:start!important;height:40px!important;align-items:center!important}
  html body header#header .brand .brand-wm{height:24px!important;width:auto!important}

  /* links — flat */
  html body header#header .fnav{justify-self:start!important;width:auto!important;margin:0 0 0 36px!important;height:36px!important;align-items:center!important}
  html body header#header .fnav-track{height:36px!important;padding:0!important;gap:4px!important;align-items:center!important;background:transparent!important;border:0!important;box-shadow:none!important}
  html body header#header .fnav-dd{height:36px!important;display:flex!important;align-items:center!important}
  html body header#header .fnav-ddb,
  html body header#header .fnav-track > a:not(.fnav-mob){height:36px!important;padding:0 16px!important;font-size:15px!important;font-weight:500!important;line-height:36px!important;letter-spacing:-.005em!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;color:#575046!important;background:transparent!important;box-shadow:none!important;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease!important}
  html body header#header .fnav-ddb:hover,
  html body header#header .fnav-dd:hover .fnav-ddb,
  html body header#header .fnav-dd:focus-within .fnav-ddb,
  html body header#header .fnav-track > a:not(.fnav-mob):hover{background:transparent!important;color:#1a1714!important;box-shadow:none!important}
  html body header#header .fnav-ddb svg{width:9px!important;height:9px!important;opacity:.5}
  html body header#header .fnav-panel{top:calc(100% + 10px)!important}
  html body header#header .fnav-panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}

  /* actions */
  html body header#header .nav-actions{justify-self:end!important;height:36px!important;gap:4px!important;align-items:center!important}
  html body header#header .nav-actions .lang-btn{width:36px!important;height:36px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:999px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#575046!important}
  html body header#header .nav-actions .lang-btn:hover{background:transparent!important;color:#1a1714!important}
  html body header#header .nav-actions .gh-login{height:36px!important;padding:0 16px!important;font-size:15px!important;font-weight:500!important;line-height:36px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;color:#1a1714!important}
  html body header#header .nav-actions .gh-login:hover{background:transparent!important;color:#575046!important}
  html body header#header .nav-actions .btn-dark{margin-left:4px!important;height:36px!important;padding:0 20px!important;font-size:15px!important;font-weight:600!important;line-height:36px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;background:#1a1714!important;color:#FAF9F5!important;box-shadow:none!important;transition:background-color .15s ease!important}
  html body header#header .nav-actions .btn-dark:hover{background:#2c2823!important}
}

/* mobile / tablet — change #02 */
@media (max-width:1080px){
  html body header#header > .wrap{padding:0 16px!important}
  html body header#header > .wrap > nav{height:52px!important;min-height:52px!important;align-items:center!important}
  html body header#header .brand{height:40px!important;align-items:center!important}
  html body header#header .brand .brand-wm{height:24px!important;width:auto!important}
  html body header#header .nav-actions{gap:6px!important;align-items:center!important}
  html body header#header .nav-actions .lang-btn{width:36px!important;height:36px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:999px!important;display:grid!important;place-items:center!important}
  html body header#header .nav-actions .btn-dark{height:36px!important;padding:0 16px!important;font-size:15px!important;font-weight:600!important;line-height:36px!important;border-radius:999px!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important}
  html body header#header .nav-actions .hamburger{width:36px!important;height:36px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:999px!important}
}
@media (max-width:440px){
  html body header#header .brand .brand-wm{height:24px!important}
  html body header#header .nav-actions{gap:2px!important}
  html body header#header .nav-actions .lang-btn{width:36px!important;height:36px!important}
  html body header#header .nav-actions .btn-dark{padding:0 14px!important}
}

/* header hairline only once scrolled — change #03 */
html body header#header{border-bottom:1px solid transparent!important;box-shadow:none!important;transition:border-color .25s ease!important}
html body header#header.scrolled{border-bottom-color:#e8e4dd!important}
html body header#header::after,html body header#header .wrap::after,html body header#header > .wrap > nav::after{border:0!important;box-shadow:none!important;background:none!important}

/* mobile menu — visual rebuild, change #04. Borrows the desktop mega-menu vocabulary:
   character cards (.fnav-soon pill, anime cut-outs), raised .fnav-mk key icons, title + one-line descriptor. */
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d){display:block!important;grid-template-columns:none!important;gap:0!important;padding-left:0!important;padding-right:0!important;padding-bottom:28px!important;overflow-y:auto!important}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;padding:4px 20px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-rail::-webkit-scrollbar{display:none}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card{position:relative;flex:0 0 min(74%,300px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:236px;padding:16px 16px 0;border-radius:16px;overflow:hidden;color:#1a1714;text-decoration:none;background:radial-gradient(120% 70% at 50% 100%,#E4E5EA 0%,#F1F1F4 45%,#FBFBFC 100%);box-shadow:inset 0 0 0 1px rgba(26,24,21,.06)}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card > :not(.mnav-char){position:relative;z-index:2}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,24,21,.5);margin-bottom:4px}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card b{margin-top:6px;font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card small{font-size:14px;line-height:1.35;color:rgba(26,24,21,.6);max-width:62%}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-char{position:absolute;right:-6px;bottom:0;width:58%;height:150px;z-index:1;pointer-events:none}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-char img{position:absolute;right:0;bottom:-14px;height:168px;width:auto;max-width:none;filter:drop-shadow(0 8px 14px rgba(40,44,60,.18))}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-grp{padding:0 20px;margin-top:28px}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-h{margin:0 0 8px 4px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,24,21,.5)}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-list{display:grid;gap:2px}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-mi{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 4px;border-radius:12px;color:#1a1714;text-decoration:none}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-mi:active{background:#F1EDE4}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-mi span{display:grid;gap:2px;min-width:0}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-mi b{font-size:16.5px;font-weight:600;line-height:1.25}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-mi small{font-size:14px;line-height:1.35;color:rgba(26,24,21,.58)}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-mk{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:linear-gradient(180deg,#FFFDF8 0%,#F2EDE2 100%);border:1px solid rgba(26,24,21,.1);box-shadow:0 3px 0 #DDD5C4,0 4px 8px -3px rgba(26,24,21,.18),inset 0 1px 0 #fff;color:#1a1815;font-style:normal}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-mk svg{width:19px;height:19px}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-cs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-chip{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px;border-radius:12px;background:#F6F3EC;color:#1a1714;text-decoration:none}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-chip .mnav-mk{width:32px;height:32px;border-radius:9px;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:14px;font-weight:600;box-shadow:0 2px 0 #DDD5C4,inset 0 1px 0 #fff}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-chip b{font-size:15px;font-weight:600;line-height:1.2;min-width:0}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-all{display:inline-flex;align-items:center;min-height:44px;margin:6px 0 0 4px;font-size:15px;font-weight:600;color:#1a1714;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(26,24,21,.25)}
html body #mobileNav .m-actions{border-top:0!important}

/* card field colours — the five-check rail palette */
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card{--f:#eed6bb;--ink:#1a1815;background:var(--f)!important;box-shadow:none!important;color:var(--ink)!important}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card:nth-child(2){--f:#022082;--ink:#f3ede2}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card:nth-child(3){--f:#7a855b;--ink:#f3ede2}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card:nth-child(4){--f:#AD0308;--ink:#FFFFFF}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card .mnav-lbl{color:var(--ink)!important;opacity:.7}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card small{color:var(--ink)!important;opacity:.78}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card:nth-child(n+2) .fnav-soon{background:var(--ink)!important;color:var(--f)!important}
html body #mobileNav .mnav:not(#n-a):not(#n-b):not(#n-c):not(#n-d) .mnav-card .mnav-char img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.22))}

/* promo banner stays on scroll (only the × dismisses it) — change #05 */
html body header#header .pbar.is-hidden:not(.is-dismissed){height:32px!important;min-height:32px!important;opacity:1!important;pointer-events:auto!important}
html body:has(#pbar.is-hidden:not(.is-dismissed)) #mobileNav .m-scroll:not(#r-a):not(#r-b):not(#r-c){padding-top:calc(var(--hdr-h,48px) + 40px)!important}

/* 761–899px: use the phone header (hamburger) instead of the overflowing link scroller — change #08 */
@media (max-width:899px){
  html body header#header nav .fnav,html body header#header nav .menu{display:none!important}
  html body header#header .nav-actions .hamburger{display:inline-flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:4px!important}
  html body header#header .nav-actions .hamburger span{display:block;width:16px;height:1.6px;background:#14120F;border-radius:2px;transition:transform .25s,opacity .2s}
  html body header#header > .wrap > nav{justify-content:space-between!important}
}

/* Log in stays visible once the hamburger header takes over — change #14 */
@media (max-width:899px){
  html body header#header .nav-actions .gh-login{display:inline-flex!important;align-items:center!important;height:36px!important;padding:0 10px!important;font-size:15px!important;font-weight:500!important;line-height:36px!important;color:#1a1714!important;background:transparent!important;white-space:nowrap}
}
@media (max-width:760px){
  html body #header nav .gh-login:not(#r-a){display:inline-flex!important}
}
@media (max-width:400px){
  html body header#header .nav-actions .gh-login{padding:0 6px!important;font-size:14.5px!important}
  html body header#header .nav-actions .btn-dark{padding:0 12px!important;font-size:14.5px!important}
  html body header#header .nav-actions .lang-btn{width:32px!important}
}

/* ======== footer-v3.css ======== */
/* footer-v3.css — footer in the header's vocabulary (change #09, HANDOFF-CLAUDE-CODE.md).
   Same wordmark + Log in / Start screening pair as the nav, same flat 15px links and 11.5px caps labels
   as the mega panels, key-cap icons for social, .fnav-soon-style pills. No hairlines. */
html body footer.ft3{background:#FAF9F5;color:#1a1714;border:0!important;box-shadow:none!important}
html body footer.ft3 > .wrap{max-width:1280px;margin:0 auto;padding:72px 28px 40px!important}
.ft3-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ft3-brand{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
html body footer.ft3 .ft3-logo{display:flex;align-items:center;height:36px}
html body footer.ft3 .ft3-logo .mark,html body footer.ft3 .ft3-logo .brand-t{display:none!important}
html body footer.ft3 .ft3-logo .brand-wm{display:block!important;height:24px!important;width:auto!important}
.ft3-tag{margin:0!important;font-size:15px;font-weight:500;color:#575046}
.ft3-tag em{font-family:"Newsreader",Georgia,serif;font-size:17px;font-weight:450;color:#1a1714}
.ft3-cta{display:flex;align-items:center;gap:4px}
.ft3-login{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;color:#1a1714!important;text-decoration:none}
.ft3-login:hover{color:#575046!important}
.ft3-btn{display:inline-flex;align-items:center;height:36px;padding:0 20px;margin-left:4px;border-radius:999px;background:#1a1714;color:#FAF9F5!important;font-size:15px;font-weight:600;text-decoration:none;transition:background-color .15s ease}
.ft3-btn:hover{background:#2c2823}
.ft3-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 24px;margin-top:56px}
.ft3-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ft3-h{margin:0 0 10px!important;font-size:11.5px!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,24,21,.5)}
.ft3-col a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:15px;font-weight:500;line-height:1.3;color:#575046!important;text-decoration:none;transition:color .15s ease}
.ft3-col a:hover{color:#1a1714!important}
.ft3-col a svg{width:11px;height:11px;opacity:.5}
.ft3-soon{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:#141310;color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.04em}
.ft3-meta{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:56px}
.ft3-social{display:flex;align-items:center;gap:10px}
.ft3-key{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:linear-gradient(180deg,#FFFDF8 0%,#F2EDE2 100%);border:1px solid rgba(26,24,21,.1);box-shadow:0 3px 0 #DDD5C4,0 4px 8px -3px rgba(26,24,21,.18),inset 0 1px 0 #fff;color:#1a1815!important;transition:transform .12s ease,box-shadow .12s ease}
.ft3-key:hover{transform:translateY(-1px);box-shadow:0 4px 0 #DDD5C4,0 6px 10px -3px rgba(26,24,21,.2),inset 0 1px 0 #fff}
.ft3-key:active{transform:translateY(2px);box-shadow:0 1px 0 #DDD5C4,inset 0 1px 0 #fff}
.ft3-key svg{width:18px;height:18px}
.ft3-place{margin-left:10px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,24,21,.5)}
.ft3-legal{display:flex;flex-wrap:wrap;gap:4px 20px}
.ft3-legal a{display:inline-flex;align-items:center;min-height:32px;font-size:14px;font-weight:500;color:#575046!important;text-decoration:none}
.ft3-legal a:hover{color:#1a1714!important}
.ft3-disc{max-width:860px;margin:28px 0 0!important;font-size:13.5px!important;line-height:1.55!important;color:rgba(26,24,21,.55);text-wrap:pretty}
.ft3-copy{margin:10px 0 0!important;font-size:13.5px!important;color:rgba(26,24,21,.55)}
@media (max-width:1080px){
  .ft3-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  html body footer.ft3 > .wrap{padding:56px 20px 32px!important}
  .ft3-top{flex-direction:column;align-items:flex-start}
  .ft3-cta{width:100%}
  .ft3-cta .ft3-btn{flex:1;justify-content:center;height:44px}
  .ft3-cta .ft3-login{height:44px}
  .ft3-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin-top:40px}
  .ft3-col a{min-height:40px}
  .ft3-meta{flex-direction:column;align-items:flex-start;margin-top:40px}
}

/* section key caps (change #11) — the real key-cap art from the "Learn what you can check" keys */
.ft3-hd{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:6px}
.ft3-hd .ft3-h{margin:0!important}
.ft3-cap{position:relative;display:block;width:52px;margin-left:-4px;transition:transform .16s cubic-bezier(.3,1.5,.5,1)}
.ft3-cap img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 1px rgba(26,23,20,.28)) drop-shadow(0 8px 10px rgba(26,23,20,.2))}
.ft3-cap svg{position:absolute;left:50%;top:36%;width:30%;height:30%;transform:translate(-50%,-50%)}
.ft3-cap.k-cream svg,.ft3-cap.k-gold svg{color:rgba(58,44,28,.78);filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.ft3-cap.k-ink svg,.ft3-cap.k-orange svg{color:rgba(255,244,228,.94);filter:drop-shadow(0 -1px 0 rgba(0,0,0,.45))}
.ft3-cap.k-bronze img{filter:sepia(.35) hue-rotate(-22deg) saturate(1.25) brightness(.8) drop-shadow(0 2px 1px rgba(26,23,20,.28)) drop-shadow(0 8px 10px rgba(26,23,20,.2))}
.ft3-cap.k-bronze svg{color:rgba(255,236,214,.92);filter:drop-shadow(0 -1px 0 rgba(60,28,10,.5))}

/* tighter rhythm */
.ft3-grid{margin-top:40px!important;row-gap:28px!important}
.ft3-col{gap:0!important}
.ft3-col a{min-height:30px!important}
.ft3-meta{margin-top:40px!important}
html body footer.ft3 > .wrap{padding-top:56px!important}
@media (max-width:760px){.ft3-col a{min-height:38px!important}}

/* rev — caps sit beside the label; tighter phone rhythm; bronze icon contrast */
.ft3-hd{flex-direction:row!important;align-items:center!important;gap:12px!important;margin-bottom:8px!important}
.ft3-cap{width:40px!important;margin:0!important;flex:none}
.ft3-h{color:rgba(26,24,21,.62)!important}
.ft3-cap.k-bronze svg{color:rgba(58,26,8,.85)!important;filter:drop-shadow(0 1px 0 rgba(255,220,190,.45))!important}
.ft3-cap.k-bronze img{filter:sepia(.3) hue-rotate(-20deg) saturate(1.2) brightness(.88) drop-shadow(0 2px 1px rgba(26,23,20,.28)) drop-shadow(0 6px 8px rgba(26,23,20,.18))!important}
@media (max-width:760px){
  .ft3-grid{row-gap:32px!important;column-gap:20px!important}
  .ft3-col a{min-height:34px!important;font-size:15px!important}
  .ft3-cap{width:36px!important}
}

/* phone top block — stacked brand, paired buttons */
@media (max-width:760px){
  html body footer.ft3 > .wrap{padding-top:36px!important}
  .ft3-top{gap:20px!important}
  .ft3-brand{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
  .ft3-tag{font-size:16px!important}
  .ft3-tag em{font-size:18px!important}
  .ft3-cta{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;width:100%}
  .ft3-cta .ft3-login,.ft3-cta .ft3-btn{height:48px!important;margin:0!important;justify-content:center;border-radius:999px;font-size:16px!important}
  .ft3-cta .ft3-login{box-shadow:inset 0 0 0 1px rgba(26,24,21,.18);background:transparent}
  .ft3-cta .ft3-login:hover{color:#1a1714!important;background:rgba(26,23,20,.04)}
}

/* cap motion (change #11c): all five keys type in sequence when the footer enters view, then each column presses its key on hover */
.ft3-cap{transform-origin:50% 100%;will-change:transform}
.ft3:not(.is-in) .ft3-cap{opacity:0}
.ft3-cap::after{content:"";position:absolute;left:10%;right:10%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(26,23,20,.28),rgba(26,23,20,0));z-index:-1;transition:transform .16s,opacity .16s}
.ft3-col:nth-child(1) .ft3-cap{--i:0}.ft3-col:nth-child(2) .ft3-cap{--i:1}.ft3-col:nth-child(3) .ft3-cap{--i:2}.ft3-col:nth-child(4) .ft3-cap{--i:3}.ft3-col:nth-child(5) .ft3-cap{--i:4}
.ft3.is-in .ft3-cap{animation:ftKey .62s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 110ms + 120ms)}
.ft3.is-in .ft3-cap svg{animation:ftGlyph .62s ease both;animation-delay:calc(var(--i) * 110ms + 120ms)}
@keyframes ftKey{0%{transform:translateY(-10px);opacity:0}35%{transform:translateY(0);opacity:1}55%{transform:translateY(5px) scaleY(.95)}100%{transform:none;opacity:1}}
@keyframes ftGlyph{0%,40%{opacity:0}70%{opacity:1}100%{opacity:1}}
/* production fix: the hover press used to set animation:none, so leaving a column restarted the entry animation from its
   invisible first frame (plus up to 560ms of delay) and the caps blinked out and re-typed (Charles, 2026-09-30:
   "these are disappearing weirdly"). The press now overrides the animation's transform instead of removing it, and
   once the caps have typed in (chrome-v3.js adds .is-done) they carry no animation at all. */
.ft3 .ft3-col:hover .ft3-cap{transform:translateY(5px) scaleY(.96)!important;transition:transform .14s cubic-bezier(.3,1.5,.5,1)}
.ft3.is-done .ft3-cap,.ft3.is-done .ft3-cap svg{animation:none!important;opacity:1}
.ft3 .ft3-col:hover .ft3-cap img{filter:brightness(.95) drop-shadow(0 1px 0 rgba(26,23,20,.35)) drop-shadow(0 3px 4px rgba(26,23,20,.2))!important}
.ft3 .ft3-col:hover .ft3-cap.k-bronze img{filter:sepia(.3) hue-rotate(-20deg) saturate(1.2) brightness(.82) drop-shadow(0 1px 0 rgba(26,23,20,.35)) drop-shadow(0 3px 4px rgba(26,23,20,.2))!important}
.ft3 .ft3-col:hover .ft3-cap::after{transform:scale(.8);opacity:1}
.ft3-cap{transition:transform .22s cubic-bezier(.3,1.5,.5,1)}
@media (prefers-reduced-motion:reduce){.ft3.is-in .ft3-cap,.ft3.is-in .ft3-cap svg{animation:none}.ft3 .ft3-col:hover .ft3-cap{transform:none!important}}

/* ======== start-modal.css ======== */
/* start-modal.css — "Start screening" chooser (change #12b, HANDOFF-CLAUDE-CODE.md).
   A keyboard: press the key for what you screen; the result bar below tells you where it goes.
   Tenant → platform (cobalt bar, key-house character). Everything else → Book a demo (sand bar, businessman). */
.sm{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:20px}
.sm.is-open{display:grid}
.sm-backdrop{position:absolute;inset:0;background:rgba(26,23,20,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:smFade .2s ease both}
.sm-card{position:relative;width:min(640px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;padding:30px 28px 22px;border-radius:24px;background:#FAF9F5;color:#1a1714;box-shadow:0 1px 2px rgba(20,17,13,.06),0 40px 90px -30px rgba(20,17,13,.45);animation:smUp .32s cubic-bezier(.2,.8,.2,1) both}
.sm-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:#575046;display:grid;place-items:center;cursor:pointer;z-index:3}
.sm-x:hover{color:#1a1714;background:rgba(26,23,20,.06)}
.sm-k{margin:0 0 10px!important;font-size:11.5px!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,24,21,.55)}
html body .sm .sm-h{margin:0!important;font-family:"Newsreader",Georgia,serif;font-size:clamp(30px,4vw,40px)!important;font-weight:420;line-height:1.05!important;letter-spacing:-.022em!important}
.sm-h em{font-style:italic}
html body .sm .sm-lede{margin:8px 0 0!important;font-size:16px!important;color:#575046}

/* keyboard */
.sm-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;margin-top:24px}
.sm-key{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;-webkit-tap-highlight-color:transparent}
.sm-cap{position:relative;display:block;width:100%;max-width:92px;isolation:isolate;transition:transform .16s cubic-bezier(.3,1.5,.5,1),filter .16s}
.sm-cap img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 2px 1px rgba(26,23,20,.3)) drop-shadow(0 12px 14px rgba(26,23,20,.22));transition:filter .16s}
.sm-cap::before{content:"";position:absolute;z-index:0;left:7%;right:7%;bottom:-3%;height:22%;border-radius:12px;background:linear-gradient(180deg,#3a342c,#1a1714);box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.7);transition:transform .16s}
.sm-cap svg{position:absolute;z-index:2;left:50%;top:36%;width:28%;height:28%;transform:translate(-50%,-50%)}
.sm-key.k-cream svg,.sm-key.k-gold svg{color:rgba(58,44,28,.78);filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.sm-key.k-ink svg,.sm-key.k-orange svg{color:rgba(255,244,228,.94);filter:drop-shadow(0 -1px 0 rgba(0,0,0,.45))}
.sm-key small{display:inline-block;padding:4px 9px 3px;border-radius:6px;background:#fff;border:1px solid rgba(26,24,21,.12);box-shadow:0 1px 0 rgba(26,24,21,.18);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1a1714;white-space:nowrap;transition:background-color .15s,color .15s}
.sm-key:hover .sm-cap{transform:translateY(-4px)}
.sm-key:hover .sm-cap::before{transform:translateY(4px)}
.sm-key[aria-pressed="true"] .sm-cap{transform:translateY(6px) scaleY(.975);filter:brightness(.94)}
.sm-key[aria-pressed="true"] .sm-cap::before{transform:translateY(-5px)}
.sm-key[aria-pressed="true"] .sm-cap img{filter:drop-shadow(0 1px 0 rgba(26,23,20,.45)) drop-shadow(0 3px 4px rgba(26,23,20,.3))}
.sm-key[aria-pressed="true"] small{background:#1a1714;color:#FAF9F5;border-color:#1a1714}
.sm-key:focus-visible .sm-cap{outline:2px solid #2F55FF;outline-offset:4px;border-radius:14px}
.sm-key:first-child small::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:#2F55FF;vertical-align:1px}

/* result bar */
.sm-out{position:relative;display:flex;align-items:center;gap:16px;min-height:112px;margin-top:26px;padding:18px 18px 18px 22px;border-radius:18px;overflow:hidden;transition:background-color .3s ease,color .3s ease}
.sm-out{background:var(--bg,#022082)!important}
.sm-out[data-tone="light"]{color:#f3ede2}
.sm-out[data-tone="dark"]{color:#1a1815}
.sm-out-t{position:relative;z-index:2;display:grid;gap:3px;min-width:0;flex:1;padding-right:88px}
.sm-out-k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.sm-out-t b{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.sm-out-t small{font-size:14.5px;line-height:1.35;opacity:.8}
.sm-out-go{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none!important;white-space:nowrap;transition:transform .15s ease,background-color .15s}
.sm-out[data-tone="light"] .sm-out-go{background:#FAF9F5;color:#1a1714!important}
.sm-out[data-tone="dark"] .sm-out-go{background:#1a1714;color:#FAF9F5!important}
.sm-out-go:hover{transform:translateX(2px)}
.sm-out-char{position:absolute;z-index:1;right:196px;bottom:-26px;width:96px;height:128px;pointer-events:none}
.sm-out-char img{position:absolute;right:0;bottom:0;height:128px;width:auto;max-width:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25));transition:opacity .2s ease,transform .35s cubic-bezier(.3,1.4,.5,1)}
.sm-out-char img.is-in{animation:smChar .45s cubic-bezier(.3,1.4,.5,1) both}
@keyframes smChar{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
.sm-out.is-swap .sm-out-t{animation:smSwap .28s ease both}

html body .sm .sm-foot{margin:16px 0 0!important;font-size:14px!important;color:#575046}
.sm-foot a{color:#1a1714!important;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(26,24,21,.3)}
html.sm-lock{overflow:hidden}
@keyframes smFade{from{opacity:0}to{opacity:1}}
@keyframes smUp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes smSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .sm{place-items:end center;padding:0}
  .sm-card{width:100%;border-radius:22px 22px 0 0;padding:24px 18px calc(18px + env(safe-area-inset-bottom));max-height:94dvh}
  .sm-keys{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px;margin-top:20px}
  .sm-key small{font-size:9.5px;padding:3px 5px;letter-spacing:.04em}
  .sm-out{flex-direction:column;align-items:stretch;gap:14px;padding:18px}
  .sm-out-t{padding-right:84px}
  .sm-out-go{justify-content:center;height:48px}
  .sm-out-char{right:10px;bottom:auto;top:6px;width:80px;height:100px}
  .sm-out-char img{height:104px}
}
@media (prefers-reduced-motion:reduce){.sm-card,.sm-backdrop,.sm-out.is-swap .sm-out-t{animation:none}.sm-cap,.sm-out-char img{transition:none}}

/* hero composer — vertical → Book a demo (change #13) */
html body .gh-composer .gh-demo{display:none}
html body .gh-composer[data-mode="demo"] .gh-opts{display:none!important}
html body .gh-composer[data-mode="demo"] .gh-demo{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:6px 6px 4px 8px;animation:smSwap .28s ease both}
.gh-demo-t{margin:0!important;font-size:15px!important;line-height:1.4!important;color:#575046;flex:1 1 260px;text-wrap:pretty}
.gh-demo-t b{color:#1a1714;font-weight:600}
.gh-demo-go{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:#1a1714;color:#FAF9F5!important;font-size:15px;font-weight:600;text-decoration:none!important;transition:background-color .15s,transform .15s}
.gh-demo-go:hover{background:#2c2823}
.gh-demo-go:hover svg{transform:translateX(2px)}
.gh-demo-go svg{transition:transform .15s}
@media (max-width:560px){.gh-demo-go{width:100%;justify-content:center;height:48px}}

/* character breaks out of the bar's top edge (12d) */
.sm-out{overflow:visible!important;margin-top:44px!important}
.sm-out-char{bottom:0!important;height:auto!important;width:auto!important;right:190px!important}
.sm-out-char img{position:relative!important;display:block;height:156px!important;bottom:auto!important;right:auto!important;border-radius:0 0 0 0}
@media (max-width:560px){
  .sm-out{margin-top:52px!important}
  .sm-out-char{right:12px!important;top:auto!important;bottom:auto!important;top:-44px!important}
  .sm-out-char img{height:120px!important}
}

.sm-out-char{isolation:isolate}

/* character sinks into the bar: body continues below the bar's bottom edge and is clipped there (12f) */
.sm-out-char{clip-path:inset(-300px -300px 0 -300px)}
.sm-out-char img{height:176px!important;margin-bottom:-34px}
@media (max-width:560px){
  .sm-out-char{top:auto!important;bottom:0!important}
  .sm-out-char img{height:140px!important;margin-bottom:-26px}
}

/* 12g — keep the character's head clear: bar paints above the keys, and the gap above it fits the overflow */
.sm-out{z-index:3}
.sm-keys{position:relative;z-index:1}
.sm-out-char{top:auto!important}
@media (max-width:560px){
  .sm-out{margin-top:72px!important}
  .sm-out-char{right:8px!important;bottom:0!important}
  .sm-out-char img{height:128px!important;margin-bottom:-18px}
  .sm-out-t{padding-right:96px!important}
}

/* 12h — deterministic character box: 150px window on the bar's bottom edge, image anchored below it and clipped */
html body .sm .sm-out-char{position:absolute!important;right:190px!important;bottom:0!important;top:auto!important;width:150px!important;height:150px!important;clip-path:inset(-300px -300px 0 -300px)}
html body .sm .sm-out-char img{position:absolute!important;left:50%!important;right:auto!important;bottom:-34px!important;height:184px!important;width:auto!important;margin:0!important;transform:translateX(-50%)}
html body .sm .sm-out-char img.is-in{animation:smChar2 .45s cubic-bezier(.3,1.4,.5,1) both}
@keyframes smChar2{from{opacity:0;transform:translate(-50%,28px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@media (max-width:560px){
  html body .sm .sm-out-char{right:6px!important;width:120px!important;height:128px!important}
  html body .sm .sm-out-char img{height:150px!important;bottom:-24px!important}
}

/* 12h — normalized character plates (sm-char-0..6.png, 300×330, head 118px at y=26): one size for all */
html body .sm .sm-out-char{width:168px!important;height:150px!important}
html body .sm .sm-out-char img{height:185px!important;bottom:-35px!important}
@media (max-width:560px){
  html body .sm .sm-out-char{width:128px!important;height:120px!important}
  html body .sm .sm-out-char img{height:141px!important;bottom:-21px!important}
}


/* 12k — bar as a grid: [text][character][cta]; the character has its own column so text can never run under it */
html body .sm .sm-out{display:grid!important;grid-template-columns:minmax(0,1fr) 168px auto;grid-template-areas:"t c g";align-items:center;column-gap:14px;padding:18px 18px 18px 22px!important}
html body .sm .sm-out-t{grid-area:t;padding-right:0!important}
html body .sm .sm-out-go{grid-area:g}
html body .sm .sm-out-char{grid-area:c;position:relative!important;right:auto!important;left:auto!important;bottom:auto!important;top:auto!important;align-self:end;width:168px!important;height:150px!important;margin:-42px 0 -18px!important}
@media (max-width:560px){
  html body .sm .sm-out{grid-template-columns:minmax(0,1fr) 120px;grid-template-areas:"t c" "g g";row-gap:14px;padding:18px!important}
  html body .sm .sm-out-char{width:120px!important;height:128px!important;margin:-44px -6px 0 0!important;align-self:end;grid-row:1}
  html body .sm .sm-out-go{width:100%}
}

/* 12l — character cell spans the bar's full height; figure = bar height + 40px, so it always rises 40px above the bar */
html body .sm .sm-out-char{align-self:stretch!important;height:auto!important;margin:-18px 0!important}
html body .sm .sm-out-char img{height:calc(100% + 75px)!important;bottom:-35px!important}
@media (max-width:560px){
  html body .sm .sm-out-char{margin:-18px -6px 0 0!important;height:auto!important}
  html body .sm .sm-out-char img{height:calc(100% + 60px)!important;bottom:-20px!important}
}

/* 12m — title + lede wrapped in .sm-hd so ds-v2's "h2 + p ~ *" 24px rule no longer hits the keys/bar/footer; real gaps restored */
html body .sm .sm-card > .sm-keys:not(#s-a):not(#s-b):not(#s-c){margin-top:24px!important}
html body .sm .sm-card > .sm-out:not(#s-a):not(#s-b):not(#s-c){margin-top:60px!important}
html body .sm .sm-card > .sm-foot:not(#s-a):not(#s-b):not(#s-c){margin-top:16px!important}
@media (max-width:560px){html body .sm .sm-card > .sm-out:not(#s-a):not(#s-b):not(#s-c){margin-top:64px!important}}

/* 12n — soften the plates' side edges so wide props (clipboard, shoulders) fade out instead of stopping on a hard vertical cut */
html body .sm .sm-out-char img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}

/* 12o — full-figure plates (360×330, whole figure inside with 8px margin): no side mask, wider character column */
html body .sm .sm-out-char img{-webkit-mask-image:none!important;mask-image:none!important}
html body .sm .sm-out{grid-template-columns:minmax(0,1fr) 196px auto!important}
html body .sm .sm-out-char{width:196px!important;clip-path:inset(-300px -300px 0 -300px)}
@media (max-width:560px){
  html body .sm .sm-out{grid-template-columns:minmax(0,1fr) 140px!important}
  html body .sm .sm-out-char{width:140px!important}
}

/* 12q — full product names on the key labels (match the nav), wrap to two lines when needed */
html body .sm .sm-key small{white-space:normal!important;text-align:center;max-width:100%;line-height:1.25;padding:4px 8px 3px}
html body .sm .sm-key{justify-content:flex-start}
@media (max-width:560px){html body .sm .sm-key small{font-size:9px!important;letter-spacing:.03em!important;padding:3px 4px!important}}

/* ======== checks-v3.css ======== */
/* checks-v3.css — "Learn what you can check" result screen, phone sizing (change #16, HANDOFF-CLAUDE-CODE.md). */
@media (max-width:760px){
  html body #features #checks-keys .kx-screen:not(#c-a){min-height:210px!important;padding:20px 20px 22px!important}
  html body #features #checks-keys .kx-screen:not(#c-a) .kx-panel{padding-right:38%!important}
  html body #features #checks-keys .kx-char:not(#c-a){height:calc(100% + 36px)!important;right:2%!important}
}
@media (max-width:440px){
  html body #features #checks-keys .kx-screen:not(#c-a){min-height:190px!important}
  html body #features #checks-keys .kx-screen:not(#c-a) .kx-panel{padding-right:34%!important}
}

/* more air between the gold rule and the description */
html body #features #checks-keys .kx-panel:not(#c-a) h3 + p{margin-top:18px!important}
@media (max-width:760px){html body #features #checks-keys .kx-panel:not(#c-a) h3 + p{margin-top:14px!important}}

/* reviews: real quotes now, so no "Sample quote" label and no white wash on hover (handoff §9) */
html body #reviews .rv2-q::after{content:none!important;display:none!important}
html body #reviews .rv2-card:hover{background:none!important}
/* a text wordmark where a customer has no logo in the repo (First Stays) */
.lv2-quote figcaption b{font-weight:700;font-size:15px;letter-spacing:-.02em;color:#14120F}

/* production fix (not in the handoff): the handoff's ≤440px header needs ~400px (logo 105 + globe + Log in + a 125px
   Start screening + menu + gutters), so 360–380px phones pushed the menu button off the screen and 390–440px ones
   squeezed it into the gutter. Up to 440px the gutters, gaps and paddings tighten; below 380px the wordmark drops to
   21px as well. Every control stays. */
@media (max-width:440px){
  html body header#header > .wrap{padding:0 12px!important}
  html body header#header > .wrap > nav{gap:4px!important}
  html body header#header .nav-actions{gap:0!important}
  html body header#header .nav-actions .lang-btn{width:30px!important}
  html body header#header .nav-actions .gh-login{padding:0 5px!important;margin:0 2px 0 0!important}
  html body header#header .nav-actions .btn-dark{padding:0 11px!important}
}
@media (max-width:380px){
  html body header#header .brand .brand-wm{height:21px!important}
}

/* production fix (not in the handoff): "Learn what you can check" on phones. The panels are absolutely positioned,
   so the screen never grew with its text, and the text column was squeezed twice -- the design's right:42% plus the
   handoff's padding-right:38% -- leaving 18-122px of text beside a ~95px character: every panel ran out of the
   screen at 320-760px (Charles, 2026-09-30: "fix overflow here"). Up to 760px the ten panels share one grid cell,
   so the screen is as tall as the longest of them (and never jumps between keys); the text keeps clear of the
   character by its own width; the character keeps a fixed height, so a taller screen cannot widen it. */
@media (max-width:760px){
  html body #features #checks-keys .kx-screen:not(#c-a):not(#c-b){display:grid!important;align-items:start}
  html body #features #checks-keys .kx-screen:not(#c-a):not(#c-b) .kx-panel{position:relative!important;inset:auto!important;
    grid-area:1/1;right:auto!important;padding-right:0!important;margin-right:108px!important;min-width:0}
  html body #features #checks-keys .kx-char:not(#c-a):not(#c-b){height:246px!important}
}
@media (max-width:420px){
  html body #features #checks-keys .kx-screen:not(#c-a):not(#c-b) .kx-panel{margin-right:100px!important}
  html body #features #checks-keys .kx-char:not(#c-a):not(#c-b){height:226px!important}
}

/* production fix: "See a sample report" stays on one line (Charles, 2026-09-30: "make sure one line here") */
html body .rp .rp-cta{white-space:nowrap;flex:none;width:max-content;max-width:none}

/* no self-serve (v2pages.SELF_SERVE): the cobalt dot marked Tenant as the one self-serve key */
html[data-self-serve="off"] .sm .sm-key:first-child small::after{display:none}
/* no Log in either (v2pages._no_login): the footer's phone pair becomes one full-width Start screening */
@media (max-width:760px){html[data-self-serve="off"] .ft3-cta{grid-template-columns:1fr!important}}
/* no self-serve: the first-pack offer card (50% off, BOGO, pack builder) sells a purchase nobody can make */
html[data-self-serve="off"] .ft-hero-pack{display:none!important}