/* ============================================================================
     Eastall Software Systems Stylesheets — Eastall Cloud (eCloud) landing
     Version: 1.0.0 2026
     Loads on top of the base stylesheet (v1.2026-1-0-0.css); uses its tokens.
============================================================================ */

:root                     { --dot:rgba(255,255,255,.05); --grad-sep:#ffffff; --cl-accent:#2376f5; }
:root[data-theme="light"] { --dot:rgba(0,0,0,.05);       --grad-sep:#0e1116; }

.ess-main{ flex:1 1 auto; }
.grad-text{
  background:linear-gradient(95deg,
    var(--grad-sep) 0%, var(--ess-blue) 16.67%, var(--grad-sep) 33.33%,
    var(--ess-red) 50%, var(--grad-sep) 66.67%, var(--ess-yellow) 83.33%, var(--grad-sep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

/* ── Hero ── */
.cl-hero{ background:radial-gradient(var(--dot) 1px, transparent 1.7px) 0 0 / 24px 24px, var(--bg); border-bottom:1px solid var(--line); }
.cl-hero-inner{ max-width:920px; margin:0 auto; padding:clamp(52px,8vw,100px) 28px; text-align:center; }
.cl-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cl-accent); margin:0 0 18px; }
.cl-eyebrow img{ height:20px; width:auto; }
.cl-title{ margin:0 0 18px; font-weight:900; letter-spacing:-.02em; line-height:1.05; font-size:clamp(2.4rem,5.4vw,4rem); color:var(--text-hi); }
.cl-sub{ margin:0 auto 30px; max-width:56ch; color:var(--grey-m); font-size:clamp(1.02rem,1.7vw,1.2rem); line-height:1.6; }

/* Domain search */
.cl-search{ max-width:560px; margin:0 auto; }
.cl-search-row{ display:flex; gap:10px; background:var(--menu); border:1px solid var(--panel-brd); border-radius:16px; padding:8px; box-shadow:var(--shadow); }
.cl-search-row input{ flex:1 1 auto; min-width:0; font:inherit; font-size:1rem; color:var(--text); background:transparent; border:0; padding:12px 14px; }
.cl-search-row input:focus{ outline:none; }
.cl-search-row button{ flex:0 0 auto; }
.cl-search-note{ margin:12px 2px 0; font-size:.84rem; color:var(--grey-m); }
.cl-result{ margin-top:14px; border-radius:14px; padding:14px 16px; font-weight:600; font-size:.94rem; display:none; text-align:left; border:1px solid var(--panel-brd); background:var(--overlay-3); color:var(--grey-d); }
.cl-result.show{ display:block; }

/* ── Section shell ── */
.cl-section{ max-width:1120px; margin:0 auto; padding:clamp(48px,7vw,86px) 28px; }
.cl-center{ text-align:center; max-width:640px; margin:0 auto clamp(28px,4vw,44px); }
.cl-kicker{ font-weight:800; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ess-red); margin:0 0 10px; }
.cl-h2{ margin:0 0 12px; font-weight:900; letter-spacing:-.01em; font-size:clamp(1.7rem,3.4vw,2.5rem); color:var(--text-hi); }
.cl-lead{ margin:0; color:var(--grey-m); font-size:1.04rem; line-height:1.6; }

/* Plans */
.cl-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.cl-plan{ display:flex; flex-direction:column; background:var(--menu); border:1px solid var(--panel-brd); border-radius:20px; padding:28px 24px; box-shadow:0 1px 2px rgba(0,0,0,.14); }
.cl-plan.pop{ border-color:transparent; box-shadow:var(--shadow); outline:2px solid var(--cl-accent); position:relative; }
.cl-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--grad-btn); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:4px 12px; border-radius:999px; }
.cl-plan h3{ margin:0 0 4px; font-size:1.12rem; font-weight:800; color:var(--text-hi); }
.cl-plan .cl-for{ color:var(--grey-m); font-size:.86rem; margin-bottom:18px; }
.cl-price{ display:flex; align-items:baseline; gap:4px; margin-bottom:18px; }
.cl-price b{ font-size:2.3rem; font-weight:900; color:var(--text-hi); letter-spacing:-.02em; }
.cl-price span{ color:var(--grey-m); font-size:.9rem; }
.cl-feats{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1 1 auto; }
.cl-feats li{ display:flex; gap:10px; align-items:flex-start; color:var(--grey-d); font-size:.92rem; line-height:1.45; }
.cl-feats .material-symbols-rounded{ font-size:19px; color:var(--cl-accent); flex:0 0 auto; margin-top:1px; }
.cl-plan .ess-btn{ width:100%; }

/* Feature grid */
.cl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cl-card{ background:var(--menu); border:1px solid var(--panel-brd); border-radius:18px; padding:24px; box-shadow:0 1px 2px rgba(0,0,0,.14); }
.cl-card .cl-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--overlay-2); color:var(--cl-accent); margin-bottom:14px; }
.cl-card .cl-ic .material-symbols-rounded{ font-size:24px; }
.cl-card h3{ margin:0 0 8px; font-size:1.04rem; font-weight:800; color:var(--text-hi); }
.cl-card p{ margin:0; color:var(--grey-m); font-size:.93rem; line-height:1.6; }

/* TLD strip */
.cl-tlds{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cl-tld{ display:flex; align-items:baseline; gap:8px; background:var(--overlay-3); border:1px solid var(--panel-brd); border-radius:12px; padding:12px 18px; }
.cl-tld b{ color:var(--text-hi); font-size:1.05rem; font-weight:800; }
.cl-tld span{ color:var(--grey-m); font-size:.85rem; }

/* CTA */
.cl-cta{ background:var(--bg-2); border-top:1px solid var(--line); }
.cl-cta-inner{ max-width:820px; margin:0 auto; padding:clamp(52px,8vw,96px) 28px; text-align:center; }
.cl-cta h2{ margin:0 0 14px; font-weight:900; font-size:clamp(1.7rem,3.6vw,2.6rem); color:var(--text-hi); }
.cl-cta p{ margin:0 auto 26px; max-width:46ch; color:var(--grey-m); font-size:1.05rem; }
.cl-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width:900px){ .cl-plans{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } .cl-grid{ grid-template-columns:1fr; } }