:root{
  --account-gold:#efd486;
  --account-gold-deep:#b98a38;
  --account-gold-soft:#d9b969;
  --account-ivory:#f7ecd8;
  --account-text:#eadfce;
  --account-muted:#cdbfd2;
  --account-ink:#100819;
  --account-panel:rgba(14,7,24,.91);
  --account-panel-soft:rgba(20,11,33,.78);
  --account-line:rgba(239,212,134,.46);
  --account-line-soft:rgba(239,212,134,.18);
  --account-violet:#6d4a93;
  --account-danger:#f0b9c0;
}

.account-page{
  min-height:100vh;
  color:var(--account-text);
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  background:
    linear-gradient(180deg,rgba(7,3,13,.76),rgba(8,4,15,.90) 58%,rgba(5,3,9,.97)),
    url("/assets/home-art-cycle/clear-1672.webp?v=16.42") center 22%/cover fixed no-repeat,
    #07040d;
}

.account-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 50% 2%,rgba(118,73,150,.25),transparent 34%),
    radial-gradient(circle at 50% 72%,rgba(192,141,53,.08),transparent 42%),
    linear-gradient(90deg,rgba(4,2,8,.52),transparent 18%,transparent 82%,rgba(4,2,8,.52));
}

.account-shell{
  position:relative;
  z-index:1;
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:18px 0 54px;
}

.account-page .topbar{
  min-height:68px;
  padding:7px 12px 13px;
  border-bottom:1px solid rgba(239,212,134,.22);
  background:linear-gradient(90deg,transparent,rgba(9,4,17,.42) 22%,rgba(9,4,17,.42) 78%,transparent);
}

.account-page .brand-mini{
  font-family:"Cinzel",Georgia,serif;
  font-size:.92rem;
  letter-spacing:.13em;
  color:#f5e7c9;
}

.account-page .mini-sigil{
  width:43px;
  height:43px;
  border:1px solid rgba(239,212,134,.54);
  color:var(--account-gold);
  background:radial-gradient(circle,rgba(239,212,134,.08),rgba(52,26,73,.16));
  box-shadow:0 0 0 3px rgba(8,4,15,.72),0 0 0 4px rgba(239,212,134,.18),0 0 24px rgba(213,171,81,.10);
}

.account-page .nav{gap:8px}
.account-page .nav a{
  border-radius:3px;
  padding:9px 13px;
  font-family:"Cinzel",Georgia,serif;
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#dfd0bb;
}
.account-page .nav a:hover,
.account-page .nav a:focus-visible,
.account-page .nav .active{
  border-color:rgba(239,212,134,.34);
  background:rgba(25,12,39,.62);
  color:#f5dda0;
}

.account-main{padding:24px 0 58px}

.account-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(30px,4vw,46px) clamp(24px,6vw,76px) clamp(38px,5vw,54px);
  border:1px solid rgba(239,212,134,.58);
  border-radius:10px;
  background:
    linear-gradient(180deg,rgba(22,10,35,.91),rgba(9,5,16,.96)),
    radial-gradient(circle at 50% 0%,rgba(121,76,157,.24),transparent 44%);
  box-shadow:
    0 34px 90px rgba(0,0,0,.52),
    inset 0 0 72px rgba(77,40,101,.17),
    0 0 0 1px rgba(239,212,134,.08);
}

.account-hero::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(239,212,134,.18);
  border-radius:5px;
  background:
    linear-gradient(90deg,var(--account-gold-soft),var(--account-gold-soft)) left top/52px 1px no-repeat,
    linear-gradient(var(--account-gold-soft),var(--account-gold-soft)) left top/1px 52px no-repeat,
    linear-gradient(90deg,var(--account-gold-soft),var(--account-gold-soft)) right top/52px 1px no-repeat,
    linear-gradient(var(--account-gold-soft),var(--account-gold-soft)) right top/1px 52px no-repeat,
    linear-gradient(90deg,var(--account-gold-soft),var(--account-gold-soft)) left bottom/52px 1px no-repeat,
    linear-gradient(var(--account-gold-soft),var(--account-gold-soft)) left bottom/1px 52px no-repeat,
    linear-gradient(90deg,var(--account-gold-soft),var(--account-gold-soft)) right bottom/52px 1px no-repeat,
    linear-gradient(var(--account-gold-soft),var(--account-gold-soft)) right bottom/1px 52px no-repeat;
  opacity:.7;
}

.account-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% -10%,rgba(238,206,119,.10),transparent 30%),
    radial-gradient(circle at 10% 100%,rgba(101,62,132,.13),transparent 34%),
    radial-gradient(circle at 90% 100%,rgba(101,62,132,.13),transparent 34%);
}

.account-crest{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  margin:0 auto 12px;
  border:1px solid rgba(239,212,134,.70);
  border-radius:50%;
  color:#f7df9d;
  font-family:"Cinzel",Georgia,serif;
  font-size:1.12rem;
  letter-spacing:.09em;
  background:radial-gradient(circle,rgba(239,212,134,.11),rgba(78,39,101,.12) 58%,rgba(7,4,12,.58));
  box-shadow:0 0 0 5px rgba(7,4,12,.68),0 0 0 6px rgba(239,212,134,.20),0 0 34px rgba(224,184,92,.14);
}
.account-crest span{transform:translateX(.04em)}

.account-kicker{
  margin:0 0 8px;
  color:var(--account-gold);
  text-align:center;
  font-family:"Cinzel",Georgia,serif;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.account-title{
  margin:0;
  color:#f5dda0;
  text-align:center;
  font-family:"Cinzel",Georgia,serif;
  font-size:clamp(1.35rem,2.75vw,2.28rem);
  font-weight:500;
  line-height:1.08;
  letter-spacing:.045em;
  text-shadow:0 2px 24px rgba(231,192,96,.12);
}

.account-royal-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:min(390px,76%);
  margin:13px auto 11px;
  color:#d6b662;
}
.account-royal-divider::before,
.account-royal-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,rgba(239,212,134,.62));
}
.account-royal-divider::after{transform:scaleX(-1)}
.account-royal-divider span{font-size:.78rem;text-shadow:0 0 12px rgba(239,212,134,.46)}

.account-lede{
  max-width:660px;
  margin:0 auto;
  color:#d7c9d8;
  text-align:center;
  font-size:clamp(1rem,1.55vw,1.14rem);
  line-height:1.68;
}

.account-grid{
  display:grid;
  grid-template-columns:minmax(0,680px);
  justify-content:center;
  gap:20px;
  margin:26px auto 0;
  align-items:start;
}

.account-card--primary{
  width:100%;
}

.account-card--primary [data-account-email-step] > h2,
.account-card--primary [data-account-email-step] > .account-copy,
.account-card--primary [data-account-code-step] > h2,
.account-card--primary [data-account-code-step] > .account-copy{
  text-align:center;
}

.account-signin-explainer{
  max-width:560px;
  margin:12px auto 0;
}

.account-card--benefits{
  width:100%;
}

.account-card{
  position:relative;
  padding:clamp(28px,4vw,42px);
  border:1px solid rgba(239,212,134,.40);
  border-radius:7px;
  background:
    linear-gradient(180deg,rgba(24,12,38,.92),rgba(10,6,17,.94)),
    var(--account-panel);
  box-shadow:0 20px 48px rgba(0,0,0,.29),inset 0 0 34px rgba(105,62,137,.07);
}

.account-card::before{
  content:"";
  position:absolute;
  inset:6px;
  pointer-events:none;
  border:1px solid rgba(239,212,134,.11);
  border-radius:3px;
}

.account-card--primary{
  border-color:rgba(239,212,134,.56);
  background:linear-gradient(180deg,rgba(24,12,38,.96),rgba(9,5,16,.97));
}

.account-card--benefits{
  background:linear-gradient(180deg,rgba(18,9,30,.84),rgba(9,5,16,.91));
}

.account-card h2,
.account-card h3{
  position:relative;
  margin:0;
  color:#f0d58c;
  font-family:"Cinzel",Georgia,serif;
  font-weight:500;
  letter-spacing:.055em;
}
.account-card h2{font-size:clamp(1.42rem,3vw,2rem);line-height:1.25}
.account-card h3{font-size:1rem;text-transform:uppercase;letter-spacing:.12em}

.account-copy{color:#cfc1d1;font-size:1.04rem;line-height:1.67}

.account-form{display:grid;gap:16px;margin-top:26px}
.account-label{
  display:grid;
  gap:9px;
  color:#eadbc0;
  font-family:"Cinzel",Georgia,serif;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.account-input{
  width:100%;
  box-sizing:border-box;
  min-height:54px;
  padding:12px 15px;
  border:1px solid rgba(239,212,134,.34);
  border-radius:3px;
  background:linear-gradient(180deg,rgba(4,2,8,.64),rgba(11,5,18,.78));
  color:#fff2d4;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:1.08rem;
  outline:none;
  box-shadow:inset 0 0 18px rgba(0,0,0,.26);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.account-input:focus{
  border-color:rgba(239,212,134,.82);
  background:rgba(8,4,13,.88);
  box-shadow:0 0 0 2px rgba(239,212,134,.09),inset 0 0 18px rgba(0,0,0,.30),0 0 22px rgba(211,167,74,.08);
}
.account-code{font-variant-numeric:tabular-nums;letter-spacing:.24em;text-align:center;font-size:1.35rem}

.account-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.account-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 21px;
  border:1px solid #e3c36e;
  border-radius:3px;
  background:linear-gradient(180deg,#efd98f,#cba44f);
  color:#1a0e22;
  font-family:"Cinzel",Georgia,serif;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.10em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 8px 20px rgba(0,0,0,.18);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.account-button:hover,
.account-button:focus-visible{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:inset 0 1px rgba(255,255,255,.38),0 10px 24px rgba(0,0,0,.24),0 0 18px rgba(224,183,84,.10);
  outline:none;
}
.account-button:disabled{opacity:.52;cursor:wait;transform:none;filter:none}
.account-button--quiet{
  color:#dfcfdf;
  border-color:rgba(211,178,222,.27);
  background:rgba(32,16,47,.36);
  box-shadow:none;
}
.account-button--danger{
  color:#f1c8cc;
  border-color:rgba(240,185,192,.34);
  background:rgba(104,40,54,.18);
  box-shadow:none;
}

.account-status{
  margin:18px 0 0;
  padding:12px 14px;
  border:1px solid rgba(201,178,228,.20);
  border-radius:3px;
  background:rgba(89,58,108,.10);
  color:#dacddb;
  line-height:1.52;
}
.account-status[data-tone="success"]{border-color:rgba(239,212,134,.30);color:#ead7a2;background:rgba(239,212,134,.07)}
.account-status[data-tone="error"]{border-color:rgba(240,185,192,.30);color:var(--account-danger);background:rgba(121,48,62,.10)}

.account-section-heading{margin-top:30px!important}
.account-actions--spaced{margin-top:30px}
.account-feature-list--spaced{margin-top:25px}
.account-email{margin:9px 0 0;color:#fff0bd;font-size:1.13rem;overflow-wrap:anywhere}
.account-list{margin:14px 0 0;padding-left:20px;color:#cfc3d2;line-height:1.68}

.account-feature-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.account-feature-list li{position:relative;padding:16px 0 17px 18px;border-bottom:1px solid rgba(239,212,134,.13)}
.account-feature-list li::before{content:"✦";position:absolute;left:0;top:17px;color:#cfae58;font-size:.62rem}
.account-feature-list li:last-child{padding-bottom:2px;border-bottom:0}
.account-feature-list strong{display:block;margin-bottom:4px;color:#e9d39a;font-family:"Cinzel",Georgia,serif;font-size:.81rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.account-feature-list span{color:#bfb1c6;line-height:1.58}

.account-turnstile{min-height:0;overflow:hidden}
.account-small{margin:19px 0 0;padding-top:17px;border-top:1px solid rgba(239,212,134,.11);color:#9f93aa;font-size:.88rem;line-height:1.55}
.account-loading{padding:18px 0;color:#d4c6d4;font-style:italic}
.account-unavailable{padding:4px 0;color:#d1c5d4;line-height:1.7}
.account-unavailable strong{color:#ecd38a}
[hidden]{display:none!important}
.trh-account-reader-link{display:inline-flex!important;align-items:center;justify-content:center;text-decoration:none}
.trh-account-reader-short{display:none}

.account-page .site-footer{
  padding-top:30px;
  color:#cdbed2;
  border-top:1px solid rgba(239,212,134,.14);
}
.account-page .site-footer .footer-nav a{color:#d9c8ae}
.account-page .site-footer p{color:#a99bad}

@media(max-width:820px){
  .account-shell{width:min(100% - 20px,1180px);padding-top:9px}
  .account-page .topbar{align-items:flex-start;gap:12px;padding-inline:2px}
  .account-page .nav{justify-content:flex-end}
  .account-main{padding-top:18px}
  .account-grid{grid-template-columns:minmax(0,680px);margin-top:24px}
}

@media(max-width:560px){
  .account-page{background-attachment:scroll}
  .account-shell{width:min(100% - 14px,1180px)}
  .account-page .topbar{display:grid;grid-template-columns:1fr;padding-bottom:12px}
  .account-page .nav{justify-content:flex-start;gap:4px}
  .account-page .nav a{padding:7px 8px;font-size:.68rem}
  .account-main{padding:12px 0 42px}
  .account-hero{padding:27px 15px 28px;border-radius:7px}
  .account-hero::before{inset:6px}
  .account-crest{width:54px;height:54px;margin-bottom:11px;font-size:.98rem}
  .account-kicker{font-size:.69rem;letter-spacing:.23em}
  .account-title{font-size:clamp(1.2rem,5.4vw,1.52rem);letter-spacing:.035em}
  .account-royal-divider{margin:11px auto 10px;width:76%}
  .account-lede{font-size:1.02rem;line-height:1.58}
  .account-grid{gap:16px;margin-top:20px}
  .account-card{padding:25px 18px 23px}
  .account-card h2{font-size:1.38rem}
  .account-actions{align-items:stretch}
  .account-button{flex:1 1 100%;width:100%}
  .trh-account-reader-link{min-width:34px;padding-inline:8px!important}
  .trh-account-reader-label{display:none}
  .trh-account-reader-short{display:inline;font-size:9px}
}
