/* ─── hasafety.ca marketing pages ─────────────────────────────────────────────
   Shared by every static page. The app at /app has its own styles and does not
   load this file.

   No JavaScript is required to read or navigate these pages — that is the whole
   point of them being static. The mobile menu is a CSS-only checkbox toggle and
   the landing page's walkthrough shows its first slide without any script, so a
   crawler (and a person on a bad connection) still gets everything that matters.
   ---------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --navy: #0F1A2E;
  --navy-2: #12233d;
  --card: #182842;
  --line: #22304d;
  --line-2: #2c3d5c;
  --red: #8B1A1A;
  --white: #ffffff;
  --text: #cfd9e8;
  --muted: #9fb0c9;
  --dim: #7d8ea8;
  --green: #2e7d5b;
  --amber: #b8860b;
  --blue: #5ba3d9;
  --mono: 'Montserrat', system-ui, -apple-system, sans-serif;
  --body: 'Open Sans', system-ui, -apple-system, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;          /* belt and braces — nothing should exceed the viewport */
}

a { color: var(--blue); }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 20px; }

/* ─── Top bar ─────────────────────────────────────────────────────────────── */
.bar { border-bottom: 3px solid var(--red); background: var(--navy-2); }
.bar-in { max-width: 940px; margin: 0 auto; padding: 13px 20px; display: flex; align-items: center; gap: 14px; }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; }
.brand-name { font-family: var(--mono); font-size: 16px; font-weight: 800; letter-spacing: 2px;
              color: var(--white); text-transform: uppercase; line-height: 1; }
.brand-sub { font-family: var(--mono); font-size: 8px; letter-spacing: 3px; color: var(--muted);
             text-transform: uppercase; display: block; margin-top: 3px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav a { font-family: var(--body); font-size: 13.5px; color: var(--muted); text-decoration: none;
         padding-bottom: 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--red); }

.nav-div { width: 1px; height: 20px; background: var(--line-2); flex-shrink: 0; }

/* Sign In is deliberately NOT a nav link: it leaves the marketing site and
   enters the product, so it is styled as a control, behind a divider. */
.signin { font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700;
          letter-spacing: 1px; text-transform: uppercase; color: var(--white) !important;
          border: 1px solid var(--red) !important; background: rgba(139,26,26,.28);
          padding: 7px 14px; border-radius: 3px; }
.signin:hover { background: rgba(139,26,26,.5); }

/* CSS-only mobile menu — no script, so it works everywhere and for crawlers.
   The drawer is hidden HERE, at base, not inside the media query: leaving it to
   the media query meant it defaulted to visible on desktop and rendered as a
   stray row of links under the top bar. */
.menu-toggle { display: none; }
.nav-drawer { display: none; }
.menu-btn { display: none; font-family: var(--mono); font-size: 11px; font-weight: 700;
            letter-spacing: 1px; color: var(--muted); border: 1px solid var(--line-2);
            background: none; padding: 7px 11px; border-radius: 3px; cursor: pointer; }

/* ─── Sections ────────────────────────────────────────────────────────────── */
.hero { background: var(--navy-2); border-bottom: 1px solid var(--line); text-align: center;
        padding: 54px 20px; }
h1 { font-family: var(--mono); font-size: 33px; font-weight: 800; color: var(--white);
     line-height: 1.25; letter-spacing: 0.3px; margin: 0; }
.hero p { font-size: 14.5px; color: var(--muted); line-height: 1.75; max-width: 560px;
          margin: 16px auto 0; }
.hero .aside { font-size: 12.5px; color: var(--dim); margin-top: 18px; }

section { padding: 40px 0; }
section.tint { background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 { font-family: var(--mono); font-size: 21px; font-weight: 800; color: var(--white);
     letter-spacing: 0.3px; margin: 0 0 7px; }
.lede { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.prob { background: var(--navy-2); border: 1px solid var(--line); border-left: 3px solid var(--red);
        padding: 15px 17px; font-size: 13.5px; color: var(--text); }
section.tint .prob { background: var(--card); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 17px 19px; }
.card h3 { font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--white);
           margin: 0 0 6px; letter-spacing: 0.2px; }
.card p { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; }
.card .ico { font-size: 21px; margin-bottom: 9px; display: block; }

/* ─── The "screen" mockups (recreated, never screenshots — no assets to keep
       in sync, sharp at any size, and no tenant data ever leaves the app) ──── */
.screen { background: var(--navy-2); border: 1px solid var(--line-2); border-radius: 8px;
          overflow: hidden; max-width: 470px; margin: 22px auto 0; }
.screen-head { padding: 11px 14px; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
               letter-spacing: 1px; color: var(--white); }
.screen-head.red { background: var(--red); }
.screen-head.blue { background: #2a6496; }
.screen-head.plain { background: var(--card); color: var(--muted); }
.screen-sub { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.screen-sub .t { font-size: 13px; color: var(--white); }
.screen-sub .s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
       padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.row .v { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
          text-transform: uppercase; white-space: nowrap; }
.v.bad { color: #c0392b; } .v.ok { color: var(--green); } .v.warn { color: var(--amber); }
.v.dim { color: var(--muted); }
.screen-foot { padding: 11px 14px; background: var(--card); }
.screen-foot.alert { background: rgba(192,57,43,.14); border-top: 1px solid #c0392b; }
.screen-foot .k { font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
                  text-transform: uppercase; color: #c0392b; font-weight: 700; }
.screen-foot .k.q { color: var(--muted); }
.screen-foot .t { font-size: 13px; color: var(--white); margin-top: 4px; }

/* ─── Trust + the advisor strip ────────────────────────────────────────────── */
.trust { background: var(--card); border-left: 3px solid var(--green); padding: 15px 17px; }
.trust.b { border-left-color: #2a6496; } .trust.a { border-left-color: var(--amber); }
.trust h3 { font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--white); margin: 0 0 5px; }
.trust p { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; }

/* ─── Close ───────────────────────────────────────────────────────────────── */
.close { text-align: center; padding: 52px 20px; }
.close h2 { font-size: 23px; }
.close .why { font-size: 14.5px; color: var(--text); line-height: 1.75; max-width: 460px; margin: 0 auto; }
.close .how { font-size: 12.5px; color: var(--dim); line-height: 1.7; max-width: 450px; margin: 16px auto 0; }
.cta { display: inline-block; background: var(--red); color: var(--white) !important; text-decoration: none;
       font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 1.4px;
       text-transform: uppercase; padding: 15px 28px; border-radius: 3px; margin-top: 22px; }
.cta:hover { background: #a52020; }
.or { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); background: var(--navy-2); padding: 20px; }
.foot-in { max-width: 940px; margin: 0 auto; display: flex; justify-content: space-between;
           gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--dim); }
.foot-in a { color: var(--dim); text-decoration: none; }
.foot-in a:hover { color: var(--muted); }

/* ─── Walkthrough (landing page) ──────────────────────────────────────────────
   Slides are radio-driven so the first one is visible with no JavaScript; a tiny
   script advances them for people who have it. */
.wt-in { display: none; }
/* One fixed stage height for all three slides. They auto-advance, so a shorter
   slide made the whole page shift up and down as it cycled — the sections below
   it visibly jumped. Fixing the stage means the screens swap in place. */
.wt-stage { min-height: 430px; display: flex; align-items: flex-start; justify-content: center; }
.wt-slide { display: none; width: 100%; }
#wt1:checked ~ .wt-stage .wt-s1,
#wt2:checked ~ .wt-stage .wt-s2,
#wt3:checked ~ .wt-stage .wt-s3,
#wt4:checked ~ .wt-stage .wt-s4 { display: block; }
.wt-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.wt-dots label { width: 9px; height: 9px; border-radius: 5px; background: var(--line-2); cursor: pointer; }
#wt1:checked ~ .wt-dots label[for="wt1"],
#wt2:checked ~ .wt-dots label[for="wt2"],
#wt3:checked ~ .wt-dots label[for="wt3"],
#wt4:checked ~ .wt-dots label[for="wt4"] { width: 22px; background: var(--red); }
.wt-cap { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ─── Mobile ──────────────────────────────────────────────────────────────────
   Four links plus Sign In do not fit one row on a phone. The links collapse into
   a toggle; Sign In stays visible because it is the only thing an existing user
   needs from this page. */
@media (max-width: 760px) {
  .menu-btn { display: block; order: 2; }
  .nav { order: 3; }
  .nav .page-link { display: none; }
  .nav-div { display: none; }
  .menu-toggle:checked ~ .nav-drawer { display: block; }
  .nav-drawer { border-top: 1px solid var(--line); background: var(--navy); }
  .nav-drawer a { display: block; padding: 14px 20px; font-size: 15px; color: var(--muted);
                  text-decoration: none; border-bottom: 1px solid var(--line); }
  .nav-drawer a[aria-current="page"] { color: var(--white); }

  h1 { font-size: 26px; }
  h2 { font-size: 19px; }
  .hero { padding: 38px 18px; }
  section { padding: 32px 0; }
  .close { padding: 40px 18px; }
  .close h2 { font-size: 20px; }
  .cta { font-size: 12.5px; padding: 14px 20px; letter-spacing: 1px; }
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  h1 { font-size: 23px; }
  .cta { font-size: 11.5px; padding: 13px 15px; }
  .brand-name { font-size: 14px; letter-spacing: 1.4px; }
}