/* The smaller pages (sign-in, privacy, terms, account, checkout results)
   in the landing page's look: a sky-and-hills desktop with light, glossy
   windows. Loaded after site.css and overrides its dark theme. */
:root {
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --glass-fill: rgba(255, 255, 255, 0.86);
  --glass-fill-strong: rgba(255, 255, 255, 0.92);
  --glass-rim: rgba(15, 23, 42, 0.16);
  --electric-blue: #3b82f6;
  --violet: #8b5cf6;
}
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background:
    url("/hills.svg") bottom / 100% 34vh no-repeat fixed,
    linear-gradient(180deg, #5ea8ff 0%, #9ccbff 40%, #d9e8ff 66%, #ede9fe 100%) fixed;
}
body::before { display: none; }
a { color: var(--electric-blue); }
h1, h2, h3 { font-family: "Outfit", "Inter", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--text-primary); }

/* Glass panels become windows: a title strip with traffic lights on top */
.glass {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.center-card.glass, .prose.glass { padding-top: 52px; border-radius: 12px; overflow: hidden; }
.center-card.glass::before, .prose.glass::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background:
    radial-gradient(circle at 18px 15px, #ff5f57 5px, transparent 6px),
    radial-gradient(circle at 36px 15px, #febc2e 5px, transparent 6px),
    radial-gradient(circle at 54px 15px, #28c840 5px, transparent 6px),
    linear-gradient(180deg, #f8fafc, #dfe6f1);
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

/* Header: the new logo and lowercase wordmark */
.site-header.glass { border-radius: 12px; }
.brand { font-family: "Outfit", system-ui, sans-serif; font-weight: 800; text-transform: lowercase; color: var(--text-primary); }
.brand .pet { display: none; }
.brand::before {
  content: ""; width: 26px; height: 26px; flex: none;
  background: url("/logo.svg") center / contain no-repeat;
}
.site-nav a { color: var(--text-secondary); }

/* Glossy buttons, like the landing page */
.button {
  position: relative; overflow: hidden;
  color: #ffffff;
  background: linear-gradient(180deg, #6aa6ff 0%, #3b82f6 48%, #2563eb 52%, #4f46e5 100%);
  border: 1px solid #1e40af;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 18px rgba(59, 130, 246, 0.45);
  font-family: "Outfit", system-ui, sans-serif;
}
.button-google {
  color: #0f172a;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5fb 50%, #e2e8f2 51%, #edf1f7 100%);
  border: 1px solid #aeb9cc;
  box-shadow: inset 0 1px 0 #ffffff, 0 4px 14px rgba(15, 23, 42, 0.14);
}
.status-line.error { color: #dc2626; }
.prose p, .prose li { color: var(--text-secondary); }

/* Buttons the pages show later (e.g. "Open Pip" after sign-in) stay hidden until then */
[hidden] { display: none !important; }