/* CleanIP — project styles.
   Design system ported from reference/CleanIP-Marketplace/app/static/css/app.css,
   palette adapted to the CleanIP family (teal/emerald on slate — matches the
   already-shipped landing.html).

   PUBLISHED CLASS CONTRACT — screens ported by other agents use these exact
   names; do not rename or remove:
     hero-bg, grid-overlay, glow-blob, gradient-text, lift, meter,
     float-in (+ .d1/.d2/.d3), marquee, marquee-mask, faq-q, faq-chevron,
     x-cloak, redacted, line-clamp-2/3, flash-up.
   shadow-card / shadow-lift / font-display / brand-* / ink / gold are Tailwind
   utilities declared in templates/base.html (tailwind.config extend) so that
   hover:/md: variants work. */

[x-cloak]{ display:none !important; }

html{ -webkit-font-smoothing:antialiased; }

/* Hero gradient + subtle grid (teal/slate — same family as landing's .td-hero) */
.hero-bg{
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(45,212,191,.30), transparent 60%),
    radial-gradient(700px 500px at 0% 0%, rgba(15,118,110,.55), transparent 55%),
    linear-gradient(150deg, #0f172a 0%, #134e4a 55%, #115e59 100%);
}
.grid-overlay{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 30%, #000 60%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 30%, #000 60%, transparent 100%);
}

/* line clamp fallback */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* redaction shimmer — pre-execution identity masking (guardrail: real_* fields
   are never rendered; this class masks the placeholder, it does not hide data) */
.redacted{
  background: linear-gradient(90deg,#0f766e,#0f172a);
  color:transparent; border-radius:6px; user-select:none; position:relative;
  letter-spacing:.05em;
}
.redacted::after{ content:"REDACTED"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:rgba(255,255,255,.55); font-size:9px; font-weight:700; letter-spacing:.18em; }

/* score meter */
.meter{ height:8px; border-radius:999px; background:#e2f2ef; overflow:hidden; }
.meter > span{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#2dd4bf,#0d9488); transition:width .6s ease; }

/* nice focus rings */
input:focus, select:focus, textarea:focus{ outline:none; box-shadow:0 0 0 3px rgba(13,148,132,.15); border-color:#0d9488; }

.flash-up{ animation: flashUp .5s ease; }
@keyframes flashUp{ from{ background:#fef9c3 } to{ background:transparent } }

/* premium polish ---------------------------------------------------------- */
.gradient-text{
  background:linear-gradient(100deg,#99f6e4 0%,#5eead4 45%,#a7f3d0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.glow-blob{ position:absolute; border-radius:9999px; filter:blur(70px); opacity:.45; pointer-events:none; }
section[id]{ scroll-margin-top:5rem; }

/* float-in on first paint */
@keyframes floatIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.float-in{ animation:floatIn .7s cubic-bezier(.2,.7,.2,1) both; }
.float-in.d1{ animation-delay:.08s } .float-in.d2{ animation-delay:.16s } .float-in.d3{ animation-delay:.24s }

/* gentle card hover lift used across grids */
.lift{ transition:transform .25s ease, box-shadow .25s ease; }
.lift:hover{ transform:translateY(-3px); }

/* marquee logo strip */
.marquee{ display:flex; gap:3.5rem; animation:marquee 28s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee-mask{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
               mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }

/* faq */
.faq-chevron{ transition:transform .2s ease; }
.faq-q[aria-expanded="true"] .faq-chevron{ transform:rotate(180deg); }