/* Jiran public site. Same tokens and Rubik as the admin console and the resident app (admin_console/src/styles/tokens.src.css).
   Logical properties only (inline-start/end), so the Arabic right-to-left layout needs no separate rules. */

@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/assets/fonts/rubik-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/assets/fonts/rubik-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 93%; descent-override: 25%; line-gap-override: 0%; }

:root {
  --bg: #fbf6ee; --bg-sunken: #f4ecdf; --surface: #ffffff; --surface-tint: #fff3dc;
  --ink: #16212b; --ink-muted: #566170; --outline: #e8dece; --outline-strong: #8a8374;
  --action: #f5a524; --action-pressed: #e0920f; --on-action: #16212b; --action-container: #fde9c4; --action-ink: #8a4f00;
  --navy: #19242f; --navy-raised: #26364a; --on-navy: #f6f0e6; --on-navy-muted: #b4bcc5; --on-navy-accent: #ffc25c;
  --font: 'Rubik', 'Rubik Fallback', system-ui, 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.7; }
img, svg { display: block; max-width: 100%; }
a { color: var(--action-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.on-navy :focus-visible { outline-color: var(--on-navy-accent); }

/* one language at a time; the markup carries both, <html lang> picks (assets/site.js) */
html[lang='ar'] [data-l='en'], html[lang='en'] [data-l='ar'] { display: none !important; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--r-sm); z-index: 10; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; }
.brand img { width: 38px; height: 38px; }
.lang { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; padding-inline: 18px; border-radius: var(--r-pill); border: 1.5px solid var(--outline-strong); background: transparent; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
.lang:hover { background: var(--bg-sunken); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding-inline: 26px; border-radius: var(--r-pill); font: inherit; font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s, transform .1s; }
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-pressed); color: var(--on-action); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { border-color: rgb(246 240 230 / .35); color: var(--on-navy); }
.btn-ghost:hover { border-color: var(--on-navy); color: var(--on-navy); background: rgb(246 240 230 / .08); }
.btn-soon { background: rgb(246 240 230 / .1); color: var(--on-navy); border-color: rgb(246 240 230 / .22); cursor: default; }
.btn svg { width: 22px; height: 22px; flex: none; }
/* store badge: small caption over the store name (the placeholder until the listing is live, then a real link) */
.btn-store { justify-content: flex-start; min-height: 58px; padding-inline: 20px 26px; gap: 12px; text-align: start; line-height: 1.2; }
.btn-store svg { width: 26px; height: 26px; }
.btn-store small { display: block; font-size: .75rem; font-weight: 400; opacity: .8; }
.btn-store strong { display: block; font-size: 1.0625rem; font-weight: 600; }

/* hero */
.hero { background: var(--navy); color: var(--on-navy); border-radius: var(--r-xl); padding: 40px 24px; display: grid; gap: 32px; overflow: hidden; }
.hero h1 { margin: 0 0 16px; font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.hero h1 em { font-style: normal; color: var(--on-navy-accent); }
.hero p { margin: 0; color: var(--on-navy-muted); font-size: 1.125rem; max-width: 34em; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .note { margin-top: 14px; font-size: .875rem; color: var(--on-navy-muted); }
.visual { position: relative; width: min(100%, 380px); margin-inline: auto; aspect-ratio: 1; }
.visual svg { width: 100%; height: auto; }
.chip { position: absolute; inset-inline-start: 2%; bottom: 8%; display: inline-flex; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); padding: 10px 16px 10px 12px; border-radius: var(--r-pill); font-size: .875rem; font-weight: 500; box-shadow: 0 8px 24px rgb(0 0 0 / .28); }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px var(--action-container); }
@media (min-width: 860px) { .hero { grid-template-columns: 1.15fr .85fr; align-items: center; padding: 64px 56px; gap: 48px; } }
@media (prefers-reduced-motion: no-preference) {
  .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.8s ease-out infinite; }
  @keyframes pulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
}

/* sections */
.section { padding-block: 64px 8px; }
.section h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; }
.section .lede { margin: 0 0 32px; color: var(--ink-muted); max-width: 40em; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--r-lg); padding: 24px; }
.card h3 { margin: 16px 0 6px; font-size: 1.125rem; line-height: 1.4; }
.card p { margin: 0; color: var(--ink-muted); font-size: .9375rem; line-height: 1.65; }
.ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--action-container); color: var(--action-ink); }
.ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.steps li { counter-increment: step; background: var(--bg-sunken); border-radius: var(--r-lg); padding: 24px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--on-navy-accent); font-weight: 700; margin-bottom: 14px; }
.steps h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.steps p { margin: 0; color: var(--ink-muted); font-size: .9375rem; }

.band { margin-block: 64px; background: var(--surface-tint); border: 1px solid var(--action-container); border-radius: var(--r-xl); padding: 32px 24px; display: grid; gap: 20px; align-items: center; }
.band h2 { margin: 0 0 6px; font-size: 1.5rem; }
.band p { margin: 0; color: var(--ink-muted); max-width: 38em; }
@media (min-width: 760px) { .band { grid-template-columns: 1fr auto; padding: 40px 48px; } }
.band .btn-primary { justify-self: start; }

/*.principle { margin: 40px 0 0; padding: 16px 20px; border-inline-start: 4px solid var(--action); background: var(--surface); border-radius: var(--r-sm); color: var(--ink-muted); }*/

/* footer */
footer { border-top: 1px solid var(--outline); margin-top: 24px; padding-block: 28px 40px; color: var(--ink-muted); font-size: .875rem; }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--ink-muted); }
footer a:hover { color: var(--ink); }

/* text pages (delete account) */
.doc { max-width: 720px; padding-block: 24px 24px; }
.doc h1 { font-size: clamp(1.75rem, 4.4vw, 2.4rem); line-height: 1.25; margin: 8px 0 12px; letter-spacing: -0.01em; }
.doc h2 { font-size: 1.25rem; margin: 36px 0 8px; }
.doc p, .doc li { color: var(--ink); }
.doc ol, .doc ul { padding-inline-start: 1.4em; }
.doc li { margin-block: 6px; }
.doc .meta { color: var(--ink-muted); font-size: .875rem; }
.callout { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--r-lg); padding: 20px 22px; margin-block: 20px; }
.callout.warm { background: var(--surface-tint); border-color: var(--action-container); }
.callout p { margin: 0; }
.back { display: inline-flex; align-items: center; min-height: 44px; }