/* AMAADOR shared "Coming soon" badge + placeholder page layout. Design-owned. No text, no price, no button, no payment link. */
:root{
  --cs-ink:#0f1f3d;          /* text on soft surface: 15:1 on --cs-bg */
  --cs-bg:#eef2f7;           /* badge surface */
  --cs-line:#c3ccd9;         /* badge border */
  --cs-muted:#4a5870;        /* secondary text: 6.6:1 on #fff */
  --cs-card:#ffffff;
  --cs-radius:999px;
  --cs-card-radius:20px;
  --cs-shadow:0 10px 30px rgba(15,31,61,.08);
  --cs-dot:#5a6b86;
}
html[data-theme="dark"],html[data-theme="pitch"]{
  --cs-ink:#eaf0fb; --cs-bg:#15213d; --cs-line:#34456b; --cs-muted:#b4c0d8;
  --cs-card:#0d1730; --cs-shadow:0 10px 30px rgba(0,0,0,.35); --cs-dot:#9db0d3;
}
/* Sites may override tokens in their own scope, e.g. .cs-scope{--cs-ink:...} */
.cs-badge{
  display:inline-flex;align-items:center;gap:.5em;
  padding-block:.35em;padding-inline:.9em .95em;
  border:1px solid var(--cs-line);border-radius:var(--cs-radius);
  background:var(--cs-bg);color:var(--cs-ink);
  font:600 .8125rem/1.2 "Poppins","IBM Plex Sans","Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.02em;white-space:nowrap;vertical-align:middle;
  pointer-events:none;user-select:none;
}
.cs-badge::before{content:"";inline-size:.5em;block-size:.5em;border-radius:50%;background:var(--cs-dot);flex:none}
.cs-badge:lang(ar),.cs-badge[lang="ar"]{letter-spacing:0;font-family:"Tajawal","Noto Kufi Arabic","IBM Plex Sans Arabic",system-ui,sans-serif;font-size:.875rem}
/* Placeholder page */
.cs-page{max-inline-size:44rem;margin-inline:auto;padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,1.5rem)}
.cs-card{background:var(--cs-card);color:var(--cs-ink);border:1px solid var(--cs-line);border-radius:var(--cs-card-radius);box-shadow:var(--cs-shadow);padding:clamp(1.5rem,5vw,3rem);text-align:start}
.cs-card h1{margin:.9rem 0 .6rem;font-size:clamp(1.6rem,4.5vw,2.25rem);line-height:1.2;color:var(--cs-ink)}
.cs-card p{margin:0 0 1rem;font-size:1.0625rem;line-height:1.65;color:var(--cs-muted)}
/* :not(#cs) raises specificity above site rules such as main a:not(.c-card):not(.c-dom):not(.btn){color:..} (opex) without !important */
.cs-page .cs-card a:not(#cs){color:var(--cs-ink);text-decoration:underline;text-underline-offset:.2em}
.cs-page .cs-card a:not(#cs):focus-visible{outline:3px solid var(--cs-dot);outline-offset:3px;border-radius:4px}
/* Item that is not live yet: no dimming (keeps all text at full contrast) */
.cs-item-soon .cs-badge{margin-block-start:.5rem}
@media (max-width:480px){.cs-badge{font-size:.78rem}}
@media (prefers-reduced-motion:reduce){.cs-badge,.cs-card{transition:none}}