/* ─────────────────────────────────────────────────────────────────────────
   StarYaar site styles. Shared by index.html and the legal pages, so the
   whole domain reads as one product.

   Colours are lifted from lib/theme/app_colors.dart. Every size that affects
   layout is a clamp(), so the page scales continuously from a 320px phone to
   a wide desktop instead of jumping at three breakpoints.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --primary:#E23744;
  --primary-deep:#D81F3F;
  --primary-bright:#FF5566;
  --secondary:#F5A623;
  --success:#10B981;

  --bg:#FFFFFF;
  --surface-soft:#FBF7F6;
  --surface-tint:#FCE9EC;

  --text:#1F1D2E;
  --text-2:#5C5870;
  --text-3:#8E8A9F;
  --border:#EFEBF2;

  --grad:linear-gradient(135deg,var(--primary-bright) 0%,var(--primary) 45%,var(--primary-deep) 100%);
  --shadow-sm:0 4px 12px rgba(31,29,46,.05);
  --shadow-md:0 12px 28px rgba(31,29,46,.08);
  --shadow-lg:0 28px 60px rgba(31,29,46,.12);
  --shadow-red:0 10px 30px rgba(226,55,68,.30);

  --r:20px; --r-lg:28px;
  --gutter:clamp(20px,5vw,40px);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;
  /* A long unbroken word in any of the ten scripts must not force the page
     sideways on a narrow phone. */
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Outfit',sans-serif;line-height:1.15;margin:0;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.center{text-align:center}
.mt{margin-block:16px 14px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:clamp(11px,1.4vw,13px);font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--primary-deep);background:var(--surface-tint);
  padding:8px 16px;border-radius:999px;border:1px solid rgba(226,55,68,.18);
}
.h2{font-size:clamp(28px,5vw,44px);font-weight:800}
.lede{font-size:clamp(15px,2.1vw,19px);color:var(--text-2);max-width:62ch}
.center .lede{margin-inline:auto}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(15px,1.9vw,17px);
  padding:16px 30px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  min-height:52px; /* thumb-first: budget Androids, one-handed */
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-red)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(226,55,68,.38)}
.btn-ghost{background:#fff;color:var(--primary-deep);border:1.5px solid rgba(226,55,68,.25);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--primary)}
.btn-white{background:#fff;color:var(--primary-deep);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.btn-white:hover{transform:translateY(-2px)}
.btn-sm{padding:11px 22px;min-height:44px;font-size:15px}
.tag-free{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.34);
  padding:3px 9px;border-radius:999px;
}

/* ── header ───────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:800;font-size:20px;color:var(--primary-deep)}
.brand img{width:34px;height:34px;border-radius:9px}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.6vw,32px)}
.nav-links a{font-weight:600;font-size:15px;color:var(--text-2)}
.nav-links a:hover{color:var(--primary)}
/* Links go before the CTA does: the CTA is the reason the header exists. */
@media (max-width:860px){ .nav-links{display:none} }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:clamp(44px,7vw,86px) clamp(40px,7vw,80px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(680px 460px at 12% 8%,rgba(255,85,102,.13),transparent 62%),
    radial-gradient(620px 480px at 90% 22%,rgba(245,166,35,.12),transparent 60%),
    linear-gradient(180deg,#FFF8F9 0%,#FFFFFF 62%);
}
.hero-grid{display:grid;gap:clamp(34px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media (min-width:960px){ .hero-grid{grid-template-columns:1.02fr .98fr} }
.hero h1{font-size:clamp(32px,6vw,60px);font-weight:800;margin-block:20px 22px}
.hero h1 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.points{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.points li{display:flex;align-items:center;gap:12px;font-weight:600;
  font-size:clamp(14.5px,1.9vw,16.5px);color:var(--text)}
.pt-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-tint);color:var(--primary-deep);
}
.pt-ico svg{width:21px;height:21px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:540px){ .cta-row .btn{width:100%} }

/* ── vertical screenshot marquee ──────────────────────────────────────── */
.shots{
  position:relative;height:clamp(420px,62vh,620px);overflow:hidden;
  /* Feathered top and bottom so the loop seam is never visible. */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
}
.shots-track{display:flex;flex-direction:column;gap:20px;animation:scroll-y 42s linear infinite;will-change:transform}
.shots-set{display:flex;flex-direction:column;gap:20px}
.shots img{
  width:min(270px,72vw);margin-inline:auto;border-radius:22px;
  box-shadow:var(--shadow-lg);border:1px solid var(--border);background:#fff;
}
@keyframes scroll-y{ from{transform:translateY(0)} to{transform:translateY(-50%)} }

/* ── screenshots as install links ─────────────────────────────────────── */
/* Anything that looks like a screenshot is tappable and goes to the store.
   People tap a screenshot expecting to see more of the app; a dead image
   there is a lost install. */
.shot{display:block;border-radius:22px;transition:transform .2s ease}
.shot:hover{transform:translateY(-3px)}
.qc{cursor:pointer}
.qc:hover{border-color:rgba(226,55,68,.28);box-shadow:var(--shadow-md)}
.feature-media .shot img{margin-inline:auto}

/* ── hero shots on MOBILE: the same train as the rail ─────────────────── */
/* Desktop keeps the timed vertical marquee, which works because the column
   sits beside the copy and pauses on hover. On a phone a tall vertical strip
   is the wrong shape entirely: it eats the fold and competes with the page
   scroll. So below 960px it lies down and behaves exactly like the rail
   underneath it, a horizontal row that runs on its own and stops the instant
   a finger touches it. One motion pattern on the page, not two. */
@media (max-width:959px){
  .shots{
    height:auto;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;   /* never steal the browser's back-swipe */
    /* Full bleed. Safe here, unlike the rail: this parent is gutter-padded,
       so the negative margin only reclaims the gutter it already had. */
    margin-inline:calc(var(--gutter) * -1);
    /* Feather the sides now that the seam runs horizontally. */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    scrollbar-width:none;
  }
  .shots::-webkit-scrollbar{display:none}
  /* gap:0 on the track is load-bearing. The wrap happens at scrollWidth/2,
     so the repeat period has to be exactly one set. Any gap between the two
     sets makes half-the-track land short of the period and the row visibly
     jumps at every seam. The spacing at the join comes from the sets' own
     padding instead, which is why the rail is built the same way. */
  .shots-track{flex-direction:row;animation:none;gap:0;width:max-content;will-change:auto}
  .shots-set{flex-direction:row;gap:14px;padding-inline:7px}
  /* Both sets stay: the second is what the scroll wraps into, so the row
     never reaches an end. */
  .shot{flex:0 0 auto}
  .shots img{width:min(208px,55vw)}
}

/* ── sections ─────────────────────────────────────────────────────────── */
section{padding-block:clamp(54px,8vw,100px)}
.soft{background:var(--surface-soft)}
.sec-head{max-width:720px;margin-inline:auto;margin-bottom:clamp(32px,5vw,54px)}
.sec-head .h2{margin-block:16px 14px}

.grid{display:grid;gap:clamp(16px,2.4vw,26px)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(226,55,68,.22)}
.card h3{font-size:clamp(18px,2.3vw,21px);font-weight:700;margin-bottom:10px}
.card p{color:var(--text-2);font-size:clamp(14px,1.8vw,16px)}
.ico{
  width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
  background:var(--surface-tint);color:var(--primary-deep);margin-bottom:18px;
}
.ico svg{width:27px;height:27px}

/* ── horizontal prediction rail ───────────────────────────────────────── */
.rail{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.rail-track{display:flex;width:max-content;animation:scroll-x 46s linear infinite;will-change:transform}
.rail-set{display:flex;gap:clamp(14px,2vw,20px);padding-inline:clamp(7px,1vw,10px)}
.qc{
  flex:0 0 auto;width:clamp(238px,24vw,290px);
  display:flex;gap:14px;align-items:flex-start;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-sm);
}
.qc img{width:52px;height:52px;border-radius:15px;object-fit:cover;flex:0 0 auto}
.qc h3{font-size:16.5px;font-weight:700;margin-bottom:4px}
.qc p{font-size:13.5px;color:var(--text-2);line-height:1.5}
@keyframes scroll-x{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── prediction rail on MOBILE: a train a finger can stop ─────────────── */
/* This one should keep moving, because it is how the range of questions gets
   noticed at all. But the cards are install links now, and you cannot tap or
   swipe a CSS transform. So on mobile the track is a real scroll container
   that site.js nudges along, which means a touch stops it instantly and hands
   the same row over to the finger, already where the eye left it. */
@media (max-width:959px){
  .rail{
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    /* No negative margin: unlike .shots the rail's parent is the section
       itself, so it already runs edge to edge. Pulling it wider put the whole
       page into a 20px horizontal scroll. */
    scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  /* Both sets stay: the second is what the scroll wraps into, so the train
     never reaches an end. */
  .rail-track{animation:none;will-change:auto}
  .qc{width:min(272px,78vw)}
}

/* Touch feedback, since a tap on a card has to feel like it landed. */
@media (hover:none){
  .shot,.qc{-webkit-tap-highlight-color:transparent}
  .shot:active{transform:scale(.975)}
  .qc:active{transform:scale(.985);border-color:rgba(226,55,68,.3)}
  .shot,.qc{transition:transform .12s ease,border-color .12s ease}
}

/* Pause on hover, on keyboard focus, and while a finger is down. JS adds
   .paused on touch; hover alone never fires on a phone. */
[data-marquee]:hover .shots-track,
[data-marquee]:hover .rail-track,
[data-marquee]:focus-within .shots-track,
[data-marquee]:focus-within .rail-track,
[data-marquee].paused .shots-track,
[data-marquee].paused .rail-track{animation-play-state:paused}

/* ── compatibility feature ────────────────────────────────────────────── */
.feature{display:grid;gap:clamp(30px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){ .feature{grid-template-columns:1fr 1fr} }
.feature-media img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:min(400px,100%);margin-inline:auto}
.checks{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(14px,1.9vw,16px);color:var(--text-2)}
.tick{width:20px;height:20px;flex:0 0 auto;margin-top:3px}

/* ── languages ────────────────────────────────────────────────────────── */
.langs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.lang{background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:12px 22px;font-weight:700;font-size:clamp(14px,1.9vw,17px);
  box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease}
.lang:hover{transform:translateY(-3px);border-color:var(--primary)}

/* ── steps ────────────────────────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:clamp(18px,3vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.step::before{
  counter-increment:s;content:counter(s);
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--grad);color:#fff;font-family:'Outfit',sans-serif;font-weight:800;font-size:19px;
  box-shadow:var(--shadow-red);margin-bottom:16px;
}
.step h3{font-size:clamp(17px,2.2vw,20px);margin-bottom:8px}
.step p{color:var(--text-2);font-size:clamp(14px,1.8vw,16px)}

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:14px}
details{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow-sm)}
details[open]{border-color:rgba(226,55,68,.24)}
summary{cursor:pointer;list-style:none;font-family:'Outfit',sans-serif;font-weight:700;
  font-size:clamp(15px,2vw,18px);display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--primary);font-size:26px;font-weight:400;line-height:1;transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:14px;color:var(--text-2);font-size:clamp(14px,1.8vw,16px)}

/* ── final cta ────────────────────────────────────────────────────────── */
/* Layered gradient rather than a flat fill: the app's hero uses the same
   trick, a warm radial sitting over the red so the block has depth. */
.final{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:
    radial-gradient(560px 300px at 15% 12%,rgba(245,166,35,.42),transparent 62%),
    radial-gradient(620px 360px at 88% 88%,rgba(255,85,102,.55),transparent 64%),
    linear-gradient(135deg,#FF5566 0%,#E23744 46%,#B81433 100%);
}
.final .h2{color:#fff}
.final p{color:rgba(255,255,255,.94);margin-inline:auto;max-width:56ch;margin-top:14px;font-size:clamp(15px,2.1vw,18px)}
.final .btn{margin-top:30px}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{background:#17151F;color:#B9B5C9;padding-block:clamp(40px,6vw,64px) 28px}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
footer h4{font-family:'Outfit',sans-serif;color:#fff;font-size:15px;margin:0 0 14px;letter-spacing:.04em;text-transform:uppercase}
footer a{display:block;padding:6px 0;font-size:15px}
footer a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:11px;font-family:'Outfit',sans-serif;font-weight:800;font-size:21px;color:#fff;margin-bottom:12px}
/* No tile behind the mark. The logo is transparent PNG and the glyph itself
   is bright, so it reads cleanly straight on the dark footer; a white plate
   around it looked like a sticker rather than part of the page. */
.foot-brand img{width:36px;height:36px}
.foot-tag{font-size:15px;max-width:34ch}
.foot-bottom{border-top:1px solid rgba(255,255,255,.10);margin-top:36px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:14px}

/* ── legal / article pages ────────────────────────────────────────────── */
.page-hero{
  padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,44px);
  background:linear-gradient(180deg,#FFF8F9 0%,#FFFFFF 100%);
  border-bottom:1px solid var(--border);
}
.page-hero h1{font-size:clamp(30px,5.4vw,48px);font-weight:800;margin-block:16px 12px}
.page-hero .updated{color:var(--text-3);font-size:14px;font-weight:600}
.doc{max-width:800px;margin-inline:auto;padding-block:clamp(36px,5vw,64px)}
.doc h2{font-size:clamp(21px,3vw,27px);font-weight:800;margin-block:clamp(30px,4vw,44px) 12px}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:clamp(17px,2.3vw,20px);font-weight:700;margin-block:26px 8px}
.doc p,.doc li{color:var(--text-2);font-size:clamp(15px,1.9vw,17px);line-height:1.75}
.doc p{margin-block:12px}
.doc ul,.doc ol{padding-left:22px;margin-block:12px}
.doc li{margin-block:8px}
.doc a{color:var(--primary-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.doc strong{color:var(--text)}
.doc .callout{
  background:var(--surface-tint);border:1px solid rgba(226,55,68,.18);
  border-radius:var(--r);padding:clamp(18px,2.6vw,24px);margin-block:22px;
}
.doc .callout p{margin:0;color:var(--text)}
.back{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--primary-deep);font-size:15px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* With motion off the marquees would freeze mid-loop showing half a card,
     so they become ordinary scrollable rows instead. */
  .shots{height:auto;-webkit-mask-image:none;mask-image:none}
  .shots-track{animation:none}
  .shots-set:last-child{display:none}
  .rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .rail-track{animation:none}
  .rail-set:last-child{display:none}
}