/* =============================================================================
   Mono look for every page EXCEPT index.html (2026-10-09).

   index.html wears Mono through css/mono-theme.css on top of css/home.css.
   Every other page loads css/noma-shared.css + its own page sheet, and then
   THIS file LAST, so the same Mono look (DM Sans, flat paper, hairline cards,
   small radii) and the same Archivo green accent reach them without rewriting
   each page sheet. Keep the tokens below in step with mono-theme.css :root.
   ============================================================================= */

:root {
  --ink: #202124;
  --muted: #70747c;
  --paper: #ffffff;
  --white: #ffffff;
  --accent: #647a5b;
  --accent-hover: #4f6247;
  --accent-soft: #eff4ec;
  --accent-line: #cfdcc8;
  --stroke: #e1e4e9;
  --shadow: 0 1px 2px rgba(32, 33, 36, .04);
  --shadow-sm: 0 1px 2px rgba(32, 33, 36, .04);
  --radius-lg: 12px;
  --radius-md: 8px;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --shell: min(1200px, calc(100% - 112px));
  --ink-soft: var(--muted);
  --ink-faint: #9298a2;
  --bg: var(--paper);
  --glass-bg: #fff;
  --glass-bg-strong: #fff;
  --glass-bg-subtle: #ffffff;
  --archivo-teal: var(--accent);
  --glass-brd: var(--stroke);
  --green: var(--accent);
  --green-deep: var(--accent-hover);
  --mint-deep: var(--accent);
  --grad: linear-gradient(110deg, var(--accent), var(--accent-hover));
  --grad-green: var(--grad);
  --grad-warm: var(--grad);
  --green-glow: rgba(100, 122, 91, .12);
  --green-brd: var(--accent-line);
}

/* ---- type: one sans family, headings set like Mono (weight 500, tight) ---- */
body { font-family: 'DM Sans', Arial, sans-serif; background: var(--paper); color: var(--ink); }
h1, h2, h3, h4, h5, h6, .section-heading, .cta-card h2, .cta h2 {
  font-family: inherit !important; font-weight: 500; letter-spacing: -.035em;
}
h1 { letter-spacing: -.05em; }
em, .grad-text, .grad-text--green { color: var(--accent); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline-color: var(--accent); }

/* ---- header: Mono's flat bar with a hairline under the nav ---- */
.site-header { padding: 29px 0 0; background: rgba(255, 255, 255, .95); border: 0; }
.site-header.scrolled { background: rgba(255, 255, 255, .95); box-shadow: none; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav { min-height: 53px; padding-bottom: 25px; border-bottom: 1px solid var(--stroke); }
.brand { font-size: 23px; font-weight: 650; letter-spacing: -1px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 5px; }
.brand-name { white-space: nowrap; }
.brand-office { color: var(--ink); font-weight: 450; letter-spacing: -1px; }
.brand-img { object-fit: contain; }
.nav-menu { gap: 34px; }
.nav-links, .nav-actions { gap: 23px; }
.nav-links a, .text-link { font-size: 14px; color: #62666e; }
.nav-links a:hover, .text-link:hover { color: var(--ink); }

/* ---- buttons: one shape everywhere; primary is the green accent ---- */
.button, .btn { border-radius: 8px; font-weight: 550; min-height: 48px; padding: 0 22px; gap: 10px; box-shadow: none; }
.button:hover, .btn:hover { transform: none; }
.button-dark, .btn--primary { background: var(--accent); color: #fff; box-shadow: none; }
.button-dark:hover, .btn--primary:hover { background: var(--accent-hover); box-shadow: none; }
.button-small { min-height: 42px; font-size: 14px; padding: 0 18px; border-radius: 8px; }
.button-outline, .btn--ghost, .btn--google { background: #fff; color: var(--ink); box-shadow: none; border: 1px solid var(--stroke); }
.button-outline:hover, .btn--ghost:hover, .btn--google:hover { background: #f3f4f6; border-color: #d3d7de; box-shadow: none; }
.btn--lg { min-height: 52px; }

/* ---- labels and chips ---- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.8px; color: #565c68; }
.eyebrow > span { display: none; }
.pill { background: #fff; box-shadow: none; border: 1px solid var(--stroke); border-radius: 999px; color: #565c68; font-weight: 550; }
.pill__dot { background: var(--accent); }
.section-kicker { font-size: 11px; letter-spacing: 1.3px; font-weight: 550; color: #565c68; }
.section-kicker span { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--accent); font-size: 12px; margin-right: 5px; }

/* ---- cards: flat white, hairline border, small radius ---- */
.glass { background: #fff; border: 1px solid var(--stroke); box-shadow: none; border-radius: var(--radius-lg); }
.bento-card { background: #f4f7f2 !important; border: 1px solid #e3e9df; border-radius: 10px; }
.cta-card, .cta { background: #f4f7f2; border: 1px solid #e3e9df; border-radius: var(--radius-lg); }
.cta__form input { border-radius: 8px; background: #fff; box-shadow: none; border: 1px solid var(--stroke); }
.cta__form input:focus { box-shadow: none; border-color: var(--accent); outline: 2px solid var(--accent-soft); }

/* ---- footer: Mono's light footer ---- */
.footer { background: var(--paper); color: var(--ink); padding: 50px 0 28px; border-top: 1px solid var(--stroke); }
.footer-grid { grid-template-columns: 1.3fr .7fr .7fr .7fr 1.1fr; gap: 30px; }
.footer .brand { font-size: 20px; }
.footer-brand p { color: var(--muted); font-family: inherit; font-size: 16px; }
.footer-downloads { flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 22px; }
.footer-dl-btn { background: transparent; color: #717985; border: 1px solid #e1e5ec; font-size: 12px; padding: 10px 12px; border-radius: 6px; }
.footer-dl-btn:hover { background: #f2f6f0; color: var(--accent); }
.footer-column strong, .footer-newsletter > strong { font-size: 14px; font-weight: 550; }
.footer-column a { font-size: 14px; color: #777e89; }
.footer-column a:hover { color: var(--accent); }
.footer :focus-visible { outline-color: var(--accent); }
.footer-newsletter form { background: #fff; border: 1px solid var(--stroke); border-radius: 8px; }
.footer-newsletter input { color: var(--ink); }
.footer-newsletter input::placeholder { color: #9aa0aa; }
.footer-newsletter button { background: var(--accent); color: #fff; border-radius: 6px; transition: background .18s; }
.footer-newsletter button:hover { background: var(--accent-hover); }
.footer-newsletter small { font-size: 12px; color: #8c929b; line-height: 1.6; }
.footer-bottom { border-top: 1px solid var(--stroke); color: #9298a2; margin-top: 45px; }

@media (max-width: 1100px) {
  :root { --shell: calc(100% - 64px); }
  .nav-menu { gap: 24px; } .nav-links, .nav-actions { gap: 16px; }
  .nav-links a, .text-link { font-size: 13px; }
  .nav-actions .button { font-size: 12px; padding: 0 12px; }
  .footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); }
  .footer-newsletter { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  :root { --shell: calc(100% - 40px); }
  .site-header { padding: 18px 0 0; }
  .nav { padding-bottom: 18px; min-height: 48px; }
  .nav-menu { border-radius: 9px; top: 8px; box-shadow: 0 12px 30px rgba(32, 33, 36, .12); }
  .nav-links a, .text-link { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 22px; }
  .footer-brand, .footer-newsletter { grid-column: 1 / -1; }
  .footer-downloads { flex-direction: row; flex-wrap: wrap; }
}

/* ---- sign-in pages (login.html, auth-action.html): pure white, green links ---- */
.login-body { font-family: 'DM Sans', Arial, sans-serif; background: #fff; }
.login__aura { display: none; }
.login__form-col { background: #fff; }
.login__msg--ok { background: var(--accent-soft); color: var(--accent-hover); }
.pcard--hi .pcard__bar { background: var(--accent); }
.pcard__badge { background: var(--accent-soft); color: var(--accent-hover); }

/* ---- small fixes found on review ---- */
.pill { width: fit-content; max-width: 100%; }
.section__head .eyebrow, .cta-card .eyebrow { justify-content: center; }
.plan__price .cur, .plan__price .amt { font-family: inherit; font-weight: 600; }
.nf__code, .nf__title { font-family: inherit !important; font-weight: 600; letter-spacing: -.04em; }
.login__msg--info { background: var(--accent-soft); color: var(--accent-hover); }