/* Mattersmith marketing site — shared chrome.

   Everything used by more than one page lives here: design tokens, base
   element styles, the skip link, the header/nav, buttons, and the footer.
   Rules used by a single page stay inline in that page's <style> block,
   which is loaded after this file so a page can still override.

   Pages are hand-written with no build step, so this file is the only copy
   of the design tokens — change a color here and every page follows. */

:root {
  /* ---- DS color tokens ---- */
  --primary-50:#f0f7ff; --primary-100:#e1effe; --primary-200:#cfe0f6; --primary-300:#bcd6f5; --primary-400:#55a3f9; --primary-600:#1a69d6;
  --primary-700:#155aa8; --primary-800:#164b8b;
  --gray-50:#faf9f7; --gray-100:#f5f3f0; --gray-200:#e8e6e0; --gray-300:#d6d3cb;
  --gray-400:#c3bfb8; --gray-500:#9e9a91; --gray-600:#767268; --gray-700:#5a5750;
  --gray-800:#3b3935; --gray-900:#252320; --gray-950:#161513;
  --amber-200:#fcd9a5; --amber-600:#d97706; --amber-700:#9a5b06; --amber-50:#fffbeb; --green-600:#16a34a; --green-800:#166534; --green-50:#f0fdf4;

  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-full:9999px;
  --shadow-sm:0 1px 3px 0 rgb(22 21 19 / .06), 0 1px 2px -1px rgb(22 21 19 / .04);
  --shadow-md:0 4px 6px -1px rgb(22 21 19 / .07), 0 2px 4px -2px rgb(22 21 19 / .05);
  --shadow-lg:0 16px 28px -10px rgb(22 21 19 / .12), 0 6px 10px -8px rgb(22 21 19 / .06);

  --font-sans:"Cabin", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-display:clamp(2.5rem, 1.3rem + 4.6vw, 4.5rem);
  --fs-h2:clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
  --fs-lead:clamp(1.15rem, 1rem + 0.7vw, 1.45rem);

  --maxw:1120px;
  --pad-inline:clamp(1.25rem, 5vw, 2.5rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font-sans); color:var(--gray-700);
  background:#fff; line-height:1.55; font-size:1.0625rem;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{color:var(--gray-900); font-weight:700; line-height:1.08; letter-spacing:-0.02em; margin:0;}
p{margin:0;}
a{color:var(--primary-700); text-decoration:none;}
strong{font-weight:600; color:var(--gray-900);}
:focus-visible{outline:2px solid var(--primary-600); outline-offset:3px; border-radius:var(--radius-sm);}

/* skip link — mirrors the app Design System's .skip-link (base.css) so keyboard
   users get the same affordance across the marketing site and the app */
.skip-link{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip-link:focus{position:fixed; top:.5rem; left:.5rem; width:auto; height:auto;
  padding:.5rem 1rem; margin:0; overflow:visible; clip:auto; white-space:normal;
  background:#fff; color:var(--primary-600); font-size:.875rem; font-weight:500;
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:100;}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-inline);}
.eyebrow{
  font-size:.8125rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gray-600);
}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--gray-200);}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
/* wordmark.svg is a separate request, so pin the ratio here — otherwise
   width:auto measures zero until it loads and the nav reflows on first paint */
.logo{height:22px; width:auto; display:block; aspect-ratio:197.239 / 35.9;}
.tagline{font-size:.7rem; font-weight:500; color:var(--gray-600); letter-spacing:.01em;}
.nav .right{display:flex; align-items:center; gap:1.25rem;}
.nav .navlink{font-size:.9rem; font-weight:600; color:var(--gray-700);}
.nav .navlink:hover{color:var(--primary-700);}
/* three nav items plus the wordmark don't fit a phone at full size — tighten
   rather than let the demo button's label wrap inside the 64px header */
.nav .brand, .nav .right > *{flex:none;}
@media (max-width:430px){
  .logo{height:19px;}
  .nav .right{gap:.7rem;}
  .nav .navlink{font-size:.85rem;}
  .nav .btn-sm{padding:.5rem .7rem; font-size:.8125rem;}
}
@media (max-width:345px){
  .logo{height:17px;}
  .nav .right{gap:.5rem;}
  .nav .navlink{font-size:.8125rem;}
  .nav .btn-sm{padding:.45rem .55rem; font-size:.78rem;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:inherit;
  font-weight:600; font-size:.95rem; line-height:1; cursor:pointer; border:1px solid transparent;
  border-radius:var(--radius-md); padding:.7rem 1.15rem; text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.btn-primary{background:var(--primary-600); color:#fff;}
.btn-primary:hover{background:var(--primary-700);}
.btn-primary:active{background:var(--primary-800);}
.btn-lg{padding:.9rem 1.6rem; font-size:1.02rem;}
.btn-outline{background:#fff; color:var(--gray-800); border-color:var(--gray-300);}
.btn-outline:hover{background:var(--gray-50); border-color:var(--gray-400);}
.btn-sm{padding:.5rem .9rem; font-size:.875rem;}
.linkcta{display:inline-flex; align-items:center; gap:.35rem; font-weight:600; color:var(--gray-800);
  border-bottom:2px solid var(--gray-300); padding-bottom:1px; transition:border-color .15s ease, color .15s ease;}
.linkcta:hover{color:var(--primary-700); border-color:var(--primary-600);}
.linkcta .arr{transition:transform .15s ease;}
.linkcta:hover .arr{transform:translateX(3px);}

/* ---------- footer ---------- */
footer{background:#fff; border-top:1px solid var(--gray-200); padding-block:2.25rem;}
.foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;}
.foot .diff{font-size:.8125rem; color:var(--gray-600);}
.foot-links{display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.8125rem;}
.foot-links a{color:var(--gray-600);}
.foot-links a:hover{color:var(--primary-700);}

/* ---------- reveal animation ---------- */
.reveal{opacity:1;}
@media (prefers-reduced-motion:no-preference){
  @keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  .reveal{opacity:0; animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) forwards;}
  .d1{animation-delay:.05s} .d2{animation-delay:.13s} .d3{animation-delay:.23s}
  .d4{animation-delay:.35s} .d5{animation-delay:.47s}
}