/* ============================================================
   Hisab-Kitab — website styles
   ------------------------------------------------------------
   The page markup in index.html is the imported design, kept
   verbatim with its inline styles (desktop = pixel-exact).
   Everything that inline styles can't express lives here:
     1. Base / reset
     2. Hover states (were `style-hover` in the design)
     3. Responsive layer  <-- extend this for mobile designs
   Because the design uses inline styles, the responsive rules
   target elements by their inline-style signature and use
   !important to override. When the dedicated mobile designs
   arrive, adjust/replace section 3 only.
   ============================================================ */

/* ---------- 1. Base ---------- */
html, body { margin: 0; padding: 0; }
body {
  background: #f6f4ef;
  font-family: 'Mulish', system-ui, sans-serif;
  color: #2b2724;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Keep anchor targets clear of the sticky nav.
   #features/#pricing/#faq already have generous top padding, so they
   need no offset; only the flush sections (full-bleed band, dark card)
   do — otherwise their top edge lands under the nav. */
#gst { scroll-margin-top: 62px; }
#download { scroll-margin-top: 84px; }
a {
  color: #2f6f4f;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
a:hover { color: #245a40; }
img, svg { max-width: 100%; }

/* ---------- Phone mockups (rendered images) ----------
   These four app screens are baked PNGs so they never reflow
   or break at different screen sizes. The frame's rounded
   corners are already transparent in the PNG; the drop shadow
   is re-added here so it scales with the image. */
.phone-shot { display: block; height: auto; }
.phone-hero {
  width: 300px;
  border-radius: 42px;
  box-shadow: 0 30px 60px rgba(43,39,36,.22);
}
.phone-feature {
  width: 300px;          /* same frame as the hero phone */
  border-radius: 42px;
  box-shadow: 0 20px 44px rgba(43,39,36,.2);
}
/* Never let a phone overflow its column on small screens */
@media (max-width: 380px) {
  .phone-hero, .phone-feature { width: 100%; }
}

/* ---------- 2. Hover states (from the design's style-hover) ---------- */
[data-hv="1"]:hover  { color: #2f6f4f; }
[data-hv="2"]:hover  { color: #2f6f4f; }
[data-hv="3"]:hover  { color: #2f6f4f; }
[data-hv="4"]:hover  { color: #2f6f4f; }
[data-hv="5"]:hover  { background: #245a40; color: #fff; }
[data-hv="6"]:hover  { background: #245a40; color: #fff; }
[data-hv="7"]:hover  { border-color: #2f6f4f; color: #2f6f4f; }
[data-hv="8"]:hover  { background: #e7f0ea; color: #22503a; }
[data-hv="9"]:hover  { border-color: #2f6f4f; color: #2f6f4f; }
[data-hv="10"]:hover { background: #3a8560; color: #fff; }
[data-hv="11"]:hover { background: #fff; color: #2b2724; }
[data-hv="12"]:hover { background: rgba(246,244,239,.2); color: #fff; }

/* ---------- Mobile-site hover states (from the mobile design) ---------- */
[data-hv="13"]:hover { background: #dceae2; }
[data-hv="14"]:hover { background: #245a40; color: #fff; }

/* ============================================================
   3. Desktop / mobile switch
   Two purpose-built layouts live in one page:
     .site-desktop  — the wide landing page
     .site-mobile   — the dedicated phone layout (≤ 640px)
   Only one is shown at a time.
   ============================================================ */
.site-mobile { display: none; }

@media (max-width: 640px) {
  .site-desktop { display: none; }
  .site-mobile  { display: block; }
  body { background: #e9e6df; }   /* frames the centered 430px mobile column */
}

/* ============================================================
   4. Desktop responsive layer
   The desktop design is built for a 1160px column; below that
   its multi-column grids collapse and the hero type scales down.
   Every rule is scoped to .site-desktop so it can never touch
   the mobile markup (which reuses some inline-style signatures
   like repeat(4,1fr) and font-size:40px).
   ============================================================ */

/* ---- Tablet: KEEP the two-column split, just tighten gaps & scale type ----
   The hero and the feature splits stay side-by-side all the way down to the
   mobile handoff at 640px (below which .site-mobile takes over). Phone images
   shrink to fit via `img{max-width:100%}`, so they never overflow their
   column — no need to stack. */
@media (max-width: 960px) {
  .site-desktop [style*="grid-template-columns:1.05fr .95fr"] { gap: 36px !important; }
  .site-desktop [style*="grid-template-columns:1fr 1fr;gap:64px"] { gap: 40px !important; }
  .site-desktop [style*="grid-template-columns:1fr 1fr;gap:56px"] { gap: 36px !important; }
  .site-desktop [style*="grid-template-columns:1.2fr .8fr"] { gap: 28px !important; }
  .site-desktop [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .site-desktop [style*="font-size:60px"] { font-size: 46px !important; }
}

/* ---- Narrow (down to the 640px mobile handoff): still side-by-side, but
   scale the big headings and tighten gaps so nothing feels cramped. The
   feature *list* grids (repeat 2/3/4) still stack — those are card rows, not
   the main image/text split. */
@media (max-width: 760px) {
  .site-desktop [style*="grid-template-columns:1.05fr .95fr"] { gap: 22px !important; padding-top: 48px !important; }
  .site-desktop [style*="grid-template-columns:1fr 1fr;gap:64px"] { gap: 26px !important; }
  .site-desktop [style*="grid-template-columns:1fr 1fr;gap:56px"] { gap: 26px !important; }
  .site-desktop [style*="grid-template-columns:1.2fr .8fr"] { gap: 22px !important; }
  .site-desktop [style*="font-size:60px"] { font-size: 34px !important; }
  .site-desktop [style*="font-size:40px"] { font-size: 30px !important; }
  .site-desktop [style*="font-size:38px"] { font-size: 28px !important; }
  .site-desktop [style*="gap:28px;font-size:14px;font-weight:700;color:#5a534b"] { display: none !important; }
  .site-desktop [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .site-desktop [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  .site-desktop [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 22px 24px !important; }
  .site-desktop [style*="padding:64px 56px"] { padding: 36px 24px !important; }
  .site-desktop [style*="padding:80px 28px"] { padding: 52px 22px !important; }
}