/* ─────────────────────────────────────────────────────────────────────────────
   Coming soon — inspacecrm.com while the front door is closed.
   Loaded only by layouts/soon.phtml. The landing page's world at a smaller
   scale: Archivo at its expanded width (the wdth axis, 125) for the statement
   and for the one thing that replaces the five, paper white above one slate
   band, and the readable step of the product's blue (#0369A1) for anything
   that is text or carries white. No colour here that app.css does not have,
   beyond tints derived from it.
   ──────────────────────────────────────────────────────────────────────────── */

.sn {
  --sn-muted: #64748B;   /* 4.76:1 on white */
  --sn-ink:   #0369A1;   /* white on it is 5.93:1 */

  margin: 0;
  background: var(--crm-card-bg);
  color: var(--crm-text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn ::selection { background: rgba(14, 165, 233, 0.24); color: var(--crm-text); }

.sn-shell { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* Header, the argument, the way in, footer — the middle row takes whatever
   height is left, so on a tall phone the slate band still sits low and in
   reach. */
.sn-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.sn-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 68px;
}
.sn-mark { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.sn-mark span { color: var(--sn-ink); }
.sn-lang {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-size: 14px; font-weight: 500; color: var(--crm-text-secondary);
  text-decoration: none;
}
.sn-lang:hover { color: var(--sn-ink); }

/* ── The statement ──────────────────────────────────────────────────────── */

.sn-main {
  align-self: center;
  padding: clamp(28px, 4.5vw, 60px) 0;
}
.sn-q {
  margin: 0;
  max-width: 17ch;
  font-family: Archivo, Inter, sans-serif;
  font-stretch: 125%;
  font-size: clamp(2.05rem, 5.4vw, 4.3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-wrap: balance;
}

/* "Muy pronto" used to be the second display line, which made the loudest type
   on the page the one thing the page least wants to say. It is a status now:
   the product gets the display, the closed door gets a sentence. */
.sn-status {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  max-width: 58ch;
  font-size: clamp(1.01rem, 1.4vw, 1.14rem);
  line-height: 1.6;
  color: var(--crm-text-secondary);
}
.sn-status strong { color: var(--sn-ink); font-weight: 600; }
/* A fill, not language: the colour is 2.77:1 and a dot is read as position. */
.sn-dot {
  display: inline-block; width: 9px; height: 9px; margin-right: 9px;
  border-radius: 50%; background: var(--crm-primary);
  vertical-align: 0.06em;
}

/* ── Five things, then one ──────────────────────────────────────────────── */

.sn-swap {
  margin-top: clamp(38px, 5.5vw, 68px);
  padding-top: clamp(26px, 3.6vw, 40px);
  border-top: 1px solid var(--crm-border);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

/* Not an eyebrow: it is the first half of the sentence the right column
   finishes, so it is set as words rather than as a tracked-out label. */
.sn-from-h {
  margin: 0 0 16px;
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--sn-muted);
}
.sn-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sn-list li {
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  line-height: 1.3;
  color: var(--sn-muted);
}

/* The page's one authored moment, in two beats: the five are struck in turn,
   and the thing that replaces them arrives. The words are legible from the
   first frame — only the rule over them is drawn — so a reader who never sees
   the animation reads exactly the same page. */
.sn-list span { position: relative; display: inline-block; }
.sn-list span::after {
  content: '';
  position: absolute; left: -2px; right: -2px; top: 54%;
  height: 1px; background: currentColor; opacity: 0.8;
  transform: scaleX(0); transform-origin: left center;
  animation: sn-strike 0.42s cubic-bezier(.16, 1, .3, 1) both;
}
.sn-list li:nth-child(1) span::after { animation-delay: 0.30s; }
.sn-list li:nth-child(2) span::after { animation-delay: 0.42s; }
.sn-list li:nth-child(3) span::after { animation-delay: 0.54s; }
.sn-list li:nth-child(4) span::after { animation-delay: 0.66s; }
.sn-list li:nth-child(5) span::after { animation-delay: 0.78s; }
@keyframes sn-strike { to { transform: scaleX(1); } }

.sn-to {
  position: relative;
  margin-left: clamp(30px, 5vw, 64px);
  padding-left: clamp(30px, 5vw, 64px);
  border-left: 1px solid var(--crm-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The short rule across the divider is what makes the two columns one
   sentence rather than two lists side by side. */
.sn-to::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: clamp(14px, 2vw, 22px); height: 1px;
  background: var(--crm-border);
}
.sn-one {
  margin: 0;
  max-width: 15ch;
  font-family: Archivo, Inter, sans-serif;
  font-stretch: 125%;
  font-size: clamp(1.48rem, 2.9vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
  animation: sn-land 0.8s cubic-bezier(.16, 1, .3, 1) 0.9s both;
}
@keyframes sn-land {
  from { opacity: 0; filter: blur(10px); transform: translateY(0.14em); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
.sn-one-sub {
  margin: 15px 0 0;
  max-width: 44ch;
  font-size: clamp(0.97rem, 1.25vw, 1.07rem);
  line-height: 1.6;
  color: var(--crm-text-secondary);
}

/* ── The way in ─────────────────────────────────────────────────────────── */

.sn-access {
  padding: clamp(36px, 5vw, 56px) 0;
  background: var(--crm-sidebar-bg);
  color: #fff;
}
.sn-access-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 22px 56px;
}
.sn-access h2 {
  margin: 0;
  font-family: Archivo, Inter, sans-serif;
  font-stretch: 125%;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}
/* --crm-text-muted is wrong on paper and right here: 5.71:1 on the slate. */
.sn-access p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--crm-text-muted); }

.sn-form { display: flex; flex-wrap: wrap; gap: 10px; }

/* One control that reads as the address itself: what they type sits flush
   against the domain, so "cosmos" becomes "cosmos.inspacecrm.com" as it is
   typed, without a line of script. */
.sn-field {
  flex: 1 1 290px;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  display: flex; align-items: center;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 22px 40px -24px rgba(0, 0, 0, 0.7);
  cursor: text;
}
.sn-field:focus-within { outline: 3px solid var(--crm-primary); outline-offset: 2px; }
.sn-field input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0; outline: 0; background: transparent;
  font: 600 16px/1 Inter, system-ui, sans-serif;   /* 16px: iOS zooms on anything smaller */
  color: var(--crm-text);
  caret-color: var(--sn-ink);
  text-align: right;
}
.sn-field input::placeholder { color: var(--sn-muted); font-weight: 500; opacity: 1; }
.sn-suffix {
  flex: none;
  font: 500 16px/1 Inter, system-ui, sans-serif;
  color: var(--sn-muted);
  white-space: nowrap;
}

.sn-go {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 18px 0 22px;
  display: inline-flex; align-items: center; gap: 2px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--sn-ink);
  color: #fff;
  font: 600 15.5px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 22px 40px -24px rgba(0, 0, 0, 0.7);
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), background-color .18s;
}
.sn-go i { font-size: 22px; }
.sn-go:hover { background: var(--crm-primary-ink-hover); transform: translateY(-1px); }
.sn-go:active { transform: none; }
.sn-go:focus-visible { outline: 3px solid var(--crm-primary); outline-offset: 2px; }

/* A tint of --crm-danger: the red itself is 3.3:1 on the slate. */
.sn-error {
  margin: 12px 0 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 1.45;
  color: #FCA5A5;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.sn-foot {
  padding: 18px 0 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  font-size: 13px; color: var(--sn-muted);
}
.sn-foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 18px; }
.sn-foot a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--crm-text-secondary); text-decoration: none;
}
.sn-foot a:hover { color: var(--sn-ink); text-decoration: underline; text-underline-offset: 3px; }

.sn a:focus-visible { outline: 2px solid var(--sn-ink); outline-offset: 3px; border-radius: 4px; }

.sn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  /* The two columns become two paragraphs of one argument: the rule that
     separated them turns into the rule that follows the five. */
  .sn-swap { grid-template-columns: 1fr; }
  .sn-to {
    margin-left: 0; padding-left: 0;
    margin-top: clamp(22px, 4vw, 30px); padding-top: clamp(22px, 4vw, 30px);
    border-left: 0; border-top: 1px solid var(--crm-border);
  }
  .sn-to::before { display: none; }
  .sn-one { max-width: 20ch; }
}

@media (max-width: 780px) {
  .sn-access-in { grid-template-columns: 1fr; }
  .sn-foot nav { margin-left: 0; }
}
@media (max-width: 420px) {
  .sn-go { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sn *, .sn *::before, .sn *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}