/* V21 — modern white account + checkout flow */
:root{--flow-black:#0b0b0b;--flow-gray:#6f6f6a;--flow-line:#e7e7e7;--flow-soft:#f7f7f7;--flow-success:#eef7ef}
.flowpage{background:#fff!important}
.tabpage.active{animation:flowIn .22s ease-out}
@keyframes flowIn{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tabpage.active{animation:none}}

/* Account / signup: pure white, not ivory or cream */
.modern-account-page,.modern-account-shell,#accountPanel .account-box,#accountPanel .dashboard-card{background:#fff!important}
.modern-account-shell{max-width:720px!important;padding-top:58px!important}
#accountPanel .flow-title{font-size:clamp(38px,5vw,54px)!important;letter-spacing:-.05em!important;margin-bottom:10px}
.flow-lede{margin:0 0 26px;max-width:590px;color:#74746f;font-size:14px;line-height:1.65}
#accountPanel .account-tabs{display:inline-flex;padding:4px;border:1px solid #e5e5e5;border-radius:999px;background:#f7f7f7!important;gap:3px;margin:0 0 28px}
#accountPanel .account-tabs .btn{border:0!important;border-radius:999px!important;background:transparent!important;padding:9px 15px!important;box-shadow:none!important;color:#666!important}
#accountPanel .account-tabs .btn.active{background:#fff!important;color:#111!important;box-shadow:0 1px 3px rgba(0,0,0,.08)!important}
#accountPanel .account-box{padding:0!important;border:0!important;border-radius:0!important;margin:0 0 16px!important}
#accountPanel .search,#accountPanel .field,#accountPanel .formrow input{min-height:52px;border:1px solid #dedede!important;border-radius:10px!important;background:#fff!important;padding:14px 15px!important;font-size:14px;transition:border-color .18s,box-shadow .18s}
#accountPanel .search:focus,#accountPanel .field:focus,#accountPanel .formrow input:focus{border-color:#111!important;box-shadow:0 0 0 3px rgba(0,0,0,.05);outline:none}
#accountPanel .formrow{gap:10px;margin-top:10px}
#accountPanel .flow-primary{min-height:52px;border-radius:10px!important;margin-top:13px;font-size:14px}
#googleLoginBtn{min-height:50px;border-radius:10px!important;background:#fff!important;border:1px solid #d9d9d9!important}
#signinView>.notice,#applyView>.notice{margin-top:14px;color:#7a7a76}
#accountPanel .dashboard-card{border:1px solid #e5e5e5!important;border-radius:12px!important;padding:20px!important;box-shadow:none!important}
#accountPanel .referral-link,#accountPanel .referral-code-pill{background:#f5f5f5!important}

/* Checkout: calm, progressive, and uncluttered */
.modern-checkout-shell{max-width:760px!important;padding-top:52px!important}
.modern-checkout-shell .flow-title{font-size:clamp(38px,5vw,54px)!important;letter-spacing:-.05em!important;margin:5px 0 20px}
.confirmation-callout{display:flex;flex-direction:column;gap:5px;padding:16px 18px;margin:0 0 30px;border:1px solid #dfe8df;border-radius:12px;background:#f8fbf8;color:#343a34}
.confirmation-callout strong{font-size:13px}.confirmation-callout span{font-size:12px;line-height:1.55;color:#687068}
.checkout-block{padding:0 0 28px;margin:0 0 28px;border-bottom:1px solid #ededed}.checkout-block.compact{padding-bottom:22px;margin-bottom:22px}
.checkout-block-title{font-size:12px;font-weight:650;letter-spacing:-.01em;margin-bottom:12px;color:#1a1a1a}
.labeled-row label,.field-label{display:flex;flex-direction:column;gap:7px}.labeled-row label>span,.field-label>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#777}
.modern-checkout-shell input,.modern-checkout-shell select,.modern-checkout-shell textarea{border:1px solid #dedede!important;background:#fff!important;border-radius:10px!important;min-height:50px;padding:13px 14px!important;font-size:14px!important;transition:border-color .18s,box-shadow .18s}
.modern-checkout-shell textarea{min-height:100px!important;resize:vertical}
.modern-checkout-shell input:focus,.modern-checkout-shell select:focus,.modern-checkout-shell textarea:focus{outline:none;border-color:#111!important;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.checkout-submit-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding-top:4px}.checkout-submit-row>div{display:flex;flex-direction:column;gap:4px}.checkout-submit-row span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#777}.checkout-submit-row strong{font-size:28px;letter-spacing:-.04em}.checkout-submit-row .flow-primary{margin:0!important;min-width:210px;min-height:52px;border-radius:10px!important}
.checkout-fineprint{margin:13px 0 0;font-size:10px;line-height:1.55;color:#888;max-width:620px}

/* Invoice / confirmation: white, clean, and clearly pending final confirmation */
.invoice-page{background:#fff!important}.invoice-doc{border:1px solid #e7e7e7!important;border-radius:14px!important;box-shadow:none!important;background:#fff!important}
.invoice-meta-grid{background:#e8e8e8!important;border-color:#e8e8e8!important}.invoice-meta-grid>div,.invoice-note{background:#f8f8f8!important}.invoice-disclaimer{font-size:12px!important;color:#62625f!important;background:#f8fbf8;border:1px solid #dfe8df!important;border-radius:10px;padding:16px 18px!important;margin-top:26px!important}

/* Keep flow surfaces neutral — no cream/beige cards */
#cartPanel .account-box,#profileModal .account-box,#quickModal .account-box{background:#f8f8f8!important}
.modern-account-page .notice,.modern-checkout-page .notice{background:transparent!important}

@media(max-width:650px){
  .modern-account-shell,.modern-checkout-shell{width:calc(100% - 28px)!important;padding-top:36px!important}
  #accountPanel .formrow,.modern-checkout-shell .formrow{grid-template-columns:1fr!important}
  .checkout-submit-row{grid-template-columns:1fr;gap:14px}.checkout-submit-row .flow-primary{width:100%;min-width:0}.checkout-submit-row strong{font-size:25px}
  .confirmation-callout{padding:14px}
}


/* V28 approved homepage visual: real image tiles, no background-image placeholders */
.approved-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .9fr;
  grid-template-rows:1fr auto 1fr;
  gap:18px;
  padding:42px;
  background:#f4f4f2 !important;
  min-height:560px;
  overflow:hidden;
}
.approved-hero-img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:20px;background:#e9e9e6;
}
.approved-hero-a{grid-column:1;grid-row:1 / span 2;min-height:235px;}
.approved-hero-b{grid-column:2;grid-row:1 / span 2;min-height:235px;}
.approved-hero-grid .muse-chip{
  grid-column:2;grid-row:2;justify-self:center;align-self:center;position:relative;z-index:2;
}
.approved-hero-c{grid-column:1 / span 2;grid-row:3;justify-self:center;width:62%;min-height:220px;}
@media(max-width:900px){
  .approved-hero-grid{padding:20px;min-height:auto;grid-template-columns:1fr 1fr;grid-template-rows:220px auto 250px;}
  .approved-hero-a,.approved-hero-b{min-height:220px;}
  .approved-hero-c{width:72%;min-height:250px;}
}
@media(max-width:620px){
  .approved-hero-grid{grid-template-columns:1fr;grid-template-rows:260px 260px auto 280px;}
  .approved-hero-a{grid-column:1;grid-row:1}.approved-hero-b{grid-column:1;grid-row:2}
  .approved-hero-grid .muse-chip{grid-column:1;grid-row:3}
  .approved-hero-c{grid-column:1;grid-row:4;width:100%;min-height:280px;}
}