/* C-01 Sign in (approved 20 October 2026). */
.si-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--page);
}

.si-header {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: 10px var(--space-32);
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}
.si-wordmark { display: inline-flex; align-items: center; }

.si-main {
  position: relative; z-index: 1;
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-32);
  width: 100%; max-width: 1120px; margin-inline: auto;
  padding: var(--space-32);
}

.si-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.si-logo { display: flex; justify-content: center; }
.si-motto {
  margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-12);
  font-size: 26px; line-height: 36px; font-weight: 500;
}
.si-sub { margin: 0; max-width: 420px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--slate-600); }

.si-card {
  justify-self: center;
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}
.si-card-head { display: flex; flex-direction: column; gap: var(--space-4); }
.si-form { display: flex; flex-direction: column; gap: var(--space-16); margin: 0; }
.si-submit { margin-block-start: var(--space-8); }
.si-button-link { text-decoration: none; }
.si-button-link:hover { color: #fff; }
.si-small-link { font-size: 12px; line-height: 16px; }
.si-text-button { border: none; background: none; padding: 0; color: var(--teal-700); font: 400 12px/16px var(--font-sans); text-decoration: underline; cursor: pointer; }
.si-card-foot { margin: 0; padding-block-start: var(--space-16); border-block-start: 1px solid var(--border); font-size: 12px; line-height: 16px; color: var(--slate-600); }

.si-footer { position: relative; z-index: 1; padding: var(--space-16) var(--space-32); font-size: 12px; line-height: 16px; color: var(--slate-600); }

/* Moving background */
.si-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .6; }
.si-net { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; animation: si-pan 50s ease-in-out infinite; }
@keyframes si-pan { 0%, 100% { transform: scale(1.03) translate(0, 0); } 33% { transform: scale(1.08) translate(-20px, -10px); } 66% { transform: scale(1.05) translate(16px, 8px); } }
.si-track { fill: none; stroke: var(--teal-700); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 14; opacity: .22; animation: si-flow 5s linear infinite; }
@keyframes si-flow { to { stroke-dashoffset: -56; } }
.si-node { opacity: .05; animation: si-on 24s linear infinite; animation-delay: var(--d); }
.si-node > rect { fill: var(--surface); stroke: var(--slate-300); animation: si-hit 24s linear infinite; animation-delay: var(--d); }
.si-node text { font: 500 12px var(--font-sans); fill: var(--slate-600); }
@keyframes si-on { 0%, 9% { opacity: 1; } 14%, 96% { opacity: .05; } 100% { opacity: 1; } }
@keyframes si-hit { 0%, 9% { fill: var(--teal-50); stroke: var(--teal-700); } 14%, 95% { fill: var(--surface); stroke: var(--slate-300); } 100% { fill: var(--teal-50); stroke: var(--teal-700); } }
.si-evt { opacity: 0; animation: si-evt 24s ease-out infinite; animation-delay: var(--d); }
.si-evt rect { fill: var(--teal-700); }
.si-evt text { font: 500 12px var(--font-sans); fill: #fff; text-anchor: middle; }
@keyframes si-evt { 0% { opacity: 0; transform: translateY(6px); } 2%, 9% { opacity: 1; transform: none; } 13%, 100% { opacity: 0; transform: translateY(-4px); } }
.si-store { fill: var(--teal-700); animation: si-twinkle 4s ease-in-out infinite; }
@keyframes si-twinkle { 0%, 100% { opacity: .2; } 50% { opacity: .7; } }

/* Motto */
.si-word { display: inline-block; opacity: 0; animation: si-rise 1s cubic-bezier(.2, .8, .2, 1) forwards, si-glow 7.5s ease-in-out infinite; }
.si-w1 { animation-delay: .2s, 1.4s; }
.si-w2 { animation-delay: .6s, 3.9s; }
.si-w3 { animation-delay: 1s, 6.4s; }
@keyframes si-rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes si-glow { 0%, 30%, 100% { color: var(--ink); transform: none; } 8%, 22% { color: var(--teal-700); transform: translateY(-3px); } }
.si-sep { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--green-600); transform: rotate(45deg) scale(0); animation: si-pop .4s ease-out forwards; }
.si-s1 { animation-delay: .5s; }
.si-s2 { animation-delay: .9s; }
@keyframes si-pop { to { transform: rotate(45deg) scale(1); } }
.si-sub { opacity: 0; animation: si-rise 1s ease-out 1.3s forwards; }

@media (prefers-reduced-motion: reduce) {
  .si-net, .si-track, .si-node, .si-node > rect, .si-evt, .si-store, .si-word, .si-sep, .si-sub { animation: none; }
  .si-token { display: none; }
  .si-node { opacity: .8; }
  .si-word, .si-sub { opacity: 1; }
  .si-sep { transform: rotate(45deg); }
}

/* Below 860px the brand side and moving background are hidden. */
@media (max-width: 859px) {
  .si-main { grid-template-columns: 1fr; }
  .si-bg, .si-brand { display: none; }
}

/* Phones: full logo with tagline and the motto above the form. */
@media (max-width: 599px) {
  .si-header { padding-inline: var(--space-16); }
  .si-wordmark { visibility: hidden; }
  .si-main { gap: var(--space-16); padding: var(--space-16); align-items: start; }
  .si-brand { display: flex; gap: var(--space-16); }
  .si-logo .cc-logo { --logo-h: 120px !important; }
  .si-motto { font-size: 16px; line-height: 24px; gap: var(--space-8); }
  .si-sep { width: 5px; height: 5px; }
  .si-sub { display: none; }
  .si-card { padding: var(--space-24); }
  .si-footer { padding-inline: var(--space-16); }
}