/* ==========================================================================
   Probed Studios — shared base
   Design tokens, reset, and components reused across the marketing pages
   (homepage, project page, company legal). Page-specific layout/nav lives in
   each page's own <style> block. The in-app legal sheets are standalone and do
   NOT use this file (they ship a cooler, chrome-less token set of their own).
   ========================================================================== */

:root{
  --bg:#ffffff;
  --tint:#fcfbf6;
  --ink:#2B250E;
  --ink-body:#4b462f;
  --ink-soft:#7d775f;
  --ink-faint:#a39d86;
  --hair:rgba(43,37,14,.12);
  --hair-soft:rgba(43,37,14,.07);
  --accent:#FFCC00;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --maxw:1120px;
  --rhythm:1;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink-body);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-weight:400;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--accent);color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* ---------- container ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,6vw,72px);}

/* ---------- back link (project + legal pages) ---------- */
.back{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);
  transition:color .25s ease;
}
.back .arr{transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.back:hover{color:var(--ink);}
.back:hover .arr{transform:translateX(-4px);}

/* ---------- Google Play badge — compact pill (homepage card) ---------- */
.gp-badge{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--ink);color:#fff;border-radius:11px;
  padding:9px 18px 9px 15px;border:1px solid var(--ink);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  box-shadow:0 12px 26px -16px rgba(43,37,14,.7);
}
.gp-badge:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(43,37,14,.8);}
.gp-badge svg{width:23px;height:23px;flex:none;}
.gp-badge__txt{display:flex;flex-direction:column;line-height:1.12;text-align:left;}
.gp-badge__txt small{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.78;}
.gp-badge__txt span{font-size:16px;font-weight:500;letter-spacing:.01em;}

/* ---------- Google Play button — large (project page) ---------- */
.gp{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;border-radius:13px;
  padding:13px 22px 13px 18px;transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  box-shadow:0 14px 30px -16px rgba(43,37,14,.7);
}
.gp:hover{transform:translateY(-2px);box-shadow:0 20px 40px -18px rgba(43,37,14,.8);}
.gp svg{width:26px;height:26px;flex:none;}
.gp__txt{display:flex;flex-direction:column;line-height:1.15;text-align:left;}
.gp__txt small{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.72;}
.gp__txt span{font-size:18px;font-family:var(--display);font-weight:500;}

/* ---------- footer (identical across marketing + legal pages) ---------- */
footer{border-top:1px solid var(--hair-soft);}
.foot{
  max-width:var(--maxw);margin:0 auto;padding:38px clamp(22px,6vw,72px);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.foot__name{font-family:var(--serif);font-size:15px;color:var(--ink-soft);}
.foot__right{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--ink-faint);}
.foot__right a{color:var(--ink-soft);transition:color .25s ease;}
.foot__right a:hover{color:var(--ink);}

/* ---------- reveal on scroll (visible by default; only hidden when JS opts in) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);}
  .js [data-reveal].in{opacity:1;transform:none;}
}