/* GENERATED by tools/dc-to-static.js — do not edit by hand.
   Section 1 is the design file's own <helmet><style>. Section 2 replaces the design
   runtime's style-hover attributes and {{state}} bindings with real CSS.
   Design tokens live in tokens/*.css. */

html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-latin)}
html[lang='ar'] body{font-family:var(--font-arabic);line-height:var(--lh-arabic);letter-spacing:0}
a{color:var(--w-accent-ink);text-decoration:none}
a:hover{color:var(--w-accent)}
section[id]{scroll-margin-top:92px}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sealIn{from{opacity:0;transform:scale(.55) rotate(-10deg)}to{opacity:1;transform:none}}
.feat-rev .shot{order:-1}
@media (max-width:700px){.mkt-lang{display:none !important}}
@media (max-width:960px){
  .mkt-nav{display:none !important}
  .lg-grid{grid-template-columns:1fr !important}
  .lg-toc{display:none !important}
  .hero-grid{grid-template-columns:1fr !important}
  .feat{grid-template-columns:1fr !important}
  .feat .shot{order:2 !important}
  .cl-grid{grid-template-columns:1fr !important}
  .hero-shots{max-width:560px;margin-inline:auto}
}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* ---- hover states (were style-hover="" in the design file) ---- */
.hv-1:hover{color:var(--ink)}
.hv-2:hover{background:var(--surface-alt);color:var(--ink)}
.hv-3:hover{background:var(--w-accent-ink);color:var(--on-accent)}
.hv-4:hover{background:var(--surface);color:var(--ink)}
.hv-5:hover{background:var(--bg);color:var(--ink)}
.hv-6:hover{opacity:.85;color:var(--bg)}
.hv-7:hover{opacity:.88;color:var(--toast-bg)}
.hv-8:hover{background:rgba(255,255,255,.08);color:var(--toast-fg)}

/* ---- focus ---- */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--w-accent);outline-offset:3px;border-radius:6px}

/* ---- pain strip flip cards ----
   The resting state (opacity:0 on .pain-back) is an inline style in the design
   document, so the active state has to out-rank it with !important. */
.pain-card .pain-front,.pain-card .pain-back{transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.pain-card:hover .pain-front,.pain-card.is-flipped .pain-front{opacity:0;transform:translateY(-8px)}
.pain-card:hover .pain-back,.pain-card.is-flipped .pain-back{opacity:1 !important;transform:none !important}

/* ---- FAQ accordion ----
   Same story: grid-template-rows:0fr is inline on the panel. */
.faq-q{cursor:pointer;appearance:none}
.faq-icon{display:inline-block;transition:transform var(--dur-med) var(--ease-out)}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-med) var(--ease-out)}
.faq-panel.is-open{grid-template-rows:1fr !important}

/* ---- language switcher ----
   Same story a third time: each button carries background:transparent;color:var(--ink-2)
   inline (the design put the selected state in a {{lsXx}} binding after them), so without
   !important the chosen language looks exactly like the other two. */
.lang-btn{cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.lang-btn.is-active{background:var(--ink) !important;color:var(--bg) !important}
.lang-btn:not(.is-active):hover{color:var(--ink) !important}

/* ---- header on phones ----
   The design hides the nav below 960px and the language switcher below 700px, but the
   wordmark, the business/clients pill switcher, WhatsApp and the CTA still add up to
   ~470px — wider than a 390px viewport. Let the bar wrap and give the pill switcher its
   own row rather than pushing the bar wider than the screen.
   Wrapping in source order keeps this self-adjusting: the bar stays on one line while
   it fits, and once it doesn't, WhatsApp + the CTA drop to a second, right-aligned row. */
@media (max-width:600px){
  header > div{flex-wrap:wrap;row-gap:10px}
  .mkt-actions{margin-inline-start:auto}
}

/* ---- legal pages ----
   The design's table of contents scrolled with a scripted 110px offset; as real
   anchors the same offset belongs on the targets. */
[id^="pv-"],[id^="tm-"]{scroll-margin-top:110px}

/* ---- RTL: mirror the alternating feature blocks ---- */
html[dir="rtl"] .feat-rev .shot{order:0}
html[dir="rtl"] .feat .shot{order:-1}
@media (max-width:960px){html[dir="rtl"] .feat .shot{order:2}}