/* Kalku marketing site.
 *
 * The app's dark-only palette, Space Grotesk, the oklch accent family. Shared
 * by every page the build produces — the landing pages, /contact, and the two
 * legal pages (docs/privacy-policy*.html, docs/terms-and-conditions*.html,
 * which are content-only fragments wrapped in this site's own head()/nav()/
 * footer() by build.mjs, not standalone documents with their own styling).
 *
 * Written with logical properties throughout (inline-start/end, margin-inline)
 * so the Arabic page mirrors from `dir="rtl"` alone, with no per-locale CSS.
 */

:root {
  --bg: #0a0a0d;
  --sheet: #131319;
  --ink: #ffffff;
  --ink-strong: rgba(255, 255, 255, .75);
  --ink-soft: rgba(255, 255, 255, .70);
  --ink-muted: rgba(255, 255, 255, .50);
  --ink-faint: rgba(255, 255, 255, .40);
  --ink-footnote: rgba(255, 255, 255, .26);
  --hairline: rgba(255, 255, 255, .07);
  --outline: rgba(255, 255, 255, .12);
  --sheet-border: rgba(255, 255, 255, .10);
  --highlight: rgba(255, 255, 255, .05);
  --up: oklch(0.82 0.18 152);
  --down: oklch(0.72 0.20 22);
  --brand: oklch(0.80 0.19 150);
  --radius: 20px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--up); text-decoration: none; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--sheet); color: var(--ink); padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip:focus { inset-inline-start: 0; }

/* --- nav ------------------------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 10, 13, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 12px 20px; display: flex; align-items: center; gap: 20px;
}
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: .01em;
}
.mark img { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--sheet-border); }

.nav-links { display: flex; gap: 22px; margin-inline-start: auto; font-size: 14.5px; }
.nav-links a { color: var(--ink-muted); }
.nav-links a:hover { color: var(--ink); }

.langs { display: flex; gap: 2px; background: var(--highlight); border: 1px solid var(--outline); border-radius: 999px; padding: 3px; }
.langs .lang {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-faint); padding: 4px 9px; border-radius: 999px;
}
.langs .lang:hover { color: var(--ink); }
.langs .lang.current { background: var(--ink); color: var(--bg); }

@media (max-width: 780px) {
  .nav-links { display: none; }
  .langs { margin-inline-start: auto; }
}

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

.hero { position: relative; padding: 64px 20px 24px; }
.hero::before {
  content: ""; position: absolute; inset-inline: 0; top: -140px; height: 720px; z-index: -1;
  background: radial-gradient(64% 52% at 50% 2%, oklch(0.45 0.14 152 / 0.55) 0%, rgba(10, 10, 13, 0) 66%);
  pointer-events: none;
}
.hero-inner {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero { padding-top: 84px; }
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}

.eyebrow {
  margin: 0 0 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
}
.hero h1 {
  margin: 0 0 18px; color: var(--ink); font-weight: 700;
  font-size: clamp(38px, 7vw, 62px); line-height: 1.04; letter-spacing: -0.03em;
}
.lede { margin: 0 0 30px; font-size: clamp(16px, 2.2vw, 18.5px); color: var(--ink-muted); max-width: 34em; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 18px; border-radius: 14px;
  background: var(--highlight); border: 1px solid var(--outline);
  color: var(--ink-strong); transition: background-color .15s, border-color .15s;
}
.store:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); }
.store svg { flex: none; }
.store-text { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.store-text small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-footnote); }
.store-text strong { font-size: 16px; font-weight: 600; color: var(--ink-strong); }

.hero-shot { position: relative; display: flex; justify-content: center; }
.hero-shot .shot { width: min(100%, 420px); }
.hero-shot .glow {
  position: absolute; inset: 12% -6% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.42 0.13 152 / 0.35), transparent);
  filter: blur(30px);
}
.hero-caption {
  max-width: 720px; margin: 44px auto 0; padding-inline: 20px;
  text-align: center; font-size: 15.5px; color: var(--ink-faint);
}
.hero-caption strong { color: var(--ink-strong); font-weight: 600; }

/* --- sections ------------------------------------------------------------- */

.section { max-width: var(--wrap); margin-inline: auto; padding: 72px 20px 0; }
.section-head { max-width: 620px; margin-bottom: 12px; }
.section-head h2 {
  margin: 0 0 10px; color: var(--ink); font-weight: 700;
  font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; letter-spacing: -0.025em;
}
.section-head p { margin: 0; color: var(--ink-muted); font-size: 17px; }

.tag {
  display: inline-block; margin-bottom: 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--bg); background: var(--up);
  padding: 3px 9px; border-radius: 999px;
}

/* --- spotlight rows ------------------------------------------------------- */

.spots { display: flex; flex-direction: column; gap: 8px; }
.spot {
  display: grid; gap: 24px; align-items: center;
  grid-template-columns: 1fr; padding: 40px 0;
  border-bottom: 1px solid var(--hairline);
}
.spot:last-child { border-bottom: 0; }
.spot h3 {
  margin: 0 0 12px; color: var(--ink); font-weight: 700;
  font-size: clamp(23px, 3.2vw, 31px); line-height: 1.15; letter-spacing: -0.02em;
}
.spot p { margin: 0; font-size: 17px; color: var(--ink-muted); max-width: 32em; }
/* Whole device, uncropped — same as the card grid below. A fixed crop here
   used to assume the bottom third of every mock was empty list space to fade
   into; several (the calculator's keypad, Real Cost's breakdown sheet) fill
   almost the full 874px frame instead, so the crop cut the phone off
   mid-content and made it look squat rather than like a slim phone. */
.spot-shot { display: flex; justify-content: center; }
.spot-shot .shot { width: min(100%, 330px); }

@media (min-width: 860px) {
  .spot { grid-template-columns: 1fr 1fr; gap: 56px; padding: 56px 0; }
  .spot .spot-copy { order: 1; }
  .spot .spot-shot { order: 2; }
  .spot.flip .spot-copy { order: 2; }
  .spot.flip .spot-shot { order: 1; }
}

/* --- card grid ------------------------------------------------------------ */

.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  background: var(--sheet); border: 1px solid var(--sheet-border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
/* Whole device, uncropped. These six features are all bottom-sheets, which sit
   in the lower half of the frame — cropping to the top of the screen the way
   the spotlights do would show the dimmed converter behind them instead. */
.card-shot { display: flex; justify-content: center; padding: 24px 0 4px; }
.card-shot .shot { width: 216px; max-width: none; }
.card-copy { padding: 14px 22px 26px; }
.card-copy h3 {
  margin: 0 0 8px; color: var(--ink); font-weight: 600;
  font-size: 19px; line-height: 1.25; letter-spacing: -0.015em;
}
.card-copy p { margin: 0; font-size: 15px; color: var(--ink-muted); }

/* --- panels (Pro, privacy) ------------------------------------------------ */

.panel {
  background: var(--sheet); border: 1px solid var(--sheet-border);
  border-radius: var(--radius); padding: 34px 32px;
}
.panel.plain { background: transparent; border: 0; padding: 34px 0; }
.panel-title {
  margin: 0 0 10px; color: var(--ink); font-weight: 700;
  font-size: clamp(26px, 4vw, 36px); line-height: 1.12; letter-spacing: -0.025em;
}
.panel-lede { margin: 0 0 22px; font-size: 17px; color: var(--ink-muted); max-width: 46em; }
.panel-note { margin: 22px 0 0; font-size: 15px; color: var(--ink-faint); max-width: 46em; }

.checks {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px 26px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.checks li { position: relative; padding-inline-start: 26px; color: var(--ink-strong); font-size: 15.5px; }
.checks li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--up);
}
.more { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.more:hover { border-bottom-color: var(--up); }

.contact-email a {
  display: inline-block; margin-top: 4px;
  padding: 14px 22px; border-radius: 14px;
  background: var(--sheet); border: 1px solid var(--sheet-border);
  color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.contact-email a:hover { border-color: var(--up); }

/* --- footer --------------------------------------------------------------- */

.foot { margin-top: 84px; border-top: 1px solid var(--hairline); }
.foot-inner { max-width: var(--wrap); margin-inline: auto; padding: 34px 20px 56px; }
.foot-links, .foot-langs { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links { font-size: 15px; }
.foot-langs { margin-top: 14px; font-size: 14px; }
.foot-langs a { color: var(--ink-muted); }
.foot-langs a:hover { color: var(--ink); }
.foot-legal { margin: 22px 0 0; font-size: 13px; color: var(--ink-footnote); }
.foot-note { margin: 4px 0 0; font-size: 13px; color: var(--ink-footnote); }

@media (max-width: 560px) {
  .hero { padding-top: 44px; }
  .section { padding-top: 56px; }
  .panel { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- legal pages (privacy, terms) ------------------------------------------ */
/* Narrower reading column than the landing page's .section, and its own set of
   content primitives (card sections, callouts, pill badges, tables) scoped
   under .legal so they can't leak onto or collide with the landing page. */

.legal { max-width: 760px; margin-inline: auto; padding: 56px 20px 96px; }

.legal h1 {
  margin: 0 0 12px; color: var(--ink); font-weight: 700;
  font-size: clamp(30px, 6vw, 42px); line-height: 1.12; letter-spacing: -0.02em;
}
.legal .sub { margin: 0; font-size: 15px; color: var(--ink-muted); }
.legal .meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.legal .pill {
  font-size: 12.5px; font-weight: 500; color: var(--ink-strong);
  background: var(--highlight); border: 1px solid var(--outline);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}

.legal section {
  background: var(--sheet); border: 1px solid var(--sheet-border);
  border-radius: var(--radius); padding: 26px 26px 8px; margin: 24px 0;
}
.legal section.plain { background: transparent; border: 0; padding: 8px 2px; margin: 32px 0 0; }
.legal h2 {
  margin: 0 0 16px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.legal h3 { margin: 22px 0 8px; font-size: 17px; font-weight: 600; color: var(--ink); }
.legal h3:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 16px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.legal a:hover { border-bottom-color: var(--up); }

.legal ul { margin: 0 0 16px; padding-inline-start: 0; list-style: none; }
.legal li { position: relative; padding-inline-start: 20px; margin-bottom: 10px; }
.legal li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-footnote);
}
.legal li.yes::before { background: var(--up); }
.legal li.no::before { background: var(--down); }

.legal table { width: 100%; border-collapse: collapse; margin: 4px 0 20px; font-size: 14.5px; }
.legal th {
  text-align: start; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-block: 0 10px; padding-inline: 0 10px; border-bottom: 1px solid var(--hairline);
}
.legal td {
  padding-block: 12px; padding-inline: 0 10px; border-bottom: 1px solid var(--hairline);
  vertical-align: top; color: var(--ink-soft);
}
.legal td:first-child { color: var(--ink); font-weight: 500; width: 38%; }
.legal tr:last-child td { border-bottom: 0; }

.legal .callout {
  margin: 0 0 20px; padding: 16px 18px; border-radius: 14px;
  background: var(--highlight); border: 1px solid var(--outline);
  font-size: 15px; color: var(--ink-strong);
}
.legal .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 560px) {
  .legal { padding: 40px 16px 72px; }
  .legal section { padding: 20px 18px 4px; border-radius: 16px; }
  .legal td:first-child { width: auto; }
}