/* GrabAm home page (2026-10-19 rebuild). Only index.html loads this file.
   Tokens, buttons, FAQ, fees, CTA and footer come from grabam.css. */

/* ---- iPhone frame ---------------------------------------------------- */
/* --w is the screen width; the screen is 390x844 like an iPhone 14/15:
   a 47pt status bar over a 390x797 app screenshot. */
.iphone{--w:290px;position:relative;width:calc(var(--w) + var(--w)*.086);flex:none;
  padding:calc(var(--w)*.043);border-radius:calc(var(--w)*.178);
  background:linear-gradient(150deg,#46464c 0%,#1d1d21 30%,#2b2b30 70%,#4a4a50 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 5px #0b0b0d,
    0 40px 70px -30px rgba(10,10,20,.45),0 12px 24px -12px rgba(10,10,20,.25)}
.iphone::before,.iphone::after{content:"";position:absolute;width:3px;background:#2a2a2f;border-radius:2px}
/* action button + volume up/down on the left, side button on the right */
.iphone::before{left:-2px;top:17%;height:5.5%;
  box-shadow:0 calc(var(--w)*.2) 0 #2a2a2f,0 calc(var(--w)*.37) 0 #2a2a2f}
.iphone::after{right:-2px;top:25%;height:13%}
.iphone__screen{position:relative;overflow:hidden;border-radius:calc(var(--w)*.135);
  background:#F7F7F9;color:#111118;aspect-ratio:390/844}
.iphone__status{position:relative;height:calc(var(--w)*47/390);display:flex;align-items:center;
  justify-content:space-between;padding:0 calc(var(--w)*.085) 0 calc(var(--w)*.1);
  font:600 calc(var(--w)*.04)/1 -apple-system,BlinkMacSystemFont,'Inter',sans-serif;letter-spacing:-.01em}
.iphone__island{position:absolute;left:50%;top:calc(var(--w)*.028);transform:translateX(-50%);
  width:calc(var(--w)*.32);height:calc(var(--w)*.088);border-radius:999px;background:#000}
.iphone__icons{display:flex;align-items:center;gap:calc(var(--w)*.014)}
.iphone__icons svg{height:calc(var(--w)*.03);width:auto;display:block}
.iphone__screen img{display:block;width:100%;height:auto}
.iphone .shot-d{display:none}
[data-theme="dark"] .iphone__screen{background:#0A0A0F;color:#fff}
[data-theme="dark"] .iphone .shot-l{display:none}
[data-theme="dark"] .iphone .shot-d{display:block}
.shot-note{font-size:.8125rem;color:var(--faint);text-align:center;margin-top:14px}

/* ---- Hero ------------------------------------------------------------ */
.h-hero{padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(48px,6vw,88px);overflow:hidden}
.h-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.h-hero .display{margin-top:16px}
.h-hero .lead{margin-top:18px;max-width:560px}
.h-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.h-ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;font-size:.9375rem;color:var(--fg-2,var(--muted))}
.h-ticks li{display:flex;align-items:center;gap:8px;list-style:none}
.h-ticks svg{flex:none;color:var(--ok)}
.h-hero__device{display:flex;flex-direction:column;align-items:center}
.h-hero__device .iphone{--w:300px}
@media(max-width:960px){
  .h-hero__grid{grid-template-columns:1fr}
  .h-hero__device{margin-top:8px}
  .h-hero__device .iphone{--w:min(280px,70vw)}
}

/* ---- How it works: three steps ---------------------------------------- */
.h-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);list-style:none}
.h-steps li{display:flex;gap:16px}
.h-steps .n{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--fg);color:var(--bg);font-weight:700;font-size:.9375rem}
.h-steps b{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.h-steps p{margin-top:4px;color:var(--muted);line-height:1.55;font-size:.9375rem}
@media(max-width:860px){.h-steps{grid-template-columns:1fr;gap:20px}}

/* ---- Four ways in ----------------------------------------------------- */
.h-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.h-way{position:relative;display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface)}
.h-way__t{display:flex;align-items:center;gap:12px;font-size:1.125rem;font-weight:600;letter-spacing:-.012em}
.h-way__ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);color:var(--fg)}
.h-way p{margin-top:10px;color:var(--muted);line-height:1.55;font-size:.9375rem;flex:1}
.h-way a{margin-top:14px;font-weight:600;font-size:.9375rem;color:var(--fg);display:inline-flex;align-items:center;gap:6px}
.h-way a:hover{color:var(--lime-ink)}
.h-anchor{position:absolute;top:-90px}
@media(max-width:1020px){.h-ways{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.h-ways{grid-template-columns:1fr}}

/* ---- Where your money sits -------------------------------------------- */
.h-money{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);align-items:center}
.h-flow{list-style:none;margin-top:6px}
.h-flow li{position:relative;display:flex;gap:16px;padding-bottom:22px}
.h-flow li::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--line)}
.h-flow li:last-child::before{display:none}
.h-flow .dot{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line-2,var(--line));background:var(--bg-alt);font-weight:700;font-size:.875rem;position:relative}
.h-flow li:first-child .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.h-flow b{font-size:1.0625rem;font-weight:600}
.h-flow .who{margin-left:8px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.h-flow p{margin-top:3px;color:var(--muted);line-height:1.55;font-size:.9375rem}
.h-dispute{margin-top:6px;padding:18px 20px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.h-dispute b{font-size:1rem;font-weight:600}
.h-dispute p{margin-top:6px;color:var(--muted);line-height:1.55;font-size:.9375rem}
.h-dispute a{color:var(--lime-ink);text-decoration:underline;text-underline-offset:2px}
.h-money .iphone{--w:270px}
@media(max-width:900px){.h-money{grid-template-columns:1fr}.h-money__device{display:none}}

/* ---- Fees and FAQ tweaks ---------------------------------------------- */
.h-limits{margin-top:18px;color:var(--muted);font-size:.9375rem;line-height:1.6;max-width:720px}
/* The app dropped the pixel font for prices (history 202-213); match it here. */
.fee__row .num{font-family:var(--font-ui);font-weight:700;letter-spacing:-.02em}
/* 320px phones: the nav was 23px too wide (it was on the old page too). */
@media(max-width:359px){.nav__actions{gap:4px}.nav__actions .btn--sm{padding-inline:10px}.brand{gap:6px}}