/* ==========================================================================
   Design tokens, from design-handoff/README.md.
   FY26 Digicel brand. These colours are the whole sanctioned palette; do not
   add tints. Hover on red is opacity 0.88.
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --red:            #E4002B;
  --white:          #FFFFFF;
  --light-grey:     #FAFAFA;
  --dark-grey:      #6D6E70;
  --divider:        #E8E8E9;
  --border-subtle:  rgba(109, 110, 112, 0.16);
  --border-picker:  rgba(109, 110, 112, 0.32);
  --divider-on-red: rgba(255, 255, 255, 0.3);

  /* ---- tracking ---- */
  --track-headline: 0.030em;
  --track-body:     0.020em;
  --track-numbers:  0;

  /* ---- type scale, desktop ---- */
  --mega:   clamp(56px, 7.4vw, 112px);  /* hero H1 */
  --h2:     48px;
  --dlH:    clamp(40px, 4.4vw, 60px);   /* download H2 */
  --stat:   72px;
  --access: 56px;
  --h3:     20px;                        /* FAQ question */
  --lead:   19px;
  --body:   16px;

  /* ---- spacing ---- */
  --px:      32px;   /* page gutter */
  --secY:    112px;  /* section padding */
  --secYs:   80px;   /* short section */
  --cardPad: 40px;
  --tap:     30px;   /* link min-height */

  /* ---- containers ---- */
  --w-wide:    1320px;  /* header, hero */
  --w-default: 1120px;  /* content sections, footer */
  --w-long:    1060px;  /* FAQs, Privacy, Terms */
  --w-rates:   960px;

  /* ---- radii ---- */
  --r-letter: 10px;
  --r-input:  14px;
  --r-card:   20px;
  --r-offer:  28px;
  --r-pill:   999px;

  /* ---- shadows ---- */
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.16);
  --shadow-consent: 0 -8px 28px rgba(0, 0, 0, 0.10);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur:  220ms;
}

/* ≤1023px tablet: grids collapse, country row becomes a scroller */
@media (max-width: 1023px) {
  :root { --mega: clamp(48px, 8vw, 80px); }
}

/* ≤767px phone */
@media (max-width: 767px) {
  :root {
    --mega: 44px;
    --h2: 32px;
    --dlH: 40px;
    --stat: 52px;
    --access: 36px;
    --h3: 19px;
    --lead: 17px;
    --body: 15px;
    --px: 20px;
    --secY: 72px;
    --secYs: 56px;
    --cardPad: 24px;
    --tap: 44px;   /* touch targets grow, they do not shrink */
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 700;              /* brand rule: body copy is Bold by default */
  font-size: var(--body);
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--dark-grey);
  background: var(--white);
}

h1, h2, h3 {
  font-weight: 900;
  letter-spacing: var(--track-headline);
  margin: 0;
  text-wrap: balance;   /* no single word stranded on the last line */
}

a { color: var(--red); }

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

/* Focus must always be visible for keyboard users. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.u-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-body);
  color: var(--red);
}

.u-fine {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
}

.u-numbers { letter-spacing: var(--track-numbers); }

/* Keeps phone numbers and hyphenated names on one line. The build adds it. */
.u-nowrap { white-space: nowrap; }

/* Visible only to screen readers. */
.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link: the first focusable thing on every page. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--red);
  padding: 12px 20px; border-radius: 0 0 var(--r-input) 0;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }