.account-page{background:#f7f2eb}
.account-page .header-utility .active{position:relative;color:var(--brand);font-weight:700}
.account-page .header-utility .active:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--brand)}
.account-kicker{margin:0;color:#9c815e;font:600 10px/1.4 var(--heading);letter-spacing:.15em;text-transform:uppercase}

.checkout-progress{padding:30px 0 28px;border-top:1px solid #e2d8cd;border-bottom:1px solid #d9cec2;background:#fffdfa}
.progress-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}
.progress-heading p{margin:0;color:#3e3430;font:600 12px var(--heading);letter-spacing:.04em;text-transform:uppercase}
.progress-heading span{color:#84776e;font:500 9px var(--heading);letter-spacing:.08em;text-transform:uppercase}
.checkout-progress ol{margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);list-style:none;border-top:1px solid #d9cec2}
.checkout-progress li{padding:17px 12px 0;position:relative;color:#998e86;font-family:var(--heading)}
.checkout-progress li:before{content:"";position:absolute;width:7px;height:7px;left:12px;top:-4px;border-radius:50%;background:#c9bdb2}
.checkout-progress li.active{color:var(--brand)}
.checkout-progress li.active:before{width:11px;height:11px;top:-6px;background:var(--brand);box-shadow:0 0 0 4px #efe4dc}
.checkout-progress li span{display:block;margin-bottom:4px;font-size:8px;letter-spacing:.11em}
.checkout-progress li b{font-size:10px;font-weight:600}

.account-content{padding:75px 0 108px}
.account-heading{display:grid;grid-template-columns:1fr .9fr;gap:20px 100px;align-items:end}
.account-heading .account-kicker{grid-column:1/-1}
.account-heading h1{margin:0;color:#302825;font:400 59px/.95 var(--display)}
.account-heading h1 em{color:var(--brand);font-style:italic}
.account-heading>p:last-child{max-width:520px;margin:0 0 4px;color:#655a54;font:400 16px/1.75 var(--body)}

.account-layout{margin-top:52px;display:grid;grid-template-columns:1.32fr .68fr;align-items:stretch;gap:22px}
.register-panel{padding:48px 50px 50px;background:#fffdfa;border:1px solid #dfd4c8}
.panel-heading{padding-bottom:29px;display:flex;align-items:end;justify-content:space-between;gap:35px;border-bottom:1px solid #ded3c8}
.panel-heading h2{margin:10px 0 0;color:#342c28;font:400 37px/1 var(--display)}
.panel-heading>span{padding-bottom:4px;color:#8d8179;font:600 7px var(--heading);letter-spacing:.08em;text-transform:uppercase}

.account-mode{margin-top:27px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.account-mode>input{position:absolute;opacity:0;pointer-events:none}
.account-mode>label{min-height:82px;padding:17px 17px 16px 45px;position:relative;border:1px solid #d8cdc2;background:#f7f2eb;color:#766b64;cursor:pointer}
.mode-dot{position:absolute;width:15px;height:15px;left:17px;top:19px;border:1px solid #aa9a8c;border-radius:50%}
.account-mode>label b{display:block;color:#3a312d;font:600 12px var(--heading)}
.account-mode>label small{display:block;margin-top:7px;font:400 11px/1.45 var(--body)}
#account-create:checked+label,#account-guest:checked+label{border-color:var(--brand);background:#f4eae2}
#account-create:checked+label .mode-dot:after,#account-guest:checked+label .mode-dot:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand)}
.register-fields{grid-column:1/-1;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:19px 18px}
.register-fields label,.login-panel form label{display:block}
.register-fields label>span,.login-panel label>span{display:block;margin-bottom:9px;color:#4d423c;font:600 8px var(--heading);letter-spacing:.09em;text-transform:uppercase}
.register-fields input,.login-panel input{width:100%;height:49px;padding:0 14px;border:1px solid #d8cdc1;outline:0;background:#fbf8f3;color:#302925;font:400 14px var(--body)}
.register-fields input:focus,.login-panel input:focus{border-color:var(--brand);box-shadow:0 0 0 2px #5a303614}
.field-wide{grid-column:1/-1}
.account-passwords{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px}
#account-guest:checked~.register-fields .account-passwords{display:none}
.register-action{margin-top:30px;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #ded3c8}
.register-action p{max-width:310px;margin:0;color:#81756e;font:400 10px/1.55 var(--body)}
.account-button,.login-button{min-height:48px;padding:0 19px;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border:0;background:var(--brand);color:#fff;font:600 9px var(--heading);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.account-button span,.login-button span{font-size:14px}

.login-panel{padding:49px 43px 45px;display:flex;flex-direction:column;justify-content:space-between;background:var(--brand);color:#fff}
.login-panel .account-kicker{color:#d7be87}
.login-panel h2{margin:12px 0 20px;color:#fffaf5;font:400 51px/.92 var(--display)}
.login-panel h2 em{color:#dfa9a2;font-style:italic}
.login-panel>div>p:last-child{max-width:330px;margin:0;color:#f1e4d8d4;font:400 14px/1.7 var(--body)}
.login-panel form{margin-top:38px}
.login-panel form label+label{margin-top:17px}
.login-panel label>span{color:#eaded3}
.login-panel input{border-color:#ffffff38;background:#fffaf50c;color:#fff}
.login-panel input:focus{border-color:#d5bc83;box-shadow:0 0 0 2px #d5bc831b}
.forgot-link{display:inline-block;margin-top:13px;padding-bottom:3px;border-bottom:1px solid #ffffff55;color:#eaded3;font:500 9px var(--heading)}
.login-button{width:100%;margin-top:28px;background:var(--accent);color:#fffdf7}

.checkout-reassurance{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #ded3c8;background:#fffdfa}
.checkout-reassurance p{min-height:108px;margin:0;padding:22px 26px;display:grid;grid-template-columns:35px 1fr;align-content:center;column-gap:12px;border-left:1px solid #ded3c8}
.checkout-reassurance p:first-child{border-left:0}
.checkout-reassurance span{grid-row:1/3;color:#aa8b63;font:400 22px/1 var(--display)}
.checkout-reassurance b{color:#3a312d;font:600 11px/1.3 var(--heading)}
.checkout-reassurance small{margin-top:5px;color:#80746d;font:400 10px/1.5 var(--body)}

@media(max-width:1000px){
  .account-heading{gap:20px 60px}
  .account-layout{grid-template-columns:1fr}
  .login-panel{min-height:540px}
}

@media(max-width:760px){
  .checkout-progress{padding:24px 0 22px}
  .checkout-progress ol{grid-template-columns:repeat(5,1fr)}
  .checkout-progress li{min-width:0;padding:15px 0 0;text-align:center}
  .checkout-progress li:before{left:50%;transform:translateX(-50%)}
  .checkout-progress li b{display:none}
  .account-content{padding:58px 0 80px}
  .account-heading{grid-template-columns:1fr;gap:18px}
  .account-heading .account-kicker{grid-column:auto}
  .account-heading h1{font-size:48px}
  .account-heading>p:last-child{font-size:15px}
  .register-panel{padding:35px 30px 36px}
  .panel-heading{align-items:start;flex-direction:column;gap:12px}
  .account-mode{grid-template-columns:1fr}
  .register-fields{grid-template-columns:1fr}
  .field-wide{grid-column:auto}
  .account-passwords{grid-column:auto;grid-template-columns:1fr}
  .register-action{align-items:stretch;flex-direction:column}
  .register-action p{max-width:none}
  .account-button{width:100%}
  .checkout-reassurance{grid-template-columns:1fr}
  .checkout-reassurance p{border-left:0;border-top:1px solid #ded3c8}
  .checkout-reassurance p:first-child{border-top:0}
}

@media(max-width:520px){
  .account-content{padding:50px 0 66px}
  .account-heading h1{font-size:43px}
  .account-layout{margin-top:35px;gap:16px}
  .register-panel{padding:31px 22px 28px}
  .panel-heading h2{font-size:32px}
  .panel-heading>span{font-size:6px}
  .account-mode>label{padding-right:13px}
  .login-panel{min-height:515px;padding:37px 28px 33px}
  .login-panel h2{font-size:47px}
  .checkout-reassurance p{padding:20px 20px}
}