/* Keep the selection flow comfortable on shorter laptop screens. */
body[data-view="gifts"] .wrap{max-width:1328px;padding-top:28px;padding-bottom:36px}
body[data-view="gifts"] .progress{margin-bottom:26px}
.error:empty{display:none}
.size-row{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:24px;align-items:center}
.size-row .tiny{margin:0}
.custom-size-field{margin-top:12px}
.custom-size-field[hidden]{display:none}
.custom-size-field input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #6d7e85;border-radius:4px;background:#151d20;color:#fff;font:inherit}
.custom-size-field input::placeholder{color:#aebec6}

/* The founders' note is its own scene, without the checkout frame. */
body[data-view="letter"] #main{background:radial-gradient(ellipse at 50% 42%,#23445265,transparent 65%)}
body[data-view="letter"] header,body[data-view="letter"] footer{display:none}
.surprise-wrap{--letter-width:clamp(760px,125svh,1080px);max-width:1240px;min-height:100svh;padding:32px;display:grid;align-items:center}
.surprise-wrap .layout{display:block}
.surprise-panel{padding:0;border:0;border-radius:0;background:none;overflow:visible}
.surprise-experience{max-width:1120px;width:100%}
.surprise-intro h2{font-size:36px;line-height:1.2}
.surprise-intro h2 br{display:none}
.surprise-intro .eyebrow{margin-bottom:12px}
.surprise-intro .muted{margin-bottom:0}
.envelope-scene{padding:125px 0 20px}
.envelope-button{width:min(100%,350px)}
.envelope-prompt p{margin-bottom:12px}
.reveal-status{margin-top:8px;min-height:18px}
.surprise-footnote{margin-top:4px}
.surprise-actions{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(100%,var(--letter-width));margin:22px auto 0;padding-top:18px}
.surprise-actions>.secondary{justify-self:start;grid-column:1}
.surprise-actions>.primary{justify-self:end;grid-column:3}
.surprise-actions>.letter-tools{grid-column:2;margin:0}
.is-revealed .surprise-intro,.is-revealed .reveal-status,.is-revealed .surprise-footnote{display:none}
.founders-letter{display:flex;flex-direction:column;max-width:var(--letter-width);margin:0 auto;padding:clamp(32px,4.5svh,48px) clamp(32px,4.8vw,64px)}
.letter-masthead{padding-bottom:24px;margin-bottom:28px;font-size:11px}
.letter-masthead img{width:46px;height:46px}
.letter-masthead .letter-evergreen{width:78px;height:56px}
.founders-letter h2{font-size:clamp(32px,4svh,42px);margin-bottom:24px}
.founders-letter p{font-size:clamp(17px,2svh,20px);line-height:1.8;margin-bottom:20px}
.letter-signature{margin-top:auto;padding:10px 0 24px}
.letter-signature p{font-size:15px;margin-bottom:6px}
.letter-signature strong{font-size:23px}
.letter-signature>span{font-size:12px}
.letter-postscript{padding-top:22px}
.letter-postscript p{font-size:14px;line-height:1.8;margin:0}
.letter-postscript p span{font-size:13px}
@media(min-width:851px){.founders-letter{min-height:min(760px,calc(100svh - 160px))}}

@media(min-width:851px) and (max-height:850px){
  body:not([data-view="landing"]) header{height:80px}
  body[data-view="gifts"] .wrap{min-height:calc(100svh - 145px);padding-top:16px;padding-bottom:16px}
  body[data-view="gifts"] .progress{margin-bottom:16px}
  body[data-view="gifts"] .panel{padding:20px}
  body[data-view="gifts"] .eyebrow{margin-bottom:12px}
  body[data-view="gifts"] h2{font-size:29px;margin-bottom:12px}
  body[data-view="gifts"] .muted{margin-bottom:16px}
  body[data-view="gifts"] .choices{margin:12px 0}
  body[data-view="gifts"] .garment{height:120px}
  body[data-view="gifts"] .card-art{height:110px}
  body[data-view="gifts"] .choice .label{padding:12px}
  body[data-view="gifts"] .actions{margin-top:18px;padding-top:16px}
  body[data-view="gifts"] .review-row{padding:16px 0}
  body[data-view="gifts"] footer{padding-block:16px}
  .surprise-wrap{padding-block:24px}
  .surprise-intro h2{font-size:28px;margin-bottom:12px}
  .envelope-button{width:320px}
  .envelope-scene{padding:112px 0 16px}
  .surprise-actions{margin-top:16px;padding-top:14px}
  .founders-letter{padding:30px 48px}
  .letter-masthead{padding-bottom:16px;margin-bottom:20px}
  .founders-letter h2{font-size:34px;margin-bottom:20px}
  .founders-letter p{margin-bottom:16px;line-height:1.7}
  .letter-signature{padding-bottom:18px}
  .letter-signature p{margin-bottom:4px}
  .letter-postscript{padding-top:12px}
  .letter-postscript p{margin:0}
}
@media(min-width:851px) and (max-height:760px){
  .surprise-wrap{padding-block:16px}
  .founders-letter{padding:24px 40px}
  .letter-masthead{margin-bottom:16px}
  .letter-masthead img{width:40px;height:40px}
  .letter-masthead .letter-evergreen{height:46px}
  .founders-letter h2{margin-bottom:16px}
  .founders-letter p{margin-bottom:14px;line-height:1.65}
  .letter-signature p{margin-bottom:4px}
  .letter-postscript p{margin:0}
}
@media(max-width:570px){
  body[data-view="gifts"] .wrap{padding:22px 18px 28px}
  .size-row{grid-template-columns:1fr;gap:12px}
  .surprise-wrap{padding:16px 18px}
  .surprise-intro h2{font-size:29px}
  .surprise-intro .muted{max-width:310px;margin-inline:auto}
  .envelope-scene{padding:110px 8px 20px}
  .envelope-button{width:min(100%,320px)}
  .surprise-panel .surprise-actions{grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:14px}
  .surprise-actions>.secondary{grid-column:1;grid-row:1}
  .surprise-panel .surprise-actions>.primary{grid-column:2;grid-row:1;gap:10px}
  .surprise-actions>.letter-tools{grid-column:1/-1;grid-row:2}
  .surprise-actions>.primary,.surprise-actions>.secondary{padding:12px 14px;font-size:12px}
  .founders-letter{padding:24px;margin:0}
  .letter-masthead{font-size:7px;padding-bottom:16px;margin-bottom:16px}
  .letter-masthead img{width:30px;height:30px}
  .letter-masthead .letter-evergreen{width:40px;height:32px}
  .founders-letter h2{font-size:26px;margin-bottom:16px}
  .founders-letter p{font-size:13px;line-height:1.8;margin-bottom:16px}
  .letter-signature{padding:4px 0 16px}
  .letter-signature p{margin-bottom:4px}
  .letter-signature strong{font-size:15px}
  .letter-signature>span{font-size:10px}
  .letter-postscript{padding-top:12px}
  .letter-postscript p{font-size:11px;margin:0}
  .letter-postscript p span{font-size:10px}
}