/* Rifqh static landing — extracted from the approved design
   (Rifqah Landing v2.dc.html: Desktop 1440 + Mobile 390).
   Desktop values apply from 900px up; the mobile screen's values below. */

:root {
  --bg: #F6F2EA;
  --ink: #1E1E1E;
  --orange: #FF8A00;
  --orange-dark: #E67C00;
  --line: #E6DECF;
  --green: #22D38A;
  --muted: #888888;
  --white: #FFFFFF;
  --panel: #2A2A2A;
  --panel-line: #3A3A3A;
  --panel-outline: #444444;
  --kufi: 'Noto Kufi Arabic', Cairo, sans-serif;
  --gutter: 80px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Cairo, sans-serif;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange); }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }

.o { color: var(--orange); }
.g { color: var(--green); }

/* Official slogan lockup «شغف واحد. يجمعنا.» — matches the Flutter
   RifqhSlogan widget: شغف #1E1E1E (white on dark surfaces) · واحد #22D38A ·
   يجمعنا #FF8A00. */
.sl-lead { color: var(--ink); }
.sl-accent { color: var(--green); }
.sl-close { color: var(--orange); }
.panel-dark .sl-lead { color: var(--white); }
.muted { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-green { background: var(--green); }
.dot-orange { background: var(--orange); width: 6px; height: 6px; }
.mob-only { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: none; white-space: nowrap;
  padding: 11px 22px; border-radius: 12px;
  font: 700 15px Cairo, sans-serif; line-height: 1.4;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-white { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn-white:hover { border-color: var(--ink); color: var(--ink); }
.btn-orange { background: var(--orange); color: var(--white); }
.btn-orange:hover { background: var(--orange-dark); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: #333333; color: var(--white); }
.btn-dark-outline { background: var(--ink); color: var(--white); border: 2px solid var(--orange); border-radius: 14px; padding: 14px; font-size: 15px; font-weight: 800; }
.btn-lg { padding: 18px 36px; border-radius: 16px; font-size: 19px; font-weight: 800; }
.btn-md { padding: 14px 28px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.btn-sm { padding: 7px 16px; border-radius: 10px; font-size: 13px; }
.btn-orange.btn-lg { box-shadow: 0 10px 28px rgba(255, 138, 0, .3); }

/* ---------- nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  background: var(--bg); border-bottom: 1px solid var(--line);
  position: relative;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.wordmark { font: 900 28px var(--kufi); line-height: 1; }
.wm-sm { font-size: 22px; }
.nav-links { display: flex; gap: 36px; font: 700 16px Cairo, sans-serif; }
.nav-links a { white-space: nowrap; }
.nav-actions { display: flex; gap: 12px; align-items: center; }
/* Narrower desktops (900–1439): six links and three buttons do not fit one
   row — the links ran into the wordmark. Tighter and smaller, and the buttons
   that only repeat a destination step aside: «ادخل واكتشف» goes where
   «تسجيل الدخول» goes (/app/); «حمّل التطبيق» only jumps to #app below, whose
   badges stay. «تسجيل الدخول» and every link always stay. */
@media (min-width: 900px) and (max-width: 1439px) {
  .nav { gap: 20px; padding-inline: 32px; }
  .nav-links { gap: 20px; font-size: 15px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn { white-space: nowrap; }
  .nav-actions .btn-white { display: none; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .nav-links { gap: 14px; font-size: 14px; }
  .nav-actions .btn-dark { display: none; }
  .brand img { width: 38px; height: 38px; }
  .wordmark { font-size: 24px; }
}
.menu-btn {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--white);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  padding: 0; cursor: pointer;
}
.menu-btn span { width: 16px; height: 2px; background: var(--ink); display: block; }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 72px var(--gutter) 80px;
}
.hero-copy { display: flex; flex-direction: column; gap: 26px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; width: max-content;
  padding: 7px 16px; border-radius: 999px; font: 700 13px Cairo, sans-serif;
}
.pill-dark { background: var(--ink); color: var(--white); }
.pill-outline { border: 1px solid var(--panel-outline); color: var(--white); padding: 6px 14px; }
.hero h1 { font: 900 84px/1.15 var(--kufi); letter-spacing: -1px; }
.lead { font: 600 24px/1.65 Cairo, sans-serif; max-width: 560px; text-wrap: pretty; }
.hero-ctas { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
/* Store badges (Batch 4): the official Arabic artwork, unaltered. The Google
   Play PNG carries its own transparent margin, so it is drawn taller to make
   the two VISIBLE badges the same 44px height, then pulled back by the margin.
   A badge with no link (store-links.js) is not an <a href> at all. */
.store-badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.store-badge { display: inline-flex; line-height: 0; border-radius: 8px; }
.store-badge img { height: 44px; width: auto; }
.store-badge-play img { height: 66px; margin: -11px -11px; }
.store-badge[aria-disabled="true"] { cursor: default; }
.store-badge:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.stats { display: flex; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 22px; }
.stats li { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-left: 24px; border-left: 1px solid var(--line); }
.stats li:last-child { border-left: 0; }
.stat-n { font: 900 34px/1.4 var(--kufi); color: var(--orange); }
.stat-l { font: 600 15px Cairo, sans-serif; }

.collage { position: relative; height: 600px; }
.ph {
  position: absolute; overflow: hidden; background: var(--white);
  border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(30, 30, 30, .12);
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-1 { top: 0; right: 0; width: 330px; height: 360px; border-radius: 28px; }
.ph-2 { top: 40px; left: 0; width: 250px; height: 250px; border-radius: 24px; }
.ph-3 { bottom: 0; left: 40px; width: 300px; height: 210px; border-radius: 24px; }

.pulse-float {
  position: absolute; bottom: 30px; right: 20px; width: 290px;
  background: var(--ink); border: 2px solid var(--orange); border-radius: 20px;
  padding: 16px; color: var(--white);
  box-shadow: 0 20px 50px rgba(30, 30, 30, .3);
  display: flex; flex-direction: column; gap: 10px;
}
.pulse-head { display: flex; align-items: center; gap: 10px; }
.pulse-who { min-width: 0; }
.pulse-user { font: 700 14px Cairo, sans-serif; }
.pulse-meta { font: 500 11px Cairo, sans-serif; color: var(--muted); }
.pulse-tag { margin-right: auto; display: flex; align-items: center; gap: 5px; font: 700 11px Cairo, sans-serif; color: var(--green); }
.pulse-tag .dot { width: 6px; height: 6px; }
.pulse-text { font: 600 14px/1.5 Cairo, sans-serif; text-wrap: pretty; }
.pulse-foot { display: flex; gap: 8px; font: 600 12px Cairo, sans-serif; color: var(--muted); }
.avatar { width: 38px; height: 38px; border-radius: 50%; position: relative; overflow: hidden; flex: none; }
.avatar i { position: absolute; border-radius: 50%; background: var(--ink); }
.av-head { top: 8px; left: 12px; width: 14px; height: 14px; }
.av-body { top: 24px; left: 6px; width: 26px; height: 26px; }
.av-orange { background: var(--orange); }
.av-grey { background: var(--muted); }
.av-green { background: var(--green); }
.av-beige { background: var(--line); }
.live-chip {
  position: absolute; top: 310px; left: 150px;
  padding: 10px 16px; border-radius: 14px; background: var(--white); border: 1px solid var(--line);
  font: 700 13px Cairo, sans-serif; box-shadow: 0 10px 30px rgba(30, 30, 30, .1);
  display: flex; gap: 8px; align-items: center; white-space: nowrap;
}

/* ---------- ticker ---------- */
.ticker {
  background: var(--ink); color: var(--white);
  padding: 16px var(--gutter);
  display: flex; gap: 40px; justify-content: space-between;
  font: 700 15px Cairo, sans-serif; overflow: hidden;
}
.ticker span { display: flex; gap: 10px; align-items: center; white-space: nowrap; }

/* ---------- section scaffolding ---------- */
section { padding: 96px var(--gutter); }
.band-white { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.sec-center { text-align: center; margin: 0 auto 48px; align-items: center; }
.eyebrow { font: 700 14px Cairo, sans-serif; color: var(--orange); }
section h2 { font: 900 52px/1.25 var(--kufi); }
.sec-head p { font: 500 20px/1.7 Cairo, sans-serif; text-wrap: pretty; }
.sec-head .note { font: 600 14px/1.6 Cairo, sans-serif; color: var(--muted); }
.sec-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.sec-row .sec-head { max-width: 640px; gap: 12px; }
.sec-row h2 { font-size: 48px; }
.sec-row .sec-head p { font-size: 19px; }
.link-more { flex: none; font: 800 16px Cairo, sans-serif; color: var(--orange); }
.link-more:hover { color: var(--orange-dark); }

/* ---------- features ---------- */
.features { display: flex; flex-direction: column; gap: 56px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar {
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  border-radius: 28px; padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px; min-height: 380px;
}
.pillar-dark { background: var(--ink); color: var(--white); border: 2px solid var(--orange); }
.pillar-icon {
  width: 56px; height: 56px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font: 900 24px var(--kufi); color: var(--white);
}
.ic-orange { background: var(--orange); }
.ic-dark { background: var(--ink); }
.pillar h3 { font: 900 30px/1.3 var(--kufi); }
.pillar p { font: 500 17px/1.7 Cairo, sans-serif; text-wrap: pretty; }
.tags { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tags span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font: 700 12px Cairo, sans-serif; }
.tags-dark span { border-color: var(--panel-outline); }

/* ---------- pulses ---------- */
.pulses { padding-top: 0; }
.panel-dark { background: var(--ink); border: 2px solid var(--orange); border-radius: 36px; color: var(--white); }
.pulses-panel { padding: 72px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.pulses-copy { display: flex; flex-direction: column; gap: 22px; }
.pulses h2 { font-size: 50px; color: var(--white); }
.pulses-copy p { font: 500 19px/1.7 Cairo, sans-serif; text-wrap: pretty; }
.audiences { display: flex; gap: 10px; flex-wrap: wrap; }
.aud {
  padding: 12px 18px; border-radius: 14px; min-width: 140px;
  background: var(--panel); border: 1px solid var(--panel-line); color: var(--white);
  display: flex; flex-direction: column; gap: 2px;
}
.aud-on { background: var(--orange); border-color: var(--orange); }
.aud-t { font: 800 15px Cairo, sans-serif; }
.aud-s { font: 500 12px Cairo, sans-serif; opacity: .8; }
.slogan { font: 900 24px var(--kufi); margin-top: 10px; }
.pulse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pcard {
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 22px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.pcard .avatar { width: 36px; height: 36px; }
.pcard .av-head { top: 7px; left: 11px; }
.pcard .av-body { top: 23px; left: 5px; }
.pcard .pulse-user { font-size: 13px; }
.scope {
  margin-right: auto; padding: 3px 9px; border-radius: 999px; background: var(--ink);
  font: 700 10px Cairo, sans-serif; color: var(--orange); white-space: nowrap;
}
.pulse-img { height: 120px; border-radius: 14px; overflow: hidden; }
.pulse-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard .pulse-text { font-size: 14px; line-height: 1.55; }

/* ---------- communities ---------- */
.filters { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.chip {
  padding: 9px 18px; border-radius: 999px; font: 700 14px Cairo, sans-serif;
  background: var(--white); color: var(--ink); border: 1px solid var(--line); white-space: nowrap;
}
.chip-on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip-sm { padding: 4px 10px; font-size: 12px; background: var(--bg); }
.cards { display: grid; gap: 20px; }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.ccard {
  background: var(--bg); border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .15s;
}
.ccard:hover, .ecard:hover { border-color: var(--orange); }
.ccard-img { height: 190px; position: relative; }
.ccard-img img, .ecard-img img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 999px;
  background: var(--ink); color: var(--white); font: 700 12px Cairo, sans-serif; pointer-events: none;
}
.ccard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ccard h3 { font: 800 20px var(--kufi); }
.ccard-city { font: 600 14px Cairo, sans-serif; color: var(--muted); }
.ccard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.members { font: 700 14px Cairo, sans-serif; display: flex; gap: 6px; align-items: center; }
.members .dot { width: 7px; height: 7px; }

/* ---------- events ---------- */
.ecard { background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.ecard-img { height: 200px; position: relative; }
.ecard-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ecard-meta { display: flex; gap: 8px; align-items: center; font: 600 13px Cairo, sans-serif; }
.ecard h3 { font: 800 21px/1.4 var(--kufi); text-wrap: pretty; }
.ecard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.time { font: 700 14px Cairo, sans-serif; }
.going { display: flex; align-items: center; gap: 6px; font: 700 13px Cairo, sans-serif; color: var(--muted); }
.avs { display: flex; }
.avs i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--white); display: block; }
.avs i:nth-child(1) { background: var(--orange); }
.avs i:nth-child(2) { background: var(--ink); margin-right: -8px; }
.avs i:nth-child(3) { background: var(--muted); margin-right: -8px; }

/* ---------- cities ---------- */
.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.city { position: relative; height: 220px; border-radius: 24px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.city img { width: 100%; height: 100%; object-fit: cover; }
.city-cap {
  position: absolute; inset: auto 0 0 0; padding: 16px;
  background: linear-gradient(to top, rgba(30, 30, 30, .92), rgba(30, 30, 30, 0));
  color: var(--white); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none;
}
.city-cap .dot { margin-bottom: 8px; }
.city-n { font: 900 24px var(--kufi); }
.city-s { font: 600 13px Cairo, sans-serif; }
.more-cities {
  grid-column: span 4; background: var(--ink); border: 2px solid var(--orange); border-radius: 24px;
  padding: 28px 36px; display: flex; justify-content: space-between; align-items: center; color: var(--white); gap: 24px;
}
.more-n { font: 900 26px var(--kufi); }
.more-s { font: 500 15px Cairo, sans-serif; margin-top: 4px; }

/* ---------- how ---------- */
.sec-row-tight { margin-bottom: 48px; }
.sec-row-tight p { font: 600 18px Cairo, sans-serif; }
/* «كيف تعمل رِفقة» — numbered steps, real screens in phones, alternating sides. */
.how { overflow-x: clip; } /* the blobs behind the phones never widen the page */
.how-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.how-sub { font: 500 19px/1.8 Cairo, sans-serif; color: var(--muted); max-width: 620px; text-wrap: pretty; }
.how-steps { list-style: none; margin: 40px auto 0; padding: 0; max-width: 860px; display: flex; flex-direction: column; }
.how-step { position: relative; display: grid; grid-template-columns: minmax(0, 400px) 260px; justify-content: center; align-items: center; gap: 56px; padding-bottom: 64px; }
.how-step:last-child { padding-bottom: 0; }
.how-step:nth-child(even) { grid-template-columns: 260px minmax(0, 400px); }
.how-step:nth-child(even) .how-copy { order: 2; }
.how-step:not(:last-child)::after { content: ""; position: absolute; inset: auto 12% 4px; height: 56px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none' fill='none' stroke='%23FF8A00' stroke-opacity='.7' stroke-width='2.4' stroke-dasharray='8 8' stroke-linecap='round'%3E%3Cpath d='M110 2C110 55 490 5 490 58'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.how-step.how-g:not(:last-child)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none' fill='none' stroke='%2322D38A' stroke-opacity='.7' stroke-width='2.4' stroke-dasharray='8 8' stroke-linecap='round'%3E%3Cpath d='M110 2C110 55 490 5 490 58'/%3E%3C/svg%3E"); transform: scaleX(-1); }
.how-copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.how-title { display: flex; align-items: center; gap: 14px; }
.how-n { flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 30px var(--kufi); color: var(--white); background: var(--orange); box-shadow: 0 8px 18px rgba(255, 138, 0, .3); }
.how-g .how-n { background: var(--green); box-shadow: 0 8px 18px rgba(34, 211, 138, .3); }
.how-step h3 { font: 900 34px/1.3 var(--kufi); color: var(--orange); }
.how-g h3 { color: var(--green); }
.how-copy p { font: 600 19px/1.7 Cairo, sans-serif; text-wrap: pretty; }
.how-copy .how-note { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 700 18px/1.4 Cairo, sans-serif; color: var(--green); transform: rotate(-4deg); }
.how-copy .how-note::after { content: ""; flex: none; width: 36px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26' fill='none' stroke='%2322D38A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M38 6Q20-2 4 19'/%3E%3Cpath d='M4 19l10-2M4 19l2-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.how-g .how-note { color: var(--orange); transform: rotate(4deg); flex-direction: row-reverse; }
.how-g .how-note::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26' fill='none' stroke='%23FF8A00' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M38 6Q20-2 4 19'/%3E%3Cpath d='M4 19l10-2M4 19l2-10'/%3E%3C/svg%3E"); transform: scaleX(-1); }
.how-phone { position: relative; margin: 0; padding: 9px; border-radius: 40px; background: var(--ink); box-shadow: 0 22px 44px rgba(30, 30, 30, .2); }
.how-phone::before { content: ""; position: absolute; inset: -8% -16%; z-index: -1; border-radius: 46% 54% 48% 52%; background: rgba(255, 138, 0, .13); }
.how-g .how-phone::before { background: rgba(34, 211, 138, .13); }
.how-screen { position: relative; overflow: hidden; border-radius: 31px; background: var(--bg); padding-top: 24px; }
.how-screen::before { content: ""; position: absolute; top: 7px; left: 50%; width: 30%; height: 12px; transform: translateX(-50%); border-radius: 999px; background: var(--ink); }
.how-screen img { width: 100%; height: auto; }

/* ---------- app ---------- */
.app { padding-top: 0; }
.app-panel { padding: 64px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.app-copy { display: flex; flex-direction: column; gap: 20px; }
.app h2 { font-size: 46px; line-height: 1.3; color: var(--white); }
.app-copy p { font: 500 19px/1.7 Cairo, sans-serif; max-width: 480px; text-wrap: pretty; }
.app-copy .muted { font: 600 14px Cairo, sans-serif; }
.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: 250px; height: 420px; border-radius: 38px; background: var(--panel); border: 1px solid var(--panel-outline);
  padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}
.phone-top { display: flex; justify-content: space-between; align-items: center; }
.phone-top img { width: 30px; height: 30px; object-fit: contain; }
.phone-title { font: 900 16px var(--kufi); color: var(--white); }
.phone-img { height: 120px; border-radius: 16px; overflow: hidden; }
.phone-img img { width: 100%; height: 100%; object-fit: cover; }
.bar { height: 10px; border-radius: 5px; background: var(--panel-line); }
.w80 { width: 80%; } .w55 { width: 55%; }
.phone-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.phone-tiles div { height: 56px; border-radius: 14px; background: var(--panel-line); }
.phone-tiles .tile-orange { background: var(--orange); }
.phone-cta { margin-top: auto; height: 44px; border-radius: 12px; background: var(--orange); display: flex; align-items: center; justify-content: center; font: 700 14px Cairo, sans-serif; color: var(--white); }

/* ---------- footer ---------- */
.footer { padding: 56px var(--gutter) 40px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 36px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand .brand { gap: 10px; }
.foot-brand .brand img { width: 36px; height: 36px; }
.foot-brand p { font: 500 15px/1.7 Cairo, sans-serif; max-width: 380px; }
.foot-brand .foot-en { font: 500 13px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--muted); text-align: left; }
.slogan-sm { font: 800 16px Cairo, sans-serif; }
.mail { font: 600 15px Cairo, sans-serif; color: var(--muted); direction: ltr; text-align: right; }
.foot-col { display: flex; flex-direction: column; gap: 12px; font: 600 15px Cairo, sans-serif; }
.foot-h { font: 700 13px Cairo, sans-serif; color: var(--muted); margin-bottom: 4px; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.socials a:hover { border-color: var(--orange); color: var(--ink); }
.legal-row { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.foot-bottom { display: flex; flex-wrap: wrap; row-gap: 10px; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); font: 500 13px Cairo, sans-serif; color: var(--muted); }
.foot-bottom .tm { flex-basis: 100%; font: 500 11px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; }

/* ================= MOBILE (the Mobile 390 screen) ================= */
@media (max-width: 899px) {
  :root { --gutter: 20px; }
  .desk-only { display: none !important; }
  .mob-only { display: initial !important; }
  a.mob-only, span.mob-only, .btn.mob-only { display: inline-flex !important; }
  p.mob-only, div.mob-only { display: block !important; }
  .legal-row.mob-only { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 16px; margin: 0; }
  .menu-btn.mob-only { display: flex !important; }
  .collage-m.mob-only { display: block !important; }

  /* nav */
  .nav { padding: 16px 20px; }
  .brand { gap: 8px; }
  .brand img { width: 34px; height: 34px; }
  .wordmark { font-size: 20px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-orange { padding: 9px 16px; border-radius: 10px; font-size: 13px; }
  .nav-links {
    display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 10;
    flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 20px; border-top: 1px solid var(--line); font-size: 15px; }

  /* hero */
  .hero { display: block; padding: 36px 20px 32px; }
  .hero-copy { gap: 18px; }
  .pill { padding: 6px 12px; font-size: 12px; }
  .pill .dot { width: 7px; height: 7px; }
  .hero h1 { font-size: 50px; letter-spacing: 0; }
  .lead { font: 600 17px/1.65 Cairo, sans-serif; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 0; }
  .hero-ctas .btn { width: 100%; padding: 16px; border-radius: 14px; font-size: 17px; }
  .hero-ctas .btn-orange { box-shadow: 0 8px 24px rgba(255, 138, 0, .28); }
  .hero-badges { justify-content: center; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; border: 0; padding: 0; }
  .stats li { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; text-align: center; gap: 0; align-items: center; border-left: 1px solid var(--line); }
  .stat-n { font-size: 22px; line-height: 1.4; }
  .stat-l { font-size: 11px; }
  .collage-m { position: relative; height: 300px; margin-top: 26px; }
  .collage-m .ph { box-shadow: none; }
  .ph-m1 { top: 0; right: 0; width: 200px; height: 200px; border-radius: 22px; }
  .ph-m2 { top: 110px; left: 0; width: 150px; height: 150px; border-radius: 20px; }
  .pulse-float-m { bottom: 0; right: 10px; width: 230px; border-radius: 16px; padding: 12px; gap: 6px; box-shadow: none; }
  .pulse-float-m .pulse-head { gap: 8px; }
  .av-plain { width: 28px; height: 28px; }
  .pulse-float-m .pulse-user { font-size: 12px; }
  .pulse-float-m .pulse-meta { font-weight: 500; }
  .pulse-float-m .pulse-tag { font-size: 10px; }
  .pulse-float-m .pulse-text { font-size: 12px; }

  /* ticker */
  .ticker { padding: 12px 20px; gap: 22px; font-size: 13px; justify-content: flex-start; }
  .ticker span { gap: 8px; }
  .ticker .dot-orange { width: 5px; height: 5px; }

  /* sections */
  section { padding: 44px 20px; }
  .sec-head { gap: 8px; }
  .eyebrow { font-size: 13px; }
  section h2, .sec-row h2, .pulses h2 { font-size: 30px; line-height: 1.3; }
  .app h2 { font-size: 28px; }
  .sec-head .note { font-size: 13px; }
  .sec-row { margin-bottom: 16px; }
  .sec-center { margin-bottom: 16px; }
  .sec-center .mob-only { font: 500 15px/1.6 Cairo, sans-serif; }

  .features { gap: 18px; }
  .pillars { display: flex; flex-direction: column; gap: 18px; }
  .pillar { border-radius: 22px; padding: 24px; gap: 12px; min-height: 0; }
  .pillar-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 20px; }
  .pillar h3 { font-size: 24px; }
  .pillar p { font-size: 15px; line-height: 1.65; }

  .pulses { padding: 0 20px 44px; }
  .pulses-panel { display: flex; flex-direction: column; gap: 16px; padding: 28px 20px; border-radius: 26px; }
  .pulses-copy { gap: 16px; }
  .pill-outline { padding: 5px 12px; font-size: 12px; }
  .pulses-copy p { font-size: 15px; line-height: 1.65; }
  .audiences { flex-wrap: nowrap; gap: 8px; }
  .aud { flex: 1; min-width: 0; padding: 10px 8px; border-radius: 12px; text-align: center; align-items: center; }
  .aud-t { font-size: 13px; }
  .pulse-grid { display: flex; flex-direction: column; gap: 16px; }
  .pcard { border-radius: 18px; padding: 14px; gap: 10px; }
  .pcard .avatar { width: 32px; height: 32px; }

  .communities { padding-left: 0; padding-right: 0; }
  .communities .sec-row, .communities .filters { padding: 0 20px; }
  .filters { gap: 8px; overflow-x: auto; flex-wrap: nowrap; margin-bottom: 16px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .chip { padding: 7px 14px; font-size: 13px; }
  .cards-4 { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px; scrollbar-width: none; }
  .cards-4::-webkit-scrollbar { display: none; }
  .ccard { flex: none; width: 250px; border-radius: 20px; }
  .ccard-img { height: 140px; }
  .badge { top: 12px; right: 12px; padding: 4px 10px; font-size: 11px; }
  .ccard-body { padding: 14px 16px 16px; gap: 4px; }
  .ccard h3 { font-size: 17px; }
  .ccard-city { font-size: 13px; }
  .ccard-foot { margin-top: 8px; }
  .members { font-size: 13px; }
  .members .dot { width: 6px; height: 6px; }
  .ccard .btn-sm { padding: 6px 14px; border-radius: 9px; font-size: 12px; }

  .cards-3 { grid-template-columns: 1fr; gap: 16px; }
  .ecard { border-radius: 20px; }
  .ecard-img { height: 150px; }
  .ecard-body { padding: 16px; gap: 6px; }
  .chip-sm { padding: 3px 9px; font-size: 11px; }
  .ecard-meta { font-size: 12px; }
  .ecard h3 { font-size: 17px; }
  .ecard-foot { font-size: 13px; }
  .going { font-size: 13px; }

  .cities { display: flex; flex-direction: column; gap: 16px; }
  .city-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .city { height: 130px; border-radius: 18px; }
  .city-cap { padding: 12px; }
  .city-cap .dot { display: none; }
  .city-n { font-size: 17px; }
  .city-s { font-size: 11px; }
  .cities .btn-dark-outline { width: 100%; }

  .how { display: flex; flex-direction: column; gap: 14px; }
  .sec-row-tight { margin-bottom: 0; }
  .how-head { gap: 8px; }
  .how-sub { font-size: 15px; }
  .how-steps { margin-top: 24px; }
  .how-step { grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; padding-bottom: 48px; }
  .how-step:nth-child(even) { grid-template-columns: 150px minmax(0, 1fr); }
  .how-step:not(:last-child)::after { height: 40px; inset: auto 14% 4px; }
  .how-title { gap: 10px; }
  .how-n { width: 46px; height: 46px; font-size: 22px; }
  .how-step h3 { font-size: 23px; white-space: nowrap; }
  .how-copy { gap: 8px; }
  .how-copy p { font-size: 15px; }
  .how-copy .how-note { font-size: 14px; }
  .how-copy .how-note::after { width: 26px; height: 18px; }
  .how-phone { padding: 5px; border-radius: 24px; }
  .how-screen { border-radius: 19px; padding-top: 14px; }
  .how-screen::before { top: 4px; height: 7px; }

  .app { padding: 0 20px 44px; }
  .app-panel { display: block; padding: 28px 22px; border-radius: 24px; }
  .app-copy { gap: 14px; }
  .app-copy p { font-size: 15px; line-height: 1.6; }

  .footer { padding: 32px 20px 28px; gap: 18px; }
  .foot-grid { display: flex; flex-direction: column; gap: 18px; }
  .foot-brand .brand img { width: 30px; height: 30px; }
  .wm-sm { font-size: 18px; }
  .slogan-sm { font-size: 14px; }
  .foot-col { gap: 8px; font-size: 14px; }
  .legal-row .mail { font-size: 14px; }
  .socials { gap: 8px; }
  .socials a { width: 38px; height: 38px; }
  .foot-bottom { display: block; border: 0; padding-top: 0; font-size: 12px; line-height: 1.6; }
  .foot-bottom .tm { margin-top: 10px; font-size: 10px; }
}

/* Between the 1440 design frame and wide screens: keep the frame's rhythm. */
@media (min-width: 1600px) {
  .nav, .hero, .ticker, section, .footer { padding-left: calc((100% - 1440px) / 2 + 80px); padding-right: calc((100% - 1440px) / 2 + 80px); }
  .pulses, .app { padding-left: calc((100% - 1440px) / 2 + 80px); padding-right: calc((100% - 1440px) / 2 + 80px); }
}

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

/* Store prep: the sign-in that timed out. */
.auth-return {
  background: #FFFFFF; border: 1px solid #E7E4DE; border-inline-start: 4px solid #FF8A00;
  border-radius: 14px; padding: 14px 18px; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.auth-return[hidden] { display: none; }
.auth-return p { margin: 0; font: 700 15px/1.7 Cairo, sans-serif; color: #1E1E1E; }
.auth-return-btn {
  background: #FF8A00; color: #FFFFFF !important; border-radius: 999px; padding: 10px 22px;
  font: 800 15px Cairo, sans-serif; text-decoration: none; direction: rtl;
}
.auth-return-web { color: #5b5b5b !important; font: 600 14px Cairo, sans-serif; direction: rtl; }
.auth-return-wrap { display: flex; justify-content: center; padding: 16px; }
.auth-return-wrap:has(.auth-return[hidden]) { display: none; }

/* Batch 10: the invite block — a verified ?ref= (invite.js). */
.invite {
  margin: 0 0 18px;
  padding: 18px 16px;
  border: 2px solid #FF8A00;
  border-radius: 20px;
  background: #FFF4E5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.invite[hidden] { display: none; }
.invite-title { margin: 0; font: 900 20px/1.5 Cairo, sans-serif; color: #1E1E1E; }
.invite-title bdi { color: #E86A00; unicode-bidi: isolate; }
.invite-how { margin: 0; font: 600 14px/1.8 Cairo, sans-serif; color: #4A4A4A; }
.invite-code {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #FFFFFF; border: 1px solid #F0D9BC; border-radius: 14px; padding: 10px 12px;
}
.invite-username { font: 800 20px/1.4 'SF Mono', Menlo, Consolas, monospace; color: #1E1E1E; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.invite-copy {
  flex: none; font: 800 14px/1 Cairo, sans-serif; color: #FFFFFF; background: #1E1E1E;
  border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer; min-height: 40px;
}
.invite-web { align-self: stretch; text-align: center; }
.invite-badges { justify-content: center; }
@media (min-width: 900px) { .invite { max-width: 560px; } .invite-web { align-self: flex-start; } .invite-badges { justify-content: flex-start; } }