:root{
  --green:#00a651;
  --ink:#231f20;
  --muted:#696863;
  --cream:#f2efe9;
  --line:#d9d8d1;
  --blue:#0071dc;
  --gold:#e2ad00;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  font-size:16px;
  background:#faf9f6
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
button,input,select{
  font:inherit
}
button,a,input,select{
  -webkit-tap-highlight-color:transparent
}
button,a,select,input[type=radio],input[type=checkbox]{
  touch-action:manipulation
}
button{
  cursor:pointer
}
button:disabled{
  cursor:wait;
  opacity:.55
}
a{
  color:inherit
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:4px
}
[hidden]{
  display:none!important
}
.site-header,main,footer{
  max-width:1160px;
  margin:0 auto
}
.site-header{
  height:100px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  font-size:31px;
  letter-spacing:-1.4px;
  font-weight:800
}
.brand-mark{
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--green);
  width:34px;
  height:34px;
  margin-right:9px;
  border-radius:10px 10px 10px 2px;
  font-weight:800;
  font-size:28px
}
.brand-dot{
  color:var(--green)
}
.header-note,.eyebrow,.product-number{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px
}
.header-note{
  color:var(--muted)
}
.intro{
  padding:51px 0 38px
}
.eyebrow{
  color:var(--green);
  margin:0 0 13px
}
h1{
  font-size:clamp(44px,6.2vw,76px);
  letter-spacing:-4px;
  line-height:1.05;
  margin:0 0 15px;
  font-weight:650
}
h1 em{
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--green)
}
.intro-note{
  font-size:17px;
  color:var(--muted);
  margin:0;
  line-height:1.5
}
.store-layout{
  display:grid;
  grid-template-columns:1.04fr 1fr;
  gap:65px;
  align-items:start
}
.product{
  position:sticky;
  top:30px
}
.product-stage{
  position:relative;
  background:#ebe9e2;
  border-radius:3px;
  padding:26px 23px 18px;
  overflow:hidden;
  isolation:isolate
}
.product-stage:before{
  content:"+";
  position:absolute;
  font-size:380px;
  font-weight:200;
  color:#e1dfd5;
  left:-38px;
  top:65px;
  z-index:-1
}
.product-number{
  position:relative;
  color:#5f6059;
  letter-spacing:1.2px
}
.shirt{
  display:block;
  width:100%;
  height:auto;
  margin:7px auto 8px;
  filter:drop-shadow(2px 13px 7px #231f201a);
  color:#333438
}
.shirt-body{
  fill:currentColor
}
.shirt-shadow{
  fill:#231f2014
}
.shirt-seam{
  fill:none;
  stroke:#ffffff15;
  stroke-width:3
}
.wordmark-print{
  fill:white;
  font-weight:750;
  font-size:41px;
  letter-spacing:-2px
}
.math-print{
  fill:#9cd548;
  font-size:26px;
  font-weight:650;
  letter-spacing:4px
}
.free-stamp{
  position:absolute;
  right:19px;
  top:58px;
  display:grid;
  place-content:center;
  width:76px;
  height:76px;
  background:var(--gold);
  border-radius:50%;
  font-size:12px;
  line-height:1.3;
  text-align:center;
  transform:rotate(11deg);
  letter-spacing:.5px
}
.free-stamp strong{
  font-size:15px
}
.stage-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:#5c5e56;
  font-size:11px
}
.stage-bottom span:last-child{
  font-size:8px;
  letter-spacing:.7px;
  text-align:right
}
.product-description{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:23px
}
h2{
  font-size:21px;
  letter-spacing:-.6px;
  margin:0 0 7px
}
.product-description p{
  font-size:12px;
  margin:0;
  color:var(--muted)
}
.price{
  font-size:26px;
  font-weight:650;
  text-align:right
}
.price span{
  display:block;
  font-size:10px;
  font-weight:400;
  color:var(--muted);
  margin-top:4px
}
.promise{
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  max-width:350px;
  margin:22px 0 0
}
.claim-card{
  background:#fff;
  border:1px solid #e5e3dc;
  border-radius:4px;
  padding:30px 32px 22px;
  box-shadow:0 5px 24px #231f2004
}
.section-heading{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:28px
}
.section-heading h2{
  font-size:25px;
  margin:0 0 6px
}
.section-heading p{
  font-size:12px;
  margin:0;
  color:var(--muted)
}
.step-number{
  font-size:10px;
  letter-spacing:1px;
  color:var(--green);
  font-weight:700;
  line-height:28px
}
.choice-group,fieldset{
  border:0;
  margin:0;
  padding:0;
  min-width:0
}
.choice-group legend{
  font-size:12px;
  font-weight:650;
  width:100%;
  margin-bottom:13px
}
.choice-group legend span{
  font-size:11px;
  font-weight:400;
  float:right;
  color:var(--muted)
}
.swatches{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:23px
}
.swatch{
  position:relative;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:31px;
  height:40px
}
.swatch input,.size-choice input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer
}
.swatch .dot{
  height:26px;
  width:26px;
  border-radius:50%;
  border:1px solid #00000012;
  pointer-events:none
}
.swatch:has(input:checked) .dot{
  outline:1.5px solid var(--ink);
  outline-offset:3px
}
.swatch:has(input:focus-visible){
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px
}
.sizes{
  display:flex;
  gap:7px
}
.size-choice{
  position:relative;
  display:grid;
  place-items:center;
  flex:1;
  height:44px;
  font-size:12px;
  font-weight:600;
  border:1px solid var(--line);
  border-radius:3px;
  cursor:pointer
}
.size-choice input{
  /* Cover the 1px border too: with border-box sizing the 44px box leaves only 42px inside it. */
  inset:-1px;
  width:calc(100% + 2px);
  height:calc(100% + 2px)
}
.size-choice:has(input:checked){
  color:#fff;
  background:var(--ink);
  border-color:var(--ink)
}
.size-choice:has(input:focus-visible){
  outline:3px solid var(--blue);
  outline-offset:3px
}
.size-choice.unavailable:not(:has(input:checked)){
  color:#8b8a86;
  background:#f4f3f0
}
.stock-note{
  font-size:11px;
  color:var(--muted);
  min-height:17px;
  margin:12px 0 25px;
  line-height:1.5
}
.stock-choice{
  margin:14px 0 4px
}
.check-label{
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:12px;
  line-height:1.6;
  min-height:44px
}
.check-label input{
  accent-color:var(--green);
  width:18px;
  height:18px;
  flex-shrink:0;
  margin:1px 0 0
}
.form-divider{
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid #e9e7e0;
  padding-top:20px;
  margin-bottom:18px
}
.form-divider h3{
  font-size:17px;
  letter-spacing:-.3px;
  margin:0
}
.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 13px
}
.wide{
  grid-column:1/-1
}
label{
  display:block;
  font-size:11px;
  font-weight:600
}
.optional{
  color:var(--muted);
  font-weight:400;
  font-size:10px;
  margin-left:4px
}
input:not([type=checkbox]):not([type=radio]),select{
  display:block;
  min-width:0;
  width:100%;
  height:44px;
  margin-top:7px;
  border:1px solid #d8d7d1;
  border-radius:3px;
  background:#fff;
  color:var(--ink);
  padding:10px 12px;
  font-size:14px;
  font-weight:400
}
input[aria-invalid=true],select[aria-invalid=true]{
  border-color:#b33424!important
}
.field-error{
  display:block;
  font-size:10px;
  color:#a92c1c;
  margin-top:4px;
  font-weight:400
}
.field-error:empty{
  display:none
}
.primary{
  border:0;
  background:var(--green);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  min-height:50px;
  padding:13px 18px;
  margin-top:24px;
  border-radius:3px;
  font-size:13px;
  font-weight:600
}
.primary:hover:not(:disabled){
  background:#008d44
}
.primary span:last-child{
  font-size:20px
}
.privacy{
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
  margin:13px 0 0
}
.notice{
  padding:16px;
  border-radius:3px;
  background:#eef4f8;
  font-size:12px;
  line-height:1.6;
  margin:16px 0
}
.notice.error{
  color:#8b2b20;
  background:#fff0ed
}
.notice p{
  margin:0 0 10px
}
.notice p:last-child{
  margin-bottom:0
}
.secondary{
  background:#fff;
  border:1px solid var(--line);
  padding:10px;
  min-height:44px;
  border-radius:3px;
  font-size:12px;
  margin-bottom:10px
}
.honeypot{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}
.demo-banner{
  background:#e9f1fa;
  color:#345775;
  text-align:center;
  font-size:12px;
  padding:9px 20px;
  line-height:1.5
}
.confirmation{
  max-width:580px;
  margin:0 auto 60px;
  text-align:center;
  padding:40px 35px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  line-height:1.6
}
.success-mark{
  display:grid;
  place-items:center;
  background:#e6f5ec;
  color:var(--green);
  font-size:32px;
  width:70px;
  height:70px;
  border-radius:50%;
  margin:0 auto 24px
}
.confirmation h2{
  font-size:42px;
  letter-spacing:-1.7px
}
.confirmation p{
  color:var(--muted);
  font-size:14px
}
.confirmation .eyebrow{
  font-size:10px;
  color:var(--green)
}
.follow-up{
  text-align:left
}
.follow-up h3{
  font-size:24px;
  letter-spacing:-.8px;
  margin:0
}
.follow-up label{
  margin-top:17px
}
.follow-up .check-label{
  margin-top:20px
}
hr{
  border:0;
  border-top:1px solid var(--line);
  margin:30px 0
}
.text-button{
  background:none;
  border:0;
  color:var(--muted);
  font-size:12px;
  text-decoration:underline;
  min-height:44px;
  width:100%;
  margin-top:10px
}
footer{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:65px;
  padding:25px 0 32px;
  font-size:11px;
  color:var(--muted)
}
footer>span:first-child{
  font-size:18px;
  font-weight:750;
  color:var(--ink);
  letter-spacing:-.7px
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
small{
  font-size:10px;
  color:var(--muted);
  line-height:1.7
}
gmp-place-autocomplete{
  width:100%;
  margin-top:7px
}
.shirt[data-color=tri-black]{
  color:#333438
}
.shirt[data-color=athletic-blue]{
  color:#456d8e
}
.shirt[data-color=athletic-grey]{
  color:#929492
}
.shirt[data-color=tri-dusk]{
  color:#685965
}
.shirt[data-color=tri-indigo]{
  color:#444e70
}
.shirt[data-color=tri-olive]{
  color:#727658
}
.shirt[data-color=tri-rust]{
  color:#a05d48
}
.shirt[data-color=tri-storm]{
  color:#596970
}
.shirt[data-color=tri-coral]{
  color:#ce8277
}
.shirt[data-color=tri-cream]{
  color:#e6dfcd
}
.swatch:has([value=tri-black]) .dot{
  background:#333438
}
.swatch:has([value=athletic-blue]) .dot{
  background:#456d8e
}
.swatch:has([value=athletic-grey]) .dot{
  background:#929492
}
.swatch:has([value=tri-dusk]) .dot{
  background:#685965
}
.swatch:has([value=tri-indigo]) .dot{
  background:#444e70
}
.swatch:has([value=tri-olive]) .dot{
  background:#727658
}
.swatch:has([value=tri-rust]) .dot{
  background:#a05d48
}
.swatch:has([value=tri-storm]) .dot{
  background:#596970
}
.swatch:has([value=tri-coral]) .dot{
  background:#ce8277
}
.swatch:has([value=tri-cream]) .dot{
  background:#e6dfcd
}
@media(max-width:1240px){
  .site-header,main,footer{
    margin-left:36px;
    margin-right:36px
  }
  .store-layout{
    gap:35px
  }
  .claim-card{
    padding:26px
  }
  .swatches{
    gap:5px
  }
  .swatch{
    width:29px
  }
}
@media(max-width:760px){
  .site-header,main,footer{
    margin-left:20px;
    margin-right:20px
  }
  .site-header{
    height:78px
  }
  .brand{
    font-size:27px
  }
  .brand-mark{
    height:30px;
    width:30px;
    font-size:24px
  }
  .header-note{
    font-size:8px;
    letter-spacing:1px;
    max-width:95px;
    text-align:right;
    line-height:1.6
  }
  .intro{
    padding:32px 0 26px
  }
  h1{
    font-size:54px;
    letter-spacing:-2.7px
  }
  .intro-note{
    font-size:14px
  }
  .eyebrow{
    font-size:9px
  }
  .store-layout{
    display:block
  }
  .product{
    position:static;
    margin-bottom:28px
  }
  .product-stage{
    padding:19px 17px 15px
  }
  .shirt{
    max-width:330px;
    margin-top:0;
    margin-bottom:0
  }
  .product-stage:before{
    top:-22px
  }
  .product-number{
    font-size:9px
  }
  .free-stamp{
    width:62px;
    height:62px;
    top:42px;
    right:17px;
    font-size:10px
  }
  .free-stamp strong{
    font-size:13px
  }
  .product-description{
    margin-top:17px
  }
  .product-description h2{
    font-size:19px
  }
  .product-description p{
    font-size:11px
  }
  .promise{
    max-width:none;
    margin-top:14px;
    font-size:11px
  }
  .claim-card{
    padding:24px 22px
  }
  .swatches{
    gap:5px;
    justify-content:space-between
  }
  .swatch{
    width:26px
  }
  .swatch .dot{
    height:22px;
    width:22px
  }
  .section-heading{
    margin-bottom:22px
  }
  .stage-bottom span:last-child{
    font-size:7px
  }
  .confirmation{
    padding:30px 24px
  }
  .confirmation h2{
    font-size:36px
  }
  footer{
    margin-top:38px;
    gap:20px;
    align-items:center
  }
  footer>span:last-child{
    text-align:right;
    max-width:160px;
    line-height:1.6
  }
}
@media(prefers-reduced-motion:no-preference){
  .shirt-body{
    transition:fill .18s ease
  }
  button{
    transition:background .15s ease
  }
}
/* Forty-four-pixel targets, balanced swatch rows, and readable iOS inputs. */
.swatches{
  display:grid;
  grid-template-columns:repeat(5,minmax(44px,1fr));
  gap:4px 5px
}
.swatch{
  width:100%;
  height:44px
}
.swatch .dot{
  height:26px;
  width:26px
}
.sizes{
  gap:5px
}
.size-choice{
  min-width:44px
}
input:not([type=checkbox]):not([type=radio]),select{
  font-size:16px
}
.primary{
  background:#00883f
}
.primary:hover:not(:disabled){
  background:#007637
}
.eyebrow,.step-number{
  color:#007b3b
}
@media(max-width:380px){
  .claim-card{
    padding-left:18px;
    padding-right:18px
  }
}
/* Picking a shirt: numbered steps, named swatches, and a running "your shirt" line. */
.pick-step{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-right:6px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:10px
}
.swatch{
  flex-direction:column;
  height:auto;
  min-height:62px;
  gap:5px
}
.swatch .dot{
  flex:none
}
.swatch-name{
  font-size:10px;
  line-height:1.2;
  text-align:center;
  color:var(--muted);
  pointer-events:none
}
.swatch:has(input:checked) .dot{
  outline:2px solid var(--ink);
  outline-offset:3px
}
.swatch:has(input:checked) .swatch-name{
  color:var(--ink);
  font-weight:700
}
.size-choice:has(input:checked){
  box-shadow:0 0 0 2px var(--ink)
}
.choice-group .field-error{
  display:block;
  margin:-12px 0 14px
}
.sizes-group .field-error{
  margin:8px 0 0
}
.choice-group.invalid .sizes .size-choice,.choice-group.invalid .swatches{
  border-color:#c5221f
}
.choice-group.invalid legend{
  color:#c5221f
}
.your-shirt{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0 12px;
  padding:12px 14px;
  border:1px dashed var(--line);
  border-radius:4px;
  font-size:14px
}
.your-shirt small{
  display:block;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted)
}
.your-shirt.complete{
  border-style:solid;
  border-color:var(--ink);
  background:#fff
}
.your-shirt-dot{
  flex:none;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #00000020
}
.confirmation-shirt{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:4px auto 16px;
  text-align:left
}
.confirmation-shirt .mini-shirt{
  flex:0 0 96px;
  width:96px;
  height:auto;
  margin:0
}
.confirmation-shirt p{
  margin:0;
  color:var(--ink)
}
.confirmation-shirt small{
  display:block;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted)
}
.confirmation-shirt strong{
  font-size:18px
}
/* A color with nothing left in the chosen size is crossed out; the switch to "any color" or the waitlist is flagged. */
.swatch.sold-out .dot{
  position:relative;
  opacity:.45
}
.swatch.sold-out .dot::after{
  content:'';
  position:absolute;
  left:50%;
  top:-3px;
  bottom:-3px;
  width:2px;
  margin-left:-1px;
  background:var(--ink);
  transform:rotate(45deg)
}
.swatch.sold-out .swatch-name{
  text-decoration:line-through
}
.stock-note.warn{
  color:#7a4f01;
  background:#feefc3;
  padding:8px 10px;
  border-radius:3px;
  font-weight:600
}
/* Closed store: say so up front and make every locked control look locked. */
.store-closed{
  color:#7a4f01;
  background:#feefc3;
  padding:12px 14px;
  border-radius:3px;
  font-weight:600
}
#claim-fields:disabled input,#claim-fields:disabled select,#claim-fields:disabled .swatch,#claim-fields:disabled .size-choice{
  cursor:not-allowed;
  opacity:.5
}
form:has(#claim-fields:disabled) button:disabled{
  cursor:not-allowed
}