/* =========================================================
   PURCHASE PACKAGE - PUBLIC HOMEPAGE (layout A)
   (c) 2026 Andres Lazaro Perez Cardoso. All rights reserved.

   Styles for the marketing homepage that surrounds the
   sign-in card inside #signInScreen. Everything is prefixed
   hm- / home- so it can never collide with the app styles
   in styles.css. The whole block vanishes on sign-in
   (#signInScreen is display:none once signed in).
   ========================================================= */

/* ---------- header nav (signed-out only) ---------- */
.home-nav { display: none; }
body.signed-out .home-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.home-nav a { color: #e8eef3; text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 13px; border-radius: 99px; transition: background-color .15s ease, color .15s ease; }
.home-nav a:hover { background: #ffffff22; color: #fff; }
.home-nav a:last-child { background: #c9141d; color: #fff; font-weight: 800; }
.home-nav a:last-child:hover { background: #a90e16; }
@media (max-width: 900px) { .home-nav a:not(:last-child) { display: none; } }

/* ---------- hero (inside .front-gate, over the art) ---------- */
.hm-hero-inner { display: flex; gap: 48px; align-items: center; width: 100%; }
.hm-hero-copy { flex: 1 1 520px; color: #fff; min-width: 280px; }
.hm-hero-copy .front-gate-title { margin-bottom: 16px; }
.hm-hero-copy .front-gate-lead { margin-bottom: 22px; }
.hm-checks { list-style: none; margin: 0; padding: 0; }
.hm-checks li { font-size: 16px; margin-bottom: 10px; color: rgba(255,255,255,.95); }
.hm-checks li::before { content: "✓"; color: #ff3b42; font-weight: 800; margin-right: 10px; }
.hm-hero-card { flex: 0 1 460px; width: 100%; min-width: 280px; }
.hm-hero-card .front-form-card { max-width: 460px; margin-left: auto; }
@media (max-width: 900px) {
  .hm-hero-inner { flex-direction: column; align-items: stretch; gap: 28px; }
  .hm-hero-card .front-form-card { margin: 0 auto; }
}

/* ---------- numbers band ---------- */
.hm-band { background: #d71920; }
.hm-band-in { max-width: 1140px; margin: 0 auto; padding: 26px 20px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; text-align: center; }
.hm-stat-n { font-size: 32px; font-weight: 800; color: #fff; line-height: 1.1; }
.hm-stat-l { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.92); }

/* ---------- generic sections ---------- */
.hm-section { padding: 58px 20px; background: #fff; }
.hm-section > * { max-width: 1140px; margin-left: auto; margin-right: auto; }
.hm-alt { background: #f2f6fa; }
.hm-title { font-size: 29px; text-align: center; color: #0f2a43; margin: 0 auto 10px; }
.hm-sub { text-align: center; color: #5a6b7c; font-size: 16px; margin: 0 auto 36px; }

/* ---------- screenshots ---------- */
.hm-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.hm-shot { border: 1px solid #dbe4ec; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 18px rgba(15,42,67,.08); }
.hm-chrome { background: #e8eef4; padding: 8px 12px; font-size: 12px; color: #5a6b7c; display: flex; gap: 6px; align-items: center; }
.hm-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #c3d0dd; display: inline-block; }
.hm-chrome span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-screen { padding: 18px; min-height: 180px; background: #fdfefe; }
.hm-screen img { width: 100%; height: auto; display: block; border-radius: 6px; }
.hm-cap { padding: 12px 16px; font-size: 14px; font-weight: 600; color: #0f2a43; border-top: 1px solid #eef2f6; }
.hm-fld { height: 12px; border-radius: 3px; background: #e6edf3; margin-bottom: 9px; }
.hm-fld.s { width: 55%; } .hm-fld.m { width: 75%; } .hm-fld.l { width: 95%; }
.hm-fld.acc { background: #ffd7d9; }
.hm-rowfake { display: flex; gap: 8px; } .hm-rowfake .hm-fld { flex: 1; }
.hm-btnfake { display: inline-block; background: #d71920; color: #fff; font-size: 12px; padding: 7px 16px; border-radius: 5px; font-weight: 700; margin-top: 4px; }
.hm-pdfpage { border: 1px solid #dbe4ec; padding: 14px; min-height: 150px; }
.hm-pdfh { font-weight: 700; color: #0f2a43; font-size: 12px; border-bottom: 2px solid #d71920; padding-bottom: 6px; margin-bottom: 10px; }

/* ---------- benefits / steps ---------- */
.hm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.hm-benefit { border: 1px solid #e2e9f0; border-radius: 12px; padding: 24px 20px; background: #fbfcfe; }
.hm-icon { font-size: 28px; margin-bottom: 10px; }
.hm-benefit h3 { font-size: 17px; margin: 0 0 8px; color: #0f2a43; }
.hm-benefit p { font-size: 14.5px; line-height: 1.55; color: #48586a; margin: 0; }
.hm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.hm-step { text-align: center; padding: 8px 16px; }
.hm-num { display: inline-block; width: 44px; height: 44px; line-height: 44px; border-radius: 50%; background: #d71920; color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.hm-step h3 { font-size: 17px; margin: 0 0 8px; color: #0f2a43; }
.hm-step p { font-size: 14.5px; line-height: 1.55; color: #48586a; margin: 0; }

/* ---------- story ---------- */
.hm-story { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.hm-story-txt { flex: 1 1 500px; }
.hm-story-txt h2 { font-size: 28px; color: #0f2a43; margin: 0 0 14px; text-align: left; }
.hm-story-txt p { font-size: 16px; line-height: 1.65; color: #48586a; margin: 0 0 12px; }
.hm-sig { font-weight: 700; color: #0f2a43 !important; }
.hm-photo { flex: 0 1 300px; width: 100%; height: 250px; border-radius: 14px; background: linear-gradient(150deg, #173d5f, #1d4e79); color: #d7e3ee; display: flex; align-items: center; justify-content: center; font-size: 15px; text-align: center; padding: 22px; }

/* ---------- voices ---------- */
.hm-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.hm-video { background: #0a1d2f; border-radius: 14px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 12px; padding: 20px; text-align: center; }
.hm-play { width: 62px; height: 62px; border-radius: 50%; background: #d71920; display: flex; align-items: center; justify-content: center; font-size: 23px; }
.hm-video p { font-size: 14px; color: #c8d8e6; margin: 0; }
.hm-quote { border: 1px solid #e2e9f0; border-radius: 14px; padding: 28px; background: #fbfcfe; display: flex; flex-direction: column; justify-content: center; }
.hm-q { font-size: 19px; line-height: 1.55; color: #0f2a43; font-style: italic; margin-bottom: 14px; }
.hm-who { font-size: 14px; color: #5a6b7c; }

/* ---------- faq ---------- */
.hm-faq { max-width: 820px; }
.hm-faq details { border: 1px solid #e2e9f0; border-radius: 10px; padding: 15px 18px; margin-bottom: 11px; background: #fff; }
.hm-faq summary { font-weight: 600; font-size: 16px; color: #0f2a43; cursor: pointer; }
.hm-faq details p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #48586a; }

/* ---------- contact ---------- */
.hm-contact { display: flex; gap: 44px; flex-wrap: wrap; }
.hm-pitch { flex: 1 1 360px; }
.hm-pitch h2 { font-size: 28px; color: #0f2a43; margin: 0 0 14px; text-align: left; }
.hm-pitch p { font-size: 16px; line-height: 1.6; color: #48586a; margin: 0 0 12px; }
.hm-prefer a { color: #d71920; font-weight: 700; text-decoration: none; }
.hm-dealer { flex: 1 1 400px; border: 1px solid #e2e9f0; border-radius: 14px; padding: 24px; background: #fbfcfe; }
.hm-dealer label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 5px; color: #33475c; }
.hm-dealer input, .hm-dealer textarea { width: 100%; padding: 11px 12px; border: 1px solid #c9d6e2; border-radius: 7px; font-size: 15px; font-family: inherit; background: #fff; color: #17212a; }
.hm-dealer button { width: 100%; margin-top: 18px; padding: 13px; font-size: 16px; font-weight: 700; border: none; border-radius: 7px; cursor: pointer; color: #fff; }
#hmInqResult.ok { color: #1e7a1e; }
#hmInqResult.err { color: #b3261e; }

/* ---------- home footer ---------- */
.hm-footer { background: #0a1d2f; color: #93a9bd; padding: 40px 20px 30px; }
.hm-fcols { max-width: 1140px; margin: 0 auto; display: flex; gap: 40px; flex-wrap: wrap; }
.hm-fcol { flex: 1 1 170px; }
.hm-fcol h4 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.hm-fcol a { display: block; color: #93a9bd; text-decoration: none; font-size: 14px; margin-bottom: 8px; }
.hm-fcol a:hover { color: #fff; }
.hm-fcol p { font-size: 14px; line-height: 1.55; margin: 0; }

/* ---------- pricing ---------- */
.hm-toggle { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 auto 30px; font-size: 14.5px; font-weight: 600; color: #33475c; }
.hm-switch { width: 52px; height: 28px; border-radius: 999px; background: #0f2a43; position: relative; cursor: pointer; flex: 0 0 auto; }
.hm-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .18s; }
.hm-switch.annual::after { left: 27px; }
.hm-save-note { color: #d71920; font-weight: 700; }
.hm-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.hm-plan { border: 1px solid #e2e9f0; border-radius: 14px; padding: 28px 24px; background: #fff; display: flex; flex-direction: column; position: relative; }
.hm-plan.hm-featured { border: 2px solid #d71920; box-shadow: 0 8px 28px rgba(215,25,32,.12); }
.hm-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #d71920; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; letter-spacing: .5px; white-space: nowrap; }
.hm-plan h3 { margin: 0 0 4px; font-size: 18px; color: #0f2a43; }
.hm-price { font-size: 38px; font-weight: 800; color: #0f2a43; margin: 8px 0 0; }
.hm-price small { font-size: 15px; font-weight: 600; color: #5a6b7c; }
.hm-per { font-size: 13px; color: #5a6b7c; margin: 2px 0 16px; }
.hm-plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.hm-plan li { font-size: 14.5px; line-height: 1.5; color: #48586a; margin-bottom: 9px; padding-left: 24px; position: relative; }
.hm-plan li::before { content: "✓"; position: absolute; left: 0; color: #d71920; font-weight: 800; }
.hm-cta { display: block; text-align: center; padding: 13px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; }
.hm-cta-red { background: #d71920; color: #fff; }
.hm-cta-ghost { border: 2px solid #0f2a43; color: #0f2a43; }
.hm-fineprint { text-align: center; color: #5a6b7c; font-size: 13.5px; margin: 26px auto 0; max-width: 720px; line-height: 1.55; }

/* Scroll cue (refresh 2026-10-16) */
.scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: #e6eef5; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 6px 10px; transition: opacity .3s ease; animation: cue-bob 1.8s ease-in-out infinite; }
.scroll-cue.cue-hide { opacity: 0; pointer-events: none; }
@keyframes cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }