/* Marketing pages v2: Features, Pricing, Demo and Contact on the dashboard's
   pearl palette, with the new type, the objects in the headers and the ribbon
   behind the page. Loaded AFTER home.css and pages.css, which still carry the
   layout and the pearl colors; this file re-types, adds the header art and the
   ribbon, and swaps the CTA to the blue button. Scoped to body.home-page. */

:root {
  --display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  /* ribbon colors, read by home-v2.js */
  --ribbon-from: 37,99,235;
  --ribbon-to: 14,165,233;
  --ribbon-alpha: .42;
  --ribbon-fade: 238,242,247;
  --ribbon-streaks: #1d4ed8 #0ea5e9 #f59e0b #0f172a;
}

body.home-page { font-family: var(--font); }
body.home-page h1, body.home-page h2, body.home-page h3, body.home-page h4 { font-family: var(--display); letter-spacing: -.02em; }
body.home-page a:focus-visible, body.home-page button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- the ribbon, fixed behind the whole page. Content wrappers already carry
   position:relative; z-index:1 from pages.css, so everything paints above it. */
body.home-page .page-ribbon { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
body.home-page .page-cloud { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
body.home-page .hp-nav { z-index: 100; }

/* ---- nav: the blue button instead of the grey one ---- */
body.home-page .hp-nav-logo img { height: 48px; width: auto; }
@media (max-width: 768px) { body.home-page .hp-nav-logo img { height: 40px; } }
@media (max-width: 600px) { body.home-page .hp-nav-logo img { height: 36px; } }
body.home-page .hp-nav-cta { background: var(--blue); border: 0; color: #fff; border-radius: 10px; font-family: var(--display); font-size: 14px; box-shadow: 0 6px 18px rgba(59,130,246,.28); }
body.home-page .hp-nav-cta:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(59,130,246,.36); }

/* ---- page header, with an object ---- */
body.home-page .pg-header { padding: 120px 5% 40px; display: grid; justify-items: center; gap: 10px; }
body.home-page .pg-header .pg-art { width: clamp(130px, 18vw, 190px); height: auto; margin-bottom: 6px; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.05); }
body.home-page .pg-header .pg-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
body.home-page .pg-header h1 { background: none; -webkit-text-fill-color: var(--text); color: var(--text); font-weight: 800; letter-spacing: -.035em; font-size: clamp(34px, 5vw, 58px); margin-bottom: 6px; }
body.home-page .pg-header p { color: var(--text-muted); font-size: 17px; max-width: 58ch; }

/* ---- features page ---- */
body.home-page .ft-category { scroll-margin-top: 84px; }
body.home-page .ft-cat-icon { font-size: 0; width: 44px; height: 44px; border-radius: 10px; background: var(--paper); border: 1px solid var(--surface-border); display: grid; place-items: center; box-shadow: var(--shadow); }
body.home-page .ft-cat-icon img { width: 36px; height: 36px; object-fit: contain; }
body.home-page .ft-cat-count { font-family: var(--mono); font-weight: 500; }
body.home-page .ft-card { border-radius: 12px; }
body.home-page .ft-card h4 { font-family: var(--font); font-weight: 600; letter-spacing: 0; }

/* The tour player before play: pearl instead of a black slab, the same blue
   washes as the page, a solid blue play button. Once the video is playing the
   frame itself is black, as any player is. */
body.home-page .ft-tour-player { background: #e8eef8; }
body.home-page .ft-tour-player video { background: #000; }
body.home-page .ft-tour-poster,
body.home-page .ft-tour-poster:hover {
  background:
    radial-gradient(700px 380px at 12% 0%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(700px 380px at 88% 100%, rgba(14,165,233,.18), transparent 60%),
    linear-gradient(180deg, #f4f7fc 0%, #e8eef8 100%);
}
body.home-page .ft-tour-play-btn { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(59,130,246,.35); }
body.home-page .ft-tour-poster:hover .ft-tour-play-btn { background: #4f8ff7; border-color: #4f8ff7; }
body.home-page .ft-tour-play-text { color: var(--text-muted); font-weight: 600; }

/* ---- pricing ---- */
body.home-page .pr-card.featured::before { font-family: var(--mono); letter-spacing: .1em; }
body.home-page .pr-tier { font-family: var(--mono); font-weight: 500; letter-spacing: .12em; }
body.home-page .pr-price { font-family: var(--display); }
body.home-page .pr-price span { font-family: var(--font); }
body.home-page .pr-card.featured .pr-btn { border-radius: 12px; font-family: var(--display); box-shadow: 0 8px 24px rgba(59,130,246,.30); }
body.home-page .pr-card.featured .pr-btn:hover { transform: translateY(-1px); }

/* ---- forms ---- */
body.home-page .dm-submit, body.home-page .cf-submit { border-radius: 12px; font-family: var(--display); }
body.home-page .pg-note { text-align: center; margin-top: 26px; font-size: 14px; color: var(--text-muted); line-height: 1.8; }
body.home-page .pg-note a { color: var(--blue-ink); font-weight: 600; }

/* ---- demo site (role cards) ---- */
body.home-page .demo-card-role { font-family: var(--display); }
body.home-page .demo-card-email { font-family: var(--mono); }

/* ---- login page ---- */
body.home-page .login-wrap { position: relative; z-index: 1; }
body.home-page .login-title { font-family: var(--display); letter-spacing: -.02em; }
body.home-page .login-btn { border-radius: 12px; font-family: var(--display); }

/* ---- password pages (layouts/auth) ---- */
body.auth-page .auth-main { position: relative; z-index: 1; min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 120px 5% 60px; }
body.auth-page .auth-wrap { width: 100%; display: grid; justify-items: center; }
body.auth-page .auth-card { width: min(100%, 440px); background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(240,244,250,.92)); border: 1px solid var(--surface-border); border-radius: 20px; padding: 36px 34px; box-shadow: var(--shadow2); }
body.auth-page .auth-title { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
body.auth-page .auth-sub { color: var(--text-muted); font-size: 14px; margin: 4px 0 22px; }
body.auth-page .field { display: block; margin-bottom: 18px; }
body.auth-page .label { display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
body.auth-page .input { width: 100%; background: #fff; border: 1px solid rgba(200,210,225,.85); border-radius: 10px; padding: 13px 14px; font-size: 15px; font-family: var(--font); color: var(--text); box-shadow: inset 0 1px 2px rgba(15,23,42,.05); transition: border-color .2s, box-shadow .2s; }
body.auth-page .input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
body.auth-page .input::placeholder { color: #94a3b8; }
body.auth-page .input[readonly] { background: #f1f5f9; color: var(--text-muted); }
body.auth-page .form-error { color: #b91c1c; font-size: 13px; margin-top: 6px; }
body.auth-page .btn-primary { display: block; width: 100%; background: var(--blue); color: #fff; border: 0; border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 700; font-family: var(--display); cursor: pointer; box-shadow: 0 8px 24px rgba(59,130,246,.30); transition: background .2s, transform .15s; }
body.auth-page .btn-primary:hover { background: #4f8ff7; transform: translateY(-1px); }
body.auth-page .auth-foot { text-align: center; margin-top: 16px; }
body.auth-page .link { color: var(--blue-ink); font-weight: 700; font-size: 14px; }
body.auth-page .link:hover { text-decoration: underline; }
body.auth-page .note { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: rgba(22,163,74,.08) !important; border: 1px solid rgba(22,163,74,.28); border-left: 4px solid #16a34a !important; color: #166534 !important; font-size: 14px; }

/* ---- footer ---- */
body.home-page .hp-footer { background: rgba(255,255,255,.5); }
body.home-page .hp-footer-copy { display: flex; align-items: center; gap: 12px; }
body.home-page .hp-footer-copy img { width: 40px; height: 40px; object-fit: contain; }