/* ═══════════════════════════════════════════════════════════════════════════
   Estatey public-site skin — the "Version A / Manrope" look from the new
   homepage, applied to every public page (home, About, Contact, Blog index,
   Blog post, Privacy, Terms).

   Also loaded by auth_base.html, so the sign-in funnel (log in, sign up,
   forgot/reset password, connect Drive, first-run checklist) matches.
   Loaded AFTER static/landing.css, and every rule is scoped to body.site,
   so the signed-in app (base.html + style.css) is untouched. It works mostly by
   re-pointing landing.css's own design tokens (colors, fonts, radius) and
   then softening the few Modernist details that don't fit (hard 2px ink
   rules, square buttons, the full-orange closing banner).

   Homepage-only layout lives in static/home.css. Design source:
   design/homepage-mockup.html.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

body.site {
  /* Palette */
  --color-bg: #F6F1E8;          /* ivory page */
  --color-surface: #EFE8DB;     /* banded sections */
  --color-paper: #FFFDF8;       /* cards */
  --color-text: #1c2b45;        /* navy ink */
  --color-divider: rgba(28, 43, 69, .16);
  --color-neutral-700: #3F4B5E; /* body grey: 8.6:1 on ivory */
  --color-neutral-800: #33405A;
  --color-neutral-900: #26324A;
  --color-accent: #e8703a;
  --color-accent-100: #FCE9DD;
  --color-accent-400: #F08652;
  --color-accent-600: #D2602C;
  /* Orange as small text on ivory: #e8703a itself fails contrast there. */
  --color-accent-700: #A8491A;
  --color-accent-800: #8A3B14;

  /* Type */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 700;

  --radius-md: 12px;
  --shadow-md: 0 14px 34px rgba(28, 43, 69, .10);

  background: var(--color-bg);
  color: var(--color-text);
}

.site h1, .site h2, .site h3 { letter-spacing: -0.03em; }
.site :focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }

/* Content width matches the homepage's .hp-wrap. */
.site .lp-wrap { max-width: 1200px; }

/* Hairline rules instead of Modernist's hard 2px ink lines. */
.site .lp-rule { border-bottom: 1px solid var(--color-divider); }

/* ── Header & footer (shared includes) ─────────────────────────────────── */

.site .lp-header { border-bottom: 1px solid var(--color-divider); }
.site .lp-brand span { font-weight: 800; letter-spacing: -0.01em; font-size: 21px; }
.site .lp-nav { font-weight: 600; gap: 26px; }
.site .lp-nav a, .site .lp-header-actions a { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .site .lp-nav a:hover, .site .lp-header-actions a.lp-textlink:hover { color: var(--color-accent-700); text-decoration: none; } }
.site footer { border-top: 1px solid var(--color-divider); }

/* ── Buttons, tags, flashes, inputs ────────────────────────────────────── */

.site .btn { border-radius: 999px; font-weight: 700; padding-left: 22px; padding-right: 22px; }
.site .btn-primary { background: var(--color-accent); color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .site .btn-primary:hover { background: var(--color-accent-400); color: var(--color-text); } }
.site .btn-secondary { border-color: rgba(28, 43, 69, .3); }
.site .tag { border-radius: 999px; }
.site .lp-flash { border-radius: 12px; }

.site .input {
  background: #fff; border: 1px solid rgba(28, 43, 69, .28); border-radius: 12px;
}
.site .input:focus-visible { border-color: var(--color-text); outline: 3px solid rgba(232, 112, 58, .45); outline-offset: 0; }

/* ── Shared type ───────────────────────────────────────────────────────── */

.site .lp-eyebrow {
  font-weight: 800; font-size: 15px; letter-spacing: .1em; color: var(--color-accent-700);
}
.site .lp-num { font-weight: 800; color: var(--color-accent-700); }
.site .lp-lead { color: var(--color-neutral-700); font-size: 21px; line-height: 1.55; }

/* Page titles on the inner pages (About, Contact, Blog index). */
.site .ab-hero .ab-heading.ab-hero-title,
.site .ct-hero .ct-heading.ct-hero-title,
.site .bl-hero h1 {
  font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -0.035em;
  font-weight: 700; margin-bottom: 22px;
}
.site .ab-hero, .site .ct-hero, .site .bl-hero { padding-top: 88px; padding-bottom: 80px; }
.site .ct-hero { padding-bottom: 56px; }

/* ── About ─────────────────────────────────────────────────────────────── */

.site .ab-why .ab-heading,
.site .ab-believe .ab-heading,
.site .ab-team .ab-heading {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; font-weight: 700; margin-bottom: 20px;
}
.site .lp-section { padding-top: 96px; padding-bottom: 96px; }
.site .lp-privacy p:not(.lp-eyebrow), .site .ab-team-body { color: var(--color-neutral-700); }

.site .ab-why .ab-card {
  background: var(--color-paper); border: 0; border-radius: 20px;
  box-shadow: 0 30px 70px rgba(28, 43, 69, .14); padding: 34px 32px;
}
.site .ab-card-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.site .ab-card-list { font-size: 17px; }
.site .ab-card-list li::marker { color: var(--color-accent); }

.site .lp-inside { background: var(--color-surface); }

/* Principles become cards, like the homepage's "What it holds" grid. */
.site .ab-principles {
  border-top: 0; gap: 20px; margin-top: 44px;
}
.site .ab-principles .lp-item {
  background: var(--color-paper); border: 0; border-radius: 16px; padding: 30px;
  gap: 18px; transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) { .site .ab-principles .lp-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28, 43, 69, .12); } }
.site .ab-principles .lp-num { font-size: 24px; letter-spacing: -0.02em; }
.site .lp-item-title { font-weight: 700; font-size: 22px; }
.site .lp-item-note { font-size: 17px; }

/* Closing banner: the homepage's closing section (ivory, centered, navy
   pill) instead of the old full-orange field. */
.site .lp-banner { background: var(--color-bg); color: var(--color-text); }
.site .lp-banner-inner {
  grid-template-columns: 1fr; justify-items: center; text-align: center;
  padding-top: 112px; padding-bottom: 112px; gap: 34px;
}
.site .lp-banner h2 {
  font-size: clamp(34px, 5vw, 64px); line-height: 1.06; letter-spacing: -0.035em;
  font-weight: 700; max-width: 16em; text-wrap: balance;
}
.site .lp-banner p { color: var(--color-neutral-700); margin: 0 auto; }
.site .lp-banner-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.site .lp-banner-btn {
  display: inline-flex; align-items: center; min-height: 56px;
  background: var(--color-text); color: var(--color-bg); border: 0; border-radius: 999px;
  padding: 0 30px; font-weight: 700;
}
@media (hover: hover) and (pointer: fine) { .site .lp-banner-btn:hover { background: #26395b; color: var(--color-bg); } }
.site .lp-banner-link { border-bottom-color: rgba(28, 43, 69, .5); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .site .lp-banner-link:hover { border-bottom-color: var(--color-text); } }
.site .lp-banner :focus-visible { outline: 3px solid var(--color-text); }

/* ── Contact ───────────────────────────────────────────────────────────── */

.site .ct-form-section { padding-top: 64px; }
.site .ct-contact-form {
  background: var(--color-paper); border-radius: 20px; padding: 36px 36px 30px;
  box-shadow: 0 30px 70px rgba(28, 43, 69, .10); max-width: 36em;
}
.site .ct-contact-field label { font-weight: 700; font-size: 17px; }
.site .ct-contact-form .btn-primary { min-height: 56px; font-size: 18px; padding: 0 30px; }

/* ── Blog index ────────────────────────────────────────────────────────── */

.site .bl-list { border-top: 0; display: grid; gap: 20px; }
.site .bl-card {
  background: var(--color-paper); border: 0; border-radius: 20px; padding: 24px;
  align-items: center; transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) { .site .bl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28, 43, 69, .12); } }
@media (hover: hover) and (pointer: fine) { .site .bl-card:hover .bl-card-title { color: var(--color-text); text-decoration: none; } }
.site .bl-card-photo { border: 0; border-radius: 12px; width: 260px; height: calc(260px * 630 / 1200); }
.site .bl-card-date { font-size: 14px; font-weight: 800; letter-spacing: .1em; }
.site .bl-card-title { font-size: 25px; font-weight: 700; }
.site .bl-card-excerpt { font-size: 17px; color: var(--color-neutral-700); }
.site .bl-empty { font-size: 18px; }

/* ── Blog post ─────────────────────────────────────────────────────────── */

.site .bl-post { padding-top: 64px; padding-bottom: 96px; }
.site .bl-back a { font-weight: 700; color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .site .bl-back a:hover { color: var(--color-accent-700); } }
.site .bl-post h1 {
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700;
}
.site .bl-byline { font-size: 17px; }
.site .bl-hero-img { border: 0; border-radius: 20px; box-shadow: 0 30px 70px rgba(28, 43, 69, .14); }
.site .bl-body { font-size: 19px; line-height: 1.7; color: var(--color-neutral-900); }
.site .bl-body h2 { font-size: 30px; font-weight: 700; }
.site .bl-body h3 { font-size: 23px; font-weight: 700; }
.site .bl-body strong { font-weight: 700; }
.site .bl-body a { color: var(--color-accent-700); text-decoration: underline; }
.site .bl-body hr { border-top: 1px solid var(--color-divider); }
.site .bl-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--color-accent);
  color: var(--color-neutral-700);
}

/* ── Legal (Privacy, Terms) ────────────────────────────────────────────── */

.site .lg-page { padding-top: 88px; padding-bottom: 104px; }
.site .lg-title {
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.035em;
  font-weight: 700; margin-bottom: 14px; max-width: 18em;
}
.site .lg-subtitle { font-size: 17px; margin-bottom: 48px; }
.site .lg-doc { max-width: 760px; }
.site .lg-doc h2 { font-size: 24px; font-weight: 700; border-top: 1px solid var(--color-divider); padding-top: 32px; margin-top: 44px; }
.site .lg-doc h3 { font-size: 18px; font-weight: 700; }
.site .lg-doc p, .site .lg-doc li { font-size: 17px; line-height: 1.7; }
.site .lg-doc li::marker { color: var(--color-accent-700); }

/* ── Sign-in funnel (auth_base.html and the pages that extend it) ──────── */

.site.lp-auth-page { --color-border-soft: rgba(28, 43, 69, .22); }
.site .lp-auth { padding: 72px 24px 96px; }
.site .lp-auth-panel {
  background: var(--color-paper); border: 0; border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(28, 43, 69, .14), 0 2px 0 rgba(28, 43, 69, .04);
}
.site .lp-auth-bar { border-bottom: 1px solid var(--color-divider); padding: 18px 36px; }
.site .lp-auth-step { font-size: 14px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); }
.site .lp-auth-body { padding: 36px 40px 40px; }
.site .lp-auth-body h3 {
  font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 12px;
}
.site .lp-auth-intro { font-size: 18px; color: var(--color-neutral-700); }
.site .lp-auth-field > label { font-weight: 700; font-size: 17px; }
.site .lp-auth-input { min-height: 52px; border-radius: 12px; color: var(--color-text); }
.site .lp-auth-submit { min-height: 56px; font-size: 18px; border-radius: 999px; }
.site .lp-auth-foot a, .site .lp-auth-intro a, .site .lp-auth-tos a { color: var(--color-accent-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.site .lp-auth-tos input[type="checkbox"] { accent-color: var(--color-text); }

.site .lp-perms { border: 1px solid var(--color-divider); border-radius: 16px; }
.site .lp-next { border-top: 1px solid var(--color-divider); }
.site .lp-next-num { font-weight: 800; }
.site .lp-next-title { font-weight: 700; }
.site .lp-onboard-form { border-top: 1px solid var(--color-divider); }
.site .lp-check input { border-radius: 6px; border-color: var(--color-text); background: #fff; }
.site .lp-check input:checked { background: var(--color-text); }
.site .lp-check input:checked::after { border-color: #fff; }

/* ── Motion & responsive ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .site .ab-principles .lp-item, .site .bl-card { transition: none; }
  .site .ab-principles .lp-item:hover, .site .bl-card:hover { transform: none; }
}

@media (max-width: 1000px) {
  .site .lp-auth { padding: 40px 16px 64px; }
  .site .lp-auth-body { padding: 28px 22px 32px; }
  .site .lp-auth-bar { padding: 14px 22px; }
  .site .lp-section { padding-top: 72px; padding-bottom: 72px; }
  .site .ab-hero, .site .ct-hero, .site .bl-hero { padding-top: 56px; padding-bottom: 56px; }
  .site .lp-banner-inner { padding-top: 80px; padding-bottom: 80px; }
  .site .lg-page { padding-top: 56px; }
}

@media (max-width: 640px) {
  .site .lp-lead { font-size: 19px; }
  .site .ab-principles { grid-template-columns: 1fr; }
  .site .bl-card { padding: 16px; }
  .site .bl-card-photo { width: 100%; height: auto; }
  .site .ct-contact-form { padding: 24px 18px; }
  .site .lp-banner-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .site .lp-banner-btn { justify-content: center; }
  .site .lp-banner-link { justify-content: center; }
  .site .bl-body { font-size: 18px; }
}

/* ── Press feedback ────────────────────────────────────────────────────────
   Instant :active states for touch (the hover states above are mouse-only).
   .site-prefixed so they outrank home.css's hover transforms, which load
   after this file on the home page. */
@media (prefers-reduced-motion: no-preference) {
  .site .btn, .site .hp-btn, .site .lp-banner-btn { transition: transform 100ms ease-out, background-color .15s ease, color .15s ease; }
}
.site .btn:active, .site .hp-btn:active, .site .lp-banner-btn:active { transform: scale(0.97); }
.site .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.site .bl-card:active { transform: scale(0.99); }
.site .lp-menu-btn:active, .site .lp-menu-panel a:active { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.site .lp-nav a:active, .site .lp-textlink:active, .site .lp-banner-link:active, .site .bl-back a:active { opacity: .6; }