/* Forever Frontdesk info site (foreverfrontdesk.com root). Plain CSS, no framework, no build step.
   Deployed to AWS Amplify Hosting, app forever-frontdesk-web (2026-07-20). Supersedes the
   systems.tevlyr.com / SiteBucket + CloudFront target of v1.47. */

/* THE RATIFIED FOREVER FRONTDESK PALETTE. These are the same values the logo SVG paints with, so
   the primary CTA and the mark above it are the one blue rather than two blues that nearly match.
   The site renders LIGHT ALWAYS: there is deliberately no `prefers-color-scheme: dark` block here.
   One was removed 2026-07-21 because nobody chose it — it followed the visitor's OS and silently
   repainted a client-facing page in colors nobody approved. Do not reintroduce a theme here
   without a Design decision; the DASHBOARD keeps its ratified two-theme token system, and this
   file is not it.

   Amber #F5A623 is the ratified accent and is deliberately NOT declared: nothing on this page uses
   it, and an unused token invites a later edit to reach for it without the rule that governs it.
   That rule, when it is ever needed: dark text ON amber, never amber text on white. */
:root {
  --bg: #ffffff; /* White */
  --fg: #1e293b; /* Ink */
  --muted: #64748b; /* Slate */
  --line: #e2e8f0; /* Line */
  --card: #f8fafc; /* Mist */
  --accent: #1e5aa8; /* Brand Blue */
  --accent-pressed: #14406f; /* Deep Navy, hover/pressed only */
  --accent-fg: #ffffff;
  --maxw: 1040px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

a {
  color: inherit;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 24px;
}

/* The header mark is the FULL LOCKUP — the bell and the name in one SVG — so it REPLACES the text
   wordmark rather than sitting beside it; the two together would print the name twice. Sized by
   HEIGHT with `width: auto`, because the intrinsic 446x139 in the markup is there to reserve the
   right aspect box before the SVG loads, not to set the rendered size. `display: flex` on the
   anchor kills the inline-image baseline gap that would otherwise pad the header unevenly. */
.wordmark {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.wordmark img {
  height: 48px;
  width: auto;
  display: block;
}

.login {
  text-decoration: none;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.login:hover {
  border-color: var(--accent);
  color: var(--accent);
}

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

.hero {
  padding: 72px 0 56px;
  max-width: 760px;
}

.hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.lede {
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--muted);
  margin: 0 0 32px;
}

.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
}

/* Deep Navy, not a brightness() filter. The ratified palette names #14406F as the hover/pressed
   step, and a filter would have LIGHTENED Brand Blue — the wrong direction and a color outside the
   palette either way. */
.btn.primary:hover {
  background: var(--accent-pressed);
}

.btn.ghost {
  border-color: var(--line);
}

.btn.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 24px 0 64px;
}

.grid article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
}

.grid h2 {
  font-size: 20px;
  margin: 0 0 10px;
}

.grid p {
  margin: 0;
  color: var(--muted);
}

.closer {
  border-top: 1px solid var(--line);
  padding: 64px 0;
  text-align: center;
}

.closer h2 {
  font-size: clamp(24px, 3.5vw, 34px);
  margin: 0 0 12px;
}

.closer p {
  color: var(--muted);
  margin: 0 0 28px;
}

/* Flex rather than the old `text-align: center`, because the footer gained a second child
   (the privacy link) 2026-07-26. Centered text would have run the copyright and the link together
   with only a space between them; `gap` gives them a real separation that survives wrapping on a
   narrow screen. `flex-wrap` is what keeps the two on separate lines on a phone instead of
   overflowing the viewport. */
.foot {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 20px;
  text-align: center;
  padding: 28px 24px 40px;
}

.foot a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.foot a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* The privacy page. One measured column of running text, narrower than the marketing `main` because
   prose is read line by line and a 1040px line is too long to track comfortably. */
.prose {
  max-width: 680px;
  padding: 56px 0 72px;
}

.prose h1 {
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.prose h2 {
  font-size: 20px;
  margin: 40px 0 10px;
}

.prose p {
  margin: 0 0 16px;
}

.prose .lede {
  font-size: 16px;
  margin-bottom: 36px;
}

.prose a {
  color: var(--accent);
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 48px 0 40px;
  }
}