/* Layan.ai — Home 2: the hero where the .live badge becomes a wisp, the family personas behind the heart,
   the palette that follows a visitor's website, and the cinematic scroll. Loaded after marketing.css on home-2.html only. */

/* the hero palette is three registered numbers, so a persona or a website can cross-fade the whole hero smoothly */
@property --h2-h { syntax: '<number>'; inherits: true; initial-value: 220; }
@property --h2-h2 { syntax: '<number>'; inherits: true; initial-value: 200; }
@property --h2-s { syntax: '<percentage>'; inherits: true; initial-value: 72%; }

.hero2 {
  --h2-l: 70%; /* accent lightness: bright on the dark page */
  min-height: 100vh; padding-top: clamp(48px, 7vw, 96px);
  transition: --h2-h 1.2s var(--ease-io), --h2-h2 1.2s var(--ease-io), --h2-s 1.2s var(--ease-io);
}
:root[data-theme="light"] .hero2 { --h2-l: 42%; }
.hero2 .h2-sky {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 8%, hsl(var(--h2-h) 80% 34% / 0.55), transparent 70%),
    radial-gradient(ellipse 40% 36% at 82% 70%, hsl(var(--h2-h2) 80% 40% / 0.28), transparent 70%),
    radial-gradient(ellipse 36% 30% at 14% 76%, hsl(26 90% 50% / 0.14), transparent 70%);
}
:root[data-theme="light"] .hero2 .h2-sky {
  background:
    radial-gradient(ellipse 60% 50% at 50% 8%, hsl(var(--h2-h) 95% 86% / 0.8), transparent 70%),
    radial-gradient(ellipse 40% 36% at 82% 70%, hsl(var(--h2-h2) 90% 88% / 0.7), transparent 70%),
    radial-gradient(ellipse 36% 30% at 14% 76%, hsl(26 100% 88% / 0.6), transparent 70%);
}
.h2-wisps { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.h2-inner { position: relative; z-index: 1; gap: var(--s-4); }

/* ---------- the mark: layan + the .live badge that leaves as the ember wisp ---------- */
.h2-mark { display: inline-flex; align-items: flex-start; margin: 0; line-height: 1; }
.h2-word {
  font-family: "Great Vibes", "Brush Script MT", "Segoe Script", cursive; font-weight: 400;
  font-size: clamp(4.5rem, 2.6rem + 7vw, 9rem); line-height: 1; padding: 0.06em 0.14em 0.12em 0.06em;
  background: linear-gradient(100deg, var(--paper) 0%, hsl(var(--h2-h) var(--h2-s) var(--h2-l)) 55%, hsl(var(--h2-h2) var(--h2-s) var(--h2-l)) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.h2-live {
  margin: 0.55em 0 0 -0.1em; padding: 0.22em 0.62em 0.26em; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-size: clamp(1rem, 0.7rem + 1vw, 1.5rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  background: var(--live); color: var(--on-live);
  box-shadow: 0 8px 28px -8px rgba(255, 145, 51, 0.8);
  transition: transform 520ms var(--ease-io), opacity 420ms var(--ease-out);
}
.h2-live.is-out { transform: scale(0.15) rotate(-120deg); opacity: 0; }
/* the owner removed the ".live" word: the badge stays only as an invisible, zero-size anchor beside "layan",
   because js/home2-wisps.js launches the wisps from its position */
.h2-mark .h2-live { width: 0; height: 0; padding: 0; margin: 0.7em 0 0; overflow: hidden; visibility: hidden; box-shadow: none; }

/* ---------- cursor hints: hidden until the visitor sends. They arrive with the tornado (js/hero-canvas.js burst),
   then drop into the section below as the page scrolls there. translate/scale/opacity so the drift animation keeps its transform. ---------- */
.hero2 .cursor-tag { opacity: 0; scale: 0.6; visibility: hidden; transition: opacity 360ms var(--ease-out), scale 420ms var(--ease-out), translate 800ms var(--ease-in), visibility 0s linear 800ms; }
.hero2.is-sending .cursor-tag { opacity: 1; scale: 1; visibility: visible; transition-delay: var(--in, 0ms), var(--in, 0ms), 0ms, 0ms; }
.hero2.is-sending.is-dropping .cursor-tag { opacity: 0; scale: 0.85; translate: 0 48vh; transition-delay: calc(var(--in, 0ms) / 2); }

/* ---------- headline: words are spans so a passing wisp can colour them ---------- */
.h2-title { font-size: var(--fs-3xl); max-width: 22ch; }
.h2-line { display: block; }
.h2-title .hero-title-2 { color: hsl(var(--h2-h) var(--h2-s) var(--h2-l)); font-weight: 300; }
.h2-title .w { transition: color 450ms var(--ease-out), text-shadow 450ms var(--ease-out); }
.h2-title .w.is-tint { color: hsl(var(--tint-h) 78% var(--h2-l)); text-shadow: 0 0 24px hsl(var(--tint-h) 90% 60% / 0.35); }

/* persona change: the copy blurs out, is rewritten, and rises back in */
.hero2.is-leaving .h2-line { opacity: 0; transform: translateY(-12px); filter: blur(6px); transition: opacity 300ms var(--ease-in), transform 300ms var(--ease-in), filter 300ms; }
.hero2.is-entering .h2-line { animation: h2-in 700ms var(--ease-out) both; }
.hero2.is-entering #h2-l2 { animation-delay: 80ms; }
.hero2.is-entering #h2-sub { animation-delay: 160ms; }
@keyframes h2-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- tips riding on the wisps ---------- */
.h2-tips { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.h2-tip {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; max-width: min(300px, 60vw); width: max-content;
  padding: 7px 12px; border-radius: 4px 12px 12px 12px; line-height: 1.3;
  font-size: var(--fs-xs); font-weight: 500; color: var(--paper);
  background: var(--glass-2); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px -14px rgba(2, 9, 31, 0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; scale: 0.9; transition: opacity 300ms var(--ease-out), scale 300ms var(--ease-out);
}
.h2-tip.is-left { translate: -100% 0; border-radius: 12px 4px 12px 12px; }
.h2-tip.is-on { opacity: 1; scale: 1; }
.h2-tip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: hsl(var(--tip-h, 220) 90% 58%); box-shadow: 0 0 10px hsl(var(--tip-h, 220) 90% 60%); }
.h2-tip-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* two lines at most, never a cut word mid-line */
@media (max-width: 640px) { .h2-tip { font-size: 0.68rem; padding: 5px 9px; } }
.hero2.is-narrow .h2-tip { display: none; }
/* narrow heroes: no side margin for bubbles, so the newest tip reads here; the line keeps its height so nothing jumps */
.h2-ticker { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 1.6em; margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--paper-2); opacity: 0; transition: opacity 300ms var(--ease-out); }
.hero2.is-narrow .h2-ticker { display: inline-flex; }
.h2-ticker.is-on { opacity: 1; }

/* ---------- modes: Business (blue), Freelancer (warm), Parents (pink); the bar under the chosen tab fills while the hero waits ---------- */
.h2-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--line-strong); animation: h2-in 500ms var(--ease-out) both; }
.h2-modes[hidden] { display: none; }
.h2-modes button {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--paper-2);
  transition: background var(--t-ui) var(--ease-out), color var(--t-ui);
}
.h2-modes button:hover { color: var(--paper); background: hsl(var(--m-h) var(--m-s) 50% / 0.14); }
.h2-modes .m-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--m-h) var(--m-s) 62%); box-shadow: 0 0 10px hsl(var(--m-h) 90% 60% / 0.7); }
.h2-modes small { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.h2-modes button[aria-selected="true"] { background: hsl(var(--m-h) var(--m-s) 44%); color: #fff; box-shadow: 0 8px 24px -10px hsl(var(--m-h) 90% 55% / 0.8); }
.h2-modes button[aria-selected="true"] .m-dot { background: #fff; }
.h2-modes button[aria-selected="true"] small { color: rgba(255, 255, 255, 0.8); }
.h2-modes button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); transform-origin: left; transform: scaleX(0); }
.h2-modes button.is-timing::after { animation: h2-stall 6s linear forwards; } /* 6s = STALL_MS in js/home2.js */
@keyframes h2-stall { to { transform: scaleX(1); } }
:root[data-theme="light"] .h2-modes { background: rgba(255, 255, 255, 0.72); }
:root[data-theme="light"] .h2-modes button { color: #23407A; }
:root[data-theme="light"] .h2-modes button[aria-selected="true"] { color: #fff; }
@media (max-width: 420px) { .h2-modes button { padding: 7px 11px; } .h2-modes small { display: none; } }

/* ---------- heart and the family personas ---------- */
.heart-toggle {
  width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto;
  color: var(--frost); background: var(--glass); border: 1px solid var(--line-strong);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-ui) var(--ease-out);
}
.heart-toggle[hidden] { display: none; }
.heart-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill var(--t-ui); }
.heart-toggle:hover { color: #FF4D6D; border-color: #FF4D6D; }
.heart-toggle[aria-pressed="true"] { color: #FF4D6D; border-color: rgba(255, 77, 109, 0.6); }
.heart-toggle[aria-pressed="true"] svg { fill: #FF4D6D; animation: h2-beat 700ms var(--ease-out); }
@keyframes h2-beat { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 55% { transform: scale(0.92); } 100% { transform: scale(1); } }

.h2-personas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; animation: h2-in 500ms var(--ease-out) both; }
.h2-personas[hidden] { display: none; }
.h2-personas button {
  font-size: var(--fs-sm); padding: 7px 14px; border-radius: var(--r-pill); color: var(--paper-2);
  background: var(--glass); border: 1px solid var(--line-strong); transition: background var(--t-ui), color var(--t-ui), border-color var(--t-ui);
}
.h2-personas button b { font-weight: 600; color: var(--paper); }
.h2-personas button:hover { border-color: hsl(var(--h2-h) var(--h2-s) var(--h2-l)); }
.h2-personas button[aria-selected="true"] { background: hsl(var(--h2-h) var(--h2-s) 42%); border-color: transparent; color: #fff; }
.h2-personas button[aria-selected="true"] b { color: #fff; }

.h2-custom {
  width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1.6fr 1.2fr auto; gap: 8px; align-items: end; text-align: left;
  padding: 12px; border-radius: 18px; background: var(--glass-2); border: 1px solid var(--line-strong); animation: h2-in 500ms var(--ease-out) both;
}
.h2-custom[hidden] { display: none; }
.h2-custom label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.h2-custom input { font: inherit; font-size: var(--fs-sm); color: var(--paper); background: var(--abyss); border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 11px; outline: none; }
.h2-custom input:focus { border-color: hsl(var(--h2-h) var(--h2-s) var(--h2-l)); }
.h2-custom input:focus-visible { box-shadow: 0 0 0 3px hsl(var(--h2-h) var(--h2-s) var(--h2-l) / 0.35); }
@media (max-width: 720px) { .h2-custom { grid-template-columns: 1fr; } }

/* ---------- cinematic scroll: scroll-driven, so the compositor animates and the main thread stays free ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home2 .h2-inner { animation: h2-exit linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    @keyframes h2-exit { to { opacity: 0; transform: translateY(-80px) scale(0.92); } }
    .home2 main > section:not(.hero2) { animation: h2-scene linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes h2-scene { from { opacity: 0; transform: translateY(110px) scale(0.95); } to { opacity: 1; transform: none; } }
    .home2 main > section:not(.hero2) h2 { animation: h2-wipe linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    @keyframes h2-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    .home2 .console { animation: h2-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes h2-zoom { from { opacity: 0.3; transform: perspective(1200px) rotateX(16deg) scale(0.88); } to { opacity: 1; transform: none; } }
  }
}

/* phones: Home 2's navbar also holds the heart and the theme switch, so it tightens a little more than base.css does */
@media (max-width: 420px) { .home2 .nav-inner { gap: 10px; } .home2 .nav-actions { gap: 4px; } .home2 .nav-actions .btn-primary { padding: 0 10px; } }

/* ---------- no website in the prompt: a friendly line under it, with a site to try ---------- */
.h2-ask { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 0; font-size: var(--fs-sm); color: var(--paper-2); }
.h2-ask[hidden] { display: none; }
.h2-ask b { color: var(--paper); font-weight: 600; }
.h2-ask.is-nudge { animation: h2-nudge 520ms var(--ease-out); }
@keyframes h2-nudge { 0% { opacity: 0; transform: translateY(-6px); } 40% { opacity: 1; transform: translateX(-5px); } 70% { transform: translateX(4px); } 100% { transform: none; } }

/* ---------- the report (js/home2-report.js): the visitor's website in Layan's 13-step order ---------- */
.h2-report { padding: var(--s-9) 0; position: relative; }
.h2-report::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 20%, rgba(37, 78, 193, 0.24), transparent 70%); }
:root[data-theme="light"] .h2-report::before { background: radial-gradient(ellipse 60% 40% at 50% 20%, rgba(96, 157, 252, 0.16), transparent 70%); }
.rp { max-width: 880px; display: grid; gap: var(--s-5); }
.rp > * { min-width: 0; }
.rp-kicker { margin: 0 0 4px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--frost); overflow-wrap: anywhere; }
.rp-head { display: flex; align-items: center; gap: var(--s-4); }
.rp-id { min-width: 0; }
.rp-head h2 { font-size: var(--fs-2xl); margin: 0; overflow-wrap: anywhere; }
.rp-meta { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.rp-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(96, 157, 252, 0.6); animation: rp-ping 1.4s infinite; flex: 0 0 auto; }
@keyframes rp-ping { 70% { box-shadow: 0 0 0 10px rgba(96, 157, 252, 0); } 100% { box-shadow: 0 0 0 0 rgba(96, 157, 252, 0); } }
.rp-fav { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: var(--glass-2); border: 1px solid var(--line-strong); box-shadow: 0 14px 40px -18px rgba(96, 157, 252, 0.7); }
.rp-fav img { width: 34px; height: 34px; object-fit: contain; }
.rp-fav b { font-size: 1.6rem; font-weight: 700; color: var(--signal); }

/* cards: the website check, the reading bubble and each step */
.rp-card, .rp-check { position: relative; border-radius: 18px; padding: 16px 18px; background: var(--glass-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-panel); min-width: 0; }
.rp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rp-card-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.rp-free { font-size: var(--fs-xs); font-weight: 600; color: var(--ok); padding: 3px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); white-space: nowrap; }
.rp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-row { display: grid; grid-template-columns: auto 9.5rem minmax(0, 1fr); align-items: start; gap: 10px; font-size: var(--fs-sm); color: var(--paper-2); }
.rp-row b { font-weight: 500; color: var(--paper); }
.rp-row .rp-t { overflow-wrap: anywhere; }
.rp-og { display: block; margin-top: 12px; width: min(320px, 100%); aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
@media (max-width: 560px) { .rp-row { grid-template-columns: auto minmax(0, 1fr); } .rp-row .rp-t { grid-column: 2; } }

.rp-stat { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; line-height: 1; }
.rp-stat.is-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.rp-stat.is-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.rp-stat.is-connect { color: var(--frost); border: 1px dashed var(--line-strong); }

.rp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rp-l { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); line-height: 1.5; color: var(--paper-2); min-width: 0; }
.rp-l .rp-t { min-width: 0; overflow-wrap: anywhere; }
.rp-li { flex: 0 0 1em; font-weight: 700; text-align: center; }
.rp-l.is-ok .rp-li { color: var(--ok); }
.rp-l.is-bad .rp-li { color: var(--bad); }
.rp-l.is-connect { color: var(--muted); }
.rp-l.is-connect .rp-li { color: var(--frost); }
.rp-chips { flex-wrap: wrap; gap: 6px; }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--paper); background: rgba(170, 206, 253, 0.07); border: 1px solid var(--line-strong); }
.rp-chip b { color: var(--ok); }
.rp-sw { display: inline-flex; gap: 4px; margin-left: 4px; }
.rp-sw i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-strong); }

/* typing dots while a card waits for its facts */
.rp-dots { display: none; gap: 5px; padding: 6px 0; }
.is-pending > .rp-dots, .is-pending .rp-card > .rp-dots, .is-pending .rp-bubble-body > .rp-dots { display: inline-flex; }
.is-pending .rp-lines, .is-pending .rp-rows { display: none; }
.rp-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--frost); opacity: 0.35; animation: rp-dot 1s infinite; }
.rp-dots i:nth-child(2) { animation-delay: 0.15s; }
.rp-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes rp-dot { 30% { opacity: 1; transform: translateY(-3px); } 60% { opacity: 0.35; transform: none; } }

/* the reading, as a chat bubble from the orb */
.rp-bubble { display: flex; gap: 12px; align-items: flex-start; }
.rp-bubble-orb, .rp-orb { border-radius: 50%; background: radial-gradient(circle at 38% 30%, #AACEFD 0, #609DFC 32%, #254EC1 72%, #091A58 100%); box-shadow: 0 0 0 1px rgba(228, 241, 255, 0.6), 0 0 26px 4px rgba(96, 157, 252, 0.55); }
.rp-bubble-orb { width: 36px; height: 36px; flex: 0 0 auto; margin-top: 2px; }
.rp-bubble-body { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 4px 18px 18px 18px; background: var(--glass-2); border: 1px solid var(--line-strong); }
.rp-bubble-label { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--muted); }
.rp-src { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-weight: 600; color: var(--frost); background: rgba(170, 206, 253, 0.08); border: 1px solid var(--line-strong); }
.rp-src.is-model { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.rp-bubble .rp-l b { color: var(--paper); font-weight: 600; }
.rp-bubble.is-quiet .rp-bubble-label { margin: 0; color: var(--paper-2); }

/* the rail: a track, the orb that travels it, a number per step */
.rp-rail { position: relative; padding-left: 56px; }
.rp-track { position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.rp-fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--signal), var(--cobalt)); transform-origin: top; transform: scaleY(0); }
.rp-orb { position: absolute; left: 8px; top: 10px; width: 28px; height: 28px; z-index: 3; opacity: 0; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms var(--ease-out); pointer-events: none; }
.rp-orb.is-on { opacity: 1; }
.rp-orb.is-rest { animation: rp-breathe 2.4s var(--ease-io) infinite; }
@keyframes rp-breathe { 50% { box-shadow: 0 0 0 1px rgba(228, 241, 255, 0.6), 0 0 40px 10px rgba(96, 157, 252, 0.45); } }
.rp-steps { list-style: none; margin: 0; padding: 0 0 14px; display: grid; gap: 14px; }
.rp-step { position: relative; min-width: 0; }
.rp-num { position: absolute; left: -49px; top: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--frost); background: var(--abyss); border: 1px solid var(--line-strong); z-index: 1; }
.rp-step[data-status="ok"] .rp-num { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.rp-step[data-status="bad"] .rp-num { border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.rp-step[data-status="bad"] .rp-card { box-shadow: var(--shadow-panel), inset 3px 0 0 color-mix(in srgb, var(--bad) 70%, transparent); }

/* "AI animate results": each card lands with a small spring, then its words are written in */
.rp-step.is-done .rp-card, .rp-check.is-done, .rp-bubble.is-done .rp-bubble-body { animation: rp-land 560ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes rp-land { 0% { transform: translateY(10px) scale(0.975); box-shadow: var(--shadow-panel), 0 0 0 1px rgba(96, 157, 252, 0.7), 0 0 50px -6px rgba(96, 157, 252, 0.7); } 100% { transform: none; } }
.is-done .rw { display: inline-block; animation: rp-word 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rp-word { from { opacity: 0; transform: translateY(7px) scale(0.94); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* the label over the report: a sample says so, a real report names its host */
.rp-tag { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-weight: 600; letter-spacing: 0.06em; border: 1px solid var(--line-strong); background: rgba(170, 206, 253, 0.07); }
.rp-tag[data-kind="sample"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.rp-tag[data-kind="real"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.rp-fav.is-sample b { color: var(--warn); }
.rp-sample-cta { display: none; flex-wrap: wrap; gap: 8px; margin-top: calc(var(--s-5) * -0.5); }
.h2-report[data-state="sample"] .rp-sample-cta { display: flex; }
/* while a real report replaces the sample, the steps still showing sample lines step back */
.h2-report[data-state="built"] .rp-step[data-src="harbourline.example"] .rp-card { opacity: 0.45; }

/* protection: the report cannot be selected, dragged, printed or pointed at where it is blurred */
.h2-report .rp { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.h2-report .rp input { -webkit-user-select: text; user-select: text; }
.rp-l > * { transition: filter 700ms var(--ease-io), opacity 700ms var(--ease-io); }
.rp-l[data-blur="1"], .rp-l[data-blur="2"] { pointer-events: none; }
.rp-l[data-blur="1"] > * { filter: blur(5px); opacity: 0.75; }
.rp-l[data-blur="2"] > * { filter: blur(8px); opacity: 0.6; }
.rp-l[data-blur="1"] > .rw, .rp-l[data-blur="2"] > .rw { animation: none; } /* a chip's word-in animation would otherwise end on filter: none and lift the blur */
.rp-l.is-reveal > * { animation: rp-unblur 700ms var(--ease-io) both; }
@keyframes rp-unblur { from { filter: blur(5px); opacity: 0.75; } to { filter: none; opacity: 1; } }
.rp-stat.is-lock { color: var(--muted); border: 1px solid var(--line-strong); }
.rp-step[data-mode="locked"] .rp-card { background: color-mix(in srgb, var(--glass-2) 70%, transparent); }
@media print { .h2-report .rp-rail, .h2-report .rp-check, .h2-report .rp-bubble { visibility: hidden; } }

/* the flip: old lines turn away, new ones turn in, one after another */
.rp-step.is-out .rp-lines > .rp-l, .rp-check.is-out .rp-row { animation: rp-flip-out 240ms var(--ease-io) both; animation-delay: calc(var(--k, 0) * 35ms); }
.rp-step.is-in .rp-lines > .rp-l, .rp-check.is-in .rp-row { animation: rp-flip-in 480ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes rp-flip-out { to { opacity: 0; transform: perspective(600px) rotateX(70deg) translateY(-6px); filter: blur(3px); } }
@keyframes rp-flip-in { from { opacity: 0; transform: perspective(600px) rotateX(-70deg) translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.rp-tag.is-out, #report-title.is-out { animation: rp-flip-out 240ms var(--ease-io) both; }
.rp-tag.is-in, #report-title.is-in { animation: rp-flip-in 480ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }

/* the buy card: one compact, Apple-quiet card right after the report */
.rp-buy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: center; max-width: 640px; width: 100%; justify-self: center; padding: 18px 22px; border-radius: 20px;
  background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent); box-shadow: var(--shadow-panel), 0 0 70px -34px rgba(96, 157, 252, 0.9); }
.rp-buy:empty { display: none; }
.rp-buy h3 { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rp-buy-host { color: var(--muted); font-weight: 400; }
.rp-buy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--paper-2); }
.rp-buy-list li { display: flex; gap: 8px; align-items: baseline; }
.rp-buy-list li span { color: var(--ok); font-weight: 700; flex: 0 0 auto; }
.rp-buy-side { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 170px; }
.rp-buy-price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.rp-buy-price b { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; color: var(--paper); }
.rp-buy-price span { font-size: var(--fs-xs); color: var(--muted); }
.rp-buy-btn { width: 100%; justify-content: center; }
.rp-buy-secure { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--muted); }
.rp-buy .rp-msg { margin: 0; min-height: 0; max-width: 24ch; }
.rp-buy .rp-msg:empty { display: none; }
.rp-soon { margin: 0; font-weight: 600; color: var(--paper); }
.rp-buy-done { margin: 0; color: var(--paper-2); font-size: var(--fs-sm); }
.rp-buy-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--paper-2); }
.rp-buy-row > span:first-child { flex: 1 1 auto; }
.rp-buy-row.is-offer b { color: var(--paper); }
.rp-link { font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.rp-left { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--warn); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.rp-mail { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 260px; }
.rp-mail input { flex: 1 1 160px; min-width: 0; font: inherit; font-size: var(--fs-sm); color: var(--paper); background: var(--abyss); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0 14px; height: 32px; outline: none; }
.rp-mail input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(96, 157, 252, 0.3); }
.rp-mail .rp-msg { flex-basis: 100%; }
.rp-mail .rp-msg:empty { display: none; }
.rp-msg { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.rp-empty-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-error { display: grid; gap: var(--s-3); }
.rp-error h2 { margin: 0; font-size: var(--fs-2xl); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .rp-rail { padding-left: 44px; }
  .rp-track { left: 15px; }
  .rp-orb { left: 3px; width: 26px; height: 26px; }
  .rp-num { left: -43px; width: 26px; height: 26px; font-size: 0.64rem; }
  .rp-card, .rp-check { padding: 14px; }
  .rp-fav { width: 48px; height: 48px; border-radius: 14px; }
  .rp-buy { grid-template-columns: 1fr; padding: 16px; }
  .rp-buy-side { justify-items: stretch; min-width: 0; }
  .rp-buy-price { justify-content: center; }
}

/* the 30-minute offer: one slim line pinned to the bottom once it starts */
.rp-offer { position: fixed; left: 50%; bottom: 14px; z-index: 60; width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; padding: 7px 40px 7px 14px;
  border-radius: var(--r-pill); background: var(--glass-2); border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent); box-shadow: var(--shadow-panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translate(-50%, 180%); transition: transform 480ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.rp-offer.is-on { transform: translate(-50%, 0); }
.rp-offer p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); color: var(--paper-2); }
.rp-offer p b { color: var(--paper); }
.rp-offer small { color: var(--muted); }
.rp-offer .rp-msg { position: absolute; left: 16px; bottom: calc(100% + 4px); margin: 0; }
.rp-offer-clock { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--warn); }
.rp-offer-soon { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.rp-offer-x { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; font-size: 1.1rem; line-height: 1; color: var(--muted); }
.rp-offer-x:hover { color: var(--paper); background: var(--glass); }
@media (max-width: 560px) { .rp-offer { border-radius: 16px; flex-wrap: wrap; gap: 4px 10px; } .rp-offer p { flex-basis: calc(100% - 70px); } }

/* scroll: each part of the report rises as it enters, and the rail fills as you read down it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .h2-report .rp-step, .h2-report .rp-check, .h2-report .rp-bubble, .h2-report .rp-buy, .h2-report .rp-empty-cta { animation: rp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
    @keyframes rp-rise { from { opacity: 0; transform: translateY(44px) scale(0.97); } to { opacity: 1; transform: none; } }
    .rp-rail { view-timeline: --rp-rail block; }
    .rp-fill { animation: rp-fill linear both; animation-timeline: --rp-rail; animation-range: entry 30% exit 70%; }
    @keyframes rp-fill { to { transform: scaleY(1); } }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rp-rail .rp-step, .h2-report .rp-check, .h2-report .rp-bubble, .h2-report .rp-buy { opacity: 0; transform: translateY(28px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
    .h2-report .is-seen { opacity: 1; transform: none; }
    .rp-fill { transform: scaleY(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .h2-report *, .h2-ask { animation: none !important; transition: none !important; }
  .rp-orb { display: none; }
  .rp-fill { transform: scaleY(1); }
  .rp-offer { transition: none; }
  .h2-journey, .home2 .h2-wisps, .home2 .h2-tips { transition: none; }
  .rp-l > * { transition: none; }
}

/* ---------- pricing, moved up right after the report: a slim redeem row before the plans ---------- */
.home2 .h2-report { padding-bottom: var(--s-6); }
.home2 .pricing { border-top: 0; padding-top: var(--s-5); }
.pr-redeem { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-5); align-items: center; margin-bottom: var(--s-7); padding: 22px 24px; border-radius: var(--r-xl);
  background: var(--glass-2); border: 1px solid var(--line-strong); box-shadow: var(--shadow-panel); }
.pr-redeem-copy { display: grid; gap: 10px; justify-items: start; }
.pr-redeem-kicker { margin: 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--frost); }
.pr-redeem-lead { margin: 0; font-size: var(--fs-md); color: var(--paper); text-wrap: pretty; }
.pr-incl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-incl li { padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--paper-2); background: rgba(170, 206, 253, 0.07); border: 1px solid var(--line-strong); }
.pr-incl li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
@media (max-width: 760px) { .pr-redeem { grid-template-columns: 1fr; padding: 18px; } }

/* ---------- the interlude: Home 1's hero animation, full bleed, mid-page ---------- */
.h2-interlude { position: relative; isolation: isolate; overflow: hidden; min-height: min(78vh, 720px); display: grid; place-items: center; padding: var(--s-9) 0; text-align: center; }
.h2-interlude .hero-canvas { z-index: -1; }
.h2-interlude-inner { display: grid; gap: var(--s-3); justify-items: center; max-width: 720px; }
.h2-interlude-kicker { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--frost); }
.h2-interlude h2 { margin: 0; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); letter-spacing: -0.03em; }
.h2-interlude .lede { margin: 0; }

/* ---------- the logo journey (js/home2-scroll.js): the wisp orb rides down in the corner ---------- */
.h2-journey { position: fixed; right: 22px; bottom: 22px; z-index: 55; width: 96px; height: 96px; pointer-events: none;
  opacity: 0; transform: translateY(16px) scale(0.6); transition: opacity 600ms var(--ease-out), transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1), bottom 400ms var(--ease-out); }
.h2-journey.is-on { opacity: 1; transform: none; }
.h2-journey-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.h2-journey-ring circle { fill: none; stroke-width: 1.6; }
.h2-journey-ring .jr-t { stroke: var(--line-strong); }
.h2-journey-ring .jr-p { stroke: var(--signal); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(96, 157, 252, 0.7)); }
.h2-journey-orb { position: absolute; inset: 12px; border-radius: 50%; padding: 0; pointer-events: none; cursor: pointer; background: transparent; }
.h2-journey.is-on .h2-journey-orb { pointer-events: auto; }
.h2-journey-orb:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.h2-journey-orb canvas { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); pointer-events: none;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 62%, transparent 100%); }
.h2-fly { position: fixed; inset: 0; z-index: 54; width: 100vw; height: 100vh; pointer-events: none; }
body:has(.rp-offer.is-on) .h2-journey { bottom: 84px; }
@media (max-width: 640px) {
  .h2-journey { right: 8px; bottom: 10px; width: 60px; height: 60px; }
  .h2-journey-orb { inset: 8px; }
  .h2-journey-orb canvas { width: 78px; height: 78px; }
  body:has(.rp-offer.is-on) .h2-journey { bottom: 116px; }
}

/* the hero wisps never blink out while scrolling: they fade as the hero leaves, and the corner orb takes over */
.home2 .h2-wisps, .home2 .h2-tips { transition: opacity 700ms var(--ease-io); }
.home2 .hero2.is-wisps-away .h2-wisps, .home2 .hero2.is-wisps-away .h2-tips { opacity: 0; }