/* Landing page sections. Structure adapted from okcredit.in (benchmark 2026-11-13).
   Shared base, header, footer and the privacy page live in styles.css. */
:root { --soft:#F4F7FB; --faint:#A9B4C4; --red:#C8372D; }



/* Hero: three verbs, phone shows the active one */
.hero .wrap { display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding-top:56px; padding-bottom:56px; }
.hero .product { color:var(--royal); margin-bottom:10px; }
.hero { padding-top:0; }
.hero h1 { font-size:22px; line-height:1.35; font-weight:600; letter-spacing:0; color:var(--ink); max-width:30ch; margin:0; }
.verbs { list-style:none; padding:0; margin:22px 0 26px; }
.verbs li { margin:0; }
.verbs button { all:unset; cursor:pointer; display:block; font-family:var(--display); font-weight:800; font-size:clamp(34px, 5.2vw, 56px); line-height:1.08; letter-spacing:-0.5px; color:var(--faint); transition:color .25s; }
.verbs button[aria-selected="true"] { color:var(--royal); }
.verbs button:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
.hero p.lede { color:var(--slate); max-width:46ch; margin:0 0 24px; }
.hero .call { margin-top:14px; font-size:14px; color:var(--slate); }
.phone { justify-self:center; text-align:center; }
.phone .frame { width:300px; aspect-ratio:640/1265; background:var(--ink); border-radius:40px; padding:10px; margin:0 auto; }
.phone .frame img { width:100%; height:100%; border-radius:31px; display:block; object-fit:cover; }
.switch { display:inline-flex; gap:4px; margin-top:16px; background:var(--soft); padding:4px; border-radius:999px; }
.switch button { all:unset; cursor:pointer; font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; color:var(--slate); }
.switch button[aria-selected="true"] { background:var(--royal); color:#fff; }
.phone .cap { font-size:12px; color:var(--slate); margin-top:8px; }

section.band { padding:64px 0; }
section.band.soft { background:var(--soft); }
.band h2, .final h2 { margin:0; max-width:24ch; }
h3 { font-family:var(--display); margin:0; }
.intro { color:var(--slate); max-width:56ch; margin:12px 0 0; }

/* For your work */
.made { display:grid; grid-template-columns:1fr 393px; gap:48px; align-items:end; }
.made img { width:393px; height:auto; display:block; margin-bottom:-64px; }
.trades { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:22px; padding:0; list-style:none; font-family:var(--display); font-weight:600; font-size:20px; color:var(--royal); }

/* Features: four rows, not cards */
.features { display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; margin-top:28px; }
.feature .art { height:212px; display:flex; align-items:flex-end; margin-bottom:18px; }
.feature .art img { display:block; height:auto; }
.feature h3 { font-size:18px; margin-bottom:4px; }
.feature p { margin:0; color:var(--slate); }

/* Get started: each step shows its screen */
.start { display:grid; grid-template-columns:1fr 200px; gap:40px; align-items:end; }
.start img { width:200px; height:auto; display:block; }
.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:36px; }
.step .shot { background:var(--white); border-radius:20px; height:330px; overflow:hidden; display:flex; justify-content:center; padding-top:22px; }
.step .shot img { width:210px; height:auto; border-radius:22px 22px 0 0; border:7px solid var(--ink); border-bottom:0; align-self:flex-start; }
.step h3 { font-size:18px; margin:16px 0 4px; }
.step p { margin:0; color:var(--slate); font-size:15px; }
.wa { align-self:center; width:85%; background:#E7DDD3; border-radius:14px; padding:14px; text-align:left; font-size:13px; }
.wa .msg { background:#fff; border-radius:10px 10px 10px 2px; padding:10px 12px; box-shadow:0 1px 0 rgba(0,0,0,.08); }
.wa .msg b { display:block; margin-bottom:4px; }
.wa .file { display:flex; gap:8px; align-items:center; background:var(--soft); border-radius:6px; padding:8px; margin-bottom:8px; font-weight:600; }
.wa .file span { background:var(--red); color:#fff; font-size:10px; padding:3px 4px; border-radius:3px; }
.wa .time { text-align:right; color:var(--slate); font-size:11px; margin-top:4px; }
.also { margin-top:28px; color:var(--slate); font-size:15px; }
.also b { color:var(--ink); }

/* Book vs app */
.versus { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:36px; border-radius:20px; overflow:hidden; }
.versus > div { padding:30px 32px; }
.versus .old { background:var(--soft); }
.versus .new { background:var(--royal); color:#fff; }
.versus h3 { font-size:19px; margin-bottom:16px; }
.versus .new h3 { color:#fff; }
.versus ul { list-style:none; padding:0; margin:0; }
.versus li { display:grid; grid-template-columns:24px 1fr; gap:10px; padding:10px 0; border-top:1px solid rgba(14,30,58,.1); }
.versus .new li { border-top-color:rgba(255,255,255,.18); }
.versus svg { width:20px; height:20px; margin-top:3px; fill:none; stroke-width:2.2; stroke-linecap:round; }
.versus .old svg { stroke:var(--red); }
.versus .new svg { stroke:var(--teal); }

/* FAQ */
details { border-bottom:1px solid var(--cool); padding:18px 0; max-width:760px; }
details:first-of-type { margin-top:24px; }
summary { cursor:pointer; font-family:var(--display); font-weight:600; font-size:18px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
summary::after { content:"+"; color:var(--royal); font-size:22px; line-height:1; }
details[open] summary::after { content:"–"; }
details p { color:var(--slate); margin:10px 0 0; max-width:62ch; }

.button { display:inline-flex; align-items:center; gap:10px; }
.button svg { width:20px; height:20px; flex:none; }
.final .button { background:var(--white); color:var(--royal); }
.final .button:hover { background:var(--cool); }
.final { background:var(--royal); color:#fff; padding:64px 0; }
.final h2 { color:#fff; }
.final p { color:#DCE6F7; max-width:56ch; margin:14px 0 26px; }
.final .call { color:#DCE6F7; font-size:14px; margin-top:14px; }
.final .call a { color:#fff; }

@media (max-width: 1040px) and (min-width: 821px) { .features { grid-template-columns:1fr 1fr; } }
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns:1fr; padding-top:32px; gap:28px; }
  .phone .frame { width:220px; }
  .hero .wrap { gap:0; }
  .hero .text { display:contents; }
  .hero .product, .hero h1, .verbs { order:0; }
  .verbs { margin:16px 0 20px; }
  .verbs button { font-size:30px; }
  .phone { order:1; margin-bottom:24px; }
  .hero p.lede, .hero .stores, .hero .call { order:2; }
  .hero .button { justify-self:start; }
  .features, .steps, .versus, .made, .start { grid-template-columns:1fr; }
  .made { gap:28px; } .made img { width:min(393px, 100%); margin-bottom:-48px; }
  .start { gap:20px; } .start img { order:-1; }
  .feature .art { height:auto; min-height:0; }
  .trades { font-size:18px; }
  section.band { padding:48px 0; }
  .versus > div { padding:24px 22px; }
}
@media (prefers-reduced-motion: reduce) { .verbs button { transition:none; } }

/* Store badges: official artwork, unaltered, both 48px tall. Google Play uses the Android package id;
   the App Store link needs the app's Apple ID. */
.stores { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.store { display:block; line-height:0; border-radius:8px; }
.store img { height:48px; width:auto; }
.store:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }