/* CheapUse.net — 1.0.0. All fonts and images are hosted locally. */
@font-face {
  font-family:Anton;
  src:url('assets/fonts/anton.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Barlow;
  src:url('assets/fonts/barlow-400.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Barlow;
  src:url('assets/fonts/barlow-600.ttf') format('truetype');
  font-style:normal;
  font-weight:600;
  font-display:swap
}

:root {
  --purple:#321080;
  --purple-deep:#250a68;
  --orange:#ff743b;
  --lavender:#f0eaff;
  --white:#fff;
  --max-width:1200px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:20px
}

body {
  margin:0;
  background:var(--white);
  color:var(--purple);
  font-family:Barlow,'Arial Narrow',Arial,sans-serif;
  font-size:20px;
  line-height:1.35;
  -webkit-font-smoothing:antialiased
}

img,svg {
  display:block;
  max-width:100%
}

a {
  color:inherit;
  text-decoration:none
}

a:focus-visible {
  outline:3px solid var(--purple);
  outline-offset:6px
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3,.wordmark,.account-type,.featured-label {
  font-family:Anton,Impact,'Arial Narrow',sans-serif;
  font-weight:400
}

h1,h2,h3 {
  line-height:1.1
}

ul {
  margin:0;
  padding:0;
  list-style:none
}

.page-width {
  width:calc(100% - 80px);
  max-width:var(--max-width);
  margin-inline:auto
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

.skip-link {
  position:absolute;
  left:20px;
  top:-100px;
  z-index:10;
  background:var(--purple);
  color:#fff;
  padding:12px 18px
}

.skip-link:focus {
  top:10px
}

/* Header */
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0 17px;
  border-bottom:2px solid var(--purple);
  gap:25px
}

.wordmark {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:43px;
  line-height:1.1;
  letter-spacing:-1.1px
}

.plug-mark {
  position:relative;
  display:inline-flex;
  align-items:center;
  margin-left:2px;
  width:43px;
  height:27px
}

.plug-mark:before {
  content:'';
  display:block;
  width:18px;
  height:6px;
  background:currentColor
}

.plug-mark i {
  position:relative;
  width:25px;
  height:24px;
  background:var(--orange);
  border:4px solid currentColor;
  box-shadow:inset 0 0 0 2px #fff
}

.plug-mark i:after {
  position:absolute;
  content:'';
  width:8px;
  height:10px;
  left:-9px;
  top:3px;
  border:2px solid currentColor;
  background:#fff
}

.site-header nav {
  display:flex;
  gap:38px;
  font-size:18px
}

.site-header nav a:hover {
  text-decoration:underline;
  text-underline-offset:6px
}

/* Hero: text remains selectable and responsive. */
.hero {
  position:relative;
  padding-top:30px;
  padding-bottom:53px;
  isolation:isolate
}

.hero-copy {
  position:relative;
  z-index:2;
  width:49%
}

.hero-copy a {
  pointer-events:auto
}

.hero h1 {
  font-size:clamp(90px,12.1vw,157px);
  line-height:.99;
  letter-spacing:-3px;
  display:flex;
  align-items:flex-start;
  flex-direction:column
}

.hero h1>span {
  display:block;
  position:relative
}

.hero h1 .old {
  margin-bottom:6px
}

.hero h1 .old:after {
  content:'';
  position:absolute;
  left:0;
  right:-7px;
  bottom:-1px;
  height:10px;
  background:var(--orange);
  transform:rotate(-4deg);
  border-radius:8px;
  z-index:-1
}

.hero-tagline {
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(21px,2.3vw,29px);
  line-height:1.2;
  margin-top:23px;
  white-space:nowrap;
  letter-spacing:-.4px
}

.hero-description {
  font-size:21px;
  line-height:1.32;
  max-width:430px;
  margin:13px 0 19px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:var(--purple);
  color:#fff;
  font-size:21px;
  font-weight:600;
  padding:13px 24px;
  border:2px solid var(--purple);
  border-radius:2px;
  min-height:52px;
  transition:background .15s,color .15s
}

.button:hover {
  background:var(--orange);
  color:var(--purple);
  border-color:var(--orange)
}

.button>span[aria-hidden] {
  font-family:Arial,sans-serif;
  font-weight:400;
  font-size:29px;
  line-height:1
}

.hero-art {
  position:absolute;
  width:68%;
  max-width:none;
  height:auto;
  right:-25px;
  top:27px;
  z-index:1;
  pointer-events:none
}

/* Worldwide coverage */
.coverage {
  border-top:2px solid var(--purple);
  border-bottom:2px solid var(--purple);
  padding:22px 0 20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:28px;
  align-items:center
}

.coverage h2 {
  font-size:clamp(29px,3.4vw,42px);
  line-height:1.1;
  letter-spacing:-.4px
}

.continents {
  display:flex;
  flex-wrap:wrap;
  gap:3px 9px;
  font-size:22px;
  margin-top:9px;
  line-height:1.25
}

.continents li:not(:last-child):after {
  content:'/';
  margin-left:9px
}

.coverage>p {
  border-left:2px solid var(--orange);
  padding-left:26px;
  font-size:18px;
  line-height:1.3
}

.coverage a:hover {
  text-decoration:underline;
  text-underline-offset:3px
}

/* Provider directory */
.providers {
  padding-top:21px
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:21px
}

.section-heading h2 {
  font-size:clamp(36px,4.6vw,57px);
  letter-spacing:-.7px
}

.section-heading>p {
  font-size:16px;
  line-height:1.2;
  max-width:220px;
  padding-bottom:5px
}

.featured {
  position:relative;
  background:var(--lavender);
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 35%;
  min-height:282px;
  overflow:hidden;
  margin-bottom:17px;
  border-radius:2px;
  scroll-margin-top:20px
}

.featured-label {
  background:var(--orange);
  color:var(--purple);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:29px;
  letter-spacing:2px
}

.featured-label>span {
  writing-mode:vertical-rl;
  transform:rotate(180deg)
}

.featured-copy {
  padding:24px 0 24px 30px;
  z-index:1
}

.featured h3 {
  font-size:clamp(45px,5.6vw,70px);
  margin-bottom:12px;
  letter-spacing:-.7px
}

.featured-copy>p {
  font-size:21px;
  line-height:1.3;
  max-width:580px
}

.feature-points {
  display:flex;
  gap:24px;
  font-size:18px;
  margin:13px 0 19px;
  flex-wrap:wrap
}

.feature-points li {
  border-left:2px solid var(--orange);
  padding-left:14px
}

.button-small {
  font-size:19px;
  min-height:44px;
  padding:8px 18px;
  gap:25px
}

.button-small>span[aria-hidden] {
  font-size:25px
}

.featured-art {
  width:110%;
  max-width:none;
  align-self:end;
  justify-self:center;
  height:auto;
  pointer-events:none
}

.provider-row {
  display:grid;
  grid-template-columns:30% minmax(0,1fr) 62px;
  align-items:center;
  gap:26px;
  padding:21px 0;
  border-top:2px solid var(--purple);
  scroll-margin-top:20px
}

.provider-row:last-of-type {
  border-bottom:2px solid var(--purple)
}

.provider-row h3 {
  font-size:clamp(34px,4.3vw,53px);
  letter-spacing:-.7px
}

.provider-description {
  border-left:2px solid var(--orange);
  padding-left:28px;
  font-size:20px;
  line-height:1.25
}

.account-type {
  font-size:20px;
  margin-bottom:4px
}

.visit-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:62px;
  height:62px;
  border-radius:2px;
  background:var(--orange);
  color:var(--purple);
  transition:background .15s,color .15s
}

.visit-button>span {
  font-family:Arial,sans-serif;
  font-size:38px;
  line-height:1;
  margin-top:-3px
}

.visit-button:hover {
  background:var(--purple);
  color:#fff
}

.provider-note {
  font-size:14px;
  padding:12px 0 20px
}

/* Choosing an account */
.choose {
  background:var(--lavender);
  padding:24px 0 28px
}

.choose-layout {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:35px;
  align-items:center
}

.choose-heading {
  display:flex;
  gap:10px;
  align-items:center
}

.choose h2 {
  font-size:clamp(37px,4.6vw,57px);
  white-space:nowrap;
  letter-spacing:-.5px
}

.choose-heading img {
  width:49%;
  max-height:155px;
  object-fit:contain
}

.choose-advice {
  padding-left:36px;
  border-left:2px solid var(--purple);
  display:grid;
  gap:21px
}

.choose-advice h3 {
  font-size:23px;
  line-height:1.15;
  margin-bottom:5px
}

.choose-advice p {
  font-size:20px
}

/* Footer */
.site-footer {
  background:var(--purple);
  color:#fff;
  padding:24px 0 26px
}

.footer-layout {
  display:grid;
  grid-template-columns:1.05fr 1fr auto;
  align-items:center;
  gap:35px
}

.site-footer .wordmark {
  font-size:35px
}

.site-footer .plug-mark {
  transform:scale(.8);
  transform-origin:left center;
  margin-right:-8px
}

.site-footer p {
  font-size:16px;
  line-height:1.4;
  margin-top:7px
}

.site-footer .disclosure {
  border-left:1px solid #b8a0ed;
  margin:0;
  padding-left:28px;
  font-size:15px;
  max-width:360px
}

.back-to-top {
  font-size:16px;
  white-space:nowrap
}

.back-to-top:hover {
  text-decoration:underline
}

.site-footer a:focus-visible {
  outline-color:var(--orange)
}

@media(min-width:1500px) {
  .hero h1 {
    font-size:164px
  }

  .hero-art {
    top:18px;
    width:70%;
    right:-40px
  }

}

@media(max-width:1100px) {
  .page-width {
    width:calc(100% - 56px)
  }

  .hero-tagline {
    font-size:24px;
    white-space:normal;
    max-width:400px
  }

  .hero-description {
    font-size:20px;
    max-width:380px
  }

  .hero-art {
    width:67%;
    top:48px;
    right:-20px
  }

  .coverage {
    grid-template-columns:minmax(0,1fr) 205px;
    gap:22px
  }

  .coverage h2 {
    font-size:33px
  }

  .continents {
    font-size:19px
  }

  .coverage>p {
    font-size:17px;
    padding-left:20px
  }

  .featured {
    grid-template-columns:56px minmax(0,1fr) 31%
  }

  .featured-copy {
    padding:24px 0 24px 24px
  }

  .featured h3 {
    font-size:59px
  }

  .featured-copy>p {
    font-size:20px
  }

  .feature-points {
    font-size:17px;
    gap:15px
  }

  .provider-row {
    grid-template-columns:29% minmax(0,1fr) 56px;
    gap:22px
  }

  .provider-row h3 {
    font-size:43px
  }

  .visit-button {
    width:56px;
    height:56px
  }

  .provider-description {
    padding-left:22px;
    font-size:18px
  }

  .account-type {
    font-size:18px
  }

  .section-heading h2 {
    font-size:46px
  }

  .section-heading>p {
    max-width:190px;
    font-size:15px
  }

  .choose h2 {
    font-size:44px
  }

  .choose-advice {
    padding-left:26px
  }

  .choose-advice p {
    font-size:18px
  }

  .footer-layout {
    gap:25px
  }

  .site-footer .wordmark {
    font-size:30px
  }

}

@media(max-width:800px) {
  .page-width {
    width:calc(100% - 40px)
  }

  body {
    font-size:18px
  }

  .site-header {
    padding:17px 0
  }

  .wordmark {
    font-size:34px
  }

  .plug-mark {
    transform:scale(.8);
    transform-origin:left center;
    margin-right:-8px
  }

  .site-header nav {
    gap:24px;
    font-size:16px
  }

  .hero {
    padding-top:27px;
    padding-bottom:48px
  }

  .hero h1 {
    font-size:clamp(83px,13vw,105px);
    letter-spacing:-1px
  }

  .hero-copy {
    width:52%
  }

  .hero-tagline {
    font-size:23px;
    max-width:340px;
    margin-top:18px
  }

  .hero-description {
    font-size:18px;
    max-width:320px;
    margin-top:12px
  }

  .hero-art {
    top:40px;
    right:-18px;
    width:68%
  }

  .button {
    font-size:18px;
    padding:10px 18px;
    min-height:48px
  }

  .coverage {
    grid-template-columns:1fr;
    gap:16px;
    padding:20px 0
  }

  .coverage h2 {
    font-size:34px
  }

  .coverage>p {
    padding-left:0;
    border-left:0;
    font-size:17px;
    max-width:none
  }

  .continents {
    font-size:19px
  }

  .section-heading {
    display:block
  }

  .section-heading h2 {
    font-size:43px
  }

  .section-heading>p {
    max-width:none;
    margin-top:7px;
    padding:0;
    font-size:17px
  }

  .featured {
    grid-template-columns:48px minmax(0,1fr) 29%;
    min-height:280px
  }

  .featured h3 {
    font-size:48px
  }

  .featured-copy {
    padding:22px 0 22px 20px
  }

  .featured-copy>p {
    font-size:18px
  }

  .featured-label {
    font-size:25px
  }

  .feature-points {
    font-size:16px;
    gap:10px;
    margin:12px 0 17px
  }

  .feature-points li {
    padding-left:8px
  }

  .featured-art {
    align-self:center;
    width:120%
  }

  .provider-row {
    grid-template-columns:29% minmax(0,1fr) 48px;
    gap:18px;
    padding:20px 0
  }

  .provider-row h3 {
    font-size:34px;
    letter-spacing:-.3px
  }

  .provider-description {
    padding-left:18px;
    font-size:17px
  }

  .account-type {
    font-size:17px
  }

  .visit-button {
    width:48px;
    height:48px
  }

  .visit-button>span {
    font-size:31px
  }

  .choose-layout {
    grid-template-columns:1fr 1.1fr;
    gap:25px
  }

  .choose-heading img {
    display:none
  }

  .choose h2 {
    font-size:46px
  }

  .choose-advice {
    padding-left:25px;
    gap:17px
  }

  .choose-advice h3 {
    font-size:21px
  }

  .choose-advice p {
    font-size:17px
  }

  .footer-layout {
    grid-template-columns:1fr 1fr;
    gap:20px
  }

  .back-to-top {
    grid-column:1/-1;
    border-top:1px solid #a68ad6;
    padding-top:13px
  }

  .site-footer .disclosure {
    font-size:14px;
    padding-left:18px
  }

}

@media(max-width:560px) {
  .site-header {
    gap:12px;
    align-items:flex-start;
    flex-wrap:wrap;
    padding:15px 0 13px
  }

  .wordmark {
    font-size:33px;
    letter-spacing:-.7px
  }

  .site-header nav {
    width:100%;
    justify-content:space-between;
    gap:20px;
    font-size:16px;
    margin-top:4px
  }

  .hero {
    padding-top:22px;
    padding-bottom:42px;
    display:flex;
    flex-direction:column
  }

  .hero-copy {
    width:100%;
    pointer-events:auto
  }

  .hero h1 {
    font-size:clamp(92px,23vw,130px);
    line-height:.98;
    letter-spacing:-1.5px
  }

  .hero h1 .old {
    margin-bottom:5px
  }

  .hero h1 .old:after {
    height:7px
  }

  .hero-tagline {
    font-size:25px;
    max-width:none;
    margin-top:21px
  }

  .hero-description {
    font-size:19px;
    max-width:100%;
    margin:13px 0 19px
  }

  .hero-art {
    position:relative;
    top:auto;
    right:auto;
    align-self:center;
    width:calc(100% + 28px);
    margin:12px -14px -22px;
    max-width:none
  }

  .coverage {
    padding:19px 0 18px;
    gap:12px
  }

  .coverage h2 {
    font-size:31px;
    line-height:1.12;
    max-width:360px
  }

  .continents {
    font-size:18px;
    line-height:1.45;
    gap:0 7px;
    margin-top:10px
  }

  .continents li:not(:last-child):after {
    margin-left:7px
  }

  .coverage>p {
    font-size:17px;
    line-height:1.35
  }

  .providers {
    padding-top:22px
  }

  .section-heading {
    margin-bottom:19px
  }

  .section-heading h2 {
    font-size:38px;
    line-height:1.1;
    max-width:350px;
    letter-spacing:-.3px
  }

  .section-heading>p {
    font-size:17px;
    line-height:1.35;
    margin-top:9px
  }

  .featured {
    display:grid;
    grid-template-columns:1fr;
    margin-bottom:20px;
    padding:0 20px;
    overflow:visible
  }

  .featured-label {
    justify-content:flex-start;
    margin:0 -20px;
    padding:8px 20px;
    font-size:18px;
    letter-spacing:1px;
    min-height:38px
  }

  .featured-label>span {
    writing-mode:horizontal-tb;
    transform:none
  }

  .featured-copy {
    padding:20px 0 0
  }

  .featured h3 {
    font-size:45px;
    letter-spacing:-.5px;
    margin-bottom:13px
  }

  .featured-copy>p {
    font-size:19px;
    line-height:1.35
  }

  .feature-points {
    font-size:16px;
    margin:15px 0 19px;
    gap:10px
  }

  .button-small {
    font-size:18px;
    min-height:44px;
    padding:8px 16px
  }

  .featured-art {
    width:85%;
    max-width:290px;
    justify-self:center;
    margin:0 0 4px;
    align-self:center
  }

  .provider-row {
    grid-template-columns:minmax(0,1fr) 48px;
    gap:10px 20px;
    padding:21px 0 23px;
    position:relative
  }

  .provider-row h3 {
    font-size:42px;
    grid-column:1;
    line-height:1.1;
    letter-spacing:-.5px
  }

  .provider-description {
    grid-column:1;
    border-left:0;
    padding-left:0;
    font-size:18px;
    line-height:1.35
  }

  .account-type {
    font-size:17px;
    line-height:1.25;
    margin-bottom:7px
  }

  .visit-button {
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center
  }

  .provider-note {
    font-size:14px;
    padding:14px 0 21px
  }

  .choose {
    padding:24px 0 26px
  }

  .choose-layout {
    grid-template-columns:1fr;
    gap:23px
  }

  .choose-heading {
    gap:20px;
    justify-content:space-between
  }

  .choose h2 {
    font-size:45px
  }

  .choose-heading img {
    display:block;
    width:45%;
    max-height:125px
  }

  .choose-advice {
    border-left:0;
    border-top:1px solid var(--purple);
    padding:20px 0 0;
    gap:20px
  }

  .choose-advice h3 {
    font-size:23px
  }

  .choose-advice p {
    font-size:19px
  }

  .site-footer {
    padding:25px 0
  }

  .footer-layout {
    grid-template-columns:1fr;
    gap:20px
  }

  .site-footer .wordmark {
    font-size:34px
  }

  .site-footer p {
    font-size:16px
  }

  .site-footer .disclosure {
    border-left:0;
    padding:0;
    font-size:15px;
    max-width:320px
  }

  .back-to-top {
    font-size:16px;
    padding-top:17px
  }

  .plug-mark {
    margin-right:-5px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    transition:none!important
  }

}

@media print {
  .hero-art {
    opacity:.9
  }

  .button,.visit-button {
    border:1px solid var(--purple)
  }

  .skip-link,.back-to-top {
    display:none
  }

  .page-width {
    width:100%
  }

  .site-footer {
    background:#fff;
    color:var(--purple)
  }

  .provider-row,.featured {
    break-inside:avoid
  }

}

/* Keep the full illustration and directory usable on narrow phones. */
@media(max-width:560px) {
  .hero {
    padding-bottom:25px;
    gap:0
  }

  .hero-copy {
    display:contents
  }

  .hero h1 {
    font-size:clamp(65px,19vw,94px);
    display:block;
    order:0;
    line-height:1.04
  }

  .hero h1>span {
    display:inline-block
  }

  .hero h1 .old {
    margin-left:12px;
    margin-bottom:0
  }

  .hero h1>span:last-child {
    display:block
  }

  .hero-art {
    order:1;
    margin:5px -14px -9px;
    width:calc(100% + 28px)
  }

  .hero-tagline {
    order:2;
    margin-top:12px
  }

  .hero-description {
    order:3
  }

  .hero .button {
    order:4;
    align-self:flex-start
  }

  .choose-heading {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:12px
  }

  .choose h2 {
    font-size:clamp(32px,10.5vw,45px)
  }

  .choose-heading img {
    width:100%
  }

  .provider-row h3 {
    font-size:clamp(35px,10.8vw,42px)
  }

}