/* ===== HOME ===== */
.hero { position:relative; overflow:hidden; padding:clamp(32px,5vw,64px); border-radius:var(--cr-radius-surface);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--cr-color-action-tertiary-fill) 16%, transparent) 0%, transparent 46%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb,var(--cr-color-action-primary-fill) 20%, transparent) 0%, transparent 44%),
    var(--cr-color-surface-default);
  border:1px solid var(--cr-site-hairline); box-shadow:var(--cr-shadow-elevation-2); }
.hero .cross { position:absolute; inset:0; pointer-events:none; opacity:.5; }
.hero h1 { max-width:16ch; font-size:clamp(2.4rem,5.4vw,4rem); margin:18px 0 0; }
.hero h1 em { font-style:italic; color:var(--cr-color-action-tertiary-fill); }
.hero p { max-width:52ch; margin-top:18px; font-size:1.08rem; line-height:1.6; color:var(--cr-color-text-secondary); }
.hero .cta { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.hero .cross-mark { position:absolute; top:clamp(24px,5vw,56px); inset-inline-end:clamp(24px,5vw,56px); width:clamp(96px,13vw,168px); height:auto; opacity:.9; }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--cr-space-4); margin-top:var(--cr-space-6); }
.stat { padding:var(--cr-space-5) var(--cr-space-5); border-radius:var(--cr-radius-surface); background:var(--cr-color-surface-default);
  border:1px solid var(--cr-site-hairline); }
.stat .n { font-family:var(--cr-font-sans); font-size:2.6rem; font-weight:600; line-height:1; letter-spacing:-.02em; }
.stat .n small { font-size:1.1rem; color:var(--cr-color-action-tertiary-fill); }
.stat .l { margin-top:8px; font-size:.82rem; font-weight:600; color:var(--cr-color-text-secondary); }

.truthbar { margin-top:var(--cr-space-6); padding:var(--cr-space-6); border-radius:var(--cr-radius-surface);
  background:var(--cr-site-surface-tint-1); border:1px solid var(--cr-site-hairline); }
.truthbar .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.demo-comp { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:16px; padding:var(--cr-space-5);
  border-radius:var(--cr-radius-control); background:var(--cr-color-surface-default); border:1px dashed var(--cr-color-border-divider); }

/* small demo form field */
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:.78rem; font-weight:700; color:var(--cr-color-text-secondary); }
.field input,.field select { padding:9px 12px; border-radius:var(--cr-radius-field); border:1.5px solid var(--cr-color-border-divider);
  background:var(--cr-color-surface-default); color:var(--cr-color-text-primary); font-family:inherit; font-size:.9rem; min-width:150px; }
.field input:focus { outline:none; border-color:var(--cr-color-action-primary-fill); }
.switch { position:relative; width:44px; height:26px; border-radius:var(--cr-radius-pill); background:var(--cr-site-surface-tint-4); transition:background var(--cr-motion-duration-short); flex:0 0 auto; }
.switch[aria-checked="true"] { background:var(--cr-color-action-success-fill); }
.switch::after { content:""; position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px; border-radius:var(--cr-radius-pill); background:var(--cr-color-surface-default); box-shadow:var(--cr-shadow-elevation-1); transition:transform var(--cr-motion-duration-short) var(--cr-motion-ease-standard); }
.switch[aria-checked="true"]::after { transform:translateX(18px); }
[dir="rtl"] .switch[aria-checked="true"]::after { transform:translateX(-18px); }