:root { --gold: #ddb21d; --gold-dim: rgba(221, 178, 29, .35); --gold-faint: rgba(221, 178, 29, .18); --ink: #f3ead0; }
* { box-sizing: border-box; margin: 0; }
html { min-height: 100%; background: #000; }
body {
  min-height: 100vh;
  color: var(--ink);
  font-family: Jost, "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
  /* Projector glow. The logo uses mix-blend-mode: lighten, so its black square melts into this. */
  background: radial-gradient(ellipse 80% 38% at 50% 10%, rgba(221, 178, 29, .16), transparent 70%), #000;
  background-repeat: no-repeat;
}

/* Film-strip perforations along the top and bottom edges (same as the coming-soon page). */
.strip {
  position: fixed; left: 0; right: 0; height: 12px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--gold-dim) 0 16px, transparent 16px 32px);
  animation: roll 6s linear infinite;
}
.strip.top { top: 14px; } .strip.bottom { bottom: 14px; }
@keyframes roll { to { background-position-x: 32px; } }

main {
  max-width: 440px; margin: 0 auto; padding: 3.5rem 16px 4.5rem;
  display: flex; flex-direction: column; gap: 2rem; text-align: center;
}
header { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.logo { width: 150px; height: auto; mix-blend-mode: lighten; }
h1 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.05; color: var(--gold); }
.tagline { opacity: .8; line-height: 1.6; font-size: .95rem; }

section { display: flex; flex-direction: column; gap: .8rem; }
h2 { font-size: .8rem; font-weight: 600; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }

.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.fill { fill: currentColor; stroke: none; }

/* Link buttons: Wi-Fi networks (<button>) and review sites (<a>) share one look. */
.link {
  display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 1.1rem; text-align: left; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
  border: 1px solid var(--gold-dim); border-radius: 14px; background: rgba(221, 178, 29, .05);
  transition: border-color .15s, background .15s;
}
.link > .ic:first-child { width: 28px; height: 28px; color: var(--gold); }
.link span { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.link b { font-size: 1.05rem; font-weight: 600; }
.link small { font-size: .8rem; opacity: .7; }
.link .arrow { width: 20px; height: 20px; color: var(--gold); transition: transform .15s; }
.link:hover, .link:focus-visible { border-color: var(--gold); background: rgba(221, 178, 29, .1); outline: none; }
.link:hover .arrow, .link:focus-visible .arrow { transform: translateX(4px); }

footer { font-size: .75rem; opacity: .5; }

/* Wi-Fi panel */
dialog {
  margin: auto; /* the global margin reset would pin it to the top-left corner */
  width: min(400px, calc(100% - 32px)); padding: 0;
  color: var(--ink); background: #0b0a05; border: 1px solid var(--gold-dim); border-radius: 16px;
}
dialog::backdrop { background: rgba(0, 0, 0, .75); }
.sheet { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem; text-align: left; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; color: var(--gold); }
.sheet-head h3 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 500; font-size: 1.5rem; }
.close { padding: .3rem; background: none; border: 0; color: var(--gold); cursor: pointer; }
.msg { min-height: 1.3em; font-size: .85rem; color: var(--gold); }
.steps { padding-inline-start: 1.2rem; margin-top: .3rem; font-size: .9rem; line-height: 1.8; opacity: .85; }
.steps b { color: var(--gold); font-weight: 600; }

/* Copy rows inside the panel */
.row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem 1rem;
  width: 100%; padding: .75rem .9rem; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink); background: rgba(0, 0, 0, .4);
  border: 1px solid var(--gold-faint); border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.row:hover, .row:focus-visible { border-color: var(--gold); background: rgba(221, 178, 29, .08); outline: none; }
.row .lbl { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.row .val { grid-row: 2; font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; overflow-wrap: anywhere; }
.row .ic { grid-row: 1 / span 2; grid-column: 2; color: var(--gold); width: 20px; height: 20px; }
.row .ok, .row.done .cp { display: none; }
.row.done .ok { display: block; }

@media (prefers-reduced-motion: reduce) { .strip { animation: none; } * { transition: none !important; } }