/* ============================================================
   جسر · Jisr — Marketing Site layer
   Built ON TOP of the Jisr design tokens (../styles.css).
   Reuses brand color/type/spacing aliases; adds marketing-scale
   composition (hero, sections, feature grids, footer).
   ============================================================ */

:root{
  --site-max: 1200px;
  --site-gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 9vw, 128px);
  /* marketing display scale — larger than the dense app scale */
  --display-1: clamp(34px, 6.2vw, 68px);
  --display-2: clamp(27px, 4.2vw, 46px);
  --display-3: clamp(21px, 2.6vw, 30px);
  --lead: clamp(16px, 1.5vw, 19px);
}

html{ scroll-behavior: smooth; }
body{ background: var(--surface); overflow-x: hidden; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; }

.container{ max-width: var(--site-max); margin-inline:auto; padding-inline: var(--site-gutter); }
.section{ padding-block: var(--section-y); }
.section--tight{ padding-block: clamp(48px,6vw,88px); }
.bg-offwhite{ background: var(--bg); }
.bg-white{ background: var(--surface); }
.bg-ink{ background: var(--gradient-ink); color: var(--text-on-dark); }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{ color:#fff; }

/* ---------- type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing:.01em; color: var(--primary);
  background: var(--primary-soft);
  padding: 6px 14px; border-radius: var(--radius-full);
}
.bg-ink .eyebrow{ color: var(--emerald-300); background: rgba(25,195,125,.12); }
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

.display-1{ font-size: var(--display-1); line-height:1.08; letter-spacing:-.01em; font-weight:700; text-wrap:balance; }
.display-2{ font-size: var(--display-2); line-height:1.14; letter-spacing:-.01em; font-weight:700; text-wrap:balance; }
.display-3{ font-size: var(--display-3); line-height:1.2; font-weight:700; }
.lead{ font-size: var(--lead); line-height:1.7; color: var(--text-secondary); text-wrap:pretty; }
.bg-ink .lead{ color: rgba(241,245,249,.82); }
.muted{ color: var(--text-muted); }
.section-head{ max-width: 720px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; gap:18px; align-items:center; margin-bottom: clamp(40px,5vw,64px); }
.section-head.start{ text-align:start; align-items:flex-start; margin-inline:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size: var(--text-md); font-weight: var(--weight-semibold);
  padding: 13px 24px; border-radius: var(--radius-sm);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.btn:active{ transform: scale(.985); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-emerald); }
.btn-primary:hover{ background: var(--primary-hover); color:#fff; }
.btn-whatsapp{ background: var(--whatsapp); color:#063d1c; }
.btn-whatsapp:hover{ background:#1fbb5c; }
.btn-ghost-dark{ background: rgba(255,255,255,.06); color:#fff; border-color: rgba(255,255,255,.18); }
.btn-ghost-dark:hover{ background: rgba(255,255,255,.12); }
.btn-outline{ background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-outline:hover{ background: var(--surface-2); border-color: var(--slate-400); }
.btn-lg{ padding: 16px 30px; font-size: var(--text-lg); }
.btn-block{ width:100%; }

/* ============================================================
   HEADER  (injected by chrome.js)
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header__bar{ display:flex; align-items:center; gap:24px; height:70px; }
.site-logo{ display:flex; align-items:center; gap:10px; flex:none; }
.site-logo img{ height:30px; width:auto; }
.site-nav{ display:flex; align-items:center; gap:4px; margin-inline-start:auto; }
.site-nav a{
  color: var(--text-secondary); font-size: var(--text-md); font-weight:500;
  padding: 8px 14px; border-radius: var(--radius-sm); transition: color var(--dur-base), background var(--dur-base);
}
.site-nav a:hover{ color: var(--text-primary); background: var(--surface-2); }
.site-nav a.is-active{ color: var(--primary-active); }
.site-nav .btn{ display:none; } /* nav CTA only shows in mobile menu */
.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono);
  font-size: var(--text-sm); font-weight:600; color: var(--text-secondary);
  background: var(--surface-2); border:1px solid var(--border);
  padding: 7px 12px; border-radius: var(--radius-full); cursor:pointer;
  transition: border-color var(--dur-base), color var(--dur-base);
}
.lang-toggle:hover{ color: var(--text-primary); border-color: var(--border-strong); }
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; color: var(--text-primary); }
.nav-toggle svg{ width:24px; height:24px; }

@media (max-width: 880px){
  .nav-toggle{ display:inline-flex; margin-inline-start:auto; }
  .header-actions .btn{ display:none; }
  .site-nav{
    position:absolute; inset-inline:0; top:70px; margin:0; flex-direction:column; align-items:stretch; gap:2px;
    background: var(--surface); border-bottom:1px solid var(--border);
    padding: 12px var(--site-gutter) 20px; box-shadow: var(--shadow-md);
    transform: translateY(-12px); opacity:0; pointer-events:none; transition: all var(--dur-base) var(--ease-out);
  }
  .site-nav.open{ transform:none; opacity:1; pointer-events:auto; }
  .site-nav a{ padding:12px 14px; font-size: var(--text-lg); }
  .site-nav .btn{ display:inline-flex; margin-top:8px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background: url("assets/jisr-pattern.png") repeat; background-size: 560px auto;
  opacity:.10; mix-blend-mode: screen; pointer-events:none;
}
.hero__inner{
  position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,5vw,72px);
  align-items:center; padding-block: clamp(64px,8vw,104px);
}
.hero__copy{ display:flex; flex-direction:column; gap:26px; align-items:flex-start; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__trust{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; color: rgba(241,245,249,.7); font-size: var(--text-sm); }
.hero__trust .dot{ width:5px; height:5px; border-radius:50%; background: var(--emerald-400); }
.hero__chanrow{ display:flex; align-items:center; gap:10px; }
.chanbadge{ display:inline-flex; align-items:center; gap:7px; font-size: var(--text-sm); font-weight:600; padding:6px 12px; border-radius: var(--radius-full); background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; }
.chanbadge i{ width:9px; height:9px; border-radius:50%; }

@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; gap:48px; }
}

/* ============================================================
   CRM MOCK  (faithful CSS recreation of the Jisr inbox)
   ============================================================ */
.mock-frame{
  background: var(--surface); border-radius: var(--radius-xl); overflow:hidden;
  border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-xl);
}
.mock-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background: var(--navy-600); border-bottom:1px solid rgba(255,255,255,.08); }
.mock-bar i{ width:11px; height:11px; border-radius:50%; background: rgba(255,255,255,.22); }
.mock-bar i:nth-child(1){ background:#ff5f57; } .mock-bar i:nth-child(2){ background:#febc2e; } .mock-bar i:nth-child(3){ background:#28c840; }
.mock-bar span{ margin-inline-start:12px; font-family: var(--font-mono); font-size:11px; color: var(--slate-400); }
.mock-app{ display:grid; grid-template-columns: 54px 1fr; background: var(--bg); }
.mock-rail{ background: var(--navy-500); display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px 0; }
.mock-rail .logo{ width:30px; height:30px; border-radius:8px; background: var(--gradient-bridge); display:grid; place-items:center; }
.mock-rail .ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color: var(--slate-400); }
.mock-rail .ic.on{ background: var(--sidebar-active-bg); color: var(--emerald-400); }
.mock-rail .ic svg{ width:17px; height:17px; }
.mock-panes{ display:grid; grid-template-columns: 168px 1fr; min-height: 360px; }
.mock-list{ background: var(--surface); border-inline-start:1px solid var(--border); padding:12px 0; }
.mock-list h4{ font-size: 13px; padding:0 14px 10px; color: var(--text-primary); }
.mock-conv{ display:flex; gap:9px; padding:9px 14px; align-items:flex-start; }
.mock-conv.on{ background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.mock-av{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:600; }
.mock-conv .m{ min-width:0; flex:1; }
.mock-conv .nm{ font-size:12px; font-weight:600; color: var(--text-primary); display:flex; justify-content:space-between; }
.mock-conv .nm time{ font-size:10px; color: var(--text-faint); font-weight:400; }
.mock-conv .pv{ font-size:11px; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock-chat{ display:flex; flex-direction:column; background: var(--bg); }
.mock-chat-head{ display:flex; align-items:center; gap:9px; padding:11px 14px; background: var(--surface); border-bottom:1px solid var(--border); }
.mock-chat-head .nm{ font-size:13px; font-weight:600; }
.mock-chat-head .pill{ margin-inline-start:auto; font-size:10px; font-weight:600; color: var(--emerald-700); background: var(--emerald-50); padding:3px 9px; border-radius: var(--radius-full); }
.mock-thread{ flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:10px; }
.mock-b{ max-width:76%; padding:9px 12px; border-radius:14px; font-size:12px; line-height:1.5; box-shadow: var(--shadow-xs); }
.mock-b time{ display:block; font-size:9px; color: var(--text-faint); margin-top:4px; }
.mock-b.in{ align-self:flex-start; background: var(--bubble-in-bg); border:1px solid var(--border); border-bottom-inline-start-radius:4px; }
.mock-b.out{ align-self:flex-end; background: var(--bubble-out-bg); color: var(--bubble-out-fg); border-bottom-inline-end-radius:4px; }
.mock-b.bot{ align-self:flex-end; background:#fff; border:1px solid var(--ai-50); border-bottom-inline-end-radius:4px; }
.mock-b .bottag{ display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:700; color: var(--ai-500); margin-bottom:4px; }
.mock-b .bottag svg{ width:11px; height:11px; }
.mock-composer{ display:flex; align-items:center; gap:8px; padding:10px 14px; background: var(--surface); border-top:1px solid var(--border); }
.mock-composer .inp{ flex:1; font-size:11px; color: var(--text-faint); background: var(--bg); border:1px solid var(--border); border-radius: var(--radius-full); padding:8px 13px; }
.mock-composer .send{ width:31px; height:31px; flex:none; border-radius:50%; background: var(--primary); display:grid; place-items:center; color:#fff; }
.mock-composer .send svg{ width:15px; height:15px; }
@media (max-width:520px){ .mock-panes{ grid-template-columns:1fr; } .mock-list{ display:none; } }

/* ============================================================
   FEATURE GRID / CARDS
   ============================================================ */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
  display:flex; flex-direction:column; gap:12px;
}
.card--hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card h3{ font-size: var(--text-2xl); }
.card p{ color: var(--text-secondary); font-size: var(--text-md); line-height:1.65; margin:0; }
.icon-tile{
  width:48px; height:48px; border-radius: var(--radius-md); display:grid; place-items:center;
  background: var(--primary-soft); color: var(--primary-active); margin-bottom:4px;
}
.icon-tile svg{ width:24px; height:24px; }
.icon-tile.teal{ background: var(--teal-50); color: var(--teal-600); }
.icon-tile.ai{ background: var(--ai-50); color: var(--ai-500); }
.icon-tile.amber{ background: var(--warning-50); color:#b45309; }
.icon-tile.navy{ background: var(--navy-500); color:#fff; }

/* stat row */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,40px); }
@media (max-width:760px){ .stats{ grid-template-columns: repeat(2,1fr); } }
.stat{ text-align:center; display:flex; flex-direction:column; gap:6px; }
.stat b{ font-family: var(--font-mono); font-size: clamp(30px,4vw,46px); font-weight:600; line-height:1; color: var(--primary); font-feature-settings:"tnum" 1; }
.bg-ink .stat b{ color: var(--emerald-400); }
.stat span{ font-size: var(--text-md); color: var(--text-muted); }
.bg-ink .stat span{ color: rgba(241,245,249,.7); }

/* ---------- split feature (image + copy) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(36px,5vw,72px); align-items:center; }
.split + .split{ margin-top: clamp(56px,7vw,104px); }
.split__copy{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.split--rev .split__media{ order:-1; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; gap:32px; } .split--rev .split__media{ order:0; } }
.feature-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.feature-list li{ display:flex; gap:11px; align-items:flex-start; font-size: var(--text-md); color: var(--text-secondary); line-height:1.55; }
.feature-list .tick{ flex:none; width:22px; height:22px; border-radius:50%; background: var(--primary-soft); color: var(--primary-active); display:grid; place-items:center; margin-top:1px; }
.feature-list .tick svg{ width:13px; height:13px; }

/* ---------- image placeholder (brand striped) ---------- */
.ph{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); background:
    repeating-linear-gradient(135deg, var(--slate-50) 0 11px, var(--slate-100) 11px 22px);
  display:grid; place-items:center; aspect-ratio: 4/3;
}
.ph[data-shot]::after{
  content: attr(data-shot); font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--text-faint); background: var(--surface); border:1px solid var(--border);
  padding:6px 12px; border-radius: var(--radius-full);
}
.ph.tall{ aspect-ratio: 3/4; }
.ph.wide{ aspect-ratio: 16/9; }
.ph.ink{ background:
    repeating-linear-gradient(135deg, var(--navy-600) 0 11px, var(--navy-500) 11px 22px);
  border-color: rgba(255,255,255,.1); }
.ph.ink[data-shot]::after{ background: rgba(255,255,255,.06); color: var(--slate-400); border-color: rgba(255,255,255,.12); }

/* ---------- integration logos strip ---------- */
.logorow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(20px,4vw,56px); opacity:.9; }
.logorow .lg{ display:inline-flex; align-items:center; gap:9px; font-weight:600; color: var(--text-muted); font-size: var(--text-lg); }
.logorow .lg svg{ width:24px; height:24px; }

/* ---------- CTA band ---------- */
.ctaband{ position:relative; overflow:hidden; border-radius: var(--radius-2xl); padding: clamp(40px,6vw,72px); text-align:center; }
.ctaband::before{ content:""; position:absolute; inset:0; background: url("assets/jisr-pattern.png") repeat; background-size:460px auto; opacity:.10; mix-blend-mode:screen; }
.ctaband__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; }

/* ============================================================
   FOOTER (injected by chrome.js)
   ============================================================ */
.site-footer{ background: var(--navy-600); color: rgba(241,245,249,.72); }
.site-footer a{ color: rgba(241,245,249,.72); }
.site-footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; padding-block: clamp(48px,6vw,72px); }
.footer-brand img{ height:30px; margin-bottom:16px; }
.footer-brand p{ font-size: var(--text-md); line-height:1.7; max-width:320px; margin:0 0 18px; }
.footer-col h4{ color:#fff; font-size: var(--text-md); margin-bottom:16px; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; font-size: var(--text-md); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-block:24px; border-top:1px solid rgba(255,255,255,.1); font-size: var(--text-sm); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.07); display:grid; place-items:center; transition: background var(--dur-base); }
.footer-social a:hover{ background: rgba(255,255,255,.15); }
.footer-social svg{ width:17px; height:17px; }
@media (max-width: 760px){ .footer-top{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width: 460px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- page hero (interior pages) ---------- */
.page-hero{ position:relative; overflow:hidden; text-align:center; }
.page-hero::before{ content:""; position:absolute; inset:0; background:url("assets/jisr-pattern.png") repeat; background-size:520px auto; opacity:.09; mix-blend-mode:screen; }
.page-hero__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; padding-block: clamp(56px,7vw,96px); }
.page-hero .lead{ max-width:640px; }

/* floating whatsapp */
.wa-float{ position:fixed; inset-inline-start:24px; bottom:24px; z-index:60; width:56px; height:56px; border-radius:50%; background: var(--whatsapp); color:#063d1c; display:grid; place-items:center; box-shadow: var(--shadow-lg); transition: transform var(--dur-base) var(--ease-out); }
.wa-float:hover{ transform: scale(1.07); color:#063d1c; }
.wa-float svg{ width:28px; height:28px; }

/* reveal on scroll — transform-only so content is ALWAYS opaque
   (never stuck invisible if a transition is throttled/frozen) */
.reveal{ transform: translateY(20px); transition: transform .6s var(--ease-out); will-change: transform; }
.reveal.in{ transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* timeline (about page) */
.timeline{ display:flex; flex-direction:column; gap:0; max-width:760px; margin-inline:auto; }
.tl-item{ display:grid; grid-template-columns: 120px 1fr; gap:24px; padding-bottom:36px; position:relative; }
.tl-item::before{ content:""; position:absolute; inset-inline-start:130px; top:8px; bottom:-8px; width:2px; background: var(--border); }
.tl-item:last-child::before{ display:none; }
.tl-item .yr{ font-family: var(--font-mono); font-weight:600; color: var(--primary); text-align:end; padding-top:1px; }
.tl-item .dot{ position:absolute; inset-inline-start:125px; top:6px; width:12px; height:12px; border-radius:50%; background: var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.tl-item .body h4{ font-size: var(--text-xl); margin-bottom:6px; }
.tl-item .body p{ color: var(--text-secondary); margin:0; font-size: var(--text-md); }
@media (max-width:560px){ .tl-item{ grid-template-columns:64px 1fr; gap:16px; } .tl-item::before{ inset-inline-start:74px; } .tl-item .dot{ inset-inline-start:69px; } }

/* value cards (about) */
.value{ display:flex; flex-direction:column; gap:14px; }
.value .num{ font-family: var(--font-mono); font-size: var(--text-2xl); font-weight:600; color: var(--primary); }

/* contact layout */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items:start; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label{ font-size: var(--text-md); font-weight:600; color: var(--text-primary); }
.field input,.field textarea,.field select{
  font-family: inherit; font-size: var(--text-md); color: var(--text-primary);
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color var(--dur-base), box-shadow var(--dur-base); width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color: var(--primary); box-shadow: var(--shadow-ring); }
.field textarea{ resize:vertical; min-height:120px; }
.contact-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px,3vw,36px); box-shadow: var(--shadow-sm); }
.contact-method{ display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--border); }
.contact-method:last-child{ border-bottom:none; }
.contact-method .ic{ width:44px; height:44px; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary-active); display:grid; place-items:center; flex:none; }
.contact-method .ic svg{ width:22px; height:22px; }
.contact-method b{ display:block; font-size: var(--text-lg); color: var(--text-primary); margin-bottom:3px; }
.contact-method span{ color: var(--text-secondary); font-size: var(--text-md); }
.contact-method a{ color: var(--secondary); }

/* faq */
.faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq details{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding: 4px 20px; transition: border-color var(--dur-base); }
.faq details[open]{ border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq summary{ cursor:pointer; list-style:none; padding:16px 0; font-weight:600; font-size: var(--text-lg); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ flex:none; transition: transform var(--dur-base); color: var(--text-muted); }
.faq details[open] summary .chev{ transform: rotate(180deg); }
.faq p{ margin:0 0 18px; color: var(--text-secondary); line-height:1.7; }

/* ---------- pricing ---------- */
.price-card{ position:relative; gap:14px; }
.price-card--hot{ border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); }
.price-badge{
  position:absolute; top:-13px; inset-inline-start:50%; transform: translateX(50%);
  background: var(--primary); color:#fff; font-size: var(--text-sm); font-weight:700;
  padding: 4px 16px; border-radius: var(--radius-full); white-space:nowrap;
}
[dir="ltr"] .price-badge{ transform: translateX(-50%); }
.price{ display:flex; align-items:baseline; gap:8px; padding:6px 0 2px; }
.price b{ font-family: var(--font-mono); font-size: clamp(30px,3.5vw,40px); font-weight:600; line-height:1; color: var(--text-primary); }
.price span{ color: var(--text-muted); font-size: var(--text-md); }
.price-card .feature-list{ flex:1; }
.price-card .btn{ margin-top:6px; }

/* EN/LTR adjustments */
[dir="ltr"] body, [dir="ltr"]{ font-family: var(--font-sans); }
[dir="ltr"] .display-1, [dir="ltr"] .display-2{ letter-spacing:-.02em; }