/* ===== UUTOS — Universal User Terms of Service ===== */

:root {
  --navy-900: #081a33;
  --navy-800: #0b2447;
  --navy-700: #12315e;
  --navy-600: #19376d;
  --navy-100: #dbe4f3;
  --gold: #c9a227;
  --gold-light: #e3c565;
  --ink: #1c2333;
  --paper: #f7f8fb;
  --muted: #5a6478;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

/* ---------- Header ---------- */

.site-header {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: #fff;
  padding: 4.5rem 1.5rem 4rem;
  text-align: center;
  border-bottom: 4px solid var(--gold);
}

.seal {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.5rem;
  border: 3px double var(--gold-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--gold-light);
  font-family: Georgia, serif;
}

.site-header h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
}

.site-header .subtitle {
  margin: 0 auto;
  max-width: 44rem;
  font-size: 1.1rem;
  color: var(--navy-100);
  font-style: italic;
}

.header-rule {
  width: 120px;
  border: none;
  border-top: 2px solid var(--gold);
  margin: 1.25rem auto;
}

/* ---------- Layout ---------- */

main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: 3rem 0 1rem;
}

h2 {
  font-size: 1.5rem;
  color: var(--navy-800);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.4rem;
}

h2 .section-number {
  color: var(--gold);
  margin-right: 0.5rem;
}

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.5rem 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.25rem 3.25rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
}

.steps li strong {
  color: var(--navy-800);
  font-size: 1.08em;
  /* Gold highlight sweep, revealed on scroll (see .in-view below) */
  background-image: linear-gradient(transparent 60%, rgba(201, 162, 39, 0.4) 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ---------- Download cards ---------- */

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.download-card {
  background: #fff;
  border: 1px solid #d5dbe8;
  border-top: 4px solid var(--navy-800);
  border-radius: 6px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(8, 26, 51, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}

.download-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(8, 26, 51, 0.18);
  border-top-color: var(--gold);
}

.download-card h3 {
  margin: 0 0 0.5rem;
  color: var(--navy-800);
  font-size: 1.15rem;
}

.download-card p {
  font-size: 0.95rem;
  color: var(--muted);
  min-height: 3.5rem;
}

.btn {
  display: inline-block;
  background: var(--navy-800);
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1.6rem;
  border-radius: 4px;
  font-family: Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
  border: 1px solid var(--navy-800);
  transition: background 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover, .btn:focus-visible {
  background: var(--navy-600);
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(8, 26, 51, 0.28);
}

.btn.btn-outline {
  background: transparent;
  color: var(--navy-800);
}

.btn.btn-outline:hover {
  background: var(--navy-100);
}

/* ---------- Document preview ---------- */

.document-frame {
  background: #fff;
  border: 1px solid #d5dbe8;
  box-shadow: 0 2px 14px rgba(8, 26, 51, 0.08);
  padding: 3rem clamp(1.25rem, 5vw, 3.5rem);
  margin: 2rem 0;
}

.document-frame h3 {
  text-align: center;
  color: var(--navy-800);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.25rem;
  margin-top: 0;
}

.document-frame h4 {
  color: var(--navy-800);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  margin: 2rem 0 0.75rem;
  border-bottom: 1px solid var(--navy-100);
  padding-bottom: 0.3rem;
}

.document-frame p { font-size: 0.98rem; }

.doc-meta {
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 2rem;
}

.placeholder {
  font-style: italic;
  color: var(--navy-600);
  background: var(--navy-100);
  padding: 0 0.3em;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---------- Disclaimer / footer ---------- */

.disclaimer {
  background: var(--navy-900);
  color: var(--navy-100);
  margin-top: 4rem;
  padding: 2.5rem 1.5rem;
  border-top: 4px solid var(--gold);
}

.disclaimer .inner {
  max-width: 52rem;
  margin: 0 auto;
  font-size: 0.9rem;
}

.disclaimer h2 {
  color: var(--gold-light);
  border-bottom-color: var(--navy-600);
  font-size: 1rem;
}

.disclaimer a { color: var(--gold-light); }

.footer-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: #8fa1c4;
}

/* ---------- Scroll-reveal & attention animations ----------
   All "start hidden" rules are gated behind html.js, which is only added
   by main.js when JS runs and the user hasn't requested reduced motion.
   Without it the page is fully static. */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Steps slide in from the left, staggered (delay set inline by JS) */
.js .step-reveal {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.js .step-reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Number badge pops as its step arrives */
.js .step-reveal::before {
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s,
              opacity 0.3s ease 0.25s;
}

.js .step-reveal.in-view::before {
  transform: scale(1);
  opacity: 1;
  animation: badge-ring 0.9s ease 0.45s;
}

@keyframes badge-ring {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.65); }
  100% { box-shadow: 0 0 0 14px rgba(201, 162, 39, 0); }
}

/* Gold highlight sweeps across the bold lead phrase of each step,
   so a skimmer's eye lands on the five-phrase summary of the page. */
.js .step-reveal strong {
  background-size: 0% 100%;
  transition: background-size 0.7s ease 0.45s;
}

.js .step-reveal.in-view strong {
  background-size: 100% 100%;
}

/* Header settles in on load */
.js .site-header .seal,
.js .site-header h1,
.js .site-header .header-rule,
.js .site-header .subtitle {
  animation: header-in 0.8s ease both;
}

.js .site-header h1         { animation-delay: 0.15s; }
.js .site-header .header-rule { animation-delay: 0.3s; }
.js .site-header .subtitle  { animation-delay: 0.45s; }

@keyframes header-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Safety net: even if JS ran, honor a live reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .step-reveal, .js .step-reveal::before {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .js .step-reveal strong { background-size: 100% 100%; transition: none; }
  .js .site-header .seal, .js .site-header h1,
  .js .site-header .header-rule, .js .site-header .subtitle { animation: none; }
  .btn, .download-card { transition: none; }
  .btn:hover, .download-card:hover { transform: none; }
}