/* hyperdesk.com's look on the Hyperdesk Ads pages (home, product, compare, articles, 404, privacy, terms), after Eric's
   reference, in the site's own type (conduit.css): black buttons with an arrow, a light header and footer, a field of
   small plus signs under the last call to action. The home page adds the frame lines (body.home, in agent.css).
   Loaded right after conduit.css. The /lp/ ad pages (live Google Ads campaign) and the /websites offer don't load it. */
:root {
  --black: #121212;
  --frame: #e7e6e3;
  --frame-d: #d7d6d2;
  --surface: #f4f6f7;
  --wash: linear-gradient(180deg, #d9edf8 0%, #e6f1f8 26%, #f0f4f7 48%, #f4f6f7 100%);
  --field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke-width='1'%3E%3Cpath d='M47 10h7M50.5 6.5v7' stroke='%23a7b1b8' stroke-opacity='0.84'/%3E%3Cpath d='M87 10h7M90.5 6.5v7' stroke='%238fbbd8' stroke-opacity='0.48'/%3E%3Cpath d='M7 30h7M10.5 26.5v7' stroke='%23a7b1b8' stroke-opacity='0.85'/%3E%3Cpath d='M67 30h7M70.5 26.5v7' stroke='%23a7b1b8' stroke-opacity='0.7'/%3E%3Cpath d='M107 30h7M110.5 26.5v7' stroke='%23a7b1b8' stroke-opacity='0.68'/%3E%3Cpath d='M7 50h7M10.5 46.5v7' stroke='%238fbbd8' stroke-opacity='0.54'/%3E%3Cpath d='M27 50h7M30.5 46.5v7' stroke='%23a7b1b8' stroke-opacity='0.41'/%3E%3Cpath d='M47 50h7M50.5 46.5v7' stroke='%23a7b1b8' stroke-opacity='0.57'/%3E%3Cpath d='M67 50h7M70.5 46.5v7' stroke='%23a7b1b8' stroke-opacity='0.69'/%3E%3Cpath d='M87 50h7M90.5 46.5v7' stroke='%23a7b1b8' stroke-opacity='0.76'/%3E%3Cpath d='M147 50h7M150.5 46.5v7' stroke='%23a7b1b8' stroke-opacity='0.57'/%3E%3Cpath d='M47 70h7M50.5 66.5v7' stroke='%23a7b1b8' stroke-opacity='0.69'/%3E%3Cpath d='M67 70h7M70.5 66.5v7' stroke='%23a7b1b8' stroke-opacity='0.79'/%3E%3Cpath d='M107 70h7M110.5 66.5v7' stroke='%23a7b1b8' stroke-opacity='0.66'/%3E%3Cpath d='M7 90h7M10.5 86.5v7' stroke='%23a7b1b8' stroke-opacity='0.37'/%3E%3Cpath d='M27 90h7M30.5 86.5v7' stroke='%238fbbd8' stroke-opacity='0.69'/%3E%3Cpath d='M47 90h7M50.5 86.5v7' stroke='%23a7b1b8' stroke-opacity='0.55'/%3E%3Cpath d='M107 90h7M110.5 86.5v7' stroke='%23a7b1b8' stroke-opacity='0.85'/%3E%3Cpath d='M127 90h7M130.5 86.5v7' stroke='%23a7b1b8' stroke-opacity='0.77'/%3E%3Cpath d='M7 110h7M10.5 106.5v7' stroke='%23a7b1b8' stroke-opacity='0.74'/%3E%3Cpath d='M27 110h7M30.5 106.5v7' stroke='%23a7b1b8' stroke-opacity='0.52'/%3E%3Cpath d='M67 110h7M70.5 106.5v7' stroke='%23a7b1b8' stroke-opacity='0.91'/%3E%3Cpath d='M107 110h7M110.5 106.5v7' stroke='%23a7b1b8' stroke-opacity='0.39'/%3E%3Cpath d='M127 110h7M130.5 106.5v7' stroke='%23a7b1b8' stroke-opacity='0.79'/%3E%3Cpath d='M7 130h7M10.5 126.5v7' stroke='%23a7b1b8' stroke-opacity='0.4'/%3E%3Cpath d='M47 130h7M50.5 126.5v7' stroke='%23a7b1b8' stroke-opacity='0.84'/%3E%3Cpath d='M67 130h7M70.5 126.5v7' stroke='%23a7b1b8' stroke-opacity='0.77'/%3E%3Cpath d='M87 130h7M90.5 126.5v7' stroke='%238fbbd8' stroke-opacity='0.88'/%3E%3Cpath d='M107 130h7M110.5 126.5v7' stroke='%23a7b1b8' stroke-opacity='0.4'/%3E%3Cpath d='M147 130h7M150.5 126.5v7' stroke='%23a7b1b8' stroke-opacity='0.64'/%3E%3Cpath d='M7 150h7M10.5 146.5v7' stroke='%23a7b1b8' stroke-opacity='0.52'/%3E%3Cpath d='M47 150h7M50.5 146.5v7' stroke='%238fbbd8' stroke-opacity='0.69'/%3E%3Cpath d='M67 150h7M70.5 146.5v7' stroke='%238fbbd8' stroke-opacity='0.87'/%3E%3Cpath d='M87 150h7M90.5 146.5v7' stroke='%238fbbd8' stroke-opacity='0.76'/%3E%3Cpath d='M127 150h7M130.5 146.5v7' stroke='%238fbbd8' stroke-opacity='0.83'/%3E%3C/svg%3E");
  --frame-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='%23a3a29d'%3E%3Crect x='6' width='1' height='13'/%3E%3Crect y='6' width='13' height='1'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E");
}
.mark { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.dim { color: var(--ink-muted); }

/* Buttons: black, with an arrow when they take you somewhere */
.btn.coal { background: var(--black); }
.btn.coal:hover { background: #2e2e2e; }
.go::after { content: ""; flex: none; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: translate 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .go:hover::after { translate: 1px -1px; } }

/* Header: the logo, plain links, Sign in outlined, Book a demo in black */
.hdr { background: rgb(250 250 250 / 0.9); border-bottom: 1px dashed var(--frame-d); }
.hdr.scrolled { border-bottom-color: var(--frame-d); }
.hdr-in { height: 72px; }
.brand img { height: 24px; }
.nav { gap: 34px; }
.nav a { font-size: 15px; opacity: 0.88; }
.hdr-link { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 15px; opacity: 1; transition: border-color 0.15s; }
.hdr-link:hover { border-color: var(--ink-muted); }
.hdr .hdr-link + .btn { margin-left: -32px !important; }
.hdr .btn.sm { height: 40px; padding: 0 16px; border-radius: 9px; font-size: 15px; }

/* The last call to action: no card, a field of plus signs rising from the bottom */
.final-card { border-radius: 0; }
.final-bg { background: var(--field) center bottom / 160px 160px; -webkit-mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.55) 30%, transparent 72%); mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0.55) 30%, transparent 72%); }
.final-bg::after { display: none; }
.final-mark { width: 44px; height: 44px; margin-bottom: 8px; }
.get.banner .get-label { color: var(--ink-muted); }
.get.banner .get-row { border-color: var(--line); box-shadow: 0 1px 2px #0000000d; }
.final .next { margin-top: 16px; font-size: 13px; }

/* Footer: light, with the logo and short columns */
.ftr { border-top: 1px solid var(--frame); background: #fff; color: var(--ink-muted); }
.ftr-mark { display: block; width: max-content; margin: 0 0 20px; line-height: 0; }
.ftr-mark img { width: auto; height: 26px; }
.ftr-brand p { max-width: 32ch; color: var(--ink-muted); font-size: 16px; line-height: 1.5; }
.ftr-h { color: var(--ink-muted); }
.ftr-cols a { color: var(--ink); }
.ftr-cols a:hover, .ftr-bottom a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ftr-ask .ask-ic { box-shadow: inset 0 0 0 1px var(--line); }
.ftr-ask .ask-tile:hover .ask-ic { box-shadow: inset 0 0 0 1px var(--ink-muted); }
.ftr-ask .ask-tile:focus-visible { outline-color: var(--ink); }
.ftr-bottom { border-top-color: var(--frame); }
.ftr .yc { color: var(--ink-muted); }

@media (max-width: 760px) {
  .hdr-in { height: 60px; }
  .hdr .hdr-link + .btn { margin-left: -4px !important; }
  .hdr-link { height: 36px; padding: 0 12px; font-size: 14px; }
  .hdr .btn.sm { height: 36px; padding: 0 12px; font-size: 14px; }
  .final-bg { background-size: 120px 120px; }
}
@media (max-width: 440px) { .hdr .hdr-link { display: none; } .hdr .btn.sm { margin-left: auto !important; } }
@media (prefers-reduced-motion: reduce) { .go::after { transition: none; } }