/* ═══════════════════════════════════════════════════════════════════════════
   Estatey home page (templates/welcome.html) — "Version A / Manrope" design.

   Loaded ONLY by welcome.html, after static/landing.css. landing.css still
   supplies the shared header, footer, flash messages, .btn and the sample
   <dialog>; everything below is scoped to .hp-page / hp-* classes so no other
   public page is affected.

   Design source: design/homepage-mockup.html.
   ═══════════════════════════════════════════════════════════════════════ */

.hp-page {
  --hp-navy: #1c2b45;
  --hp-ember: #e8703a;
  /* Orange as TEXT on the light grounds: #e8703a itself is only ~2.5:1 there
     and fails. These two clear AA (large headline / small text). */
  --hp-ember-text: #C0541F;
  --hp-ember-small: #A8491A;
  /* Orange as text on navy (6+:1). */
  --hp-ember-light: #F0915F;
  --hp-ivory: #F6F1E8;
  --hp-band: #EFE8DB;
  --hp-card: #FFFDF8;
  --hp-body: #3F4B5E;
  --hp-muted: #5E6878;
  --hp-line: rgba(28, 43, 69, .12);
  --hp-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Recolor the shared header/footer background on this page only. */
  --color-bg: var(--hp-ivory);
  background: var(--hp-ivory);
}

.hp-page main {
  font-family: var(--hp-font);
  color: var(--hp-navy);
  font-size: 18px;
}
.hp-page main h1, .hp-page main h2, .hp-page main h3 { font-family: var(--hp-font); }
.hp-page main ul, .hp-page main ol { list-style: none; margin: 0; padding: 0; }
.hp-page main p { margin: 0; }

/* Same width/padding as landing.css's .lp-wrap so content lines up with the shared header. */
.hp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.hp-flashes-wrap { border-bottom: 1px solid var(--hp-line); }

.hp-accent { color: var(--hp-ember-text); }
.hp-accent-light { color: var(--hp-ember-light); }
.hp-mute { color: var(--hp-muted); }

.hp-eyebrow {
  font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hp-ember-small); margin-bottom: 14px !important;
}
.hp-eyebrow-light { color: var(--hp-ember-light); }

.hp-h2 {
  font-weight: 700; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08;
  letter-spacing: -.03em; margin: 0; color: inherit;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  font-family: var(--hp-font); font-weight: 700; font-size: 19px;
  text-decoration: none; transition: transform .15s ease, background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) { .hp-btn:hover { text-decoration: none; transform: translateY(-1px); } }
.hp-btn-ember { background: var(--hp-ember); color: var(--hp-navy); }
@media (hover: hover) and (pointer: fine) { .hp-btn-ember:hover { background: #F08652; color: var(--hp-navy); } }
.hp-btn-navy { background: var(--hp-navy); color: var(--hp-ivory); }
@media (hover: hover) and (pointer: fine) { .hp-btn-navy:hover { background: #26395b; color: var(--hp-ivory); } }
.hp-btn-navy svg { color: var(--hp-ember); }
.hp-page main :focus-visible { outline: 3px solid var(--hp-navy); outline-offset: 3px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hp-hero { padding: 72px 0 96px; overflow-x: clip; }
.hp-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 64px; align-items: center;
}
.hp-hero-copy { display: flex; flex-direction: column; gap: 26px; }

.hp-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border: 1px solid rgba(28, 43, 69, .22); border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.hp-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hp-ember); }

.hp-h1 {
  font-weight: 700; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04;
  letter-spacing: -.035em; margin: 0; color: var(--hp-navy);
}
.hp-lead { font-size: 21px; line-height: 1.55; color: var(--hp-body); max-width: 560px; }
.hp-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }

.hp-reassure {
  display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 6px !important;
  font-size: 16px; color: var(--hp-body);
}
.hp-reassure li { display: flex; align-items: center; gap: 8px; }
.hp-reassure svg { color: var(--hp-navy); flex-shrink: 0; }

.hp-hero-visual { position: relative; padding-bottom: 36px; }
.hp-summary {
  background: #fff; border-radius: 16px; padding: 30px 32px 34px;
  box-shadow: 0 30px 70px rgba(28, 43, 69, .18), 0 2px 0 rgba(28, 43, 69, .05);
}
.hp-summary-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 12px; border-bottom: 2px solid var(--hp-navy);
}
.hp-summary-title { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.hp-summary-tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-muted); }
.hp-summary-sec {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hp-ember-small); margin: 18px 0 4px !important;
}
.hp-srow {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid #EEE9DF; font-size: 16px;
}
.hp-srow strong { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-srow-total { border-bottom: 0; padding-top: 16px; align-items: baseline; }
.hp-srow-total span { font-weight: 700; }
.hp-srow-total strong { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }

.hp-toast {
  position: absolute; left: -24px; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  background: var(--hp-navy); color: var(--hp-ivory);
  padding: 14px 20px; border-radius: 12px; font-size: 16px;
  box-shadow: 0 14px 30px rgba(28, 43, 69, .3);
}
.hp-toast-check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--hp-ember); color: var(--hp-navy);
  display: flex; align-items: center; justify-content: center;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.hp-section { padding: 112px 0; }
.hp-band { background: var(--hp-band); }
.hp-section-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 48px;
  margin-bottom: 48px;
}
.hp-aside { max-width: 420px; font-size: 19px; line-height: 1.55; color: var(--hp-body); }

/* How it works */
.hp-progress { position: relative; height: 2px; background: var(--hp-line); margin-bottom: 44px; }
.hp-progress-fill { position: absolute; inset: 0; background: var(--hp-ember); transform-origin: left center; }

.hp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.hp-step { display: flex; flex-direction: column; gap: 12px; }
.hp-step-n { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--hp-ember-text); }
.hp-step-title { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.hp-step-sub { font-size: 18px; font-weight: 700; }
.hp-step-body { font-size: 18px; line-height: 1.5; color: var(--hp-body); }
.hp-step-art {
  margin-top: auto; min-height: 120px; box-sizing: border-box; border-radius: 12px;
  font-size: 15px;
}
.hp-art-drop {
  border: 2px dashed rgba(28, 43, 69, .25);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; color: var(--hp-body);
}
.hp-art-drop span { padding: 6px 10px; background: var(--hp-card); border-radius: 6px; border: 1px solid rgba(28, 43, 69, .15); }
.hp-art-fields, .hp-art-prop {
  background: var(--hp-card); border: 1px solid var(--hp-line); padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.hp-art-fields div { display: flex; justify-content: space-between; gap: 8px; }
.hp-art-fields span { color: var(--hp-muted); }
.hp-art-prop div { display: flex; align-items: center; gap: 10px; }
.hp-art-pdf {
  background: var(--hp-navy); color: var(--hp-ivory);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 16px; font-weight: 700;
}
.hp-art-pdf svg { color: var(--hp-ember); }

/* What it holds */
.hp-h2-wide { max-width: 900px; margin-bottom: 52px !important; }
.hp-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hp-cat {
  background: var(--hp-card); border-radius: 16px; padding: 30px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.hp-cat::after {
  content: ""; position: absolute; left: 30px; right: 30px; bottom: 20px; height: 3px;
  border-radius: 2px; background: var(--hp-ember);
  transform: scaleX(0); transform-origin: left center; transition: transform .3s ease;
}
@media (hover: hover) and (pointer: fine) { .hp-cat:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(28, 43, 69, .12); } }
@media (hover: hover) and (pointer: fine) { .hp-cat:hover::after { transform: scaleX(1); } }
.hp-cat svg { color: var(--hp-navy); }
.hp-cat h3 { font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.hp-cat p { font-size: 17px; line-height: 1.5; color: var(--hp-body); padding-bottom: 8px; }

/* Where it's stored */
.hp-navy { background: var(--hp-navy); color: var(--hp-ivory); }
.hp-privacy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 80px; align-items: center; }
.hp-privacy-lead { font-size: 20px; line-height: 1.55; color: #D5DCE6; max-width: 580px; margin-top: 20px !important; }
.hp-points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px;
  margin-top: 36px !important;
}
.hp-points li { display: flex; gap: 14px; font-size: 18px; line-height: 1.5; }
.hp-points span { font-weight: 800; color: var(--hp-ember-light); }

.hp-drive {
  position: relative; background: var(--hp-ivory); color: var(--hp-navy);
  border-radius: 20px; padding: 32px; box-shadow: 0 40px 80px rgba(0, 0, 0, .35);
}
.hp-drive-path { font-size: 15px; font-weight: 600; color: var(--hp-body); }
.hp-drive-path span { margin: 0 4px; }
.hp-drive-path strong { color: var(--hp-navy); }
.hp-drive-list { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; }
.hp-drive-item { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 10px; font-size: 17px; }
.hp-drive-item-on { background: #fff; }
.hp-drive-item-pdf svg { color: var(--hp-ember-small); }
.hp-drive-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(28, 43, 69, .15); font-size: 15px; color: var(--hp-body); }
.hp-drive-foot strong { color: var(--hp-navy); }

.hp-lock { position: absolute; right: -24px; top: -24px; width: 72px; height: 72px; }
.hp-lock-ring, .hp-lock-core { position: absolute; inset: 0; border-radius: 50%; background: var(--hp-ember); }
.hp-lock-core { display: flex; align-items: center; justify-content: center; color: var(--hp-navy); }

/* Closing */
.hp-closing { padding: 120px 0; text-align: center; }
.hp-closing-title {
  font-weight: 700; font-size: clamp(34px, 5vw, 64px); line-height: 1.06;
  letter-spacing: -.035em; margin: 0 0 20px; color: var(--hp-navy);
  text-wrap: balance;
}
.hp-closing-sub { font-size: 20px; color: var(--hp-body); margin-bottom: 34px !important; }
.hp-closing-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 28px; }

.hp-page footer { border-top: 1px solid var(--hp-line); }

/* ── Motion ──────────────────────────────────────────────────────────────── */
/* Everything is fully visible and still by default; motion is only added
   for visitors who haven't asked their device to reduce it. Only transform
   and opacity are animated. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes hp-row {
    0%       { opacity: 0; transform: translateY(10px); }
    6%       { opacity: 1; transform: none; }
    86%      { opacity: 1; transform: none; }
    94%,100% { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes hp-pop {
    0%, 30%  { opacity: 0; transform: translateY(12px) scale(.96); }
    36%, 84% { opacity: 1; transform: none; }
    92%,100% { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes hp-draw  { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
  @keyframes hp-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.2); opacity: 0; } }
  @keyframes hp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

  .hp-srow { animation: hp-row 10s ease-out infinite both; }
  .hp-d1 { animation-delay: .8s; }  .hp-d2 { animation-delay: 1.2s; }
  .hp-d3 { animation-delay: 1.6s; } .hp-d4 { animation-delay: 2s; }
  .hp-d5 { animation-delay: 2.4s; } .hp-d6 { animation-delay: 2.9s; }
  .hp-toast { animation: hp-pop 10s ease-out infinite both; }
  .hp-pill-dot { animation: hp-blink 1.6s ease-in-out infinite; }
  .hp-progress-fill { animation: hp-draw 6s ease-in-out infinite; }
  .hp-lock-ring { animation: hp-pulse 2.4s ease-out infinite; }

  /* Set by the IntersectionObserver in welcome.html until scrolled into view. */
  .hp-wait { animation-play-state: paused !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-btn, .hp-cat, .hp-cat::after { transition: none; }
  .hp-cat:hover { transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hp-steps, .hp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-privacy-grid { gap: 56px; }
}

@media (max-width: 1000px) {
  .hp-wrap { padding: 0 20px; }
  .hp-hero { padding: 48px 0 72px; }
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hp-hero-visual { max-width: 560px; }
  .hp-section { padding: 88px 0; }
  .hp-section-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hp-privacy-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-drive { max-width: 520px; }
}

@media (max-width: 620px) {
  .hp-page main { font-size: 17px; }
  .hp-wrap { padding: 0 16px; }
  .hp-hero { padding: 32px 0 56px; }
  .hp-hero-copy { gap: 22px; }
  .hp-lead { font-size: 19px; }
  .hp-cta-row, .hp-closing-actions { flex-direction: column; align-items: stretch; }
  .hp-btn { width: 100%; }
  .hp-summary { padding: 22px 20px 26px; }
  .hp-srow { font-size: 15px; }
  .hp-srow-total strong { font-size: 24px; }
  .hp-hero-visual { padding-bottom: 0; }
  .hp-summary-head { flex-direction: column; gap: 4px; }
  .hp-srow .hp-mute { display: none; }
  .hp-toast { position: relative; left: auto; bottom: auto; margin-top: 14px; font-size: 15px; }
  .hp-section { padding: 72px 0; }
  .hp-closing { padding: 80px 0; }
  .hp-steps, .hp-cats, .hp-points { grid-template-columns: minmax(0, 1fr); }
  .hp-cat { padding: 24px; }
  .hp-lock { right: 12px; top: -28px; width: 60px; height: 60px; }
  .hp-drive { padding: 26px 20px; }
}