/* site.css - shared base styles for the SmartCareApps marketing site.
   EDIT SHARED STYLES HERE ONLY. Linked by every page before its own inline
   <style>, so a page can still override anything below.

   Contains: design tokens (:root), reset and typography, buttons, and the
   WHOLE navigation (header, dropdowns, mobile menu). Nav styling lives here
   because the nav markup is shared via /nav.html - keep the two together.

   Page-specific styles stay in that page's own <style> block. */

:root{
    --ink:#1f1b17; --paper:#f4f0e9; --card:#fbf9f5; --white:#ffffff;
    --accent:#c8553d; --accent-deep:#a8412c;
    --green:#3f7d5c; --green-bg:#e7f0dc;
    --amber:#b07d23; --amber-bg:#f6ead0;
    --red:#b23a2f;   --red-bg:#f6ddd8;
    --soft:#6b635a; --line:#e6ddcf;
    --display:'Fraunces',Georgia,serif;
    --body:'IBM Plex Sans',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --wrap:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
  .eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
  h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-.01em}
  p{color:#39322c}
  .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);font-weight:600;font-size:16px;padding:13px 22px;border-radius:9px;border:1.5px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease}
  .btn--primary{background:var(--accent);color:#fff}
  .btn--primary:hover{background:var(--accent-deep);transform:translateY(-1px)}
  .btn--ghost{border-color:var(--line);background:transparent;color:var(--ink)}
  .btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
  a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
  header{position:sticky;top:0;z-index:50;background:rgba(244,240,233,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  /* The wordmark is the logo file itself, not type, so the site header and the
     logo can never drift apart. It also saves loading a font for three words. */
  .brand{display:flex;align-items:center}
  .brand img{height:26px;width:auto;display:block}
  .nav-links{display:flex;align-items:center;gap:28px}
  .nav-links a.link{font-size:15px;font-weight:500;color:var(--soft)}
  .nav-links a.link:hover{color:var(--ink)}
  .dd{position:relative;display:inline-flex;align-items:center;align-self:stretch}
  .dd-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .dd-trigger::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55}
  .dd--on > .dd-trigger{color:var(--ink)}
  .dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:238px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(31,27,23,.10);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60}
  .dd-menu a,.dd-menu .dd-soon{font-size:14px;font-weight:500;color:var(--soft);padding:9px 12px;border-radius:8px;white-space:nowrap}
  .dd-menu a{display:block}
  .dd-menu a:hover,.dd-menu a[aria-current="page"]{background:var(--paper);color:var(--ink)}
  .dd-menu .dd-soon{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#a79e94;cursor:default}
  .dd-menu .dd-soon i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 7px}
  .dd:hover > .dd-menu,.dd:focus-within > .dd-menu{display:flex}

/* --- Nav layout + full mobile menu (CSS-only toggle, no JS) --- */
  .nav{justify-content:flex-start}
  .nav-links{margin-left:auto}
  .nav-cta{flex:0 0 auto;margin-left:28px}
  .nav-toggle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .burger{display:none}
  @media (max-width:880px){
    .nav{position:relative;gap:12px}
    .nav-cta{margin-left:auto;padding:10px 16px;font-size:15px}
    .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:10px 9px;border:1px solid var(--line);border-radius:10px;background:var(--white);cursor:pointer;flex:0 0 auto}
    .burger span{display:block;height:2px;background:var(--ink);border-radius:2px}
    .nav-links{position:absolute;top:100%;left:0;right:0;margin:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgba(31,27,23,.12);padding:6px 24px 20px;max-height:calc(100vh - 70px);overflow-y:auto}
    .nav-toggle:checked ~ .nav-links{display:flex}
    .nav-links .link{display:block;font-size:16px;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line)}
    .dd{display:flex;flex-direction:column;align-items:stretch;align-self:stretch;position:static}
    .nav-links .dd-trigger{display:block;padding:16px 0 8px;border-bottom:0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);cursor:default;pointer-events:none}
    .dd-trigger::after{display:none}
    .dd-menu{position:static;transform:none;display:flex;min-width:0;background:transparent;border:0;box-shadow:none;padding:0;gap:0;z-index:auto}
    .dd-menu a,.dd-menu .dd-soon{font-size:16px;padding:14px 0 14px 14px;border-bottom:1px solid var(--line);border-radius:0;white-space:normal}
    .dd-menu a{color:var(--ink)}
    .dd-menu a:hover{background:transparent}
    .dd-menu a[aria-current="page"]{background:transparent;color:var(--accent);font-weight:600}
  }
  @media (max-width:560px){
    .brand img{height:22px}
    .nav-cta{padding:9px 13px;font-size:14px}
  }

  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}