:root{
  --bg:#FFFFFF; --gold:#FF5A00; --gold-soft:#FF5A00; --gold-dim:#C94300; --line:#FFD2B5; --field:#FFF7F2; --deep:#E04E00; --on-accent:#FFFFFF;
  --f-body:"Jost","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);box-shadow:inset 0 10px 0 var(--gold);color:var(--gold);font:400 1rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.page{min-height:100%;display:grid;grid-template-rows:1fr auto;padding-inline:16px}
main{display:grid;place-items:center;padding-block:56px}
.center{display:grid;justify-items:center;text-align:center;gap:0;width:100%;max-width:30rem}

.logo{width:clamp(112px,26vw,150px);height:auto;color:var(--gold)}
h1{font:500 clamp(2rem,7.4vw,3.4rem)/1.1 var(--f-body);letter-spacing:.2em;padding-left:.2em;text-transform:uppercase;margin:32px 0 0;color:var(--gold-soft);text-wrap:balance}
.sub{font:600 .84rem/1 var(--f-body);letter-spacing:.42em;text-transform:uppercase;margin:18px 0 0;padding-left:.42em;color:var(--gold)}
.sub-2{margin-top:12px}
.rule{width:64px;height:3px;background:var(--gold);margin:clamp(56px,10vh,96px) 0 clamp(64px,12vh,120px)}

.btn{font:600 .84rem/1 var(--f-body);letter-spacing:.32em;text-transform:uppercase;padding:18px 52px 18px calc(52px + .32em);color:var(--on-accent);background:var(--gold);border:2px solid var(--gold);border-radius:0;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{border-color:var(--deep)}
.btn:focus-visible,input:focus-visible{outline:1px solid var(--gold-soft);outline-offset:4px}
.invite{font:500 .78rem/1 var(--f-body);letter-spacing:.3em;text-transform:uppercase;padding-left:.3em;margin:36px 0 0;color:var(--gold-dim)}

form{width:100%;max-width:20rem;display:grid;gap:14px;margin-top:8px;text-align:left}
label{display:grid;gap:6px;font-weight:500;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim)}
input{font:500 1rem var(--f-body);color:var(--gold-soft);background:var(--field);border:1.5px solid var(--line);border-radius:0;padding:12px 14px;width:100%}
form .btn{justify-self:stretch;margin-top:8px;padding-inline:0}
.note{font-size:.8rem;color:var(--gold-dim);min-height:1.3em;text-align:center}
.back{background:none;border:0;color:var(--gold-dim);font:400 .72rem var(--f-body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;justify-self:center;padding:6px}

footer{padding-block:24px 32px;text-align:center}
footer p{max-width:44rem;margin:0 auto;font-weight:400;font-size:.72rem;line-height:1.7;color:var(--gold-dim)}
footer p+p{margin-top:8px}

@media (prefers-reduced-motion:no-preference){
  .center>*{animation:rise .9s ease both}
  .center>*:nth-child(2){animation-delay:.08s}.center>*:nth-child(3){animation-delay:.16s}
  .center>*:nth-child(n+4){animation-delay:.24s}
  @keyframes rise{from{transform:translateY(6px)}to{transform:none}}
}

/* Dynamic layer: top band sweeps in, name settles, logo line draws. */
body{box-shadow:none}
.band{position:fixed;top:0;left:0;right:0;height:calc(10px + env(safe-area-inset-top,0px));background:var(--gold);transform-origin:left;z-index:2}

.page{position:relative;z-index:1}
.btn{background-image:linear-gradient(var(--deep),var(--deep));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .35s ease,border-color .35s}
.btn:hover{background-color:var(--gold);background-size:100% 100%}
.btn .arrow{display:inline-block;width:0;overflow:hidden;vertical-align:bottom;transition:width .3s ease,margin .3s ease;letter-spacing:0}
.btn:hover .arrow{width:1.1em;margin-left:.5em}
@media (prefers-reduced-motion:no-preference){
  .band{animation:sweep .9s cubic-bezier(.7,0,.2,1) both}
  h1{animation:settle 1.4s cubic-bezier(.2,.7,.2,1) both}
  .logo line{stroke-dasharray:60;animation:draw 1s .5s ease-out both}

  @keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes settle{from{letter-spacing:.42em;padding-left:.42em}to{letter-spacing:.2em;padding-left:.2em}}
  @keyframes draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}

}

/* App additions */
[hidden]{display:none!important}
body{margin:0}
.entry{display:grid;justify-items:center}
.step-title{font:500 .78rem/1.4 var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);text-align:center;margin:0 0 6px}
.help{font-size:.85rem;line-height:1.6;color:var(--gold-dim);text-align:center;margin:0}
.qr{background:#FFFFFF;padding:10px;width:180px;max-width:100%;justify-self:center}
.qr img{display:block;width:100%;height:auto}
.secret{font:500 .8rem/1.4 ui-monospace,Menlo,monospace;color:var(--gold-soft);word-break:break-all;text-align:center}
.portal{max-width:40rem;text-align:center;display:grid;gap:18px;justify-items:center}