/* ==========================================================================
   DCI site styles. Values come from design-handoff/README.md.
   Layout order: header, language picker, hero, footer.
   ========================================================================== */

/* ---------- focus on red ---------------------------------------------- */

/* The design's focus ring is red, and "must always be visible for keyboard
   users". On the red surfaces a red ring disappears, so there it is white.
   The white panels that open over those surfaces keep the red ring. */
:is(.hdr, .hero, .band, .getbox) :focus-visible { outline-color: var(--white); }
:is(.menu, .dl__pop, .cpick, .lang__panel) :focus-visible { outline-color: var(--red); }

/* ---------- header ---------------------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: 30;
  background: var(--red); color: var(--white);
}
.hdr__inner {
  max-width: var(--w-wide); margin: 0 auto;
  padding: 14px var(--px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.hdr__lockup { display: flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.hdr__logo { height: 45px; width: auto; display: block; }
.hdr__descriptor {
  font-size: 22px; font-weight: 700; letter-spacing: var(--track-body);
  white-space: nowrap; padding-top: 6px;   /* sits on the wordmark baseline */
}

.hdr__nav { display: flex; align-items: center; gap: 30px; }
.hdr__link {
  font-size: 14px; font-weight: 700; color: var(--white);
  text-decoration: none; white-space: nowrap;
}
.hdr__link:hover { text-decoration: underline; }

.hdr__cta {
  display: inline-block; background: var(--white); color: var(--red);
  padding: 11px 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hdr__cta:hover { opacity: 0.88; }

.hdr__burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--white); cursor: pointer; padding: 0;
}

/* download popover, desktop only */
.dl { position: relative; }
.dl__pop {
  position: absolute; top: calc(100% + 12px); right: 0;
  background: var(--white); border-radius: var(--r-card); padding: 20px;
  box-shadow: var(--shadow-popover); z-index: 40; min-width: 260px;
  width: max-content;   /* grow to fit the badges rather than squeeze them */
}
.dl__eyebrow {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-body); color: var(--red); margin: 0 0 12px;
}
.dl__badges { display: flex; align-items: center; gap: 14px; }

/* mobile menu */
.menu {
  background: var(--white); padding: 8px var(--px) 18px;
  border-top: 1px solid var(--divider);
}
.menu__row {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; color: var(--dark-grey);
  text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--divider);
}
.menu__lang { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.menu__cta {
  display: block; text-align: center; background: var(--red); color: var(--white);
  border-radius: var(--r-input); padding: 15px 20px; margin-top: 14px;
  font-weight: 700; text-decoration: none;
}

@media (max-width: 979px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
}
@media (min-width: 980px) { .menu { display: none; } }

/* Spanish labels are the longest. Measured 28 Sept 2026 with Hurme loaded,
   the header needs about 854px in English, 880 in French, 926 in Dutch and
   1,050 in Spanish, so Spanish switches to the menu later than the design's
   979px. 1,100 leaves room for the wider Arial fallback. */
@media (min-width: 980px) and (max-width: 1099px) {
  html[lang="es"] .hdr__nav { display: none; }
  html[lang="es"] .hdr__burger { display: flex; }
  html[lang="es"] .menu:not([hidden]) { display: block; }
}
@media (max-width: 767px) {
  .hdr__lockup { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hdr__descriptor { font-size: 16px; letter-spacing: 0; padding-top: 0; }
  .hdr__logo { height: 36px; }
}

/* ---------- language picker ------------------------------------------- */

.lang { position: relative; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary { list-style: none; }

.lang__trigger {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--border-picker); background: var(--white);
  color: var(--dark-grey); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.lang__trigger:hover { border-color: var(--dark-grey); }
.lang__code { font-weight: 900; letter-spacing: var(--track-headline); }
.lang__sep { opacity: 0.6; }
.lang__trigger svg:last-child { transition: transform var(--dur) var(--ease); margin-left: auto; }
.lang[open] .lang__trigger svg:last-child { transform: rotate(180deg); }

.lang__panel {
  list-style: none; margin: 0; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--r-card);
}
.lang__row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-input);
  font-size: 15px; font-weight: 700; color: var(--dark-grey);
  text-decoration: none; white-space: nowrap;
}
.lang__row:hover { background: var(--light-grey); }
.lang__row.is-current { background: var(--light-grey); color: var(--red); font-weight: 900; }
.lang__row:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

/* Desktop opens upward, because the trigger sits near the foot of the page. */
.lang--desktop .lang__trigger { min-width: 204px; }
.lang--desktop .lang__panel {
  position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 240px;
  box-shadow: var(--shadow-popover); z-index: 20;
}
.lang--mobile .lang__trigger,
.lang--menu .lang__trigger { width: 100%; justify-content: space-between; }
.lang--mobile .lang__panel,
.lang--menu .lang__panel { margin-top: 8px; min-width: 320px; }

/* ---------- hero ------------------------------------------------------- */

.hero { background: var(--red); color: var(--white); }
.hero__inner { max-width: var(--w-wide); margin: 0 auto; padding: 64px var(--px) 56px; }
.hero__eyebrow { color: var(--white); }
.hero__inner > .hero__eyebrow { margin: 0 0 22px; }

.hero__h1 {
  font-size: var(--mega); line-height: 1.08;
  letter-spacing: var(--track-body); margin: 0;
  text-wrap: balance;
}
.pill {
  display: inline-flex; align-items: center; gap: 0.12em;
  background: var(--white); color: var(--red);
  border-radius: 0.16em; padding: 0 0.18em;
  text-decoration: none; cursor: pointer;
}
.pill svg { width: 0.42em; height: 0.42em; }

.hero__sub { font-size: var(--lead); font-weight: 700; margin: 24px 0 0; }
.hero__sub b { font-weight: 900; letter-spacing: var(--track-numbers); }
.hero__all { color: var(--white); text-decoration: underline; white-space: nowrap; }

.hero__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 36px; }
/* Store badges: official Apple and Google artwork, always at one shared
   height. That meets Google's rules for the Play badge: at least 28px high,
   the same size as or larger than other store badges, and clear space of a
   quarter of its height, so every badge row's gap is at least 12px at 46px
   and 13px at 52px. */
.badge { display: inline-flex; flex-shrink: 0; text-decoration: none; }   /* artwork is never squeezed */

/* Each device sees only its own store: iPhone and iPad the App Store, Android
   Google Play. platform.js adds the class; a desktop, an unknown device or a
   browser without JavaScript gets both. Covers the badges and the footer's
   store links. */
.is-android .store--appstore,
.is-ios .store--googleplay { display: none; }
.badge img { height: 52px; width: auto; display: block; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--white); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: 14px; font-weight: 700;
}

/* country picker */
.cpick {
  background: var(--white); color: var(--dark-grey);
  border-radius: var(--r-card); padding: 18px; max-width: 520px;
  margin-top: 20px; box-shadow: var(--shadow-popover);
}
.cpick__search {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--red); border-radius: var(--r-input); padding: 12px 14px;
}
.cpick__search input { flex: 1; border: 0; outline: 0; font: inherit; font-weight: 700; min-width: 0; }
.cpick__search button { background: none; border: 0; cursor: pointer; color: var(--dark-grey); display: flex; padding: 2px; }
.cpick__list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 300px; overflow-y: auto; }
.cpick__list button {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; border-bottom: 1px solid var(--divider);
  padding: 12px 6px; cursor: pointer; font: inherit; text-align: left;
}
.cpick__list button:hover { background: var(--light-grey); }
.cpick__name { font-size: 15px; font-weight: 700; color: var(--dark-grey); }
.cpick__price { font-size: 15px; font-weight: 900; color: var(--red); letter-spacing: var(--track-numbers); }
.cpick__empty { font-size: 15px; font-weight: 700; margin: 16px 6px 4px; }

/* featured country row */
.hero__row { border-top: 1px solid var(--divider-on-red); }
.hero__row-inner { max-width: var(--w-wide); margin: 0 auto; padding: 22px var(--px) 30px; }
.hero__row-inner .hero__eyebrow { margin: 0 0 16px; }
.ccards { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.ccard {
  display: flex; flex-direction: column; gap: 4px;
  border: 2px solid var(--white); border-radius: var(--r-card);
  padding: 13px 17px; background: transparent; color: var(--white);
  cursor: pointer; text-decoration: none; text-align: left; font: inherit;
}
.ccard:hover { border-width: 3px; padding: 12px 16px; }
.ccard__name { font-size: 14px; font-weight: 700; text-wrap: balance; }
.ccard__price { font-size: 24px; font-weight: 900; letter-spacing: var(--track-numbers); margin-top: auto; }
.ccard.is-on { background: var(--white); color: var(--red); }
.ccard--more { border-style: dashed; }
.ccard--more:hover { border-style: solid; }

@media (max-width: 1023px) {
  .ccards {
    display: flex; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--px)); padding: 0 var(--px);
  }
  .ccards::-webkit-scrollbar { display: none; }
  .ccard { min-width: 156px; flex: 0 0 auto; }
}
@media (max-width: 767px) {
  .badge img { height: 46px; }
  .hero__inner { padding: 40px var(--px) 40px; }
}

/* ---------- footer ----------------------------------------------------- */

.foot { border-top: 1px solid var(--divider); }
.foot__inner { max-width: var(--w-default); margin: 0 auto; padding: var(--secYs) var(--px) 32px; }
.foot__grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 32px; }
.foot__head { font-size: 14px; font-weight: 900; color: var(--red); margin: 0 0 10px; letter-spacing: var(--track-body); }
.foot__list { list-style: none; margin: 0; padding: 0; }
.foot__list a, .foot__btn {
  display: flex; align-items: center; min-height: var(--tap);
  font-size: 14px; font-weight: 600; color: var(--dark-grey); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.foot__list a:hover, .foot__btn:hover { color: var(--red); }
.foot__note { font-size: 12px; font-weight: 600; margin-top: 6px; }
.foot__lang { justify-self: end; }

.foot__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid var(--divider); padding-top: 24px; margin-top: 36px;
}
.foot__mark { height: 64px; width: auto; }
.foot__service { text-align: right; }
.foot__phone, .dlcard__tel, .care__link {
  white-space: nowrap;
}
.foot__phone {
  display: block; font-size: 20px; font-weight: 900; color: var(--red);
  text-decoration: none; letter-spacing: var(--track-numbers);
}
.foot__legal { font-size: 12px; font-weight: 600; margin-top: 44px; max-width: 760px; line-height: 1.6; }
.foot__legal a { white-space: nowrap; }
.foot__lang-mobile { display: none; }

@media (max-width: 1023px) {
  .foot__grid { grid-template-columns: repeat(3, 1fr); }
  .foot__lang { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 767px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__lang { display: none; }
  .foot__lang-mobile {
    display: block; border-top: 1px solid var(--divider);
    margin: 28px var(--px) 0; padding: 20px 0 32px;
  }
  .foot__bottom { flex-direction: column; align-items: flex-start; }
  .foot__service { text-align: left; }
}
/* Small phones: one column, so no link label has to break. Must follow the
   767px rule above to win over it. */
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- red band (rates, faqs, legal pages) ----------------------- */

.band { background: var(--red); color: var(--white); }
.band__inner { max-width: var(--w-default); margin: 0 auto; padding: 40px var(--px) 44px; }
.band__inner--rates { max-width: var(--w-rates); }
.band__inner--long  { max-width: var(--w-long); }
.band__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--white); text-decoration: none;
}
.band__back svg { transform: scaleX(-1); }
.band__back:hover { text-decoration: underline; }
.band__h1 { font-size: var(--h2); line-height: 1.05; margin: 18px 0 0; }
.band__lead { font-size: var(--lead); font-weight: 700; margin: 14px 0 0; }

.rsearch {
  display: flex; align-items: center; gap: 10px; max-width: 460px;
  background: var(--white); color: var(--dark-grey);
  border-radius: var(--r-input); padding: 14px 16px; margin-top: 24px;
}
.rsearch input { flex: 1; border: 0; outline: 0; font: inherit; font-weight: 700; min-width: 0; background: transparent; }
.rsearch button { background: none; border: 0; cursor: pointer; color: var(--dark-grey); display: flex; padding: 2px; }
.rsearch button[hidden] { display: none; }   /* display: flex above would otherwise beat hidden */

/* Both search boxes draw their own clear or close button, so hide the
   browser's own type="search" button, which Chrome and Samsung Internet
   showed beside it. */
.rsearch input::-webkit-search-cancel-button,
.cpick__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* iOS zooms the whole page when a text box under 16px gets focus, and phones
   use 15px body text, so both search boxes stay at 16px. */
.rsearch input, .cpick__search input { font-size: 16px; }

/* ---------- A to Z bar ------------------------------------------------ */

.az {
  position: sticky; top: 73px; z-index: 20;
  background: var(--white); border-bottom: 1px solid var(--divider);
}
.az__inner {
  max-width: var(--w-rates); margin: 0 auto; padding: 10px var(--px);
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
.az__inner::-webkit-scrollbar { display: none; }
.az__btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-letter);
  border: 1px solid var(--divider); background: var(--white);
  color: var(--dark-grey); font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
}
.az__btn:hover { background: var(--light-grey); color: var(--red); }
.az__btn.is-on { background: var(--red); border-color: var(--red); color: var(--white); }

/* Every letter in view: one row on desktop, two rows on tablets. Phones keep
   the sideways strip, with a fade on the right while more letters are off
   screen (site.js sets .has-more). */
@media (min-width: 1024px) {
  .az__inner { gap: 4px; }
  .az__btn { flex: 1 1 0; width: auto; min-width: 0; max-width: 34px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .az__inner { flex-wrap: wrap; overflow-x: visible; }
}
.az__inner.has-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

/* ---------- rate table ------------------------------------------------ */

.rt__inner { max-width: var(--w-rates); margin: 0 auto; padding: 32px var(--px) var(--secYs); }
.rt__count { font-size: 13px; font-weight: 600; margin: 0 0 14px; display: flex; gap: 14px; align-items: center; }
.rt__showall { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--red); }

.rt__table { list-style: none; margin: 0; padding: 0; }
.rt__head, .rt__row {
  display: grid; grid-template-columns: 1fr 132px 132px; gap: 12px; align-items: center;
}
.rt__head {
  font-size: 12px; font-weight: 900; text-transform: uppercase;
  letter-spacing: var(--track-body); color: var(--dark-grey);
  border-bottom: 2px solid var(--red); padding: 0 6px 10px;
}
.rt__head span + span, .rt__row span + span { text-align: right; }
.rt__row { padding: 14px 6px; border-bottom: 1px solid var(--divider); }
.rt__country { font-weight: 700; }
.rt__landline { font-weight: 900; color: var(--dark-grey); }
.rt__mobile   { font-weight: 900; color: var(--red); }
.rt__row .is-none { color: var(--dark-grey); font-weight: 700; }   /* grey on white, 5:1 */
.rt__row[hidden] { display: none; }

.rt__empty { font-size: var(--lead); font-weight: 700; margin: 32px 6px; }
.rt__fine { margin: 28px 0 0; max-width: 760px; }

.dlcard {
  border: 2px solid var(--red); border-radius: var(--r-card);
  padding: var(--cardPad); margin-top: 48px;
}
.dlcard__h { font-size: 22px; font-weight: 900; color: var(--red); margin: 0; letter-spacing: var(--track-headline); text-wrap: balance; }
.dlcard__b { font-weight: 700; margin: 8px 0 20px; }
.dlcard__badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dlcard__badges .badge img { height: 46px; }

@media (max-width: 767px) {
  .rt__head, .rt__row { grid-template-columns: 1fr 74px 74px; gap: 8px; }
  .az { top: 92px; }   /* the phone header: 14 + 36 logo + 4 + 24 descriptor line + 14 */
}

/* ---------- long-form layout (FAQs, Privacy, Terms) ------------------- */

.long__inner {
  max-width: var(--w-long); margin: 0 auto; padding: 48px var(--px) var(--secY);
  display: grid; grid-template-columns: 232px 1fr; gap: 48px; align-items: start;
}
.toc { position: sticky; top: 100px; }
.toc__head {
  font-size: 12px; font-weight: 900; text-transform: uppercase;
  letter-spacing: var(--track-body); color: var(--dark-grey); margin: 0 0 12px;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block; padding: 8px 0 8px 14px; border-left: 2px solid var(--divider);
  font-size: 14px; font-weight: 700; color: var(--dark-grey); text-decoration: none;
}
.toc a:hover { border-left-color: var(--red); color: var(--red); }

.faq__group { margin-bottom: 48px; scroll-margin-top: 100px; }
.faq__h2 { font-size: 26px; font-weight: 900; color: var(--red); margin: 0 0 8px; }

.faq { border-bottom: 1px solid var(--divider); }
.faq summary::-webkit-details-marker { display: none; }
.faq__q {
  list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer;
  font-size: var(--h3); font-weight: 900; line-height: 1.35; color: var(--dark-grey);
}
.faq__icon { position: relative; flex: 0 0 20px; height: 20px; margin-top: 2px; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: var(--red); border-radius: 1px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq__icon::before { width: 20px; height: 2.5px; }
.faq__icon::after  { width: 2.5px; height: 20px; transition: opacity var(--dur) var(--ease); }
.faq[open] .faq__icon::after { opacity: 0; }
.faq__a { padding: 0 0 20px; max-width: 760px; }
.faq__a p { font-weight: 600; line-height: 1.65; margin: 0 0 12px; }
.faq__steps { margin: 0 0 12px; padding-left: 22px; }
.faq__steps li { font-weight: 600; line-height: 1.65; margin-bottom: 8px; }
.faq__steps li::marker { color: var(--red); font-weight: 900; }
.faq__list { margin: 0 0 12px; padding-left: 22px; }
.faq__list li { font-weight: 600; line-height: 1.65; margin-bottom: 6px; }
.faq__list li::marker { color: var(--red); }
.faq__action {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--red); text-decoration: none;
}
.faq__action:hover { text-decoration: underline; }

.dlcard__tel {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  background: var(--red); color: var(--white); border-radius: var(--r-pill);
  font-size: 16px; font-weight: 900; text-decoration: none; letter-spacing: var(--track-numbers);
}

@media (max-width: 1023px) {
  .long__inner { grid-template-columns: 1fr; gap: 24px; }
  .toc { position: static; }
}

/* ---------- generic section ------------------------------------------- */

.sec__inner { max-width: var(--w-default); margin: 0 auto; padding: var(--secY) var(--px); }
.sec__h2 { font-size: var(--h2); line-height: 1.05; color: var(--red); margin: 0; max-width: 720px; }

/* ---------- stats and benefits ---------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; margin-top: 56px; }
.stat { border-top: 3px solid var(--red); padding-top: 20px; }
.stat__n { font-size: var(--stat); font-weight: 900; line-height: 1; color: var(--red); margin: 0; }
.stat__t { font-size: 19px; font-weight: 900; margin: 12px 0 0; }
.stat__d { font-size: 14px; font-weight: 700; margin: 8px 0 0; line-height: 1.55; }

.bens {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
  border-top: 1px solid var(--divider);
}
.bens li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--divider);
  font-weight: 700; line-height: 1.5;
}
.bens li::before {
  content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px;
  background: var(--red); border-radius: 2px;
}

/* ---------- how it works ---------------------------------------------- */

.how { position: relative; min-height: 640px; background: #000; overflow: hidden; }
.how__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 30%;
}
.how::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #000 0%, transparent 100%);
}
.how__body {
  position: relative; z-index: 1; max-width: 500px;
  padding: 112px var(--px) 72px; color: var(--white);
}
.how__eyebrow { color: var(--white); }
.how__h2 { font-size: var(--h2); line-height: 1.05; margin: 12px 0 40px; }
.how__step { display: grid; grid-template-columns: 64px 1fr; gap: 0 12px; margin-bottom: 28px; }
.how__n { font-size: 40px; font-weight: 900; line-height: 1; }
.how__st { font-size: 20px; font-weight: 900; margin: 0; }
.how__sd { font-size: 15px; font-weight: 700; margin: 6px 0 0; line-height: 1.55; }

/* ---------- pinless ---------------------------------------------------- */

.pin {
  border: 2px solid var(--red); border-radius: var(--r-offer); padding: var(--cardPad);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
}
.pin__lead { font-size: var(--lead); font-weight: 700; margin: 14px 0 0; }
.pin__body { font-weight: 700; margin: 16px 0 0; }
.pin__num {
  display: block; font-size: var(--access); font-weight: 900; color: var(--red);
  text-decoration: none; margin: 8px 0 24px; line-height: 1.1;
  white-space: nowrap;   /* a phone number must never break at a hyphen */
}
.pin__steps { list-style: none; margin: 0; padding: 0; }
.pin__steps li {
  display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--divider); font-weight: 700;
}
.pin__steps li:first-child { border-top: 1px solid var(--divider); }
.pin__sn { font-size: 24px; font-weight: 900; color: var(--red); }

/* ---------- care and links -------------------------------------------- */

.care { background: var(--light-grey); border-top: 1px solid var(--divider); }
.care .sec__inner { padding: var(--secYs) var(--px); }
.care__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.care__h2 { font-size: 30px; font-weight: 900; color: var(--red); margin: 0 0 18px; letter-spacing: var(--track-headline); }
.care__link, .care__arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--red); text-decoration: none;
}
.care__link:hover, .care__arrow:hover { text-decoration: underline; }
.care__fine { margin-top: 20px; max-width: 460px; }

/* ---------- download --------------------------------------------------- */

.getbox {
  background: var(--red); color: var(--white); border-radius: var(--r-offer);
  padding: clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center;
}
.getbox__eyebrow { color: var(--white); }
.getbox__h2 { font-size: var(--dlH); line-height: 1.02; margin: 12px 0 0; }
.getbox__lead { font-size: var(--lead); font-weight: 700; margin: 16px 0 0; max-width: 520px; }
.getcard {
  background: var(--white); color: var(--dark-grey);
  border-radius: var(--r-card); padding: 24px 28px;
}
.getcard__h { font-size: 20px; font-weight: 900; color: var(--red); margin: 0; text-wrap: balance; }
.getcard__b { font-size: 14px; font-weight: 700; margin: 6px 0 16px; }
.getcard__ref { font-size: 14px; font-weight: 700; margin: -8px 0 16px; }   /* the referral offer */
/* Side by side with the headline on desktop, the card keeps its designed width
   (about the two badges). Without a cap, the referral sentence's one-line
   width sets the column and squeezes the headline. */
@media (min-width: 1024px) { .getcard { max-width: 380px; } }
.getcard__badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.getcard__badges .badge img { height: 46px; }

/* On small phones the two badges stack. Centred, so the official artwork's
   different widths read as intended rather than as a ragged edge. */
@media (max-width: 460px) {
  .getcard__badges, .dlcard__badges { flex-direction: column; align-items: center; }
}

@media (max-width: 1023px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .bens { grid-template-columns: 1fr; }
  .pin, .care__grid, .getbox { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .how { min-height: auto; }
  .how__body { padding: 300px var(--px) 56px; }
  .how::after { background: linear-gradient(0deg, #000 0%, transparent 100%); }
}

/* ---------- legal documents (Privacy, Terms) --------------------------- */

.band__date { font-size: 13px; font-weight: 600; margin: 12px 0 0; }

/* The contents list is long, so it scrolls on its own rather than running
   off the bottom of the viewport. Hidden on tablet and phone. */
.toc--legal { max-height: calc(100vh - 140px); overflow-y: auto; }

.lg { min-width: 0; }
.lg__note {
  background: var(--light-grey); border: 1px solid var(--divider);
  border-radius: var(--r-input); padding: 14px 18px; margin: 0 0 28px;
  font-weight: 700;
}
.lg__sec { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--divider); scroll-margin-top: 100px; }
.lg__sec:last-child { border-bottom: 0; }
.lg__h2 { font-size: 24px; font-weight: 900; color: var(--red); margin: 0 0 16px; letter-spacing: var(--track-headline); }
.lg__h3 { font-size: 17px; font-weight: 900; margin: 24px 0 8px; }
.lg p { font-weight: 600; line-height: 1.7; max-width: 720px; margin: 0 0 14px; overflow-wrap: anywhere; }
.lg__list { list-style: none; margin: 0 0 14px; padding: 0; max-width: 720px; }
.lg__list li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  font-weight: 600; line-height: 1.7;
}
.lg__list li::before {
  content: ''; position: absolute; left: 0; top: 0.65em;
  width: 7px; height: 7px; background: var(--red);
}

@media (max-width: 1023px) {
  .toc--legal { display: none; }
}

/* ---------- 404 ------------------------------------------------------- */

.nf__inner { max-width: var(--w-long); margin: 0 auto; padding: 40px var(--px) var(--secYs); }
.nf__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nf__links .care__arrow { min-height: 44px; font-size: var(--lead); }