/* Holohound — Midnight Holo, re-keyed from the app's tokens.json so the site
   and the product cannot drift apart visually. Dark-first, light fully tokened,
   because the app is and a marketing page that fights the OS looks broken. */
:root{
  --bg:#F5F6FB; --bg-2:#EAECF6; --surface:#FFFFFF; --card:#FFFFFF; --text:#14161F; --dim:#646A7E; --border:#E3E4EF;
  --tint:#5B47E0; --up:#0B703B; --down:#B3261E;
  --holo:linear-gradient(120deg,#0E7FA6,#5B47E0 38%,#A83AB0 68%,#9C6410);
  --radius:16px; --radius-sm:10px; --maxw:720px; --maxw-wide:1080px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0A0D18; --bg-2:#0E1220; --surface:#131829; --card:#151B30; --text:#EEF1FA; --dim:#96A0B8; --border:#232B44;
  --tint:#9D8BFF; --up:#3DDC97; --down:#FF6B6B;
  --holo:linear-gradient(120deg,#4EE1FF,#8B7BFF 38%,#FF7BD5 68%,#F5C84C);
}}
:root[data-theme=dark]{
  --bg:#0A0D18; --bg-2:#0E1220; --surface:#131829; --card:#151B30; --text:#EEF1FA; --dim:#96A0B8; --border:#232B44;
  --tint:#9D8BFF; --up:#3DDC97; --down:#FF6B6B;
  --holo:linear-gradient(120deg,#4EE1FF,#8B7BFF 38%,#FF7BD5 68%,#F5C84C);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;}
a{color:var(--tint)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:32px 20px 72px}
.container{max-width:var(--maxw-wide);margin:0 auto;padding:0 20px}
h1{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:19px;margin:34px 0 8px;letter-spacing:-.01em}
h3{font-size:16px;margin:20px 0 4px}
p,li{color:var(--text)}
.lede{font-size:18px;color:var(--dim);margin:0 0 24px}
.dim{color:var(--dim)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin:18px 0}
code{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:14px}
.updated{font-size:14px;color:var(--dim);margin:0 0 26px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;
  background:var(--holo);color:#fff;text-decoration:none;font-weight:700}
@media (prefers-color-scheme:light){.btn{color:#fff}}

/* ===== nav (marketing page only) ===== */
nav.site{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
nav.site .container{display:flex;align-items:center;gap:18px;padding:14px 20px}
nav.site .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;
  font-size:17px;text-decoration:none;color:var(--text);margin-right:auto}
/* The real app icon. It used to be an empty <span> painted with the --holo
   gradient — a generic coloured square standing in for a brand that already
   has a painted icon shipped in this folder. The gradient stays as the
   backdrop so there is no white flash before the PNG decodes. */
.mark{width:30px;height:30px;border-radius:9px;background:var(--holo);flex:0 0 30px;
  object-fit:cover;display:block}
.nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:600}
.nav-links a{color:var(--dim);text-decoration:none}
.nav-links a:hover{color:var(--text)}
.btn-nav{display:inline-flex;padding:9px 16px;border-radius:10px;border:1px solid var(--border);
  color:var(--text);text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
.btn-nav:hover{border-color:var(--tint)}
.mobile-menu{display:none;position:relative}
.mobile-menu>summary{list-style:none;cursor:pointer;padding:8px 10px;border:1px solid var(--border);
  border-radius:10px;font-weight:800;font-size:1.05rem}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-links{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:flex;flex-direction:column;
  gap:2px;min-width:190px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.25)}
.mobile-links a{padding:10px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:14.5px;font-weight:600}
.mobile-links a:hover{background:var(--bg-2)}
@media (max-width:820px){.nav-links{display:none}.btn-nav{display:none}.mobile-menu{display:block}}

/* ===== hero ===== */
.hero{padding:56px 0 40px}
.hero-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
@media (max-width:900px){.hero-layout{grid-template-columns:1fr;text-align:center}}
.hero-eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tint);margin-bottom:14px}
.hero h1{font-size:44px;line-height:1.08;margin-bottom:14px}
@media (max-width:560px){.hero h1{font-size:34px}}
.hero .lede{font-size:18px;max-width:52ch}
@media (max-width:900px){.hero .lede{margin-left:auto;margin-right:auto}}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 20px}
@media (max-width:900px){.hero-buttons{justify-content:center}}
.btn-warm{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:12px;
  background:var(--holo);color:#fff;text-decoration:none;font-weight:800;font-size:15px}
.btn-outline{display:inline-flex;align-items:center;padding:13px 20px;border-radius:12px;
  border:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:700;font-size:15px}
.hero-trust{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--dim);font-weight:600}
@media (max-width:900px){.hero-trust{justify-content:center}}
.hero-trust span::before{content:"✓ ";color:var(--up)}

.device-stage{display:flex;justify-content:center}
.device{width:240px;aspect-ratio:390/844;border-radius:34px;background:var(--surface);
  border:1px solid var(--border);box-shadow:0 30px 70px rgba(0,0,0,.28);overflow:hidden;position:relative}
.device img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Base state (also what reduced-motion and no-CSS-animation users get):
   the first screenshot shows, the rest are stacked behind it at zero. */
.hero-carousel img{opacity:0}
.hero-carousel img:first-child{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .hero-carousel img{animation:hh-fade 12s infinite}
  /* Every delay is shifted back by the 5% fade-in (0.6s) so the FIRST frame
     starts already held at full opacity. With a plain 0s delay the animation
     begins at the 0% stop — opacity 0 — and the phone is visibly empty for the
     first quarter-second of every page load, which is the one moment the hero
     has to land. Measured before the shift: 0.007 at t=0. */
  .hero-carousel img:nth-child(1){animation-delay:-0.6s}
  .hero-carousel img:nth-child(2){animation-delay:3.4s}
  .hero-carousel img:nth-child(3){animation-delay:7.4s}
}
/* HOLD at full opacity for the WHOLE 1/N slot (3 images -> 33.33%), then a
   short crossfade into the next. The first version of this ramped straight from
   1 to 0 across 5%->22% and sat at zero for the remaining 78%, so the phone
   frame was empty or near-empty most of the time and read as a broken image —
   the live page was measured at opacity 0.15/0/0/0. Same shape as storyvault's
   carousel, which is the proven one.
   N IS 3 AS OF 2026-08-24, down from 4: the Hound frame was withdrawn (see the
   comment in index.html's screens rail). The hold stop and the delays are both
   FUNCTIONS OF N — 100/N, and N spaced evenly across 12s, each shifted back by
   the 0.6s fade-in — so adding or removing a screenshot means moving both here.
   Leaving a fourth delay behind for a third image is a 4s hole in the loop with
   an empty phone in it. */
@keyframes hh-fade{
  0%     {opacity:0}
  5%     {opacity:1}
  33.33% {opacity:1}
  38.33% {opacity:0}
  100%   {opacity:0}
}

/* ===== stats strip ===== */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
@media (max-width:700px){.stats-strip{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center}
.stat .n{font-size:26px;font-weight:800;background-image:var(--holo);-webkit-background-clip:text;
  background-clip:text;color:transparent;letter-spacing:-.01em}
.stat .l{font-size:12.5px;color:var(--dim);font-weight:600;margin-top:2px}

/* ===== section shell ===== */
.section{padding:56px 0}
.section-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tint)}
.section h2.title{font-size:28px;margin:6px 0 10px;letter-spacing:-.01em}
.section .lede{max-width:60ch}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* ===== feature grid ===== */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media (max-width:900px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.feature-grid{grid-template-columns:1fr}}
.feature{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.feature h3{margin:0 0 8px;font-size:16.5px}
.feature p{font-size:14.5px;color:var(--dim);margin:0}

/* ===== screens gallery ===== */
.screens-rail{display:flex;gap:18px;overflow-x:auto;padding:28px 4px 12px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch}
.screen-card{flex:0 0 auto;width:200px;scroll-snap-align:start}
.screen-card .device{width:200px;margin-bottom:12px}
.screen-card p{font-size:13.5px;color:var(--dim);margin:0}

/* ===== plans ===== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media (max-width:820px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.plan.featured{border-color:var(--tint);position:relative}
.plan .badge{position:absolute;top:-11px;right:18px;background:var(--holo);color:#fff;font-size:11px;
  font-weight:800;padding:4px 10px;border-radius:999px}
.plan h3{margin-top:0}
.plan .price{font-size:26px;font-weight:800;background-image:var(--holo);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.plan .period{font-size:13px;color:var(--dim);margin-bottom:12px}
.plan ul{margin:0;padding-left:18px;font-size:14px;color:var(--dim)}
.plan ul li{margin-bottom:6px}

/* ===== faq ===== */
.faq-list{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.faq{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:4px 18px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--dim);font-weight:400}
.faq[open] summary::after{content:"–"}
.faq p{color:var(--dim);font-size:14.5px;margin:0 0 16px}

/* ===== cta strip ===== */
.cta-strip{text-align:center;padding:64px 20px;background:var(--bg-2);border-radius:24px;margin:8px 20px}
.cta-strip h2{font-size:26px;margin:0 0 8px}
.cta-strip p{color:var(--dim);margin:0 0 22px}

/* ===== marketing footer ===== */
footer.site-marketing{border-top:1px solid var(--border);margin-top:24px;padding:36px 20px}
.footer-inner{max-width:var(--maxw-wide);margin:0 auto}
.footer-top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:800}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 20px;font-size:14px}
.footer-links a{color:var(--dim);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.hs-more{margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}
.hs-more h4{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.hs-more-list{display:flex;flex-wrap:wrap;gap:8px}
.hs-more-list a{font-size:12.5px;color:var(--dim);text-decoration:none;padding:6px 12px;border:1px solid var(--border);
  border-radius:999px}
.hs-more-list a:hover{color:var(--text);border-color:var(--tint)}
.footer-copy{margin-top:22px;font-size:13px;color:var(--dim)}

footer.site{border-top:1px solid var(--border);margin-top:48px;padding:22px 20px;max-width:var(--maxw);margin-left:auto;margin-right:auto;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:14px;color:var(--dim)}
footer.site a{color:var(--dim)}