/* Harson.ai — shared styles for every page except the homepage.
   ------------------------------------------------------------------
   Same world as the homepage (neon.css): Tokyo Night pushed to neon,
   Chakra Petch for display, JetBrains Mono for everything technical.

   These pages are read, not admired — privacy policies, support, app
   detail. So the scene is stated, not performed: a faint grid, no rain,
   no glitch, no motion beyond a hover. Readability first; the theme is
   carried by colour and type rather than effects.

   Every selector the old stylesheet defined is preserved, so no page
   markup had to change — including the two privacy policies, which are
   what the Play listings link to.
   ------------------------------------------------------------------ */

:root{
  --void:#04050c; --deep:#0a0d24; --panel:#0b0f26; --panel-2:#101534;
  --cyan:#22d3ee; --magenta:#ff2d95; --rain:#57ffa8; --amber:#ffb86b;
  --ink:#dbe6ff; --ink-soft:#8d9ac8; --ink-bright:#ffffff;
  --line:rgba(120,160,255,.16);
  /* the old names, kept so nothing that referenced them breaks */
  --bg:#04050c; --muted:#8d9ac8; --lime:#22d3ee; --lime-ink:#04050c;
  --heat:#ff2d95; --paper:#0b0f26;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--void);color:var(--ink);
  font:400 clamp(.97rem,1vw,1.06rem)/1.75 "JetBrains Mono",ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;
  /* a faint floor grid, fixed so it does not move while reading */
  background-image:
    repeating-linear-gradient(90deg,transparent 0 74px,rgba(61,91,255,.05) 74px 75px),
    repeating-linear-gradient(0deg,transparent 0 74px,rgba(61,91,255,.05) 74px 75px);
  background-attachment:fixed;
}
a{color:var(--cyan);text-underline-offset:.25em}
a:hover{color:var(--ink-bright);text-shadow:0 0 14px rgba(34,211,238,.7)}

.wrap{width:min(72rem,calc(100% - 2.4rem));margin-inline:auto}
.wrap.narrow{width:min(46rem,calc(100% - 2.4rem))}

header{border-bottom:1px solid var(--line);padding:1.1rem 0;
  background:linear-gradient(var(--deep),transparent);position:sticky;top:0;z-index:10;
  backdrop-filter:blur(8px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* Typographic wordmark, matching the homepage. The old brand-kit PNG is a
   hard geometric "AI brain" in a plain sans and sat badly on this ground. */
.mark{font-family:"Chakra Petch",system-ui,sans-serif;font-size:1.4rem;font-weight:700;
  letter-spacing:-.02em;text-decoration:none;color:var(--ink-bright);line-height:1;
  text-shadow:0 0 18px rgba(34,211,238,.45);transition:text-shadow .2s}
.mark span{color:var(--cyan)}
.mark:hover{text-shadow:0 0 28px rgba(34,211,238,.85);color:var(--ink-bright)}
.brand-hero{display:block;margin-bottom:1.5rem}
.brand-hero img{height:3rem;width:auto}
nav{display:flex;gap:1.2rem;font-size:.8rem;letter-spacing:.04em;flex-wrap:wrap}
nav a{color:var(--ink-soft);text-decoration:none}
nav a:hover,nav a[aria-current="page"]{color:var(--cyan);text-shadow:0 0 12px rgba(34,211,238,.6)}

main{padding:clamp(2.5rem,6vw,4.5rem) 0 4rem}
.kicker{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  margin:0 0 1rem;display:flex;align-items:baseline;gap:.55rem}
.kicker::before{content:"//";color:var(--magenta)}
h1{font-family:"Chakra Petch",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.04;letter-spacing:-.015em;
  margin:0 0 1.2rem;color:var(--ink-bright);text-wrap:balance;
  text-shadow:0 0 30px rgba(34,211,238,.22)}
h1.page{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h2{font-family:"Chakra Petch",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.15;margin:2.4rem 0 .7rem;
  color:var(--ink-bright)}
.lede{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--ink);max-width:52ch}
p{max-width:68ch}

.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.btn{display:inline-block;padding:.72rem 1.3rem;text-decoration:none;font-weight:600;
  font-size:.85rem;letter-spacing:.04em;border:1px solid var(--line);
  transition:border-color .2s,box-shadow .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--cyan);color:var(--lime-ink);border-color:var(--cyan);
  box-shadow:0 0 22px rgba(34,211,238,.35)}
.btn-lime:hover{box-shadow:0 0 34px rgba(34,211,238,.6);color:var(--lime-ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);
  box-shadow:0 0 20px rgba(34,211,238,.22)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin:1.6rem 0}
.grid.solo{grid-template-columns:1fr}
.card{background:var(--panel);border:1px solid var(--line);padding:1.5rem;
  position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--cyan);transform:translateY(-3px)}
.card.hot{border-color:rgba(255,45,149,.45);background:var(--panel-2)}
.card h2{margin-top:0;font-size:1.2rem}
.card p:last-child{margin-bottom:0}
.tag{display:inline-block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(255,184,107,.35);padding:.2rem .55rem;
  margin-bottom:.7rem}
.tag-live{color:var(--rain);border-color:rgba(87,255,168,.4)}

.meta{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.55rem}
.meta li{display:flex;gap:.8rem;align-items:baseline;font-size:.88rem}
.meta span{color:var(--ink-soft);min-width:9rem;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase}

/* the privacy policies live in here — plain, high contrast, easy to read */
.legal p{color:var(--ink);max-width:70ch}
.legal h2{font-size:clamp(1.1rem,2vw,1.4rem);color:var(--cyan);
  border-bottom:1px solid var(--line);padding-bottom:.5rem}
.updated{color:var(--ink-soft);font-size:.78rem;letter-spacing:.06em}

.note{color:var(--ink-soft);font-size:.85rem;border-left:2px solid var(--magenta);
  padding-left:1rem;margin:1.6rem 0}

.phones{display:flex;gap:1rem;flex-wrap:wrap;margin:1.8rem 0}
.phone{margin:0;flex:1 1 13rem;max-width:16rem}
.phone img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.phone figcaption{color:var(--ink-soft);font-size:.74rem;margin-top:.5rem}

.store-soon{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0}
.store-soon span{border:1px dashed var(--line);padding:.6rem 1rem;font-size:.8rem;
  color:var(--ink-soft)}
.store-soon em{font-style:normal;color:var(--amber)}

.proof{list-style:none;padding:0;margin:1.6rem 0;display:grid;gap:.7rem}
.proof li{display:flex;gap:.8rem;align-items:baseline}
.proof span{color:var(--cyan)}

.how{margin:3rem 0}
.section-head{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);border-bottom:1px solid var(--line);padding-bottom:.7rem;
  margin-bottom:1.6rem}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.4rem}
.how-grid h3{font-family:"Chakra Petch",sans-serif;font-size:1.05rem;margin:0 0 .4rem;
  color:var(--ink-bright)}
.how-grid p{color:var(--ink-soft);font-size:.88rem;margin:0}

footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--ink-soft);
  font-size:.78rem;margin-top:3rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between}
footer a{color:var(--ink-soft)}

/* the ballistics hero, if a page still uses it */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-inner{position:relative;z-index:2;padding:clamp(3rem,7vw,5.5rem) 0}
.hero-art{position:absolute;inset:0;z-index:1;opacity:.35;pointer-events:none}
.hero-art .reticle{width:100%;height:100%;object-fit:contain}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero .lede{color:var(--ink)}
.hero .hero-actions{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media(max-width:700px){
  header .wrap{flex-direction:column;align-items:flex-start;gap:.55rem}
  nav{gap:.5rem .9rem;font-size:.76rem}
  .mark{font-size:1.25rem}
  .meta li{flex-direction:column;gap:.15rem}
  .meta span{min-width:0}
}