/* Alarmcast shared foundation: palette, page ground, header/nav and footer.
   Linked by index.html AND privacy/index.html. These used to be duplicated inline in
   both pages, which is how the privacy page drifted a whole palette behind. Page-specific
   rules still live inline in each page. */

  :root{
    /* TRUE NEUTRAL charcoal: r=g=b, deliberately. Every previous ground here had a blue lean
       (#06080f, then #16181D), and next to purple accents a blue-leaning grey reads as a purple
       cast on the whole page. Keep these greys equal-channel. If you tint the ground at all,
       check it by sampling a rendered pixel, not by eye. */
    --bg:#1A1A1A;
    --surface:#232323;
    --surface-hi:#2C2C2C;
    --purple-500:#7C5CFF;
    --purple-400:#9C82FF;
    --purple-200:#CBBEFF;
    --amber:#EBC14D;
    --amber-fill:#221E15;
    --on-high:#EDEFF3;
    --on-med:#A6ACB6;
    --on-low:#767C86;
    --divider:rgba(255,255,255,.10);
    --card:#1E2127;
    /* Depth on a dark ground: a soft drop shadow alone barely reads, so each block also
       gets a 1px inset highlight along its top edge. That is what actually lifts it off
       the background. --elev-2 is for the two emphasised pricing cards. */
    --elev-1:0 10px 26px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
    --elev-2:0 18px 40px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
    --radius:20px;
    --maxw:1120px;
    /* app's own dark background (GraphiteDarkBackground in the Android theme).
       The phone frame and its chrome strips use this so the screenshot never
       sits on a visible seam. */
    --device-bg:#0E1014;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--on-high);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}

  /* Quiet page background. A gentle vertical gradient, lighter at the top and settling
     darker down the page, so the ground has depth without a colour cast. Deliberately NOT
     radial purple/teal glow orbs, which is what made the old page read as generic. */
  body::before{
    content:"";
    position:fixed;inset:0;z-index:-1;
    background:linear-gradient(180deg,#202020 0%,#1A1A1A 42%,#131313 100%);
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

  /* ---------- nav ---------- */
  header{
    position:sticky;top:0;z-index:50;
    backdrop-filter:blur(12px);
    background:rgba(22,24,29,.88);
    border-bottom:1px solid var(--divider);
  }
  nav{display:flex;align-items:center;justify-content:space-between;height:66px;}
  .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:18px;letter-spacing:-.01em;}
  /* Mark notice on the wordmark only. Use ™; never ® unless a registration grants. */
  /* one flex item, so .brand's gap does not push the mark away from the word */
  .wordmark{white-space:nowrap;}
  .tm{font-size:.48em;font-weight:600;vertical-align:super;letter-spacing:0;opacity:.6;margin-left:1px;}
  .brand .mark{width:30px;height:30px;display:block;object-fit:contain;background:#fff;border-radius:50%;padding:1px;box-sizing:border-box;
    box-shadow:0 2px 6px rgba(0,0,0,.45);}
  .navlinks{display:flex;gap:26px;align-items:center;font-size:14.5px;color:var(--on-med);}
  .navlinks a:hover{color:var(--on-high);}
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-weight:600;font-size:14.5px;
    padding:11px 20px;border-radius:999px;
    background:var(--purple-500);
    color:#fff;border:none;cursor:pointer;
    box-shadow:none;
    transition:background .15s ease, box-shadow .15s ease;
    white-space:nowrap;
  }
  .btn:hover{background:var(--purple-400);box-shadow:0 4px 14px -6px rgba(0,0,0,.5);}
  .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.16);box-shadow:none;color:var(--on-high);}
  .btn.ghost:hover{border-color:var(--purple-400);background:rgba(124,92,255,.08);}
  @media(max-width:900px){ .navlinks{display:none;} }

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--divider);padding:40px 0;color:var(--on-low);font-size:14px;}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
  .foot a:hover{color:var(--on-high);}
  .foot-links{display:flex;gap:24px;flex-wrap:wrap;}