/* Wattad website — the Lamassu design system (Style Two structure: sky + overlapping sheet, pills, cards, tabs)
   with the Wattad skin. Tokens mirror wattad-app/lib/src/core/theme so the site and the app look the same. */

@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 300; font-display: swap; src: url("fonts/IBMPlexSansArabic-Light.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }

:root {
    /* ground / surfaces */
    --ground: #E8DFCF;
    --surface: #F2EEE6;
    --sunken: #E1D7C4;
    --white: #FFFDF9;
    /* brand */
    --brand: #414936;
    --brand-deep: #2F3527;
    --brand-soft: #5B6450;
    --accent: #A77C50;
    --accent-deep: #85603A;
    --accent-soft: #D7BE9E;
    --on-brand: #F2EEE6;
    --on-brand-muted: #BEBAA9;
    /* ink */
    --ink: #1F221D;
    --ink-2: #5A5E50;
    --ink-3: #73776A; /* icons only: 3.2:1 or better, below the 4.5:1 text needs */
    /* lines */
    --line: #D6CCB8;
    --line-strong: #C9BEA7;
    /* status */
    --ok: #2D6A43; --ok-bg: #DCE7D6; --ok-line: #B4CDB2;
    --warn: #875A0F;
    --danger: #9E3326;
    --info-bg: #DDE0D2;
    /* sky: the design system's hero gradient, olive skin */
    --sky: linear-gradient(180deg, #2B3124 0%, #3A4130 46%, #4A5340 73%, #424A37 100%);
    /* shape — design system radii */
    --r-btn: 14px; --r-photo: 16px; --r-field: 20px; --r-card: 24px; --r-rail: 28px; --r-sheet: 32px; --r-pill: 999px;
    --shadow-rail: 0 20px 50px -22px rgba(31, 34, 29, 0.32);
    --shadow-dock: 0 -8px 24px -14px rgba(31, 34, 29, 0.25);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --font: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-num: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --wrap: 1180px;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.7; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; line-height: 1.35; color: var(--brand-deep); text-wrap: balance; }
p { margin: 0; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 32px, 780px); margin-inline: auto; }
.muted { color: var(--ink-2); }

/* ── type scale (design system scale A, stretched for wide screens) ── */
.t-display { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 600; line-height: 1.2; }
.t-h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 600; }
.t-h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; }
.t-h3 { font-size: 1.15rem; font-weight: 600; }
.t-body { font-size: 1rem; color: var(--ink-2); }
.t-caption { font-size: 0.78rem; color: var(--ink-2); }

/* ── header (AppBar: blurred ground, hairline) ── */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(232, 223, 207, 0.88); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.brand-mark { display: inline-flex; align-items: center; min-height: 44px; }
.brand-mark img { height: 38px; width: auto; }
.site-nav { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
.site-nav a { padding: 8px 14px; border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; font-size: 0.94rem; font-weight: 500; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.site-nav a:hover { background: var(--surface); color: var(--brand-deep); }
.site-nav a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.site-menu { display: none; }
.site-menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--brand); cursor: pointer; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary svg { width: 22px; height: 22px; }
.site-menu nav { position: absolute; inset-inline: 0; top: 100%; display: grid; gap: 4px; padding: 10px 16px 18px; background: var(--ground); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -24px rgba(31, 34, 29, 0.45); }
.site-menu nav a { display: flex; align-items: center; min-height: 48px; padding-inline: 16px; border-radius: var(--r-field); color: var(--ink); text-decoration: none; font-weight: 500; }
.site-menu nav a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--brand); text-decoration: none; font-weight: 600; font-size: 0.88rem; background: var(--surface); }

/* ── buttons (design system: lg 48 / md 44, radius 14, press scale .975) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-btn); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 0.98rem; text-decoration: none; cursor: pointer; transition: transform 0.16s var(--ease), background 0.2s var(--ease); white-space: nowrap; }
.btn:active { transform: scale(0.975); }
.btn-md { min-height: 44px; padding: 0 18px; font-size: 0.94rem; }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(47, 53, 39, 0.4), 0 0 0 1px var(--brand-deep); }
.btn-primary:hover { background: var(--brand-deep); color: var(--on-brand); }
.btn-secondary { background: var(--surface); color: var(--brand-deep); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--white); }
.btn-ghost { background: transparent; color: var(--brand); border-color: rgba(65, 73, 54, 0.3); }
.btn-light { background: var(--surface); color: var(--brand-deep); }
.btn-outline-light { background: transparent; color: var(--on-brand); border-color: rgba(242, 238, 230, 0.4); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── sky + overlapping sheet (design system HomeHero / .s2-sheet) ── */
.sky { position: relative; overflow: hidden; background: var(--sky); color: var(--on-brand); padding-block: 56px 120px; }
.sky::before { content: ""; position: absolute; inset-inline-start: -180px; top: -160px; width: 640px; height: 640px; background: url("brand/element-sand.svg") center / contain no-repeat; opacity: 0.07; pointer-events: none; }
.sky::after { content: ""; position: absolute; inset-inline-end: -140px; bottom: -120px; width: 420px; height: 420px; background: url("brand/element-sand.svg") center / contain no-repeat; opacity: 0.05; pointer-events: none; }
.sky .wrap { position: relative; z-index: 1; }
.sky h1 { color: var(--on-brand); }
.sky .t-body { color: var(--on-brand-muted); }
.sky-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #D7BE9E; font-weight: 500; }
.sky-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent); }
.sheet { position: relative; z-index: 2; margin-top: -64px; background: var(--ground); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding-top: 8px; }

/* home hero: copy + search + live numbers beside the app standing in the brand arch */
.hero { padding-block: 64px 120px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.hero-copy { display: grid; gap: 20px; justify-items: start; }
.hero-title { font-size: clamp(2.5rem, 5.8vw, 4.4rem); font-weight: 700; line-height: 1.12; }
.hero-lead { max-width: 46ch; font-size: 1.06rem; color: var(--on-brand-muted); }

.hero-search { width: min(100%, 560px); display: grid; gap: 8px; padding: 8px; border-radius: var(--r-card); background: rgba(242, 238, 230, 0.08); border: 1px solid rgba(242, 238, 230, 0.16); }
.seg { display: flex; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); color: var(--on-brand-muted); font-size: 0.9rem; font-weight: 500; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.seg label:hover span { color: var(--on-brand); }
.seg input:checked + span { background: var(--on-brand); color: var(--brand-deep); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.hero-search-field { display: flex; align-items: center; gap: 10px; padding: 6px; padding-inline-start: 16px; border-radius: 18px; background: var(--surface); }
.hero-search-field:focus-within { box-shadow: 0 0 0 3px rgba(167, 124, 80, 0.55); }
.hero-search-field > svg { flex: none; width: 20px; height: 20px; color: var(--ink-3); }
.hero-search-field input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 10px 0; }
.hero-search-field input:focus { outline: none; }

.ledger { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 14px; }
.ledger li + li { border-inline-start: 1px solid rgba(242, 238, 230, 0.2); }
.ledger a { display: grid; gap: 2px; padding-inline: 24px; color: var(--on-brand); text-decoration: none; }
.ledger li:first-child a { padding-inline-start: 0; }
.ledger strong { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.15; transition: color 0.2s var(--ease); }
.ledger span { font-size: 0.85rem; color: var(--on-brand-muted); }
.ledger a:hover strong { color: #D7BE9E; }
.store-line { display: inline-flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--on-brand-muted); }
.store-line::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* the arch runs on behind the sheet; the phone always ends above the sheet edge, whole */
.hero-visual { align-self: end; justify-self: center; width: min(380px, 100%); margin-bottom: -96px; }
.arch { position: relative; display: grid; justify-items: center; padding: 56px 0 72px; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, rgba(242, 238, 230, 0.13), rgba(242, 238, 230, 0.03) 65%); border: 1px solid rgba(242, 238, 230, 0.14); border-bottom: 0; }
.arch-sun { position: absolute; top: 10%; inset-inline-end: 8%; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #C9A47C, var(--accent) 72%); box-shadow: 0 0 70px 12px rgba(167, 124, 80, 0.22); }
.device { position: relative; z-index: 1; width: 236px; padding: 9px; border-radius: 42px; background: #14170F; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.device img { width: 100%; height: auto; border-radius: 33px; }
.toast { position: absolute; z-index: 2; inset-inline-end: -36px; bottom: 150px; display: flex; align-items: center; gap: 12px; width: 248px; padding: 12px 14px; border-radius: 20px; background: rgba(242, 238, 230, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--brand-deep); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.55); }
.toast-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.toast-icon svg { width: 20px; height: 20px; }
.toast small { display: block; font-size: 0.74rem; color: var(--ink-2); line-height: 1.4; }
.toast strong { display: block; font-size: 0.86rem; font-weight: 600; line-height: 1.45; }

/* reel share page: the video in a phone-shaped frame beside its compound and button */
.reel-page { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
.reel-frame { aspect-ratio: 9 / 16; border-radius: var(--r-rail); overflow: hidden; background: #0e110b; box-shadow: var(--shadow-rail); }
.reel-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-aside { display: grid; gap: 14px; align-content: start; }
@media (max-width: 640px) { .reel-page { grid-template-columns: 1fr; } .reel-frame { max-width: 360px; width: 100%; margin-inline: auto; } }

/* promo carousel: slide 78%, the first one starts at the content's start edge and the next peeks at the end (owner,
   2026-11-04 — it opened centred, design system S2Promo). The frame is the size container, so the slide width comes
   from the scroller's own width (cqw); --promo-pad lines the first slide up with the card's padding. */
.promo-frame { container-type: inline-size; }
.promo { --slide: min(78cqw, 760px); display: grid; grid-auto-flow: column; grid-auto-columns: var(--slide); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--promo-pad, 0px); scroll-padding-inline: var(--promo-pad, 0px); padding-block: 4px 10px; }
.promo::-webkit-scrollbar { display: none; }
.promo-slide { scroll-snap-align: start; aspect-ratio: 343 / 131; border-radius: var(--r-photo); overflow: hidden; background: var(--sunken); position: relative; display: block; }
.promo-slide img, .promo-slide svg { width: 100%; height: 100%; object-fit: cover; }

/* search door (design system SearchField, read-only) */
.search-door { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
[dir="ltr"] .search-door { padding: 6px 16px 6px 6px; }
.search-door input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); padding: 10px 4px; font-size: 16px; }
.search-door input:focus { outline: none; }
.search-door button { flex: none; width: 56px; height: 42px; border-radius: 16px; border: 0; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; cursor: pointer; }
.search-door svg { width: 20px; height: 20px; }

/* section head (design system SectionHead: eyebrow, title, line, then the rail arrows and «عرض الكل») */
.section { padding-block: 56px; }
.section-tight { padding-block: 28px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 24px; }
.section-head > div:first-child { display: grid; gap: 6px; justify-items: start; min-width: 0; max-width: 64ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 600; color: var(--accent-deep); }
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--accent); }
.section-tools { display: flex; align-items: center; gap: 8px; }
.see-all { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--ground); color: var(--brand-deep); font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.see-all:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.see-all::after { content: "‹"; font-size: 1.25em; line-height: 1; }
[dir="ltr"] .see-all::after { content: "›"; }
.rail-nav { display: inline-flex; gap: 6px; }
.rail-nav[hidden] { display: none; }
.rail-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ground); color: var(--brand-deep); display: grid; place-items: center; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease); }
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
[dir="ltr"] .rail-btn.prev svg, [dir="rtl"] .rail-btn.next svg, [dir="rtl"] .compound-tile .go svg, [dir="rtl"] .chat-send svg { transform: scaleX(-1); }

/* rails: swipe on touch, arrows in the head on a mouse, no scrollbar track */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 296px; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-block: 4px 8px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* property card (design system PropertyCard: r24, 4:3 photo carrying the deal and staff badges; compound, title, one meta row, foot) */
.unit-card { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--line); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.unit-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-rail); }
.unit-photo { position: relative; aspect-ratio: 4 / 3; margin: 6px 6px 0; border-radius: 18px; overflow: hidden; background: var(--sunken); }
.unit-photo::before { content: ""; position: absolute; inset: 24%; background: url("brand/element-copper.svg") center / contain no-repeat; opacity: 0.22; }
.unit-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.unit-photo .ribbon { position: absolute; z-index: 1; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(242, 238, 230, 0.92); color: var(--brand-deep); font-size: 0.78rem; font-weight: 600; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.45); }
.unit-photo .ribbon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.unit-photo .ribbon.rent::before { background: var(--accent); }
.unit-photo .ribbon.off { background: rgba(158, 51, 38, 0.92); color: #fff; }
.unit-photo .ribbon.off::before { background: #fff; }
.unit-photo .count { position: absolute; z-index: 1; bottom: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(31, 34, 29, 0.58); color: #fff; font-size: 0.74rem; font-weight: 600; backdrop-filter: blur(6px); }
.unit-photo .count svg { width: 14px; height: 14px; }
.badge-tag { position: absolute; z-index: 1; top: 10px; inset-inline-end: 10px; padding: 4px 11px; border-radius: var(--r-pill); color: #fff; font-size: 0.76rem; font-weight: 600; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45); }
.badge-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: var(--r-pill); color: #fff; font-size: 0.76rem; font-weight: 600; margin-top: 4px; }
.b-featured { background: var(--accent-deep); }
.b-hot_offer { background: var(--danger); }
.b-new_launch { background: var(--brand); }
.b-limited { background: var(--warn); }
.b-new { background: var(--ok); }
.b-popular { background: var(--brand-soft); }
.proof { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; border-radius: var(--r-field); background: var(--surface); border: 1px solid var(--line); color: var(--brand-deep); font-weight: 500; font-size: 0.94rem; }
.proof li { display: inline-flex; align-items: center; gap: 8px; }
.proof svg { width: 18px; height: 18px; color: var(--accent); }
.unit-body { padding: 12px 14px 14px; display: grid; gap: 7px; align-content: start; }
.unit-center { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.8rem; font-weight: 500; color: var(--ink-2); }
.unit-center img { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--white); border: 1px solid var(--line); object-fit: contain; padding: 2px; }
.unit-center span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-body h3 { font-size: 1.02rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.unit-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.84rem; color: var(--ink-2); }
.unit-meta li { display: inline-flex; align-items: center; gap: 6px; }
.unit-meta svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
.unit-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--ink-2); }
.unit-price { font-size: 1.02rem; font-weight: 600; color: var(--brand-deep); }
.unit-code { margin-inline-start: auto; padding: 2px 9px; border-radius: 8px; background: var(--sunken); color: var(--ink-2); font-weight: 600; font-size: 0.74rem; }
.grid-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }

/* compound row (the reel page, a compound's shops, a unit's «الجهة المسؤولة»: r24, bordered, 60px logo square) */
.compound-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease); }
.compound-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.compound-logo { flex: none; width: 60px; height: 60px; border-radius: 18px; background: var(--white); object-fit: contain; padding: 6px; border: 1px solid var(--line); }
.compound-logo.fallback { display: grid; place-items: center; font-weight: 700; color: var(--brand); font-size: 1.3rem; }
.compound-card strong { display: block; color: var(--brand-deep); font-weight: 600; }
.compound-card .t-caption { margin-top: 2px; }
.compound-card .chev { margin-inline-start: auto; color: var(--ink-3); }
.grid-compounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }

/* compound tile (the app's v1.4 logo-first tile: a sunken plate with the brand motif, the logo in a white chip riding its edge,
   name, address, sale and rent counts) */
.compound-tile { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.compound-tile:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-rail); }
.compound-tile .plate { position: relative; height: 92px; margin: 6px 6px 0; border-radius: 18px; overflow: hidden; background: var(--sunken); }
.compound-tile .plate::before { content: ""; position: absolute; width: 190px; height: 190px; inset-inline-end: -40px; top: -86px; background: url("brand/element-copper.svg") center / contain no-repeat; opacity: 0.2; }
.compound-tile .badge-chip { position: absolute; z-index: 1; top: 14px; inset-inline-start: 14px; margin: 0; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.45); }
.compound-tile .body { display: grid; gap: 5px; align-content: start; padding: 0 16px 14px; }
.compound-tile .logo { position: relative; z-index: 1; width: 64px; height: 64px; margin-top: -34px; margin-bottom: 4px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); object-fit: contain; padding: 6px; box-shadow: 0 10px 20px -14px rgba(31, 34, 29, 0.55); }
.compound-tile .logo.initial { display: grid; place-items: center; padding: 0; font-size: 1.5rem; font-weight: 700; color: var(--brand); }
.compound-tile strong { color: var(--brand-deep); font-weight: 600; font-size: 1.04rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.compound-tile .address { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 0.8rem; color: var(--ink-2); }
.compound-tile .address svg { flex: none; width: 15px; height: 15px; color: var(--accent); }
.compound-tile .address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compound-tile .counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.compound-tile .counts > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--sunken); font-size: 0.78rem; color: var(--ink-2); }
.compound-tile .counts b { font-family: var(--font-num); font-weight: 600; color: var(--brand-deep); }
.compound-tile .counts svg { width: 14px; height: 14px; color: var(--accent); }
.compound-tile .counts .zero { opacity: 0.62; }
.compound-tile .counts .go { margin-inline-start: auto; padding: 0; width: 30px; height: 30px; justify-content: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); transition: transform 0.2s var(--ease); }
.compound-tile .counts .go svg { color: inherit; }
.compound-tile:hover .go { transform: translateX(-3px); }
[dir="ltr"] .compound-tile:hover .go { transform: translateX(3px); }
.grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap: 14px; }
.grid-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* tiles (design system S2ServiceMini: r12, icon 24, label 13/16.8, sub 10–12) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--line); padding: 26px; display: grid; gap: 10px; align-content: start; }
.tile-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.tile-icon.soft { background: var(--sunken); color: var(--brand); }
.tile-icon svg { width: 24px; height: 24px; }
.tile h3 { font-size: 1.05rem; }
.tile p { color: var(--ink-2); font-size: 0.95rem; }

/* numbers band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; }
.stat .value { font-family: var(--font-num); font-size: 2rem; font-weight: 600; color: var(--brand-deep); line-height: 1.1; }
.stat .label { color: var(--ink-2); font-size: 0.9rem; margin-top: 6px; }

/* dark card (design system dark promo / about card) */
.dark-card { position: relative; overflow: hidden; border-radius: var(--r-rail); background: var(--brand); color: var(--on-brand); padding: 44px; }
.dark-card::after { content: ""; position: absolute; inset-inline-end: -80px; bottom: -110px; width: 360px; height: 360px; background: url("brand/element-copper.svg") center / contain no-repeat; opacity: 0.32; pointer-events: none; }
.dark-card h2 { color: var(--on-brand); }
.dark-card p { color: var(--on-brand-muted); }
.dark-card > * { position: relative; z-index: 1; }

/* sections (owner, 2026-11-04: the page read as a stack of separate boxes): every section sits straight on the one
   sand sheet, its cards ivory (white only on logo plates), all of them on the same .wrap edges and one rhythm. The
   olive moments are full-width bands (`section.band > .wrap`), not boxes floating on the sand; the last one runs into
   the footer. */
.block { padding-block: clamp(28px, 4vw, 48px); }
.sheet > .block:last-child { padding-bottom: clamp(56px, 7vw, 96px); }
.band { position: relative; overflow: hidden; background: var(--sky); color: var(--on-brand); padding-block: clamp(48px, 6vw, 80px); }
.band::before { content: ""; position: absolute; inset-inline-start: -150px; top: -170px; width: 520px; height: 520px; background: url("brand/element-sand.svg") center / contain no-repeat; opacity: 0.06; pointer-events: none; }
.band::after { content: ""; position: absolute; inset-inline-end: -80px; bottom: -110px; width: 360px; height: 360px; background: url("brand/element-copper.svg") center / contain no-repeat; opacity: 0.14; pointer-events: none; }
.band > .wrap { position: relative; z-index: 1; }
.band :is(h2, h3) { color: var(--on-brand); }
.band :is(p, .t-body) { color: var(--on-brand-muted); }
.band p { max-width: 64ch; }
.band-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.sheet > .band:last-child { background: linear-gradient(180deg, #424A37 0%, #3A4130 55%, var(--brand-deep) 100%); padding-bottom: clamp(56px, 7vw, 96px); }
.sheet > .band:last-child::after { display: none; }
/* the compound page's own reels and ads stay an olive card beside its identity */
.dark-card.sky-card { --pad: clamp(20px, 3.4vw, 44px); padding: var(--pad); border-radius: var(--r-sheet); background: var(--sky); }
.dark-card.sky-card::before { content: ""; position: absolute; inset-inline-start: -150px; top: -170px; width: 520px; height: 520px; background: url("brand/element-sand.svg") center / contain no-repeat; opacity: 0.06; pointer-events: none; }
.dark-card.sky-card::after { opacity: 0.14; }
.dark-card.sky-card .rail, .dark-card.sky-card .promo-frame { margin-inline: calc(var(--pad) * -1); }
.dark-card.sky-card .rail { padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
.dark-card.sky-card .promo { --promo-pad: var(--pad); }
:is(.dark-card, .band) .eyebrow { color: var(--accent-soft); }
:is(.dark-card, .band) .rail-btn { background: rgba(242, 238, 230, 0.1); border-color: rgba(242, 238, 230, 0.24); color: var(--on-brand); }
:is(.dark-card, .band) .rail-btn:hover:not(:disabled) { background: var(--on-brand); border-color: var(--on-brand); color: var(--brand-deep); }
/* reels: the head beside the rail */
.reels-split { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: 28px; align-items: center; }
.reels-split .section-head { margin-bottom: 0; }
.reels-split .reels-rail { grid-auto-columns: 196px; }
.section-divider { height: 1px; border: 0; background: var(--line); margin: 30px 0; }

/* partners: the closing band carries the live numbers beside its pitch */
.mini-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-stats li { display: grid; gap: 2px; padding: 16px 18px; border-radius: 20px; background: rgba(242, 238, 230, 0.08); border: 1px solid rgba(242, 238, 230, 0.14); }
.mini-stats strong { font-family: var(--font-num); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.15; color: var(--on-brand); }
.mini-stats span { font-size: 0.85rem; color: var(--on-brand-muted); }

/* «نادين»: what she does, beside a still of the app's chat (olive question, sand answer, its numbered card) */
.nadine-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.nadine-copy { display: grid; gap: 14px; justify-items: start; }
.nadine-copy .t-body { max-width: 52ch; }
.nadine-points { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 12px; }
.nadine-points li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; }
.point-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--sunken); border: 1px solid var(--line); color: var(--accent-deep); }
.point-icon svg { width: 19px; height: 19px; }
.nadine .store-line { color: var(--ink-2); }
.chat-mock { display: grid; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-rail); overflow: hidden; box-shadow: 0 34px 70px -40px rgba(31, 34, 29, 0.5); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat-head strong { display: block; color: var(--brand-deep); font-weight: 600; line-height: 1.3; }
.chat-head small { display: block; color: var(--ink-2); font-size: 0.76rem; }
.chat-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--accent-soft); }
.chat-avatar svg { width: 20px; height: 20px; }
.chat-avatar.small { width: 30px; height: 30px; margin-top: 22px; }
.chat-avatar.small svg { width: 15px; height: 15px; }
.chat-body { display: grid; gap: 14px; padding: 18px 18px 4px; }
.bubble-user { justify-self: end; max-width: 82%; padding: 10px 16px; border-radius: 20px; border-end-end-radius: 6px; background: var(--brand); color: var(--on-brand); font-size: 0.92rem; line-height: 1.6; }
.chat-answer { display: flex; align-items: flex-start; gap: 10px; }
.chat-answer-body { display: grid; gap: 8px; justify-items: start; min-width: 0; flex: 1; }
.chat-answer-body > small { font-size: 0.74rem; color: var(--ink-2); }
.bubble-answer { padding: 10px 14px; border-radius: 20px; border-start-start-radius: 6px; background: var(--ground); font-size: 0.92rem; line-height: 1.7; }
.cite { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 0.7rem; font-weight: 600; vertical-align: 1px; }
.chat-unit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; padding-inline-end: 14px; border-radius: 18px; background: var(--ground); border: 1px solid var(--line); }
.chat-unit-photo { position: relative; flex: none; width: 84px; height: 70px; border-radius: 12px; overflow: hidden; background: var(--sunken); }
.chat-unit-photo img { width: 100%; height: 100%; object-fit: cover; }
.chat-unit-photo .cite { position: absolute; top: 6px; inset-inline-start: 6px; }
.chat-unit-text { display: grid; gap: 2px; min-width: 0; font-size: 0.78rem; color: var(--ink-2); }
.chat-unit-text strong { color: var(--brand-deep); font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-unit-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--ink-2); }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-chips span { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: 0.78rem; color: var(--brand-deep); }
.chat-input { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 6px; padding-inline-start: 16px; border-radius: var(--r-pill); background: var(--ground); border: 1px solid var(--line); color: var(--ink-2); font-size: 0.88rem; }
.chat-input > span:first-child { flex: 1; }
.chat-send { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.chat-send svg { width: 18px; height: 18px; }

/* steps: one sequence, the discs joined by a line (design system StepProgress) */
.steps { --steps-gap: clamp(20px, 4vw, 56px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--steps-gap); counter-reset: step; }
.steps li { position: relative; display: grid; gap: 8px; align-content: start; }
.steps li::before { counter-increment: step; content: counter(step); position: relative; z-index: 1; font-family: var(--font-num); width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 600; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 19px; inset-inline-start: 52px; width: calc(100% + var(--steps-gap) - 64px); height: 2px; border-radius: 2px; background: var(--line-strong); }
.steps p { color: var(--ink-2); font-size: 0.95rem; max-width: 34ch; }

/* tabs (design system pill tabs: h40, r51, sliding brand pill) + chips (h38) */
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.tabs a { padding: 8px 18px; border-radius: var(--r-pill); color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.92rem; }
.tabs a[aria-current="true"] { background: var(--brand); color: var(--on-brand); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.9rem; }
.chip[aria-current="true"] { border-color: var(--brand); background: var(--info-bg); color: var(--brand-deep); font-weight: 600; }
.chip.solid { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 22px; }

/* spec tiles + facts (design system UnitSections) */
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.spec { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 14px; text-align: center; display: grid; justify-items: center; align-content: start; gap: 4px; }
.spec-icon { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--brand); }
.spec-icon svg { width: 20px; height: 20px; }
.spec .value { font-family: var(--font-num); font-weight: 600; font-size: 1.1rem; color: var(--brand-deep); }
.spec .label { font-size: 0.8rem; color: var(--ink-2); }
.facts { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 20px; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 500; color: var(--brand-deep); }

/* gallery (scroll-snap, like the app's UnitGallery) */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r-rail); scrollbar-width: none; background: var(--sunken); }
.gallery::-webkit-scrollbar { display: none; }
.gallery img { scroll-snap-align: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-count { margin-top: 8px; }

/* detail layout + dock */
.detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.detail-aside { position: sticky; top: 92px; display: grid; gap: 14px; }
.dock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; display: grid; gap: 10px; box-shadow: var(--shadow-dock); }

/* page hero (inner pages) */
.page-sky { padding-block: 48px 104px; }
.page-sky .t-body { max-width: 62ch; margin-top: 10px; }
.crumbs { font-size: 0.85rem; color: var(--on-brand-muted); margin-bottom: 12px; }
.crumbs a { color: var(--on-brand-muted); }

/* documents */
.doc { padding-block: 8px 80px; }
.doc .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(22px, 4vw, 40px); }
.doc h2 { font-size: 1.25rem; margin: 1.8em 0 0.5em; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { color: var(--ink); }
.doc ul, .doc ol { padding-inline-start: 1.3em; margin: 0.6em 0; }
.doc li { margin-bottom: 0.4em; }
.note { margin: 18px 0; padding: 14px 18px; border-radius: var(--r-btn); background: var(--info-bg); border-inline-start: 4px solid var(--accent); }

/* forms */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(22px, 3.4vw, 34px); }
.panel h2 { font-size: 1.2rem; margin-bottom: 10px; }
.panel ol, .panel ul { padding-inline-start: 1.2em; margin: 8px 0 0; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 500; font-size: 0.92rem; }
.field small { color: var(--ink-2); font-size: 0.82rem; }
.input { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--r-field); border: 1px solid var(--line-strong); background: var(--white); font: inherit; font-size: 16px; color: var(--ink); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(65, 73, 54, 0.16); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.error { color: var(--danger); font-size: 0.86rem; }
.alert { border-radius: var(--r-btn); padding: 16px 18px; margin-bottom: 18px; }
.alert-ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); }

/* faq + contact */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--brand-deep); list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: -6px 0 0; padding: 0 20px 16px; color: var(--ink-2); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; }
.contact-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list a { display: inline-flex; align-items: center; min-height: 40px; margin-block: -7px; }
.contact-list span:first-child { color: var(--ink-2); }

/* values / timeline (about) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.quote { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.7; color: var(--brand-deep); font-weight: 500; }

/* empty state (design system EmptyState with the brand element) */
.empty { text-align: center; padding: 56px 20px; display: grid; justify-items: center; gap: 10px; }
.empty img { width: 80px; opacity: 0.8; }

/* pagination */
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }

/* footer */
.site-footer { background: var(--brand-deep); color: var(--on-brand-muted); padding-block: 52px 28px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; }
.site-footer img { height: 42px; width: auto; margin-bottom: 14px; }
.site-footer h2 { color: var(--on-brand); font-size: 0.98rem; margin-bottom: 4px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; }
.site-footer a { display: inline-block; padding-block: 8px; color: rgba(242, 238, 230, 0.85); text-decoration: none; }
.site-footer a:hover { color: #fff; }
/* after a closing band the olive runs on; a hairline marks where the site's links begin */
main:has(> .sheet > .band:last-child) + .site-footer { padding-top: 0; }
main:has(> .sheet > .band:last-child) + .site-footer > .wrap { border-top: 1px solid rgba(242, 238, 230, 0.12); padding-top: 44px; }
.footer-base { grid-column: 1 / -1; border-top: 1px solid rgba(242, 238, 230, 0.14); padding-top: 20px; font-size: 0.84rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (min-width: 981px) and (max-width: 1180px) {
    .toast { inset-inline-end: 0; }
}

@media (max-width: 980px) {
    .hero-grid, .detail, .split, .band-grid, .cards-2, .nadine-grid { grid-template-columns: 1fr; }
    .grid-tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reels-split { grid-template-columns: 1fr; gap: 18px; }
    .reels-split .reels-rail { grid-auto-columns: 176px; }
    .detail-aside { position: static; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .site-footer .wrap { grid-template-columns: 1fr 1fr; }
    .hero-visual { width: min(340px, 100%); }
    .device { width: 214px; }
}

@media (max-width: 640px) {
    .site-nav { display: none; }
    .site-menu { display: block; }
    .site-header .wrap { gap: 10px; }
    .lang-switch { margin-inline-start: auto; }
    .tiles, .steps, .site-footer .wrap { grid-template-columns: 1fr; }
    .steps li { padding-inline-start: 56px; }
    .steps li::before { position: absolute; inset-inline-start: 0; top: 0; margin: 0; }
    .steps li:not(:last-child)::after { top: 48px; inset-inline-start: 19px; width: 2px; height: calc(100% + var(--steps-gap) - 56px); }
    .sky { padding-block: 40px 104px; }
    .section { padding-block: 40px; }
    .dark-card { padding: 28px; }
    .rail { grid-auto-columns: 82%; }
    .hero { padding-block: 40px 104px; }
    .hero-visual { display: none; }
    .ledger a { padding-inline: 16px; }
    .promo { --slide: 86cqw; }
    .grid-tiles, .grid-tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .compound-tile .plate { height: 66px; }
    .compound-tile .body { padding: 0 12px 12px; }
    .compound-tile .logo { width: 50px; height: 50px; margin-top: -26px; border-radius: 15px; padding: 4px; }
    .compound-tile strong { font-size: 0.94rem; }
    .compound-tile .counts > span { padding: 2px 8px; font-size: 0.74rem; }
    .compound-tile .counts .go { display: none; }
    .reels-split .reels-rail { grid-auto-columns: 46%; }
    .compound-tile .badge-chip { top: 10px; inset-inline-start: 10px; }
    .section-head { margin-bottom: 18px; }
    .mini-stats li { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .seg span, .ledger strong, .unit-card, .compound-card, .compound-tile, .compound-tile .go, .see-all, .rail-btn, .site-nav a { transition: none; }
}

/* Unit page — the app's sections: grouped room tiles, location, rooms and sizes */
.spec .phrase { font-weight: 600; color: var(--brand-deep); font-size: 0.98rem; padding: 6px 0; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 20px; display: grid; gap: 6px; }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.box-head .chip { min-height: 40px; font-weight: 600; color: var(--brand-deep); background: var(--ground); }
.facts.plain { background: none; border: 0; border-radius: 0; padding: 0; }
.chip.corner { justify-self: start; min-height: 30px; font-size: 0.82rem; }
.facts.rooms dd { display: inline-flex; align-items: baseline; gap: 14px; }
.facts.rooms .dims { color: var(--ink-2); font-weight: 400; }
.layout-image { width: 100%; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); }
.aside-title { margin: 6px 4px -6px; font-weight: 600; }

/* Reels — the app's 9:16 cards: poster, play mark, length and the compound */
.reels-rail { grid-auto-columns: 176px; }
.reel-card { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--r-card); overflow: hidden; background: var(--sky); color: var(--on-brand); text-decoration: none; }
.reel-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31, 34, 29, 0.72), transparent 45%); }
.reel-play { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(242, 238, 230, 0.22); backdrop-filter: blur(8px); }
.reel-play svg { width: 16px; height: 16px; }
.reel-time { position: absolute; top: 14px; inset-inline-start: 12px; z-index: 1; font-size: 0.78rem; font-weight: 600; }
.reel-center { position: absolute; inset-inline: 10px; bottom: 10px; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; }
.reel-center img { width: 26px; height: 26px; border-radius: 8px; background: var(--white); object-fit: contain; padding: 2px; }
.reel-center span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .reels-rail { grid-auto-columns: 46%; } }

/* Compound page — the app's identity card (white, the one white surface), facility chips */
.identity-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.identity-cover { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: var(--sunken); }
.identity-cover.motif { position: relative; overflow: hidden; background: var(--sky); }
.identity-cover.motif::before { content: ""; position: absolute; inset-inline-start: -8%; top: -60%; width: 70%; aspect-ratio: 1; background: url("brand/element-sand.svg") center / contain no-repeat; opacity: 0.09; }
.identity-cover.motif::after { content: ""; position: absolute; inset-inline-end: 8%; top: 22%; width: 22%; aspect-ratio: 1; background: url("brand/element-copper.svg") center / contain no-repeat; opacity: 0.55; }
.identity-body { padding: 0 22px 20px; display: grid; gap: 10px; }
.identity-logo { width: 76px; height: 76px; margin-top: -38px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); object-fit: contain; padding: 6px; position: relative; box-shadow: 0 12px 24px -16px rgba(31, 34, 29, 0.55); }
.identity-logo.initial { display: grid; place-items: center; padding: 0; font-size: 2rem; font-weight: 700; color: var(--brand); }
.identity-card:not(:has(.identity-cover)) .identity-logo { margin-top: 20px; }
.identity-address { display: flex; align-items: center; gap: 6px; }
.identity-counts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.identity-counts div { display: grid; justify-items: center; gap: 2px; }
.identity-counts svg { width: 20px; height: 20px; color: var(--accent); margin-bottom: 2px; }
.identity-counts div + div { border-inline-start: 1px solid var(--line); }
.identity-counts .num { font-weight: 600; font-size: 1.2rem; color: var(--brand-deep); }
details.more summary { list-style: none; cursor: pointer; }
details.more summary::-webkit-details-marker { display: none; }
details.more[open] summary { display: none; }
.more-link { color: var(--brand); font-weight: 600; white-space: nowrap; }
.facility-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.facility-chip { border: 1px solid var(--line); border-radius: 16px; background: var(--ground); }
.facility-chip summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 500; }
.facility-chip summary::-webkit-details-marker { display: none; }
.facility-chip summary img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; background: var(--sunken); }
.facility-chip p { margin: 0; padding: 0 12px 10px; max-width: 32ch; }
.facility-chip[open] { flex-basis: 100%; }
.stack { display: grid; gap: 12px; justify-items: start; }
.stack .btn-row { margin-top: 8px; }
/* a compound's own reels and ads, on olive like every ad */
.media-card { display: grid; gap: 16px; }
.media-card .reels-rail { grid-auto-columns: 168px; }
.dock-price { display: grid; gap: 2px; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.dock-price strong { font-size: 1.5rem; font-weight: 600; color: var(--brand-deep); line-height: 1.3; }
:is(.dark-card, .band) .stat { background: rgba(242, 238, 230, 0.08); border-color: rgba(242, 238, 230, 0.14); }
:is(.dark-card, .band) .stat .value { color: var(--on-brand); }
:is(.dark-card, .band) .stat :is(.label, .muted) { color: var(--on-brand-muted); }
/* Safari before 16 has no container units: percentage slides there, starting at the same edge */
@supports not (width: 1cqw) {
    .promo { grid-auto-columns: min(78%, 760px); }
    @media (max-width: 640px) { .promo { grid-auto-columns: 86%; } }
}

/* The deletion form's answers: below the sticky header, not under it. */
#delete-form { scroll-margin-top: 88px; }

/* /docs/login: the API docs' door, for super admins (owner, 2026-11-04) — one ivory card on the olive sky */
.docs-login { min-height: 100vh; background: var(--sky); }
.docs-login-main { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.docs-login-card { width: min(100%, 420px); display: grid; gap: 14px; padding: clamp(24px, 5vw, 36px); border-radius: var(--r-sheet); background: var(--surface); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.docs-login-logo { height: 40px; width: auto; justify-self: start; }
.docs-login-field { display: grid; gap: 6px; }
.docs-login-field label { font-weight: 600; font-size: 0.92rem; color: var(--brand-deep); }
.docs-login-error { margin: 0; padding: 10px 14px; border-radius: var(--r-btn); background: #F6E3DF; color: #8A2C1D; font-size: 0.92rem; }
.docs-login-card .btn { width: 100%; margin-top: 4px; }