:root{
  --black:#000;
  --white:#fff;
  --stroke:1px;
  --gap:12px;
  --ghost:54px;
  --tile-pad:8px;
  --dash:2px;
  --anim:250ms;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:'Inter', ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --row-h:48px;
  --brand-size:calc(var(--row-h) * 0.42);
}

html,
body{
  min-height:100%;
  margin:0;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
}

*{box-sizing:border-box;
}

body{
  background:var(--white);
  color:var(--black);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  overflow-y:auto;
}

header#gameHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--row-h);
  padding:0 12px;
  border-bottom:var(--stroke) solid currentColor;
  position:sticky;
  top:0;
  background:inherit;
  z-index:5;
  color:inherit;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:.02em;
  font-size:var(--brand-size);
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
  color:inherit;
  text-decoration:none;
  transition:color 0.2s ease;
}

.brand-logo{
  height:1em;
  inline-size:auto;
  display:block;
}

.brand span{
  display:block;
  white-space:nowrap;
  align-self:flex-start;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.icons{
  display:flex;
  gap:10px;
  flex:0 0 auto;
  align-items:center;
  font-size:var(--brand-size);
  color:var(--black);
}

.iconbtn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center; align-items:center;
  cursor:pointer;
  line-height:1;
  font-size:inherit;
  color:inherit;
  text-decoration:none;
  transition:color 0.2s ease;
}

.iconbtn:focus{
  outline:2px dashed currentColor;
  outline-offset:2px;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
  align-self:flex-start;
}

.iconbtn .material-symbols-outlined{
  font-size:1em;
  line-height:1;
  display:block;
  transform:translateY(-0.06em);
  color:inherit;
}

.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  text-transform:none;
  letter-spacing:normal;
  word-wrap:normal;
  white-space:nowrap;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
}

body.inverted .icons{
  color:#fff;
}

body.inverted header#gameHeader{
  background:#000;
  border-bottom:0;
}

.scorebar{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-bottom:0; padding:0 12px; font-variant-numeric:tabular-nums; align-items:center; min-height:var(--row-h); font-size:14px; transition:opacity var(--anim) var(--ease); }
.scorebar.is-hidden{ opacity:0; pointer-events:none; visibility:hidden; height:0; min-height:0; margin:0; overflow:hidden; display:none; }

.scorebar__logo{
  display:none;
}
.scorebar__logo a{
  display:inline-flex;
  transition:color 0.2s ease;
  justify-content:center;
}
.scorebar__logo img{
  height:28px;
  width:auto;
  display:block;
}
.scorebar__item{
  display:flex;
  align-items:center;
  gap:clamp(6px,3vw,10px);
  min-width:0;
  white-space:nowrap;
  justify-content:center;
  text-align:center;
}

.scorebar__item--cups{
  justify-content:flex-start;
  text-align:left;
}

.scorebar__item--cash,
.scorebar__item--fails{
  justify-content:center;
  text-align:center;
}

.scorebar__item--time{
  justify-content:flex-end;
  text-align:right;
}

.scorebar b{
  font-weight:800;
}
.scorebar #time{
  position:relative;
  display:inline-flex;
  transition:color 0.2s ease;
  justify-content:center;
  padding:4px 12px;
  
  border:var(--stroke, 1px) solid #000;
  background:#fff;
  color:#fff;
  letter-spacing:0.05em;
  min-width:68px;
  isolation:isolate;
  overflow:hidden;
}
.scorebar #time span{
  position:relative;
  z-index:1;
  color:#fff;
  mix-blend-mode:difference;
}
.scorebar #time::before{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  border-radius:inherit;
  transform-origin:left center;
  transform:scaleX(var(--time-progress,1));
  transition:transform 0.25s ease-out;
}

main#gameMain{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-rows:1fr 1fr auto;
  position:relative;
  padding:0;
  margin:0;
  gap:0;
    grid-template-areas:
    "machines"
    "clients"
    "footer";
}

.panel:first-of-type{
  grid-area:machines;
}

.panel:nth-of-type(2){
  grid-area:clients;
}

main#gameMain > footer{
  grid-area:footer;
}

.panel{
  border:none;
  border-radius:0;
  padding:0;
  position:relative;
  overflow:visible;
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:0;
}

.help-overlay{
  position:absolute;
  left:0;
  right:0;
  top:var(--row-h);
  bottom:0;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  padding:clamp(24px,6vw,56px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--anim) var(--ease);
  z-index:4;
}

.help-overlay.is-visible{
  opacity:0.96;
  pointer-events:auto;
}

.help-overlay__content{
  display:grid;
  gap:12px;
  max-width:min(420px, 90%);
  margin:0;
  text-align:left;
  justify-items:start;
}

.help-overlay__lead{
  margin:0;
  font-size:clamp(26px,6vw,44px);
  font-weight:800;
  font-style:italic;
  letter-spacing:0.015em;
  line-height:1.05;
}

.help-overlay__accent{
  font-weight:inherit;
  font-style:inherit;
}

.help-overlay__text{
  margin:0;
  font-size:clamp(14px,3vw,20px);
  font-weight:300;
  line-height:1.4;
}

.info-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:var(--row-h);
  background:#000;
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,6vw,56px);
  z-index:70;
}

.info-overlay.is-visible{
  display:flex;
}

.info-overlay__content{
  display:grid;
  grid-template-columns:repeat(2, minmax(160px, 1fr));
  gap:clamp(20px,5vw,48px);
  width:100%;
  max-width:min(1200px, 94%);
  margin:0 auto;
}

.info-overlay__col{
  display:grid;
  gap:12px;
}

.info-overlay__col--headline{
  align-content:start;
}

.info-overlay__col--headline h2{
  margin:0;
  font-size:clamp(36px,8vw,72px);
  font-weight:800;
  font-style:italic;
  letter-spacing:0.015em;
  line-height:1.05;
}

.info-overlay__col--copy{
  align-content:end;
}

.info-overlay__col--copy p{
  margin:0;
  font-size:clamp(15px,3.4vw,20px);
  line-height:1.5;
  font-weight:300;
}
.info-overlay__col--copy strong{
  font-weight:800;
  font-size:clamp(17px,4vw,22px);
  letter-spacing:.01em;
}
.info-overlay__col--copy a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:0.08em;
  text-underline-offset:0.2em;
  font-weight:500;
}
.info-overlay__actions{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:clamp(10px,3vw,16px);
  margin-top:clamp(16px,4vw,24px);
}
.info-overlay__actions .info-overlay__cta{
  flex:1 1 0;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  margin-top:0;
}

.info-overlay__cta{
  justify-self:start;
  font-weight:600;
}

@media(max-width:720px) and (orientation:portrait){
  .info-overlay__content{
    grid-template-columns:1fr;
    gap:clamp(18px,6vw,28px);
  }
  .info-overlay__col--copy{
    align-content:flex-start;
  }
  .info-overlay__cta{
    justify-self:stretch;
  }
}

.panel h2{
  margin:0;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:0 12px;
  border-bottom:var(--stroke) solid currentColor;
  min-height:var(--row-h);
  display:flex;
  align-items:center;
  gap:8px;
}

.panel:first-of-type h2{
  border-top:var(--stroke) solid currentColor;
}

.panel h2 .material-symbols-outlined{
  font-size:1.2em;
  line-height:1;
  transform:translateY(1px);
}

.panel h2 .help-ico{
  margin-left:auto;
  padding:4px;
  display:inline-flex;
  transition:color 0.2s ease;
  justify-content:center;
  background:transparent;
  border:0;
  color:inherit;
  font-size:inherit;
  cursor:pointer;
}

.panel h2 .help-ico .material-symbols-outlined{
  font-size:1.15em;
}

#machinesList,
#clients{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:1fr;
  gap:var(--stroke);
  padding:0;
  background:#000;
  border:var(--stroke) solid currentColor;
  border-top:0;
  border-left:0;
  border-right:0;
  height:100%;
  min-height:0;
  position:relative;
}

#machinesList .tile,
#clients .tile{
  height:100%;
  border:none;
}

#clients{
  border-bottom:0;
}

@media(min-width:992px){
  #machinesList,
  #clients{
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }
}

@media (max-width:900px) and (max-height:540px) and (orientation:landscape){
  header#gameHeader,
  .panel h2,
  main#gameMain > footer{
    display:none !important;
  }

  main#gameMain{
    min-height:0;
    height:100%;
    grid-template-rows:repeat(2,minmax(0,1fr));
    overflow:hidden;
    gap:var(--stroke);
  }

  .panel{
    grid-template-rows:1fr;
    border:0;
    padding:0;
  }

  .panel:first-of-type{
    border-top:var(--stroke) solid currentColor;
  }

  .panel + .panel{
    border-top:var(--stroke) solid currentColor;
  }

  .panel:last-of-type{
    border-bottom:var(--stroke) solid currentColor;
  }

  .scorebar{
    font-size:13px;
    padding:0 8px;
    grid-template-columns:auto repeat(4,1fr);
    gap:12px;
  }

  .scorebar__logo{
    display:flex;
  }

  .scorebar__logo img{
    height:24px;
  }

  .scorebar__item--cups,
  .scorebar__item--cash,
  .scorebar__item--fails{
    justify-content:center;
    text-align:center;
  }

  .scorebar__item--time{
    justify-content:flex-end;
    text-align:right;
  }

  .tile{
    padding:calc(var(--tile-pad) * 0.8);
  }

  .panel .tile{
    grid-template-rows:auto 1fr auto;
    gap:clamp(4px,2vw,10px);
  }

  .panel .tile .label{
    grid-row:1;
    font-size:clamp(20px, 8vw, 34px);
  }

  .panel .tile .hint{
    grid-row:3;
    justify-self:flex-end;
    text-align:right;
  }

}

@media (max-width:900px) and (max-height:540px) and (orientation:landscape){
  .help-overlay{
    top:0;
    padding:clamp(18px,6vw,40px);
    align-items:center;
  }
}

.tile{
  position:relative;
  border:none;
  border-radius:0;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-content:start;
  justify-items:start;
  gap:clamp(6px,2vw,14px);
  padding:var(--tile-pad);
  margin:0;
  background-clip:padding-box;
  container-type:size;
  user-select:none;
  -webkit-user-select:none;
  font-family:inherit;
}

.tile .label{
  grid-row:1;
  font-weight:300;
  font-variation-settings:"wght" 300;
  line-height:1.05;
  letter-spacing:.01em;
  z-index:3;
  color:#fff;
  mix-blend-mode:difference;
  text-align:left;
  width:100%;
  white-space:normal;
  word-break:break-word;
  hyphens:auto;
  font-size:clamp(22px,12cqw,50px);
  display:block;
}
.tile .label .line{
  display:block;
}

@media(min-width:992px){
  .tile .label{
    font-size:clamp(34px,6cqw,90px);
  }
}

.tile .hint{
  grid-row:3;
  font-size:0.75rem;
  opacity:.9;
  z-index:3;
  color:#fff;
  mix-blend-mode:difference;
  align-self:end;
  justify-self:start;
  text-align:left;
  white-space:nowrap;
}

.tile.machine::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  z-index:0;
}

.tile.machine .fillY{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:100%;
  background:#000;
  z-index:1;
  transform-origin:bottom center;
  transform:scaleY(0);
}

.tile.machine.ready{
  cursor:grab;
  touch-action:none;
}

.tile.machine,
.tile.client{
  -webkit-user-drag:none;
  touch-action:none;
}

.tile.machine.is-idle{
  cursor:pointer;
}

.tile.machine.is-preparing{
  cursor:wait;
}

.tile.client::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  z-index:0;
}

.tile.client .lifeX{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background:#000;
  transform-origin:left center;
  transform:scaleX(1);
  z-index:1;
}

.diag{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.35;
  pointer-events:none;
  display:block;
}

.diag line{
  stroke:currentColor;
  stroke-width:var(--stroke);
  vector-effect:non-scaling-stroke;
  shape-rendering:crispEdges;
}

footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:var(--stroke) solid currentColor;
  padding:0 12px;
  font-size:12px;
  min-height:var(--row-h);
  height:auto;
}

footer .left{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

footer .left a{
  color:inherit;
  text-decoration:none;
  margin:0;
}

footer .left a + a::before{
  content:"|";
  margin:0 8px;
  color:currentColor;
}


.dragging-tile{
  position:fixed;
  z-index:10000;
  pointer-events:none;
  left:0;
  top:0;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.dragging-tile,
.dragging-tile *{
  cursor:grabbing !important;
}

.drag-origin{
  opacity:.15;
}

.tile.client.hot{
  outline:var(--dash) dashed #000;
  outline-offset:3px;
}

.tile.client.entering{
  animation:clientIn .28s var(--ease) forwards;
}

.tile.client.leaving{
  animation:clientOut .22s var(--ease) forwards;
}

@keyframes clientIn{
  from{
    opacity:.0;
    transform:translateY(6px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes clientOut{
  to{
    opacity:0;
    transform:translateY(6px);
  }
}

.tile.client.ok{
  animation:okPop .55s var(--ease);
}

.tile.client.ok::after{
  content:"";
  position:absolute;
  inset:-1px;
  border:calc(var(--stroke) * 2) solid currentColor;
  background:rgba(0,0,0,.12);
  opacity:.95;
  animation:okRipple .8s cubic-bezier(.2,.7,.2,1) forwards;
  pointer-events:none;
  box-shadow:0 0 0 6px rgba(0,0,0,.06) inset;
}

@keyframes okPop{
  0%{
    transform:scale(1);
  }

  35%{
    transform:scale(1.08);
  }

  70%{
    transform:scale(1.02);
  }

  100%{
    transform:scale(1);
  }
}

@keyframes okRipple{
  0%{
    transform:scale(1);
    opacity:.95;
  }

  100%{
    transform:scale(1.16);
    opacity:0;
  }
}

.tile.client.error{
  animation:shake .34s cubic-bezier(.36,.07,.19,.97);
}

@keyframes shake{
  10%,90%{
    transform:translateX(-2px);
  }

  20%,80%{
    transform:translateX(3px);
  }

  30%,50%,70%{
    transform:translateX(-4px);
  }

  40%,60%{
    transform:translateX(4px);
  }

  100%{
    transform:translateX(0);
  }
}

@media(max-width:900px){
  :root{
    --row-h:44px;
    --brand-size:calc(var(--row-h) * 0.46);
  }
}

@media(min-width:1200px){
  :root{
    --row-h:60px;
    --brand-size:calc(var(--row-h) * 0.4);
  }
}

@media(max-width:400px){
  :root{
    --brand-size:calc(var(--row-h) * 0.38);
  }
}

@media(max-width:340px){
  :root{
    --brand-size:calc(var(--row-h) * 0.34);
  }
}

body.inverted{
  background:#000;
  color:#fff;
}

body.inverted .scorebar{
  border-top:var(--stroke) solid currentColor;
  border-bottom:var(--stroke) solid currentColor;
}

body.inverted .brand-logo{
  filter:invert(1);
}
body.inverted .scorebar #time{
  border-color:#fff;
}
body.inverted footer{
  background:#000;
  color:#fff;
  border-top:var(--stroke) solid currentColor;
}
body.inverted footer .left a{
  color:inherit;
}

#endOverlay{
  position:absolute;
  inset:0;
  display:none;
  z-index:20;
  pointer-events:none;
}

#endOverlay .wrap{
  --endcard-pad:clamp(12px,4vw,32px);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:var(--row-h);
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--endcard-pad);
  pointer-events:auto;
  box-sizing:border-box;
  overflow:hidden;
}

@media(max-height:768px){
  #endOverlay .wrap{
    overflow-y:auto;
    overflow-x:hidden;
  }
}

.endsheet{
  width:100%;
  display:flex;
  justify-content:center;
}

.endcard{
  --endcard-gap:clamp(16px,4vw,24px);
  --endcard-card-pad:clamp(16px,3.5vw,22px);
  --endcard-control-font-size:clamp(0.62rem,1.7vw,0.78rem);
  --endcard-control-pad-y:clamp(10px,2.1vw,12px);
  --endcard-control-pad-x:clamp(12px,3.2vw,18px);
  --endcard-control-min-height:clamp(38px,5vw,46px);
  --endcard-feature-height:clamp(88px, 18vw, 150px);
  width:min(720px, 100%);
  max-height:calc(100vh - var(--endcard-pad) * 2);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--endcard-gap);
  padding:clamp(14px,4vw,24px);
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

@media(max-height:768px){
  .endcard{
    max-height:calc(100vh - var(--endcard-pad) * 2);
  }
}

.endcard__card{
  border:1px solid currentColor;
  padding:var(--endcard-card-pad);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,3vw,16px);
  min-height:0;
}


.endcard__card--result{
  background:#000;
  color:#fff;
  border-color:#fff;
}
.endcard__card--result::before,
.endcard__card--result::after{
  border-color:rgba(255,255,255,0.55);
  opacity:0.55;
}
.endcard__card--coupon{
  background:#fff;
  color:#000;
  border-color:#111;
}
.endcard__card--coupon::before,
.endcard__card--coupon::after{
  border-color:rgba(0,0,0,0.35);
  opacity:0.5;
}

.endcard__card-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.endcard__eyebrow{
  margin:0;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
}

.endcard__headline{
  margin:0;
  font-size:clamp(26px,7vw,34px);
  font-weight:800;
  font-style:italic;
  line-height:1.05;
}

.endcard__metrics{
  position:relative;
  min-height:var(--endcard-feature-height);
  max-height:var(--endcard-feature-height);
  background:rgba(0,0,0,0.85);
  padding:clamp(8px,2.2vw,12px);
  overflow:hidden;
  margin-bottom:clamp(12px,3vw,18px);
}

.endcard__metric{
  position:absolute;
  inset:clamp(10px,2.4vw,16px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(12px,3vw,18px);
  min-width:0;
  opacity:0;
  transform:translateY(20px);
  animation:metricTicker 8s ease-in-out infinite;
}

.endcard__metric:nth-child(1){ animation-delay:0s; }
.endcard__metric:nth-child(2){ animation-delay:2s; }
.endcard__metric:nth-child(3){ animation-delay:4s; }
.endcard__metric:nth-child(4){ animation-delay:6s; }

.endcard__metric-value{
  font-size:clamp(1.85rem,5.6vw,2.8rem);
  font-weight:700;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}

.endcard__metric-label{
  font-size:clamp(0.84rem,2.6vw,1.02rem);
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.8);
}

@keyframes metricTicker{
  0%{
    opacity:0;
    transform:translateY(20px);
  }
  5%,
  20%{
    opacity:1;
    transform:translateY(0);
  }
  25%{
    opacity:0;
    transform:translateY(-20px);
  }
  100%{
    opacity:0;
    transform:translateY(-20px);
  }
}

@media(prefers-reduced-motion:reduce){
  .endcard__metrics{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(8px,2vw,16px);
  }
  .endcard__metric{
    position:static;
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

.endcard__card--result .endcard__metrics{
  background:rgba(0,0,0,0.9);
  border-top:1px solid rgba(255,255,255,0.4);
  border-bottom:1px solid rgba(255,255,255,0.4);
}

.endcard__cta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-auto-flow:column;
  align-items:stretch;
  gap:clamp(8px,2vw,12px);
  margin-top:clamp(10px,2.4vw,16px);
  min-width:0;
}

.endcard__btn{
  padding:var(--endcard-control-pad-y) var(--endcard-control-pad-x);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border:1px solid #000;
  background:#fff;
  color:#000;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  transition:color 0.2s ease;
  justify-content:center;
  min-width:0;
  width:100%;
  white-space:nowrap;
  font-size:var(--endcard-control-font-size);
  min-height:var(--endcard-control-min-height);
  box-sizing:border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,0.18);
  transition:transform 0.1s ease, box-shadow 0.1s ease;
  overflow:visible;
  text-overflow:clip;
}

.endcard__btn:focus{
  outline:2px dashed currentColor;
  outline-offset:3px;
}

.endcard__btn--primary,
.endcard__btn--ghost{
  border-color:#000;
}

.endcard__btn--primary:hover,
.endcard__btn--primary:focus-visible,
.endcard__btn--ghost:hover,
.endcard__btn--ghost:focus-visible{
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

@media(max-width:779px){
  #endOverlay .wrap{
    --endcard-pad:clamp(10px,5vw,18px);
  }
  .endcard{
    --endcard-gap:clamp(10px,4vw,14px);
    --endcard-card-pad:clamp(10px,4.6vw,14px);
    --endcard-control-font-size:clamp(0.56rem,3.2vw,0.7rem);
    --endcard-control-pad-y:clamp(7px,3.2vw,9px);
    --endcard-control-pad-x:clamp(10px,4.8vw,14px);
    --endcard-control-min-height:clamp(32px,9vw,38px);
    --endcard-feature-height:clamp(70px, 22vw, 110px);
    padding:clamp(6px,3.2vw,10.5px);
    max-height:calc(100vh - var(--endcard-pad) * 2);
  }
  .endcard__card{
    gap:clamp(10px,4vw,16px);
    min-height:calc(var(--endcard-feature-height) + clamp(85px, 22vw, 135px));
    display:flex;
    flex-direction:column;
  }
  .endcard__metrics{
    min-height:var(--endcard-feature-height);
    margin-bottom:clamp(14px,4vw,20px);
    padding:clamp(8px,4vw,12px);
  }
  .endcard__metric{
    gap:6px;
    padding:clamp(6px,3vw,10px);
  }
  .endcard__metric-value{
    font-size:clamp(1.9rem,8.2vw,2.5rem);
  }
  .endcard__metric-label{
    font-size:clamp(0.9rem,3.4vw,1.15rem);
  }
  .endcard__cta{
    gap:clamp(6px,3vw,8px);
    margin-top:auto;
  }
  .endcard__coupon-art{
    margin-bottom:clamp(14px,4vw,20px);
  }
  .endcard__coupon-code{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(6px,3vw,8px);
  }
  .endcard__coupon-art{
    padding:0;
  }
  .endcard__coupon-offer{
    gap:0;
  }
  .endcard__coupon-offer-secondary{
    font-size:clamp(0.92rem,3.9vw,1.12rem);
  }
}

@media(min-width:780px){
  .endcard{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    align-items:start;
  }
  .endcard__card{
    display:grid;
    grid-template-rows:auto var(--endcard-feature-height) auto;
    align-content:stretch;
  }
  .endcard__card-header{
    min-height:0;
  }
  .endcard__headline,
  .endcard__coupon-title{
    line-height:1.05;
  }
  .endcard__metrics,
  .endcard__coupon-art{
    align-self:stretch;
  }
  .endcard__cta,
  .endcard__coupon-code{
    margin-top:0;
    align-self:end;
  }
}

@media(min-width:560px){
  .endcard__cta{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .endcard__coupon-code{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

.endcard__coupon-title{
  margin:0;
  font-size:clamp(26px,7vw,34px);
  font-weight:800;
  font-style:italic;
}

.endcard__coupon-lead{
  margin:0;
  font-size:clamp(13px,3.4vw,15px);
}

.endcard__coupon-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:0.08em;
  text-underline-offset:0.18em;
  font-weight:500;
  display:inline;
  transition:color 0.2s ease;
}

.entry-modal{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  transition:opacity 0.25s ease;
}
.entry-modal[aria-hidden="true"]{
  opacity:0;
  pointer-events:none;
}
.entry-modal__backdrop{
  position:absolute;
  inset:0;
  background:transparent;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.entry-modal__dialog{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
  width:min(520px, 88vw);
  max-width:520px;
  max-height:640px;
}
.endcard--entry{
  width:min(480px, 88vw);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(16px,3vw,24px);
  padding:clamp(14px,4vw,24px);
  --endcard-feature-height:clamp(200px, 42vw, 260px);
}
.endcard--entry .endcard__card{
  width:100%;
  margin:0;
}
.endcard--entry .endcard__card-header{
  flex-direction:row;
  align-items:flex-start;
  gap:clamp(10px,2vw,14px);
}

.entry-modal__close{
  margin-left:auto;
  background:none;
  border:none;
  color:inherit;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
}
.entry-modal__close:focus-visible{
  outline:2px dashed currentColor;
  outline-offset:4px;
}
.entry-modal__close .material-symbols-outlined{
  font-size:clamp(20px,3.8vw,24px);
}
.entry-modal__shop-btn{
  width:100%;
}

.endcard__coupon-link:hover,
.endcard__coupon-link:focus-visible{
  color:#111;
}


.endcard__coupon-art{
  min-height:var(--endcard-feature-height);
  max-height:var(--endcard-feature-height);
  height:var(--endcard-feature-height);
  border:1px dashed #000;
  background:#f6f6f6;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
  margin-bottom:clamp(12px,3vw,18px);
}

.endcard__coupon-link-block{
  position:relative;
  display:flex;
  flex:1 1 auto;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
}

.endcard__coupon-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center;
}

.endcard__coupon-offer{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  margin:0;
  position:relative;
  z-index:1;
  text-align:left;
  width:100%;
  align-items:flex-start;
  padding:0;
}

.endcard__coupon-offer-primary,
.endcard__coupon-offer-secondary{
  display:inline-flex;
  align-items:center;
  width:auto;
  align-self:flex-start;
  background:#fff;
  padding:0.16em clamp(10px,2.6vw,14px);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  line-height:1.08;
  margin:0;
  white-space:nowrap;
  border-radius:0;
}

.endcard__coupon-offer-primary{
  font-size:clamp(1.68rem,4.9vw,2.32rem);
  font-weight:500;
  letter-spacing:0.03em;
  text-transform:uppercase;
}

.endcard__coupon-offer-secondary{
  font-size:clamp(1rem,3.4vw,1.28rem);
  font-weight:400;
  letter-spacing:0.01em;
  text-transform:none;
  margin-top:0;
}


.endcard__coupon-code{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(10px,2vw,14px);
  align-items:stretch;
  margin-top:auto;
}

.endcard__coupon-value{
  font-size:var(--endcard-control-font-size);
  font-weight:800;
  letter-spacing:0.12em;
  padding:var(--endcard-control-pad-y) var(--endcard-control-pad-x);
  border:1px solid #000;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--endcard-control-min-height);
  box-sizing:border-box;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  position:relative;
  font-variant-numeric:tabular-nums;
}

.endcard__coupon-value[data-locked]{
  color:transparent;
}

.endcard__coupon-value[data-locked]::after{
  content:'*************';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:inherit;
  color:#000;
  font-weight:inherit;
  letter-spacing:inherit;
  animation:couponScramble 2.4s steps(1) infinite;
}

@keyframes couponScramble{
  0%,
  6%{ content:'*************'; }
  12%{ content:'s************'; }
  18%{ content:'se***********'; }
  24%{ content:'sec**********'; }
  30%{ content:'secr*********'; }
  36%{ content:'secre********'; }
  42%{ content:'secret*******'; }
  48%{ content:'secret-******'; }
  54%{ content:'secret-c*****'; }
  60%{ content:'secret-co****'; }
  66%{ content:'secret-cou***'; }
  72%{ content:'secret-coup**'; }
  78%{ content:'secret-coupo*'; }
  84%,
  100%{ content:'secret-coupon'; }
}

@keyframes redeemPulse{
  0%{
    background:#000;
    color:#fff;
    border-color:#fff;
  }
  100%{
    background:#fff;
    color:#000;
    border-color:#000;
  }
}

.endcard__coupon-cta{
  gap:8px;
}

.endcard__coupon-cta .material-symbols-outlined{
  font-size:18px;
  text-decoration:none;
}

.endcard--win .endcard__coupon-cta{
  border-color:#fff;
  animation:redeemPulse 1.6s ease-in-out infinite alternate;
  animation-fill-mode:both;
}
.endcard--win .endcard__coupon-cta:hover,
.endcard--win .endcard__coupon-cta:focus-visible{
  animation-play-state:paused;
  background:#fff;
  color:#000;
  border-color:#000;
}

.endcard__coupon-cta--disabled{
  background:#f5f5f5;
  color:#8a8a8a;
  border-color:#c8c8c8;
  cursor:pointer;
  opacity:1;
}

.endcard__coupon-cta--disabled:hover,
.endcard__coupon-cta--disabled:focus-visible{
  background:#f5f5f5;
  color:#8a8a8a;
  border-color:#c8c8c8;
}

.endcard__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.35);
  padding-top:clamp(12px,3vw,18px);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.endcard__footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.endcard__footer-links a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.endcard__footer-links a:hover,
.endcard__footer-links a:focus-visible{
  text-decoration:underline;
}

.endcard__footer-copy{
  font-weight:600;
}

.dev-preview-controls{
  position:fixed;
  top:calc(var(--row-h, 64px) + 12px);
  right:12px;
  display:flex;
  gap:6px;
  z-index:30;
  opacity:0.3;
  transition:opacity 0.2s ease;
}

.dev-preview-controls:hover{
  opacity:0.9;
}

.dev-preview-controls__btn{
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(0,0,0,0.5);
  color:#fff;
  padding:4px 8px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  cursor:pointer;
  border-radius:999px;
}

.dev-preview-controls__btn:hover,
.dev-preview-controls__btn:focus-visible{
  background:#fff;
  color:#000;
  border-color:#000;
}

body:not(.inverted) .dev-preview-controls__btn{
  border-color:rgba(0,0,0,0.3);
  background:rgba(255,255,255,0.6);
  color:#000;
}

body.endcard-open .dev-preview-controls{
  display:none;
}

@media(max-width:600px){
  .dev-preview-controls{
    top:auto;
    bottom:12px;
    right:12px;
  }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  appearance:none;
  -webkit-appearance:none;
  border:var(--stroke) solid currentColor;
  background:#fff;
  color:#000;
  text-decoration:none;
  padding:14px clamp(16px, 4vw, 20px);
  border-radius:0;
  font-weight:800;
  cursor:pointer;
  font-size:clamp(13px,4cqw,20px);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  transition:background var(--anim) var(--ease), color var(--anim) var(--ease), border-color var(--anim) var(--ease);
}

.endcard__btn,
.entry-modal__shop-btn,
.endcard__coupon-cta{
  font-size:var(--endcard-control-font-size);
  letter-spacing:0.04em;
  font-weight:700;
  text-transform:uppercase;
  padding:var(--endcard-control-pad-y) var(--endcard-control-pad-x);
  min-height:var(--endcard-control-min-height);
  box-sizing:border-box;
}

.endcard__btn{
  width:100%;
}

.entry-modal__shop-btn,
.endcard__coupon-cta{
  width:100%;
}

.btn .btn__icon,
.btn .material-symbols-outlined.btn__icon{
  margin-left:8px;
  font-size:1.1em;
  line-height:1;
}

.btn--light{
  background:#fff;
  color:#000;
  border-color:#000;
}

.btn:focus{
  outline:2px dashed currentColor;
  outline-offset:2px;
}

.btn:hover,
.btn:focus-visible{
  background:#000;
  color:#fff;
  border-color:#fff;
}

.btn--dark{
  background:#000;
  color:#fff;
  border-color:#fff;
}
.btn--dark:hover,
.btn--dark:focus-visible{
  background:#fff;
  color:#000;
  border-color:#000;
}

.btn-primary{
  color:#fff;
  background:#000;
  border-color:#000;
}

.btn-primary:hover,
.btn-primary:focus-visible{
  background:#fff;
  color:#000;
}

.is-hidden{
  display:none !important;
}

a[data-analytics^="buy-modal"]{ text-decoration:none; }

.tile.client.placeholder,
.tile.client.placeholder *{
  cursor:no-drop !important;
}

#clients{
  border-bottom:0;
}