/* ==========================================================================
   Mutah landing page
   Mutah: bone paper, forest ink, orange for the one action that matters.
   Invowise: cream ledger, deep green, gold.
   ========================================================================== */

:root {
  /* Mutah */
  --paper: #FBFAF7;
  --canvas: #F2F1EC;
  --bone: #E8E5DD;
  --bone-deep: #D9D5C8;
  --forest: #1C382B;
  --forest-deep: #0F2018;
  --orange: #E86A14;
  --orange-hover: #F27B27;
  --ink: #161311;
  --ink-soft: #3B352C;
  --taupe: #6F6553;
  --taupe-light: #867A65;
  --line: rgba(22, 19, 17, 0.12);
  --success: #1F8A5B;

  /* Invowise */
  --iw-green: #0f4d2e;
  --iw-green-deep: #0a2e1b;
  --iw-gold: #d99a2b;
  --iw-gold-soft: #F6E8CB;
  --iw-gold-ink: #7A5410;
  --iw-cream: #f7f5ef;
  --iw-line: #ece9e0;
  --iw-card: #ffffff;
  --iw-ink: #1d2a22;
  --iw-body: #3d4a41;
  --iw-muted: #5f6b62;

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-ar-display: "Alexandria", "IBM Plex Sans Arabic", "Geist", sans-serif;
  --font-ar-body: "IBM Plex Sans Arabic", "Geist", sans-serif;
  --brand-font: "Bricolage Grotesque", ui-sans-serif, sans-serif;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 10vw, 144px);

  /* Paper grain: warm speckle, tiled */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .21 0 0 0 .45 -.17'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .92 0 0 0 .36 -.14'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[lang="ar"] {
  --font-display: var(--font-ar-display);
  --font-body: var(--font-ar-body);
  --font-label: var(--font-ar-body);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] body { line-height: 1.75; }

img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
a { color: inherit; }
button { font: inherit; }

/* Set by the inline script in <head> while the Arabic text is being swapped in. */
.lang-pending body { visibility: hidden; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.i {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ar { font-family: var(--font-ar-display); letter-spacing: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:focus-visible {
  outline: 2.5px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 100;
  background: var(--forest);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */

.display-1,
.display-2,
.display-3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--forest);
  text-wrap: balance;
}

.display-1 {
  font-size: clamp(44px, 6.2vw, 88px);
  font-stretch: 90%;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.display-1 .ar { font-size: 0.9em; font-weight: 700; }

.display-2 {
  font-size: clamp(34px, 4.3vw, 58px);
  font-stretch: 88%;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.display-3 {
  font-size: clamp(26px, 2.5vw, 34px);
  font-stretch: 92%;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

html[lang="ar"] :is(.display-1, .display-2, .display-3) {
  letter-spacing: 0;
  line-height: 1.3;
}
html[lang="ar"] .display-1 { font-size: clamp(40px, 5.4vw, 74px); line-height: 1.25; }

.lead {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34em;
}
html[lang="ar"] .lead { line-height: 1.85; }

/* Small mono labels, as the brief asks. Arabic has no capitals and
   must never be letter-spaced, so these revert in Arabic. */
.also-title, .fig-no, .pillar-label, .transfer-kicker, .ai-slip-label, .iw-by, .ai-name, .ai-try, .win-meta,
.win-table th, .ai-answer th, .footer-col h3, .sf-listed,
.stack-label, .note-key, .sf-stock {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[lang="ar"] :is(.also-title, .fig-no, .pillar-label, .transfer-kicker, .ai-slip-label, .iw-by, .ai-name, .ai-try, .win-meta,
.win-table th, .ai-answer th, .footer-col h3, .sf-listed,
.stack-label, .sf-stock) {
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 15px; }

.btn-orange { background: var(--orange); color: var(--forest-deep); }
.btn-orange:hover { background: var(--orange-hover); }

.btn-gold { background: var(--iw-gold); color: var(--iw-green-deep); }
.btn-gold:hover { background: #E6A83A; }

.btn-line {
  background: transparent;
  color: var(--iw-green);
  box-shadow: inset 0 0 0 1.5px rgba(15, 77, 46, 0.55);
}
.btn-line:hover { background: rgba(15, 77, 46, 0.06); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 22px 8px 16px;
  border-radius: 14px;
  background: var(--forest);
  color: var(--paper);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
html[dir="rtl"] .store-btn { padding: 8px 16px 8px 22px; }
.store-btn:hover { background: #274A3A; }
.store-logo { width: 26px; height: 26px; flex: none; }
.store-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-text small { font-size: 12px; opacity: 0.8; }
.store-text b { font-family: var(--brand-font); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

.store-btn-light { background: var(--paper); color: var(--forest); }
.store-btn-light:hover { background: #fff; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 247, 0.9);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-row {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--forest);
  text-decoration: none;
}
.brand-mark { width: 24px; height: auto; }
.brand-name {
  font-family: var(--brand-font);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-ar { font-size: 18px; font-weight: 600; color: var(--taupe-light); line-height: 1; }

.main-nav { display: flex; gap: 30px; margin-inline-start: auto; }
.main-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  padding-block: 8px;
}
.main-nav a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang-toggle {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--forest);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.lang-toggle:hover { background: rgba(28, 56, 43, 0.06); }
.lang-label.en { font-family: var(--font-body); }

@media (max-width: 800px) {
  .main-nav { display: none; }
  .header-actions { margin-inline-start: auto; }
}
@media (max-width: 400px) {
  .brand-ar { display: none; }
  .lang-toggle { padding: 0 12px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-block: clamp(36px, 5vw, 72px) clamp(64px, 8vw, 120px); overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: center;
}

.definition {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--bone-deep);
  color: var(--taupe);
  font-size: 15px;
  max-width: 30em;
}
.def-word { font-size: 24px; font-weight: 700; color: var(--forest); line-height: 1.2; }
.def-pron { font-family: var(--font-label); font-size: 13px; color: var(--taupe-light); margin-inline-end: 4px; }

.hero .display-1 { margin-bottom: clamp(20px, 2.4vw, 32px); }
.hero .lead { margin-bottom: 32px; }

.hero-aside { margin-top: 22px; font-size: 15px; color: var(--taupe); }
.hero-aside a, .role a {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(28, 56, 43, 0.35);
}
.hero-aside a:hover, .role a:hover { text-decoration-color: currentColor; }

/* ---------- The annotated phone ---------- */

.specimen { margin: 0; }

.specimen-plate {
  --legend: 0;
  position: relative;
  aspect-ratio: 640 / 620;
  width: 100%;
}

.brush {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
html[dir="rtl"] .brush { transform: scaleX(-1); }

.phone {
  position: absolute;
  inset-inline-start: 27.5%;
  top: 0.8%;
  width: 45%;
  aspect-ratio: 9 / 18.8;
  container-type: inline-size;
  z-index: 2;
}

.phone-body {
  position: absolute;
  inset: 0;
  padding: 2.4cqw;
  border-radius: 14cqw;
  background: #1D1A16;
  box-shadow:
    inset 0 0 0 0.5cqw #3A352D,
    0 34px 50px -30px rgba(50, 36, 14, 0.6),
    0 10px 20px -12px rgba(50, 36, 14, 0.35);
}

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 11.8cqw;
  overflow: hidden;
  background: var(--canvas);
  container-type: inline-size;
}

/* The home screen, in app points: 1pt = 1/390 of the screen width
   (sizes follow app5's tokens and home components). */
.app {
  --u: calc(100cqw / 390);
  position: relative;
  height: 100%;
  font-family: var(--font-body);
  font-size: calc(13 * var(--u));
  line-height: 1.3;
  color: var(--ink);
}
.app .i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

.app-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(46 * var(--u));
  padding-inline: calc(32 * var(--u)) calc(28 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 600;
}
.app-status-icons { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); }
.app-status-icons i { display: block; width: calc(3 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--ink); }
.app-status-icons i:nth-child(1) { height: calc(5 * var(--u)); }
.app-status-icons i:nth-child(2) { height: calc(8 * var(--u)); }
.app-status-icons i:nth-child(3) { height: calc(11 * var(--u)); }
.app-status-icons b {
  position: relative;
  width: calc(24 * var(--u));
  height: calc(11.5 * var(--u));
  margin-inline-start: calc(5 * var(--u));
  border: calc(1.2 * var(--u)) solid rgba(22, 19, 17, 0.45);
  border-radius: calc(3.5 * var(--u));
}
.app-status-icons b::after {
  content: "";
  position: absolute;
  inset: calc(1.6 * var(--u)) calc(5 * var(--u)) calc(1.6 * var(--u)) calc(1.6 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--ink);
}

.app-header {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
}
.app-logo { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); object-fit: contain; }
.app-hello { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-kicker {
  font-family: var(--font-label);
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
  font-weight: 600;
  letter-spacing: calc(1.2 * var(--u));
  text-transform: uppercase;
  color: var(--taupe-light);
  white-space: nowrap;
}
.app-greeting {
  font-family: var(--brand-font);
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-0.4 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[lang="ar"] .app-kicker { letter-spacing: 0; }
html[lang="ar"] .app-greeting { font-family: var(--font-ar-display); letter-spacing: 0; font-size: calc(16 * var(--u)); line-height: calc(26 * var(--u)); }

.app-round-btn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(20, 16, 10, 0.06);
}
.app .app-round-btn .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.7; }
.app-badge {
  position: absolute;
  top: calc(-2 * var(--u));
  inset-inline-end: calc(-2 * var(--u));
  display: grid;
  place-items: center;
  min-width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  padding-inline: calc(4 * var(--u));
  border-radius: calc(9 * var(--u));
  border: calc(2 * var(--u)) solid var(--canvas);
  background: #D9322F;
  color: #fff;
  font-family: var(--font-label);
  font-size: calc(9 * var(--u));
  line-height: 1;
}
.app-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-family: var(--brand-font);
  font-size: calc(16 * var(--u));
  font-weight: 600;
}
html[lang="ar"] .app-avatar { font-family: var(--font-ar-display); }

.app-search {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  height: calc(50 * var(--u));
  margin: 0 calc(16 * var(--u)) calc(20 * var(--u));
  padding-inline: calc(16 * var(--u)) calc(6 * var(--u));
  border-radius: calc(25 * var(--u));
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(20, 16, 10, 0.05);
  color: var(--taupe-light);
}
.app-search > span:not(.app-qr) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .app-search-icon { color: var(--forest); stroke-width: 2; }
.app-qr {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
}

.app-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(8 * var(--u));
  padding: 0 calc(16 * var(--u)) calc(24 * var(--u));
}
.app-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  aspect-ratio: 1.05;
  padding: calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
  color: #fff;
}
.app .app-tile .i { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 1.8; }
.app-tile > span { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.app-tile b {
  font-family: var(--brand-font);
  font-size: calc(12 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-0.25 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-tile i {
  font-style: normal;
  font-size: calc(10 * var(--u));
  line-height: calc(13 * var(--u));
  opacity: 0.7;
  white-space: nowrap;
}

/* App tile colours (MuCategoryTile tones). The landing tiles reuse the first four. */
.tone-green { background: var(--forest); }
.tone-orange { background: var(--orange); }
.tone-saffron { background: #C08222; }
.tone-olive { background: #6F7F3F; }
.tone-voucher { background: #FFCC00; color: #1A1407; }
.tone-teal { background: #2F6F6A; }
.tone-date { background: #7A5230; }
.tone-pomegranate { background: #A93B3B; }

.app-ribbon {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin: 0 calc(16 * var(--u)) calc(24 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(14 * var(--u));
  border: 1px solid rgba(22, 19, 17, 0.04);
  background: #E7F4ED;
}
.app-ribbon-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #fff;
  color: var(--success);
}
.app-ribbon-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-ribbon-text b { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 500; white-space: nowrap; }
.app-ribbon-action { font-size: calc(13 * var(--u)); font-weight: 500; color: var(--success); }

.app-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: 0 calc(16 * var(--u)) calc(12 * var(--u));
}
.app-section-titles { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.app-section-titles b {
  font-family: var(--brand-font);
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-0.4 * var(--u));
}
.app-section-titles > .ar { font-family: var(--font-ar-body); font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); color: var(--taupe-light); }
.app-kicker .ar { font-family: var(--font-ar-body); letter-spacing: 0; }
.app-link { font-size: calc(13 * var(--u)); font-weight: 500; color: var(--forest); }

.app-live {
  position: relative;
  height: calc(208 * var(--u));
  margin: 0 calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  background: #D9D6C9;
}
.app-live-poster { width: 100%; height: 100%; }
.app-live-pill {
  position: absolute;
  top: calc(8 * var(--u));
  inset-inline-start: calc(8 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: #D9322F;
  color: #fff;
  font-family: var(--font-label);
  font-size: calc(9 * var(--u));
  line-height: calc(11 * var(--u));
  font-weight: 600;
  letter-spacing: calc(0.8 * var(--u));
}
html[lang="ar"] .app-live-pill { letter-spacing: 0; font-size: calc(10 * var(--u)); }
.app-live-pill i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #fff; }
.app-live-scrim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: rgba(15, 32, 24, 0.45);
  color: #fff;
}
.app-live-store { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 500; }
.app .app-live-store .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.app-live-viewers { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); }
.app .app-live-viewers .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

.app-dock {
  position: absolute;
  inset-inline: calc(16 * var(--u));
  bottom: calc(18 * var(--u));
  height: calc(64 * var(--u));
  display: flex;
  align-items: center;
  padding-inline: calc(6 * var(--u));
  border-radius: calc(32 * var(--u));
  background: var(--forest);
  box-shadow: 0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-8 * var(--u)) rgba(15, 32, 24, 0.45);
}
.app-dock-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.app-dock-tab.is-active { color: #fff; font-size: calc(13 * var(--u)); font-weight: 500; }
.app-dock-gap { flex: 1; }
.app-dock-cta {
  position: absolute;
  inset-inline: 0;
  bottom: calc(24 * var(--u));
  display: flex;
  justify-content: center;
}
.app-dock-cta > span {
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  box-shadow: 0 0 0 calc(4 * var(--u)) var(--canvas), 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(232, 106, 20, 0.35);
}
.app .app-dock-cta .i { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 2.2; }

/* Circled letters on the phone, pencil-irregular */
.pin {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 7.2cqw;
  height: 7.2cqw;
  margin-inline-start: -3.6cqw;
  margin-top: -3.6cqw;
  border: 0.55cqw solid var(--forest-deep);
  border-radius: 52% 48% 55% 45% / 47% 55% 45% 53%;
  background: var(--paper);
  color: var(--forest-deep);
  font-family: var(--font-label);
  font-size: 3.6cqw;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(20, 16, 10, 0.18);
}
.pin-a { inset-inline-start: 80%; top: 16.2%; }
.pin-b { inset-inline-start: 7%; top: 24%; }
.pin-c { inset-inline-start: 20%; top: 71%; }
.pin-d { inset-inline-start: 57%; top: 88.5%; }

/* Tapered ink strokes, drawn by main.js */
.annotation-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
  fill: var(--orange);
}

.notes { list-style: none; margin: 0; padding: 0; }

.note {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 9px;
  width: fit-content;
  max-width: 23%;
  font-size: 14.5px;
  line-height: 1.38;
  color: var(--forest);
}
.note-key {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -1px;
  border: 1.5px solid currentColor;
  border-radius: 52% 48% 55% 45% / 47% 55% 45% 53%;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}
.note-a { inset-inline-end: 0; top: 13%; }
.note-b { inset-inline-start: 0; top: 20%; }
.note-c { inset-inline-start: 0; top: 58%; }
.note-d { inset-inline-end: 0; top: 74%; }

.fig-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  color: var(--taupe);
}
.fig-no { font-size: 12px; color: var(--forest); margin-inline-end: 8px; }

/* One orchestrated moment: notes appear, then their arrows are inked in. */
.js .specimen-plate:not(.is-static) .note { opacity: 0; }
.specimen-plate.is-drawing .note { animation: note-in 0.45s ease forwards; animation-delay: var(--d, 0s); }
.specimen-plate.is-drawing .annotation-arrows mask path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.6s cubic-bezier(0.55, 0.1, 0.35, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes note-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .specimen-plate .note { opacity: 1; animation: none; }
  .specimen-plate.is-drawing .annotation-arrows mask path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 680px; }
  .specimen { max-width: 680px; width: 100%; margin-inline: auto; }
}

/* Small screens: the notes become a legend under the phone. */
@media (max-width: 640px) {
  .specimen-plate { --legend: 1; aspect-ratio: auto; padding-top: 12px; }
  .phone { position: relative; inset: auto; width: min(300px, 76vw); margin-inline: auto; }
  .brush { inset: 6% -6% auto; width: 112%; height: auto; }
  .annotation-arrows { display: none; }
  .notes {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-top: 28px;
  }
  .note { position: static; max-width: none; width: auto; font-size: 14px; }
  .js .specimen-plate:not(.is-static) .note { opacity: 1; }
  .specimen-plate.is-drawing .note { animation: none; }
}

/* ==========================================================================
   Four ways in + roles
   ========================================================================== */

.ways {
  background-color: var(--bone);
  background-image: var(--grain);
  padding-block: var(--section) clamp(72px, 8vw, 112px);
}

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .display-2 { margin-bottom: 18px; }

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 4.6;
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: 22px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 22px 30px -26px rgba(50, 36, 14, 0.7);
}
/* Printed-card speckle */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-light);
  opacity: 0.55;
  pointer-events: none;
}
.tile-item:nth-child(1) .tile { rotate: -1.2deg; }
.tile-item:nth-child(2) .tile { rotate: 0.8deg; }
.tile-item:nth-child(3) .tile { rotate: -0.5deg; }
.tile-item:nth-child(4) .tile { rotate: 1.3deg; }

.tile-icon {
  position: absolute;
  top: -7%;
  inset-inline-end: -9%;
  width: 64%;
  height: auto;
  aspect-ratio: 1;
  fill: rgba(255, 255, 255, 0.9);
}
.tile-en {
  position: relative;
  font-family: var(--brand-font);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.tile-ar { position: relative; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; line-height: 1.5; opacity: 0.88; }
html[lang="ar"] .tile-ar { order: -1; font-size: clamp(24px, 2.4vw, 32px); opacity: 1; line-height: 1.3; }
html[lang="ar"] .tile-en { font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; opacity: 0.85; }

.tile-item p { margin-top: 18px; font-size: 16px; color: var(--ink-soft); max-width: 30ch; }

.also {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  margin-top: clamp(56px, 7vw, 96px);
}
.also-title { font-size: 12px; color: var(--taupe); padding-top: 5px; }
.also-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.also-list li { display: flex; gap: 14px; }
.also-list .i { flex: none; width: 26px; height: 26px; margin-top: 1px; color: var(--forest); }
.also-list b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--forest);
}
.also-list p { font-size: 15.5px; color: var(--ink-soft); }

.drawn-rule {
  display: block;
  width: 100%;
  height: 12px;
  margin-block: clamp(56px, 7vw, 96px);
  overflow: visible;
  fill: none;
  stroke: var(--forest);
  stroke-opacity: 0.35;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.drawn-rule path { vector-effect: non-scaling-stroke; }

.roles {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.roles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.role + .role { border-inline-start: 1px solid rgba(22, 19, 17, 0.14); padding-inline-start: 28px; }
.role h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--brand-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--forest);
}
.role h3 .ar { font-size: 18px; font-weight: 600; color: var(--taupe-light); }
html[lang="ar"] .role h3 span:first-child { order: 1; font-size: 17px; font-weight: 600; color: var(--taupe-light); }
html[lang="ar"] .role h3 .ar { font-size: 24px; font-weight: 700; color: var(--forest); }
.role p { font-size: 16px; color: var(--ink-soft); }

@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .also { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .also-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .roles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .roles-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .role + .role { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid rgba(22, 19, 17, 0.14); padding-top: 22px; }
  .tile-item p { font-size: 15px; margin-top: 14px; }
}

/* ==========================================================================
   Invowise
   ========================================================================== */

.iw {
  position: relative;
  background-color: var(--iw-cream);
  background-image: var(--grain);
  color: var(--iw-ink);
  padding-block: clamp(64px, 8vw, 112px) var(--section);
}
.iw :focus-visible { outline-color: var(--iw-green); }

.torn-edge {
  position: absolute;
  left: 0;
  top: -27px;
  width: 100%;
  height: 28px;
  fill: var(--iw-cream);
  filter: drop-shadow(0 -1px 1px rgba(60, 45, 20, 0.08));
}

.iw :is(.display-2, .display-3) { color: var(--iw-green); }
.iw .lead { color: var(--iw-body); }

.iw-masthead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-bottom: 16px;
  margin-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 3px double rgba(15, 77, 46, 0.35);
}
.iw-wordmark {
  font-family: var(--brand-font);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--iw-green);
}
.iw-by { font-size: 12.5px; color: var(--iw-muted); }

.iw-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(96px, 12vw, 168px);
}
.iw-intro .display-2 { margin-bottom: 22px; }
.iw-intro .lead { margin-bottom: 22px; }
.iw-who {
  max-width: 34em;
  margin-bottom: 32px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--iw-gold);
  font-size: 16px;
  color: var(--iw-muted);
}

/* ---------- The stack Invowise replaces ---------- */

.stack { position: relative; margin: 0; aspect-ratio: 560 / 500; }

.stack-item {
  position: absolute;
  box-shadow: 0 1px 1px rgba(60, 45, 20, 0.08), 0 20px 30px -20px rgba(60, 45, 20, 0.45);
}

.nb {
  inset-inline-start: 1%;
  top: 7%;
  width: 50%;
  aspect-ratio: 280 / 330;
  background: #FFFDF6;
  border-radius: 3px 3px 5px 5px;
  rotate: -4deg;
}
.nb-ink { width: 100%; height: 100%; }

.chat {
  inset-inline-end: 0;
  top: 0;
  width: 47%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border-radius: 16px;
  background: #E8E3D3;
  rotate: 3deg;
}
.bubble {
  max-width: 88%;
  padding: 7px 11px;
  border-radius: 12px;
  background: #fff;
  color: #1d2a22;
  font-size: 13.5px;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.bubble.in { align-self: flex-start; border-start-start-radius: 3px; }
.bubble.out { align-self: flex-end; background: #D9EDD3; border-start-end-radius: 3px; }

.sheet {
  inset-inline-end: 2%;
  bottom: 4%;
  width: 57%;
  background: #fff;
  rotate: -1.5deg;
}
.sheet table { width: 100%; border-collapse: collapse; font-family: var(--font-label); font-size: 12.5px; }
.sheet th, .sheet td { border: 1px solid #E3E2DC; padding: 6px 7px; text-align: start; white-space: nowrap; }
.sheet th { background: #F3F2EE; color: #8B8A83; font-weight: 500; font-size: 11px; text-align: center; }
.sheet td { color: #34332E; }
html[lang="ar"] .sheet td:first-child { font-family: var(--font-ar-body); }
.sheet .err { color: #B3261E; font-weight: 600; }

.tape {
  position: absolute;
  z-index: 2;
  width: 92px;
  height: 24px;
  background: rgba(228, 216, 186, 0.8);
  box-shadow: 0 1px 2px rgba(60, 45, 20, 0.12);
  clip-path: polygon(0 12%, 3% 0, 97% 4%, 100% 20%, 97% 38%, 100% 58%, 98% 80%, 100% 100%, 4% 96%, 0 82%, 3% 62%, 0 42%, 3% 25%);
}
.tape-nb { top: -9px; inset-inline-start: 36%; rotate: 4deg; }
.tape-sheet { top: -12px; inset-inline-end: 12px; rotate: -9deg; }

.stack-label {
  position: absolute;
  font-size: 11.5px;
  color: var(--iw-green);
  white-space: nowrap;
}
.stack-label::before { content: "↑ "; font-family: var(--font-body); }
.lbl-nb { inset-inline-start: 8%; top: 78%; rotate: -3deg; }
.lbl-chat { inset-inline-end: 6%; top: 40%; rotate: 2deg; }
.lbl-sheet { inset-inline-end: 22%; top: 100%; rotate: -1deg; }

/* ---------- Pillars ---------- */

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.pillar-sell { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pillar-copy .display-3 { margin-bottom: 14px; }
.pillar-copy > p { margin-bottom: 24px; font-size: 17px; color: var(--iw-body); max-width: 34em; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--iw-ink); }
.tick {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: #C4861C;
}

.iw-window {
  margin: 0;
  background: var(--iw-card);
  border: 1px solid var(--iw-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 77, 46, 0.03), 0 28px 50px -34px rgba(15, 77, 46, 0.45);
}

.win-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--iw-line);
}
.win-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--iw-green); }
.win-meta { font-size: 11.5px; color: var(--iw-muted); white-space: nowrap; }

.win-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.win-table th { padding: 12px 20px 8px; font-size: 11px; color: var(--iw-muted); text-align: start; }
.win-table td { padding: 13px 20px; border-top: 1px solid var(--iw-line); font-variant-numeric: tabular-nums; }
.win-table :is(td, th):nth-child(2),
.win-table :is(td, th):nth-child(3) { width: 1%; white-space: nowrap; text-align: end; }
.win-table :is(td, th):last-child { width: 1%; text-align: end; white-space: nowrap; }
.row-mark td { background: #FCF6E8; }

.chip {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: #F1EFE8;
  color: var(--iw-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.chip-low { background: var(--iw-gold-soft); color: var(--iw-gold-ink); }
.chip-damage { background: #F6E1DC; color: #8E3325; }

.win-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--iw-line);
  background: #FCFBF8;
  font-size: 14px;
  color: var(--iw-muted);
}
.win-btn {
  flex: none;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--iw-green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* Hand-drawn link between the two pillars */
.sync-note {
  position: relative;
  width: min(640px, 64%);
  height: 124px;
  margin: 10px auto;
  display: grid;
  place-items: center;
}
.sync-note svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sync-note path { vector-effect: non-scaling-stroke; }
html[dir="rtl"] .sync-note svg { transform: scaleX(-1); }
.sync-note span {
  position: relative;
  max-width: 26em;
  padding: 4px 10px;
  background: var(--iw-cream);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--iw-green);
  text-align: center;
  rotate: -2deg;
}

/* Storefront */
.sf-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--iw-line);
}
.sf-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--iw-green);
  color: var(--iw-cream);
  font-family: var(--font-ar-display);
  font-size: 22px;
  font-weight: 700;
}
.sf-name { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--iw-green); line-height: 1.2; }
.sf-meta { font-size: 13.5px; color: var(--iw-muted); }
.sf-listed {
  margin-inline-start: auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 77, 46, 0.25);
  color: var(--iw-green);
  font-size: 11px;
  white-space: nowrap;
}

.sf-products {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sf-products li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.sf-img {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
}
.sf-img::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); }
.sf-img svg { width: 100%; height: 100%; }
.tone-a { background: #EBDCD2; }
.tone-b { background: #DCC8A8; }
.tone-c { background: #D2D7BE; }
.sf-products b { font-weight: 600; font-size: 14.5px; color: var(--iw-ink); line-height: 1.3; }
.sf-price { font-variant-numeric: tabular-nums; color: var(--iw-ink); }
.sf-stock { align-self: flex-start; margin-top: 4px; font-size: 11px; color: var(--iw-muted); }
.sf-mark .sf-stock { padding: 2px 6px; border-radius: 6px; background: var(--iw-gold-soft); color: var(--iw-gold-ink); }
.sf-add {
  align-self: flex-start;
  margin-top: 10px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(15, 77, 46, 0.3);
  color: var(--iw-green);
  font-size: 13px;
  font-weight: 600;
}
.sf-cart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--iw-line);
  background: #FCFBF8;
  font-size: 14px;
  color: var(--iw-muted);
}
.sf-cart .i { width: 20px; height: 20px; color: var(--iw-green); }
.sf-checkout {
  margin-inline-start: auto;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--iw-gold);
  color: var(--iw-green-deep);
  font-weight: 600;
}

/* ---------- Invowise Community ---------- */

.community {
  margin-top: clamp(96px, 12vw, 168px);
  align-items: start;
}
.pillar-label { margin-bottom: 14px; font-size: 12.5px; color: var(--iw-green); }

.wall { position: relative; margin: 0; padding-inline-end: 34%; padding-bottom: 118px; }

.wall-board {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--iw-line);
  border-radius: 22px;
  background-color: #EFEBDF;
  background-image: var(--grain);
}
.wall-head b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--iw-green); line-height: 1.25; }
.wall-head span { font-size: 13.5px; color: var(--iw-muted); }

.post {
  padding: 16px;
  border: 1px solid var(--iw-line);
  border-radius: 16px;
  background: var(--iw-card);
  box-shadow: 0 14px 24px -22px rgba(15, 77, 46, 0.5);
}
.post-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--iw-green);
  color: var(--iw-cream);
  font-size: 17px;
  font-weight: 700;
}
.post-avatar.tone-f { background: #7A5230; }
.post-avatar.tone-r { background: #2F6F6A; }
.post-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.post-who b { font-size: 14.5px; font-weight: 600; color: var(--iw-ink); }
.post-who span { font-size: 12.5px; color: var(--iw-muted); }
.chip-request { background: var(--iw-gold-soft); color: var(--iw-gold-ink); }
.chip-offer { background: #E1EFE5; color: #1F6B41; }
.post > p { font-size: 15px; line-height: 1.45; color: var(--iw-ink); }

.post-media { position: relative; margin-top: 12px; aspect-ratio: 300 / 120; border-radius: 12px; overflow: hidden; }
.post-media svg { width: 100%; height: 100%; }
.post-media-more {
  position: absolute;
  inset-inline-end: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 32, 24, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.post-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--iw-line);
  font-size: 13px;
  color: var(--iw-muted);
  font-variant-numeric: tabular-nums;
}
.post-foot > span { display: inline-flex; align-items: center; gap: 5px; }
.post-foot .i { width: 16px; height: 16px; }
.post-msg { margin-inline-start: auto; font-weight: 600; color: var(--iw-green); }

.dm {
  position: absolute;
  inset-inline-end: 0;
  top: 44%;
  width: 37%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--iw-line);
  border-radius: 18px;
  background: var(--iw-card);
  box-shadow: 0 26px 44px -28px rgba(15, 77, 46, 0.6);
  rotate: 2deg;
}
html[dir="rtl"] .dm { rotate: -2deg; }
.dm-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--iw-line); }
.dm-head b { font-size: 14.5px; font-weight: 600; }
.dm .bubble { max-width: 94%; background: #F1EFE8; box-shadow: none; }

.transfer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px dashed rgba(15, 77, 46, 0.4);
  border-radius: 12px;
  background: var(--iw-cream);
}
.transfer-kicker { font-size: 11px; color: var(--iw-green); }
.transfer b { font-size: 15px; font-weight: 600; }
.transfer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.transfer-accept, .transfer-reject { padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.transfer-accept { background: var(--iw-green); color: #fff; }
.transfer-reject { box-shadow: inset 0 0 0 1px rgba(15, 77, 46, 0.3); color: var(--iw-green); }
.transfer small { font-size: 12px; line-height: 1.4; color: var(--iw-muted); }

.ai-slip {
  position: absolute;
  inset-inline-start: 7%;
  bottom: 0;
  width: 42%;
  padding: 18px 16px 14px;
  border-radius: 3px;
  background: #FFFCF3;
  box-shadow: 0 1px 1px rgba(60, 45, 20, 0.08), 0 18px 28px -20px rgba(60, 45, 20, 0.45);
  rotate: -2.5deg;
}
html[dir="rtl"] .ai-slip { rotate: 2.5deg; }
.ai-slip .tape { top: -11px; inset-inline-start: 34%; rotate: -4deg; }
.ai-slip-label { display: block; margin-bottom: 6px; font-size: 11px; color: var(--iw-gold-ink); }
.ai-slip p { font-size: 13.5px; line-height: 1.45; color: var(--iw-ink); }
.ai-slip .ai-slip-q { margin-bottom: 4px; font-size: 14.5px; font-weight: 600; color: var(--iw-green); }

@media (max-width: 960px) {
  .community { grid-template-columns: minmax(0, 1fr); }
  .wall { max-width: 640px; }
}
@media (max-width: 560px) {
  .wall { padding: 0; display: flex; flex-direction: column; }
  .wall-board { padding: 14px; }
  .dm { position: relative; inset: auto; width: 90%; align-self: flex-end; margin-top: -18px; }
  .ai-slip { position: relative; inset: auto; width: 84%; margin-top: 26px; }
}

/* ---------- Mutah AI ---------- */

.ai {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(96px, 12vw, 168px);
  padding: clamp(28px, 5vw, 64px);
  border-radius: 28px;
  background-color: var(--iw-green);
  background-image: var(--grain-light);
  color: var(--iw-cream);
}
.ai :focus-visible { outline-color: var(--iw-gold); }
.ai .display-2 { color: var(--iw-cream); margin-bottom: 20px; }
.ai-name { font-size: 12.5px; color: var(--iw-gold); margin-bottom: 18px; }
.ai-copy p:last-child { font-size: 17px; color: rgba(247, 245, 239, 0.84); max-width: 30em; }

.ai-try { font-size: 11.5px; color: rgba(247, 245, 239, 0.7); margin-bottom: 12px; }
.ai-prompts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ai-prompt {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(247, 245, 239, 0.38);
  background: transparent;
  color: var(--iw-cream);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ai-prompt:hover { border-color: rgba(247, 245, 239, 0.8); }
.ai-prompt[aria-pressed="true"] { background: var(--iw-cream); border-color: var(--iw-cream); color: var(--iw-green); }

.ai-window {
  overflow: hidden;
  border-radius: 18px;
  background: var(--iw-cream);
  color: var(--iw-ink);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.6);
}
.ai-ask {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--iw-line);
  background: #fff;
  font-size: 16px;
  font-weight: 500;
}
.ai-ask-text { flex: 1; min-height: 1.4em; }
.ai-ask-text.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 2px;
  vertical-align: -0.15em;
  background: var(--iw-green);
}
.ai-ask .i { width: 20px; height: 20px; color: var(--iw-green); }
html[dir="rtl"] .ai-ask .i { transform: scaleX(-1); }

.ai-answer { min-height: 272px; padding: 18px 18px 20px; }
.ai-answer > p { margin-bottom: 14px; font-size: 15.5px; }
.ai-answer table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 14.5px; }
.ai-answer th { padding-bottom: 8px; font-size: 11px; color: var(--iw-muted); text-align: start; }
.ai-answer td { padding: 9px 0; border-top: 1px solid var(--iw-line); font-variant-numeric: tabular-nums; }
.ai-answer :is(td, th):not(:first-child) { text-align: end; white-space: nowrap; padding-inline-start: 12px; }
.ai-action {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--iw-green);
  color: var(--iw-green);
  font-size: 14px;
  font-weight: 600;
}
.ai-reading { color: var(--iw-muted); font-size: 15px; }
.ai-answer.is-fresh > * { animation: answer-in 0.35s ease both; }
.ai-answer.is-fresh > :nth-child(2) { animation-delay: 0.06s; }
.ai-answer.is-fresh > :nth-child(3) { animation-delay: 0.12s; }
@keyframes answer-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ai-answer.is-fresh > * { animation: none; }
}

.ai-note { margin-top: 12px; font-size: 13px; color: rgba(247, 245, 239, 0.66); }

/* ---------- Invowise CTA ---------- */

.iw-cta {
  max-width: 740px;
  margin: clamp(96px, 12vw, 168px) auto 0;
  text-align: center;
}
.iw-cta .display-2 { margin-bottom: 18px; }
.iw-cta .lead { margin: 0 auto 30px; }
.iw-cta .btn-row { justify-content: center; }
.text-toggle {
  margin-top: 22px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--iw-green);
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(15, 77, 46, 0.4);
  text-underline-offset: 5px;
  cursor: pointer;
}
.text-toggle:hover { text-decoration-color: currentColor; }

@media (max-width: 960px) {
  .iw-intro,
  .pillar,
  .pillar-sell,
  .ai { grid-template-columns: minmax(0, 1fr); }
  .pillar-sell .pillar-copy { order: 1; }
  .stack { max-width: 580px; width: 100%; margin-inline: auto; }
  .sync-note { width: min(420px, 86%); }
}

@media (max-width: 560px) {
  .stack { aspect-ratio: auto; display: flex; flex-direction: column; }
  .stack-item { position: relative; inset: auto; }
  .nb { width: 80%; }
  .chat { width: 82%; align-self: flex-end; margin-top: -48px; }
  .sheet { width: 90%; margin-top: 18px; }
  .stack-label { display: none; }
  .win-table th, .win-table td { padding-inline: 8px; }
  .win-table :is(th, td):first-child { padding-inline-start: 14px; }
  .win-table :is(th, td):last-child { padding-inline-end: 14px; }
  .win-table th { font-size: 10px; letter-spacing: 0.04em; }
  .win-table td { font-size: 14px; }
  .chip { padding: 4px 7px; font-size: 11.5px; }
  .win-bar, .win-foot, .sf-head, .sf-cart { padding-inline: 14px; }
  .sf-head { flex-wrap: wrap; }
  .sf-listed { margin-inline-start: 60px; }
  .sf-products { padding: 14px; gap: 10px; }
  .sf-products b { font-size: 13px; }
  .sf-add { display: none; }
  .ai { border-radius: 20px; }
  .ai-answer { padding-inline: 14px; }
}

@media (max-width: 400px) {
  .win-table th, .win-table td { padding-inline: 5px; }
  .win-table th { font-size: 9.5px; letter-spacing: 0.02em; }
  .win-table td { font-size: 13.5px; }
  .win-table :is(td, th):last-child { white-space: normal; }
  .chip { white-space: normal; text-align: center; line-height: 1.15; }
  .win-meta { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--forest);
  background-image: var(--grain-light);
  color: rgba(251, 250, 247, 0.8);
  padding-block: clamp(72px, 9vw, 120px) 28px;
}
.site-footer :focus-visible { outline-color: var(--orange); }
.site-footer .display-2 { color: var(--paper); margin-bottom: 14px; }
.site-footer .lead { color: rgba(251, 250, 247, 0.76); }

.footer-cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid rgba(251, 250, 247, 0.14);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block: 48px;
}
.site-footer .brand { color: var(--paper); }
.site-footer .brand-ar { color: rgba(251, 250, 247, 0.55); }
.footer-brand p { max-width: 28ch; margin-top: 14px; font-size: 15px; }

.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 { margin-bottom: 4px; font-size: 11.5px; color: rgba(251, 250, 247, 0.55); }
.footer-col a { color: rgba(251, 250, 247, 0.9); text-decoration: none; font-size: 15px; width: fit-content; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 250, 247, 0.14);
  font-size: 14px;
  color: rgba(251, 250, 247, 0.66);
}
.lang-toggle-dark { color: var(--paper); border-color: rgba(251, 250, 247, 0.28); }
.lang-toggle-dark:hover { background: rgba(251, 250, 247, 0.08); }

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}