:root{
  --paper: #FAF9F6;
  --ink: #1C1B19;
  --ink-soft: #5C5952;
  --line: rgba(28,27,25,0.10);
  --accent: #8A7350; /* matte bronze, neutral / brand-agnostic */
  --accent-soft: rgba(138,115,80,0.10);
}

*{ box-sizing: border-box; margin:0; padding:0; }

html, body{
  height:100%;
}

body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding: 32px;
  position:relative;
  overflow:hidden;
}

/* subtle background texture */
body::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 70%);
  pointer-events:none;
}

.card{
  position:relative;
  z-index:1;
  max-width: 560px;
  width:100%;
  text-align:center;
}

.mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 56px;
  height:56px;
  border:1px solid var(--line);
  border-radius:2px;
  background: var(--paper);
  margin-bottom: 32px;
}

.mark svg{
  width:24px;
  height:24px;
  stroke: var(--accent);
  fill:none;
  stroke-width:1.6;
}

.mark.spin svg{
  animation: rotate 6s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes rotate{
  to{ transform: rotate(360deg); }
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--accent);
  margin-bottom:18px;
}

h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size: clamp(28px, 5vw, 42px);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin-bottom:16px;
}

p.lede{
  font-size:16px;
  line-height:1.6;
  color: var(--ink-soft);
  max-width: 440px;
  margin: 0 auto 36px;
}

.progress-wrap{
  width:100%;
  max-width: 320px;
  margin: 0 auto 36px;
}

.progress-track{
  height:2px;
  width:100%;
  background: var(--line);
  border-radius:1px;
  overflow:hidden;
  position:relative;
}

.progress-fill{
  position:absolute;
  top:0; left:0; bottom:0;
  width:40%;
  background: var(--accent);
  border-radius:1px;
  animation: slide 2.2s ease-in-out infinite;
}

@keyframes slide{
  0%{ left:-40%; }
  100%{ left:100%; }
}

.meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color: var(--ink-soft);
  margin-top:8px;
}

.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background: var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.3; }
}

footer{
  position:absolute;
  bottom:24px;
  left:0;
  right:0;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--ink-soft);
  opacity:0.55;
}

@media (max-width: 480px){
  .card{ padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce){
  .mark.spin svg{ animation:none; }
  .progress-fill{ animation:none; left:0; width:100%; opacity:0.5; }
  .dot{ animation:none; }
}