/* ==========================================================================
   Public-page brand layer ("Main Street" look, 2026-09-28)
   The homepage (index.html + css/home.css) moved to a clean white, navy,
   brand-blue and yellow look set in Plus Jakarta Sans. This file carries
   that look to the other public pages — signup, login, contact, privacy,
   terms, reset-password, connect-google — WITHOUT touching the admin
   panel or the client dashboard, which also load css/style.css.

   How: those pages add class="site-v2" to <body> and load this file after
   style.css. The shared --color-* tokens are re-pointed under
   body.site-v2 (the same trick body.client-theme uses), so every
   component that already reads the tokens picks up the new palette; the
   rules below then restyle the few shared components (nav, buttons,
   sign-in card, fields, legal pages, footer) to match the homepage.

   The client dashboard (body.client-theme, dark navy) also loads this file
   for one thing only: the shared navy road footer at the bottom.
   ========================================================================== */

body.site-v2 {
  --color-cream-paper: #f5f9ff;   /* page ground + field fill (ice) */
  --color-pure-white: #ffffff;
  --color-ink-black: #0e1f4d;     /* navy text */
  --color-stone-gray: #5a6b8f;    /* muted text */
  --color-hairline-mist: #e2eaf7; /* lines */
  --color-sandstone: #e3edff;
  --color-coral-pop: #1d4ed8;     /* primary action: brand blue */
  --color-sky-pop: #5aa9ff;
  --color-sunshine-pop: #ffc233;
  --color-fresh-grass: #16a34a;
  --color-logo-blue: #1d4ed8;
  --font-inter: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pp-navy: #0e1f4d;
  --pp-blue: #1d4ed8;
  --pp-blue-2: #2f6bff;
  --pp-blue-deep: #1236a3;
  --pp-sky: #5aa9ff;
  --pp-ice: #eaf2ff;
  --pp-yellow: #ffc233;
  --pp-line: #e2eaf7;
  --pp-muted: #5a6b8f;
  --pp-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pp-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  min-height: 100vh; /* so the ice ground reaches the bottom on short pages */
  background: linear-gradient(180deg, #ffffff 0, #f5f9ff 520px);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
body.site-v2 ::selection { background: var(--pp-yellow); color: var(--pp-navy); }

/* ---------- Buttons: chunky pills, same as the homepage ---------- */
body.site-v2 .btn {
  justify-content: center;
  padding: 13px 22px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: transform 0.2s var(--pp-bounce), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
body.site-v2 .btn:focus-visible { outline: 3px solid var(--pp-yellow); outline-offset: 3px; }
body.site-v2 .btn-coral,
body.site-v2 .btn-dark {
  background: var(--pp-blue);
  color: #fff;
  box-shadow: 0 8px 0 -3px var(--pp-blue-deep), 0 16px 26px -16px rgba(29, 78, 216, 0.8);
}
body.site-v2 .btn-coral:hover,
body.site-v2 .btn-dark:hover { background: var(--pp-blue-2); }
body.site-v2 .btn-coral:active,
body.site-v2 .btn-dark:active { transform: translateY(3px); box-shadow: 0 5px 0 -3px var(--pp-blue-deep), 0 10px 18px -14px rgba(29, 78, 216, 0.8); }
body.site-v2 .btn-ghost,
body.site-v2 .btn-google,
body.site-v2 .btn-outline {
  background: #fff;
  color: var(--pp-navy);
  border: 0;
  box-shadow: inset 0 0 0 2px var(--pp-line), 0 7px 0 -3px var(--pp-line);
}
body.site-v2 .btn-ghost:hover,
body.site-v2 .btn-google:hover,
body.site-v2 .btn-outline:hover { background: #f5f9ff; box-shadow: inset 0 0 0 2px #cfdcf5, 0 7px 0 -3px #cfdcf5; }
body.site-v2 .btn-ghost:active,
body.site-v2 .btn-google:active,
body.site-v2 .btn-outline:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px #cfdcf5, 0 4px 0 -3px #cfdcf5; }
body.site-v2 .btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ---------- Nav ---------- */
body.site-v2 .site-nav-outer { top: 10px; padding: 14px 20px 0; }
body.site-v2 .site-nav {
  border: 0;
  padding: 6px 8px 6px 14px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--pp-line), 0 20px 40px -32px rgba(14, 31, 77, 0.5);
}
body.site-v2 .site-nav .brand-logo { height: 54px; }
body.site-v2 .nav-links a { font-weight: 600; color: var(--pp-muted); transition: color 0.2s ease, background 0.2s ease; }
body.site-v2 .nav-links a:hover { color: var(--pp-blue); background: var(--pp-ice); }
body.site-v2 .nav-links a[aria-current="page"] { color: var(--pp-navy); background: var(--pp-ice); }
body.site-v2 .nav-cta {
  background: var(--pp-blue);
  color: #fff;
  box-shadow: 0 7px 0 -3px var(--pp-blue-deep);
  padding: 11px 18px;
}
body.site-v2 .nav-cta:hover { background: var(--pp-blue-2); }
body.site-v2 .nav-cta .dot { background: var(--pp-yellow); }
body.site-v2 .nav-toggle { background: #fff; box-shadow: inset 0 0 0 2px var(--pp-line); width: 44px; height: 44px; }
body.site-v2 .nav-toggle svg path { stroke: var(--pp-navy); }
@media (max-width: 860px) {
  body.site-v2 .site-nav .brand-logo { height: 38px; }
  body.site-v2 .nav-mobile-menu.mobile-open { border-right: 0; box-shadow: 30px 0 60px -30px rgba(14, 31, 77, 0.45); }
  body.site-v2 .nav-mobile-menu.mobile-open a { font-weight: 700; }
  body.site-v2 .nav-mobile-menu.mobile-open a:hover { background: var(--pp-ice); }
  body.site-v2 .nav-mobile-menu.mobile-open a.nav-signup-mobile,
  body.site-v2 .nav-mobile-menu.mobile-open a.nav-signup-mobile:hover { background: var(--pp-blue); color: #fff; font-weight: 700; }
}

/* ---------- Sign-in cards (login, signup, contact, reset, connect) ---------- */
body.site-v2 .auth-page { position: relative; isolation: isolate; padding: 48px 20px 72px; }
/* Flat clouds and the little ProfilePilot plane from the homepage, drawn
   behind the card (pure decoration, data-URI SVG). */
body.site-v2 .auth-page::before,
body.site-v2 .auth-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}
body.site-v2 .auth-page::before {
  left: max(2%, calc(50% - 620px));
  top: 8%;
  width: 300px;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'%3E%3Cpath d='M40 104h170a38 38 0 0 0 0-76 56 56 0 0 0-104-20 43 43 0 0 0-66 34 32 32 0 0 0 0 62Z' fill='%23e3edff'/%3E%3Cpath d='M214 112h66a18 18 0 0 0 0-36 26 26 0 0 0-48-9 20 20 0 0 0-18 45Z' fill='%23eaf2ff'/%3E%3C/svg%3E");
}
body.site-v2 .auth-page::after {
  right: max(2%, calc(50% - 600px));
  top: 16%;
  width: 190px;
  height: 95px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 90'%3E%3Cpath d='M150 38c14 0 24 5 24 10s-10 10-24 10H48L20 64 14 50l6-12Z' fill='%231d4ed8'/%3E%3Cpath d='M48 58h102c14 0 24-4 24-10H40Z' fill='%231741b8'/%3E%3Cpath d='M20 38 8 12h18l26 26Z' fill='%231d4ed8'/%3E%3Cpath d='M8 12h18l6 8H12Z' fill='%23ffc233'/%3E%3Cpath d='M78 44 58 84h26l30-40Z' fill='%23ffc233'/%3E%3Cpath d='M78 44 62 76h14l24-32Z' fill='%23f2a900'/%3E%3Cpath d='M86 40 74 16h22l22 24Z' fill='%23ffc233'/%3E%3Crect x='128' y='34' width='22' height='10' rx='5' fill='%23bfe0ff'/%3E%3Ccircle cx='174' cy='48' r='4' fill='%230e1f4d'/%3E%3Cellipse cx='177' cy='48' rx='3' ry='22' fill='%230e1f4d' opacity='.35'/%3E%3C/svg%3E");
  animation: site-v2-cruise 7s ease-in-out infinite alternate;
}
@keyframes site-v2-cruise { from { transform: translate(-10px, 0) rotate(-2deg); } to { transform: translate(14px, -12px) rotate(2deg); } }
@media (max-width: 900px) {
  body.site-v2 .auth-page::before { top: 12px; left: -60px; width: 220px; height: 88px; opacity: 0.8; }
  body.site-v2 .auth-page::after { top: 18px; right: -20px; width: 110px; height: 55px; }
}
@media (prefers-reduced-motion: reduce) { body.site-v2 .auth-page::after { animation: none; } }

body.site-v2 .auth-card {
  position: relative;
  border: 0;
  border-radius: 30px;
  padding: 48px 36px 34px;
  box-shadow: 0 44px 80px -52px rgba(14, 31, 77, 0.6), inset 0 0 0 1px var(--pp-line);
}
/* The boarding-pass stripe from the homepage's pricing pass. */
body.site-v2 .auth-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--pp-blue) 0 40px, var(--pp-sky) 40px 80px, var(--pp-yellow) 80px 120px);
}
body.site-v2 .auth-card h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; }
body.site-v2 .auth-card .auth-sub { font-size: 16px; line-height: 1.55; }
body.site-v2 .auth-foot { font-size: 14.5px; }
body.site-v2 .auth-foot a { color: var(--pp-blue); font-weight: 700; border-bottom: 1.5px solid rgba(29, 78, 216, 0.35); }
body.site-v2 .auth-foot a:hover { border-bottom-color: var(--pp-blue); }
body.site-v2 .auth-notice { background: #fff5d9; box-shadow: inset 0 0 0 1px #ffe3a1; color: var(--pp-navy); }
body.site-v2 .form-msg { border-radius: 14px; font-weight: 600; }
@media (max-width: 480px) { body.site-v2 .auth-card { padding: 42px 22px 28px; } }

/* ---------- Form fields ---------- */
body.site-v2 .field label { font-size: 13.5px; font-weight: 700; color: var(--pp-navy); }
body.site-v2 .field input,
body.site-v2 .field select,
body.site-v2 .field textarea {
  border: 2px solid var(--pp-line);
  border-radius: 14px;
  background: #f5f9ff;
  font-weight: 600;
  color: var(--pp-navy);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
body.site-v2 .field input::placeholder,
body.site-v2 .field textarea::placeholder { color: #8fa0c2; font-weight: 500; }
body.site-v2 .field input:focus,
body.site-v2 .field select:focus,
body.site-v2 .field textarea:focus {
  outline: none;
  border-color: var(--pp-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.14);
}

/* ---------- Legal pages (privacy, terms) ---------- */
body.site-v2 .hero h1 { font-weight: 800; letter-spacing: -0.05em; line-height: 1.02; }
body.site-v2 .hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pp-ice);
  color: var(--pp-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.site-v2 .hero .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-yellow); }
body.site-v2 .hero-sub { font-family: var(--pp-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-muted); }
body.site-v2 .content-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 44px 80px -60px rgba(14, 31, 77, 0.5), inset 0 0 0 1px var(--pp-line);
}
body.site-v2 .content-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--pp-blue) 0 40px, var(--pp-sky) 40px 80px, var(--pp-yellow) 80px 120px);
}
body.site-v2 .content-card h2 { font-weight: 800; letter-spacing: -0.03em; color: var(--pp-navy); }
body.site-v2 .content-card p { font-size: 17px; line-height: 1.7; color: #33446b; }
body.site-v2 .content-card p strong { color: var(--pp-navy); }
body.site-v2 .content-card a { color: var(--pp-blue); font-weight: 600; border-bottom: 1.5px solid rgba(29, 78, 216, 0.35); }
body.site-v2 .content-card a:hover { border-bottom-color: var(--pp-blue); }
/* Block, not flex: as a flex row, a leading <strong> ("Google:") became its
   own flex item and split away from the rest of the sentence. */
body.site-v2 .doc-list li { position: relative; display: block; padding-left: 20px; color: #33446b; }
body.site-v2 .doc-list li::before { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin-top: 8px; border-radius: 3px; background: var(--pp-blue); }

/* ---------- Footer: same layout, navy with the homepage's road on top ----------
   Shared by the public pages and the client dashboard (whose canvas is a
   deeper navy than the footer, so the band still reads as its own strip). */
:is(body.site-v2, body.client-theme) .footer-accent { margin-top: 90px; padding: 0 0 36px; background: #0e1f4d; color: #b8c7ea; }
:is(body.site-v2, body.client-theme) .footer-accent::before {
  content: "";
  display: block;
  height: 20px;
  margin-bottom: 64px;
  background: repeating-linear-gradient(90deg, #3858b8 0 60px, transparent 60px 130px) 0 50% / 100% 6px no-repeat, #16275e;
}
:is(body.site-v2, body.client-theme) .footer-brand { gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
:is(body.site-v2, body.client-theme) .footer-brand img { width: 40px; height: 40px; padding: 5px; border-radius: 50%; background: #fff; }
:is(body.site-v2, body.client-theme) .footer-accent p { color: #b8c7ea; }
:is(body.site-v2, body.client-theme) .footer-col h4 { font-weight: 700; color: #fff; }
:is(body.site-v2, body.client-theme) .footer-col a { color: #b8c7ea; transition: color 0.2s ease; }
:is(body.site-v2, body.client-theme) .footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
:is(body.site-v2, body.client-theme) .footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); color: #b8c7ea; }
:is(body.site-v2, body.client-theme) .footer-bottom a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
:is(body.site-v2, body.client-theme) .footer-bottom a:hover { border-bottom-color: #ffc233; }
:is(body.site-v2, body.client-theme) .footer-accent a:focus-visible { outline: 3px solid #ffc233; outline-offset: 3px; border-radius: 4px; }