@font-face {
      font-family: "Very Very Sans Display";
      src: url("../assets/fonts/VeryVerySansDisplay-Medium.woff2") format("woff2");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Very Very Sans Display";
      src: url("../assets/fonts/VeryVerySansDisplay-Bold.woff2") format("woff2");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Very Very Sans Text";
      src: url("../assets/fonts/VeryVerySans.woff2") format("woff2");
      font-weight: 400 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: "Very Very Sans Text";
      src: url("../assets/fonts/VeryVerySansText-Bold.woff2") format("woff2");
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    /* =========================================================
       VARIABLES
       ========================================================= */
:root {
  --mobilepay-blue: #5873f8;
  --mobilepay-blue-dark: #4d67ec;
  --vipps-blue-facelift-lime: #D0FA7D;
  --white: #ffffff;
  --vipps-blue-facelift-bronze: #7A590C;
  --ink: #312e2c;
  --content-width: 580px;
  /* One shared vertical rhythm for story sections. */
  --story-section-gap: clamp(38px, 5vw, 62px);
  /* Shared spacing between the short-version title, copy and brand lockup. */
  --tldr-content-gap: clamp(26px, 3vw, 42px);
}
    /* =========================================================
       RESET
       ========================================================= */
    * {
      box-sizing: border-box;
    }
    html {
      margin: 0;
      padding: 0;
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      background: var(--white);
      color: var(--ink);
      font-family:
        "Very Very Sans Text",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    }
    button {
      font: inherit;
    }
    /* =========================================================
       FULL PAGE
       ========================================================= */
    .page {
      position: relative;
      width: 100%;
      min-height: 100vh;
      overflow: hidden;
      background: var(--white);
    }
    /* =========================================================
       MAIN CONTENT
       ========================================================= */
    .content {
      position: relative;
      z-index: 2;
      width: min(
        calc(100% - 48px),
        760px
      );
      margin: 0 auto;
      padding:
        clamp(60px, 8vw, 110px)
        0
        var(--story-section-gap);
    }
    /* =========================================================
       BRAND HEADER
       ========================================================= */
    .brand-change {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 1vw, 20px);
      /* Treat the lockup like another story section: the gap above it
         and the gap from it to the video are driven by the same token
         as the paragraph spacing. */
      margin-top: var(--story-section-gap);
      margin-bottom: 0;
    }
    /* =========================================================
       LOGOS
       ========================================================= */
    .mobilepay-logo,
    .vipps-logo {
      display: block;
      width: auto;
      object-fit: contain;
      flex-shrink: 0;
    }
    /*
     * The two logo files have different proportions
     * and internal whitespace.
     *
     * Matching them by height instead of width makes
     * them appear visually much closer in size.
     */
    .mobilepay-logo {
      height: clamp(22px, 2.8vw, 38px);
    }
    .vipps-logo {
      height: clamp(18px, 2vw, 30px);
    }
    /* Small text between logos */
    .brand-change-text {
      flex-shrink: 0;
      font-family:
        "Very Very Sans Display",
        sans-serif;
      font-size: clamp(
        12px,
        1.45vw,
        18px
      );
      font-weight: 500;
      line-height: 1;
      color: rgba(255,255,255,.96);
      white-space: nowrap;
    }
    /* =========================================================
       MAIN TITLE
       ========================================================= */
    .hero-title {
      color: #5A78FF;
      font-family:
        "Very Very Sans Display",
        sans-serif;
      margin:
        0
        0
        clamp(35px, 4vw, 55px);
      text-align: center;
      font-size: clamp(
        50px,
        7vw,
        92px
      );
      line-height: 1;
      letter-spacing: -.01em;
      font-weight: 600;
    }
    /* =========================================================
       STORY
       ========================================================= */
    .story {
      width: min(
        100%,
        var(--content-width)
      );
      margin: 0 auto;
      font-family:
        "Very Very Sans Text",
        sans-serif;
      font-size: clamp(
        17px,
        1.55vw,
        22px
      );
      line-height: 1.37;
      text-align: center;
      color: var(--ink);
    }
    .story p {
      margin:
        0
        0
        var(--story-section-gap);
    }
    .story p:last-child {
      margin-bottom: 0;
    }
    /* =========================================================
       INTERACTIVE WORDS
       ========================================================= */
    .term {
      appearance: none;
      display: inline;
      margin: 0;
      padding: .02em .16em .04em;
      border: 0;
      border-radius: .2em;
      background:
        linear-gradient(
          to top,
          rgba(194,206,255,.34) 0 .28em,
          transparent .28em
        );
      color: inherit;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      cursor: pointer;
      text-decoration: none;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      transition:
background .2s cubic-bezier(.22, 1, .36, 1),
        color .18s ease,
        text-decoration-color .18s ease;
    }
    .term:hover {
      color: #001580;
      background: #C2CEFF;
    }
    .term:focus-visible {
      color: #001580;
      background: #C2CEFF;
      outline: 2px solid rgba(194,206,255,.95);
      outline-offset: 3px;
    }
    /* =========================================================
       TOOLTIP
       ========================================================= */
    .tooltip-card {
      position: fixed;
      z-index: 50;
      width: min(
        320px,
        calc(100vw - 32px)
      );
      padding:
        38px
        32px
        32px;
      background:
        var(--vipps-blue-facelift-lime);
      color:
        var(--vipps-blue-facelift-bronze);
      box-shadow:
        0 22px 45px
        rgba(0,0,0,.30);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform:
        translateY(10px)
        scale(.97);
      transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;
    }
    .tooltip-card.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform:
        translateY(0)
        scale(1);
    }
    /* Tooltip title */
    .tooltip-card h2 {
      margin:
        0
        0
        13px;
      font-family:
        "Very Very Sans Display",
        sans-serif;
      font-size: 24px;
      line-height: 1.05;
      letter-spacing: -.01em;
      font-weight: 600;
    }
    /* Tooltip text */
    .tooltip-card p {
      margin: 0;
      font-family:
        "Very Very Sans Text",
        sans-serif;
      font-size: 15px;
      line-height: 1.28;
      text-align: left;
    }
    /* Close button */
    .tooltip-close {
      position: absolute;
      top: 14px;
      right: 20px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--vipps-blue-facelift-bronze);
      font-size: 27px;
      line-height: 1;
      cursor: pointer;
    }
    /* =========================================================
   TLDR TOGGLE + VIEW
   ========================================================= */
/* =========================================================
   TLDR CONTENT
   ========================================================= */
.tldr-view {
  width: min(100%, var(--content-width));
  min-height: clamp(420px, 60vh, 640px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tldr-view[hidden] {
  display: none;
}
.tldr-question-line {
  width: 100%;
  text-align: center;
}
.tldr-title {
  display: inline;
  margin: 0;
  font-family: "Very Very Sans Display", sans-serif;
  font-size: clamp(50px, 7vw, 92px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.tldr-copy {
  margin: 0;
  font-family: "Very Very Sans Text", sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.3;
}
/* When the short version is active, center the short story as one group.
   The title-to-copy and copy-to-lockup gaps use the exact same token. */
.page.is-tldr-active .content {
  min-height: 100vh;
  padding-top: clamp(90px, 12vh, 130px);
  padding-bottom: clamp(90px, 12vh, 130px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page.is-tldr-active .tldr-view {
  min-height: 0;
}
.page.is-tldr-active .brand-change {
  margin-top: var(--tldr-content-gap);
}
    /* =========================================================
       LANGUAGE TOGGLE
       ========================================================= */
    .language-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
      display: flex;
      align-items: center;
      height: 45px;
      gap: 5px;
      padding: 4px;
      border: 1px solid rgba(255,255,255,.4);
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .language-toggle button {
      font-family:
        "Very Very Sans Text",
        sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 35px;
      border: 0;
      border-radius: 999px;
      padding: 0 12px;
      background: transparent;
      color: rgba(255,255,255,.72);
      font-size: 14px;
      line-height: 1;
      font-weight: 600;
      cursor: pointer;
      transition: background .16s ease, color .16s ease;
    }
    .language-toggle button.is-active {
      background: var(--white);
      color: var(--mobilepay-blue);
    }
    .language-version[hidden] {
      display: none;
    }
    /* =========================================================
       TABLET
       ========================================================= */
    @media (max-width: 900px) {
      :root {
        --content-width: 560px;
      }
      .content {
        width: min(
          calc(100% - 40px),
          600px
        );
        padding-top: 55px;
      }
      .hero-title {
        margin-bottom: 40px;
      }
      .story {
        font-size:
          clamp(
            16px,
            2.3vw,
            20px
          );
        line-height: 1.4;
      }
    }
    /* =========================================================
       MOBILE
       ========================================================= */
    @media (max-width: 600px) {
      .tldr-toggle {
        top: 12px;
        padding: 10px 12px;
        font-size: 14px;
      }
      .tldr-view {
        min-height: 58vh;
      }
      .tldr-title {
        font-size: clamp(42px, 12vw, 58px);
      }
      .tldr-copy {
        font-size: clamp(18px, 5vw, 22px);
      }
      .language-toggle {
        top: 12px;
        right: 12px;
      }
      .language-toggle button {
        padding: 0 10px;
        font-size: 14px;
      }
      .content {
        width:
          calc(100% - 32px);
        padding:
          92px
          0
          var(--story-section-gap);
      }
      .brand-change {
        gap: 10px;
      }
      /*
       * Matching by visual height gives both logos a more balanced appearance on mobile.
       */
      .mobilepay-logo {
        width: auto;
        height: 28px;
      }
      .vipps-logo {
        width: auto;
        height: 27px;
      }
      .brand-change-text {
        font-size: 10px;
      }
      .hero-title {
        margin-bottom: 34px;
        font-size:
          clamp(
            46px,
            14vw,
            66px
          );
        line-height: .94;
      }
      .story {
        width: 91%;
        font-size:
          clamp(
            15px,
            4.2vw,
            18px
          );
        line-height: 1.38;
      }
      .story p {
        margin-bottom: 38px;
      }
      /*
       * Tooltip becomes centered on mobile.
       */
      .tooltip-card {
        left: 50% !important;
        top: 50% !important;
        width:
          min(
            330px,
            calc(100vw - 28px)
          );
        transform:
          translate(
            -50%,
            calc(-50% + 10px)
          )
          scale(.97);
      }
      .tooltip-card.is-open {
        transform:
          translate(-50%, -50%)
          scale(1);
      }
    }
    /* =========================================================
       VERY SMALL PHONES
       ========================================================= */
    @media (max-width: 380px) {
      .brand-change {
        gap: 7px;
      }
      .mobilepay-logo {
        width: auto;
        height: 24px;
      }
      .vipps-logo {
        width: auto;
        height: 23px;
      }
      .brand-change-text {
        font-size: 8px;
      }
      .story {
        width: 94%;
        font-size: 15px;
      }
    }
    /* =========================================================
   VIDEO SECTION
   ========================================================= */
.video-section {
  width: 100%;
  background: #ffffff;
  padding:
    clamp(48px, 7vw, 96px)
    clamp(16px, 4vw, 48px);
}
.video-wrap {
  width: min(50%, 600px);
  margin: 0 auto;
}
.video-wrap video {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: clamp(12px, 1.5vw, 22px);
  object-fit: cover;
  background: #ffffff;
}
    /* =========================================================
       REDUCED MOTION
       ========================================================= */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition: none !important;
      }
    }
/* =========================================================
   SHARED NAVIGATION
   ========================================================= */
.site-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 45px;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .18s ease, border-color .18s ease;
}
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  font-family: "Very Very Sans Text", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.site-nav a:hover { color: #fff; }
.site-nav a.is-active { background: #fff; color: var(--mobilepay-blue); }
.language-toggle,
.site-nav { transition: background .18s ease, border-color .18s ease; }
.language-toggle.on-light,
.site-nav.on-light {
  border-color: rgba(88,115,248,.28);
  background: rgba(255,255,255,.86);
  box-shadow: 0 5px 22px rgba(20,30,70,.08);
}
.language-toggle.on-light button { color: rgba(88,115,248,.62); }
.language-toggle.on-light button.is-active { background: var(--mobilepay-blue); color: #fff; }
.site-nav.on-light a { color: rgba(88,115,248,.66); }
.site-nav.on-light a:hover { color: var(--mobilepay-blue); }
.site-nav.on-light a.is-active { background: var(--mobilepay-blue); color: #fff; }
/* =========================================================
   FAQ PAGE
   ========================================================= */
.faq-page {
  min-height: 100vh;
  background: #fff;
  color: var(--ink);
}
.faq-shell {
  width: min(calc(100% - 48px), 900px);
  margin: 0 auto;
  padding: clamp(120px, 12vw, 180px) 0 clamp(90px, 10vw, 150px);
}
.faq-kicker {
  margin: 0 0 18px;
  color: var(--mobilepay-blue);
  font-family: "Very Very Sans Display", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .08em;
}
.faq-title {
  margin: 0 auto 24px;
  max-width: 760px;
  color: var(--mobilepay-blue);
  font-family: "Very Very Sans Display", sans-serif;
  font-size: clamp(52px, 8vw, 100px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.01em;
  text-align: center;
}
.faq-intro {
  max-width: 620px;
  margin: 0 auto clamp(56px, 8vw, 90px);
  color: var(--ink);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.4;
  text-align: center;
}
.faq-section-title {
  margin: 54px 0 16px;
  color: var(--mobilepay-blue);
  font-family: "Very Very Sans Display", sans-serif;
  font-size: 18px;
  font-weight: 600;
}
.faq-list { border-top: 1px solid #dedede; }
.faq-item {
  border-bottom: 1px solid #dedede;
  transition: background .18s ease;
}
.faq-item[open] { background: #f8f9ff; }
.faq-question {
  list-style: none;
  display: grid;
  grid-template-columns: 42px 1fr 32px;
  gap: 14px;
  align-items: center;
  padding: 24px 12px;
  cursor: pointer;
  color: var(--ink);
  font-family: "Very Very Sans Display", sans-serif;
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 500;
  line-height: 1.16;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #C2CEFF;
  color: #001580;
  font-family: "Very Very Sans Text", sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.faq-list--support .faq-number {
  background: #001580;
  color: #E5EAFF;
}
.faq-plus {
  position: relative;
  width: 22px;
  height: 22px;
  justify-self: end;
}
.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--mobilepay-blue);
  transform: translate(-50%,-50%);
  transition: transform .2s ease;
}
.faq-plus::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: translate(-50%,-50%) rotate(0deg); }
.faq-answer {
  padding: 0 58px 28px 68px;
  color: var(--ink);
  font-family: "Very Very Sans Text", sans-serif;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.52;
}
.faq-answer p { margin: 0 0 14px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-footer {
  margin-top: 70px;
  text-align: center;
}
.faq-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: #C2CEFF;
  color: #001580;
  font-family: "Very Very Sans Text", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(0,21,128,.14);
  transition:
background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}
.faq-back:hover {
  background: #001580;
  color: #E5EAFF;
  box-shadow: 0 5px 18px rgba(0,21,128,.20);
}
@media (max-width: 600px) {
  .site-nav { top: 12px; left: 12px; }
  .site-nav a { padding: 0 10px; font-size: 14px; }
  .faq-shell { width: calc(100% - 28px); padding-top: 112px; }
  .faq-title { font-size: clamp(38px, 10.8vw, 58px); }
  .faq-question {
    grid-template-columns: 34px 1fr 24px;
    gap: 10px;
    padding: 20px 6px;
  }
  .faq-number { width: 30px; height: 30px; font-size: 11px; }
  .faq-answer { padding: 0 40px 24px 50px; }
}
@media (max-width: 430px) {
  .site-nav a { padding: 0 8px; }
  .language-toggle { gap: 5px; padding: 4px; }
  .language-toggle button { padding: 0 8px; }
}
/* =========================================================
   MOTION SUPPORT
   ========================================================= */
/* Rounded data-explainer cards */
.tooltip-card {
  border-radius: clamp(20px, 2vw, 28px);
  overflow: hidden;
}
/* GSAP hover targets use transforms only when they are not layout-critical. */
.site-nav a,
.language-button,
.faq-back,
.faq-question,
.term {
  transform-origin: center;
}
/* The TLDR control is positioned with translateX(-50%), so GSAP deliberately
   does not write transforms to it. */
.tldr-toggle {
  transform-origin: center;
}
/* =========================================================
   REFINED INTERACTION + INVERTED STORY THEME
   ========================================================= */
/* Interactive terms: quiet marker highlight only. No dotted underline/icon. */
.term {
  padding: .02em .12em .04em;
  border-radius: .16em;
  background: linear-gradient(
    to top,
    rgba(194,206,255,.38) 0 .26em,
    transparent .26em
  );
  text-decoration: none;
}
.term:hover,
.term:focus-visible {
  color: #001580;
  background: #C2CEFF;
}
/* One-time discovery cue for explainer terms. The marker grows and settles
   back without moving text or changing layout. */
.term.term-attention {
  animation: term-attention-pulse 3200ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes term-attention-pulse {
  0%, 100% {
    box-shadow: inset 0 -.22em 0 rgba(194,206,255,.34);
  }
  45% {
    box-shadow: inset 0 -.58em 0 rgba(194,206,255,.88);
  }
}
/* Cross-document transitions: keep the old page fully opaque while the new
   page settles over it. This avoids exposing a bright intermediate canvas. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: core-story-page-in 180ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes core-story-page-in {
  from { transform: translateY(5px); opacity: .985; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .term.term-attention {
    animation: none !important;
  }
}
/* Vipps SVG is supplied in brand blue. Keep it white on the original blue
   story surface, then reveal its native blue in the inverted light theme. */
.vipps-logo {
  filter: brightness(0) invert(1);
}
/* Shared brand lockup: optical alignment between the two differently proportioned SVGs. */
.brand-change-logo {
  display: block;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
/* MobilePay's mark + wordmark has more visual whitespace, so it needs a slightly
   taller box than Vipps to make the visible letterforms feel equally sized. */
.mobilepay-logo {
  height: clamp(30px, 3.05vw, 42px);
}
.vipps-logo {
  height: clamp(20px, 1.85vw, 25px);
}
@media (max-width: 600px) {
  .mobilepay-logo { height: 28px; }
  .vipps-logo { height: 19px; }
}
@media (max-width: 380px) {
  .mobilepay-logo { height: 24px; }
  .vipps-logo { height: 16.5px; }
}
/* =========================================================
   ACCESSIBILITY + RESPONSIVE HARDENING
   ========================================================= */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 1000;
  transform: translate(-50%, -160%);
  padding: 10px 16px;
  border-radius: 999px;
  background: #E5EAFF;
  color: #001580;
  font-family: "Very Very Sans Text", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 5px 22px rgba(0,21,128,.18);
  transition: transform .16s ease;
}
.skip-link:focus {
  transform: translate(-50%, 0);
  outline: 3px solid #001580;
  outline-offset: 3px;
}
.site-nav a:focus-visible,
.language-button:focus-visible,
.theme-toggle:focus-visible,
.faq-back:focus-visible,
.faq-question:focus-visible {
  outline: 3px solid #E5EAFF;
  outline-offset: 3px;
}
.tldr-toggle:focus-visible,
.tooltip-close:focus-visible {
  outline: 3px solid #001580;
  outline-offset: 3px;
}
.faq-page .site-nav a:focus-visible,
.faq-page .language-button:focus-visible,
.faq-page .faq-back:focus-visible,
.faq-page .faq-question:focus-visible,
.site-nav.on-light a:focus-visible,
.language-toggle.on-light .language-button:focus-visible,
body.theme-inverted .site-nav a:focus-visible,
body.theme-inverted .language-button:focus-visible,
body.theme-inverted .theme-toggle:focus-visible {
  outline-color: #001580;
}
.faq-question:focus-visible { border-radius: 8px; }
@media (max-width: 600px) {
  .tldr-toggle { top: 58px; }
  .content { padding-top: 132px; }
}
@media (max-width: 360px) {
  .site-nav a,
  .language-toggle button {
    padding-left: 6px;
    padding-right: 6px;
  }
}
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 3px !important;
  }
}
/* =========================================================
   SWIPE CONTROL, COMPACT NAVIGATION AND LOCALIZED FOOTER
   ========================================================= */
.tldr-toggle {
  --thumb-size: 35px;
  position: fixed;
  top: 20px;
  bottom: auto;
  left: 50%;
  z-index: 200;
  display: block;
  width: min(200px, calc(100vw - 32px));
  height: 45px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background: #5A78FF;
  color: #fff;
  font-family: "Very Very Sans Text", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transform: translateX(-50%);
  box-shadow: 0 6px 24px rgba(0,21,128,.18);
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  transition: background .2s ease, opacity .2s ease, transform .28s ease;
}
.tldr-toggle:hover { background: #5A78FF; }
.tldr-toggle.is-active { background: #5A78FF; }
.tldr-toggle.is-active:hover { background: #5A78FF; }
.tldr-toggle.is-scroll-hidden:not(:focus-visible) {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 36px));
}
.tldr-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.swipe-label {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 14px 0 40px;
}
.tldr-toggle.is-active .swipe-label { padding: 0 40px 0 14px; }
.swipe-thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  display: block;
  width: var(--thumb-size);
  height: var(--thumb-size);
  max-width: none;
  pointer-events: none;
  transition: transform 680ms cubic-bezier(.22,1,.36,1);
}
.tldr-toggle.is-dragging .swipe-thumb { transition: none; }
body.story-short { background: #5A78FF; color: #fff; }
.page.is-tldr-active { min-height: calc(100svh - 88px); background: #5A78FF; color: #fff; }
.page.is-tldr-active .content {
  min-height: calc(100svh - 88px);
  padding-top: 132px;
  padding-bottom: 44px;
}
.tldr-title { color: #fff; }
.term.tldr-answer {
  display: inline-block;
  margin-left: .10em;
  padding: .02em .12em .06em;
  border: 0;
  border-radius: 8px;
  vertical-align: baseline;
  color: #7A590C;
  background: #D0FA7D;
  box-shadow: none;
  font-family: "Very Very Sans Display", sans-serif;
  font-size: clamp(46px, 7vw, 92px);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.01em;
  transition: box-shadow .2s ease;
}
.term.tldr-answer:hover { box-shadow: 0 0 0 4px rgba(208,250,125,.22); }
.term.tldr-answer:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.tooltip-card { z-index: 600; max-height: calc(100dvh - 40px); overflow-y: auto; }
.tooltip-card h2 { letter-spacing: -.01em; }
.tooltip-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(42vh, 340px);
  margin: 0 auto 18px;
  border-radius: clamp(4px, 0.5vw, 8px);
}
.tooltip-image[hidden] { display: none; }
.tooltip-card p { white-space: pre-line; }
.tooltip-card a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .14em;
}
.site-header { position: fixed; inset: 0 0 auto; height: 0; z-index: 400; pointer-events: none; }
.nav-cluster { position: absolute; top: 20px; left: 20px; display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.site-header .site-nav { position: static; }
.site-header .language-toggle { pointer-events: auto; }
.language-toggle button { min-width: 38px; text-align: center; }
.nav-brand {
  position: relative;
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}
.nav-brand video {
  position: absolute;
  width: 350%;
  height: auto;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.nav-brand-poster { display: block; width: 100%; height: 100%; object-fit: contain; }
.nav-brand:focus-visible { outline: 3px solid #E5EAFF; outline-offset: 4px; }
body:not(.story-short) .nav-brand:focus-visible,
body:not(.story-short) .tldr-toggle:focus-visible,
body:not(.story-short) .term:focus-visible { outline-color: #001580; }
.site-footer {
  display: flex;
  justify-content: center;
  padding: var(--story-section-gap) 24px;
  background: var(--white);
}
.faq-page .site-footer {
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2vw, 24px);
}
.story-short .site-footer { padding: 28px 24px; background: #5A78FF; }
.site-footer--light { background: #fff; }
.footer-lockup { display: block; width: min(360px, 100%); height: auto; }
.help-center-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #C2CEFF;
  color: #001580;
  font-family: "Very Very Sans Text", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(0,21,128,.12);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.help-center-link:hover {
  background: #001580;
  color: #E5EAFF;
  box-shadow: 0 5px 18px rgba(0,21,128,.18);
}
.help-center-link:focus-visible {
  outline: 3px solid #001580;
  outline-offset: 3px;
}
.faq-jump { display: flex; justify-content: center; margin: 0 0 clamp(56px, 8vw, 90px); }
.faq-business-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 999px;
  color: #001580;
  background: #C2CEFF;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.faq-business-link:hover { color: #E5EAFF; background: #001580; }
.faq-business-link:focus-visible { outline: 3px solid #001580; outline-offset: 4px; }
#for-business { scroll-margin-top: 100px; }
#for-business:focus-visible { outline: 3px solid #001580; outline-offset: 6px; }
@media (min-width: 601px) and (max-width: 1000px) {
  .tldr-toggle { top: 20px; }
  .content { padding-top: 170px; }
  .page.is-tldr-active .content { padding-top: 170px; }
}
@media (max-width: 600px) {
  .nav-cluster { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); gap: 8px; }
  .nav-brand { flex-basis: 45px; width: 45px; height: 45px; border-radius: 11px; }
  .site-header .language-toggle {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }
  .site-header .language-toggle button {
    width: auto;
    min-width: 35px;
    height: 35px;
    padding-inline: 10px;
    font-size: 14px;
  }
  .nav-cluster,
  .site-header .language-toggle {
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }
  .site-header.is-mobile-nav-hidden .nav-cluster,
  .site-header.is-mobile-nav-hidden .language-toggle {
    transform: translateY(calc(-100% - 24px));
  }
  .tldr-toggle, .tldr-toggle.is-scroll-hidden {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    height: 45px;
    padding: 0;
    font-size: 14px;
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 6px 24px rgba(0,21,128,.24);
    /* The mobile slider owns touches that start on it. This removes the
       browser's scroll-vs-swipe hesitation while leaving the rest of the
       page's scrolling behavior untouched. */
    touch-action: none;
  }
  .content { padding-top: 112px; }
  .page.is-tldr-active { min-height: calc(100svh - 160px); }
  .page.is-tldr-active .content { min-height: calc(100svh - 160px); padding: 112px 0 36px; }
  .story-short .site-footer { padding: 24px 24px calc(104px + env(safe-area-inset-bottom)); }
  .hero-title { font-size: clamp(38px, 10.8vw, 58px); }
  .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .site-footer--light { padding-bottom: 36px; }
  .footer-lockup { width: min(320px, 100%); }
  #for-business { scroll-margin-top: 86px; }
}
@media (max-width: 360px) {
  .nav-cluster { gap: 6px; }
  .site-header .site-nav { gap: 4px; padding: 4px; }
  .site-header .site-nav a { padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-thumb { transition: none !important; }
  .nav-brand video { display: none; }
}
@media (forced-colors: active) {
  .tldr-toggle, .term.tldr-answer, .faq-business-link, .help-center-link { border: 1px solid ButtonText; }
}
/* The short answer keeps its lime fill throughout the discovery cue. */
.term.tldr-answer.term-attention {
  animation-name: answer-attention;
}
@keyframes answer-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208,250,125,0); }
  45% { box-shadow: 0 0 0 7px rgba(208,250,125,.20); }
}