/**
 * Generated account-access stylesheet.
 *
 * Source: docs/visual-concepts/2026-08-16-account-access-figma-translation/mockup/account-access.css
 * Rebuild: node scripts/build-account-access-production-assets.js
 */

@font-face{
  font-family: "Instrument Sans";
  src: url("https://thesimshop.com.au/wp-content/themes/glozin/assets/fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Artwork round six: real rewards and partner facts, expressed as bright travel-retail objects. */
.tss-account-access .mates-rates-art,
.tss-account-access .credit-cycle-art,
.tss-account-access .partner-programme-art{
  position: absolute;
  z-index: 1;
  inset: 0;
}

.tss-account-access .art-variant--mates-rates::before,
.tss-account-access .art-variant--credit-cycle::before,
.tss-account-access .art-variant--partner-programme::before{
  border: 3px solid var(--tss-black);
}

.tss-account-access .art-variant--mates-rates::before{
  inset: 5% 3% 5% 5%;
  background: var(--tss-sky);
  transform: rotate(2deg);
}

.tss-account-access .art-variant--mates-rates::after{
  top: 0;
  left: 0;
  width: 38%;
  height: 34%;
  background: var(--tss-yellow);
  transform: rotate(-4deg);
}

.tss-account-access .mates-rates-art__pair{
  position: absolute;
  top: 10%;
  bottom: 9%;
  left: 3%;
  width: 62%;
  transform: rotate(-1.5deg);
}

.tss-account-access .mates-rates-art__join,
.tss-account-access .mates-rates-art__rule,
.tss-account-access .mates-rates-art__tag span,
.tss-account-access .mates-rates-art__tag strong,
.tss-account-access .mates-rates-art__tag i{
  display: block;
}

.tss-account-access .mates-rates-art__join{
  position: absolute;
  top: -2%;
  left: 50%;
  z-index: 5;
  border: 3px solid var(--tss-black);
  border-radius: 3px;
  padding: 7px 11px;
  background: var(--tss-yellow);
  box-shadow: 3px 3px 0 var(--tss-black);
  font-size: clamp(9px, 0.78vw, 12px);
  font-weight: 950;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: translateX(-50%) rotate(2deg);
}

.tss-account-access .mates-rates-art__tag{
  position: absolute;
  top: 15%;
  bottom: 27%;
  width: 47%;
  border: 3px solid var(--tss-black);
  border-radius: 8px 8px 4px 4px;
  padding: 16% 8% 8%;
  box-shadow: 6px 6px 0 var(--tss-black);
}

.tss-account-access .mates-rates-art__tag::before{
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 15px;
  height: 15px;
  border: 3px solid var(--tss-black);
  border-radius: 50%;
  background: #fffdf3;
  transform: translateX(-50%);
}

.tss-account-access .mates-rates-art__tag::after{
  content: "";
  position: absolute;
  top: calc(6% + 7px);
  width: 27%;
  border-top: 3px solid var(--tss-black);
}

.tss-account-access .mates-rates-art__tag--mate{
  left: 0;
  background: #fffdf3;
  transform: rotate(-2deg);
}

.tss-account-access .mates-rates-art__tag--mate::after{
  right: -21%;
  transform: rotate(10deg);
}

.tss-account-access .mates-rates-art__tag--you{
  right: 0;
  background: var(--tss-yellow);
  transform: rotate(2deg);
}

.tss-account-access .mates-rates-art__tag--you::after{
  left: -21%;
  transform: rotate(-10deg);
}

.tss-account-access .mates-rates-art__tag span{
  font-size: clamp(8px, 0.72vw, 11px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.tss-account-access .mates-rates-art__tag strong{
  margin-top: 6%;
  font-size: clamp(21px, 2.25vw, 35px);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.tss-account-access .mates-rates-art__tag i{
  margin-top: 8%;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 750;
  line-height: 1;
}

.tss-account-access .mates-rates-art__rule{
  position: absolute;
  right: 1%;
  bottom: 0;
  left: 1%;
  border: 3px solid var(--tss-black);
  border-radius: 4px;
  padding: 8px 11px;
  background: var(--tss-sage);
  box-shadow: 4px 4px 0 var(--tss-black);
  font-size: clamp(8px, 0.75vw, 11px);
  font-weight: 850;
  line-height: 1.15;
}

.tss-account-access .mates-rates-art__rule b{
  float: right;
  font-weight: 850;
}

.tss-account-access .art-voice--mates-rates{
  top: 9%;
  right: 1%;
  border-left-color: var(--tss-teal);
  transform: rotate(1deg);
}

.tss-account-access .art-variant--credit-cycle::before{
  inset: 4% 4% 5% 4%;
  border-radius: 50%;
  background: var(--tss-paper-yellow);
  transform: rotate(-2deg);
}

.tss-account-access .art-variant--credit-cycle::after{
  right: 0;
  bottom: 0;
  width: 40%;
  height: 35%;
  background: var(--tss-sky);
  transform: rotate(4deg);
}

.tss-account-access .credit-cycle-art__loop{
  position: absolute;
  top: 5%;
  bottom: 7%;
  left: 3%;
  width: 61%;
  border: 3px solid var(--tss-black);
  border-radius: 50%;
  background: var(--tss-sky);
  box-shadow: 6px 6px 0 var(--tss-black);
  transform: rotate(-1.5deg);
}

.tss-account-access .credit-cycle-art__loop::before,
.tss-account-access .credit-cycle-art__loop::after{
  content: "";
  position: absolute;
  z-index: 0;
  border: solid var(--tss-black);
  pointer-events: none;
}

.tss-account-access .credit-cycle-art__loop::before{
  inset: 18%;
  border-width: 3px;
  border-radius: 50%;
}

.tss-account-access .credit-cycle-art__loop::after{
  top: 8%;
  left: 43%;
  width: 11%;
  height: 11%;
  border-width: 3px 3px 0 0;
  transform: rotate(37deg);
}

.tss-account-access .credit-cycle-art__centre,
.tss-account-access .credit-cycle-art__stop,
.tss-account-access .credit-cycle-art__check{
  position: absolute;
  z-index: 2;
  border: 3px solid var(--tss-black);
  box-shadow: 4px 4px 0 var(--tss-black);
}

.tss-account-access .credit-cycle-art__centre{
  top: 31%;
  left: 27%;
  display: grid;
  place-content: center;
  width: 47%;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 7%;
  background: var(--tss-yellow);
  text-align: center;
}

.tss-account-access .credit-cycle-art__centre span,
.tss-account-access .credit-cycle-art__centre strong,
.tss-account-access .credit-cycle-art__stop span,
.tss-account-access .credit-cycle-art__stop strong{
  display: block;
}

.tss-account-access .credit-cycle-art__centre span{
  font-size: clamp(7px, 0.62vw, 10px);
  font-weight: 900;
  letter-spacing: 0.07em;
}

.tss-account-access .credit-cycle-art__centre strong{
  margin-top: 5px;
  font-size: clamp(18px, 1.85vw, 28px);
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.tss-account-access .credit-cycle-art__stop{
  min-width: 35%;
  border-radius: 4px;
  padding: 7px 9px;
  background: #fffdf3;
}

.tss-account-access .credit-cycle-art__stop span{
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: 800;
}

.tss-account-access .credit-cycle-art__stop strong{
  font-size: clamp(9px, 0.88vw, 13px);
  font-weight: 950;
  line-height: 1.05;
}

.tss-account-access .credit-cycle-art__stop--buy{
  top: 2%;
  left: -4%;
  background: #fffdf3;
  transform: rotate(-3deg);
}

.tss-account-access .credit-cycle-art__stop--add{
  top: 6%;
  right: -5%;
  background: var(--tss-sage);
  transform: rotate(3deg);
}

.tss-account-access .credit-cycle-art__stop--use{
  right: 6%;
  bottom: 4%;
  background: #fffdf3;
  transform: rotate(2deg);
}

.tss-account-access .credit-cycle-art__check{
  bottom: -4%;
  left: 4%;
  border-width: 2px;
  padding: 5px 7px;
  background: var(--tss-yellow);
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: 850;
  transform: rotate(-2deg);
}

.tss-account-access .art-voice--credit-cycle{
  top: 10%;
  right: 2%;
  border-left-color: var(--tss-yellow);
  transform: rotate(1deg);
}

.tss-account-access .art-variant--partner-programme::before{
  inset: 4% 3% 5% 5%;
  background: var(--tss-sky);
  transform: rotate(-2deg);
}

.tss-account-access .art-variant--partner-programme::after{
  top: 0;
  right: 0;
  width: 38%;
  height: 36%;
  background: var(--tss-yellow);
  transform: rotate(4deg);
}

.tss-account-access .partner-programme-art__dispatch{
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 3%;
  width: 62%;
  border: 3px solid var(--tss-black);
  border-radius: 7px;
  padding: 7% 6% 6%;
  background: #fffdf3;
  box-shadow: 7px 7px 0 var(--tss-black);
  transform: rotate(-1deg);
}

.tss-account-access .partner-programme-art__heading,
.tss-account-access .partner-programme-art__approval,
.tss-account-access .partner-programme-art__link span,
.tss-account-access .partner-programme-art__link strong,
.tss-account-access .partner-programme-art__link i,
.tss-account-access .partner-programme-art__rates span,
.tss-account-access .partner-programme-art__rates b{
  display: block;
}

.tss-account-access .partner-programme-art__heading{
  font-size: clamp(12px, 1.18vw, 18px);
  font-weight: 950;
  letter-spacing: -0.03em;
}

.tss-account-access .partner-programme-art__approval{
  position: absolute;
  top: 5%;
  right: 5%;
  border: 2px solid var(--tss-black);
  border-radius: 3px;
  padding: 4px 6px;
  background: var(--tss-sage);
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: 850;
  transform: rotate(2deg);
}

.tss-account-access .partner-programme-art__link{
  position: relative;
  margin-top: 6%;
  border: 3px solid var(--tss-black);
  border-radius: 4px;
  padding: 5% 7%;
  background: var(--tss-yellow);
  box-shadow: 4px 4px 0 var(--tss-black);
}

.tss-account-access .partner-programme-art__link::after{
  content: "↗";
  position: absolute;
  top: 50%;
  right: 7%;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 3px solid var(--tss-black);
  border-radius: 50%;
  background: #fffdf3;
  font-size: 18px;
  font-weight: 950;
  transform: translateY(-50%);
}

.tss-account-access .partner-programme-art__link span,
.tss-account-access .partner-programme-art__link i{
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: 800;
}

.tss-account-access .partner-programme-art__link strong{
  margin: 2px 0;
  font-size: clamp(14px, 1.35vw, 21px);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1;
}

.tss-account-access .partner-programme-art__rates{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 7%;
}

.tss-account-access .partner-programme-art__rates span{
  min-width: 0;
  border: 2px solid var(--tss-black);
  border-radius: 3px;
  padding: 6px 7px;
  background: var(--tss-sky);
  font-size: clamp(7px, 0.62vw, 9px);
  font-weight: 750;
  line-height: 1.05;
}

.tss-account-access .partner-programme-art__rates span:nth-child(2),
.tss-account-access .partner-programme-art__rates span:nth-child(4){
  background: var(--tss-sage);
}

.tss-account-access .partner-programme-art__rates b{
  margin-bottom: 2px;
  font-size: clamp(11px, 1.05vw, 16px);
  font-weight: 950;
}

.tss-account-access .art-voice--partner-programme{
  top: 9%;
  right: 2%;
  border-left-color: var(--tss-teal);
  transform: rotate(1deg);
}

@media (max-width: 600px){
  .tss-account-access .art-voice--mates-rates,
.tss-account-access .art-voice--credit-cycle,
.tss-account-access .art-voice--partner-programme{
    top: auto;
    right: 3%;
    bottom: 2%;
    left: 3%;
    width: auto;
    border-width: 2px 2px 2px 5px;
    padding: 7px 9px;
    box-shadow: 3px 3px 0 var(--tss-black);
    transform: none;
  }

  .tss-account-access .art-variant--mates-rates::before,
.tss-account-access .art-variant--credit-cycle::before,
.tss-account-access .art-variant--partner-programme::before{
    inset: 1% 3% 31% 3%;
    border-width: 2px;
  }

  .tss-account-access .art-variant--mates-rates::after,
.tss-account-access .art-variant--credit-cycle::after,
.tss-account-access .art-variant--partner-programme::after{
    top: 0;
    right: 1%;
    bottom: auto;
    left: auto;
    width: 32%;
    height: 25%;
  }

  .tss-account-access .mates-rates-art__pair{
    top: 1%;
    bottom: 34%;
    left: 12%;
    width: 76%;
  }

  .tss-account-access .mates-rates-art__join{
    border-width: 2px;
    padding: 4px 7px;
    box-shadow: 2px 2px 0 var(--tss-black);
    font-size: 6px;
  }

  .tss-account-access .mates-rates-art__tag{
    top: 15%;
    bottom: 24%;
    border-width: 2px;
    padding: 13% 6% 5%;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .mates-rates-art__tag::before{
    width: 9px;
    height: 9px;
    border-width: 2px;
  }

  .tss-account-access .mates-rates-art__tag::after{
    top: calc(6% + 4px);
    border-width: 2px 0 0;
  }

  .tss-account-access .mates-rates-art__tag span{
    font-size: 5.5px;
  }

  .tss-account-access .mates-rates-art__tag strong{
    font-size: 13px;
  }

  .tss-account-access .mates-rates-art__tag i{
    margin-top: 5%;
    font-size: 7px;
  }

  .tss-account-access .mates-rates-art__rule{
    border-width: 2px;
    padding: 4px 6px;
    box-shadow: 2px 2px 0 var(--tss-black);
    font-size: 5.5px;
  }

  .tss-account-access .credit-cycle-art__loop{
    top: 1%;
    bottom: 34%;
    left: 18%;
    width: 64%;
    border-width: 2px;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .credit-cycle-art__loop::before{
    border-width: 2px;
  }

  .tss-account-access .credit-cycle-art__loop::after{
    border-width: 2px 2px 0 0;
  }

  .tss-account-access .credit-cycle-art__centre,
.tss-account-access .credit-cycle-art__stop,
.tss-account-access .credit-cycle-art__check{
    border-width: 2px;
    box-shadow: 2px 2px 0 var(--tss-black);
  }

  .tss-account-access .credit-cycle-art__centre span{
    font-size: 5px;
  }

  .tss-account-access .credit-cycle-art__centre strong{
    font-size: 11px;
  }

  .tss-account-access .credit-cycle-art__stop{
    padding: 3px 5px;
  }

  .tss-account-access .credit-cycle-art__stop span,
.tss-account-access .credit-cycle-art__check{
    font-size: 4.8px;
  }

  .tss-account-access .credit-cycle-art__stop strong{
    font-size: 6px;
  }

  .tss-account-access .credit-cycle-art__check{
    padding: 3px 4px;
  }

  .tss-account-access .partner-programme-art__dispatch{
    top: 1%;
    bottom: 34%;
    left: 15%;
    width: 70%;
    border-width: 2px;
    padding: 6% 5% 5%;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .partner-programme-art__heading{
    font-size: 7px;
  }

  .tss-account-access .partner-programme-art__approval{
    border-width: 1.5px;
    padding: 2px 4px;
    font-size: 4.8px;
  }

  .tss-account-access .partner-programme-art__link{
    border-width: 2px;
    margin-top: 3%;
    padding: 3% 6%;
    box-shadow: 2px 2px 0 var(--tss-black);
  }

  .tss-account-access .partner-programme-art__link::after{
    width: 20px;
    height: 20px;
    border-width: 2px;
    font-size: 11px;
  }

  .tss-account-access .partner-programme-art__link span,
.tss-account-access .partner-programme-art__link i,
.tss-account-access .partner-programme-art__rates span{
    font-size: 4.8px;
  }

  .tss-account-access .partner-programme-art__link strong{
    font-size: 10px;
  }

  .tss-account-access .partner-programme-art__rates{
    gap: 2px;
    margin-top: 3%;
  }

  .tss-account-access .partner-programme-art__rates span{
    border-width: 1.5px;
    padding: 2px 4px;
  }

  .tss-account-access .partner-programme-art__rates b{
    margin-bottom: 0;
    font-size: 6.5px;
  }
}

@font-face{
  font-family: "Instrument Sans";
  src: url("https://thesimshop.com.au/wp-content/themes/glozin/assets/fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face{
  font-family: "Instrument Sans";
  src: url("https://thesimshop.com.au/wp-content/themes/glozin/assets/fonts/InstrumentSans-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 950;
  font-display: swap;
}

.tss-account-access{
  --tss-black: #101010;
  --tss-cream: #fff7df;
  --tss-paper-yellow: #fff3c6;
  --tss-yellow: #ffd633;
  --tss-charcoal: #272727;
  --tss-ink-soft: #3a352a;
  --tss-panel: #ffffff;
  --tss-sage: #b9cdaf;
  --tss-sage-deep: #64856d;
  --tss-sky: #dff4f2;
  --tss-teal: #007c78;
  --tss-border: rgba(16, 16, 16, 0.16);
  --tss-danger: #8c2f22;
  --campaign-height: 40px;
  --header-height: 72px;
  color-scheme: light;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-synthesis: none;
}

.tss-account-access *{
  box-sizing: border-box;
}

.tss-account-access{
  min-width: 320px;
  background: var(--tss-cream);
  color: var(--tss-black);
  scroll-behavior: smooth;
}

.tss-account-access{
  margin: 0;
  min-width: 320px;
  background: var(--tss-cream);
  color: var(--tss-black);
  font: 400 16px/1.5 "Instrument Sans", Arial, sans-serif;
  overflow-x: hidden;
}

.tss-account-access button,
.tss-account-access input{
  font: inherit;
}

.tss-account-access button,
.tss-account-access a{
  -webkit-tap-highlight-color: transparent;
}

.tss-account-access a{
  color: inherit;
}

.tss-account-access .skip-link{
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 50;
  padding: 10px 14px;
  border: 2px solid var(--tss-black);
  background: var(--tss-yellow);
  color: var(--tss-black);
  font-weight: 800;
  transform: translateY(-160%);
}

.tss-account-access .skip-link:focus{
  transform: translateY(0);
}

.tss-account-access .campaign-bar{
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  height: var(--campaign-height);
  border-bottom: 2px solid var(--tss-black);
  background: var(--tss-yellow);
  overflow: hidden;
}

.tss-account-access .campaign-bar p{
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 44px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tss-account-access .campaign-bar a{
  margin-left: 10px;
  border: 1px solid var(--tss-black);
  border-radius: 4px;
  padding: 3px 9px;
  background: var(--tss-cream);
  text-decoration: none;
}

.tss-account-access .campaign-bar__copy--mobile{
  display: none;
}

.tss-account-access .campaign-bar__arrow,
.tss-account-access .campaign-bar__close{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--tss-black);
  cursor: pointer;
}

.tss-account-access .campaign-bar__arrow{
  font-size: 20px;
}

.tss-account-access .campaign-bar__close{
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  border-left: 1px solid rgba(16, 16, 16, 0.18);
  font-size: 20px;
}

.tss-account-access .site-header{
  position: relative;
  z-index: 10;
  height: var(--header-height);
  border-bottom: 1px solid rgba(16, 16, 16, 0.12);
  background: #fff;
}

.tss-account-access .site-header__inner{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 148px 1fr;
  align-items: center;
  width: min(100% - 48px, 1500px);
  height: 100%;
  margin: 0 auto;
}

.tss-account-access .site-logo{
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 116px;
  height: 100px;
  transform: translateX(-50%);
}

.tss-account-access .site-logo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tss-account-access .site-header__desktop-links{
  display: flex;
  gap: clamp(22px, 2.6vw, 42px);
  align-items: center;
  min-width: 0;
}

.tss-account-access .site-header__desktop-links--left{
  grid-column: 1;
  justify-content: flex-start;
}

.tss-account-access .site-header__desktop-links--right{
  grid-column: 3;
  justify-content: flex-end;
}

.tss-account-access .site-header__desktop-links a,
.tss-account-access .site-header__desktop-links button{
  color: var(--tss-black);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.tss-account-access .site-header__desktop-links > a:hover,
.tss-account-access .site-header__desktop-links > a:focus-visible{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.tss-account-access .header-icon,
.tss-account-access .mobile-icon{
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tss-account-access .header-icon--search::before,
.tss-account-access .mobile-icon--search::before{
  content: "";
  position: absolute;
  top: 10px;
  left: 9px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--tss-black);
  border-radius: 50%;
}

.tss-account-access .header-icon--search::after,
.tss-account-access .mobile-icon--search::after{
  content: "";
  position: absolute;
  top: 26px;
  left: 25px;
  width: 9px;
  height: 2px;
  background: var(--tss-black);
  transform: rotate(45deg);
  transform-origin: left center;
}

.tss-account-access .header-icon--account::before{
  content: "";
  position: absolute;
  top: 7px;
  left: 16px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--tss-black);
  border-radius: 50%;
}

.tss-account-access .header-icon--account::after{
  content: "";
  position: absolute;
  top: 23px;
  left: 10px;
  width: 20px;
  height: 13px;
  border: 2px solid var(--tss-black);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

.tss-account-access .header-icon--bag::before{
  content: "";
  position: absolute;
  top: 15px;
  left: 10px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--tss-black);
  border-radius: 2px;
}

.tss-account-access .header-icon--bag::after{
  content: "";
  position: absolute;
  top: 9px;
  left: 16px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--tss-black);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.tss-account-access .mobile-icon{
  display: none;
}

.tss-account-access .mobile-icon--menu{
  align-content: center;
  gap: 5px;
  padding: 9px;
}

.tss-account-access .mobile-icon--menu span{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tss-black);
}

.tss-account-access .account-main{
  display: flex;
  min-height: calc(100dvh - var(--campaign-height) - var(--header-height));
  padding: clamp(18px, 2.6vw, 40px);
  background: var(--tss-cream);
}

.tss-account-access .account-shell{
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(430px, 44fr);
  flex: 1 1 auto;
  width: min(100%, 1800px);
  min-height: min(850px, calc(100dvh - var(--campaign-height) - var(--header-height) - clamp(36px, 5.2vw, 80px)));
  margin: 0 auto;
  border: 2px solid var(--tss-black);
  border-radius: 16px;
  background: var(--tss-panel);
  box-shadow: 5px 5px 0 var(--tss-black);
  overflow: hidden;
}

.tss-account-access .account-story{
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  padding: clamp(28px, 4vw, 66px);
  background: var(--tss-paper-yellow);
  overflow: hidden;
}

.tss-account-access .account-story::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  height: 28%;
  border-bottom: 2px solid rgba(16, 16, 16, 0.12);
  border-left: 2px solid rgba(16, 16, 16, 0.12);
  background: var(--tss-sky);
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
}

.tss-account-access .art-stage{
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 370px;
}

.tss-account-access .art-variant{
  position: relative;
  display: none;
  width: min(94%, 680px);
  aspect-ratio: 1.48;
  isolation: isolate;
}

html[data-auth-art="trip-file"] .tss-account-access .art-variant--trip-file,
html[data-auth-art="setup-docket"] .tss-account-access .art-variant--setup-docket,
html[data-auth-art="phone-labels"] .tss-account-access .art-variant--phone-labels,
html[data-auth-art="next-trip-packet"] .tss-account-access .art-variant--next-trip-packet,
html[data-auth-art="account-drawer"] .tss-account-access .art-variant--account-drawer,
html[data-auth-art="pigeonholes"] .tss-account-access .art-variant--pigeonholes,
html[data-auth-art="setup-email"] .tss-account-access .art-variant--setup-email,
html[data-auth-art="named-phones"] .tss-account-access .art-variant--named-phones,
html[data-auth-art="order-folder"] .tss-account-access .art-variant--order-folder,
html[data-auth-art="trip-checklist"] .tss-account-access .art-variant--trip-checklist,
html[data-auth-art="credit-slip"] .tss-account-access .art-variant--credit-slip,
html[data-auth-art="mates-rates"] .tss-account-access .art-variant--mates-rates,
html[data-auth-art="credit-cycle"] .tss-account-access .art-variant--credit-cycle,
html[data-auth-art="partner-programme"] .tss-account-access .art-variant--partner-programme{
  display: block;
}

.tss-account-access .art-caption{
  position: absolute;
  top: 1%;
  left: 1%;
  z-index: 12;
  border: 2px solid var(--tss-black);
  border-radius: 4px;
  padding: 8px 12px;
  background: var(--tss-yellow);
  box-shadow: 3px 3px 0 var(--tss-black);
  font-size: 13px;
  font-weight: 850;
  transform: rotate(-2deg);
}

.tss-account-access .art-paper{
  background-color: #fffdf3;
  background-image: repeating-linear-gradient(
    145deg,
    rgba(15, 110, 86, 0.045) 0,
    rgba(15, 110, 86, 0.045) 1px,
    transparent 1px,
    transparent 8px
  );
}

.tss-account-access .paper-code{
  display: block;
  color: #4d493f;
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.tss-account-access .paper-tab{
  position: absolute;
  top: -13px;
  right: 7%;
  border: 2px solid var(--tss-black);
  padding: 6px 11px;
  background: var(--tss-yellow);
  box-shadow: 3px 3px 0 rgba(16, 16, 16, 0.24);
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: 900;
  transform: rotate(2deg);
}

.tss-account-access .paper-rule{
  display: block;
  width: 100%;
  margin: 10px 0 7px;
  border-top: 2px solid var(--tss-black);
}

.tss-account-access .paper-row{
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 8px;
  align-items: baseline;
  border-bottom: 1px solid rgba(16, 16, 16, 0.28);
  padding: 7px 0 6px;
  font-size: clamp(8px, 0.78vw, 12px);
  line-height: 1.1;
}

.tss-account-access .paper-row b{
  font-weight: 900;
}

.tss-account-access .paper-row i{
  color: #5f5a50;
  font-style: normal;
}

.tss-account-access .paper-seal{
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 3px double var(--tss-teal);
  border-radius: 50%;
  color: var(--tss-teal);
  font-size: 10px;
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  transform: rotate(-9deg);
}

.tss-account-access .art-quip{
  position: absolute;
  z-index: 9;
  border: 2px solid var(--tss-black);
  padding: 7px 10px;
  background: #fffdf3;
  box-shadow: 3px 3px 0 rgba(16, 16, 16, 0.22);
  color: var(--tss-black);
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: 850;
  line-height: 1.05;
  white-space: nowrap;
}

/* Variant 1: open trip file */
.tss-account-access .trip-file{
  position: absolute;
  inset: 8% 1% 2% 4%;
}

.tss-account-access .trip-file__back{
  position: absolute;
  top: 11%;
  right: 8%;
  bottom: 19%;
  left: 7%;
  border: 3px solid var(--tss-black);
  border-radius: 7px 7px 3px 3px;
  padding: 14px;
  background: #dce8d3;
  box-shadow: 7px 8px 0 rgba(16, 16, 16, 0.18);
  transform: rotate(-1.5deg);
}

.tss-account-access .trip-file__sheet{
  position: absolute;
  top: 3%;
  right: 13%;
  width: 59%;
  height: 70%;
  border: 3px solid var(--tss-black);
  padding: clamp(16px, 2.2vw, 28px);
  box-shadow: 5px 6px 0 rgba(16, 16, 16, 0.2);
  transform: rotate(2.5deg);
}

.tss-account-access .trip-file__sheet strong{
  display: block;
  max-width: 8ch;
  margin-top: 8px;
  font-size: clamp(19px, 2.1vw, 32px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.tss-account-access .trip-file__sheet .paper-seal{
  position: absolute;
  right: 8%;
  bottom: 6%;
}

.tss-account-access .trip-file__front{
  position: absolute;
  right: 2%;
  bottom: 5%;
  left: 1%;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  height: 36%;
  border: 3px solid var(--tss-black);
  border-radius: 4px 4px 9px 9px;
  padding: 16px 19px;
  background: var(--tss-sage);
  box-shadow: 5px 6px 0 rgba(16, 16, 16, 0.22);
  transform: rotate(-1deg);
}

.tss-account-access .trip-file__front span{
  border-bottom: 2px solid var(--tss-black);
  font-size: clamp(8px, 0.76vw, 11px);
  font-weight: 900;
}

.tss-account-access .art-quip--trip-file{
  right: 5%;
  bottom: 0;
  background: var(--tss-yellow);
  transform: rotate(1.5deg);
}

/* Variant 2: setup docket */
.tss-account-access .setup-board{
  position: absolute;
  top: 9%;
  right: 8%;
  bottom: 4%;
  left: 10%;
  border: 3px solid var(--tss-black);
  border-radius: 6px;
  background: var(--tss-sage);
  box-shadow: 7px 8px 0 rgba(16, 16, 16, 0.2);
  transform: rotate(-2deg);
}

.tss-account-access .setup-board__clip{
  position: absolute;
  top: -12px;
  left: 21%;
  z-index: 7;
  width: 31%;
  height: 34px;
  border: 3px solid var(--tss-black);
  border-radius: 4px;
  background: var(--tss-yellow);
  box-shadow: 2px 3px 0 rgba(16, 16, 16, 0.2);
}

.tss-account-access .setup-docket{
  position: absolute;
  top: 5%;
  bottom: 7%;
  left: 8%;
  z-index: 3;
  width: 62%;
  border: 3px solid var(--tss-black);
  padding: clamp(18px, 2.2vw, 29px);
  box-shadow: 4px 5px 0 rgba(16, 16, 16, 0.18);
}

.tss-account-access .setup-docket strong{
  display: block;
  max-width: 11ch;
  margin-top: 9px;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.tss-account-access .docket-step{
  display: grid;
  grid-template-columns: 18px 0.7fr 1fr;
  gap: 7px;
  align-items: center;
  border-bottom: 1px solid rgba(16, 16, 16, 0.28);
  padding: 7px 0;
  font-size: clamp(8px, 0.75vw, 11px);
  line-height: 1.05;
}

.tss-account-access .docket-step i{
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--tss-black);
  background: var(--tss-paper-yellow);
}

.tss-account-access .docket-step b{
  font-weight: 900;
}

.tss-account-access .docket-step em{
  color: #5f5a50;
  font-style: normal;
}

.tss-account-access .docket-tear{
  position: absolute;
  right: -3px;
  bottom: -8px;
  left: -3px;
  height: 11px;
  background: radial-gradient(circle at 7px -1px, transparent 6px, #fffdf3 6.5px) 0 0 / 14px 11px repeat-x;
}

.tss-account-access .setup-phone{
  position: absolute;
  top: 25%;
  right: 6%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28%;
  aspect-ratio: 0.62;
  border: 3px solid var(--tss-black);
  border-radius: 12px;
  background: var(--tss-sky);
  box-shadow: 5px 6px 0 rgba(16, 16, 16, 0.2);
  transform: rotate(3deg);
}

.tss-account-access .setup-phone__speaker{
  position: absolute;
  top: 7%;
  left: 37%;
  width: 26%;
  height: 3px;
  border-radius: 2px;
  background: var(--tss-black);
}

.tss-account-access .setup-phone__sim{
  display: grid;
  place-items: center;
  width: 52%;
  aspect-ratio: 0.82;
  border: 2px solid var(--tss-black);
  background: var(--tss-yellow);
  clip-path: polygon(0 0, 73% 0, 100% 27%, 100% 100%, 0 100%);
  font-size: clamp(9px, 0.9vw, 13px);
  font-weight: 950;
}

.tss-account-access .setup-phone__bar{
  position: absolute;
  bottom: 6%;
  left: 37%;
  width: 26%;
  height: 3px;
  border-radius: 2px;
  background: var(--tss-black);
}

.tss-account-access .art-quip--setup{
  right: -2%;
  bottom: 2%;
  background: var(--tss-yellow);
  transform: rotate(2deg);
}

/* Variant 3: phone label sheet */
.tss-account-access .label-sheet{
  position: absolute;
  top: 9%;
  right: 8%;
  bottom: 4%;
  left: 9%;
  border: 3px solid var(--tss-black);
  padding: clamp(21px, 2.6vw, 36px);
  box-shadow: 7px 8px 0 rgba(16, 16, 16, 0.2);
  transform: rotate(-2deg);
}

.tss-account-access .label-sheet > strong{
  display: block;
  max-width: 11ch;
  margin-top: 9px;
  font-size: clamp(20px, 2.15vw, 33px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.tss-account-access .label-sheet__grid{
  position: absolute;
  right: 7%;
  bottom: 10%;
  left: 7%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.tss-account-access .label-sheet__grid span,
.tss-account-access .peeled-label{
  border: 2px dashed var(--tss-black);
  padding: 8px 10px;
  background: var(--tss-paper-yellow);
  font-size: clamp(8px, 0.75vw, 11px);
  font-weight: 850;
}

.tss-account-access .label-sheet__grid span:nth-child(2),
.tss-account-access .label-sheet__grid span:nth-child(3){
  background: #dbe8d3;
}

.tss-account-access .label-phone{
  position: absolute;
  top: 12%;
  right: 10%;
  display: grid;
  place-items: center;
  width: 24%;
  aspect-ratio: 0.64;
  border: 3px solid var(--tss-black);
  border-radius: 10px;
  background: var(--tss-sky);
  box-shadow: 4px 5px 0 rgba(16, 16, 16, 0.19);
  transform: rotate(4deg);
}

.tss-account-access .label-phone span{
  position: absolute;
  top: 6%;
  width: 28%;
  height: 3px;
  background: var(--tss-black);
}

.tss-account-access .label-phone i{
  border: 2px solid var(--tss-black);
  padding: 10px 7px;
  background: var(--tss-yellow);
  font-size: clamp(9px, 0.9vw, 13px);
  font-style: normal;
  font-weight: 950;
  transform: rotate(-3deg);
}

.tss-account-access .peeled-label{
  position: absolute;
  top: 49%;
  right: -5%;
  z-index: 7;
  border-style: solid;
  background: var(--tss-yellow);
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.22);
  transform: rotate(8deg);
}

.tss-account-access .art-quip--labels{
  right: 7%;
  bottom: -3%;
  transform: rotate(1deg);
}

/* Variant 4: next-trip packet */
.tss-account-access .trip-packet{
  position: absolute;
  inset: 8% 4% 3% 6%;
  transform: rotate(-2deg);
}

.tss-account-access .trip-packet__tabs{
  position: absolute;
  top: 0;
  right: 5%;
  left: 20%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.tss-account-access .trip-packet__tabs span{
  border: 2px solid var(--tss-black);
  border-bottom: 0;
  padding: 7px 3px 12px;
  background: #dbe8d3;
  font-size: clamp(7px, 0.68vw, 10px);
  font-weight: 900;
  text-align: center;
}

.tss-account-access .trip-packet__tabs span:nth-child(2),
.tss-account-access .trip-packet__tabs span:nth-child(4){
  background: var(--tss-yellow);
}

.tss-account-access .trip-packet__sheet{
  position: absolute;
  top: 7%;
  right: 8%;
  bottom: 18%;
  left: 10%;
  border: 3px solid var(--tss-black);
  padding: clamp(21px, 2.5vw, 35px);
  box-shadow: 6px 7px 0 rgba(16, 16, 16, 0.2);
}

.tss-account-access .trip-packet__sheet strong{
  display: block;
  margin-top: 7px;
  font-size: clamp(21px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.tss-account-access .packet-line{
  display: block;
  width: 60%;
  border-bottom: 1px solid rgba(16, 16, 16, 0.3);
  padding: 6px 0;
  font-size: clamp(8px, 0.75vw, 11px);
  font-weight: 700;
}

.tss-account-access .trip-packet__envelope{
  position: absolute;
  right: 1%;
  bottom: 2%;
  left: 2%;
  z-index: 5;
  height: 44%;
  border: 3px solid var(--tss-black);
  border-radius: 4px;
  background: var(--tss-sage);
  box-shadow: 6px 7px 0 rgba(16, 16, 16, 0.22);
  overflow: hidden;
}

.tss-account-access .trip-packet__envelope::before,
.tss-account-access .trip-packet__envelope::after{
  content: "";
  position: absolute;
  bottom: -25%;
  width: 62%;
  height: 115%;
  border-top: 3px solid var(--tss-black);
  background: #c9dbbf;
}

.tss-account-access .trip-packet__envelope::before{
  left: -8%;
  transform: rotate(29deg);
}

.tss-account-access .trip-packet__envelope::after{
  right: -8%;
  transform: rotate(-29deg);
}

.tss-account-access .packet-address{
  position: absolute;
  top: 15%;
  left: 6%;
  z-index: 3;
  border-bottom: 2px dotted var(--tss-black);
  padding-bottom: 4px;
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: 900;
}

.tss-account-access .paper-seal--packet{
  position: absolute;
  top: 9%;
  right: 7%;
  z-index: 4;
  width: 70px;
  height: 70px;
  font-size: 9px;
}

.tss-account-access .art-quip--packet{
  right: 3%;
  bottom: -2%;
  background: var(--tss-yellow);
  transform: rotate(1deg);
}

/* Variant 6: pigeonhole sorter */
.tss-account-access .pigeonholes{
  position: absolute;
  inset: 8% 5% 3% 7%;
}

.tss-account-access .pigeonholes__sign{
  position: absolute;
  top: 2%;
  right: 3%;
  z-index: 4;
  border: 2px solid var(--tss-black);
  padding: 8px 14px;
  background: var(--tss-yellow);
  box-shadow: 3px 3px 0 var(--tss-black);
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: 900;
  transform: rotate(-2deg);
}

.tss-account-access .pigeonholes__case{
  position: absolute;
  top: 12%;
  right: 2%;
  bottom: 5%;
  left: 2%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 4px solid var(--tss-black);
  border-radius: 5px;
  background: var(--tss-sage);
  box-shadow: 7px 8px 0 rgba(16, 16, 16, 0.22);
  transform: rotate(-1deg);
}

.tss-account-access .pigeonhole{
  position: relative;
  min-width: 0;
  border-right: 3px solid var(--tss-black);
  border-bottom: 3px solid var(--tss-black);
  background: #dce8d3;
  overflow: hidden;
}

.tss-account-access .pigeonhole:nth-child(2n){
  border-right: 0;
}

.tss-account-access .pigeonhole:nth-child(n + 3){
  border-bottom: 0;
}

.tss-account-access .pigeonhole--setup,
.tss-account-access .pigeonhole--receipts{
  background: var(--tss-sky);
}

.tss-account-access .pigeonhole__label{
  position: absolute;
  top: 12px;
  left: 13px;
  z-index: 3;
  border: 2px solid var(--tss-black);
  padding: 5px 8px;
  background: #fff;
  font-size: clamp(8px, 0.72vw, 11px);
  font-weight: 900;
}

.tss-account-access .pigeonhole__paper{
  position: absolute;
  right: 8%;
  bottom: -9%;
  left: 9%;
  height: 72%;
  border: 2px solid var(--tss-black);
  padding: 38px 12px 10px;
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.17);
  font-size: clamp(8px, 0.72vw, 11px);
  font-style: normal;
  font-weight: 800;
  transform: rotate(-2deg);
}

.tss-account-access .pigeonhole:nth-child(2) .pigeonhole__paper,
.tss-account-access .pigeonhole:nth-child(3) .pigeonhole__paper{
  transform: rotate(2deg);
}

.tss-account-access .art-quip--pigeonholes{
  right: 2%;
  bottom: 0;
  background: var(--tss-yellow);
  transform: rotate(1deg);
}

/* Artwork round two: ink-forward travel stationery with a distinct hero move per variant. */
.tss-account-access .account-story::before{
  width: 33%;
  height: 27%;
  border: 0;
  background: var(--tss-black);
  box-shadow: inset 0 -12px 0 var(--tss-yellow);
  clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
}

.tss-account-access .art-variant::before,
.tss-account-access .art-variant::after{
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.tss-account-access .art-variant--trip-file::before{
  top: 16%;
  right: 0;
  bottom: 8%;
  left: 10%;
  border: 3px solid var(--tss-black);
  background: var(--tss-teal);
  transform: rotate(3deg);
}

.tss-account-access .art-variant--trip-file::after{
  top: 9%;
  left: 2%;
  width: 19%;
  height: 56%;
  background: var(--tss-yellow);
  transform: rotate(-5deg);
}

.tss-account-access .trip-file{
  z-index: 1;
  inset: 5% 1% 2% 3%;
}

.tss-account-access .trip-file__back{
  top: 8%;
  right: 5%;
  bottom: 16%;
  left: 6%;
  border: 3px solid var(--tss-black);
  border-radius: 5px 5px 2px 2px;
  background: var(--tss-yellow);
  box-shadow: 7px 8px 0 var(--tss-black);
  transform: rotate(-2.5deg);
}

.tss-account-access .trip-file__back .paper-code{
  color: var(--tss-black);
}

.tss-account-access .trip-file__sheet{
  top: 0;
  right: 9%;
  width: 62%;
  height: 74%;
  box-shadow: 6px 7px 0 var(--tss-black);
  transform: rotate(2.8deg);
}

.tss-account-access .trip-file__front{
  right: 1%;
  bottom: 3%;
  left: 0;
  display: block;
  height: 38%;
  border-radius: 3px 3px 8px 8px;
  padding: 0;
  background: var(--tss-black);
  box-shadow: 7px 8px 0 var(--tss-yellow);
  color: #fffdf3;
  transform: rotate(-1deg);
}

.tss-account-access .trip-file__front .trip-file__index{
  position: absolute;
  top: -18px;
  left: 5%;
  width: 46%;
  border: 3px solid var(--tss-black);
  padding: 10px 14px;
  background: var(--tss-yellow);
  color: var(--tss-black);
  font-size: clamp(12px, 1.2vw, 18px);
  letter-spacing: 0.04em;
  text-align: left;
  transform: rotate(-1.5deg);
}

.tss-account-access .trip-file__front .trip-file__label{
  position: relative;
  display: inline-block;
  margin: 12% 0 0 5%;
  border-bottom: 2px solid var(--tss-yellow);
  color: #fffdf3;
  font-size: clamp(8px, 0.8vw, 12px);
  letter-spacing: 0.04em;
}

.tss-account-access .trip-file__front .trip-file__note{
  position: absolute;
  right: 5%;
  bottom: 13%;
  border: 0;
  color: #fffdf3;
  font-size: clamp(8px, 0.75vw, 11px);
  font-weight: 700;
}

.tss-account-access .art-variant--setup-docket::before{
  top: 6%;
  right: 3%;
  width: 46%;
  aspect-ratio: 1;
  border: 3px solid var(--tss-black);
  border-radius: 50%;
  background: var(--tss-yellow);
}

.tss-account-access .art-variant--setup-docket::after{
  right: 1%;
  bottom: 5%;
  width: 36%;
  height: 27%;
  background: var(--tss-teal);
  transform: rotate(-5deg);
}

.tss-account-access .setup-board{
  z-index: 1;
  top: 7%;
  right: 7%;
  bottom: 3%;
  left: 9%;
  border-radius: 4px;
  background: var(--tss-black);
  box-shadow: 8px 9px 0 var(--tss-yellow);
  transform: rotate(-1.5deg);
}

.tss-account-access .setup-board::before{
  content: "";
  position: absolute;
  top: 0;
  right: 7%;
  bottom: 0;
  width: 17%;
  background: var(--tss-teal);
}

.tss-account-access .setup-board__clip{
  top: -14px;
  left: 16%;
  width: 39%;
  height: 36px;
  border-radius: 3px;
  box-shadow: 3px 4px 0 var(--tss-black);
}

.tss-account-access .setup-docket{
  top: 5%;
  bottom: 7%;
  left: 6%;
  width: 64%;
  box-shadow: 5px 6px 0 var(--tss-yellow);
}

.tss-account-access .setup-docket__stamp{
  position: absolute;
  right: 7%;
  bottom: 9%;
  border: 3px double var(--tss-danger);
  padding: 6px 8px;
  color: var(--tss-danger);
  font-size: clamp(8px, 0.76vw, 11px);
  font-weight: 950;
  letter-spacing: 0.06em;
  transform: rotate(-8deg);
}

.tss-account-access .setup-phone{
  top: 20%;
  right: 4%;
  width: 30%;
  border-radius: 10px;
  background: var(--tss-black);
  box-shadow: 6px 7px 0 var(--tss-yellow);
  transform: rotate(4deg);
}

.tss-account-access .setup-phone__speaker,
.tss-account-access .setup-phone__bar{
  background: #fffdf3;
}

.tss-account-access .setup-phone__sim{
  position: relative;
  z-index: 2;
  width: 56%;
  background: var(--tss-yellow);
}

.tss-account-access .setup-board__note{
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 8;
  border: 3px solid var(--tss-black);
  padding: 8px 12px;
  background: var(--tss-yellow);
  color: var(--tss-black);
  font-size: clamp(8px, 0.76vw, 11px);
  font-weight: 850;
  white-space: nowrap;
}

.tss-account-access .art-variant--phone-labels::before{
  top: 2%;
  right: 0;
  bottom: 7%;
  width: 43%;
  border: 3px solid var(--tss-black);
  background: var(--tss-yellow);
  transform: rotate(4deg);
}

.tss-account-access .art-variant--phone-labels::after{
  top: 13%;
  bottom: 2%;
  left: 2%;
  width: 16%;
  background: var(--tss-teal);
  transform: rotate(-4deg);
}

.tss-account-access .label-sheet{
  top: 6%;
  right: 7%;
  bottom: 3%;
  left: 8%;
  z-index: 1;
  border-radius: 3px;
  padding: clamp(21px, 2.6vw, 36px);
  background: var(--tss-black);
  box-shadow: 8px 9px 0 var(--tss-teal);
  color: #fffdf3;
  transform: rotate(-1.5deg);
}

.tss-account-access .label-sheet .paper-code{
  color: #fffdf3;
}

.tss-account-access .label-sheet > strong{
  color: var(--tss-yellow);
}

.tss-account-access .label-sheet__grid{
  right: 34%;
  bottom: 13%;
  left: 7%;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-areas:
    "main main"
    "work old";
  gap: 8px;
}

.tss-account-access .label-sheet__grid span{
  border: 2px dashed var(--tss-black);
  padding: 9px 10px;
  background: var(--tss-yellow);
  color: var(--tss-black);
}

.tss-account-access .label-sheet__grid span:nth-child(1){
  grid-area: main;
  width: 82%;
  transform: rotate(-1deg);
}

.tss-account-access .label-sheet__grid span:nth-child(2){
  grid-area: work;
  background: #fffdf3;
  transform: rotate(1deg);
}

.tss-account-access .label-sheet__grid span:nth-child(3){
  grid-area: old;
  background: var(--tss-teal);
  color: #fffdf3;
  transform: rotate(-2deg);
}

.tss-account-access .label-phone{
  top: 10%;
  right: 5%;
  width: 27%;
  border-radius: 9px;
  background: var(--tss-teal);
  box-shadow: 5px 6px 0 var(--tss-yellow);
  transform: rotate(5deg);
}

.tss-account-access .label-phone i{
  background: #fffdf3;
}

.tss-account-access .peeled-label{
  top: 47%;
  right: -7%;
  border: 3px solid var(--tss-black);
  padding: 10px 12px;
  box-shadow: 5px 5px 0 var(--tss-black);
  transform: rotate(9deg);
}

.tss-account-access .label-sheet__note{
  position: absolute;
  right: 5%;
  bottom: 3%;
  color: #fffdf3;
  font-size: clamp(8px, 0.74vw, 11px);
  font-weight: 750;
}

.tss-account-access .art-variant--next-trip-packet::before{
  top: 5%;
  right: 2%;
  bottom: 4%;
  left: 8%;
  background: var(--tss-black);
  transform: rotate(3deg);
}

.tss-account-access .art-variant--next-trip-packet::after{
  top: 1%;
  left: 1%;
  width: 38%;
  height: 34%;
  border: 3px solid var(--tss-black);
  background: var(--tss-teal);
  transform: rotate(-5deg);
}

.tss-account-access .trip-packet{
  z-index: 1;
  inset: 5% 3% 2% 5%;
  transform: rotate(-1.5deg);
}

.tss-account-access .trip-packet__tabs{
  top: 0;
  right: 4%;
  left: 14%;
  grid-template-columns: 1.2fr 0.8fr 1.05fr 0.7fr;
  gap: 4px;
}

.tss-account-access .trip-packet__tabs span{
  padding: 8px 3px 13px;
  background: #fffdf3;
}

.tss-account-access .trip-packet__tabs span:nth-child(2){
  background: var(--tss-teal);
  color: #fffdf3;
}

.tss-account-access .trip-packet__tabs span:nth-child(3),
.tss-account-access .trip-packet__tabs span:nth-child(4){
  background: var(--tss-yellow);
}

.tss-account-access .trip-packet__sheet{
  top: 7%;
  right: 7%;
  bottom: 17%;
  left: 8%;
  box-shadow: 7px 8px 0 var(--tss-black);
}

.tss-account-access .trip-packet__envelope{
  right: 0;
  bottom: 1%;
  left: 0;
  height: 47%;
  border-radius: 3px;
  background: var(--tss-yellow);
  box-shadow: 7px 8px 0 var(--tss-black);
}

.tss-account-access .trip-packet__envelope::before{
  top: -45%;
  right: -8%;
  bottom: auto;
  left: auto;
  width: 38%;
  height: 185%;
  border: 0;
  background: var(--tss-black);
  transform: rotate(18deg);
}

.tss-account-access .trip-packet__envelope::after{
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  width: auto;
  height: 8px;
  border: 0;
  background: var(--tss-black);
  transform: none;
}

.tss-account-access .packet-address{
  top: 18%;
  left: 5%;
  border: 0;
  padding: 7px 9px;
  background: var(--tss-black);
  color: #fffdf3;
  font-size: clamp(9px, 0.88vw, 13px);
  letter-spacing: 0.04em;
}

.tss-account-access .packet-format{
  position: absolute;
  bottom: 17%;
  left: 5%;
  z-index: 4;
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 900;
  letter-spacing: 0.05em;
}

.tss-account-access .paper-seal--packet{
  top: 12%;
  right: 7%;
  border-color: var(--tss-teal);
  color: var(--tss-teal);
}

.tss-account-access .trip-packet__note{
  position: absolute;
  right: 3%;
  bottom: 3%;
  z-index: 5;
  padding: 6px 9px;
  background: var(--tss-black);
  color: #fffdf3;
  font-size: clamp(8px, 0.74vw, 11px);
  font-weight: 750;
}

.tss-account-access .art-variant--pigeonholes::before{
  top: 5%;
  right: 0;
  bottom: 4%;
  left: 8%;
  border: 3px solid var(--tss-black);
  background: var(--tss-yellow);
  transform: rotate(3deg);
}

.tss-account-access .art-variant--pigeonholes::after{
  top: 15%;
  bottom: 0;
  left: 1%;
  width: 21%;
  background: var(--tss-teal);
  transform: rotate(-4deg);
}

.tss-account-access .pigeonholes{
  z-index: 1;
  inset: 5% 4% 2% 6%;
}

.tss-account-access .pigeonholes__sign{
  top: 0;
  right: 11%;
  left: 3%;
  padding: 10px 14px;
  background: var(--tss-black);
  box-shadow: 5px 5px 0 var(--tss-yellow);
  color: #fffdf3;
  font-size: clamp(9px, 0.9vw, 14px);
  letter-spacing: 0.05em;
  text-align: left;
  transform: rotate(-1deg);
}

.tss-account-access .pigeonholes__case{
  top: 13%;
  right: 1%;
  bottom: 5%;
  left: 1%;
  grid-template-columns: 1.12fr 0.88fr;
  grid-template-rows: 0.82fr 1.18fr;
  gap: 4px;
  padding: 4px;
  border: 4px solid var(--tss-black);
  border-radius: 3px;
  background: var(--tss-black);
  box-shadow: 8px 9px 0 var(--tss-black);
}

.tss-account-access .pigeonhole{
  border: 0;
  background: #fffdf3;
}

.tss-account-access .pigeonhole--orders{
  grid-row: 1 / 3;
  background: #fffdf3;
}

.tss-account-access .pigeonhole--setup{
  background: var(--tss-yellow);
}

.tss-account-access .pigeonhole--records{
  background: var(--tss-teal);
}

.tss-account-access .pigeonhole__label{
  top: 10px;
  left: 10px;
  border: 0;
  padding: 6px 8px;
  background: var(--tss-black);
  color: #fffdf3;
  font-size: clamp(7px, 0.72vw, 11px);
  letter-spacing: 0.04em;
}

.tss-account-access .pigeonhole__paper{
  right: 8%;
  bottom: -5%;
  left: 9%;
  height: 72%;
  padding: 40px 12px 10px;
  box-shadow: 5px 5px 0 var(--tss-black);
}

.tss-account-access .pigeonhole--orders .pigeonhole__paper{
  right: 13%;
  bottom: 8%;
  left: 12%;
  height: 69%;
  box-shadow: 5px 5px 0 var(--tss-yellow), 10px 10px 0 var(--tss-black);
}

.tss-account-access .pigeonhole--setup .pigeonhole__paper{
  right: 10%;
  bottom: -18%;
  left: 16%;
  height: 84%;
  transform: rotate(3deg);
}

.tss-account-access .pigeonhole--records .pigeonhole__paper{
  right: 15%;
  bottom: -8%;
  left: 8%;
  height: 72%;
  transform: rotate(-2deg);
}

.tss-account-access .pigeonholes__note{
  position: absolute;
  right: 2%;
  bottom: 0;
  z-index: 8;
  border: 3px solid var(--tss-black);
  padding: 7px 11px;
  background: var(--tss-black);
  color: #fffdf3;
  font-size: clamp(8px, 0.74vw, 11px);
  font-weight: 750;
}

/* Artwork round four: bright, literal objects with a plain line and cheeky translation. */
.tss-account-access .art-voice{
  position: absolute;
  z-index: 12;
  width: 43%;
  border: 3px solid var(--tss-black);
  border-left-width: 8px;
  border-radius: 5px;
  padding: clamp(12px, 1.25vw, 18px);
  background: #fffdf3;
  box-shadow: 5px 5px 0 var(--tss-black);
}

.tss-account-access .art-voice strong,
.tss-account-access .art-voice span{
  display: block;
}

.tss-account-access .art-voice strong{
  max-width: 15ch;
  font-size: clamp(18px, 1.72vw, 27px);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.tss-account-access .art-voice span{
  max-width: 33ch;
  margin-top: 8px;
  color: var(--tss-ink-soft);
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 700;
  line-height: 1.28;
}

.tss-account-access .art-variant--account-drawer::before{
  top: 6%;
  right: 1%;
  bottom: 7%;
  left: 7%;
  border: 3px solid var(--tss-black);
  background: var(--tss-sky);
  transform: rotate(2deg);
}

.tss-account-access .art-variant--account-drawer::after{
  top: 0;
  left: 0;
  width: 34%;
  height: 29%;
  background: var(--tss-yellow);
  transform: rotate(-4deg);
}

.tss-account-access .account-drawer{
  position: absolute;
  z-index: 1;
  inset: 0;
}

.tss-account-access .account-drawer__cabinet{
  position: absolute;
  top: 7%;
  bottom: 8%;
  left: 5%;
  width: 57%;
  border: 3px solid var(--tss-black);
  border-radius: 7px 7px 4px 4px;
  background: var(--tss-yellow);
  box-shadow: 7px 7px 0 var(--tss-black);
  transform: rotate(-1.5deg);
}

.tss-account-access .account-drawer__top{
  position: absolute;
  top: -5%;
  right: -4%;
  left: -4%;
  height: 10%;
  border: 3px solid var(--tss-black);
  background: #fffdf3;
  box-shadow: 3px 3px 0 var(--tss-black);
}

.tss-account-access .account-drawer__tab{
  position: absolute;
  z-index: 3;
  border: 2px solid var(--tss-black);
  padding: 5px 8px;
  background: #fffdf3;
  box-shadow: 2px 2px 0 var(--tss-black);
  font-size: clamp(8px, 0.75vw, 12px);
  font-weight: 900;
  line-height: 1;
}

.tss-account-access .account-drawer__tab--orders{
  top: 4%;
  left: 6%;
}

.tss-account-access .account-drawer__tab--setup{
  top: 29%;
  right: 7%;
  background: var(--tss-sky);
}

.tss-account-access .account-drawer__tab--phones{
  top: 55%;
  left: 9%;
  background: var(--tss-sage);
}

.tss-account-access .account-drawer__tray{
  position: absolute;
  right: 7%;
  left: 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20%;
  border: 3px solid var(--tss-black);
  padding: 0 8%;
  background: #fffdf3;
  box-shadow: 3px 4px 0 rgba(16, 16, 16, 0.22);
  font-size: clamp(7px, 0.68vw, 11px);
  font-weight: 950;
  letter-spacing: 0.035em;
}

.tss-account-access .account-drawer__tray i{
  width: 24%;
  height: 30%;
  border: 3px solid var(--tss-black);
  border-radius: 999px;
  background: transparent;
}

.tss-account-access .account-drawer__tray--top{
  top: 12%;
}

.tss-account-access .account-drawer__tray--middle{
  top: 38%;
  background: var(--tss-sky);
}

.tss-account-access .account-drawer__tray--bottom{
  top: 64%;
  background: var(--tss-sage);
}

.tss-account-access .art-voice--drawer{
  right: 1%;
  bottom: 12%;
  border-left-color: var(--tss-teal);
  transform: rotate(1.5deg);
}

.tss-account-access .art-variant--setup-email::before{
  top: 4%;
  right: 2%;
  bottom: 6%;
  left: 8%;
  border: 3px solid var(--tss-black);
  background: var(--tss-sky);
  transform: rotate(2.5deg);
}

.tss-account-access .art-variant--setup-email::after{
  right: 3%;
  bottom: 2%;
  width: 37%;
  height: 34%;
  background: var(--tss-yellow);
  transform: rotate(4deg);
}

.tss-account-access .setup-email-art{
  position: absolute;
  z-index: 1;
  inset: 0;
}

.tss-account-access .setup-email-art__envelope{
  position: absolute;
  top: 20%;
  bottom: 9%;
  left: 4%;
  width: 59%;
  border: 3px solid var(--tss-black);
  border-radius: 5px;
  background: var(--tss-yellow);
  box-shadow: 7px 7px 0 var(--tss-black);
  transform: rotate(-2deg);
}

.tss-account-access .setup-email-art__flap{
  position: absolute;
  inset: 0;
  background: var(--tss-paper-yellow);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 17%, 50% 70%, 0 17%);
}

.tss-account-access .setup-email-art__message{
  position: absolute;
  right: 9%;
  bottom: 18%;
  left: 9%;
  display: grid;
  grid-template-columns: 1fr 29%;
  gap: 7px 10px;
  align-content: start;
  min-height: 112%;
  border: 3px solid var(--tss-black);
  padding: 9% 8%;
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.2);
}

.tss-account-access .setup-email-art__label{
  grid-column: 1 / -1;
  width: max-content;
  border: 2px solid var(--tss-black);
  padding: 5px 8px;
  background: var(--tss-yellow);
  font-size: clamp(7px, 0.7vw, 11px);
  font-weight: 950;
}

.tss-account-access .setup-email-art__message strong{
  align-self: center;
  max-width: 13ch;
  font-size: clamp(15px, 1.55vw, 25px);
  line-height: 1.02;
}

.tss-account-access .setup-email-art__qr{
  grid-row: span 2;
  aspect-ratio: 1;
  border: 3px solid var(--tss-black);
  background: repeating-conic-gradient(var(--tss-black) 0 25%, #fffdf3 0 50%) 50% / 9px 9px;
  box-shadow: inset 0 0 0 5px #fffdf3;
}

.tss-account-access .setup-email-art__action,
.tss-account-access .setup-email-art__manual{
  grid-column: 1;
  border: 2px solid var(--tss-black);
  padding: 5px 7px;
  font-size: clamp(7px, 0.7vw, 11px);
  font-weight: 850;
}

.tss-account-access .setup-email-art__action{
  background: var(--tss-yellow);
}

.tss-account-access .setup-email-art__manual{
  background: var(--tss-sky);
}

.tss-account-access .art-voice--setup-email{
  top: 10%;
  right: 2%;
  border-left-color: var(--tss-yellow);
  transform: rotate(1.5deg);
}

.tss-account-access .art-variant--named-phones::before{
  top: 5%;
  right: 4%;
  bottom: 5%;
  left: 3%;
  border: 3px solid var(--tss-black);
  background: var(--tss-paper-yellow);
  transform: rotate(-2deg);
}

.tss-account-access .art-variant--named-phones::after{
  top: 0;
  right: 0;
  width: 43%;
  height: 53%;
  background: var(--tss-sky);
  transform: rotate(4deg);
}

.tss-account-access .named-phones-art{
  position: absolute;
  z-index: 1;
  inset: 0;
}

.tss-account-access .named-phones-art__phones{
  position: absolute;
  top: 8%;
  right: 1%;
  bottom: 8%;
  display: flex;
  gap: 3%;
  align-items: flex-end;
  width: 67%;
}

.tss-account-access .named-phone{
  position: relative;
  display: grid;
  place-items: center;
  width: 31.333%;
  height: 74%;
  border: 3px solid var(--tss-black);
  border-radius: 12px;
  background: #fffdf3;
  box-shadow: 5px 6px 0 var(--tss-black);
}

.tss-account-access .named-phone::before{
  content: "";
  position: absolute;
  top: 5%;
  left: 50%;
  width: 34%;
  height: 4px;
  border-radius: 99px;
  background: var(--tss-black);
  transform: translateX(-50%);
}

.tss-account-access .named-phone span{
  border: 2px solid var(--tss-black);
  padding: 7px 6px;
  background: var(--tss-yellow);
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: 950;
}

.tss-account-access .named-phone b{
  position: absolute;
  right: -8%;
  bottom: 8%;
  left: -8%;
  border: 2px solid var(--tss-black);
  padding: 6px 4px;
  background: var(--tss-yellow);
  box-shadow: 2px 2px 0 var(--tss-black);
  font-size: clamp(7px, 0.7vw, 10px);
  text-align: center;
  transform: rotate(-2deg);
}

.tss-account-access .named-phone--main{
  height: 79%;
  background: var(--tss-sky);
  transform: rotate(-4deg);
}

.tss-account-access .named-phone--work{
  height: 87%;
  transform: rotate(2deg);
}

.tss-account-access .named-phone--work b{
  background: var(--tss-sage);
  transform: rotate(2deg);
}

.tss-account-access .named-phone--faithful{
  height: 70%;
  background: var(--tss-paper-yellow);
  transform: rotate(5deg);
}

.tss-account-access .art-voice--named-phones{
  bottom: 8%;
  left: 1%;
  border-left-color: var(--tss-teal);
  transform: rotate(-1deg);
}

.tss-account-access .art-variant--order-folder::before{
  top: 3%;
  right: 5%;
  bottom: 6%;
  left: 2%;
  border: 3px solid var(--tss-black);
  background: var(--tss-sky);
  transform: rotate(-2.5deg);
}

.tss-account-access .art-variant--order-folder::after{
  right: 0;
  bottom: 0;
  width: 41%;
  height: 38%;
  background: var(--tss-yellow);
  transform: rotate(3deg);
}

.tss-account-access .order-folder-art{
  position: absolute;
  z-index: 1;
  inset: 0;
}

.tss-account-access .order-folder-art__folder{
  position: absolute;
  top: 13%;
  bottom: 8%;
  left: 3%;
  width: 61%;
}

.tss-account-access .order-folder-art__tab{
  position: absolute;
  top: 0;
  left: 5%;
  z-index: 5;
  border: 3px solid var(--tss-black);
  border-bottom: 0;
  padding: 7px 17px 9px;
  background: var(--tss-yellow);
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: 950;
}

.tss-account-access .order-folder-art__sheet{
  position: absolute;
  bottom: 22%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 68%;
  border: 3px solid var(--tss-black);
  padding: 9%;
  box-shadow: 4px 4px 0 var(--tss-black);
}

.tss-account-access .order-folder-art__sheet b{
  font-size: clamp(9px, 0.9vw, 14px);
}

.tss-account-access .order-folder-art__sheet span{
  border-bottom: 1px solid rgba(16, 16, 16, 0.3);
  padding-bottom: 5px;
  font-size: clamp(7px, 0.68vw, 11px);
  font-weight: 750;
}

.tss-account-access .order-folder-art__sheet--order{
  right: 26%;
  left: 5%;
  transform: rotate(-3deg);
}

.tss-account-access .order-folder-art__sheet--receipt{
  right: 3%;
  left: 47%;
  height: 57%;
  background: var(--tss-paper-yellow);
  transform: rotate(4deg);
}

.tss-account-access .order-folder-art__front{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 45%;
  border: 3px solid var(--tss-black);
  border-radius: 4px 4px 8px 8px;
  padding: 11% 7%;
  background: var(--tss-yellow);
  box-shadow: 6px 7px 0 var(--tss-black);
  font-size: clamp(9px, 0.88vw, 14px);
  font-weight: 950;
  letter-spacing: 0.03em;
}

.tss-account-access .art-voice--order-folder{
  top: 9%;
  right: 1%;
  border-left-color: var(--tss-yellow);
  transform: rotate(1deg);
}

.tss-account-access .art-variant--trip-checklist::before{
  top: 4%;
  right: 2%;
  bottom: 4%;
  left: 6%;
  border: 3px solid var(--tss-black);
  background: var(--tss-paper-yellow);
  transform: rotate(2deg);
}

.tss-account-access .art-variant--trip-checklist::after{
  top: 0;
  left: 0;
  width: 35%;
  height: 38%;
  background: var(--tss-sky);
  transform: rotate(-4deg);
}

.tss-account-access .trip-checklist-art{
  position: absolute;
  z-index: 1;
  inset: 0;
}

.tss-account-access .trip-checklist-art__sheet{
  position: absolute;
  top: 5%;
  right: 4%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  gap: 5%;
  width: 49%;
  border: 3px solid var(--tss-black);
  padding: 10% 7% 7%;
  box-shadow: 7px 7px 0 var(--tss-black);
  transform: rotate(2deg);
}

.tss-account-access .trip-checklist-art__clip{
  position: absolute;
  top: -5%;
  left: 50%;
  width: 38%;
  height: 10%;
  border: 3px solid var(--tss-black);
  background: var(--tss-yellow);
  transform: translateX(-50%);
}

.tss-account-access .trip-checklist-art__sheet > strong{
  font-size: clamp(14px, 1.5vw, 23px);
  letter-spacing: 0.04em;
}

.tss-account-access .trip-checklist-art__row{
  display: flex;
  gap: 8%;
  align-items: center;
  border-bottom: 2px solid rgba(16, 16, 16, 0.23);
  padding-bottom: 4%;
  font-size: clamp(9px, 0.88vw, 14px);
  font-weight: 850;
}

.tss-account-access .trip-checklist-art__row i{
  display: grid;
  place-items: center;
  width: 22px;
  aspect-ratio: 1;
  border: 2px solid var(--tss-black);
  background: var(--tss-yellow);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.tss-account-access .trip-checklist-art__passport{
  position: relative;
  margin-top: auto;
  border: 3px solid var(--tss-black);
  padding: 7% 9%;
  background: var(--tss-yellow);
  box-shadow: 3px 3px 0 var(--tss-black);
  font-size: clamp(8px, 0.78vw, 12px);
  font-weight: 950;
}

.tss-account-access .trip-checklist-art__passport b{
  position: absolute;
  top: 50%;
  right: 9%;
  width: 17%;
  border-top: 3px solid var(--tss-black);
  transform: rotate(-12deg);
}

.tss-account-access .art-voice--trip-checklist{
  bottom: 10%;
  left: 1%;
  border-left-color: var(--tss-yellow);
  transform: rotate(-1deg);
}

.tss-account-access .art-variant--credit-slip::before{
  top: 5%;
  right: 4%;
  bottom: 4%;
  left: 3%;
  border: 3px solid var(--tss-black);
  background: var(--tss-sky);
  transform: rotate(-2deg);
}

.tss-account-access .art-variant--credit-slip::after{
  top: 0;
  left: 0;
  width: 39%;
  height: 32%;
  background: var(--tss-yellow);
  transform: rotate(3deg);
}

.tss-account-access .credit-slip-art{
  position: absolute;
  z-index: 1;
  inset: 0;
}

.tss-account-access .credit-slip-art__ledger{
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 4%;
  display: flex;
  flex-direction: column;
  gap: 8%;
  width: 53%;
  border: 3px solid var(--tss-black);
  padding: 10% 8%;
  box-shadow: 7px 7px 0 var(--tss-black);
  transform: rotate(-3deg);
}

.tss-account-access .credit-slip-art__ledger span{
  font-size: clamp(7px, 0.68vw, 10px);
  font-weight: 900;
  letter-spacing: 0.07em;
}

.tss-account-access .credit-slip-art__ledger strong{
  max-width: 9ch;
  font-size: clamp(16px, 1.65vw, 26px);
  line-height: 0.98;
}

.tss-account-access .credit-slip-art__ledger i{
  display: block;
  border-bottom: 2px solid rgba(16, 16, 16, 0.25);
}

.tss-account-access .credit-slip-art__ticket{
  position: absolute;
  top: 31%;
  left: 13%;
  z-index: 5;
  display: grid;
  align-content: center;
  width: 52%;
  height: 39%;
  border: 3px solid var(--tss-black);
  padding: 7%;
  background: var(--tss-yellow);
  box-shadow: 5px 5px 0 var(--tss-black);
  transform: rotate(3deg);
}

.tss-account-access .credit-slip-art__ticket::before,
.tss-account-access .credit-slip-art__ticket::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 24px;
  border: 3px solid var(--tss-black);
  background: var(--tss-sky);
  transform: translateY(-50%);
}

.tss-account-access .credit-slip-art__ticket::before{
  left: -8px;
  border-left: 0;
  border-radius: 0 13px 13px 0;
}

.tss-account-access .credit-slip-art__ticket::after{
  right: -8px;
  border-right: 0;
  border-radius: 13px 0 0 13px;
}

.tss-account-access .credit-slip-art__ticket span,
.tss-account-access .credit-slip-art__ticket strong,
.tss-account-access .credit-slip-art__ticket i{
  display: block;
}

.tss-account-access .credit-slip-art__ticket span{
  font-size: clamp(7px, 0.7vw, 11px);
  font-weight: 950;
  letter-spacing: 0.06em;
}

.tss-account-access .credit-slip-art__ticket strong{
  margin-top: 5px;
  font-size: clamp(17px, 1.85vw, 29px);
  line-height: 1;
}

.tss-account-access .credit-slip-art__ticket i{
  margin-top: 9px;
  font-size: clamp(7px, 0.68vw, 10px);
  font-style: normal;
  font-weight: 750;
}

.tss-account-access .art-voice--credit-slip{
  right: 1%;
  bottom: 10%;
  border-left-color: var(--tss-yellow);
  transform: rotate(1deg);
}

.tss-account-access .account-story__copy{
  position: relative;
  z-index: 2;
  width: min(100%, 650px);
  padding-top: 24px;
}

.tss-account-access .account-story__copy h2{
  max-width: 18ch;
  margin: 0 0 8px;
  font-size: clamp(28px, 2.65vw, 48px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}

.tss-account-access .account-story__copy p{
  max-width: 52ch;
  margin: 0;
  color: var(--tss-ink-soft);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.45;
}

.tss-account-access .passport-access-docket{
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(100%, 520px);
  border: 2px solid var(--tss-black);
  border-radius: 14px;
  padding: clamp(24px, 3.4vw, 44px);
  background: #fffdf5;
  box-shadow: 6px 6px 0 var(--tss-black);
  transform: rotate(-1deg);
}

.tss-account-access .passport-access-docket::after{
  content: "";
  position: absolute;
  top: 22px;
  right: -2px;
  width: 22px;
  height: 38px;
  border: 2px solid var(--tss-black);
  border-right: 0;
  border-radius: 20px 0 0 20px;
  background: var(--tss-paper-yellow);
}

.tss-account-access .passport-access-docket__eyebrow{
  margin: 0 0 26px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tss-account-access .passport-access-docket__stamp{
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border: 2px solid var(--tss-black);
  border-radius: 50%;
  background: var(--tss-yellow);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.tss-account-access .passport-access-docket > strong{
  display: block;
  margin-bottom: 24px;
  font-size: clamp(32px, 3.4vw, 54px);
  font-weight: 950;
  letter-spacing: -.05em;
  line-height: .94;
}

.tss-account-access .passport-access-docket ul{
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tss-account-access .passport-access-docket li{
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  border-top: 1px dashed rgba(16,16,16,.45);
  font-size: 14px;
  line-height: 1.25;
}

.tss-account-access .passport-access-docket li b{
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--tss-black);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}


.tss-account-access .account-plane{
  display: grid;
  place-items: center;
  min-width: 0;
  border-left: 2px solid var(--tss-black);
  padding: clamp(30px, 4.3vw, 76px);
  background: #fff;
}

.tss-account-access .account-form-wrap{
  width: min(100%, 430px);
}

.tss-account-access .auth-view[hidden]{
  display: none;
}

.tss-account-access .auth-heading{
  margin-bottom: 28px;
}

.tss-account-access .auth-heading h1{
  margin: 0 0 10px;
  font-size: clamp(32px, 2.65vw, 46px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.tss-account-access .auth-heading h1:focus{
  outline: none;
}

.tss-account-access .auth-heading p{
  max-width: 42ch;
  margin: 0;
  color: #625d54;
  font-size: 15px;
  line-height: 1.45;
}

.tss-account-access .google-button{
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid #747775;
  border-radius: 4px;
  padding: 0 14px;
  background: #fff;
  color: #1f1f1f;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.tss-account-access .google-button:hover{
  background: #f8faff;
}

.tss-account-access .google-button:active{
  transform: translate(1px, 1px);
}

.tss-account-access .google-button__icon{
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.tss-account-access .google-button__icon svg{
  display: block;
}

.tss-account-access .auth-divider{
  display: grid;
  grid-template-columns: minmax(18px, 1fr) auto minmax(18px, 1fr);
  gap: 12px;
  align-items: center;
  margin: 24px 0;
  color: #746f66;
  font-size: 12px;
  line-height: 1;
}

.tss-account-access .auth-divider::before,
.tss-account-access .auth-divider::after{
  content: "";
  height: 1px;
  background: #ddd9d1;
}

.tss-account-access .auth-form{
  display: grid;
  gap: 18px;
}

.tss-account-access .field{
  display: grid;
  gap: 7px;
}

.tss-account-access .field label{
  color: var(--tss-black);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

.tss-account-access .field input{
  width: 100%;
  min-height: 48px;
  border: 1px solid #aaa69e;
  border-radius: 6px;
  padding: 11px 13px;
  background: #fff;
  color: var(--tss-black);
  font-size: 16px;
  outline: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.tss-account-access .field input::placeholder{
  color: #817c74;
  opacity: 1;
}

.tss-account-access .field input:focus{
  border-color: var(--tss-black);
  box-shadow: 0 0 0 3px rgba(0, 124, 120, 0.22);
}

.tss-account-access .field input[aria-invalid="true"]{
  border-color: var(--tss-danger);
  background: #fff8f5;
}

.tss-account-access .field__error{
  margin: 0;
  color: var(--tss-danger);
  font-size: 13px;
  font-weight: 650;
}

.tss-account-access .password-field{
  position: relative;
}

.tss-account-access .password-field input{
  padding-right: 72px;
}

.tss-account-access .password-field button{
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 58px;
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  background: var(--tss-paper-yellow);
  color: var(--tss-black);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tss-account-access .form-utility{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  color: #4b4740;
  font-size: 13px;
}

.tss-account-access .form-utility a,
.tss-account-access .privacy-note a,
.tss-account-access .account-help a{
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.tss-account-access .check-control{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.tss-account-access .check-control input{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tss-teal);
}

.tss-account-access .primary-button{
  width: 100%;
  min-height: 48px;
  border: 2px solid var(--tss-black);
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--tss-yellow);
  color: var(--tss-black);
  box-shadow: 3px 3px 0 var(--tss-black);
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.tss-account-access .primary-button:hover{
  background: #ffe36e;
}

.tss-account-access .primary-button:active{
  box-shadow: 1px 1px 0 var(--tss-black);
  transform: translate(1px, 1px);
}

.tss-account-access .primary-button:disabled{
  border-color: #837e75;
  background: #e8e3d6;
  box-shadow: none;
  color: #57534d;
  cursor: wait;
}

.tss-account-access .mode-switch{
  margin: 22px 0 0;
  color: #69645c;
  font-size: 14px;
  text-align: center;
}

.tss-account-access .mode-switch button{
  min-height: 44px;
  border: 0;
  padding: 4px;
  background: transparent;
  color: var(--tss-black);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tss-account-access .password-note,
.tss-account-access .privacy-note{
  margin: 0;
}

.tss-account-access .password-note{
  border-left: 4px solid var(--tss-yellow);
  padding: 8px 0 8px 12px;
  color: var(--tss-black);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.tss-account-access .privacy-note{
  color: #69645c;
  font-size: 12px;
  line-height: 1.45;
}

.tss-account-access .account-help{
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e2ded5;
  font-size: 13px;
  font-weight: 650;
}

.tss-account-access .mock-status{
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--tss-ink-soft);
  font-size: 12px;
  text-align: center;
}

.tss-account-access .mock-status:empty{
  display: none;
}

.tss-account-access .google-button:focus-visible,
.tss-account-access .primary-button:focus-visible,
.tss-account-access .mode-switch button:focus-visible,
.tss-account-access .password-field button:focus-visible,
.tss-account-access .campaign-bar button:focus-visible,
.tss-account-access .campaign-bar a:focus-visible,
.tss-account-access .site-header a:focus-visible,
.tss-account-access .site-header button:focus-visible,
.tss-account-access .account-help a:focus-visible,
.tss-account-access .site-footer a:focus-visible{
  outline: 3px solid var(--tss-teal);
  outline-offset: 3px;
}

.tss-account-access .site-footer{
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 118px;
  border-top: 2px solid var(--tss-black);
  padding: 28px max(24px, calc((100% - 1400px) / 2));
  background: var(--tss-sage);
}

.tss-account-access .site-footer > div{
  display: grid;
  gap: 2px;
}

.tss-account-access .site-footer strong{
  font-size: 18px;
  font-weight: 900;
}

.tss-account-access .site-footer span{
  color: var(--tss-ink-soft);
  font-size: 14px;
}

.tss-account-access .site-footer nav{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.tss-account-access .site-footer a{
  font-size: 14px;
  font-weight: 650;
}

@media (max-width: 1199px){
  .tss-account-access{
    --campaign-height: 36px;
    --header-height: 64px;
  }

  .tss-account-access .site-header__inner{
    grid-template-columns: 44px 1fr 44px;
    width: min(100% - 24px, 900px);
  }

  .tss-account-access .site-header__desktop-links{
    display: none;
  }

  .tss-account-access .mobile-icon{
    display: grid;
  }

  .tss-account-access .mobile-icon--menu{
    grid-column: 1;
  }

  .tss-account-access .mobile-icon--search{
    grid-column: 3;
  }

  .tss-account-access .site-logo{
    top: 2px;
    width: 96px;
    height: 84px;
  }

  .tss-account-access .account-shell{
    grid-template-columns: minmax(0, 51fr) minmax(410px, 49fr);
  }

  .tss-account-access .account-story{
    padding: clamp(24px, 3vw, 40px);
  }

  .tss-account-access .account-plane{
    padding: clamp(26px, 3.2vw, 42px);
  }

  .tss-account-access .art-caption{
    top: 3%;
  }
}

@media (max-width: 900px){
  .tss-account-access .account-main{
    display: block;
    padding: 22px;
  }

  .tss-account-access .account-shell{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .tss-account-access .account-plane{
    order: 1;
    min-height: 620px;
    border-bottom: 2px solid var(--tss-black);
    border-left: 0;
  }

  .tss-account-access .account-story{
    order: 2;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
    grid-template-rows: 1fr;
    gap: 24px;
    align-items: center;
    min-height: 350px;
  }

  .tss-account-access .account-story:has(.passport-access-docket){
    grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
    min-height: 330px;
  }

  .tss-account-access .passport-access-docket{
    justify-self: stretch;
    padding: 24px;
  }

  .tss-account-access .art-stage{
    min-height: 280px;
  }

  .tss-account-access .art-variant{
    width: min(100%, 600px);
  }

  .tss-account-access .account-story__copy{
    padding-top: 0;
  }

  .tss-account-access .account-story__copy h2{
    font-size: clamp(26px, 4.5vw, 38px);
  }
}

@media (min-width: 901px){
  .tss-account-access .account-main{
    height: calc(100svh - var(--campaign-height) - var(--header-height));
    min-height: 0;
  }

  .tss-account-access .account-shell{
    height: 100%;
    min-height: 0;
  }

  .tss-account-access .account-story,
.tss-account-access .account-plane,
.tss-account-access .art-stage{
    min-height: 0;
  }
}

@media (max-width: 600px){
  .tss-account-access .campaign-bar{
    grid-template-columns: minmax(0, 1fr);
  }

  .tss-account-access .campaign-bar p{
    padding: 0 40px 0 10px;
    font-size: 11px;
    text-align: left;
  }

  .tss-account-access .campaign-bar a,
.tss-account-access .campaign-bar__copy--desktop,
.tss-account-access .campaign-bar__arrow{
    display: none;
  }

  .tss-account-access .campaign-bar__copy--mobile{
    display: inline;
  }

  .tss-account-access .campaign-bar__close{
    width: 36px;
  }

  .tss-account-access .site-header__inner{
    width: calc(100% - 16px);
  }

  .tss-account-access .account-main{
    padding: 16px;
  }

  .tss-account-access .account-shell{
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .tss-account-access .account-plane{
    min-height: 0;
    border: 2px solid var(--tss-black);
    border-radius: 12px;
    padding: 26px 20px 22px;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .account-form-wrap{
    width: 100%;
  }

  .tss-account-access .auth-heading{
    margin-bottom: 22px;
  }

  .tss-account-access .auth-heading h1{
    max-width: 16ch;
    margin-bottom: 8px;
    font-size: clamp(29px, 8.3vw, 36px);
    line-height: 1.04;
  }

  .tss-account-access .auth-heading p{
    font-size: 14px;
  }

  .tss-account-access .auth-divider{
    margin: 20px 0;
  }

  .tss-account-access .auth-form{
    gap: 16px;
  }

  .tss-account-access .form-utility{
    align-items: flex-start;
  }

  .tss-account-access .mode-switch{
    margin-top: 18px;
  }

  .tss-account-access .account-help{
    gap: 14px;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 14px;
  }

  .tss-account-access .account-story{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    margin-top: 22px;
    border: 2px solid var(--tss-black);
    border-radius: 12px;
    padding: 22px 16px 26px;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .account-story:has(.passport-access-docket){
    grid-template-columns: minmax(0, 1fr);
  }

  .tss-account-access .passport-access-docket{
    width: 100%;
    padding: 22px;
    box-shadow: 3px 3px 0 var(--tss-black);
    transform: none;
  }

  .tss-account-access .account-story::before,
.tss-account-access .account-story__copy{
    display: none;
  }

  .tss-account-access .art-stage{
    min-height: 220px;
  }

  .tss-account-access .art-variant{
    width: min(100%, 420px);
    aspect-ratio: 1.62;
  }

  .tss-account-access .art-caption{
    top: 0;
    left: 0;
    padding: 6px 9px;
    font-size: 11px;
  }

  .tss-account-access .art-variant--account-drawer .account-drawer{
    width: min(88%, 390px);
    margin-top: 26px;
  }

  .tss-account-access .art-quip--drawer{
    right: 5%;
  }

  .tss-account-access .art-quip{
    padding: 5px 7px;
    font-size: 7px;
  }

  .tss-account-access .trip-file__front .trip-file__index{
    top: -12px;
    padding: 6px 8px;
    border-width: 2px;
    font-size: 9px;
  }

  .tss-account-access .trip-file__front .trip-file__label{
    margin-top: 11%;
    font-size: 7px;
  }

  .tss-account-access .trip-file__front .trip-file__note,
.tss-account-access .setup-board__note,
.tss-account-access .label-sheet__note,
.tss-account-access .trip-packet__note,
.tss-account-access .pigeonholes__note{
    font-size: 7px;
  }

  .tss-account-access .setup-board__note{
    border-width: 2px;
    padding: 5px 7px;
  }

  .tss-account-access .setup-docket__stamp{
    border-width: 2px;
    padding: 3px 4px;
    font-size: 6px;
  }

  .tss-account-access .label-sheet__grid{
    right: 34%;
    gap: 4px;
  }

  .tss-account-access .label-sheet__note{
    right: 4%;
  }

  .tss-account-access .packet-address{
    padding: 4px 6px;
    font-size: 7px;
  }

  .tss-account-access .packet-format{
    font-size: 6px;
  }

  .tss-account-access .trip-packet__note{
    padding: 4px 6px;
  }

  .tss-account-access .pigeonholes__sign{
    padding: 6px 8px;
    font-size: 8px;
  }

  .tss-account-access .pigeonholes__case{
    gap: 3px;
    padding: 3px;
    border-width: 3px;
  }

  .tss-account-access .pigeonholes__note{
    border-width: 2px;
    padding: 4px 6px;
  }

  .tss-account-access .paper-seal{
    width: 46px;
    height: 46px;
    border-width: 2px;
    font-size: 7px;
  }

  .tss-account-access .trip-file__sheet,
.tss-account-access .setup-docket,
.tss-account-access .label-sheet,
.tss-account-access .trip-packet__sheet{
    border-width: 2px;
  }

  .tss-account-access .trip-file__front,
.tss-account-access .setup-board,
.tss-account-access .setup-phone,
.tss-account-access .trip-packet__envelope,
.tss-account-access .pigeonholes__case{
    border-width: 2px;
  }

  .tss-account-access .trip-file__sheet{
    padding: 14px;
  }

  .tss-account-access .trip-file__sheet strong,
.tss-account-access .setup-docket strong,
.tss-account-access .label-sheet > strong,
.tss-account-access .trip-packet__sheet strong{
    font-size: 17px;
  }

  .tss-account-access .paper-row,
.tss-account-access .docket-step{
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .tss-account-access .setup-docket,
.tss-account-access .label-sheet,
.tss-account-access .trip-packet__sheet{
    padding: 16px;
  }

  .tss-account-access .label-sheet__grid{
    gap: 5px;
  }

  .tss-account-access .label-sheet__grid span,
.tss-account-access .peeled-label{
    padding: 5px 6px;
  }

  .tss-account-access .paper-seal--packet{
    width: 50px;
    height: 50px;
    font-size: 7px;
  }

  .tss-account-access .pigeonholes__sign{
    top: 4%;
    right: 2%;
    padding: 5px 8px;
  }

  .tss-account-access .pigeonhole__label{
    top: 7px;
    left: 7px;
    border-width: 1.5px;
    padding: 3px 5px;
  }

  .tss-account-access .pigeonhole__paper{
    padding: 26px 7px 7px;
  }

  .tss-account-access .site-footer{
    align-items: flex-start;
    flex-direction: column;
    padding: 26px 20px;
  }
}

@media (max-width: 600px){
  .tss-account-access .art-voice,
.tss-account-access .art-voice--drawer,
.tss-account-access .art-voice--setup-email,
.tss-account-access .art-voice--named-phones,
.tss-account-access .art-voice--order-folder,
.tss-account-access .art-voice--trip-checklist,
.tss-account-access .art-voice--credit-slip{
    top: auto;
    right: 3%;
    bottom: 1%;
    left: 3%;
    width: auto;
    border-width: 2px 2px 2px 5px;
    padding: 7px 9px;
    box-shadow: 3px 3px 0 var(--tss-black);
    transform: rotate(0);
  }

  .tss-account-access .art-voice strong{
    max-width: none;
    font-size: 13px;
    line-height: 1.02;
  }

  .tss-account-access .art-voice span{
    max-width: none;
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.2;
  }

  .tss-account-access .account-drawer__cabinet{
    top: 2%;
    bottom: 38%;
    left: 20%;
    width: 60%;
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .account-drawer__top,
.tss-account-access .account-drawer__tray{
    border-width: 2px;
  }

  .tss-account-access .account-drawer__tab{
    border-width: 1.5px;
    padding: 3px 5px;
    font-size: 6px;
  }

  .tss-account-access .account-drawer__tray{
    padding: 0 7%;
    font-size: 6px;
  }

  .tss-account-access .account-drawer__tray i{
    border-width: 2px;
  }

  .tss-account-access .setup-email-art__envelope{
    top: 4%;
    bottom: 37%;
    left: 22%;
    width: 56%;
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .setup-email-art__message{
    gap: 3px 5px;
    min-height: 110%;
    border-width: 2px;
    padding: 7% 7%;
  }

  .tss-account-access .setup-email-art__label,
.tss-account-access .setup-email-art__action,
.tss-account-access .setup-email-art__manual{
    border-width: 1.5px;
    padding: 3px 4px;
    font-size: 5.5px;
  }

  .tss-account-access .setup-email-art__message strong{
    font-size: 10px;
  }

  .tss-account-access .setup-email-art__qr{
    border-width: 2px;
    background-size: 6px 6px;
    box-shadow: inset 0 0 0 3px #fffdf3;
  }

  .tss-account-access .named-phones-art__phones{
    top: 2%;
    right: 9%;
    bottom: 37%;
    width: 82%;
  }

  .tss-account-access .named-phone{
    border-width: 2px;
    border-radius: 7px;
    box-shadow: 3px 4px 0 var(--tss-black);
  }

  .tss-account-access .named-phone span,
.tss-account-access .named-phone b{
    border-width: 1.5px;
    padding: 3px;
    font-size: 5.5px;
  }

  .tss-account-access .order-folder-art__folder{
    top: 2%;
    bottom: 37%;
    left: 20%;
    width: 60%;
  }

  .tss-account-access .order-folder-art__tab,
.tss-account-access .order-folder-art__sheet,
.tss-account-access .order-folder-art__front{
    border-width: 2px;
  }

  .tss-account-access .order-folder-art__tab{
    padding: 4px 9px 5px;
    font-size: 6px;
  }

  .tss-account-access .order-folder-art__sheet{
    gap: 4px;
    padding: 8%;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .order-folder-art__sheet b,
.tss-account-access .order-folder-art__sheet span,
.tss-account-access .order-folder-art__front{
    font-size: 6px;
  }

  .tss-account-access .order-folder-art__front{
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .trip-checklist-art__sheet{
    top: 1%;
    right: 26%;
    bottom: 36%;
    width: 48%;
    border-width: 2px;
    padding: 8% 6% 5%;
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .trip-checklist-art__clip,
.tss-account-access .trip-checklist-art__passport{
    border-width: 2px;
  }

  .tss-account-access .trip-checklist-art__sheet > strong{
    font-size: 9px;
  }

  .tss-account-access .trip-checklist-art__row,
.tss-account-access .trip-checklist-art__passport{
    font-size: 6px;
  }

  .tss-account-access .trip-checklist-art__row i{
    width: 13px;
    border-width: 1.5px;
    font-size: 8px;
  }

  .tss-account-access .credit-slip-art__ledger{
    top: 2%;
    bottom: 36%;
    left: 22%;
    width: 52%;
    border-width: 2px;
    padding: 8% 7%;
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .credit-slip-art__ledger span,
.tss-account-access .credit-slip-art__ledger strong{
    font-size: 7px;
  }

  .tss-account-access .credit-slip-art__ticket{
    top: 15%;
    left: 28%;
    width: 50%;
    height: 28%;
    border-width: 2px;
    padding: 5%;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .credit-slip-art__ticket::before,
.tss-account-access .credit-slip-art__ticket::after{
    width: 8px;
    height: 15px;
    border-width: 2px;
  }

  .tss-account-access .credit-slip-art__ticket::before{
    left: -5px;
  }

  .tss-account-access .credit-slip-art__ticket::after{
    right: -5px;
  }

  .tss-account-access .credit-slip-art__ticket span,
.tss-account-access .credit-slip-art__ticket i{
    font-size: 5px;
  }

  .tss-account-access .credit-slip-art__ticket strong{
    margin-top: 2px;
    font-size: 10px;
  }

  .tss-account-access .credit-slip-art__ticket i{
    margin-top: 3px;
  }
}

@media (max-width: 360px){
  .tss-account-access .account-main{
    padding: 12px;
  }

  .tss-account-access .account-plane{
    padding: 22px 16px 18px;
  }

  .tss-account-access .auth-heading h1{
    font-size: 29px;
  }

  .tss-account-access .auth-heading p{
    font-size: 13px;
  }

  .tss-account-access .google-button{
    grid-template-columns: 20px 1fr 20px;
    gap: 8px;
    padding: 0 10px;
    font-size: 13px;
  }

  .tss-account-access .auth-divider{
    gap: 8px;
    font-size: 11px;
  }

  .tss-account-access .field input{
    min-height: 46px;
  }

  .tss-account-access .form-utility{
    gap: 8px;
    font-size: 12px;
  }

  .tss-account-access .account-help{
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .tss-account-access .art-stage{
    min-height: 190px;
  }

  .tss-account-access .art-caption{
    font-size: 10px;
  }

  .tss-account-access .art-quip{
    display: none;
  }

  .tss-account-access .art-voice{
    padding: 6px 8px;
  }

  .tss-account-access .art-voice strong{
    font-size: 11.5px;
  }

  .tss-account-access .art-voice span{
    font-size: 8.5px;
  }

  .tss-account-access .trip-file__front .trip-file__note,
.tss-account-access .setup-board__note,
.tss-account-access .label-sheet__note,
.tss-account-access .trip-packet__note,
.tss-account-access .pigeonholes__note,
.tss-account-access .setup-docket__stamp,
.tss-account-access .packet-format{
    display: none;
  }
}

@media (max-height: 960px) and (min-width: 901px){
  .tss-account-access .account-main{
    padding: clamp(12px, 2vh, 20px) clamp(18px, 2.6vw, 34px);
  }

  .tss-account-access .account-story{
    padding: 20px clamp(22px, 3vw, 40px);
  }

  .tss-account-access .account-plane{
    padding: 16px clamp(24px, 3.2vw, 42px);
  }

  .tss-account-access .art-stage{
    min-height: 0;
  }

  .tss-account-access .art-variant{
    width: min(88%, 590px);
  }

  .tss-account-access .art-caption{
    top: 2%;
    padding: 7px 10px;
    font-size: 12px;
  }

  .tss-account-access .art-variant--account-drawer .account-drawer{
    width: min(82%, 560px);
    margin-top: 24px;
  }

  .tss-account-access .account-story__copy{
    padding-top: 10px;
  }

  .tss-account-access .account-story__copy h2{
    margin-bottom: 6px;
    font-size: clamp(26px, 2.35vw, 34px);
  }

  .tss-account-access .account-story__copy p{
    font-size: 13px;
  }

  .tss-account-access .auth-heading{
    margin-bottom: 14px;
  }

  .tss-account-access .auth-heading h1{
    margin-bottom: 7px;
    font-size: clamp(30px, 2.4vw, 40px);
  }

  .tss-account-access .auth-heading p{
    font-size: 14px;
  }

  .tss-account-access .google-button{
    min-height: 44px;
  }

  .tss-account-access .auth-divider{
    margin: 14px 0;
  }

  .tss-account-access .auth-form{
    gap: 10px;
  }

  .tss-account-access .field{
    gap: 5px;
  }

  .tss-account-access .field input{
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .tss-account-access .form-utility{
    min-height: 26px;
  }

  .tss-account-access .primary-button{
    min-height: 44px;
  }

  .tss-account-access .mode-switch{
    margin-top: 8px;
  }

  .tss-account-access .mode-switch button{
    min-height: 36px;
  }

  .tss-account-access .account-help{
    margin-top: 6px;
    padding-top: 10px;
  }

  .tss-account-access .mock-status{
    min-height: 0;
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce){
  .tss-account-access{
    scroll-behavior: auto;
  }

  .tss-account-access *,
.tss-account-access *::before,
.tss-account-access *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Artwork round five: bright-family correction for the five retained legacy concepts. */
.tss-account-access .account-story::before{
  width: 33%;
  height: 27%;
  border: 0;
  background: var(--tss-sky);
  box-shadow: inset 0 -12px 0 var(--tss-yellow);
  clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
}

.tss-account-access .art-variant--trip-file::before,
.tss-account-access .art-variant--setup-docket::before,
.tss-account-access .art-variant--phone-labels::before,
.tss-account-access .art-variant--next-trip-packet::before,
.tss-account-access .art-variant--pigeonholes::before{
  border: 3px solid var(--tss-black);
}

.tss-account-access .art-variant--trip-file::before{
  inset: 5% 3% 6% 7%;
  background: var(--tss-sky);
  transform: rotate(2deg);
}

.tss-account-access .art-variant--trip-file::after{
  top: 0;
  left: 1%;
  width: 34%;
  height: 33%;
  background: var(--tss-yellow);
  transform: rotate(-4deg);
}

.tss-account-access .bright-trip-file,
.tss-account-access .bright-setup-card,
.tss-account-access .bright-phone-labels,
.tss-account-access .bright-trip-packet,
.tss-account-access .bright-pigeonholes{
  position: absolute;
  z-index: 1;
  inset: 0;
}

.tss-account-access .bright-trip-file__folder{
  position: absolute;
  top: 14%;
  bottom: 8%;
  left: 3%;
  width: 62%;
  transform: rotate(-2deg);
}

.tss-account-access .bright-trip-file__tab{
  position: absolute;
  top: 0;
  left: 7%;
  z-index: 5;
  border: 3px solid var(--tss-black);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  padding: 8px 18px 10px;
  background: var(--tss-yellow);
  font-size: clamp(8px, 0.8vw, 12px);
  font-weight: 950;
  letter-spacing: 0.035em;
}

.tss-account-access .bright-trip-file__sheets{
  position: absolute;
  top: 9%;
  right: 5%;
  bottom: 22%;
  left: 5%;
  display: flex;
  gap: 3%;
  align-items: flex-start;
  border: 3px solid var(--tss-black);
  padding: 8% 6%;
  background: #fffdf3;
  box-shadow: 5px 5px 0 var(--tss-black);
}

.tss-account-access .bright-trip-file__sheets span{
  flex: 1 1 0;
  border: 2px solid var(--tss-black);
  padding: 7px 4px 24%;
  background: var(--tss-paper-yellow);
  font-size: clamp(7px, 0.72vw, 11px);
  font-weight: 900;
  text-align: center;
}

.tss-account-access .bright-trip-file__sheets span:nth-child(2){
  margin-top: 7%;
  background: var(--tss-sky);
}

.tss-account-access .bright-trip-file__sheets span:nth-child(3){
  margin-top: 2%;
  background: var(--tss-sage);
}

.tss-account-access .bright-trip-file__front{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38%;
  border: 3px solid var(--tss-black);
  border-radius: 4px 4px 8px 8px;
  padding: 7% 8%;
  background: var(--tss-yellow);
  box-shadow: 6px 7px 0 var(--tss-black);
}

.tss-account-access .bright-trip-file__front strong{
  max-width: 13ch;
  font-size: clamp(12px, 1.25vw, 19px);
  line-height: 1.02;
}

.tss-account-access .bright-trip-file__handle{
  width: 25%;
  height: 28%;
  border: 3px solid var(--tss-black);
  border-radius: 999px;
  background: #fffdf3;
}

.tss-account-access .art-voice--trip-file{
  top: 11%;
  right: 1%;
  border-left-color: var(--tss-teal);
  transform: rotate(1.5deg);
}

.tss-account-access .art-variant--setup-docket::before{
  inset: 5% 2% 7% 8%;
  border-radius: 50%;
  background: var(--tss-yellow);
  transform: rotate(2deg);
}

.tss-account-access .art-variant--setup-docket::after{
  right: 1%;
  bottom: 3%;
  width: 37%;
  height: 35%;
  background: var(--tss-sky);
  transform: rotate(4deg);
}

.tss-account-access .bright-setup-card__board{
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 4%;
  width: 61%;
  border: 3px solid var(--tss-black);
  border-radius: 8px;
  background: var(--tss-yellow);
  box-shadow: 7px 7px 0 var(--tss-black);
  transform: rotate(-2deg);
}

.tss-account-access .bright-setup-card__clip{
  position: absolute;
  top: -4%;
  left: 26%;
  z-index: 5;
  width: 40%;
  height: 10%;
  border: 3px solid var(--tss-black);
  border-radius: 4px;
  background: var(--tss-sage);
  box-shadow: 3px 3px 0 var(--tss-black);
}

.tss-account-access .bright-setup-card__sheet{
  position: absolute;
  inset: 8% 8% 8% 7%;
  border: 3px solid var(--tss-black);
  padding: 11% 10%;
}

.tss-account-access .bright-setup-card__sheet > strong{
  display: block;
  font-size: clamp(20px, 2.2vw, 34px);
  letter-spacing: -0.04em;
  line-height: 1;
}

.tss-account-access .bright-setup-card__steps{
  display: grid;
  gap: 8%;
  margin-top: 10%;
}

.tss-account-access .bright-setup-card__steps span{
  display: flex;
  gap: 7%;
  align-items: center;
}

.tss-account-access .bright-setup-card__steps i{
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(23px, 2.4vw, 34px);
  aspect-ratio: 1;
  border: 2px solid var(--tss-black);
  border-radius: 50%;
  background: var(--tss-yellow);
  font-size: clamp(8px, 0.78vw, 12px);
  font-style: normal;
  font-weight: 950;
}

.tss-account-access .bright-setup-card__steps b{
  font-size: clamp(10px, 1.02vw, 16px);
  line-height: 1.05;
}

.tss-account-access .bright-setup-card__phone{
  position: absolute;
  right: -9%;
  bottom: 6%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 27%;
  height: 46%;
  border: 3px solid var(--tss-black);
  border-radius: 12px;
  background: var(--tss-sky);
  box-shadow: 5px 5px 0 var(--tss-black);
  transform: rotate(5deg);
}

.tss-account-access .bright-setup-card__phone span{
  position: absolute;
  top: 7%;
  left: 50%;
  width: 34%;
  height: 4px;
  border-radius: 99px;
  background: var(--tss-black);
  transform: translateX(-50%);
}

.tss-account-access .bright-setup-card__phone b{
  border: 2px solid var(--tss-black);
  padding: 7px 8px;
  background: var(--tss-yellow);
  font-size: clamp(8px, 0.78vw, 12px);
}

.tss-account-access .art-voice--setup-docket{
  top: 9%;
  right: 2%;
  border-left-color: var(--tss-yellow);
  transform: rotate(1.5deg);
}

.tss-account-access .art-variant--phone-labels::before{
  inset: 5% 4% 5% 3%;
  background: var(--tss-paper-yellow);
  transform: rotate(-2deg);
}

.tss-account-access .art-variant--phone-labels::after{
  top: 0;
  right: 0;
  width: 43%;
  height: 50%;
  background: var(--tss-sky);
  transform: rotate(4deg);
}

.tss-account-access .bright-phone-labels__phone{
  position: absolute;
  top: 8%;
  right: 8%;
  width: 27%;
  height: 58%;
  border: 3px solid var(--tss-black);
  border-radius: 13px;
  background: var(--tss-sky);
  box-shadow: 5px 6px 0 var(--tss-black);
  transform: rotate(5deg);
}

.tss-account-access .bright-phone-labels__phone > span{
  position: absolute;
  top: 6%;
  left: 50%;
  width: 35%;
  height: 4px;
  border-radius: 99px;
  background: var(--tss-black);
  transform: translateX(-50%);
}

.tss-account-access .bright-phone-labels__phone b{
  position: absolute;
  top: 39%;
  right: 14%;
  left: 14%;
  border: 2px solid var(--tss-black);
  padding: 8px 3px;
  background: var(--tss-yellow);
  font-size: clamp(8px, 0.8vw, 12px);
  text-align: center;
}

.tss-account-access .bright-phone-labels__maker{
  position: absolute;
  top: 13%;
  bottom: 13%;
  left: 5%;
  width: 57%;
  border: 3px solid var(--tss-black);
  border-radius: 16px 16px 8px 8px;
  padding: 9% 7%;
  background: var(--tss-yellow);
  box-shadow: 7px 7px 0 var(--tss-black);
  transform: rotate(-2deg);
}

.tss-account-access .bright-phone-labels__maker > strong{
  display: block;
  margin-left: 27%;
  font-size: clamp(9px, 0.92vw, 14px);
  letter-spacing: 0.035em;
}

.tss-account-access .bright-phone-labels__dial{
  position: absolute;
  top: 10%;
  left: 8%;
  width: 17%;
  aspect-ratio: 1;
  border: 3px solid var(--tss-black);
  border-radius: 50%;
  background: var(--tss-sage);
  box-shadow: inset 0 0 0 5px #fffdf3;
}

.tss-account-access .bright-phone-labels__tape{
  position: absolute;
  right: -31%;
  bottom: 16%;
  left: 7%;
  display: flex;
  gap: 7px;
  align-items: center;
  border: 3px solid var(--tss-black);
  padding: 11px 10px;
  background: #fffdf3;
  box-shadow: 5px 5px 0 var(--tss-black);
  transform: rotate(2deg);
}

.tss-account-access .bright-phone-labels__tape span{
  flex: 0 0 auto;
  border: 2px solid var(--tss-black);
  padding: 7px 9px;
  background: var(--tss-yellow);
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 900;
}

.tss-account-access .bright-phone-labels__tape span:nth-child(2){
  background: var(--tss-sky);
}

.tss-account-access .bright-phone-labels__tape span:nth-child(3){
  background: var(--tss-sage);
}

.tss-account-access .art-voice--phone-labels{
  bottom: 5%;
  left: 1%;
  border-left-color: var(--tss-teal);
  transform: rotate(-1deg);
}

.tss-account-access .art-variant--next-trip-packet::before{
  inset: 5% 3% 5% 7%;
  background: var(--tss-sky);
  transform: rotate(2deg);
}

.tss-account-access .art-variant--next-trip-packet::after{
  top: 0;
  left: 0;
  width: 38%;
  height: 35%;
  background: var(--tss-yellow);
  transform: rotate(-4deg);
}

.tss-account-access .bright-trip-packet__sleeve{
  position: absolute;
  top: 9%;
  bottom: 8%;
  left: 4%;
  width: 60%;
  transform: rotate(-2deg);
}

.tss-account-access .bright-trip-packet__tabs{
  position: absolute;
  top: 0;
  right: 3%;
  left: 12%;
  z-index: 2;
  display: flex;
  gap: 5px;
}

.tss-account-access .bright-trip-packet__tabs span{
  flex: 1 1 0;
  border: 2px solid var(--tss-black);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  padding: 7px 4px 10px;
  background: var(--tss-yellow);
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 900;
  text-align: center;
}

.tss-account-access .bright-trip-packet__tabs span:nth-child(2){
  background: var(--tss-sky);
}

.tss-account-access .bright-trip-packet__tabs span:nth-child(3){
  background: var(--tss-sage);
}

.tss-account-access .bright-trip-packet__sheet{
  position: absolute;
  top: 8%;
  right: 5%;
  bottom: 17%;
  left: 6%;
  display: flex;
  flex-direction: column;
  gap: 8%;
  border: 3px solid var(--tss-black);
  padding: 12% 11%;
  box-shadow: 5px 5px 0 var(--tss-black);
}

.tss-account-access .bright-trip-packet__sheet strong{
  font-size: clamp(18px, 2vw, 30px);
  letter-spacing: -0.04em;
  line-height: 1;
}

.tss-account-access .bright-trip-packet__sheet span{
  border-bottom: 2px solid rgba(16, 16, 16, 0.22);
  padding-bottom: 5px;
  font-size: clamp(8px, 0.8vw, 12px);
  font-weight: 800;
}

.tss-account-access .bright-trip-packet__pocket{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 39%;
  border: 3px solid var(--tss-black);
  border-radius: 4px 4px 8px 8px;
  padding: 8%;
  background: var(--tss-yellow);
  box-shadow: 6px 7px 0 var(--tss-black);
}

.tss-account-access .bright-trip-packet__pocket strong{
  font-size: clamp(10px, 1.08vw, 16px);
  letter-spacing: 0.02em;
}

.tss-account-access .bright-trip-packet__pocket span{
  max-width: 12ch;
  font-size: clamp(7px, 0.7vw, 10px);
  font-weight: 800;
  line-height: 1.15;
  text-align: right;
}

.tss-account-access .art-voice--next-trip-packet{
  top: 10%;
  right: 2%;
  border-left-color: var(--tss-yellow);
  transform: rotate(1deg);
}

.tss-account-access .art-variant--pigeonholes::before{
  inset: 5% 4% 5% 3%;
  background: var(--tss-paper-yellow);
  transform: rotate(-2deg);
}

.tss-account-access .art-variant--pigeonholes::after{
  top: 0;
  right: 0;
  width: 42%;
  height: 49%;
  background: var(--tss-sky);
  transform: rotate(4deg);
}

.tss-account-access .bright-pigeonholes__sorter{
  position: absolute;
  top: 8%;
  right: 4%;
  bottom: 9%;
  width: 60%;
  border: 3px solid var(--tss-black);
  border-radius: 8px;
  padding: 7% 6% 6%;
  background: var(--tss-yellow);
  box-shadow: 7px 7px 0 var(--tss-black);
  transform: rotate(2deg);
}

.tss-account-access .bright-pigeonholes__sorter > strong{
  display: block;
  margin-bottom: 7%;
  font-size: clamp(9px, 0.92vw, 14px);
  letter-spacing: 0.035em;
}

.tss-account-access .bright-pigeonholes__slots{
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
  height: 77%;
}

.tss-account-access .bright-pigeonholes__slots > span{
  position: relative;
  overflow: hidden;
  border: 3px solid var(--tss-black);
  background: #fffdf3;
}

.tss-account-access .bright-pigeonholes__slots > span:first-child{
  grid-row: 1 / 3;
  background: var(--tss-sky);
}

.tss-account-access .bright-pigeonholes__slots > span:nth-child(3){
  background: var(--tss-sage);
}

.tss-account-access .bright-pigeonholes__slots b{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  border: 2px solid var(--tss-black);
  padding: 5px 7px;
  background: var(--tss-yellow);
  font-size: clamp(7px, 0.7vw, 10px);
}

.tss-account-access .bright-pigeonholes__slots i{
  position: absolute;
  right: 10%;
  bottom: -10%;
  left: 12%;
  height: 65%;
  border: 2px solid var(--tss-black);
  box-shadow: 3px 3px 0 var(--tss-black);
  transform: rotate(-2deg);
}

.tss-account-access .bright-pigeonholes__slots > span:nth-child(2) i{
  bottom: -24%;
  height: 75%;
  transform: rotate(3deg);
}

.tss-account-access .bright-pigeonholes__slots > span:nth-child(3) i{
  bottom: -20%;
}

.tss-account-access .art-voice--pigeonholes{
  bottom: 6%;
  left: 1%;
  border-left-color: var(--tss-yellow);
  transform: rotate(-1deg);
}

@media (max-width: 600px){
  .tss-account-access .art-voice--trip-file,
.tss-account-access .art-voice--setup-docket,
.tss-account-access .art-voice--phone-labels,
.tss-account-access .art-voice--next-trip-packet,
.tss-account-access .art-voice--pigeonholes{
    top: auto;
    right: 3%;
    bottom: 2%;
    left: 3%;
    width: auto;
    border-width: 2px 2px 2px 5px;
    padding: 7px 9px;
    box-shadow: 3px 3px 0 var(--tss-black);
    transform: none;
  }

  .tss-account-access .art-variant--trip-file::before,
.tss-account-access .art-variant--setup-docket::before,
.tss-account-access .art-variant--phone-labels::before,
.tss-account-access .art-variant--next-trip-packet::before,
.tss-account-access .art-variant--pigeonholes::before{
    inset: 1% 3% 31% 3%;
    border-width: 2px;
  }

  .tss-account-access .art-variant--trip-file::after,
.tss-account-access .art-variant--setup-docket::after,
.tss-account-access .art-variant--phone-labels::after,
.tss-account-access .art-variant--next-trip-packet::after,
.tss-account-access .art-variant--pigeonholes::after{
    top: 0;
    right: 1%;
    bottom: auto;
    left: auto;
    width: 32%;
    height: 25%;
  }

  .tss-account-access .bright-trip-file__folder,
.tss-account-access .bright-trip-packet__sleeve{
    top: 2%;
    bottom: 34%;
    left: 18%;
    width: 64%;
  }

  .tss-account-access .bright-trip-file__tab,
.tss-account-access .bright-trip-packet__tabs span{
    border-width: 2px;
    padding: 4px 7px 6px;
    font-size: 6px;
  }

  .tss-account-access .bright-trip-file__sheets,
.tss-account-access .bright-trip-file__front,
.tss-account-access .bright-trip-packet__sheet,
.tss-account-access .bright-trip-packet__pocket{
    border-width: 2px;
  }

  .tss-account-access .bright-trip-file__sheets{
    padding: 7% 5%;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .bright-trip-file__sheets span{
    border-width: 1.5px;
    padding: 4px 2px 19%;
    font-size: 6px;
  }

  .tss-account-access .bright-trip-file__front{
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .bright-trip-file__front strong{
    font-size: 9px;
  }

  .tss-account-access .bright-trip-file__handle{
    border-width: 2px;
  }

  .tss-account-access .bright-setup-card__board{
    top: 1%;
    bottom: 34%;
    left: 19%;
    width: 62%;
    border-width: 2px;
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .bright-setup-card__clip,
.tss-account-access .bright-setup-card__sheet,
.tss-account-access .bright-setup-card__phone{
    border-width: 2px;
  }

  .tss-account-access .bright-setup-card__clip{
    box-shadow: 2px 2px 0 var(--tss-black);
  }

  .tss-account-access .bright-setup-card__sheet{
    padding: 9% 8%;
  }

  .tss-account-access .bright-setup-card__sheet > strong{
    font-size: 15px;
  }

  .tss-account-access .bright-setup-card__steps{
    gap: 5px;
    margin-top: 8%;
  }

  .tss-account-access .bright-setup-card__steps i{
    width: 18px;
    border-width: 1.5px;
    font-size: 6px;
  }

  .tss-account-access .bright-setup-card__steps b{
    font-size: 7px;
  }

  .tss-account-access .bright-setup-card__phone{
    right: -9%;
    border-radius: 8px;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .bright-setup-card__phone b{
    border-width: 1.5px;
    padding: 4px;
    font-size: 6px;
  }

  .tss-account-access .bright-phone-labels__phone{
    top: 1%;
    right: 18%;
    width: 20%;
    height: 43%;
    border-width: 2px;
    border-radius: 8px;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .bright-phone-labels__phone b{
    border-width: 1.5px;
    padding: 4px 2px;
    font-size: 6px;
  }

  .tss-account-access .bright-phone-labels__maker{
    top: 5%;
    bottom: 38%;
    left: 17%;
    width: 60%;
    border-width: 2px;
    border-radius: 10px 10px 6px 6px;
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .bright-phone-labels__maker > strong{
    font-size: 7px;
  }

  .tss-account-access .bright-phone-labels__dial,
.tss-account-access .bright-phone-labels__tape,
.tss-account-access .bright-phone-labels__tape span{
    border-width: 1.5px;
  }

  .tss-account-access .bright-phone-labels__dial{
    box-shadow: inset 0 0 0 3px #fffdf3;
  }

  .tss-account-access .bright-phone-labels__tape{
    right: -27%;
    gap: 4px;
    padding: 6px;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .bright-phone-labels__tape span{
    padding: 4px 5px;
    font-size: 5.5px;
  }

  .tss-account-access .bright-trip-packet__tabs{
    gap: 3px;
  }

  .tss-account-access .bright-trip-packet__sheet{
    padding: 10% 9%;
    box-shadow: 3px 3px 0 var(--tss-black);
  }

  .tss-account-access .bright-trip-packet__sheet strong{
    font-size: 14px;
  }

  .tss-account-access .bright-trip-packet__sheet span{
    font-size: 6px;
  }

  .tss-account-access .bright-trip-packet__pocket{
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .bright-trip-packet__pocket strong{
    font-size: 8px;
  }

  .tss-account-access .bright-trip-packet__pocket span{
    font-size: 5.5px;
  }

  .tss-account-access .bright-pigeonholes__sorter{
    top: 1%;
    right: 18%;
    bottom: 34%;
    width: 64%;
    border-width: 2px;
    padding: 5% 5% 4%;
    box-shadow: 4px 4px 0 var(--tss-black);
  }

  .tss-account-access .bright-pigeonholes__sorter > strong{
    margin-bottom: 4%;
    font-size: 7px;
  }

  .tss-account-access .bright-pigeonholes__slots{
    gap: 3px;
    height: 78%;
  }

  .tss-account-access .bright-pigeonholes__slots > span{
    border-width: 2px;
  }

  .tss-account-access .bright-pigeonholes__slots b{
    top: 4px;
    left: 4px;
    border-width: 1.5px;
    padding: 3px 4px;
    font-size: 5.5px;
  }

  .tss-account-access .bright-pigeonholes__slots i{
    border-width: 1.5px;
    box-shadow: 2px 2px 0 var(--tss-black);
  }
}

/* Approved traveller scenes, 15 September 2026. Only the selected scene downloads. */
html:is(:not([data-auth-art]),[data-auth-art="suitcase-negotiation"],[data-auth-art="your-usual-spot"],[data-auth-art="special-delivery"],[data-auth-art="one-little-souvenir"],[data-auth-art="saved-you-a-seat"],[data-auth-art="the-helpful-passenger"],[data-auth-art="the-bag-has-other-plans"],[data-auth-art="the-pocket-investigation"],[data-auth-art="the-confident-map-reader"]) .tss-account-access .account-story:has(.art-stage){
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff8e5;
}
html:is(:not([data-auth-art]),[data-auth-art="suitcase-negotiation"],[data-auth-art="your-usual-spot"],[data-auth-art="special-delivery"],[data-auth-art="one-little-souvenir"],[data-auth-art="saved-you-a-seat"],[data-auth-art="the-helpful-passenger"],[data-auth-art="the-bag-has-other-plans"],[data-auth-art="the-pocket-investigation"],[data-auth-art="the-confident-map-reader"]) .tss-account-access .account-story:has(.art-stage)::before,
html:is(:not([data-auth-art]),[data-auth-art="suitcase-negotiation"],[data-auth-art="your-usual-spot"],[data-auth-art="special-delivery"],[data-auth-art="one-little-souvenir"],[data-auth-art="saved-you-a-seat"],[data-auth-art="the-helpful-passenger"],[data-auth-art="the-bag-has-other-plans"],[data-auth-art="the-pocket-investigation"],[data-auth-art="the-confident-map-reader"]) .tss-account-access .account-story:has(.art-stage) > .account-story__copy{ display: none; }
html:is(:not([data-auth-art]),[data-auth-art="suitcase-negotiation"],[data-auth-art="your-usual-spot"],[data-auth-art="special-delivery"],[data-auth-art="one-little-souvenir"],[data-auth-art="saved-you-a-seat"],[data-auth-art="the-helpful-passenger"],[data-auth-art="the-bag-has-other-plans"],[data-auth-art="the-pocket-investigation"],[data-auth-art="the-confident-map-reader"]) .tss-account-access .art-stage{ width: 100%; min-height: 0; }
.tss-account-access .art-variant--traveller-scene{ width: 100%; max-width: 760px; aspect-ratio: auto; }
.tss-account-access .art-variant--traveller-scene::before,
.tss-account-access .art-variant--traveller-scene::after{ content: none; }
.tss-account-access .traveller-scene__copy{ position: relative; z-index: 1; padding: 0 2%; }
.tss-account-access .traveller-scene__copy strong{ display: block; font-size: clamp(30px,3.1vw,48px); font-weight: 750; line-height: 1.05; letter-spacing: -.045em; color: #171813; }
.tss-account-access .traveller-scene__copy p{ max-width: 430px; margin: 16px 0 0; color: #5a584e; font-size: clamp(14px,1.15vw,17px); line-height: 1.5; }
.tss-account-access .traveller-scene__picture{ position: relative; width: 100%; aspect-ratio: 3 / 2; margin-top: 16px; isolation: isolate; }
.tss-account-access .traveller-scene__picture::before{ content: ''; position: absolute; inset: 0; background: var(--traveller-scene-image) center / contain no-repeat; mix-blend-mode: darken; mask-image: linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent); mask-composite: intersect; z-index: -1; }
.tss-account-access .traveller-scene__aside{ position: absolute; right: 3%; top: 6%; display: block; max-width: 190px; padding: 9px 15px; border: 1.5px solid #171813; border-radius: 55% 45% 50% 38% / 28% 33% 40% 35%; background: #fffdf6; color: #171813; font-size: clamp(12px,1.25vw,18px); font-weight: 400; line-height: 1.3; text-align: center; transform: rotate(3deg); }
.tss-account-access .traveller-scene__aside::after{ content: ''; position: absolute; bottom: -10px; left: 24px; width: 11px; height: 13px; background: #fffdf6; border-left: 1.5px solid; border-bottom: 1.5px solid; transform: skew(-22deg) rotate(-33deg); }
.tss-account-access .art-variant--your-usual-spot .traveller-scene__aside{ right: auto; left: 31%; top: 26%; }
.tss-account-access .art-variant--your-usual-spot .traveller-scene__aside::after{ left: auto; right: 22px; transform: skew(22deg) rotate(-33deg); }
.tss-account-access .art-variant--special-delivery .traveller-scene__aside{ right: auto; left: 1%; top: 8%; transform: rotate(-4deg); }
html:not([data-auth-art]) .tss-account-access .art-variant--suitcase-negotiation,
html[data-auth-art="suitcase-negotiation"] .tss-account-access .art-variant--suitcase-negotiation{ display: block; --traveller-scene-image: url("../images/account-access/suitcase-negotiation.webp"); }
html[data-auth-art="your-usual-spot"] .tss-account-access .art-variant--your-usual-spot{ display: block; --traveller-scene-image: url("../images/account-access/your-usual-spot.webp"); }
html[data-auth-art="special-delivery"] .tss-account-access .art-variant--special-delivery{ display: block; --traveller-scene-image: url("../images/account-access/special-delivery.webp"); }
@media (max-width: 900px){
  html:is(:not([data-auth-art]),[data-auth-art="suitcase-negotiation"],[data-auth-art="your-usual-spot"],[data-auth-art="special-delivery"],[data-auth-art="one-little-souvenir"],[data-auth-art="saved-you-a-seat"],[data-auth-art="the-helpful-passenger"],[data-auth-art="the-bag-has-other-plans"],[data-auth-art="the-pocket-investigation"],[data-auth-art="the-confident-map-reader"]) .tss-account-access .account-story:has(.art-stage){ min-height: 0; padding: 30px 24px; }
  .tss-account-access .art-variant--traveller-scene{ width: min(100%,600px); }
  .tss-account-access .traveller-scene__copy strong{ font-size: clamp(28px,5.5vw,38px); }
  .tss-account-access .traveller-scene__copy p{ font-size: 14px; }
  .tss-account-access .traveller-scene__aside{ font-size: 13px; max-width: 150px; padding: 8px 12px; }
}
@media (max-width: 600px){
  html:is(:not([data-auth-art]),[data-auth-art="suitcase-negotiation"],[data-auth-art="your-usual-spot"],[data-auth-art="special-delivery"],[data-auth-art="one-little-souvenir"],[data-auth-art="saved-you-a-seat"],[data-auth-art="the-helpful-passenger"],[data-auth-art="the-bag-has-other-plans"],[data-auth-art="the-pocket-investigation"],[data-auth-art="the-confident-map-reader"]) .tss-account-access .account-story:has(.art-stage){ padding: 26px 14px 18px; }
  .tss-account-access .art-variant--traveller-scene{ width: 100%; aspect-ratio: auto; }
  .tss-account-access .traveller-scene__copy strong{ font-size: clamp(26px,8vw,33px); }
  .tss-account-access .traveller-scene__copy p{ font-size: 13px; margin-top: 12px; }
  .tss-account-access .traveller-scene__copy p br{ display: none; }
  .tss-account-access .traveller-scene__picture{ margin-top: 20px; }
  .tss-account-access .traveller-scene__aside{ font-size: clamp(10px,3vw,12px); max-width: 137px; padding: 7px 10px; top: 0; }
  .tss-account-access .art-variant--your-usual-spot .traveller-scene__aside{ left: 29%; top: 24%; }
  .tss-account-access .art-variant--special-delivery .traveller-scene__aside{ left: 0; top: 1%; max-width: 126px; }
}

/* Comical collection approved for live release, 15 September 2026. */
html[data-auth-art="one-little-souvenir"] .tss-account-access .art-variant--one-little-souvenir{ display: block; --traveller-scene-image: url("../images/account-access/one-little-souvenir.webp"); }
html[data-auth-art="saved-you-a-seat"] .tss-account-access .art-variant--saved-you-a-seat{ display: block; --traveller-scene-image: url("../images/account-access/saved-you-a-seat.webp"); }
html[data-auth-art="the-helpful-passenger"] .tss-account-access .art-variant--the-helpful-passenger{ display: block; --traveller-scene-image: url("../images/account-access/the-helpful-passenger.webp"); }
html[data-auth-art="the-bag-has-other-plans"] .tss-account-access .art-variant--the-bag-has-other-plans{ display: block; --traveller-scene-image: url("../images/account-access/the-bag-has-other-plans.webp"); }
html[data-auth-art="the-pocket-investigation"] .tss-account-access .art-variant--the-pocket-investigation{ display: block; --traveller-scene-image: url("../images/account-access/the-pocket-investigation.webp"); }
html[data-auth-art="the-confident-map-reader"] .tss-account-access .art-variant--the-confident-map-reader{ display: block; --traveller-scene-image: url("../images/account-access/the-confident-map-reader.webp"); }
.tss-account-access .art-variant--one-little-souvenir .traveller-scene__aside{ left: 6%; right: auto; top: 12%; }
.tss-account-access .art-variant--saved-you-a-seat .traveller-scene__aside{ left: 35%; right: auto; top: 6%; }
.tss-account-access .art-variant--the-helpful-passenger .traveller-scene__aside{ left: 14%; right: auto; top: 8%; }
.tss-account-access .art-variant--the-bag-has-other-plans .traveller-scene__aside{ left: auto; right: 8%; top: 8%; }
.tss-account-access .art-variant--the-pocket-investigation .traveller-scene__aside{ left: 3%; right: auto; top: 0%; }
.tss-account-access .art-variant--the-confident-map-reader .traveller-scene__aside{ left: auto; right: 2%; top: 3%; }
@media (max-width: 600px){
  .tss-account-access .art-variant--one-little-souvenir .traveller-scene__aside{ left: 0%; right: auto; top: 12%; }
  .tss-account-access .art-variant--saved-you-a-seat .traveller-scene__aside{ left: 31%; right: auto; top: 0%; }
  .tss-account-access .art-variant--the-helpful-passenger .traveller-scene__aside{ left: 2%; right: auto; top: 2%; }
  .tss-account-access .art-variant--the-bag-has-other-plans .traveller-scene__aside{ left: auto; right: 8%; top: 8%; }
  .tss-account-access .art-variant--the-pocket-investigation .traveller-scene__aside{ left: 1%; right: auto; top: -4%; }
  .tss-account-access .art-variant--the-confident-map-reader .traveller-scene__aside{ left: auto; right: 0%; top: 0%; }
}


/* Live WordPress integration. Keep every rule below scoped to this auth surface. */
body.tss-account-access-page {
  background: #fff7df;
}

body.tss-account-access-page #site-content,
body.tss-account-access-page #site-content > .container,
body.tss-account-access-page #site-content article,
body.tss-account-access-page .tss-info-page,
body.tss-account-access-page .tss-info-section,
body.tss-account-access-page .tss-info-section__inner,
body.tss-account-access-page .tss-info-section__inner > .woocommerce {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.tss-account-access-page #site-content,
body.tss-account-access-page .tss-info-page,
body.tss-account-access-page .tss-info-section {
  background: #fff7df !important;
}

body.tss-account-access-page .tss-info-page {
  left: auto !important;
  right: auto !important;
}

body.tss-account-access-page #site-content article::before,
body.tss-account-access-page #site-content article::after {
  content: none !important;
}

.tss-account-access {
  --campaign-height: 44px;
  --header-height: 70px;
  width: 100%;
  min-width: 0;
  color: var(--tss-black);
  font-family: "Instrument Sans", Arial, sans-serif;
}

.tss-account-access .account-main {
  width: 100%;
}

.tss-account-access .account-form-wrap.woocommerce-customer-login {
  display: block;
}

.tss-account-access .auth-form,
.tss-account-access .auth-form .form-row,
.tss-account-access .auth-form .woocommerce-privacy-policy-text,
.tss-account-access .auth-form .woocommerce-privacy-policy-text p {
  margin: 0;
}

.tss-account-access .auth-form .woocommerce-privacy-policy-text {
  color: #69645c;
  font-size: 12px;
  line-height: 1.45;
}

.tss-account-access .auth-form .woocommerce-privacy-policy-text a {
  color: var(--tss-black);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.tss-account-access .auth-form wc-order-attribution-inputs:empty {
  display: none;
}

.tss-account-access .field .required {
  display: none !important;
}

.tss-account-access .field > label {
  position: static !important;
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--tss-black) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.tss-account-access .field input.input-text {
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  border: 1px solid #aaa69e !important;
  border-radius: 6px !important;
  padding: 11px 13px !important;
  background: #fff !important;
  color: var(--tss-black) !important;
  box-shadow: none !important;
}

.tss-account-access .field input.input-text:focus {
  border-color: var(--tss-black) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(0, 124, 120, 0.22) !important;
}

.tss-account-access .field input.input-text::placeholder {
  color: #817c74 !important;
  opacity: 1 !important;
}

.tss-account-access .password-field input.input-text {
  padding-right: 72px !important;
}

.tss-account-access .password-field > .password-input {
  position: static;
  display: block;
}

.tss-account-access .password-field .show-password-input {
  display: none !important;
}

.tss-account-access .password-field .tss-password-toggle {
  top: 6px;
  right: 6px;
  min-width: 58px;
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  padding: 0 9px;
  background: var(--tss-paper-yellow);
  color: var(--tss-black);
  font-size: 13px;
  font-weight: 700;
  transform: none;
}

.tss-account-access .password-field .tss-password-toggle:hover,
.tss-account-access .password-field .tss-password-toggle:focus {
  border: 0;
  background: #ffe9a0;
}

.tss-account-access .tss-account-field-error {
  margin: 0;
  color: var(--tss-danger);
  font-size: 13px;
  font-weight: 650;
}

.tss-account-access .tss-account-field-error[hidden] {
  display: none !important;
}

.tss-account-access .google-button-slot,
.tss-account-access .google-button-slot .nsl-container,
.tss-account-access .google-button-slot .nsl-container-buttons,
.tss-account-access .google-button-slot a[data-plugin="nsl"] {
  width: 100% !important;
  max-width: 100% !important;
}

.tss-account-access .google-button-slot .nsl-container {
  clear: none;
  text-align: left !important;
}

.tss-account-access .google-button-slot .nsl-container-buttons {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
}

.tss-account-access .google-button-slot a[data-plugin="nsl"] {
  display: block !important;
  min-height: 48px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}

.tss-account-access .google-button-slot .nsl-button {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  justify-content: stretch;
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #747775 !important;
  border-radius: 4px !important;
  padding: 0 14px !important;
  background: #fff !important;
  color: #1f1f1f !important;
  box-shadow: none !important;
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.tss-account-access .google-button-slot .nsl-button:hover,
.tss-account-access .google-button-slot .nsl-button:focus,
.tss-account-access .google-button-slot .nsl-button:focus-visible {
  border-color: #747775 !important;
  background: #f8faff !important;
  box-shadow: none !important;
  transform: none;
}

.tss-account-access .google-button-slot .nsl-button:active {
  transform: translate(1px, 1px);
}

.tss-account-access .google-button-slot .nsl-button-svg-container {
  display: grid !important;
  place-items: center;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tss-account-access .google-button-slot svg {
  display: block;
  width: 20px !important;
  height: 20px !important;
}

.tss-account-access .google-button-slot .nsl-button-label-container {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  color: #1f1f1f !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

.tss-account-access .auth-divider span {
  display: inline;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.tss-account-access .form-utility .check-control {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
}

.tss-account-access .form-utility .check-control input {
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.tss-account-access .form-utility a,
.tss-account-access .mode-switch a,
.tss-account-access .account-help a {
  color: var(--tss-black);
}

.tss-account-access .mode-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.tss-account-access .primary-button.button,
.tss-account-access .primary-button.button:hover,
.tss-account-access .primary-button.button:focus {
  width: 100%;
  min-height: 48px;
  margin: 0;
  border: 2px solid var(--tss-black) !important;
  border-radius: 6px !important;
  padding: 10px 16px;
  background: var(--tss-yellow) !important;
  color: var(--tss-black) !important;
  box-shadow: 3px 3px 0 var(--tss-black) !important;
  font-size: 15px;
  font-weight: 850 !important;
  line-height: 1.2;
}

.tss-account-access .primary-button.button::before,
.tss-account-access .primary-button.button::after {
  content: none !important;
  display: none !important;
}

.tss-account-access .primary-button.button:active {
  box-shadow: 1px 1px 0 var(--tss-black) !important;
  transform: translate(1px, 1px);
}

.tss-account-access .google-button-slot a[data-plugin="nsl"]:focus-visible,
.tss-account-access .mode-switch a:focus-visible,
.tss-account-access .form-utility a:focus-visible,
.tss-account-access .account-help a:focus-visible {
  outline: 3px solid var(--tss-teal);
  outline-offset: 3px;
}

@media (max-width: 1199px) {
  .tss-account-access {
    --campaign-height: 44px;
    --header-height: 64px;
  }
}

@media (min-width: 601px) {
  .tss-account-access .mates-rates-art__tag strong {
    font-size: clamp(20px, 2vw, 28px);
  }
}

@media (max-width: 600px) {
  body.tss-account-access-page #site-content {
    overflow: visible;
  }

  .tss-account-access .google-button-slot .nsl-button {
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    gap: 8px;
    padding: 0 10px !important;
  }

  .tss-account-access .google-button-slot .nsl-button-label-container {
    font-size: 13px !important;
  }
}