/* ==========================================================================
   Crown & Anchor Society - Member Benefits table
   --------------------------------------------------------------------------
   Pair with cas-benefits-table.html (the markup + the <script> it needs).

   Breakpoints (one per design file)
     Desktop    >= 1440px
     Tablet L   1024-1439px
     Tablet     768-1023px
     Mobile     < 768px   horizontal scroll, frozen first column,
                          edge to edge

   Sticky tier header (flags + points) on every screen size: the script
   makes a copy of <thead> that stays under the site header while the
   table scrolls by. Where the table scrolls sideways, the script also adds
   left/right scroll arrows.

   Footnote numbers link to their term in the Supplemental Terms accordion
   further down the page (second script in the HTML): see "Footnote links".

   Benefit names that link to another page, and the links in the
   Supplemental Terms, show in blue and underlined: see "Benefit links".

   Placement
     The table sits inside your page container (the one that already has
     the page gutters) and centers itself at max 1000px. On mobile it steps
     out of that container to use the full width of the screen.

   No inline styles are used anywhere: markup only carries classes.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
.cas-benefits {
  --cas-ink: #010c1d;
  --cas-navy: #021d49;
  --cas-blue: #005edc;     /* scroll arrows */
  --cas-surface: #ffffff;

  /* Section bars, same colors as the PDF gradients (blue > cyan, navy > blue) */
  --cas-section-bg: linear-gradient(90deg, #0080ff 50.95%, #00d5ff 77.43%);
  --cas-group-bg: linear-gradient(90deg, #001871 52.09%, #0080ff 68.1%);
  --cas-bar-radius: 8px;   /* PDF radius (4.5pt on an 18.7pt bar) at this bar's height */

  --cas-tint-gold: #fef4cf;
  --cas-tint-platinum: #e8edf3;
  --cas-tint-emerald: #cce8e1;
  --cas-tint-diamond: #cceaff;
  --cas-tint-diamond-plus: #dfd3f5;
  --cas-tint-pinnacle: #ced9f1;
  --cas-rule: #d6dce5;     /* divider under each benefit */

  --cas-gap: 2px;          /* white gap between tier cells and between rows */
  --cas-tier-w: 90px;      /* tier column = width of this breakpoint's flag */
  --cas-flag-h: 56px;
  --cas-gutter: 0px;       /* side padding: only set it if the parent
                              container has no page gutters of its own */
  --cas-sticky-top: 73px;  /* where the tier header sticks = height of the
                              site's fixed header (the script measures it) */
}


/* --------------------------------------------------------------------------
   Flag artwork (DAM: /content/dam/royal/countries/crown-and-anchor/tier-flags)
   One PNG per tier for every breakpoint; .cas-benefits__flag scales it to
   the flag box of each size (see "Tier header row").
   -------------------------------------------------------------------------- */
.cas-benefits .cas-benefits__flag--gold         { background-image: url("/content/dam/royal/countries/crown-and-anchor/tier-flags/cas-gold-tier-flag.png"); }
.cas-benefits .cas-benefits__flag--platinum     { background-image: url("/content/dam/royal/countries/crown-and-anchor/tier-flags/cas-platinum-tier-flag.png"); }
.cas-benefits .cas-benefits__flag--emerald      { background-image: url("/content/dam/royal/countries/crown-and-anchor/tier-flags/cas-emerald-tier-flag.png"); }
.cas-benefits .cas-benefits__flag--diamond      { background-image: url("/content/dam/royal/countries/crown-and-anchor/tier-flags/cas-diamond-tier-flag.png"); }
.cas-benefits .cas-benefits__flag--diamond-plus { background-image: url("/content/dam/royal/countries/crown-and-anchor/tier-flags/cas-diamond-plus-tier-flag.png"); }
.cas-benefits .cas-benefits__flag--pinnacle     { background-image: url("/content/dam/royal/countries/crown-and-anchor/tier-flags/cas-pinnacle-club-tier-flag.png"); }


/* --------------------------------------------------------------------------
   Block
   -------------------------------------------------------------------------- */
.cas-benefits {
  padding: 80px 0;
  background-color: var(--cas-surface);
  color: var(--cas-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

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

.cas-benefits .cas-benefits__container {
  box-sizing: content-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--cas-gutter);
}

.cas-benefits .cas-benefits__frame {
  position: relative;
  isolation: isolate;
}

.cas-benefits .cas-benefits__scroll {
  position: relative; /* keeps the screen-reader-only text inside the scroll area */
}

.cas-benefits .cas-benefits__scroll:focus-visible {
  outline: 2px solid var(--cas-navy);
  outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   Table (resets guard against global table styles on the site)
   -------------------------------------------------------------------------- */
.cas-benefits .cas-benefits__table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background-color: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.cas-benefits .cas-benefits__table tr {
  border: 0;
  background-color: transparent;
}

.cas-benefits .cas-benefits__table th,
.cas-benefits .cas-benefits__table td {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  vertical-align: middle;
}

.cas-benefits .cas-benefits__table strong {
  font-weight: 600;
}

/* Site font: the text in the table is wrapped in the site's class "p", which
   brings the site's font. Size, weight, color and spacing stay the table's
   own. Placed before the rules below so those still apply on top of it. */
.cas-benefits .p {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}


/* --------------------------------------------------------------------------
   Tier header row: flag + points
   -------------------------------------------------------------------------- */
.cas-benefits .cas-benefits__table .cas-benefits__corner {
  background-color: var(--cas-surface);
}

.cas-benefits .cas-benefits__table .cas-benefits__tier {
  width: calc(var(--cas-tier-w) + var(--cas-gap));
  padding: 0 0 8px var(--cas-gap);
  text-align: center;
  vertical-align: top;
}

.cas-benefits .cas-benefits__flag {
  display: block;
  width: 100%;
  height: var(--cas-flag-h);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;  /* one PNG for all breakpoints: keep its proportions */
}

.cas-benefits .cas-benefits__pts {
  display: block;
  margin-top: 7px;
  font-weight: 600;
  letter-spacing: 0.08em;  /* same tracking as the PDF */
  text-transform: uppercase;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Section rows (rounded gradient bars, as in the PDF)
   -------------------------------------------------------------------------- */
.cas-benefits .cas-benefits__table .cas-benefits__section > th {
  padding: 8px 12px;
  border-radius: var(--cas-bar-radius);
  background-color: #0080ff;
  background-image: var(--cas-section-bg);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 19px;
}

.cas-benefits .cas-benefits__section-label {
  display: inline-block;
  letter-spacing: 0.06em;  /* same tracking as the PDF */
  text-transform: uppercase;
}

/* "Onboard benefits" group row: navy > blue bar with the label centered.
   The transparent bottom border leaves the same white gap as the PDF before
   the next bar; the larger vertical radius on the bottom corners keeps the
   visible corners at --cas-bar-radius. */
.cas-benefits .cas-benefits__table .cas-benefits__section--group > th {
  border-bottom: var(--cas-gap) solid transparent;
  border-radius: var(--cas-bar-radius) / var(--cas-bar-radius) var(--cas-bar-radius) calc(var(--cas-bar-radius) + var(--cas-gap)) calc(var(--cas-bar-radius) + var(--cas-gap));
  background-color: #001871;
  background-image: var(--cas-group-bg);
  background-clip: padding-box;
  text-align: center;
}

/* Disclaimer number after a benefit (1, 2, 3...): small, raised, one space
   after the text. In em so it follows the size of the benefit text. */
.cas-benefits .cas-benefits__note {
  position: relative;
  top: -0.45em;
  margin-left: 0.45em;
  font-size: 0.65em;
  font-weight: 400;
  line-height: 0;
  vertical-align: baseline;
}


/* --------------------------------------------------------------------------
   Benefit rows
   -------------------------------------------------------------------------- */
.cas-benefits .cas-benefits__table tbody > tr:not(.cas-benefits__section) > th {
  padding: 8px 12px 7px 0;
  border-bottom: 1px solid var(--cas-rule); /* divider, in line with the white gap between colored cells */
  background-color: var(--cas-surface);
}

/* No divider under the last benefit of a section (the next navy bar follows) */
.cas-benefits .cas-benefits__table tbody > tr:last-child > th {
  border-bottom-color: transparent;
}

/* The white lines between tier cells are the --cas-gap strip left unpainted
   on the left and bottom of each cell (extra padding keeps the content
   centered in the colored area). They don't depend on borders, so global
   table styles (border, border-collapse) can't remove them. */
.cas-benefits .cas-benefits__table td {
  padding: 6px 4px calc(6px + var(--cas-gap)) calc(4px + var(--cas-gap));
  font-weight: 600;
  text-align: center;
}

/* No line under the last row of a section (it meets the next navy bar) */
.cas-benefits .cas-benefits__table tbody > tr:last-child > td {
  padding-bottom: 6px;
}

/* Every tier cell gets its column's color; the dot or value is what says
   whether the benefit applies to that tier */
.cas-benefits .cas-benefits__table tr > :nth-child(2) { --cas-tint: var(--cas-tint-gold); }
.cas-benefits .cas-benefits__table tr > :nth-child(3) { --cas-tint: var(--cas-tint-platinum); }
.cas-benefits .cas-benefits__table tr > :nth-child(4) { --cas-tint: var(--cas-tint-emerald); }
.cas-benefits .cas-benefits__table tr > :nth-child(5) { --cas-tint: var(--cas-tint-diamond); }
.cas-benefits .cas-benefits__table tr > :nth-child(6) { --cas-tint: var(--cas-tint-diamond-plus); }
.cas-benefits .cas-benefits__table tr > :nth-child(7) { --cas-tint: var(--cas-tint-pinnacle); }

.cas-benefits .cas-benefits__table tbody td {
  background-image: linear-gradient(var(--cas-tint), var(--cas-tint));
  background-position: right top;
  background-repeat: no-repeat;
  background-size: calc(100% - var(--cas-gap)) calc(100% - var(--cas-gap));
}

.cas-benefits .cas-benefits__table tbody > tr:last-child > td {
  background-size: calc(100% - var(--cas-gap)) 100%;
}

/* "Included" dot */
.cas-benefits .cas-benefits__yes::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: currentColor;
}


/* --------------------------------------------------------------------------
   Utilities / states
   -------------------------------------------------------------------------- */
/* Text for screen readers only (tier names, Included / Not included) */
.cas-benefits .cas-benefits__sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Sticky tier header: a copy of <thead> made by the script. It sits over
   the table and lets clicks, taps and swipes pass through to it. */
.cas-benefits .cas-benefits__float {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  scroll-margin-top: var(--cas-sticky-top); /* lets the script read the offset in px */
}

.cas-benefits .cas-benefits__float-head {
  position: -webkit-sticky;
  position: sticky;
  top: var(--cas-sticky-top);
  overflow: hidden;
  background-color: var(--cas-surface);
}

/* Fallback set by the script when a parent element blocks position: sticky
   (e.g. overflow: hidden on a page wrapper): the header is pinned with
   position: fixed while the table is on screen, lined up with the table
   through --cas-pin-left / --cas-pin-width (measured by the script). */
.cas-benefits.cas-benefits--pin-js .cas-benefits__float-head {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.cas-benefits.cas-benefits--pin-js.cas-benefits--pinned .cas-benefits__float-head {
  position: fixed;
  top: var(--cas-sticky-top);
  right: auto;
  left: var(--cas-pin-left, 0px);
  width: var(--cas-pin-width, 100%);
}

.cas-benefits.cas-benefits--pin-js.cas-benefits--pinned-end .cas-benefits__float-head {
  top: auto;
  bottom: 0;
}

/* Scroll arrows (added by the script): only shown while the table can scroll
   sideways in that direction. The left one sits just after the frozen
   column, the right one 8px from the edge. Vertically they stay in the middle
   of the part of the table on screen (the script sets --cas-arrow-y; the
   layer is fixed so the arrows don't wobble while the page scrolls). */
.cas-benefits .cas-benefits__arrows {
  position: fixed;
  top: var(--cas-arrow-y, 50%);
  left: var(--cas-pin-left, 0px);
  z-index: 4;
  width: var(--cas-pin-width, 100%);
  height: 0;
  pointer-events: none;
}

.cas-benefits .cas-benefits__arrow {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 0;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  color: var(--cas-blue);
  font: inherit;
  line-height: 0;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 0.2s ease, visibility 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.cas-benefits .cas-benefits__arrow:hover,
.cas-benefits .cas-benefits__arrow:active {
  background: #ffffff;
  color: var(--cas-blue);
}

.cas-benefits .cas-benefits__arrow--visible {
  opacity: 1;
  visibility: visible;
}

.cas-benefits .cas-benefits__arrow:focus-visible {
  outline: 2px solid var(--cas-blue);
  outline-offset: 2px;
}

.cas-benefits .cas-benefits__arrow--left {
  left: calc(var(--cas-first, 0px) + 8px);
}

.cas-benefits .cas-benefits__arrow--right {
  right: 8px;
}

.cas-benefits .cas-benefits__arrow svg {
  display: block;
  width: 7px;
  height: 12px;
}

.cas-benefits .cas-benefits__arrow--right svg {
  transform: scaleX(-1);
}

@media print {
  .cas-benefits .cas-benefits__float,
  .cas-benefits .cas-benefits__arrows {
    display: none;
  }
}

@media (forced-colors: active) {
  .cas-benefits .cas-benefits__yes::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  .cas-benefits .cas-benefits__arrow {
    border: 1px solid ButtonText;
  }
}


/* --------------------------------------------------------------------------
   Tablet L  (1024-1439px)
   -------------------------------------------------------------------------- */
@media (max-width: 1439.98px) {
  .cas-benefits {
    --cas-tier-w: 86px;
    padding: 64px 0;
  }
}


/* --------------------------------------------------------------------------
   Tablet  (768-1023px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .cas-benefits {
    --cas-tier-w: 63px;
  }
}


/* --------------------------------------------------------------------------
   Mobile  (< 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  /* Benefit column (--cas-first): half of (screen minus one tier and a peek
     of the next, capped at --cas-first-max), e.g. 136px on a 375px screen.
     When all six tiers fit, it takes the rest of the width instead. Set here
     on the component so the table and the scroll arrows both use it. */
  .cas-benefits {
    --cas-tier-w: 69px;
    --cas-peek: 30px;         /* how much of the 2nd tier shows before scrolling */
    --cas-first-max: 320px;   /* cap for the benefit column on wider phones */
    --cas-col: calc(var(--cas-tier-w) + var(--cas-gap));
    --cas-first: max(min(100vw - var(--cas-col) - var(--cas-gap) - var(--cas-peek), var(--cas-first-max)) / 2, 100vw - 6 * var(--cas-col));
    padding: 40px 0;
  }

  .cas-benefits .cas-benefits__container {
    padding: 0;
  }

  /* Edge to edge: step out of the page container's side padding */
  .cas-benefits .cas-benefits__frame {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }

  .cas-benefits .cas-benefits__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .cas-benefits .cas-benefits__table {
    width: calc(var(--cas-first) + 6 * var(--cas-col));
  }

  /* Frozen first column */
  .cas-benefits .cas-benefits__table .cas-benefits__corner,
  .cas-benefits .cas-benefits__table tbody > tr:not(.cas-benefits__section) > th {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    padding-left: 16px;
  }

  .cas-benefits .cas-benefits__table .cas-benefits__corner {
    width: var(--cas-first);
  }

  .cas-benefits .cas-benefits__table .cas-benefits__section > th {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* The label stays frozen on the left while the table scrolls, so on
     mobile "Onboard benefits" is left-aligned like the other bars */
  .cas-benefits .cas-benefits__table .cas-benefits__section--group > th {
    text-align: left;
  }

  .cas-benefits .cas-benefits__section-label {
    position: -webkit-sticky;
    position: sticky;
    left: 16px;
  }

  /* Edge of the frozen column, shown while the table is scrolled sideways */
  .cas-benefits .cas-benefits__table .cas-benefits__corner::after,
  .cas-benefits .cas-benefits__table tbody > tr:not(.cas-benefits__section) > th::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 6px;
    background-image: linear-gradient(to right, rgba(1, 12, 29, 0.14), rgba(1, 12, 29, 0));
    opacity: 0;
    pointer-events: none;
  }

  .cas-benefits.cas-benefits--scrolled .cas-benefits__table .cas-benefits__corner::after,
  .cas-benefits.cas-benefits--scrolled .cas-benefits__table tbody > tr:not(.cas-benefits__section) > th::after {
    opacity: 1;
  }
}


/* ==========================================================================
   Footnote links
   --------------------------------------------------------------------------
   The second script in cas-benefits-table.html turns each footnote number
   into a link to its term in the Supplemental Terms accordion (<tk-faq>)
   and lights up the term it opens for a moment.
   ========================================================================== */
.cas-benefits .cas-benefits__note-link {
  position: relative;
  color: var(--cas-blue);
  text-decoration: none;
  border-radius: 2px;
}

/* Bigger tap area around the small number; nothing moves */
.cas-benefits .cas-benefits__note-link::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -8px;
  bottom: -10px;
  left: -4px;
}

.cas-benefits .cas-benefits__note-link:hover {
  text-decoration: underline;
}

.cas-benefits .cas-benefits__note-link:focus-visible {
  outline: 2px solid var(--cas-blue);
  outline-offset: 2px;
}

/* Supplemental Terms (outside the table, inside <tk-faq-item>) */

/* Term the guest lands on: lights up, then fades */
tk-faq-item .cas-term {
  transition: background-color 1s ease;
}

tk-faq-item .cas-term--target {
  background-color: #e6effc;
  transition: none;
}

/* The term title takes the focus after the jump: ring for keyboard users only */
tk-faq-item .cas-term__title:focus-visible {
  outline: 2px solid #005edc;
  outline-offset: -2px;
}

tk-faq-item .cas-term__title:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  tk-faq-item .cas-term {
    transition: none;
  }
}


/* ==========================================================================
   Benefit links
   --------------------------------------------------------------------------
   Benefit names that link to another page (in the table) and every link in
   the Supplemental Terms accordion (<tk-faq>) show in blue and underlined,
   so they read as links. The footnote numbers keep their own style (see
   "Footnote links").

   Color and underline use !important, like .terms-link further down: the
   site's CSS loads after this file and would show these links as plain text.
   ========================================================================== */

/* In the table */
.cas-benefits .cas-benefits__table tbody th[scope="row"] a:not(.cas-benefits__note-link) {
  color: var(--cas-blue) !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.cas-benefits .cas-benefits__table tbody th[scope="row"] a:not(.cas-benefits__note-link):hover {
  text-decoration-thickness: 2px;
}

.cas-benefits .cas-benefits__table tbody th[scope="row"] a:not(.cas-benefits__note-link):focus-visible {
  outline: 2px solid var(--cas-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* In the Supplemental Terms (outside .cas-benefits, where the tokens don't
   reach: the same blue is written out, as in the term styles above) */
tk-faq[heading] tk-faq-item[question] a {
  color: #005edc !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

tk-faq[heading] tk-faq-item[question] a:hover {
  text-decoration-thickness: 2px;
}

tk-faq[heading] tk-faq-item[question] a:focus-visible {
  outline: 2px solid #005edc;
  outline-offset: 2px;
  border-radius: 2px;
}



/* ==========================================================================
   Page styles (outside the table)
   --------------------------------------------------------------------------
   Hero (logo, title, CTAs), cruise points cards and terms link. They used to
   be injected by a <script> in the table's HTML; now they live here.

   This file loads before the site's CSS, while the injected styles loaded
   after it. The hero rules are scoped to .hero-lockup so the extra class
   keeps them winning over the site's CSS the same way.
   ========================================================================== */

/* Hero: logo, title and subtitle
   -------------------------------------------------------------------------- */
.hero-lockup .mobile-alignment {
  display: block;       /* clave: hace que text-align aplique también al span */
  text-align: left;
}

.hero-lockup .mobile-alignment .subHeading {
  display: block;
  text-align: inherit;  /* hereda el alineamiento del contenedor */
}

.hero-lockup .responsive-header-logo {
  object-fit: contain;
  box-sizing: content-box;
  width: clamp(120px, max(97.1px + 6.107vw, 36px + 14.0625vw), 216px);
  height: clamp(120px, max(107.6px + 3.308vw, 34px + 12.890625vw), 199px);
}

/* Mobile first: H1 centrado (a la izquierda desde 768px) */
.hero-lockup .h1-text-responsive {
  text-align: center;
}


/* Hero CTAs (Sign in / Join)
   -------------------------------------------------------------------------- */
.hero-lockup .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
}

.hero-lockup .cta-buttons p {
  margin: 0;
  flex: 0 0 160px;                /* mismo ancho para ambos */
  text-align: center !important;  /* anula el text-align inline si queda */
}

.hero-lockup .cta-buttons p a {
  display: block;
  text-decoration: none;
}

.hero-lockup .cta-buttons .blueBtn,
.hero-lockup .cta-buttons .knockOutBtn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

/* Sign in: blanco */
.hero-lockup .cta-buttons p:first-child a > span {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #021D49 !important;
}

/* Join: transparente con texto y borde blanco */
.hero-lockup .cta-buttons p:last-child a > span {
  background: transparent !important;
  border: 1px solid #fff !important;
  color: #fff !important;
}


/* Cruise points cards
   -------------------------------------------------------------------------- */
.darker_section .text div {
  background: rgba(2, 29, 73, 0.75);
  border-radius: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* Mobile y tablet (hasta 1023px): también espacio arriba */
@media (max-width: 1023px) {
  .darker_section .text div { margin-top: 10px; }

  /* Un poco más entre los botones (Sign in / Join) y las tarjetas, que aquí van debajo */
  .pro-layout-container__base .aem-Grid.aem-Grid--12 > .layoutContainer.aem-GridColumn.aem-GridColumn--default--5 { margin-top: 10px; }
}


/* Terms link: blanco, subrayado y con ícono
   -------------------------------------------------------------------------- */
.terms-link {
  color: #fff !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.terms-link::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.5em;
  vertical-align: -0.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* Mobile (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-lockup .mobile-alignment { text-align: center; }
  .hero-lockup .responsive-header-logo { padding-bottom: 25px; }
  .hero-lockup .cta-buttons { justify-content: center; }  /* botones centrados también */
}


/* Tablet y desktop (>= 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero-lockup { display: flex; align-items: center; gap: clamp(16px, 3.125vw - 8px, 32px); }
  .hero-lockup .responsive-header-logo { display: block; }
  .hero-lockup__text > :last-child { margin-bottom: 0; }
  .hero-lockup .h1-text-responsive { text-align: left; }
}


/* Tablet (768px a 1023px): hero centrado, tarjetas debajo
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-lockup { justify-content: center; }
}


/* Hasta 1040px: más espacio arriba de los botones (Sign in / Join)
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero-lockup .cta-buttons { margin-top: 16px; }
}


/* Desktop chico (1024px a 1440px): mismo layout que arriba de 1440px
   AEM usa aquí sus columnas de "desktop" y "tablet" (texto a 12/12 y las
   tarjetas debajo); estas reglas vuelven a las de desktop grande: texto a
   la izquierda (7/12) y tarjetas apiladas a la derecha (5/12).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1440px) {
  .pro-layout-container__base .aem-Grid.aem-Grid--12 > .layoutContainer.aem-GridColumn.aem-GridColumn--default--7 { width: 58.33333333%; }
  .pro-layout-container__base .aem-Grid.aem-Grid--12 > .layoutContainer.aem-GridColumn.aem-GridColumn--default--5 { width: 41.66666667%; }
  .pro-layout-container__base .aem-Grid.aem-Grid--5 > .layoutContainer.aem-GridColumn { width: 100%; }
}