/* v2-hero.css — the hero from the 2026-10-04 Claude Design touch-ups: app icon, Instrument Serif headline, subtitle,
   the app-style composer and the $400M laurel. Linked on / and /tenant-screening/ (v2pages.PAGE_SHEETS), after
   v2-chrome.css. Markup: HERO_TOUCHUPS in tools/v2pages.py; composer behaviour: src/chrome-v3.js.
   The sheets before it set most of these with !important, so these rules carry the same weight.
   Ink #1a1714 (tints as rgba(26,24,21,a)) · cobalt #2F55FF */

/* Instrument Serif: the app's display face (carousel-wrapper --font-display), self-hosted, Latin only */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-serif-normal-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =============================================================== hero: app icon, headline, subtitle */
html body .gh-try{display:flex;justify-content:center;margin:clamp(16px,6svh,72px) 0 18px;padding:0 16px;position:relative;z-index:2}
html body .gh-try a{display:inline-flex;text-decoration:none}
html body .gh-try-logo{display:block;height:52px;width:auto;border-radius:12px;box-shadow:0 1px 2px rgba(26,24,21,.08),0 10px 24px -12px rgba(26,24,21,.45);transition:transform .2s}
html body .gh-try a:hover .gh-try-logo{transform:translateY(-1px) rotate(-3deg)}
html body .gh-try a:focus-visible{outline:2px solid #2F55FF;outline-offset:4px;border-radius:14px}

html body .gh-head .gh-h1.gh-h1-x{font-family:"Instrument Serif",ui-serif,Georgia,serif!important;font-weight:400!important;font-variation-settings:normal!important;letter-spacing:-.012em!important;font-size:clamp(32px,3.4vw,46px)!important;line-height:1.06!important;max-width:none!important;margin-bottom:10px!important}
html body .gh-h1-x .ghx-line{font:inherit!important;letter-spacing:inherit!important}

html body .gh-head .gh-sub-x{display:block!important;margin:0 auto!important;max-width:32em;text-align:center;font:400 17px/1.45 "Hanken Grotesk",system-ui,sans-serif!important;color:rgba(26,24,21,.62)!important;text-wrap:balance}

/* =============================================================== composer (#ghComposer) */
html body #ghComposer{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:10px;row-gap:4px;align-items:center;
  background:#fff;border:1px solid rgba(26,24,21,.12)!important;border-radius:28px!important;padding:10px 10px 10px 12px!important;
  box-shadow:0 1px 2px rgba(26,24,21,.04),0 10px 28px -14px rgba(26,24,21,.14)!important}
html body #ghComposer>*{grid-column:1/-1}
html body #ghComposer>.gh-verts{grid-row:1;margin-bottom:2px!important}
html body #ghComposer>.gh-row{grid-column:1;grid-row:2;margin:0!important;position:relative;min-height:56px;padding-left:8px!important;display:flex;align-items:center}
html body #ghComposer[data-mode="screen"]>.gh-row{padding-left:6px!important}

/* tabs: a horizontal scroller with a right-edge fade and a chevron that steps it along */
html body #ghComposer .gh-verts{gap:4px;padding-right:44px;scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 72px),transparent calc(100% - 32px));mask:linear-gradient(90deg,#000 calc(100% - 72px),transparent calc(100% - 32px))}
html body #ghComposer .gh-verts.at-end{-webkit-mask:none;mask:none}
html body #ghComposer .gh-verts::-webkit-scrollbar{display:none}
html body #ghComposer .gh-vert{height:40px;padding:0 14px;border-radius:14px;gap:8px;font-size:15px;font-weight:500;color:rgba(26,24,21,.55);background:transparent;transition:color .15s,background .15s}
html body #ghComposer .gh-vert:hover{color:#1a1714;background:rgba(26,24,21,.04)}
html body #ghComposer .gh-vert.is-on{color:#1a1714;background:rgba(26,24,21,.07)}
html body #ghComposer .gh-chev{position:absolute;z-index:2;right:12px;top:14px;margin:0;width:32px;height:32px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:rgba(26,24,21,.6);cursor:pointer;transition:opacity .2s,background .15s}
html body #ghComposer .gh-chev[hidden]{display:none}
html body #ghComposer .gh-chev:hover{background:rgba(26,24,21,.06);color:#1a1714}

/* email field: an envelope in front of the placeholder; both go once something is typed */
html body #ghComposer .gh-input{font-size:17px!important;padding:8px 0!important}
html body #ghComposer .gh-input::placeholder{color:rgba(26,24,21,.42)!important;font-weight:400!important}
html body #ghComposer .gh-env{flex:none;margin-right:6px;color:rgba(26,24,21,.42);opacity:.8;pointer-events:none}
html body #ghComposer .gh-row:has(.gh-input:not(:placeholder-shown)) .gh-env{display:none}

/* screen mode ("Screen a tenant" while self-serve is on): the app's composer controls */
html body #ghComposer[data-mode="screen"]>.gh-opts{grid-column:2;grid-row:2;margin:0!important;padding:0!important;display:flex!important;align-items:center;gap:6px;background:none!important;border:0!important;min-height:0}
html body #ghComposer[data-mode="screen"] .gh-spacer{display:none!important}
html body #ghComposer[data-mode="screen"] .gh-seg{display:inline-flex;align-items:center;gap:2px;flex:none;height:44px!important;padding:3px!important;border-radius:999px!important;border:1px solid transparent!important;background:rgba(26,24,21,.05)!important}
html body #ghComposer[data-mode="screen"] .gh-seg button{display:inline-flex;align-items:center;gap:7px;height:36px!important;min-width:36px;padding:0 10px!important;border:0;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:rgba(26,24,21,.55)!important;font:500 15px/1 "Hanken Grotesk",system-ui,sans-serif!important;cursor:pointer}
html body #ghComposer[data-mode="screen"] .gh-seg button.on{background:#1a1714!important;color:#fff!important;padding:0 16px 0 12px!important}
html body #ghComposer[data-mode="screen"] .gh-seg button:not(.on) .gh-seg-l{display:none}
html body #ghComposer[data-mode="screen"] .gh-seg button:not(.on):hover{color:#1a1714!important;background:rgba(26,24,21,.05)!important}
html body #ghComposer[data-mode="screen"] .gh-link{display:inline-flex;align-items:center;justify-content:center;width:40px!important;height:40px!important;padding:0!important;gap:0!important;border-radius:50%!important;background:transparent!important;color:rgba(26,24,21,.7)!important}
html body #ghComposer[data-mode="screen"] .gh-link svg{width:19px;height:19px}
html body #ghComposer[data-mode="screen"] .gh-link:hover{background:rgba(26,24,21,.06)!important;color:#1a1714!important}
html body #ghComposer[data-mode="screen"] .gh-send{display:grid!important;place-items:center;width:44px!important;height:44px!important;padding:0!important;border-radius:50%!important;background:#1a1714!important;color:#fff!important;font-size:0!important}
html body #ghComposer[data-mode="screen"] .gh-send:disabled{background:rgba(26,24,21,.08)!important;color:rgba(26,24,21,.35)!important;cursor:default}
html body #ghComposer[data-mode="screen"] .gh-send::after{display:none!important}   /* "Send invite" pushed the arrow off-centre */
html body #ghComposer[data-mode="screen"] .gh-send svg{display:block;width:18px;height:18px;margin:0!important;position:static!important;transform:none!important}

/* demo mode (every other tab, and Tenant while self-serve is off): one ink pill on the input's centre line */
html body #ghComposer[data-mode="demo"]>.gh-demo{grid-column:2!important;grid-row:2!important;justify-self:end;display:flex;align-items:center;min-height:0;margin:0;padding:0!important;border:0;transform:none!important;animation:none}
html body #ghComposer[data-mode="demo"] .gh-demo-t{display:none}
html body #ghComposer[data-mode="demo"] .gh-demo-go{width:auto;height:44px!important;margin:0!important;padding:0 18px 0 14px!important;gap:8px!important;border-radius:999px!important;background:#1a1714!important;color:#fff!important;font:500 15px/1 "Hanken Grotesk",system-ui,sans-serif!important;box-shadow:none!important}
html body #ghComposer[data-mode="demo"] .gh-demo-go:hover{background:#000!important}
html body #ghComposer .gh-demo-go .gh-cal{width:17px;height:17px}
html body #ghComposer .gh-demo-go svg:not(.gh-cal){display:none}

/* =============================================================== $400M laurel */
@keyframes lxShine{0%,62%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes lxSway{0%,100%{rotate:0deg}50%{rotate:-4deg}}
html body .gh-wrap .gh-laurels{margin-top:clamp(48px,10svh,120px)!important;scale:.84;transform-origin:50% 0}   /* transform is ghLaurelIn's */
html body .gh-wrap{margin-bottom:-12px}
html body .gh-laurels-in{gap:clamp(10px,1.6vw,22px)!important;align-items:center}
html body .gh-laurel{width:clamp(30px,3.4vw,46px)!important;height:auto!important;color:#B8902E;transform-origin:50% 90%;animation:lxSway 5s ease-in-out infinite}
html body .gh-laurel-r{animation-delay:-2.5s}
html body .gh-laurels-t small{font-size:11px!important;letter-spacing:.32em!important;margin-bottom:4px!important}
html body .gh-laurels-t b.lx-big{display:flex!important;align-items:baseline;gap:.22em;font-size:clamp(15px,1.5vw,19px)!important;line-height:1!important;background:none!important;-webkit-text-fill-color:currentColor!important;color:#A8863A!important;animation:none!important}
html body .gh-laurels-t .lx-s{font-weight:800;letter-spacing:.06em}
html body .gh-laurels-t .lx-n{font-family:var(--sans);font-weight:900;font-size:clamp(32px,3.8vw,52px);letter-spacing:-.03em;line-height:.95;text-transform:none;
  background:linear-gradient(100deg,#8A6B24 0%,#C9A65A 30%,#FFF1C2 46%,#C9A65A 60%,#8A6B24 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 #7A5E1E) drop-shadow(0 2px 0 #6A511A) drop-shadow(0 3px 0 #5A4416) drop-shadow(0 8px 12px rgba(122,94,30,.25));animation:lxShine 4.5s ease-in-out infinite}
html body .gh-laurels-t b.lx-sub{margin-top:8px;font-size:clamp(13px,1.2vw,16px)!important;letter-spacing:.12em!important}
@media (prefers-reduced-motion:reduce){html body .gh-laurel,html body .gh-laurels-t .lx-n{animation:none}}

/* =============================================================== hero on phones and small tablets */
@media (max-width:760px){
  html body .gh-head .gh-try{margin:0 0 14px}
  html body .gh-try-logo{height:40px;border-radius:9px}
  html body .gh-head .gh-h1.gh-h1-x{font-size:clamp(38px,8.6vw,54px)!important;line-height:1.02!important;margin-bottom:10px!important}
  html body .gh-head .gh-sub-x{font-size:15px!important;color:rgba(26,24,21,.55)!important;max-width:30em;padding:0 16px;margin-bottom:22px!important}

  html body #ghComposer{grid-template-columns:minmax(0,1fr)!important;row-gap:6px}
  html body #ghComposer>.gh-row{grid-column:1;min-height:48px}
  html body #ghComposer .gh-vert{height:34px;padding:0 11px;border-radius:11px;gap:6px;font-size:13.5px}
  html body #ghComposer .gh-vert svg{width:15px;height:15px}
  html body #ghComposer .gh-chev{top:9px}
  html body #ghComposer .gh-input{font-size:16px!important}

  /* screen mode: the controls get their own row, Send pushed right */
  html body #ghComposer[data-mode="screen"]>.gh-opts{grid-column:1;grid-row:3;justify-content:flex-start!important;width:100%}
  html body #ghComposer[data-mode="screen"] .gh-seg{height:40px!important}
  html body #ghComposer[data-mode="screen"] .gh-seg button{height:32px!important;font-size:14px!important}
  html body #ghComposer[data-mode="screen"] .gh-link{display:inline-flex!important;flex:none;visibility:visible!important;opacity:1!important}
  html body #ghComposer[data-mode="screen"] .gh-link svg{display:block!important}
  html body #ghComposer[data-mode="screen"] .gh-send{margin-left:auto!important;flex:none}

  /* demo mode: Book a demo on its own row, right-aligned */
  html body #ghComposer[data-mode="demo"]>.gh-demo{grid-column:1!important;grid-row:3!important;justify-self:stretch;justify-content:flex-end}

  html body .gh-wrap{margin-bottom:0}
  html body .gh-wrap .gh-laurels{margin-top:clamp(56px,14vw,96px)!important;scale:.82}
  html body .gh-laurel{width:30px!important}
}
@media (max-width:560px){
  html body #ghComposer{border-radius:24px!important;padding:8px 8px 8px 10px!important}
  html body .gh-head .gh-try{margin-bottom:2px}   /* the design's phone spacing: the icon sits close over the headline */
}
@media (max-width:420px){
  html body #ghComposer[data-mode="screen"] .gh-seg button.on{padding:0 12px 0 10px!important}
  html body #ghComposer .gh-demo-go .gh-cal{display:none}
  html body #ghComposer[data-mode="demo"] .gh-demo-go{padding:0 16px!important}
}