@font-face {
  font-family: Cairo;
  src: url("/media/fonts/cairo-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: Cairo;
  src: url("/media/fonts/cairo-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: Cairo;
  src: url("/media/fonts/cairo-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: Cairo;
  src: url("/media/fonts/cairo-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: Inter;
  src: url("/media/fonts/inter-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: Inter;
  src: url("/media/fonts/inter-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: Inter;
  src: url("/media/fonts/inter-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: Inter;
  src: url("/media/fonts/inter-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

/* Match the approved primary/secondary pair in both website themes. */
:root {
  --sog-secondary-bg: #132e34;
  --sog-secondary-text: #addadb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sog-secondary-bg: #addadb;
    --sog-secondary-text: #132e34;
  }
}
:root[data-theme="dark"] {
  --sog-secondary-bg: #addadb;
  --sog-secondary-text: #132e34;
}
/* Sog, selected from the local design study. Page CSS may set width and margin;
   the shared component owns its shape, typography and interaction in every route. */
body[data-ionstar-de][data-landing-design] .button {
  --sog-size: 54px;
  --sog-disc-size: calc(var(--sog-size) - 14px);
  --sog-rest-bg: var(--accent-fill);
  --sog-rest-text: var(--on-accent);
  --sog-disc-bg: var(--on-accent);
  --sog-disc-text: var(--accent-fill);
  --sog-outline: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 22px;
  min-width: 0;
  max-width: 100%;
  min-height: var(--sog-size);
  height: auto;
  padding: 7px 7px 7px 25px;
  border: 0;
  border-radius: 100px;
  overflow: hidden;
  background: var(--sog-rest-bg);
  color: var(--sog-rest-text);
  box-shadow: inset 0 0 0 1px var(--sog-outline);
  font-family: var(--font-body);
  font-size: max(var(--text-min-size), 14px);
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  transform: none;
  transition: scale 160ms var(--ease);
  outline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
}
body[data-ionstar-de][data-landing-design] .button-outline {
  --sog-rest-bg: transparent;
  --sog-rest-text: var(--text);
  --sog-disc-bg: var(--sog-secondary-bg);
  --sog-disc-text: var(--sog-secondary-text);
  --sog-outline: var(--line);
}
body[data-ionstar-de][data-landing-design] .button > .sog-fill {
  position: absolute;
  top: 50%;
  right: calc(7px + var(--sog-disc-size) / 2);
  width: 220%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--sog-disc-bg);
  pointer-events: none;
  transform: translate(50%, -50%) scale(0);
  transition: transform 360ms var(--ease-ui);
  z-index: 0;
}
body[data-ionstar-de][data-landing-design] .button > .sog-label-window {
  position: relative;
  display: grid;
  overflow: hidden;
  min-width: 0;
  z-index: 1;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--sog-rest-text);
  transition: color 260ms ease;
  pointer-events: none;
}
body[data-ionstar-de][data-landing-design] .button .sog-label-copy {
  display: block;
  grid-area: 1 / 1;
  min-width: 0;
  transition: transform 360ms var(--ease-ui);
}
body[data-ionstar-de][data-landing-design] .button .sog-label-next {
  transform: translateY(110%);
}
body[data-ionstar-de][data-landing-design] .button > .sog-disc {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--sog-disc-size);
  width: var(--sog-disc-size);
  height: var(--sog-disc-size);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--sog-disc-bg);
  color: var(--sog-disc-text);
  pointer-events: none;
}
body[data-ionstar-de][data-landing-design] .button .sog-icon-window {
  --sog-icon-x: 110%;
  --sog-icon-y: -110%;
  position: relative;
  display: block;
  overflow: hidden;
  width: 25px;
  height: 25px;
}
body[data-ionstar-de][data-landing-design] .button .sog-icon-window[data-direction="right"] {
  --sog-icon-y: 0%;
}
body[data-ionstar-de][data-landing-design] .button .sog-icon-window[data-direction="down"] {
  --sog-icon-x: 0%;
  --sog-icon-y: 110%;
}
body[data-ionstar-de][data-landing-design] .button .sog-icon-window svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
  opacity: 1;
  transition:
    transform 360ms var(--ease-ui),
    opacity 260ms ease;
}
body[data-ionstar-de][data-landing-design] .button .sog-icon-window .sog-icon-next {
  transform: translate(
    calc(-1 * var(--sog-icon-x)),
    calc(-1 * var(--sog-icon-y))
  );
  opacity: 0;
}
body[data-ionstar-de][data-landing-design] .button:active:not(:disabled) {
  scale: 0.97;
  transform: none;
}
body[data-ionstar-de][data-landing-design] .button:disabled {
  --sog-rest-bg: var(--surface-2);
  --sog-rest-text: var(--muted);
  --sog-disc-bg: var(--line);
  --sog-disc-text: var(--muted);
  cursor: not-allowed;
  opacity: 0.65;
  scale: 1;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  body[data-ionstar-de][data-landing-design] .button:hover:not(:disabled) > .sog-fill {
    transform: translate(50%, -50%) scale(1);
  }
  body[data-ionstar-de][data-landing-design] .button:hover:not(:disabled) > .sog-label-window {
    color: var(--sog-disc-text);
  }
  body[data-ionstar-de][data-landing-design] .button:hover:not(:disabled) .sog-label-copy:not(.sog-label-next) {
    transform: translateY(-110%);
  }
  body[data-ionstar-de][data-landing-design] .button:hover:not(:disabled) .sog-label-next {
    transform: translateY(0);
  }
  body[data-ionstar-de][data-landing-design] .button:hover:not(:disabled) .sog-icon-first {
    transform: translate(var(--sog-icon-x), var(--sog-icon-y));
    opacity: 0;
  }
  body[data-ionstar-de][data-landing-design] .button:hover:not(:disabled) .sog-icon-next {
    transform: translate(0, 0);
    opacity: 1;
  }
}
body[data-ionstar-de][data-landing-design] .button:active:not(:disabled) > .sog-fill {
  transform: translate(50%, -50%) scale(1);
}
body[data-ionstar-de][data-landing-design] .button:active:not(:disabled) > .sog-label-window {
  color: var(--sog-disc-text);
}
body[data-ionstar-de][data-landing-design] .button:focus-visible,
body[data-ionstar-de][data-landing-design] .button:focus-visible * {
  transition-duration: 0ms;
}
body[data-ionstar-de][data-landing-design] .button.footer-contact {
  min-width: 210px;
  align-self: center;
}
/* The confirmation section deliberately has its own dark background. */
body[data-ionstar-de][data-landing-design] .button.oc-secondary {
  --sog-rest-text: #ecf2f0;
  --sog-disc-bg: #addadb;
  --sog-disc-text: #132e34;
  --sog-outline: #567378;
}
@media (max-width: 767px) {
  body[data-ionstar-de][data-landing-design] .button {
    --sog-size: 50px;
    padding-left: 21px;
    gap: 18px;
    font-size: max(var(--text-min-size), 13px);
  }
  body[data-ionstar-de][data-landing-design] .button .sog-icon-window {
    width: 23px;
    height: 23px;
  }
}
@media (max-width: 380px) {
  body[data-ionstar-de][data-landing-design] .button {
    padding-left: 18px;
    gap: 13px;
    font-size: max(var(--text-min-size), 12px);
  }
  body[data-ionstar-de][data-landing-design] .pc-purchase {
    flex-wrap: wrap;
  }
  body[data-ionstar-de][data-landing-design] .pc-purchase .button {
    flex: 1 1 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-ionstar-de][data-landing-design] .button,
  body[data-ionstar-de][data-landing-design] .button * {
    transition: none;
  }
  body[data-ionstar-de][data-landing-design] .button:active {
    scale: 1;
  }
}
:root[data-motion="paused"] body[data-ionstar-de][data-landing-design] .button,
:root[data-motion="paused"] body[data-ionstar-de][data-landing-design] .button * {
  transition: none;
}

/* Action buttons use the same component everywhere; page rules only place it. */
body[data-ionstar-de][data-landing-design] .button.button-on-media {
  --sog-rest-bg: #addadb;
  --sog-rest-text: #132e34;
  --sog-disc-bg: #132e34;
  --sog-disc-text: #addadb;
}
body[data-ionstar-de][data-landing-design] .button .sog-icon-window[data-direction="left"] { --sog-icon-x: -110%; --sog-icon-y: 0%; }
body[data-ionstar-de][data-landing-design] .button.library-jump { margin-top: 26px; }
body[data-ionstar-de][data-landing-design] .button.video-section-button { margin-top: 30px; }
body[data-ionstar-de][data-landing-design] .button.crew-directory-button { align-self: center; justify-self: end; }
body[data-ionstar-de][data-landing-design] .button.all-products-button { margin-top: 36px; }
body[data-ionstar-de][data-landing-design] .in-product-film > .product-video-button { position: absolute; bottom: 23px; left: 50%; translate: -50% 0; width: max-content; max-width: calc(100% - 32px); }
@media(max-width:767px) { body[data-ionstar-de][data-landing-design] .button.crew-directory-button { justify-self: start; } }