/* ============================================================
   ROLLIT — INSTALL PAGE  (css/install.11a02d01.css)
   ------------------------------------------------------------
   The "put Rollit on your home screen" page: hero, a per-platform
   step-by-step, the perks grid and a FAQ.

   Only this page loads this file, so the entry points that lead HERE are
   styled where they live instead: the nav pill in css/style.8ffa0151.css (it's on
   every page), the popup nudge in css/social.33d65394.css.
   ============================================================ */

.ins { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

/* ---------------- hero ---------------- */

.ins-head { text-align: center; margin-bottom: 2rem; }

.ins-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; margin-bottom: 1.1rem;
  border-radius: 999px;
  background: rgba(232,201,107,.1);
  border: 0.5px solid rgba(232,201,107,.3);
  color: var(--gold);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .3px;
}
.ins-badge i { font-size: 14px; }

.ins-head h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem; letter-spacing: 1px; line-height: 1.05;
  margin: 0 0 .8rem;
}
.ins-sub {
  color: var(--muted);
  font-size: 14.5px; line-height: 1.7;
  max-width: 56ch; margin: 0 auto;
}

/* ---- the smart call-to-action (js/install.0a62b3b5.js fills it) ---- */

.ins-cta {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 1.5rem;
  margin-bottom: 3rem;
  border-radius: 16px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  text-align: center;
}
.ins-cta[hidden] { display: none; }          /* hidden wins over flex */

/* Installed already: the page becomes a receipt rather than a pitch. */
.ins-cta.is-done {
  background: rgba(62,212,154,.07);
  border-color: rgba(62,212,154,.28);
}
.ins-cta.is-done .ins-cta-icon { color: var(--toproll); }

.ins-cta-icon { font-size: 30px; color: var(--gold); line-height: 1; }
.ins-cta-title { font-size: 16px; font-weight: 600; }
.ins-cta-text { font-size: 13px; color: var(--muted); max-width: 46ch; line-height: 1.6; }

.ins-cta .btn { margin-top: 4px; padding: 10px 22px; font-size: 14px; }
.ins-cta .btn i { margin-right: 6px; }
.ins-cta .btn[hidden] { display: none; }     /* hidden wins over the btn's own display */

/* Shown only after "Open the app" has had its chance — see js/install.0a62b3b5.js. */
.ins-cta-hint { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 42ch; }
.ins-cta-hint[hidden] { display: none; }
.ins-cta-hint strong { color: var(--text); font-weight: 600; }

/* The steps, opened inside the card. The card centres its children, and a
   numbered list read from a centre line is miserable — so this block takes the
   full width back and left-aligns. */
.ins-cta-steps { width: 100%; margin-top: .5rem; text-align: left; }
.ins-cta-steps[hidden] { display: none; }
.ins-cta-steps-head {
  text-align: center; margin-bottom: .8rem;
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px;
}
/* The rows sit ON the card here, not on the page, so they need the lighter
   surface to stay visible against it. */
.ins-cta-steps .ins-list li { background: var(--surface); }

/* ---------------- shared headings ---------------- */

.ins h2 {
  font-size: 1.35rem; font-weight: 600;
  margin: 0 0 .35rem;
}
.ins-steps, .ins-perks, .ins-faq, .ins-send { margin-bottom: 3rem; }

.ins-lede { color: var(--muted); font-size: 13px; margin: 0 0 1.2rem; }
.ins-lede[hidden] { display: none; }

/* ---------------- platform tabs ---------------- */

.ins-tabs {
  display: flex; gap: 6px;
  margin: 1.2rem 0 1.4rem;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ins-tabs::-webkit-scrollbar { display: none; }

.ins-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 0.5px solid var(--border);
  background: var(--bg2);
  color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s, background .18s, border-color .18s;
}
.ins-tab i { font-size: 16px; }
.ins-tab:hover { color: var(--text); background: var(--surface); }
.ins-tab.active {
  color: #1a1000;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}
.ins-tab.active:hover { background: #f0d57a; color: #1a1000; }

/* ---------------- step lists ---------------- */

.ins-panel { display: none; }
.ins-panel.active { display: block; }
.ins-panel[hidden] { display: none; }        /* no-JS + a11y stay in step */

.ins-list { list-style: none; margin: 0; padding: 0; }

.ins-list li {
  display: flex; gap: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
}
.ins-list li:last-child { margin-bottom: 0; }

.ins-step {
  flex: 0 0 26px;
  height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(232,201,107,.12);
  border: 0.5px solid rgba(232,201,107,.3);
  color: var(--gold);
  font-size: 12.5px; font-weight: 600;
}
.ins-list strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; }
/* The step's sub-line. Scoped to the text wrapper on purpose: a bare
   `.ins-list span` also matches the numbered badge above — and out-specifies
   .ins-step — which stripped the badge's grid centring and left the digit grey
   and sitting low in its circle. */
.ins-list li > div > span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 3px; }

/* An icon sitting inside a sentence, at the size of the text around it —
   so "tap the ⋮ menu" shows the glyph the user is actually looking for. */
.ins-inline {
  display: inline-block;
  vertical-align: -2px;
  margin: 0 1px;
  padding: 1px 3px;
  border-radius: 4px;
  background: var(--surface);
  border: 0.5px solid var(--border2);
  color: var(--text);
  font-size: 13px;
}

/* ---------------- notes & warnings ---------------- */

.ins-note {
  display: flex; gap: 9px;
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  font-size: 12.5px; color: var(--muted); line-height: 1.6;
}
.ins-note i { color: var(--gold); font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.ins-warn {
  display: flex; gap: 10px;
  margin-bottom: 1rem;
  padding: .95rem 1.1rem;
  border-radius: 12px;
  background: rgba(232,168,62,.08);
  border: 0.5px solid rgba(232,168,62,.28);
  font-size: 13px; line-height: 1.6; color: var(--text);
}
.ins-warn i { color: var(--meh); font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.ins-warn strong { font-weight: 600; }

/* ---------------- perks ---------------- */

.ins-perk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 1.2rem;
}
.ins-perk {
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
}
.ins-perk > i { display: block; font-size: 20px; color: var(--gold); margin-bottom: .6rem; }
.ins-perk strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ins-perk span { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.ins-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(107,159,232,.13);
  border: 0.5px solid rgba(107,159,232,.35);
  color: var(--info);
  font-size: 10px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
  vertical-align: 1px;
}

/* ---------------- send to phone ---------------- */

.ins-send {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
}
.ins-send h2 { font-size: 1.05rem; }
.ins-send p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; max-width: 44ch; }

.ins-copy { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ins-copy code {
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 0.5px solid var(--border2);
  color: var(--gold);
  font-size: 14px; font-weight: 600;
  letter-spacing: .3px;
}
.ins-copy .btn i { margin-right: 5px; }

/* ---------------- faq ---------------- */

.ins-faq details {
  border-radius: 12px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  margin-top: 8px;
  overflow: hidden;
}
.ins-faq summary {
  padding: .95rem 1.2rem;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: color .18s;
}
.ins-faq summary::-webkit-details-marker { display: none; }
/* Drawn rather than an icon-font glyph: this is the one place the page would
   depend on a specific codepoint in a CDN font, and a wrong one shows a
   random symbol instead of a chevron. Two borders can't be wrong. */
.ins-faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin-right: 4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.ins-faq details[open] summary::after { transform: rotate(-135deg); }
.ins-faq summary:hover { color: var(--gold); }
.ins-faq details p {
  margin: 0;
  padding: 0 1.2rem 1.1rem;
  font-size: 13px; color: var(--muted); line-height: 1.7;
}
.ins-faq details p strong { color: var(--text); font-weight: 600; }

.ins-foot {
  text-align: center;
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
  margin: 0;
}
.ins-foot a { color: var(--gold); }

/* ---------------- phone ---------------- */

@media (max-width: 640px) {
  .ins { padding: 1.75rem 1.1rem 3rem; }
  .ins-head h1 { font-size: 2.3rem; }
  .ins-sub { font-size: 13.5px; }
  .ins h2 { font-size: 1.15rem; }

  .ins-steps, .ins-perks, .ins-faq, .ins-send { margin-bottom: 2.2rem; }

  .ins-list li { padding: .9rem 1rem; gap: 11px; }
  .ins-list strong { font-size: 13.5px; }

  /* Stack, and let the address own a full row — it's the thing being read
     off the screen onto another device. */
  .ins-send { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; }
  .ins-send p { max-width: none; }
  .ins-copy { flex-direction: column; align-items: stretch; }
  .ins-copy code { text-align: center; }
  .ins-copy .btn { justify-content: center; }
}