/* BaCare website: one stylesheet for English and Arabic.
   Colours and type follow Nasir's brand PDF (Oct 2026). The mark's own teal,
   #01a4a5, is about 3:1 on white, so it stays on the logo and never carries
   text or buttons; those use teal-700. */

:root {
  --teal-900: #003839;
  --teal-700: #006A6D;
  --teal-500: #009B9E;
  --teal-100: #E0F7F7;
  --teal-50: #F0FAFA;
  --ink: #0F172A;
  --ink-2: #334155;
  --ink-3: #475569;
  --placeholder: #64748B;
  --line: #E2E8F0;
  --paper: #FFFFFF;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --wrap: 1180px;
  --gutter: 24px;
}
[lang="ar"] { --font: 'Readex Pro', 'Plus Jakarta Sans', system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
p, figure { margin: 0; }
a { color: var(--teal-700); }
a:hover { color: var(--teal-900); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal-500); outline-offset: 2px;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--teal-900); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 10; }
.skip:focus { top: 8px; color: #fff; }

/* Header: one row at every width. On phones only the investors link and the
   language switch stay, because the hero already routes households and
   companies. */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--teal-700); font-size: 22px; font-weight: 600; }
.brand img { width: 34px; height: 37px; }
.nav { display: flex; align-items: center; gap: 4px 22px; font-size: 16px; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 10px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--teal-900); }
.nav a[aria-current="page"] { font-weight: 600; }
.nav .lang { color: var(--teal-700); font-weight: 600; border: 1px solid var(--teal-700); border-radius: 999px; padding: 7px 16px; }
@media (max-width: 720px) { .nav .wide { display: none; } }

/* Shared type */
.kicker { font-size: 15px; font-weight: 600; color: var(--teal-700); }
.lead { font-size: 20px; color: var(--ink-2); max-width: 640px; }
.section { padding: 88px 0; }
.section--mist { background: var(--teal-50); }
.section--deep { background: var(--teal-900); color: #fff; }
.section h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 720px; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: var(--radius-sm); background: var(--teal-700); color: #fff; font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: var(--teal-900); color: #fff; }
.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* Hero */
.hero { padding: 72px 0 88px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(38px, 5vw, 60px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.hero h1 .mark-word { white-space: nowrap; text-decoration: underline; text-decoration-color: var(--teal-500); text-decoration-thickness: 6px; text-underline-offset: 9px; text-decoration-skip-ink: none; }
.hero-shot { justify-self: center; }
/* Text-only hero (investors page). */
.hero--text .wrap { grid-template-columns: minmax(0, 1fr); }
.hero--text .hero-copy { max-width: 860px; }
.section-head--flush { margin-bottom: 0; }
.shot-caption--start { text-align: start; }
@media (max-width: 900px) {
  .hero { padding: 44px 0 64px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* Phone screenshots: real screens, a plain rounded frame, no fake device chrome. */
.phone { width: 100%; max-width: 300px; border-radius: 34px; border: 8px solid var(--ink); background: var(--ink); overflow: hidden; box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.45); }
.phone img { width: 100%; aspect-ratio: 600 / 1304; object-fit: cover; }
.shot-caption { margin-top: 14px; font-size: 14px; color: var(--ink-3); text-align: center; }

/* How it works: each step is its own screen. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 18px; }
.step .phone { max-width: 260px; }
.step h3 { font-size: 20px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; }
.step-num { color: var(--teal-700); font-weight: 700; }
.step p { color: var(--ink-2); }
/* On phones each step is a compact row: a small screen beside its text, so
   the three screens don't stack into a 2,000px column. */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 6px; align-items: start; }
  .step .phone { grid-row: 1 / span 2; max-width: 112px; border-width: 4px; border-radius: 18px; }
  .hero-shot .phone { max-width: 240px; }
}

/* Forms */
.form-card { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px -16px rgba(15, 23, 42, 0.18); }
.form-card h3 { font-size: 22px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 500; }
.field input, .field textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--placeholder); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.form-note { font-size: 14px; color: var(--ink-3); }
[hidden] { display: none !important; }

/* Waitlist block */
.waitlist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; align-items: start; margin-top: 64px; }
.waitlist-copy { display: flex; flex-direction: column; gap: 12px; }
.waitlist-copy h3 { font-size: 26px; font-weight: 700; }
@media (max-width: 900px) { .waitlist { grid-template-columns: 1fr; gap: 24px; } }

/* Companies (dark band) */
.companies .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: start; }
.companies .kicker { color: #7FE0E0; display: block; margin-bottom: 14px; }
.companies h2 { color: #fff; }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 18px; color: #E0F7F7; }
.ticks li { display: flex; gap: 12px; align-items: baseline; }
.ticks li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 2px; background: #7FE0E0; transform: translateY(-2px); }
.dashboard-shot { margin-top: 36px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); }
.dashboard-shot + .shot-caption { color: #B7E4E4; text-align: start; }
@media (max-width: 900px) { .companies .wrap { grid-template-columns: 1fr; gap: 40px; } }

/* Investor teaser on the home page */
.teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px; border-radius: var(--radius); background: var(--teal-50); }
.teaser h2 { font-size: 26px; }
.teaser p { color: var(--ink-2); margin-top: 6px; }

/* Investors page */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--teal-900); }
.ledger li { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ledger .status { font-weight: 700; font-size: 15px; }
.ledger .status--done { color: var(--teal-700); }
.ledger .status--now { color: #9A5B00; }
.ledger .status--next { color: var(--ink-3); }
.ledger p { font-size: 18px; color: var(--ink); }
.ledger small { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-3); }
@media (max-width: 640px) { .ledger li { grid-template-columns: 1fr; gap: 4px; } }
.shots { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.shots .phone { flex: 0 0 220px; scroll-snap-align: start; }
.shots-wide { margin-top: 32px; max-width: 900px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.model { font-size: 19px; color: var(--ink); max-width: 780px; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.person { padding: 24px 0; border-top: 2px solid var(--teal-900); display: flex; flex-direction: column; gap: 6px; }
.person strong { font-size: 20px; }
.person .role { color: var(--teal-700); font-weight: 600; }
.person p { color: var(--ink-2); }
.raise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: start; }
@media (max-width: 900px) { .raise { grid-template-columns: 1fr; gap: 32px; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 36px 0 44px; font-size: 15px; color: var(--ink-2); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; align-items: flex-start; }
.foot-brand { display: flex; flex-direction: column; gap: 6px; }
.foot-brand span:first-child { display: flex; align-items: center; gap: 10px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { padding: 6px 0; }

/* Arabic needs more line height than Latin: at 1.08 a shadda on one line sits
   under the word above it (مرخّصة under بيتك read as بيّتك). Last in the file so
   it wins over .hero h1 and .section h2, which have the same specificity. */
[lang="ar"] h1, [lang="ar"] h2 { line-height: 1.35; }