/* The company page of GlacierPoint Technologies (glacierpointtech.com; frontend/company/README.md). Tokens and components come
   from theme.css (GlacierPoint Scan's, copied); the header and footer mirror the products' sites without a nav.
   Product colors: each card sets --product (the product word and the tagline pill), --product-fill and --product-fill-hover (its
   button, white text). Scan's are the rust tokens of theme.css. Snapshot's teal text is --teal (#1F6B5E light, #86D1BD dark); its
   fills are not in theme.css, so they are the two tokens below, in theme.css's layout: light in :root, the dark values twice
   (the system's scheme while no choice was made, and the switch's choice). They are GlacierPoint Snapshot's accent and its hover
   (white 6.32:1 / 9.36:1 in light, 4.75:1 / 6.32:1 in dark). */
:root{--snapshot-fill:#1F6B5E;--snapshot-fill-hover:#174F46}
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--snapshot-fill:#2A8070;--snapshot-fill-hover:#1F6B5E}
}
@media screen{
  :root[data-theme="dark"]{--snapshot-fill:#2A8070;--snapshot-fill-hover:#1F6B5E}
}

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}

/* Header: the mark and "GlacierPoint", the switch on the right. */
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
.site-actions{display:flex;align-items:center;gap:12px}

/* The company sentence, in the hero's headline style. */
.intro{padding-top:96px;padding-bottom:56px}
.intro h1{max-width:980px;font-size:52px;line-height:1.08;letter-spacing:-1.2px}

/* Two equal product cards. */
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:96px}
.product{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0;padding:40px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);overflow:hidden}
.product::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--product-fill)}
.product-snapshot{--product:var(--teal);--product-fill:var(--snapshot-fill);--product-fill-hover:var(--snapshot-fill-hover)}
.product-scan{--product:var(--link);--product-fill:var(--accent);--product-fill-hover:var(--accent-hover)}
.product-lockup{display:flex;align-items:center;gap:14px;margin:0;color:var(--ink);font-family:var(--font-display);letter-spacing:normal}
.product-lockup .brand-mark{width:40px;height:40px}
.product-lockup .brand-name{font-size:28px}
.product-tag{color:var(--product);background:var(--paper-2);white-space:normal}
.product-blurb{margin:0;font-size:var(--fs-lg);line-height:1.65;color:var(--text)}
.btn-product{margin-top:auto;background:var(--product-fill);color:var(--on-accent)}
.btn-product:hover{background:var(--product-fill-hover);color:var(--on-accent)}
.btn-product:focus-visible{outline-color:var(--product-fill)}

/* Footer: the mark and "GlacierPoint", the addresses, the copyright line and the trademark sentence last. */
.site-footer{border-top:1px solid var(--line);background:var(--paper-2)}
.site-footer .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-top:40px;padding-bottom:40px}
.footer-contact{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none;font-size:14px}
.footer-contact a{color:var(--text);overflow-wrap:anywhere}
.footer-contact a:hover{color:var(--ink);text-decoration:underline}
.footer-base{align-self:stretch;display:flex;flex-direction:column;gap:6px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-md);color:var(--muted)}

@media (max-width:900px){
  .intro{padding-top:64px;padding-bottom:40px}
  .intro h1{font-size:40px;letter-spacing:-.9px}
  .products{grid-template-columns:minmax(0,1fr);padding-bottom:64px}
}
@media (max-width:600px){
  .site-header .wrap{padding-top:16px;padding-bottom:16px}
  .site-header .brand-name{font-size:18px}
  .intro{padding-top:44px;padding-bottom:28px}
  .intro h1{font-size:30px;line-height:1.12;letter-spacing:-.6px}
  .products{gap:16px;padding-bottom:48px}
  .product{padding:28px 22px 24px;gap:16px}
  .product-lockup{gap:12px}
  .product-lockup .brand-mark{width:34px;height:34px}
  .product-lockup .brand-name{font-size:23px}
  .product-blurb{font-size:var(--fs-base)}
  .btn-product{align-self:stretch;white-space:normal}
  .site-footer .wrap{padding-top:32px;padding-bottom:32px}
}