/* C-SMART landing page */
:root {
  --paper: #ffffff;
  --canvas-a: #fffcf6;
  --canvas-b: #f7ecda;
  --canvas-c: #e9f1ef;
  --ink: #34200d;
  --copper: #7c4a1f;
  --copper-deep: #5c3512;
  --salmon: #d88968;
  --hair: #e8ded4;
  --wash: #faf6f2;
  --muted: #7a5a3d;
  --error: #a3271b;
  --ok: #2f6b3a;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  /* dark hero photo behind the page, faded to white via two gradient layers so the logo/card stay readable */
  background-color: var(--canvas-a);
  background-image:
    radial-gradient(ellipse 760px 460px at 50% 14%, rgba(255, 252, 246, .9) 0%, rgba(255, 252, 246, .78) 32%, rgba(255, 252, 246, .35) 58%, rgba(255, 252, 246, 0) 82%),
    linear-gradient(180deg, rgba(28, 14, 8, .40) 0%, rgba(56, 26, 12, .26) 24%, rgba(255, 250, 242, .82) 56%, var(--canvas-a) 78%),
    url('img/hero_grid_bg.jpg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center top, right 38%;
  background-size: auto, auto, cover;
  background-attachment: scroll, scroll, fixed;
  color: var(--ink);
  font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 860px) {
  /* iOS Safari mishandles background-attachment: fixed */
  body { background-attachment: scroll, scroll, scroll; }
}

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

.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(16px, 4vh, 48px) 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.logo-wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 2200 / 487;
}
.logo-wrap picture { display: contents; }
.logo, .logo-glow, .logo-fx {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}

/* sweeping highlight across the logo lettering */
.logo-glow {
  filter: brightness(1.9) saturate(1.8) contrast(1.05);
  -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
          mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 300% 100%;          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;        mask-repeat: no-repeat;
  animation: sweep 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%   { -webkit-mask-position: 92% 0; mask-position: 92% 0; }
  70%  { -webkit-mask-position: 8% 0;  mask-position: 8% 0; }
  100% { -webkit-mask-position: 8% 0;  mask-position: 8% 0; }
}

.logo-fx { pointer-events: none; overflow: visible; }
.pulse {
  fill: none;
  stroke: #ff7a3c;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 9 91;
  stroke-dashoffset: 9;
  filter: drop-shadow(0 0 5px #ff8a4a);
  animation: flow 2.2s linear infinite;
}
@keyframes flow {
  from { stroke-dashoffset: 9; }
  to   { stroke-dashoffset: -91; }
}

/* spark flicker, randomized per element so they don't sync */
.spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: zap 4s linear infinite;
}
@keyframes zap {
  0%, 84%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  86% { opacity: 1;  transform: scale(1)    rotate(10deg); }
  88% { opacity: .15; transform: scale(.7)  rotate(-6deg); }
  90% { opacity: 1;  transform: scale(1.25) rotate(18deg); }
  95% { opacity: .35; transform: scale(.9)  rotate(30deg); }
}

.choices {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  text-align: left;
  font: inherit;
  color: var(--copper-deep);
  background: var(--paper);
  border: 1.5px solid var(--copper);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.choice svg {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-text strong { font-size: 1.05rem; font-weight: 700; }
.choice-text span { font-size: .82rem; font-weight: 500; color: var(--muted); }

.choice:hover { background: var(--wash); }

.choice[aria-pressed="true"] {
  background: var(--copper);
  color: #fff;
}
.choice[aria-pressed="true"] .choice-text span { color: #f2e2d3; }

.choice:focus-visible,
.link:focus-visible,
.primary:focus-visible {
  outline: 3px solid var(--salmon);
  outline-offset: 3px;
}

.panel-row {
  position: relative;
  width: 100%;
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.panel-row[hidden] { display: none; }
.panel-row:not([hidden]) { animation: rise .2s ease-out; }

.panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 28px 28px 24px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-top: 3px solid var(--copper);
  border-radius: 6px;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.side-art {
  position: absolute;
  top: 50%;
  height: min(300px, 100%);
  width: calc((100% - 440px) / 2 - 24px);
  min-width: 0;
  transform: translateY(-50%);
  color: var(--copper);
  opacity: .16;
  pointer-events: none;
}
.side-art--l { left: 0; }
.side-art--r { right: 0; transform: translateY(-50%) scaleX(-1); }
.side-flow {
  stroke: var(--salmon);
  stroke-width: 3;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 8;
  animation: flow 3.2s linear infinite;
}
@media (max-width: 1000px) { .side-art { display: none; } }

.form { display: flex; flex-direction: column; }
.form[hidden] { display: none; }

.form [data-step] { display: flex; flex-direction: column; }
.form [data-step][hidden] { display: none; }

.form h2 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--copper-deep);
}

.form label {
  margin: 12px 0 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
}

.form input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #d3bfad;
  border-radius: 6px;
}
.form input::placeholder { color: #b39c86; }
.form input:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(216, 137, 104, .35);
}
.form input.pin { text-align: center; letter-spacing: .5em; font-weight: 700; }

.hint { margin: 0 0 4px; font-size: .85rem; color: var(--muted); }
.notice {
  margin: 0;
  padding: 14px 16px;
  font-size: .9rem;
  line-height: 1.6;
  background: var(--wash);
  border-left: 3px solid var(--salmon);
  border-radius: 4px;
}
.notice a { color: var(--copper-deep); font-weight: 700; word-break: break-all; }

.error, .ok { margin: 14px 0 0; font-size: .85rem; font-weight: 600; }
.error { color: var(--error); }
.ok { color: var(--ok); }
.error[hidden], .ok[hidden] { display: none; }

.actions { display: flex; gap: 10px; margin-top: 20px; }
.actions button { flex: 1; margin: 0; }

.primary, .secondary {
  padding: 13px 18px;
  font: inherit;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s ease;
}
.primary { color: #fff; background: var(--copper); border: 1.5px solid var(--copper); }
.primary:hover { background: var(--copper-deep); }
.primary:disabled { opacity: .65; cursor: progress; }
.secondary { color: var(--copper-deep); background: #fff; border: 1.5px solid #d3bfad; }
.secondary:hover { background: var(--wash); }
.secondary:focus-visible { outline: 3px solid var(--salmon); outline-offset: 3px; }

.link {
  align-self: center;
  margin-top: 14px;
  padding: 4px 6px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

.foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border-top: 1px solid var(--hair);
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
}
.foot img { width: auto; height: 40px; }

@media (max-width: 860px) {
  .choices { grid-template-columns: 1fr; max-width: 460px; }
  .panel { max-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-row:not([hidden]) { animation: none; }
  .choice, .primary { transition: none; }
  .logo-glow, .logo-fx, .side-flow { display: none; }
}

.coming-soon {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 28px 30px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(60, 40, 20, .08);
}
.cs-eyebrow {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--salmon);
}
.cs-title {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--copper-deep);
}
.cs-body {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
}