/* ═══════════════════════════════════════════════════════════════
   ELYOWN BLOCKS — front + editor styles
   Tokens come from the active Mood (theme.json style variation; see
   /opt/elyown/standards/web/blocks/MOODS.md). Components NEVER hardcode
   a color — they read --c-* / --s-* / --radius / --font-* tokens.
   The :root below is a SELF-CONTAINED FALLBACK (Clean Modern) so the
   plugin renders standalone even before a Mood theme.json is installed.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --container:1180px; --container-narrow:760px;
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:80px;--s-8:112px;
  --fs-xs:.8rem;--fs-sm:.9rem;--fs-base:1.125rem;--fs-lg:1.25rem;
  --fs-h3:clamp(1.3rem,2vw,1.6rem);--fs-h2:clamp(1.8rem,3.2vw,2.5rem);
  --fs-h1:clamp(2.3rem,4.5vw,3.4rem);--fs-display:clamp(2.6rem,6vw,4rem);
  --lh-tight:1.18;--lh-snug:1.35;--lh-body:1.7;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);--shadow-md:0 8px 24px rgba(0,0,0,.10);--shadow-lg:0 18px 48px rgba(0,0,0,.16);
  --ease:cubic-bezier(.22,.61,.36,1);--t-fast:.2s;--t:.32s;--maxw-prose:65ch;
  /* Clean Modern fallback palette */
  --c-primary:#2563eb;--c-primary-d:#1d4ed8;--c-primary-l:#e0e9fd;
  --c-accent:#06b6a4;--c-accent-d:#048579;--c-accent-l:#d6f5f1;
  --c-bg:#fbfcfe;--c-surface:#ffffff;--c-surface-2:#f1f5fb;--c-dark:#0f172a;
  --c-text:#1e293b;--c-text-soft:#64748b;--c-border:#e2e8f0;
  --font-head:"Inter","Segoe UI",system-ui,sans-serif;--font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --radius:8px;--radius-sm:6px;--radius-pill:999px;
}

/* ---- base (scoped to el- blocks so we don't fight the theme globally) ---- */
.el-wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--s-3)}
[class^="el-"] :where(h1,h2,h3,h4){font-family:var(--font-head);line-height:var(--lh-tight);font-weight:700;color:var(--c-text)}
[class^="el-"] :where(p){line-height:var(--lh-body)}
.el-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;
  font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary-d);
  background:var(--c-primary-l);padding:6px 14px;border-radius:var(--radius-pill);margin-bottom:var(--s-2)}

/* ---- buttons ---- */
.el-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:var(--radius-pill);
  font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t)}
.el-btn i{transition:transform var(--t)}
.el-btn--primary{background:var(--c-primary);color:#fff!important;box-shadow:var(--shadow-sm)}
.el-btn--primary:hover{background:var(--c-primary-d);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.el-btn--primary:hover i{transform:translateX(4px)}
.el-btn--ghost{background:transparent;color:var(--c-primary-d)!important;border-color:var(--c-border)}
.el-btn--ghost:hover{border-color:var(--c-primary);color:var(--c-primary)!important;background:var(--c-primary-l)}
.el-btn--on-dark{background:#fff;color:var(--c-dark)!important}
.el-btn:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}

/* ---- section scaffold ---- */
.el-section{padding:var(--s-8) 0}
.el-section--sm{padding:var(--s-6) 0}
.el-section--surface{background:var(--c-surface)}
.el-section--tint{background:var(--c-surface-2)}
.el-section--primary{background:var(--c-primary);color:#fff}
.el-section--dark{background:var(--c-dark);color:#fff}
.el-section--primary :where(h1,h2,h3,h4),.el-section--dark :where(h1,h2,h3,h4){color:#fff}
.el-head{text-align:center;max-width:640px;margin:0 auto var(--s-5)}
.el-head h2{margin:0 0 var(--s-2)} .el-head p{font-size:var(--fs-lg);color:var(--c-text-soft);margin:0}

/* ---- hero ---- */
.el-hero{position:relative;background:var(--c-surface);overflow:hidden}
.el-hero__blob{position:absolute;width:520px;height:520px;border-radius:50%;background:var(--c-primary-l);
  filter:blur(8px);opacity:.5;top:-160px;right:-160px;z-index:0}
.el-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-7);
  align-items:center;max-width:var(--container);margin:0 auto;padding:var(--s-8) var(--s-3)}
.el-hero h1{font-size:var(--fs-h1);margin:0 0 var(--s-3)}
.el-hero__lead{font-size:var(--fs-lg);color:var(--c-text-soft);margin:0 0 var(--s-4);max-width:48ch}
.el-hero__cta{display:flex;gap:var(--s-2);flex-wrap:wrap}
.el-hero__media .ph{border-radius:calc(var(--radius) + 8px);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/4.4;background:var(--c-surface-2)}
.el-hero__media .ph img{width:100%;height:100%;object-fit:cover}
.el-hero--cinematic .el-hero__grid{grid-template-columns:1fr;min-height:78vh;align-content:center}
.el-hero--centered .el-hero__grid{grid-template-columns:1fr;text-align:center;max-width:var(--container-narrow);justify-items:center}
.el-hero--tiles .el-hero__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-3);margin-top:var(--s-4)}

/* ---- cards ---- */
.el-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.el-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--s-4);
  text-decoration:none;color:var(--c-text);display:flex;flex-direction:column;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.el-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--c-primary)}
.el-card__ic{width:62px;height:62px;border-radius:var(--radius-sm);background:var(--c-primary-l);display:grid;
  place-items:center;color:var(--c-primary);font-size:1.6rem;margin-bottom:var(--s-3)}
.el-card h3{margin:0 0 var(--s-1)} .el-card p{color:var(--c-text-soft);flex:1}
.el-card .lk{color:var(--c-primary-d);font-weight:700;font-size:.92rem;display:inline-flex;gap:6px;align-items:center;margin-top:var(--s-2)}
.el-card:hover .lk i{transform:translateX(4px)} .el-card .lk i{transition:transform var(--t)}

/* ---- stats ---- */
.el-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.el-stat{background:var(--c-surface);border-radius:var(--radius);padding:var(--s-4) var(--s-2);text-align:center;box-shadow:var(--shadow-sm)}
.el-stat .n{font-family:var(--font-head);font-size:clamp(2.2rem,4vw,3rem);font-weight:700;color:var(--c-primary);line-height:1}
.el-stat .l{font-size:.9rem;color:var(--c-text-soft);margin-top:8px}
.el-section--primary .el-stat,.el-section--dark .el-stat{background:rgba(255,255,255,.1)}
.el-section--primary .el-stat .n,.el-section--dark .el-stat .n{color:#fff}

/* ---- split ---- */
.el-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center}
/* no image supplied: one column, full measure. A 2-col grid with an empty half reads as broken. */
.el-split--solo{grid-template-columns:1fr}
.el-split--rev .el-split__media{order:2}
.el-split__media img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;aspect-ratio:5/4;object-fit:cover}

/* ---- cta band ---- */
.el-ctaband{background:var(--c-primary);color:#fff;text-align:center;border-radius:var(--radius);padding:var(--s-6) var(--s-4)}
.el-ctaband h2{color:#fff;margin:0 0 var(--s-2)} .el-ctaband p{color:rgba(255,255,255,.9);max-width:50ch;margin:0 auto var(--s-3)}

/* ---- trust strip ---- */
.el-trust{padding:var(--s-5) var(--s-3);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);background:var(--c-bg)}
.el-trust__in{max-width:var(--container);margin:0 auto;text-align:center}
.el-trust__label{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-soft);font-weight:700;margin-bottom:var(--s-3)}
.el-trust__logos{display:flex;align-items:center;justify-content:center;gap:var(--s-6);flex-wrap:wrap}
.el-trust__logos img{height:48px;width:auto;opacity:.7;filter:grayscale(.2);transition:opacity var(--t)}
.el-trust__logos img:hover{opacity:1}

/* ---- quotes / testimonials ---- */
.el-quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
.el-quotes--cols-1{grid-template-columns:1fr}
.el-quotes--cols-2{grid-template-columns:repeat(2,1fr)}
.el-quotes--cols-3{grid-template-columns:repeat(3,1fr)}
.el-quotes--cols-4{grid-template-columns:repeat(4,1fr)}
.el-quote{background:var(--c-surface);border-radius:var(--radius);padding:var(--s-4);box-shadow:var(--shadow-sm);border-left:4px solid var(--c-accent)}
.el-quote p{font-size:1.1rem;font-style:italic;margin:var(--s-2) 0} .el-quote .who{font-size:.85rem;color:var(--c-text-soft);font-weight:600}

/* ---- faq ---- */
.el-faq{max-width:760px;margin:0 auto}
.el-faq details{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);margin-bottom:12px}
.el-faq summary{padding:18px 22px;font-weight:700;font-family:var(--font-head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.el-faq summary::-webkit-details-marker{display:none}
.el-faq summary::after{content:"+";color:var(--c-primary);font-size:1.4rem;line-height:1}
.el-faq details[open] summary::after{content:"–"}
.el-faq details p{padding:0 22px 18px;color:var(--c-text-soft);margin:0}

/* ---- editor affordances ---- */
.el-edit{border:1px dashed var(--c-border,#cbd5e1);border-radius:8px;padding:14px}
.el-edit__tag{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.55;margin-bottom:8px}
.el-edit__fields>*{margin-bottom:10px}
.el-edit--container{background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,.015) 10px,rgba(0,0,0,.015) 20px)}

/* ---- responsive ---- */
@media(max-width:960px){
  .el-hero__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .el-hero__media{max-width:460px;margin:0 auto;order:2}
  .el-stats{grid-template-columns:repeat(2,1fr)}
  .el-quotes--cols-3,.el-quotes--cols-4{grid-template-columns:repeat(2,1fr)}
  .el-split{grid-template-columns:1fr;gap:var(--s-4)} .el-split--rev .el-split__media{order:0}
}
@media(max-width:780px){
  .el-cards,.el-quotes,.el-stats,
  .el-quotes--cols-2,.el-quotes--cols-3,.el-quotes--cols-4{grid-template-columns:1fr}
  .el-stats{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){ [class^="el-"] *{animation:none!important;transition:none!important} }