/* Helper Guard AI — public static pages (landing ar/ en/, legal pages and
   the legacy legal-URL language chooser). Same tokens as the app
   (styles.css); follows the OS light/dark preference since these pages run
   no scripts. Every text/background pair is >= 4.5:1 in both schemes. */

:root {
  --bg: #161616;
  --bg-raised: #1e1e1e;
  --bg-raised-2: #242424;
  --border: #2d2d2d;
  --text: #f2f2f0;
  --text-dim: #b3b3b0;
  --accent: #3fe0c5;
  --accent-text: #0b1a17;
  --accent-soft: rgba(63, 224, 197, 0.12);
  --radius: 14px;
  --radius-sm: 8px;
  --tap: 44px;
  --fs-sm: 0.9rem;
  --fs-md: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: 1.6rem;
  --fs-2xl: clamp(1.9rem, 5vw, 3rem);
  --font-sans: "Segoe UI", system-ui, -apple-system, Tahoma, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f6f4;
    --bg-raised: #ffffff;
    --bg-raised-2: #edefed;
    --border: #dcdcd8;
    --text: #1a1a1a;
    --text-dim: #4a4a48;
    --accent: #0b7a69;
    --accent-text: #ffffff;
    --accent-soft: rgba(10, 116, 101, 0.1);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 0.5em; }
code { direction: ltr; unicode-bidi: isolate; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
.wrap-narrow { max-width: 820px; }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: absolute; inset-inline-start: 12px; top: -100px; z-index: 10;
  background: var(--accent); color: var(--accent-text); font-weight: 600;
  padding: 10px 16px; border-radius: var(--radius-sm); min-height: var(--tap);
}
.skip-link:focus { top: 8px; }

/* Brand mark: token text colour on the accent fill (the old legal.css used a
   fixed dark #0b1a17, which failed contrast on the light-mode teal). */
.brand-mark {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
  background: var(--accent); color: var(--accent-text); font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--tap); padding: 0.55em 1.2em; border-radius: var(--radius-sm);
  font-weight: 600; font-size: var(--fs-md); text-decoration: none; border: 1px solid transparent;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.9; }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-secondary { background: var(--bg-raised-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); opacity: 1; }
.btn-sm { font-size: var(--fs-sm); padding-inline: 1em; }
.btn-lg { font-size: 1.05rem; padding: 0.7em 1.6em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-raised);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner { display: flex; align-items: center; gap: 12px 20px; min-height: 64px; flex-wrap: wrap; padding-block: 6px; }
.site-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap);
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.05rem; margin: 0;
}
.site-nav { display: flex; gap: 4px; flex: 1; justify-content: center; }
.site-nav a, .lang-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding-inline: 12px;
  color: var(--text-dim); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); border-radius: var(--radius-sm);
}
.site-nav a:hover, .lang-link:hover { color: var(--text); background: var(--bg-raised-2); }
.site-header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (max-width: 720px) {
  .site-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; margin-inline: -12px; overflow-x: auto; }
  .site-header { position: static; }
}

/* ---------- Landing ---------- */
.hero {
  padding-block: clamp(48px, 9vw, 104px) clamp(40px, 7vw, 80px);
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg);
  text-align: center;
}
.hero h1 { font-size: var(--fs-2xl); max-width: 18em; margin-inline: auto; letter-spacing: -0.01em; }
.hero-lead { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--text-dim); max-width: 40em; margin: 0 auto 28px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.trust-list {
  list-style: none; padding: 0; margin: 24px 0 0; display: flex; gap: 8px 20px; justify-content: center; flex-wrap: wrap;
  color: var(--text-dim); font-size: var(--fs-sm);
}
.trust-list li, .plan-features li { display: flex; align-items: center; gap: 6px; }
.trust-list .icon, .plan-features .icon { color: var(--accent); width: 1.1em; height: 1.1em; }

.section { padding-block: clamp(48px, 8vw, 88px); }
.section-alt { background: var(--bg-raised); border-block: 1px solid var(--border); }
.section h2 { font-size: var(--fs-xl); text-align: center; }
.section-lead { text-align: center; color: var(--text-dim); max-width: 38em; margin: 0 auto 36px; }

.feature-grid, .steps, .plans { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.feature-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.feature {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
}
.feature h3, .step h3, .plan h3 { font-size: var(--fs-lg); margin-bottom: 0.35em; }
.feature p, .step p { margin: 0; color: var(--text-dim); font-size: var(--fs-sm); }
.feature-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 14px;
}

.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: none; }
.step { text-align: center; padding: 8px 12px; }
.step-num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-weight: 700; margin-bottom: 12px;
}

.plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px;
}
.plan-popular { border: 2px solid var(--accent); }
.plan-badge {
  position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(-50%);
  margin: 0; padding: 2px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-text);
  font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
[dir="rtl"] .plan-badge { transform: translateX(50%); }
.plan-price { margin: 0; color: var(--text-dim); }
.plan-amount { font-size: 2.2rem; font-weight: 700; color: var(--text); unicode-bidi: isolate; }
.plan-features { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pricing-note { text-align: center; color: var(--text-dim); font-size: var(--fs-sm); margin: 24px auto 0; max-width: 44em; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary h3 { margin: 0; font-size: var(--fs-md); }
.faq-item p { margin: 0 0 18px; color: var(--text-dim); }

.final-cta { text-align: center; }

/* ---------- Legal pages ---------- */
.legal { padding-block: 32px 64px; }
.legal-article {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(18px, 4vw, 32px);
}
.legal-article h1 { font-size: var(--fs-xl); }
.legal-article h2 { font-size: 1.15rem; margin-top: 1.6em; }
.legal-article h3 { font-size: 1.02rem; margin-top: 1.2em; }
.legal-article p, .legal-article li { color: var(--text-dim); }
.legal-article strong { color: var(--text); }
.updated { font-size: var(--fs-sm); color: var(--text-dim); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-raised); padding-block: 20px; }
.site-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.site-footer-brand { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; }
.footer-links a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 8px;
  color: var(--text-dim); font-size: var(--fs-sm);
}
.footer-links a:hover { color: var(--accent); }

/* ---------- Legacy legal URL chooser ---------- */
.chooser { padding-block: 64px; text-align: center; }
.chooser .site-brand { justify-content: center; }
.chooser h1 { font-size: var(--fs-xl); }
.chooser-links { list-style: none; padding: 0; margin: 24px 0 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Phones: the brand mark, language link and Sign in stay on ONE row (the link keeps
   its aria-label, so the wordmark is hidden visually only); the section nav is the
   second row. */
@media (max-width: 420px) {
  .site-header-inner { gap: 4px 8px; }
  .site-brand { gap: 0; }
  .site-brand > span:not(.brand-mark) { display: none; }
  .site-brand .brand-mark { width: 32px; height: 32px; }
  .lang-link { padding-inline: 6px; }
  .site-header-actions { gap: 4px; }
}

/* ---------- Language menu (header) — no JavaScript: <details>/<summary> ---------- */
.lang-menu { position: relative; }
.lang-menu > summary { cursor: pointer; list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-menu ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 20;
  list-style: none; margin: 0; padding: 6px; min-width: 168px;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.lang-menu ul a {
  display: flex; align-items: center; min-height: var(--tap); padding-inline: 12px;
  color: var(--text); text-decoration: none; border-radius: var(--radius-sm);
}
.lang-menu ul a:hover, .lang-menu ul a:focus-visible { background: var(--bg-raised-2); }

/* ---------- Root language picker (/) ---------- */
.lang-grid { list-style: none; padding: 0; margin: 24px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 640px; }
.lang-grid .btn { width: 100%; justify-content: center; }
.lang-picker-lead { color: var(--text-dim); margin: 8px 0 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; }

/* ---------- Use-case pages ---------- */
.breadcrumbs { padding-top: 16px; font-size: var(--fs-sm); color: var(--text-dim); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--text-dim); }
.breadcrumbs a { color: var(--text-dim); display: inline-flex; align-items: center; min-height: 24px; }
.breadcrumbs a:hover { color: var(--accent); }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.note-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.note-list .icon { flex-shrink: 0; margin-top: 4px; color: var(--accent); }
.related-title { margin-top: 40px; font-size: var(--fs-lg, 1.15rem); }
.related-links { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.uses-grid { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.uses-grid a { display: block; height: 100%; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); color: var(--text); text-decoration: none; }
.uses-grid a:hover, .uses-grid a:focus-visible { border-color: var(--accent); }
.uses-grid strong { display: block; margin-bottom: 6px; }
.uses-grid span { color: var(--text-dim); font-size: var(--fs-sm); }
.site-footer nav + nav { margin-top: 4px; }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Subtle motion (CSS only: the site's CSP forbids scripts) ----------
   transform/opacity/background-position only, so layout is never recalculated.
   The h1 is visible from the first frame (no opacity animation) to protect LCP,
   and everything stops for visitors who ask for reduced motion. */
.site-header .brand-mark {
  box-shadow: 0 0 14px var(--accent-soft);
  animation: hg-flip 8s ease-in-out 1.5s infinite;
}
@keyframes hg-flip {
  0%, 72% { transform: perspective(220px) rotateY(0deg); }
  88%, 100% { transform: perspective(220px) rotateY(360deg); }
}
@keyframes hg-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero-lead { animation: hg-rise 0.7s ease-out 0.15s backwards; }
.hero .cta-row { animation: hg-rise 0.7s ease-out 0.3s backwards; }
.hero .trust-list { animation: hg-rise 0.7s ease-out 0.45s backwards; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: linear-gradient(100deg, var(--text) 35%, var(--accent) 50%, var(--text) 65%) 100% 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: hg-shine 6s ease-in-out 1s infinite;
  }
  @keyframes hg-shine { 0%, 15% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand-mark, .hero-lead, .hero .cta-row, .hero .trust-list { animation: none; }
  .hero h1 { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
}

/* ---------- More motion: living hero, scroll reveals, hover lifts, progress line ----------
   Still CSS-only. Scroll-driven parts are behind @supports, so browsers without
   animation-timeline simply show the finished page. All of it stops under
   prefers-reduced-motion (last block). */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -10% -5% 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(ellipse 38% 50% at 28% 28%, var(--accent-soft), transparent 70%),
    radial-gradient(ellipse 34% 46% at 72% 36%, var(--accent-soft), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
  animation: hg-drift 16s ease-in-out infinite alternate;
}
@keyframes hg-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 3%, 0) scale(1.12); }
}
.btn { transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--accent-soft), 0 0 0 1px var(--accent); }
.btn-secondary:hover { transform: translateY(-2px); }
.feature, .plan, .uses-grid a { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.feature:hover, .plan:hover, .uses-grid a:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); }
.feature-icon { transition: transform 0.3s ease; }
.feature:hover .feature-icon { transform: scale(1.12) rotate(-6deg); }
.plan-popular { animation: hg-glow 3.2s ease-in-out infinite; }
@keyframes hg-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 28px var(--accent-soft); }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { animation: hg-rise 0.8s ease-out backwards, hg-shine 6s ease-in-out 1s infinite; }
}
@supports (animation-timeline: view()) {
  @keyframes hg-reveal {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }
  .section h2, .section-lead, .feature, .step, .plan, .faq-item, .uses-grid li {
    animation: hg-reveal linear backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
  .plan-popular { animation: hg-reveal linear backwards, hg-glow 3.2s ease-in-out infinite; animation-timeline: view(), auto; animation-range: entry 0% entry 45%, normal; }
  @keyframes hg-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  body::before {
    content: ""; position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 50; pointer-events: none;
    background: var(--accent); transform-origin: left center;
    animation: hg-progress linear both; animation-timeline: scroll(root);
  }
  :root[dir="rtl"] body::before { transform-origin: right center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .plan-popular, body::before { animation: none; }
  .section h2, .section-lead, .feature, .step, .plan, .faq-item, .uses-grid li { animation: none; opacity: 1; transform: none; }
  .hero h1 { animation: none; }
  .btn:hover, .feature:hover, .plan:hover, .uses-grid a:hover, .feature:hover .feature-icon { transform: none; }
}