/* Coming-soon page for the romelmasagca.com subdomains.
   MASTER COPY: RomelMasagca.COM/_template/coming-soon/coming-soon.css (build.js copies it).
   Colours, fonts, buttons and the blueprint .rm-hero band come from shared/rm-tools.css. */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

.cs {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px 72px;
}

/* A drawing sheet on the blueprint: thin frame with corner ticks */
.cs-sheet {
  position: relative;
  width: 100%;
  max-width: 760px;
  padding: 44px 44px 40px;
  border: 1px solid rgba(173, 216, 255, .28);
  background: rgba(7, 29, 53, .45);
}
.cs-sheet::before, .cs-sheet::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--rm-amber);
  border-style: solid;
  pointer-events: none;
}
.cs-sheet::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.cs-sheet::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.cs h1 {
  margin: 0 0 14px;
  font-size: clamp(2.3rem, 7vw, 3.8rem);
  line-height: 1.02;
}
.cs-lead { margin: 0 0 26px; max-width: 58ch; font-size: 1.05rem; line-height: 1.6; }

.cs-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px dashed rgba(255, 176, 32, .6);
  font: 600 .74rem var(--rm-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rm-hero-ink);
}
.cs-status b { color: var(--rm-amber); font-weight: 600; }
.cs-sep { color: var(--rm-hero-muted); }
.cs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rm-amber);
  box-shadow: 0 0 0 0 rgba(255, 176, 32, .6);
  animation: cs-pulse 2s infinite;
}
@keyframes cs-pulse {
  70% { box-shadow: 0 0 0 9px rgba(255, 176, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 32, 0); }
}
@media (prefers-reduced-motion: reduce) { .cs-dot { animation: none; } }

.cs-planned { margin: 30px 0 0; }
.cs-planned h2 {
  margin: 0 0 10px;
  font: 600 .72rem var(--rm-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rm-hero-muted);
}
.cs-planned ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cs-planned li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--rm-hero-ink);
  line-height: 1.5;
}
.cs-planned li::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 1px;
  background: var(--rm-amber);
  transform: translateY(-4px);
}

.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
/* Outline buttons read as light-on-dark on the blueprint in both themes */
.cs-actions .rm-btn:not(.rm-btn-primary) {
  color: var(--rm-hero-ink);
  border-color: rgba(173, 216, 255, .35);
  background: rgba(7, 29, 53, .4);
}
.cs-actions .rm-btn:not(.rm-btn-primary):hover { border-color: var(--rm-amber); color: var(--rm-amber); }

@media (max-width: 560px) {
  .cs { padding: 36px 14px 48px; }
  .cs-sheet { padding: 28px 20px 26px; }
  .cs-actions .rm-btn { flex: 1 1 100%; justify-content: center; }
}