:root {
  --fr-black: #010101;
  --fr-orange: #FE3400;
  --fr-cyan: #00FFFF;
  --fr-green: #00FF00;
  --fr-text: #000000;

  --fr-font-primary: "antipoda-variable", sans-serif;
  --fr-font-secondary: "Satoshi", sans-serif;
  --fr-font-display: "mencken-std-head-narrow", sans-serif;
}

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

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: var(--fr-black);
  color: var(--fr-text);
  font-family: var(--fr-font-primary);
}

.fr-site {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -68px; 
  overflow-x: clip;
}

/* =========================
   HOME PAGE CANVAS
   Body and homepage base stay black.
   The scroll colour is applied only to the colourful homepage sections.
   ========================= */

html:has(.fr-home-page),
body:has(.fr-home-page) {
  background: var(--fr-black);
}

.fr-home-page {
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: var(--fr-black);
}

/* Homepage colour-change area only */
.fr-home-page .fr-product-summary-section,
.fr-home-page .fr-subscriptions-section,
.fr-home-page .fr-pricing-section,
.fr-home-page .fr-billing-section {
  background-color: var(--fr-home-canvas-colour, transparent);
}

/* =========================
   HEADER
   ========================= */

.fr-header {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--fr-black);
  color: #ffffff;
  overflow: hidden;
  min-height: calc(100vh + 24px);
}

.fr-header__main {
  display: grid;
  grid-template-columns: 90% 10%;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* LEFT BLACK AREA */

.fr-header__left {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* Top row: logo + strapline */

.fr-header__top {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: end;
  margin: 0;
  padding: 0 0 0.8em 0;
}

.fr-header__logo-link {
  display: block;
  padding-left: 2em;
}

.fr-header__logo {
  display: block;
  width: 90%;
  max-width: none;
  height: auto;
  margin: 0;
  transform: translateY(7px);
}

.fr-header__strapline {
  margin: 5px 210px 5px 0;
  padding-right: 0.6em;
  color: white;
  font-family: var(--fr-font-secondary);
  font-size: 36px;
  font-weight: 900;
  line-height: 33px;
  background: transparent;
  border: 0px solid black;
  letter-spacing: -1px;
  text-align: right;
  text-transform: uppercase;
}

/* Hero row: office image + cloud/text column */

.fr-hero-grid {
  display: grid;
  grid-template-columns: 85% 15%;
  flex: 1;
  width: 100%;
  min-height: 593px;
  margin: 0;
  padding: 0;
}

.fr-hero-card {
  position: relative;
  height: 593px;
  min-height: 593px;
  margin-left: 2em;
  margin-right: 2em;
  border-radius: 12px;
  overflow: hidden;
}

.fr-hero-card--image {
  background-image: url("/uploads/website/RETRO-OFFICE.webp");
  background-size: cover;
  background-position: calc(50% - 95px) calc(50% + 0px);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.fr-hero-card--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/uploads/website/OVERLAY.webp");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
  opacity: 1;
  pointer-events: none;
}

.fr-hero-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 593px;
  min-height: 575px;
  margin-right: 0.75em;
  padding: 0;
  overflow: visible;
}

.fr-cloud-card {
  width: 168%;
  max-width: none;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

.fr-cloud-card__image {
  display: block;
  width: 100%;
  height: 225px;
  object-fit: cover;
  border-radius: 12px;
}

.fr-hero-copy {
  margin: 0;
  padding: 0;
  overflow: visible;
}

.fr-hero-copy h1 {
  margin: 0;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  color: var(--fr-cyan);
  font-family: var(--fr-font-secondary);
  font-size: 36px;
  font-weight: 900;
  line-height: 33px;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.fr-hero-button {
  display: inline-block;
  position: relative;
  margin-top: 43px !important;
  padding: 2px 3px;
  overflow: hidden;
  color: #000000;
  background: #ffffff;
  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-transform: uppercase;
  text-decoration: none;
}

.fr-hero-button__content {
  position: relative;
  z-index: 2;
}

.fr-hero-button__text {
  white-space: nowrap;
}

.ticker-hover-button::after {
  content: "SIGN ME UP     SIGN ME UP     SIGN ME UP     SIGN ME UP     SIGN ME UP     SIGN ME UP";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  font-size: 29px;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  color: inherit;
  line-height: 1;
  animation: none;
}


.ticker-hover-button:hover {
  background: #ffff00;
}

.ticker-hover-button:hover .fr-hero-button__content {
  opacity: 0;
}

.ticker-hover-button:hover::after {
  opacity: 1;
  animation: tickerInsideButton 3s linear infinite;
}

.ticker-hover-button.is-ticker-active .fr-hero-button__content {
  opacity: 0;
}

.ticker-hover-button.is-ticker-active::after {
  opacity: 1;
  animation: tickerInsideButton 3s linear infinite;
}

@keyframes tickerInsideButton {
  from {
    transform: translate(0, -50%);
  }

  to {
    transform: translate(-248px, -50%);
  }
}

.fr-hero-mobile-cloud-row {
  display: contents;
}


/* RIGHT HEADER TEXT COLUMN */

.fr-header__menu-strip {
  position: relative;
  display: block;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: transparent;
  border-bottom-left-radius: 0;
  overflow: visible;
}

.fr-hero-tags {
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 900;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.fr-hero-tags span {
  display: block;
}

.fr-hero-tags--desktop {
  position: absolute;
  right: 0.35em;
  bottom: 0.15em;
  transform: translateY(0);
  margin: 0;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  color: #D1E231;
  font-family: var(--fr-font-secondary);
  font-size: 24px;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -1px;
  text-align: right;
  text-transform: uppercase;
}

.fr-hero-tags--desktop span {
  display: block;
  white-space: nowrap;
}

.fr-hero-tags--desktop span + span {
  margin-top: 0.05em;
}

.fr-hero-tags--mobile {
  display: none;
  color: var(--fr-green);
  padding: 8px;
}

/* TEMPORARY NEXT SECTION */

.fr-placeholder-section {
  min-height: 400px;
  padding: 4rem 2rem;
  background: #ffffff;
}



/* =========================
   MODULES SECTION
   ========================= */

.fr-modules-section {
  width: 100vw;
  margin: 0;
  padding: 0 0 5em 0;
  background: #ffffff;
  color: #303031;
  overflow: hidden;
}

.fr-modules-grid {
  display: grid;
  grid-template-columns: 12% 43% 5% 40%;
  width: 100%;
}

/* Side labels: MENU / FIN */

.fr-modules-side-label {
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #303031;
}

.fr-modules-side-label--menu {
  padding: 225px 35px 0 20px; /* TWEAK: moves MENU down/right */
  text-align: right;
}

.fr-modules-side-label--fin {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 35px 110px 30px;
}

/* Large Mencken module list */

.fr-modules-list {
  padding-top: 225px; /* TWEAK: first item position */
  text-align: center;
  overflow: visible;
}

.fr-module-item {
  margin: 0 -200px 70px -200px; /* TWEAK: width/spread + vertical spacing */
  font-family: var(--fr-font-display);
  font-size: 92px;
  font-weight: 400;
  line-height: 0.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #303031;
}

.fr-module-tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: default;
}

/* Tooltip image */

.fr-module-tooltip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: 230px;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.fr-module-tooltip img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.fr-module-tooltip-trigger:hover .fr-module-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Right column */

.fr-modules-info {
  padding: 0 20px;
}

.fr-modules-info__image {
  display: block;
  width: 33%;
  max-width: 260px;
  height: auto;
  margin: 7em 0 0 1em;
  border-radius: 12px;
  transform: translate(60px, -30px);
}

.fr-modules-info__copy {
  margin: 250px 0 0 190px; /* TWEAK: right column text position */
  color: #303031;
}

.fr-modules-info__copy h2 {
  margin: 0 0 15px 0;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.fr-modules-info__copy p {
  margin: 0;
  font-family: var(--fr-font-secondary);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.fr-modules-info__copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fr-indent {
  display: inline-block;
  padding-left: 44px;
}

.fr-modules-more-wrap {
  margin: 3em 0 0 0; /* TWEAK: space under the topics list */
  text-align: center;
}

.fr-more-ticker-button {
  position: relative;
  display: inline-block;
  overflow: hidden;

  /* CHANGED: header-button style */
  padding: 1px 2px;
  border: 2px solid black;
  border-radius: 0;
  background: #ffffff;
  color: #000000;

  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-transform: uppercase;
  text-decoration: none;
}

.fr-more-ticker-button__content {
  position: relative;
  z-index: 2;
}

.fr-more-ticker-button__text {
  white-space: nowrap;
}

.fr-more-ticker-button::after {
  content: attr(data-ticker);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  font-size: 29px;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  line-height: 1;
  animation: none;
}

.fr-more-ticker-button:hover {
  background: #00ffff;
}

.fr-more-ticker-button:hover .fr-more-ticker-button__content {
  opacity: 0;
}

.fr-more-ticker-button:hover::after {
  opacity: 1;
  animation: frMoreTickerInsideButton 3s linear infinite;
}

@keyframes frMoreTickerInsideButton {
  from {
    transform: translate(0, -50%);
  }

  to {
    transform: translate(-248px, -50%); /* CHANGED */
  }
}


/* =========================
   CAT + VIDEO SECTION
   ========================= */

.fr-cat-video-section {
  --fr-cat-video-progress: 0;

  width: 100vw;
  margin: -1em 0 0 0;
  padding: 4px 0 0 0;
  background: #ffffff;
  color: #303031;
  overflow: hidden;
  position: relative;
  z-index: 600;
}

.fr-cat-video-grid {
  display: grid;
  grid-template-columns: 34% 2% 17.752% 46.248%;
  width: 100%;
}

/* Cat column */

.fr-cat-video-cat-col {
  position: relative;
  z-index: 30;
  padding-top: 238px;
}

.fr-cat-video-cat {
  display: block;
  width: 100%;
  max-width: 530px;
  height: auto;
}

/* Empty spacer column */

.fr-cat-video-spacer-col {
  min-height: 1px;
}

/* Video/fish column */

.fr-cat-video-centre-col {
  position: relative;
  z-index: 10;
  padding-top: 153px;
  min-height: 620px;
}

/* Temporary black video circle */

.fr-cat-video-disc {
  width: clamp(120px, 16vw, 320px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 999px;
  background: #000000;

  transform: scale(var(--fr-cat-video-disc-scale, 0.35));
  transform-origin: center center;
}

/* Fish */


.fr-cat-video-fish {
  position: absolute;

  /*
    TWEAK:
    This is the fish's starting anchor point near the video circle.
    Smaller top = fish starts higher.
    Larger top = fish starts lower.
  */
  top: 320px;
  left: 50%;

  display: block;
  width: 38%;
  max-width: 150px;
  height: auto;
  margin: 0;

  transform:
    translateX(calc(-50% + var(--fr-cat-video-fish-x, 0px)))
    translateY(var(--fr-cat-video-fish-y, 0px))
    rotate(var(--fr-cat-video-fish-rotate, -20deg));

  transform-origin: 50% 55%;
}



/* Right note */

.fr-cat-video-copy-col {
  padding-top: 283px; /* 78px column padding + 205px spacer */
}

.fr-cat-video-note {
  display: grid;
  grid-template-columns: 32% 68%;
  align-items: center;
  width: 100%;
}

.fr-cat-video-arrow {
  display: block;
  justify-self: end;
  width: 28px;
  height: auto;
  margin-right: 12px;
  transform: none;
}

.fr-cat-video-text {
  display: block;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}



/* =========================
   PRODUCT SUMMARY CARDS
   ========================= */

.fr-product-summary-section {
  position: relative;
  z-index: 700;
  width: 100vw;
  margin: -20px 0 0 0;
  padding: 0 3em 5em 3em;
  background: transparent;
  color: #303031;
  overflow: visible;
}

.fr-product-summary-gradient {
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 17%,
    rgba(255, 255, 255, 0) 64%
  );
}

.fr-product-summary-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  align-items: stretch;
}

.fr-product-card {
  display: flex;
  flex-direction: column;
  min-height: 325px; /* TWEAK: card height */
  padding: 8px 14px 42px 14px;
  background: #ffffff;
  border: 2px solid #080808;
  border-radius: 14px;
  overflow: hidden;
}

.fr-product-card__image {
  display: block;
  width: 100%;
  height: 210px; /* TWEAK: image height */
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 25px 0;
}

.fr-product-card__title {
  margin: 0 0 18px 0;
  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.fr-product-card__text {
  margin: 0 auto;
  max-width: 260px;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 15px; /* TWEAK: body text size */
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

.fr-product-summary-smiley-wrap {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 50% 50%;
  width: 100%;
}

.fr-product-summary-smiley {
  display: block;
  width: 25%;
  max-width: 220px;
  min-width: 130px;
  height: auto;
  margin: -57px auto 0 auto; /* TWEAK: smiley overlap */
  grid-column: 1 / 2;
}


/* =========================
   SUBSCRIPTIONS TEXT SECTION
   ========================= */

.fr-subscriptions-section {
  position: relative;
  z-index: 710;
  width: 100vw;
  margin: 0;
  padding: 7em 0 5em 0;
  background: transparent;
  color: #303031;
  overflow: visible;
  text-align: center;
}

.fr-subscriptions-kicker {
  display: inline-block;
  color: #303031;
  font-family: var(--fr-font-secondary);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fr-subscriptions-lines {
  width: 100%;
  margin: 3.2em auto 0;
  overflow: visible;
}

.fr-subscriptions-line {
  margin: 0 -550px 12px -550px;
  color: #303031;
  font-family: var(--fr-font-display);
  font-size: 103px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.fr-subscriptions-tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: default;
}

.fr-subscriptions-tooltip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: 280px;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.fr-subscriptions-tooltip img {
  display: block;
  width: 100%;
  height: auto;
}

.fr-subscriptions-tooltip-trigger:hover .fr-subscriptions-tooltip {
  opacity: 1;
  visibility: visible;
}

.fr-subscriptions-explain {
  position: relative;
  left: 18%;
  display: inline-block;
  margin-top: 3.3em;
  margin-bottom: 6rem;
  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* Individual subscription line spacing tweaks */

.fr-subscriptions-line--1 {
  letter-spacing: 0px; /* elevate your presence */
}

.fr-subscriptions-line--2 {
  letter-spacing: 0px; /* influence your people */
}

.fr-subscriptions-line--3 {
  letter-spacing: -0.4px;
}

.fr-subscriptions-line--4 {
  letter-spacing: -0.9px;
}

/* =========================
   PRICING TABLE
   ========================= */

.fr-pricing-section {
  width: 100vw;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #303031;

  /* IMPORTANT: sticky breaks if this is hidden */
  overflow: visible;
}

.fr-pricing-table,
.fr-pricing-sticky-parent {
  position: relative;
  width: 100%;
  overflow: visible;
  padding-bottom: 35vh; 
}

/* Shared pricing grid */

.fr-pricing-heading-row,
.fr-pricing-row,
.fr-pricing-price-layer,
.fr-pricing-keep-layer {
  display: grid;
  grid-template-columns: 20% repeat(4, 20%);
  width: 100%;
}

/* =========================
   LAYER 1: PACKAGE NAMES
   Elementor: sticky top, sticky parent yes
   ========================= */

.fr-pricing-heading-row {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5000;

  align-items: stretch;
  min-height: 360px; 
  margin-top: 0px; 
  background: transparent;
}

.fr-pricing-cat-cell {
  position: relative;
  min-height: 360px;
  overflow: visible;
  display: flex;
  align-items: flex-start;
}

.fr-pricing-cat {
  display: block;
  width: 125%;
  max-width: none;
  height: auto;
  margin-left: -5em;
  margin-top: 10px;
}

.fr-pricing-plan-heading {
  align-self: flex-start;
  padding-top: 20px;
  color: #303031;
  font-family: var(--fr-font-secondary);
  font-size: 95px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -3.6px;
  text-align: center;
  text-transform: uppercase;
}

/* =========================
   LAYER 2: PACKAGE COLUMNS / ROWS
   Elementor: sticky top, sticky offset 5, translateY
   ========================= */

.fr-pricing-rows-layer {
  position: -webkit-sticky;
  position: sticky;
  top: 112px;
  z-index: 7000;
  margin-top: 0;
  padding-top: 0;
  background: #ffffff;
}

.fr-pricing-row {
  min-height: 45px;
  align-items: center;
}

.fr-pricing-row--dark {
  background: #303031;
  color: #ffffff;
}

.fr-pricing-row--light {
  background: #ffffff;
  color: #303031;
}

.fr-pricing-feature,
.fr-pricing-value {
  padding: 0.75em 1em;
  font-family: var(--fr-font-secondary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.fr-pricing-row--cta {
  min-height: 50px;
  background: #ffff00;
  color: #303031;
}

.fr-pricing-cta {
  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================
   LAYER 3: PRICE IMAGES
   Elementor: sticky top, sticky offset 41
   ========================= */

.fr-pricing-price-layer {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  z-index: 8000;
  min-height: 80px;
  margin-top: 6em;
  padding: 28px 0;
  transform: translateY(-255px);
  background: transparent;
  pointer-events: none;
}

.fr-pricing-price-cell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

.fr-pricing-price-img {
  display: block;
  width: 90%;
  max-width: 360px;
  height: auto;
}

.fr-pricing-price-img--contact {
  width: 80%;
  max-width: 360px;
}


/* =========================
   LAYER 4: KEEP SCROLLING
   Elementor: sticky bottom, sticky parent yes
   ========================= */

.fr-pricing-keep-layer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6500;

  display: grid;
  grid-template-columns: 20% repeat(4, 20%);
  align-items: end; /* CHANGED: content sits at bottom of fixed row */

  width: 100vw;
  height: 105px; /* TWEAK: height of invisible keep-scrolling area */
  padding: 0 0 24px 0; /* TWEAK: distance from bottom of screen */

  background: transparent; /* CHANGED */
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}

.fr-pricing-keep-layer.is-visible {
  opacity: 1;
  visibility: visible;
}


.fr-pricing-keep-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* CHANGED: pushes text/arrow down */
  min-height: 0;
}

.fr-pricing-keep-text {
  margin: 0;
  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.fr-pricing-keep-arrow {
  display: block;
  width: 10%;
  min-width: 18px;
  max-width: 34px;
  height: auto;
  margin-top: 8px; /* CHANGED: gap between text and arrow */
}



/* =========================
   FAQ SECTION
   ========================= */

.fr-faq-section {
  position: relative;
  z-index: 720;
  width: 100vw;
  margin: 5em 0 0 0;
  padding: 6em 6em 10em 6em;
  background: #010101;
  color: #ffffff;
  overflow: hidden;
}

.fr-faq-grid {
  display: grid;
  grid-template-columns: 20% 80%;
  width: 100%;
}

.fr-faq-left {
  padding: 20px 20px 20px 0;
  overflow: visible;
}

.fr-faq-kicker {
  margin: 0;
  width: max-content;
  white-space: nowrap;

  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: 3.7px;
  text-transform: uppercase;
}

.fr-faq-list {
  padding: 0;
  text-align: right;
}

.fr-faq-item {
  margin: 0 0 12px 0;
  padding: 0;
  border: 0;
}


.fr-faq-question {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--fr-faq-colour);
  font-family: var(--fr-font-primary);
  font-size: 27px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 1.1px;
  text-align: right;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transform: skewX(-12deg);
  transition: color 160ms ease;
}

.fr-faq-question::-webkit-details-marker {
  display: none;
}

.fr-faq-question::marker {
  display: none;
  content: "";
}

.fr-faq-question:hover,
.fr-faq-item[open] .fr-faq-question {
  color: var(--fr-faq-hover);
}

.fr-faq-answer {
  max-width: 880px;
  margin: 10px 0 22px auto;
  padding: 0 11px;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  text-align: right;
}

.fr-faq-answer p {
  margin: 0;
}


/* =========================
   RESPONSIVE: TABLET
   ========================= */

@media (min-width: 768px) and (max-width: 1180px) {

  /* HEADER */

  .fr-site {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -88px;
    overflow-x: clip;
  }

  /* HOME PAGE CANVAS — TABLET */

  .fr-home-page {
    min-height: 100vh;
    min-height: 100svh;
    background: var(--fr-black);
  }

  .fr-header {
    width: 100vw;
    min-height: auto;
    padding-top: 58px;
    padding-bottom: 6rem;
    overflow: visible;
  }

  .fr-header__main {
    display: block;
    width: 100vw;
    min-height: auto;
  }

  .fr-header__left {
    width: 100vw;
    min-height: auto;
  }

  .fr-header__top {
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: end;
    padding: 0 0 0.7em 0;
  }

  .fr-header__logo-link {
    padding-left: 1.2em;
  }

  .fr-header__logo {
    width: 100%;
    transform: translateX(-8px);
  }

  .fr-header__strapline {
    margin: 0 0 8px 0;
    padding-right: 1.2em;
    color: #ffffff;
    font-family: var(--fr-font-secondary);
    font-size: 29px;
    font-weight: 900;
    line-height: 27px;
    letter-spacing: -1px;
    text-align: right;
    text-transform: uppercase;
    transform: translateX(-105px);
  }

  .fr-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
    column-gap: 1.2em;
    min-height: auto;
    padding: 0 1.2em;
  }

  .fr-hero-card {
    grid-column: 1 / 2;
    grid-row: 1;
    height: 52vw;
    min-height: 430px;
    max-height: 560px;
    margin: 0;
  }

  .fr-hero-card--image {
    background-attachment: scroll;
    background-position: center center;
  }
  
  .fr-hero-card--image::after {
    z-index: 1;
    background-position: center center;
  }

  .fr-hero-card--image::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    height: 42%;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.48) 42%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
  }

  .fr-hero-side {
    grid-column: 2 / 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 52vw;
    min-height: 430px;
    max-height: 560px;
    margin-right: 0;
    padding: 0;
  }

  .fr-hero-mobile-cloud-row {
    display: block;
    width: 100%;
  }

  .fr-cloud-card {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  
  .fr-cloud-card__image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .fr-hero-copy {
    margin-top: 2rem;
  }

  .fr-hero-copy h1 {
    font-size: 29px;
    line-height: 27px;
  }

  .fr-hero-button {
    margin-top: 22px !important;
    font-size: 22px;
  }

  .ticker-hover-button::after {
    font-size: 24px;
  }

  .fr-hero-tags--mobile {
    position: absolute;
    right: 0.5em;
    bottom: 1.1em;
    left: auto;
    z-index: 5;
    display: block;
    width: max-content;
    max-width: calc(100% - 2.4em);
    margin: 0;
    padding: 0;
    color: #D1E231;
    font-family: var(--fr-font-secondary);
    font-size: 23px;
    font-weight: 900;
    line-height: 21px;
    letter-spacing: -1px;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(136px); /* TWEAK: positive = down, negative = up */
  }

  .fr-hero-tags--mobile br {
    display: none;
  }

  .fr-hero-tags--mobile span + span {
    margin-top: 0;
  }

  .fr-header__menu-strip,
  .fr-hero-tags--desktop {
    display: none;
  }



  /* MODULES */

  .fr-modules-grid {
    grid-template-columns: 10% 50% 5% 35%;
  }

  .fr-modules-side-label {
    font-size: 12px; /* TWEAK: MENU / FIN font size on tablet */
    line-height: 1;
  }

  .fr-modules-side-label--menu {
    padding: 180px 20px 0 12px; /* TWEAK: top right bottom left */
    text-align: right;
    transform: translate(0, 0); /* TWEAK: x = left/right, y = up/down */
  }

  .fr-modules-list {
    padding-top: 180px;
  }

  .fr-module-item {
    margin: 0 -120px 40px -120px;
    font-size: 70px;
    line-height: 0.25;
  }

  .fr-module-tooltip {
    width: 320px;
  }

  .fr-modules-side-label--fin {
    padding: 0 18px 82px 10px; /* TWEAK: top right bottom left */
    transform: translate(0, 0); /* TWEAK: x = left/right, y = up/down */
  }

  .fr-modules-info__image {
    width: 45%;
    max-width: 220px;
    margin: 6em 0 0 1em;
    transform: translate(20px, -20px);
  }

  .fr-modules-info__copy {
    margin: 255px -70px 0 50px; /* TWEAK: top right bottom left */
  }

  .fr-modules-more-wrap {
    margin-top: 2.5em;
  }




  /* TABLET CAT / VIDEO / FISH */

  .fr-cat-video-section {
    margin: calc(-1em - 2px) 0 0 0;
    padding-top: calc(4px + 2px);
    background: #ffffff;
    box-shadow: 0 -3px 0 0 #ffffff;
  }

  .fr-cat-video-grid {
    grid-template-columns: 32% 2% 22% 44%;
  }

  .fr-cat-video-cat-col {
    padding-top: 190px;
  }

  .fr-cat-video-cat {
    max-width: 430px;
  }

  .fr-cat-video-centre-col {
    padding-top: 135px;
    min-height: 560px;
  }

  .fr-cat-video-disc {
    width: clamp(120px, 20vw, 280px);
  }

  .fr-cat-video-fish {
    top: 290px;
    width: 42%;
    max-width: 130px;
  }

  .fr-cat-video-copy-col {
    padding-top: 250px;
  }

  .fr-cat-video-note {
    display: flex;
    align-items: center;
    width: max-content;
    transform: translateX(95px); /* TWEAK: positive = moves text/arrow right */
  }

  .fr-cat-video-arrow {
    width: 28px;
    margin: 0 14px 0 0; /* TWEAK: gap between arrow and text */
    transform: none; /* TWEAK: flips tablet arrow from current inherited direction */
  }


  /* TABLET PRODUCT SUMMARY CARDS */

  .fr-product-summary-section {
    margin: -110px 0 0 0; /* TWEAK: negative = moves section up */
    padding: 0 1.5em 4em 1.5em;
  }

  .fr-product-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .fr-product-card {
    min-height: 330px;
  }

  .fr-product-card__image {
    height: 220px;
  }

  .fr-product-summary-smiley {
    width: 22%;
    margin-top: -50px;
  }




  /* TABLET SUBSCRIPTIONS */


  .fr-subscriptions-section {
    margin-top: -2px;
    padding: calc(4.5em + 2px) 0 3.5em 0;
    background-color: var(--fr-home-canvas-colour, transparent);
    box-shadow: 0 -3px 0 0 var(--fr-home-canvas-colour, transparent);
  }
  
  .fr-subscriptions-line {
    margin: 0 -180px 9px -180px;
    font-size: 62px; /* TWEAK: tablet big subscriptions text size */
    line-height: 0.9;
  }

  .fr-subscriptions-explain {
    left: 14%;
  }


  .fr-subscriptions-line--1 {
    letter-spacing: 0px;
  }

  .fr-subscriptions-line--2 {
    letter-spacing: 0px;
  }

  .fr-subscriptions-line--3 {
    letter-spacing: -0.4px;
  }

  .fr-subscriptions-line--4 {
    letter-spacing: -0.7px;
  }






  /* PRICING: TABLET STICKY BUILD */

  .fr-pricing-section {
    overflow: visible;
  }

  .fr-pricing-table,
  .fr-pricing-sticky-parent {
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding-bottom: 35vh;
  }

  .fr-pricing-heading-row,
  .fr-pricing-rows-layer,
  .fr-pricing-price-layer {
    position: -webkit-sticky;
    position: sticky;
  }

  .fr-pricing-heading-row {
    top: 0;
    z-index: 5000;
    min-height: 260px;
  }

  .fr-pricing-cat-cell {
    min-height: 260px;
  }

  .fr-pricing-cat {
    width: 130%;
    margin-left: -4em;
    margin-top: 8px;
  }

  .fr-pricing-plan-heading {
    padding-top: 16px;
    font-size: 64px;
    line-height: 0.9;
    letter-spacing: -2.6px;
  }

  .fr-pricing-rows-layer {
    top: 86px;
    z-index: 7000;
    background: #ffffff;
  }

  .fr-pricing-row {
    min-height: 43px;
  }

  .fr-pricing-feature,
  .fr-pricing-value {
    padding: 0.68em 0.7em;
    font-size: 13px;
  }

  .fr-pricing-price-layer {
    top: 62px;
    z-index: 8000;
    min-height: 80px;
    margin-top: 5em;
    padding: 20px 0;
    transform: translateY(-190px);
    background: transparent;
  }

  .fr-pricing-price-img {
    width: 86%;
    max-width: 260px;
  }
  
  .fr-pricing-price-img--contact {
    width: 78%;
    max-width: 260px;
  }

  .fr-pricing-keep-layer {
    display: grid !important;
    height: 90px;
    padding: 0 0 18px 0;
  }

  .fr-pricing-keep-text {
    font-size: 13px;
  }

  .fr-pricing-keep-arrow {
    width: 9%;
    min-width: 16px;
    max-width: 28px;
  }




  /* TABLET FAQ */


  .fr-faq-section {
    padding: 4.4em 2em 8em 2em; /* TWEAK: top, right, bottom, left */
  }

  .fr-faq-grid {
    grid-template-columns: 16% 84%; /* TWEAK: smaller left column, wider questions */
  }

  .fr-faq-left {
    padding: 12px 14px 20px 0; /* TWEAK: less top/right padding */
  }

  .fr-faq-kicker {
    font-size: 13px;
    letter-spacing: 2.2px; /* TWEAK: slightly less wide */
  }

  .fr-faq-question {
    font-size: 23px;
    letter-spacing: 0.8px; /* TWEAK: helps stop unnecessary wrapping */
  }

  .fr-faq-answer {
    max-width: 760px;
  }

  .fr-faq-list {
    margin-left: -70px;
    width: calc(100% + 70px);
  }
}




/* =========================
   RESPONSIVE: MOBILE
   ========================= */

@media (max-width: 767px) {

  html,
  body {
    overflow-x: clip;
  }

  /* HEADER */

  .fr-site {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -65px;
    overflow-x: clip;
  }

  /* HOME PAGE CANVAS — MOBILE */

  .fr-home-page {
    min-height: 100vh;
    min-height: 100svh;
    background: var(--fr-black);
  }

  .fr-header {
    min-height: auto;
    padding-top: 28px;
    padding-bottom: 6rem;
    overflow: visible;
  }
  .fr-header__main {
    display: block;
    min-height: auto;
  }

  .fr-header__left {
    min-height: auto;
  }

  .fr-header__top {
    display: block;
    padding: 0 12px 12px;
  }

  .fr-header__logo-link {
    padding-left: 0;
  }

  .fr-header__logo {
    width: 80%;
    transform: translateX(-6px);
  }

  .fr-header__strapline {
    margin: 8px 0 0 0;
    padding: 0;
    color: #ffffff;
    font-family: var(--fr-font-secondary);
    font-size: clamp(22px, 7.2vw, 31px);
    font-weight: 900;
    line-height: clamp(21px, 6.8vw, 29px);
    letter-spacing: -1px;
    text-align: left;
    text-transform: uppercase;
    transform: translateX(-10px); /* TWEAK: negative = left, positive = right */
  }
  
  .fr-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    align-items: stretch;
    min-height: auto;
    padding: 0 14px;
  }

  .fr-hero-card {
    grid-column: 1 / 2;
    grid-row: 1;
    align-self: stretch;
    height: auto;
    min-height: 405px;
    max-height: none;
    margin: 0;
  }

  .fr-hero-card--image {
    background-attachment: scroll;
    background-position: 30% 70%;
  }

  .fr-hero-card--image::after {
    z-index: 1;
    background-position: center center;
  }

  .fr-hero-card--image::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    height: 46%;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.52) 44%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
  }

  .fr-hero-side {
    grid-column: 2 / 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    height: auto;
    min-height: 405px;
    max-height: none;
    margin-right: 0;
    padding: 0;
    gap: 0;
  }

  .fr-hero-mobile-cloud-row {
    display: block;
    width: 100%;
  }

  .fr-cloud-card {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .fr-cloud-card__image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .fr-hero-copy {
    margin-top: 1.6rem;
  }

  .fr-hero-copy h1 {
    font-size: clamp(22px, 7.2vw, 31px);
    line-height: clamp(21px, 6.8vw, 29px);
  }

  .fr-hero-button {
    margin-top: 22px !important;
    font-size: 22px;
  }

  .ticker-hover-button::after {
    font-size: 24px;
  }

  .fr-hero-tags--mobile {
    position: absolute;
    right: 5px; /* TWEAK: smaller = further right, larger = further left */
    bottom: 22px; /* TWEAK: smaller = lower, larger = higher */
    left: auto;
    z-index: 5;
    display: block;
    width: max-content;
    max-width: calc(100% - 28px);
    padding: 0;
    color: #D1E231;
    font-family: var(--fr-font-secondary);
    font-size: clamp(18px, 5.6vw, 24px);
    font-weight: 900;
    line-height: clamp(17px, 5.2vw, 22px);
    letter-spacing: -1px;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(56px); /* TWEAK: positive = down, negative = up */
  }

  .fr-hero-tags--mobile br {
    display: none;
  }

  .fr-hero-tags--mobile span + span {
    margin-top: 0;
  }

  .fr-header__menu-strip,
  .fr-hero-tags--desktop {
    display: none;
  }





  /* MODULES */

  .fr-modules-section {
    padding: 4rem 0 4rem 0;
  }

  .fr-modules-grid {
    display: block;
  }

  .fr-modules-side-label {
    font-size: 11px; /* TWEAK: MENU / FIN font size on mobile */
    line-height: 1;
  }

  .fr-modules-side-label--menu {
    padding: 0 1rem 0.2rem 1rem; /* TWEAK: top right bottom left */
    text-align: left;
    transform: translate(0, 20px); /* TWEAK: x = left/right, y = up/down */
  }

  .fr-modules-list {
    padding-top: 0;
    text-align: center;
  }

  .fr-modules-section .fr-modules-list .fr-module-item {
    margin: 0 -70px 17px -70px;
    font-size: 54px !important;
    line-height: 0.52 !important;
  }

  .fr-modules-section .fr-modules-list .fr-module-item * {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .fr-module-tooltip {
    display: none;
  }

  .fr-modules-side-label--fin {
    display: block;
    padding: 1rem; /* TWEAK: space around FIN */
    text-align: right;
    transform: translate(0, -101px); /* TWEAK: x = left/right, y = up/down */
  }

  .fr-modules-info {
    padding: 0 1.25rem;
    text-align: left;
  }

  .fr-modules-info__image {
    width: 58%;
    max-width: 250px;
    margin: 1.5rem auto 0 auto;
    transform: none;
  }

  .fr-modules-info__copy {
    max-width: 290px;
    margin: 2rem auto 0 50px; /* TWEAK: top right bottom left */
    text-align: left;
  }

  .fr-modules-info__copy h2 {
    margin: 0 0 15px 0;
    text-align: left;
  }

  .fr-modules-info__copy p {
    margin: 0;
    font-size: 15px;
    line-height: 1.45; /* TWEAK: mobile body text line height */
    text-align: left;
  }

  .fr-indent {
    padding-left: 44px;
  }

  .fr-modules-more-wrap {
    margin: 2rem 0 0 0;
  }

  .fr-more-ticker-button {
    font-size: 24px;
  }

  .fr-more-ticker-button::after {
    font-size: 26px;
  }





  /* MOBILE CAT / VIDEO / FISH */


  .fr-cat-video-section {
    margin: -2px 0 0 0;
    padding: calc(4rem + 2px) 0 0 0; /* TWEAK: top padding above cat/video section */
    background: #ffffff;
    overflow: visible;
    box-shadow: 0 -3px 0 0 #ffffff;
  }

  .fr-cat-video-grid {
    display: grid;
    grid-template-columns: 38% 62%; /* TWEAK: cat column / video column */
    grid-template-rows: auto auto;
    align-items: start;
    width: 100%;
    min-height: 540px; /* TWEAK: room before the next cards */
  }

  .fr-cat-video-copy-col {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0 1rem 0.8rem 1rem;
    position: relative;
    z-index: 60;
  }

  .fr-cat-video-note {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 22px; /* TWEAK: space between text and arrow */
    margin-left: 7%; /* TWEAK: moves text/arrow left/right */
    transform: translateY(-70px); /* TWEAK: negative = up, positive = down */
  }

  .fr-cat-video-text {
    order: 1; /* keeps text first on mobile */
    font-size: 13px;
    line-height: 1;
  }

  .fr-cat-video-arrow {
    order: 2; /* moves arrow to the right of the text on mobile */
    width: 20px;
    margin: 0;
    transform: rotate(-90deg); /* mobile only */
  }

  .fr-cat-video-cat-col {
    grid-column: 1 / 2;
    grid-row: 2;
    padding-top: 70px; /* TWEAK: pushes cat lower than circle */
    position: relative;
    z-index: 45;
  }

  .fr-cat-video-cat {
    width: 152%; /* TWEAK: cat size */
    max-width: none;
    margin: 0 0 0 -42px; /* TWEAK: top right bottom left */
  }

  .fr-cat-video-spacer-col {
    display: none;
  }

  .fr-cat-video-centre-col {
    grid-column: 2 / 3;
    grid-row: 2;
    min-height: 470px; /* TWEAK: vertical room for expanding video */
    padding-top: 0;
    position: relative;
    z-index: 20;
    transform: translateX(-10px); /* TWEAK: negative = closer to cat, positive = right */
  }

  .fr-cat-video-disc {
    width: 150px; /* TWEAK: black circle size */
    margin: 0;
  }

  .fr-cat-video-fish {
    top: 185px; /* TWEAK: fish up/down */
    left: 58%; /* TWEAK: fish left/right */
    width: 28%;
    max-width: 100px;
  }



  /* MOBILE PRODUCT SUMMARY CARDS */


  .fr-product-summary-section {
    margin: -70px 0 0 0; /* TWEAK: negative = moves cards section up */
    padding: 0 1.7rem 3.5rem 1.7rem; /* TWEAK: left/right padding narrows cards */
    z-index: 700;
    background: transparent;
  }

  .fr-product-summary-gradient {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    height: 60%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      #ffffff 0%,
      #ffffff 17%,
      rgba(255, 255, 255, 0) 64%
    );
  }

  .fr-product-summary-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 88%; /* TWEAK: narrows the cards row */
    max-width: 360px; /* TWEAK: max card width on mobile */
    margin: -100px auto 0 auto;
  }

  .fr-product-card {
    min-height: auto;
    padding: 8px 10px 32px 10px;
  }

  .fr-product-card__image {
    height: 50vw;
    max-height: 230px;
    margin-bottom: 18px;
  }

  .fr-product-card__title {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .fr-product-card__text {
    max-width: 280px;
    font-size: 15px;
    line-height: 1.45;
  }

  .fr-product-summary-smiley-wrap {
    display: block;
  }

  .fr-product-summary-smiley {
    width: 24%; /* TWEAK: happy face size */
    max-width: 105px;
    min-width: 70px;
    margin: -28px auto 0 auto; /* TWEAK: happy face vertical position */
  }


  /* MOBILE SUBSCRIPTIONS */


  .fr-subscriptions-section {
    margin-top: -2px;
    padding: calc(3.5rem + 2px) 0 2.8rem 0;
    background-color: var(--fr-home-canvas-colour, transparent);
    box-shadow: 0 -3px 0 0 var(--fr-home-canvas-colour, transparent);
  }

  .fr-subscriptions-kicker {
    font-size: 16px;
  }

  .fr-subscriptions-lines {
    margin-top: 1.8rem;
  }

  .fr-subscriptions-line {
    margin: 0 -55px 6px -55px;
    font-size: clamp(34px, 12vw, 48px); /* TWEAK: mobile big subscriptions text size */
    line-height: 0.9;
  }

  .fr-subscriptions-tooltip {
    display: none;
  }

  .fr-subscriptions-explain {
    left: 0;
    margin-top: 2rem;
    margin-bottom: 3rem;
  }

  .fr-subscriptions-line--1 {
    letter-spacing: 0px;
  }

  .fr-subscriptions-line--2 {
    letter-spacing: 0px;
  }

  .fr-subscriptions-line--3 {
    letter-spacing: -0.4px;
  }

  .fr-subscriptions-line--4 {
    letter-spacing: -0.7px;
  }



  /* PRICING: MOBILE STICKY BUILD */

  .fr-pricing-section {
    overflow: visible;
    padding-bottom: 1rem;
  }

  .fr-pricing-table,
  .fr-pricing-sticky-parent {
    width: 100%;
    min-width: 0;
    overflow: visible;
    padding-bottom: 38vh;
  }

  .fr-pricing-heading-row,
  .fr-pricing-rows-layer,
  .fr-pricing-price-layer {
    position: -webkit-sticky;
    position: sticky;
  }

  .fr-pricing-heading-row {
    top: 0;
    z-index: 5000;
    min-height: 170px;
  }

  .fr-pricing-cat-cell {
    min-height: 170px;
  }

  .fr-pricing-cat {
    width: 135%;
    margin-left: -3.6em;
    margin-top: 0;
  }

  .fr-pricing-plan-heading {
    padding-top: 12px;
    font-size: clamp(27px, 8.2vw, 42px);
    line-height: 0.9;
    letter-spacing: -1.4px;
  }

  .fr-pricing-rows-layer {
    top: 58px;
    z-index: 7000;
    background: #ffffff;
  }

  .fr-pricing-row {
    min-height: 39px;
  }

  .fr-pricing-feature,
  .fr-pricing-value {
    padding: 0.58em 0.35em;
    font-size: clamp(9px, 2.45vw, 12px);
    line-height: 1.05;
  }

  .fr-pricing-price-layer {
    top: 42px;
    z-index: 8000;
    min-height: 70px;
    margin-top: 4em;
    padding: 12px 0;
    transform: translateY(-126px);
    background: transparent;
  }

  .fr-pricing-price-img {
    width: 88%;
    max-width: 155px;
  }

  .fr-pricing-price-img--contact {
    width: 82%;
    max-width: 155px;
  }

  .fr-pricing-keep-layer {
    display: grid !important;
    height: 78px;
    padding: 0 0 14px 0;
  }

  .fr-pricing-keep-text {
    font-size: 10px;
  }

  .fr-pricing-keep-arrow {
    width: 13%;
    min-width: 14px;
    max-width: 24px;
  }




  /* MOBILE FAQ */

  .fr-faq-section {
    margin-top: 3rem;
    padding: 4rem 1.25rem 6rem 1.25rem;
  }

  .fr-faq-grid {
    display: block;
  }

  .fr-faq-left {
    padding: 0 0 2rem 0;
  }

  .fr-faq-kicker {
    width: auto;
    white-space: normal;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 2.2px;
  }

  .fr-faq-list {
    text-align: right;
  }

  .fr-faq-item {
    margin-bottom: 14px;
  }

  .fr-faq-question {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: 0.6px;
  }

  .fr-faq-answer {
    max-width: 100%;
    margin: 10px 0 24px auto;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
  }
}


/* Touch devices: hide hover-only image tooltips */

@media (hover: none) {
  .fr-module-tooltip,
  .fr-subscriptions-tooltip {
    display: none;
  }
}


/* =========================
   MODULE DETAIL PAGES
   ========================= */

.fr-module-page {
  background: var(--fr-black);
}

.fr-module-page-title {
  width: 100vw;
  margin: 0;
  padding: 12em 0 0 0;
  background: var(--fr-black);
  color: var(--fr-orange);
  overflow: hidden;
}

.fr-module-page-title__heading {
  margin: -8px 20px 0 20px;
  color: var(--fr-orange);
  font-family: var(--fr-font-secondary);
  font-size: 55px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 8.7px;
  text-align: center;
  text-transform: uppercase;
  -webkit-text-stroke: 2px var(--fr-orange);
  text-stroke: 2px var(--fr-orange);
}

.fr-module-detail-section {
  width: 100vw;
  margin: 0;
  padding: 5em 0 10em 0;
  background: var(--fr-black);
  color: #ffffff;
  overflow: hidden;
}

.fr-module-detail-grid {
  display: grid;
  grid-template-columns: 38% 45% 2% 15%;
  width: 100%;
  padding-top: 20px;
}

.fr-module-detail-intro-col {
  margin-top: 3em;
  padding: 0;
}

.fr-module-detail-strapline {
  width: 66%;
  margin-left: 34%;
  color: var(--fr-cyan);
  font-family: var(--fr-font-secondary);
  font-size: 36px;
  font-weight: 900;
  line-height: 34px;
  letter-spacing: -1px;
  text-align: justify;
  text-transform: uppercase;
}

.fr-module-detail-strapline span {
  display: block;
}

.fr-module-detail-cloud-wrap {
  width: 89%;
  margin: 5em 0 0 11%;
  border-radius: 12px;
  overflow: hidden;
}

.fr-module-detail-cloud {
  display: block;
  width: 100%;
  min-height: 329px;
  object-fit: cover;
  border-radius: 12px;
}

.fr-module-detail-copy-col {
  margin: 7em 1em 0 3em;
  padding: 20px 60px 0 132px;
}

.fr-module-detail-card {
  margin: -11px 0 0 0;
}

.fr-module-detail-card + .fr-module-detail-card {
  margin-top: -11px;
}

.fr-module-detail-card__title {
  margin: 70px 0 22px 0;
  color: #D1E231;
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3.7px;
  text-align: right;
  text-transform: uppercase;
}

.fr-module-detail-card:first-child .fr-module-detail-card__title {
  margin-top: 0;
}

.fr-module-detail-card__body {
  margin: 0;
  padding: 10px 10px 12px 10px;
  border-radius: 0;
  background: #BD00FF;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1.5;
  text-align: justify;
}

.fr-module-detail-card__body p {
  margin: 0 0 1em 0;
}

.fr-module-detail-card__body p:last-child {
  margin-bottom: 0;
}

.fr-module-detail-menu-col {
  margin-top: 3em;
  padding: 0;
}

.fr-module-detail-menu {
  display: block;
  width: 100%;
  padding: 20px 0 20px 20px;
  border-radius: 12px 0px 0px 12px;
  background: var(--fr-orange);
}

.fr-module-detail-menu a {
  display: block;
  color: #000000;
  font-family: var(--fr-font-secondary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
}


.fr-module-quicklinks-toggle,
.fr-module-quicklinks-label {
  display: none;
}


/* Tablet module-detail layout */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-module-page-title {
    padding-top: 8em;
  }

  .fr-module-page-title__heading {
    font-size: 38px;
    letter-spacing: 3.8px;
  }

  .fr-module-detail-section {
    padding: 5em 0 10em 0;
  }

  .fr-module-detail-grid {
    grid-template-columns: 24% 52% 2% 22%;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    padding-top: 20px;
  }

  .fr-module-detail-intro-col {
    margin-top: 0;
    padding-top: 1.5em;
  }

  .fr-module-detail-strapline {
    width: 66%;
    max-width: none;
    margin-left: 11%;
    font-size: 24px;
    line-height: 29px;
  }

  .fr-module-detail-cloud-wrap {
    width: 78%;
    margin: 4em 0 0 11%;
  }

  .fr-module-detail-cloud {
    min-height: 220px;
  }

  .fr-module-detail-copy-col {
    margin: 0;
    padding: 20px 25px 20px 25px;
  }

  .fr-module-detail-card__title {
    margin-top: 70px;
    margin-bottom: 22px;
    font-size: 13px;
  }

  .fr-module-detail-card:first-child .fr-module-detail-card__title {
    margin-top: 0;
  }

  .fr-module-detail-card__body {
    font-size: 14px;
  }

  .fr-module-detail-gap {
    display: block;
  }

  .fr-module-detail-menu-col {
    grid-column: 4 / 5;
    width: auto;
    margin: 0;
    padding: 3.5em 0 0 1.5em;
  }

  .fr-module-detail-menu {
    padding: 20px 0 20px 20px;
  }

  .fr-module-detail-menu a {
    font-size: 11px;
    line-height: 1.25;
    margin-bottom: 0.9em;
  }
}


/* Mobile module-detail layout */

@media (max-width: 767px) {
  .fr-module-page-title {
    padding: 6em 0 1em 0;
  }

  .fr-module-page-title__heading {
    margin-top: 0;
    font-size: 29px;
    letter-spacing: 3.8px;
    -webkit-text-stroke: 0;
    text-stroke: 0;
  }

  .fr-module-detail-section {
    padding: 3em 0 4em 0;
  }

  .fr-module-detail-grid {
    display: grid;
    grid-template-columns: 58% 42%;
    column-gap: 0;
    row-gap: 2.5rem;
    width: calc(100% - 36px);
    margin: 0 auto;
    padding-top: 20px;
  }

  .fr-module-detail-intro-col {
    grid-column: 1 / 2;
    grid-row: 1;
    margin-top: 0;
    padding: 0;
    transform: translateY(-42px);
  }

  .fr-module-detail-strapline {
    width: auto;
    max-width: 180px;
    margin: 0;
    font-size: 24px;
    line-height: 0.95;
  }

  .fr-module-detail-cloud-wrap {
    width: 100%;
    margin: 2rem 0 0 0;
  }

  .fr-module-detail-cloud {
    min-height: 180px;
  }

  .fr-module-detail-menu-col {
    position: static;
    grid-column: 2 / 3;
    grid-row: 1;
    width: auto;
    margin: 0;
    padding: 0;
    align-self: start;
    justify-self: end;
    text-align: right;
  }

  .fr-module-quicklinks-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .fr-module-quicklinks-label {
    display: inline-block;
    color: #fe3400;
    font-family: var(--fr-font-secondary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .fr-module-detail-menu {
    display: none;
    width: auto;
    margin-top: 1rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .fr-module-quicklinks-toggle:checked ~ .fr-module-detail-menu {
    display: block;
  }

  .fr-module-detail-menu a {
    color: #fe3400;
    font-size: 10px;
    line-height: 1.2;
    margin-bottom: 0.85em;
    text-align: right;
  }

  .fr-module-detail-copy-col {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding: 0;
  }

  .fr-module-detail-card,
  .fr-module-detail-card + .fr-module-detail-card {
    margin-top: -10px;
  }

  .fr-module-detail-card__title {
    margin-top: 60px;
    margin-bottom: 20px;
    padding-bottom: 0;
    font-size: 11px;
  }

  .fr-module-detail-card:first-child .fr-module-detail-card__title {
    margin-top: 0;
  }

  .fr-module-detail-card__body {
    padding: 10px 10px 12px 10px;
    font-size: 14px;
  }

  .fr-module-detail-gap {
    display: none;
  }
}


/* =========================
   POLICY PAGES
   ========================= */

.fr-policy-page {
  background: var(--fr-black);
}

.fr-policy-title {
  width: 100vw;
  margin: 0;
  padding: 12em 0 0 0;
  background: var(--fr-black);
  color: #00FF00;
  overflow: hidden;
}

.fr-policy-title__heading {
  margin: -8px 20px 0 20px;
  color: #00FF00;
  font-family: var(--fr-font-secondary);
  font-size: 55px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 8.7px;
  text-align: center;
  text-transform: uppercase;
}

.fr-policy-content-section {
  width: 100vw;
  margin: 0;
  padding: 5em 0 10em 0;
  background: var(--fr-black);
  color: #ffffff;
  overflow: visible;
}

.fr-policy-grid {
  display: grid;
  grid-template-columns: 33% 40% 27%;
  column-gap: 0;
  align-items: start;
  width: 100%;
  margin: 0;
  padding-top: 20px;
}

.fr-policy-intro {
  margin-top: 3em;
  padding: 0;
}

.fr-policy-intro p {
  width: 66%;
  max-width: none;
  margin: 0 0 0 34%;
  color: var(--fr-cyan);
  font-family: var(--fr-font-secondary);
  font-size: 36px;
  font-weight: 900;
  line-height: 34px;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.fr-policy-intro span {
  display: block;
}

.fr-policy-content {
  padding: 20px 25px 20px 25px;
}

.fr-policy-updated {
  margin: 9px 10px 2em 10px;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1.2;
  text-align: right;
}

.fr-policy-block {
  margin: 0;
  scroll-margin-top: 120px;
}

.fr-policy-block + .fr-policy-block {
  margin-top: 0;
}

.fr-policy-block__title {
  margin: 70px 0 22px 0;
  color: #D1E231;
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 3.7px;
  text-align: right;
  text-transform: uppercase;
}


.fr-policy-card {
  margin: 0;
  padding: 10px 10px 12px 10px;
  border-radius: 0;
  background: #9FFCD7;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1.5;
  text-align: justify;
}

.fr-policy-card + .fr-policy-card,
.fr-policy-card + .fr-policy-table,
.fr-policy-table + .fr-policy-card {
  margin-top: 1em;
}

.fr-policy-card p {
  margin: 0 0 1em 0;
}

.fr-policy-card p:last-child {
  margin-bottom: 0;
}


/* Bullet-point styling inside the green box */

.fr-policy-list {
  margin: 0.25em 0 1em 0;
  padding: 0 45px 0 42px;
  list-style: none;
}

.fr-policy-list li {
  position: relative;
  margin: 0 0 1em -26px;
}

.fr-policy-list li:last-child {
  margin-bottom: 0;
}

.fr-policy-list li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -0.08em;
  width: 28px;
  height: 28px;
  background-image: url("/uploads/website/policy-bullet.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.28;
}


/* Table */

.fr-policy-table {
  margin: 1em 0 0 0;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 350;
  line-height: 1.5;
  border-bottom: 1px solid #D1E231;
}

.fr-policy-table__row {
  display: grid;
  grid-template-columns: 40% 60%;
}

.fr-policy-table__label,
.fr-policy-table__value {
  padding: 22px 20px 22px 20px;
  border-top: 1px solid #D1E231;
}

.fr-policy-table__label {
  border-left: 1px solid #00FF00;
  border-right: 1px solid #00FF00;
  border-top-color: #00FF00;
}

.fr-policy-table__value {
  border-right: 1px solid #D1E231;
  border-top-color: #D1E231;
}



/* Modular cookie-policy tables */

.fr-policy-mini-tables {
  margin: 1em 0 0 0;
}

.fr-policy-mini-table {
  margin: 0;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 350;
  line-height: 1.5;
  border-bottom: 0;
}

.fr-policy-mini-table + .fr-policy-mini-table {
  margin-top: 3em;
}

.fr-policy-mini-table__row {
  display: grid;
  grid-template-columns: 48% 52%;
}

.fr-policy-mini-table__row:not(:first-child) {
  grid-template-columns: 24% 24% 52%;
}

.fr-policy-mini-table__row:not(:first-child) .fr-policy-mini-table__label {
  grid-column: 2 / 3;
}

.fr-policy-mini-table__row:not(:first-child) .fr-policy-mini-table__value {
  grid-column: 3 / 4;
}

.fr-policy-mini-table__row:first-child {
  position: relative;
}

.fr-policy-mini-table__row:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24%;
  border-bottom: 1px solid #00FF00;
  pointer-events: none;
}

.fr-policy-mini-table__row:last-child .fr-policy-mini-table__label {
  border-bottom: 1px solid #00FF00;
}

.fr-policy-mini-table__row:last-child .fr-policy-mini-table__value {
  border-bottom: 1px solid #D1E231;
}

.fr-policy-mini-table__label,
.fr-policy-mini-table__value {
  padding: 22px 20px 22px 20px;
  border-top: 1px solid #D1E231;
}

.fr-policy-mini-table__label {
  border-left: 1px solid #00FF00;
  border-right: 1px solid #00FF00;
  border-top-color: #00FF00;
}

.fr-policy-mini-table__value {
  border-right: 1px solid #D1E231;
  border-top-color: #D1E231;
}


/* Right anchor-link column */

.fr-policy-toc {
  position: sticky;
  top: 150px;
  align-self: start;
  padding: 1.6em 0 0 6em;
}

.fr-policy-toc__nav {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.fr-policy-toc__nav a {
  display: block;
  margin: 0 0 1.05em 0;
  color: #D1E231;
  font-family: var(--fr-font-secondary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
}

.fr-policy-toc__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fr-policy-note {
  margin: 3em 0 0 0;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1.5;
  text-align: justify;
}

.fr-policy-note p {
  margin: 0;
}

.fr-policy-card a,
.fr-policy-note a,
.fr-policy-table a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fr-policy-card strong,
.fr-policy-note strong,
.fr-policy-table strong {
  font-weight: 800;
  font-family: var(--fr-font-secondary);
  text-transform: uppercase;
  font-size: 13px;
}


.fr-policy-note:has(+ .fr-policy-table) {
  margin: 0 0 2em 0;
  padding: 0 10px;
}


.fr-policy-quicklinks-toggle,
.fr-policy-quicklinks-label {
  display: none;
}



/* Tablet policy layout */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-policy-title {
    padding-top: 8em;
  }

  .fr-policy-title__heading {
    font-size: 38px;
    letter-spacing: 3.8px;
  }

  .fr-policy-grid {
    grid-template-columns: 24% 52% 22%;
    column-gap: 0;
    width: 100%;
  }

  .fr-policy-intro {
    padding-top: 1.5em;
  }

  .fr-policy-intro p {
    width: 66%;
    max-width: none;
    margin-left: 11%;
    font-size: 24px;
    line-height: 29px;
  }

  .fr-policy-content {
    padding-top: 20px;
  }


  .fr-policy-table {
    font-size: 12px;
  }

  .fr-policy-table__row {
    grid-template-columns: 45% 55%;
  }

  .fr-policy-table__label,
  .fr-policy-table__value {
    padding: 18px 10px;
  }

  .fr-policy-mini-table {
    font-size: 14px;
  }

  .fr-policy-mini-table__row {
    grid-template-columns: 48% 52%;
  }

  .fr-policy-mini-table__label,
  .fr-policy-mini-table__value {
    padding: 18px 7px;
  }

  .fr-policy-card {
    font-size: 14px;
  }

  .fr-policy-toc {
    position: sticky;
    top: 10px;
    align-self: start;
    padding: 3.5em 0 0 1.5em;
  }

  .fr-policy-toc__nav a {
    font-size: 11px;
    margin-bottom: 0.9em;
  }
}


/* Mobile policy layout */

@media (max-width: 767px) {
  .fr-policy-title {
    padding: 6em 0 1em 0;
  }

  .fr-policy-title__heading {
    margin-top: 0;
    font-size: 29px;
    letter-spacing: 3.8px;
  }

  .fr-policy-content-section {
    padding: 3em 0 4em 0;
  }

  .fr-policy-grid {
    display: grid;
    grid-template-columns: 58% 42%;
    column-gap: 0;
    row-gap: 2.5rem;
    width: calc(100% - 36px);
    margin: 0 auto;
  }

  .fr-policy-intro {
    grid-column: 1 / 2;
    grid-row: 1;
    padding: 0;
    transform: translateY(-42px);
  }

  .fr-policy-intro p {
    max-width: 180px;
    margin: 0;
    font-size: 24px;
    line-height: 0.95;
  }

  .fr-policy-toc {
    position: static;
    grid-column: 2 / 3;
    grid-row: 1;
    width: auto;
    margin: 0;
    padding: 0;
    align-self: start;
    justify-self: end;
    text-align: right;
  }

  .fr-policy-quicklinks-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .fr-policy-quicklinks-label {
    display: inline-block;
    color: #D1E231;
    font-family: var(--fr-font-secondary);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .fr-policy-toc__nav {
    display: none;
    margin-top: 1rem;
    padding: 0;
  }

  .fr-policy-quicklinks-toggle:checked ~ .fr-policy-toc__nav {
    display: block;
  }

  .fr-policy-toc__nav a {
    font-size: 10px;
    line-height: 1.2;
    margin-bottom: 0.85em;
  }

  .fr-policy-content {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0;
  }

  .fr-policy-updated {
    font-size: 12px;
  }

  .fr-policy-block__title {
    margin-top: 60px;
    margin-bottom: 20px;
    padding-bottom: 0;
    font-size: 11px;
  }

  .fr-policy-card {
    padding: 10px 10px 12px 10px;
    font-size: 14px;
  }

  .fr-policy-list {
    padding-left: 34px;
  }

  .fr-policy-list li::before {
    left: -10px;
    width: 22px;
    height: 22px;
  }

  .fr-policy-table {
    font-size: 11px;
  }

  .fr-policy-table__row {
    grid-template-columns: 43% 57%;
  }

  .fr-policy-table__label,
  .fr-policy-table__value {
    padding: 18px 10px;
  }

  .fr-policy-mini-table {
    font-size: 11px;
  }

  .fr-policy-mini-table__row {
    grid-template-columns: 48% 52%;
  }

  .fr-policy-mini-table__label,
  .fr-policy-mini-table__value {
    padding: 18px 10px;
  }
}


/* =========================
   SITE FOOTER
   ========================= */

.fr-footer {
  /* CHANGED: one clear set of footer spacing controls */
  --fr-footer-top-space: 4em;
  --fr-footer-read-top-space: 3em;
  --fr-footer-read-bottom-space: 5em;
  --fr-footer-links-top-space: 6em;
  --fr-footer-legal-top-space: 15em;
  --fr-footer-bottom-space: 1em;

  width: 100vw;
  min-height: auto;
  display: block;

  margin: 0;
  padding: var(--fr-footer-top-space) 0 var(--fr-footer-bottom-space) 0;

  background: var(--fr-black);
  color: #ffffff;
  overflow: hidden;
}

.fr-footer-top {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: end;
  width: 100%;
  padding: 4em 40px 2em 40px;
}

.fr-footer-top__logo-col {
  display: flex;
  align-items: end;
}

.fr-footer-logo-link {
  display: inline-block;
  width: 54%;
  max-width: 430px;
}

.fr-footer-logo {
  display: block;
  width: 100%;
  height: auto;
}

.fr-footer-buttons {
  --fr-footer-button-font-size: 28px;
  --fr-footer-button-padding: 1px 3.5px;
  --fr-footer-button-gap: 1.5em;
  
  grid-column: 2 / 3;
  justify-self: stretch;
  display: flex;
  justify-content: flex-end;
  align-items: end;
  gap: var(--fr-footer-button-gap);
  width: 100%;
  margin-left: auto;
  transform: translateY(-19px);
}

.fr-footer-buttons__left,
.fr-footer-buttons__right {
  display: flex;
  align-items: center;
  gap: var(--fr-footer-button-gap);
}

.fr-footer-buttons__right {
  gap: 0;
}

.fr-footer-button {
  position: relative;
  display: inline-block;
  justify-self: auto;
  overflow: hidden;
  padding: var(--fr-footer-button-padding);
  background: #ffffff;
  color: #000000;
  font-family: var(--fr-font-secondary);
  font-size: var(--fr-footer-button-font-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fr-footer-button__content {
  position: relative;
  z-index: 2;
}

.fr-footer-button__text {
  white-space: nowrap;
}

.fr-footer-button::after {
  content: attr(data-ticker);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  font-size: 29px;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  line-height: 1;
  animation: none;
}

.fr-footer-button:hover .fr-footer-button__content {
  opacity: 0;
}

.fr-footer-button:hover::after {
  opacity: 1;
  animation: frFooterTickerInsideButton 3s linear infinite;
}

.fr-footer-button--signup:hover {
  background: #ffff00;
}

.fr-footer-button--login:hover {
  background: #00ff00;
}

.fr-footer-button--support:hover {
  background: #00ffff;
}

.fr-footer-button--contact:hover {
  background: #ff00ff;
}

@keyframes frFooterTickerInsideButton {
  from {
    transform: translate(0, -50%);
  }

  to {
    transform: translate(-248px, -50%);
  }
}

.fr-footer--updates {
  min-height: auto;
  padding-bottom: var(--fr-footer-bottom-space);
}

.fr-footer--updates .fr-footer-bottom {
  margin-bottom: var(--fr-footer-legal-top-space);
}

.fr-footer--updates .fr-footer-buttons {
  grid-column: 2 / 3; /* keeps updates footer buttons in the right column */
  justify-self: stretch;

  display: flex;
  justify-content: flex-end;
  align-items: end;
  width: 100%;
  margin-left: auto;
}

.fr-footer--updates .fr-footer-legal {
  position: static;
  padding: 0 40px 0 47px;
}

/* Read cards */

.fr-footer-read {
  width: 100%;
  padding:
    var(--fr-footer-read-top-space)
    40px
    var(--fr-footer-read-bottom-space)
    40px;
}

.fr-footer-kicker {
  margin: 0 0 3em 0;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  line-height: 14px;
  letter-spacing: 3.7px;
  text-transform: uppercase;
}

.fr-footer-read-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  width: 100%;
}

.fr-footer-read-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fr-footer-read-card__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.fr-footer-read-card__copy {
  display: grid;
  grid-template-columns: 9% 91%;
  align-items: start;
  margin-top: 1.2em;
}

.fr-footer-read-card__star {
  display: block;
  width: 100%;
  min-width: 48px;
  opacity: 0.29;
  transform: translateX(-2px);
}

.fr-footer-read-card__text-wrap {
  padding-left: 0.4em;
  transform: translateY(20px);
}

.fr-footer-read-card__title {
  margin: 0 0 0 -0.6em;
  color: #D1E231;
  font-family: var(--fr-font-primary);
  font-size: 17px;
  font-weight: 750;
  line-height: 14px;
  text-transform: uppercase;
}

.fr-footer-read-card__text {
  margin: 0 0 0 -0.6em;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1.4;
}


/* Bottom links */

.fr-footer-bottom {
  display: grid;
  grid-template-columns: 27% 73%;
  width: 100%;
  padding: var(--fr-footer-links-top-space) 40px 0 40px;
  margin-bottom: var(--fr-footer-legal-top-space);
}

.fr-footer-bottom__kicker-col {
  padding: 0;
}

.fr-footer-link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 50px;
}

.fr-footer-link-column__title {
  margin: 0 0 1.7em 0;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 17px;
  font-weight: 800;
  line-height: 14px;
  text-transform: uppercase;
}

.fr-footer-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fr-footer-link-list li {
  margin: 0 0 0.8em 0;
}

.fr-footer-link-list a {
  position: relative;
  display: grid;
  grid-template-columns: 15% 85%;
  align-items: center;
  color: #D1E231;
  font-family: var(--fr-font-primary);
  font-size: 17px;
  font-weight: 800;
  line-height: 14px;
  text-transform: uppercase;
  text-decoration: none;
}

.fr-footer-link-list a:hover span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fr-footer-link-star {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 42px;
  opacity: 0.29;
  transform: translate(-6px, 0);
}

.fr-footer-link-list span {
  position: relative;
  z-index: 2;
  display: block;
  margin-left: -1em;
}

.fr-footer-link-list a[href="/policies/terms-of-service/"] span {
  white-space: nowrap;
}


/* Legal */

.fr-footer-legal {
  width: 100%;
  margin: 0;
  padding: 0 40px 0 47px;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1;
}

.fr-footer-legal p {
  margin: 0 0 0.65em 0;
}

.fr-footer-legal p:first-child {
  margin-bottom: 1.4em;
}



/* Desktop footer spacing */

@media (min-width: 1181px) {
  .fr-footer {
    --fr-footer-top-space: 4em;
    --fr-footer-read-top-space: 3em;
    --fr-footer-read-bottom-space: 5em;
    --fr-footer-links-top-space: 6em;
    --fr-footer-legal-top-space: 15em;
    --fr-footer-bottom-space: 1em;
  }

  .fr-footer.fr-footer--updates {
    --fr-footer-top-space: 4em;
    --fr-footer-links-top-space: 6em;
    --fr-footer-legal-top-space: 15em;
    --fr-footer-bottom-space: 1em;
  }
}


/* Tablet footer layout */

@media (min-width: 768px) and (max-width: 1180px),
       (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1366px) {
  .fr-footer {
    --fr-footer-button-font-size: 26px;
    --fr-footer-button-padding: 1px 2px;
    --fr-footer-legal-company-line-height: 1.25;

  /* TWEAK: tablet footer font sizes */
    --fr-footer-tablet-heading-size: 13px;
    --fr-footer-tablet-legal-size: 13px;
    --fr-footer-tablet-link-size: 15px;
    --fr-footer-tablet-column-title-size: 15px;
    --fr-footer-tablet-heading-letter-spacing: 2.4px;

    padding-top: 3em;
  }

  .fr-footer-top {
    grid-template-columns: 36% 64%;
    padding: 3em 32px 2em 32px;
  }

  .fr-footer-logo-link {
    width: 70%;
  }

  .fr-footer-buttons {
    --fr-footer-button-font-size: 26px;
    --fr-footer-button-padding: 1px 2px;
    --fr-footer-button-gap: 1.5em;

    grid-column: 2 / 3;
    justify-self: stretch;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--fr-footer-button-gap);
    width: 100%;
    margin: 0;
  }

  .fr-footer-buttons__left,
  .fr-footer-buttons__right {
    display: flex;
    align-items: center;
    gap: var(--fr-footer-button-gap);
  }


  .fr-footer-button {
    font-size: var(--fr-footer-button-font-size);
    padding: var(--fr-footer-button-padding);
  }

  .fr-footer--updates .fr-footer-buttons {
    grid-column: 2 / 3;
    justify-self: stretch;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-left: auto;
  }

  .fr-footer-link-list a {
    grid-template-columns: 32px 1fr;
  }

  .fr-footer-link-star {
    width: 36px;
    min-width: 36px;
    transform: translate(-6px, 0);
  }

  .fr-footer-link-list span {
    margin-left: -18px;
  }

  .fr-footer-legal {
    padding: 0 32px 0 32px;
    font-family: var(--fr-font-primary);
    font-size: var(--fr-footer-tablet-legal-size);
    font-weight: 350;
    line-height: 1.15;
  }

  .fr-footer-legal p {
    margin: 0 0 0.65em 0;
    font-family: var(--fr-font-primary);
    font-size: var(--fr-footer-tablet-legal-size);
    font-weight: 350;
    line-height: 1.15;
  }


  .fr-footer-legal p:first-child {
    margin-bottom: 1.4em;
  }

  .fr-footer-legal p:nth-child(2) {
    margin-bottom: 0.1em;
    line-height: 1.25;
  }

  .fr-footer-legal p:nth-child(3) {
    margin-bottom: 0;
  }

  .fr-footer-button::after {
    font-size: calc(var(--fr-footer-button-font-size) + 2px);
  }

  .fr-footer-read {
    padding: 3em 32px 4em 32px;
  }

  .fr-footer-read-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5em 32px;
  }

  .fr-footer-read-card__copy {
    grid-template-columns: 8% 92%;
  }

  .fr-footer-read-card__text-wrap {
    position: relative;
    z-index: 2;
    padding-left: 0;
    transform: translate(-0.9em, 18px);
  }

  .fr-footer-read-card__title {
    margin: 0 0 0.5em 0;
    font-size: 15px;
    line-height: 1;
  }

  .fr-footer-read-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
  }

  .fr-footer-bottom {
    display: block;
    padding: 5em 32px 0 32px;
    margin-bottom: 5.5em;
  }

  .fr-footer-bottom__kicker-col .fr-footer-kicker {
    margin-bottom: 2.4em;
  }

  .fr-footer-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 30px;
    width: 100%;
  }
  
  .fr-footer-link-column__title {
    font-size: var(--fr-footer-tablet-column-title-size);
  }

  .fr-footer-link-list a {
    font-size: var(--fr-footer-tablet-link-size);
  }

  .fr-footer--updates .fr-footer-bottom {
    margin-bottom: 5.5em;
  }

  .fr-footer-kicker,
  .fr-footer-bottom__kicker-col .fr-footer-kicker {
    font-size: var(--fr-footer-tablet-heading-size);
    line-height: 1;
    letter-spacing: var(--fr-footer-tablet-heading-letter-spacing);
  }



  /* Tablet footer heading lock:
     Applies to normal footer and updates footer */

  .fr-footer-read > h2.fr-footer-kicker,
  .fr-footer-bottom__kicker-col > h2.fr-footer-kicker,
  .fr-footer--updates .fr-footer-bottom__kicker-col > h2.fr-footer-kicker {
    margin-top: 0;
    color: #ffffff;
    font-family: var(--fr-font-primary);
    font-size: var(--fr-footer-tablet-heading-size);
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    letter-spacing: var(--fr-footer-tablet-heading-letter-spacing);
    text-transform: uppercase;
  }

  .fr-footer-read > h2.fr-footer-kicker {
    margin-bottom: 2em;
  }

  .fr-footer-bottom__kicker-col > h2.fr-footer-kicker,
  .fr-footer--updates .fr-footer-bottom__kicker-col > h2.fr-footer-kicker {
    margin-bottom: 2.4em;
  }


  /* Tablet legal/company text lock:
     Applies to normal footer and updates footer */

  .fr-footer-legal,
  .fr-footer-legal p,
  .fr-footer-legal p:first-child,
  .fr-footer-legal p:nth-child(2),
  .fr-footer-legal p:nth-child(3),
  .fr-footer-legal *,
  .fr-footer--updates .fr-footer-legal,
  .fr-footer--updates .fr-footer-legal p,
  .fr-footer--updates .fr-footer-legal * {
    font-family: var(--fr-font-primary);
    font-size: var(--fr-footer-tablet-legal-size);
    font-weight: 350;
    line-height: 1.15;
  }

  .fr-footer-legal p {
    margin-top: 0;
  }

  .fr-footer-legal p:first-child {
    margin-bottom: 1.4em;
  }

  .fr-footer-legal p:nth-child(2) {
    margin-bottom: 0.1em;
  }

  .fr-footer-legal p:nth-child(3) {
    margin-bottom: 0;
  }
}



/* Mobile footer layout */

@media (max-width: 767px) {
  .fr-footer {
    --fr-footer-button-font-size: 22px;
    --fr-footer-button-padding: 1px 2px;
    --fr-footer-legal-company-line-height: 1.3;

    padding: 0 0 2em 0;
  }


  .fr-footer-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 39px 32px 0 32px;
  }

  .fr-footer-buttons {
    --fr-footer-button-font-size: 22px;
    --fr-footer-button-padding: 1px 2px;
    --fr-footer-button-gap: 1.2em;

    
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--fr-footer-button-gap);
    width: 100%;
    margin: 2em 0 22px 0;
  }

  .fr-footer-buttons__left,
  .fr-footer-buttons__right {
    display: flex;
    align-items: center;
    gap: var(--fr-footer-button-gap);
  }

  .fr-footer-button {
    justify-self: auto;
    font-size: var(--fr-footer-button-font-size);
    padding: var(--fr-footer-button-padding);
  }

  .fr-footer-link-list a {
    grid-template-columns: 32px 1fr;
    font-size: 15px;
  }

  .fr-footer-link-star {
    width: 34px;
    min-width: 34px;
    transform: translate(-6px, 0);
  }

  .fr-footer-link-list span {
    margin-left: -18px;
  }

  .fr-footer-legal {
    padding: 0 32px 0 32px;
    font-size: 14px;
    font-weight: 350;
    line-height: 1.15;
  }

  .fr-footer-legal p {
    margin: 0 0 0.65em 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  .fr-footer-legal p:nth-child(2) {
    margin-bottom: 0.1em;
    line-height: var(--fr-footer-legal-company-line-height);
  }

  .fr-footer-legal p:nth-child(3) {
    margin-bottom: 0;
  }

  .fr-footer-button::after {
    font-size: calc(var(--fr-footer-button-font-size) + 2px);
  }

  .fr-footer-buttons .fr-footer-button:nth-child(odd) {
    justify-self: start;
  }

  .fr-footer-buttons .fr-footer-button:nth-child(even) {
    justify-self: end;
  }

  .fr-footer-buttons .fr-footer-button:nth-child(3) {
    justify-self: start;
  }

  .fr-footer-logo-link {
    width: 70%;
    max-width: none;
  }

  .fr-footer-read {
    padding: 73px 32px 0 32px;
  }

  .fr-footer-kicker {
    margin-bottom: 2em;
    font-size: 15px;
  }

  .fr-footer-read-grid {
    display: block;
  }

  .fr-footer-read-card {
    margin-bottom: 45px;
  }

  .fr-footer-read-card__copy {
    grid-template-columns: 10% 90%;
    margin-top: 0.9em;
  }

  .fr-footer-read-card__star {
    min-width: 0;
  }

  .fr-footer-read-card__text-wrap {
    position: relative;
    z-index: 2;
    padding-left: 0;
    transform: translate(-1em, 16px);
  }

  .fr-footer-read-card__title {
    margin: 0 0 0.5em 0;
    font-size: 15px;
  }

  .fr-footer-read-card__text {
    margin: 0;
    font-size: 14px;
  }

  .fr-footer-bottom {
    display: block;
    padding: 86px 32px 0 32px;
    margin-bottom: 4.5em;
  }

  .fr-footer-bottom__kicker-col .fr-footer-kicker {
    margin-bottom: 2em;
  }

  .fr-footer-link-grid {
    display: block;
  }

  .fr-footer-link-column {
    margin: 0 0 2em 0;
  }

  .fr-footer-link-column__title {
    margin: 0 0 1em 0;
    font-size: 15px;
  }

  .fr-footer-link-list li {
    margin-bottom: 0.7em;
  }

  .fr-footer--updates .fr-footer-bottom {
    margin-bottom: 4.5em;
  }
}









/* =========================
   MENU PAGE
   ========================= */

.fr-menu-page {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #E9FF00;
  color: #000000;
  overflow-x: hidden;
  transition: background-color 180ms linear;
}

.fr-menu-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 2.4em 2em 3em 2em;
}

.fr-menu-header {
  width: 100%;
  margin: -2.5em 0 1.3em 0;
  text-align: center;
}

.fr-menu-buttons {
  position: absolute;
  top: 1.2em;
  left: 2em;
  right: 2em;
  z-index: 20;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;

  width: auto;
  margin: 0;
}

.fr-menu-buttons__left,
.fr-menu-buttons__right {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.fr-menu-logo-link {
  display: inline-block;
  width: 32%;
  max-width: 150px;
}

.fr-menu-logo {
  display: block;
  width: 100%;
  height: auto;
}

.fr-menu-links {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* ADDED: gives anchor jumps a little breathing room */
.fr-menu-heading {
  scroll-margin-top: 2rem;
}


.fr-menu-heading {
  display: inline-block;
  margin: 1.35em auto 0.35em auto; /* TWEAK: more space above than below */
  color: #303031;
  font-family: var(--fr-font-secondary);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ADDED: stops ABOUT / ADMIN inheriting the negative link overlap after headings */
.fr-menu-heading + .fr-menu-link {
  margin-top: 0;
}


.fr-menu-link {
  display: block;
  margin: -6px auto 0 auto;
  color: #000000;
  font-family: var(--fr-font-secondary);
  font-size: 91px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.9px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 160ms ease;
}

.fr-menu-link:first-child {
  margin-top: 0;
}

.fr-menu-link:hover {
  color: #00ff00;
  text-decoration: none;
}

.fr-menu-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 2px 3px;
  background: #ffffff;
  color: #000000;
  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  border: 2px solid black;
  line-height: 1;
  letter-spacing: -1.6px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fr-menu-button__content {
  position: relative;
  z-index: 2;
}

.fr-menu-button__text {
  white-space: nowrap;
}

.fr-menu-button::after {
  content: attr(data-ticker);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  font-size: 29px;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  line-height: 1;
  animation: none;
}

.fr-menu-button:hover .fr-menu-button__content {
  opacity: 0;
}

.fr-menu-button:hover::after {
  opacity: 1;
  animation: frMenuTickerInsideButton 3s linear infinite;
}

.fr-menu-button--contact:hover {
  background: #ff00ff;
}

.fr-menu-button--support:hover {
  background: #00ffff;
}

.fr-menu-button--login:hover {
  background: #00ff00;
}

.fr-menu-button--signup:hover {
  background: #ffff00;
}

@keyframes frMenuTickerInsideButton {
  from {
    transform: translate(0, -50%);
  }

  to {
    transform: translate(-248px, -50%);
  }
}


/* Tablet menu page */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-menu-shell {
    padding: 2.2em 1.4em 3em 1.4em;
  }

  .fr-menu-header {
    margin: 2em 0 0.8em 0;
  }

  .fr-menu-logo-link {
    width: 34%;
  }

  .fr-menu-link {
    margin-top: -6px;
    font-size: 64px;
    line-height: 1.02;
  }

  /* ADDED: matches .fr-billing-title tablet styling */
  .fr-menu-heading {
    margin: 1.25em auto 0.3em auto; /* TWEAK: more space above than below */
    font-size: 23px;
    line-height: 1;
    white-space: normal;
  }

  .fr-menu-buttons {
    top: 0.7em;
    left: 1.4em;
    right: 1.4em;
    gap: 1em;
    margin: 0;
  }

  .fr-menu-buttons__left,
  .fr-menu-buttons__right {
    gap: 0.7em;
  }

  .fr-menu-button {
    font-size: 24px;
    padding: 1px 2px;
  }

  .fr-menu-button::after {
    font-size: 26px;
  }
}


/* Mobile menu page */

@media (max-width: 767px) {
  .fr-menu-shell {
    min-height: 100vh;
    padding: 1.8em 0.8em 2.5em 0.8em;
  }

  .fr-menu-header {
    margin: 2.4em 0 0.5em 0;
  }

  .fr-menu-logo-link {
    width: 26%;
  }

  .fr-menu-link {
    margin-top: -4px;
    font-size: 35px;
    line-height: 1.08;
    letter-spacing: -0.5px;
  }

  /* ADDED: matches .fr-billing-title mobile styling */
  .fr-menu-heading {
    margin: 1.15rem auto 0.25rem auto; /* TWEAK: more space above than below */
    font-size: 20px;
    line-height: 1;
    white-space: normal;
  }

  .fr-menu-buttons {
    top: 0.45em;
    left: 0.8em;
    right: 0.8em;
    gap: 0.6em;
    margin: 0;
  }

  .fr-menu-buttons__left,
  .fr-menu-buttons__right {
    gap: 0.45em;
  }

  .fr-menu-button {
    font-size: 22px;
    padding: 1px 2px;
    letter-spacing: -0.8px;
  }

  .fr-menu-button::after {
    font-size: 24px;
  }
}



/* =========================
   FEATURES PAGE
   ========================= */

.fr-features-page {
  width: 100vw;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  color: #000000;
  overflow-x: hidden;
  background-color: #e9ff00;
  transition: background-color 180ms linear;
}

@keyframes frFeaturesColourFlow {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 55% 100%;
  }

  50% {
    background-position: 100% 50%;
  }

  75% {
    background-position: 45% 0%;
  }

  100% {
    background-position: 0% 50%;
  }
}


body:has(.fr-features-page) {
  background: #e9ff00;
}

.fr-features-shell {
  width: 100%;
  min-height: 100dvh;
  padding: 8em 3.5em 8em 3.5em;
  background: transparent;
}

.fr-features-search-wrap {
  width: 100%;
  max-width: 900px;

  /* TWEAK: less space between search and cards on desktop */
  margin: 0 auto 4.2em auto;

  text-align: center;
}

.fr-features-search-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.fr-features-search-field {
  position: relative;
  width: 100%;
  max-width: 650px;
}

.fr-features-search {
  width: 100%;
  max-width: none;

  /* TWEAK: puffier / taller desktop search bar */
  padding: 25px 76px 25px 34px;

  border: 2px solid #303031;
  border-radius: 55px;
  outline: none;
  background: #ffffff;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.fr-features-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.fr-features-search:focus {
  border-color: #000000;
}

.fr-features-clear {
  display: none;
  cursor: pointer;
}

.fr-features-search-x {
  position: absolute;
  top: 50%;
  right: 28px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
}

.fr-features-search-x img {
  display: block;
  width: 100%;
  height: auto;
}

.fr-features-see-all {
  margin: 0;
  padding: 25px 34px;
  border: 2px solid #000000;
  border-radius: 55px;
  background: #ffff00;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.fr-features-see-all:hover {
  background: #ffffff;
}

.fr-features-status {
  min-height: 1.2em;
  margin-top: 15px;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 14px;

  /* TWEAK: lighter “No features found” */
  font-weight: 400;

  line-height: 1.2;
}




.fr-features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7em 3.2em;
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
}

.fr-feature-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fr-feature-card[hidden] {
  display: none;
}

.fr-feature-card__smilies {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.3em;
  width: 100%;
  margin: 0 0 1.7em 0;
}

.fr-feature-card__smilies img {
  display: block;
  width: 18px;
  height: auto;
}

.fr-feature-card__box {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 340px;
  border: 2px solid #303031;
  background: #ffffff;
  color: #000000;
}

.fr-feature-card__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  padding: 16px 20px 14px 20px;
  background: #ffffff;
}

.fr-feature-card__title-row h2 {
  margin: 0;
  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
  text-transform: uppercase;
}

.fr-feature-card__subtitle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px 10px 20px;
  background: #ffff00;
}

.fr-feature-card__subtitle-row h3 {
  margin: 0;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.fr-feature-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 205px;
  padding: 22px 30px 28px 30px;
  background: #ffffff;
}

.fr-feature-card__body p {
  margin: 0;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}

.fr-feature-card:hover .fr-feature-card__box {
  border-color: #000000;
}

.fr-feature-card:hover .fr-feature-card__title-row h2 {
  color: #000000;
}


/* Tablet features page */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-features-shell {
    padding: 7em 2em 7em 2em;
  }

  .fr-features-search-wrap {
    margin: 0 auto 3.6em auto;
    width: 92%;
    max-width: none;
  }

  .fr-features-search-row {
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
  }

  .fr-features-search-field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .fr-features-search {
    width: 100%;
    max-width: none;
  }

  .fr-features-see-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 165px;
    margin: 0;
    padding: 25px 28px;
    white-space: nowrap;
    line-height: 1;
  }

  .fr-features-grid {
    width: 92%;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4em 2em;
  }

  .fr-feature-card__box {
    min-height: 305px;
  }

  .fr-feature-card__title-row {
    min-height: 76px;
    padding: 14px 18px 12px 18px;
  }

  .fr-feature-card__subtitle-row {
    min-height: 44px;
    padding: 11px 18px 9px 18px;
  }

  .fr-feature-card__body {
    min-height: 155px;
    padding: 18px 26px 22px 26px;
  }
}

/* Mobile features page */

@media (max-width: 767px) {
  .fr-features-shell {
    padding: 5em 1.65em 5em 1.65em;
  }

  .fr-features-search-wrap {
    width: 88%;
    max-width: none;
    margin: 0 auto 2.8em auto;
  }

  .fr-features-search-row {
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .fr-features-search-field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .fr-features-search {
    width: 100%;
    max-width: none;
    padding: 25px 48px 25px 20px;
    font-size: 13px;
  }

  .fr-features-search-x {
    right: 17px;
    width: 20px;
    height: 20px;
  }

  .fr-features-see-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 25px 14px;
    white-space: nowrap;
    line-height: 1;
    transform: none;
  }

  .fr-features-grid {
    width: 88%;
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 3.2em;
  }

  .fr-feature-card__smilies {
    margin-bottom: 1em;
  }

  .fr-feature-card__smilies img {
    width: 16px;
  }

  .fr-feature-card__box {
    min-height: 0;
  }

  .fr-feature-card__title-row {
    min-height: 66px;
    padding: 18px 16px 15px 16px;
  }

  .fr-feature-card__title-row h2 {
    font-size: 14px;
    line-height: 13px;
  }

  .fr-feature-card__subtitle-row {
    min-height: 42px;
    padding: 10px 16px 8px 16px;
  }

  .fr-feature-card__subtitle-row h3 {
    font-size: 14px;
    line-height: 1.05;
  }

  .fr-feature-card__body {
    min-height: 0;
    padding: 30px 24px 34px 24px;
  }

  .fr-feature-card__body p {
    font-size: 15px;
    line-height: 1.45;
  }
}


/* =========================
   HELP PAGE
   ========================= */

.fr-help-page {
  margin-top: 0;
  padding-top: 0;
  background-color: #e9ff00;
  transition: background-color 180ms linear;
}

.fr-help-shell {
  padding-top: 8em;
}

.fr-help-logo-section {
  width: 100%;
  padding: 3.2em 0 0 0;
  text-align: center;
}

.fr-help-logo-link {
  display: inline-block;
  width: 32%;
  max-width: 520px;
}

.fr-help-logo {
  display: block;
  width: 100%;
  height: auto;
}



.fr-help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  width: 75%;
  max-width: 1320px;

  margin-left: auto;
  margin-right: auto;
}


/* HELP PAGE: equal-height cards */
.fr-help-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.fr-help-card {
  display: flex;
  height: 100%;
}

.fr-help-page .fr-feature-card__box {
  width: 100%;
  height: 100%;
}


.fr-help-page .fr-features-search-wrap {
  width: 55%;
  max-width: 900px;
}

.fr-help-page .fr-features-search-row {
  width: 100%;
}

.fr-help-page .fr-features-search-field {
  flex: 1 1 auto;
  max-width: none;
}

.fr-help-contact-section {
  width: 100vw;
  margin: 0;
  padding: 7em 3em 8em 3em;
  background: transparent;
  color: #303031;
  text-align: center;
}

.fr-help-contact-inner {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

 
.fr-help-contact-title {
  display: block;
  width: max-content;
  margin: 0 auto;
  color: #303031;
  font-family: var(--fr-font-secondary);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}



.fr-help-contact-intro {
  display: none;
}

.fr-help-contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
  width: 100%;
  margin: 2.6em auto 0 auto;
  text-align: left;
}

.fr-help-contact-form[hidden] {
  display: none;
}

.fr-help-contact-reveal {
  display: block;
  margin: 2.2em auto 0 auto;
}

.fr-help-contact-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.fr-help-contact-field {
  display: block;
  margin: 0;
}

.fr-help-contact-field--message {
  grid-column: 1 / -1;
}

.fr-help-contact-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fr-help-contact-field input,
.fr-help-contact-field textarea {
  display: block;
  width: 100%;
  border: 2px solid #303031;
  padding: 18px 24px;
  background: #ffffff;
  color: #000000;

  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;

  outline: none;
}

.fr-help-contact-field textarea {
  padding-top: 28px;
}

.fr-help-contact-field input {
  border-radius: 55px;
}

.fr-help-contact-field textarea {
  border-radius: 12px;
}

.fr-help-contact-field input::placeholder,
.fr-help-contact-field textarea::placeholder {
  color: #000000;
  opacity: 1;
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}


.fr-help-contact-field textarea {
  min-height: 280px;
  resize: none;
}

.fr-help-contact-field input:focus,
.fr-help-contact-field textarea:focus {
  border-color: #000000;
}

.fr-help-contact-button {
  position: relative;
  display: inline-block;
  justify-self: start;
  width: max-content;
  overflow: hidden;

  margin: 1em 0 0 0;
  padding: 2px 3px;
  border: 2px solid black;
  background: #ffffff;
  color: #000000;

  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.fr-help-contact-button__content {
  position: relative;
  z-index: 2;
}

.fr-help-contact-button__text {
  white-space: nowrap;
}

.fr-help-contact-button::after {
  content: attr(data-ticker);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  color: inherit;
  font-family: inherit;
  font-size: 29px;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  animation: none;
}

.fr-help-contact-button:hover {
  background: #ffff00;
}

.fr-help-contact-button:hover .fr-help-contact-button__content,
.fr-help-contact-button.is-ticker-active .fr-help-contact-button__content {
  opacity: 0;
}

.fr-help-contact-button:hover::after,
.fr-help-contact-button.is-ticker-active::after {
  opacity: 1;
  animation: tickerInsideButton 3s linear infinite;
}

.fr-help-contact-status {
  grid-column: 1 / -1;
  min-height: 1.2em;
  margin: 0.8em 0 0 0;
  color: #000000;
  font-family: var(--fr-font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}


/* Tablet help page */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-help-logo-section {
    padding-top: 2.6em;
  }

  .fr-help-logo-link {
    width: 34%;
  }

  .fr-help-shell {
    padding: 7em 2em 7em 2em;
  }

  .fr-help-page .fr-features-search-wrap {
    width: 92%;
    max-width: none;
    margin: 0 auto 3.6em auto;
  }

  .fr-help-page .fr-features-search-row {
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
  }

  .fr-help-page .fr-features-search-field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .fr-help-page .fr-features-search {
    width: 100%;
    max-width: none;
  }

  .fr-help-page .fr-features-see-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 165px;
    margin: 0;
    padding: 25px 28px;
    white-space: nowrap;
    line-height: 1;
  }

  .fr-help-grid {
    width: 92%;
    max-width: none;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4em 2em;
  }

  .fr-help-page .fr-feature-card__box {
    min-height: 305px;
  }

  .fr-help-page .fr-feature-card__title-row {
    min-height: 76px;
    padding: 14px 18px 12px 18px;
  }

  .fr-help-page .fr-feature-card__subtitle-row {
    min-height: 44px;
    padding: 11px 18px 9px 18px;
  }

  .fr-help-page .fr-feature-card__body {
    min-height: 155px;
    padding: 18px 26px 22px 26px;
  }

  .fr-help-contact-section {
    padding: 5em 2em 6em 2em;
  }

  .fr-help-contact-title {
    font-size: 23px;
    font-weight: 400;
    line-height: 1.6;
  }

  .fr-help-contact-button {
    font-size: 22px;
    padding: 2px 3px;
  }

  .fr-help-contact-button::after {
    font-size: 24px;
  }
}


/* Mobile help page */

@media (max-width: 767px) {
  .fr-help-logo-section {
    padding-top: 3.2em;
  }

  .fr-help-logo-link {
    width: 56%;
  }

  .fr-help-shell {
    padding: 5em 1.65em 5em 1.65em;
  }

  .fr-help-page .fr-features-search-wrap {
    width: 88%;
    max-width: none;
    margin: 0 auto 2.8em auto;
  }

  .fr-help-page .fr-features-search-row {
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .fr-help-page .fr-features-search-field {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .fr-help-page .fr-features-search {
    width: 100%;
    max-width: none;
    padding: 25px 48px 25px 20px;
    font-size: 13px;
  }

  .fr-help-page .fr-features-search-x {
    right: 17px;
    width: 20px;
    height: 20px;
  }

  .fr-help-page .fr-features-see-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 25px 14px;
    white-space: nowrap;
    line-height: 1;
    transform: none;
  }

  .fr-help-grid {
    width: 88%;
    max-width: none;
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 3.2em;
  }

  .fr-help-page .fr-feature-card__box {
    min-height: 0;
  }

  .fr-help-page .fr-feature-card__title-row {
    min-height: 66px;
    padding: 18px 16px 15px 16px;
  }

  .fr-help-page .fr-feature-card__title-row h2 {
    font-size: 14px;
    line-height: 13px;
  }

  .fr-help-page .fr-feature-card__subtitle-row {
    min-height: 42px;
    padding: 10px 16px 8px 16px;
  }

  .fr-help-page .fr-feature-card__subtitle-row h3 {
    font-size: 14px;
    line-height: 1.05;
  }

  .fr-help-page .fr-feature-card__body {
    min-height: 0;
    padding: 30px 24px 34px 24px;
  }

  .fr-help-page .fr-feature-card__body p {
    font-size: 15px;
    line-height: 1.45;
  }

  .fr-help-contact-section {
    padding: 4rem 1.65em 5rem 1.65em;
  }

  .fr-help-contact-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
  }

  .fr-help-contact-form {
    grid-template-columns: 1fr;
  }

  .fr-help-contact-button {
    font-size: 22px;
    padding: 2px 3px;
  }

  .fr-help-contact-button::after {
    font-size: 24px;
  }
}


/* =========================
   CONTACT PAGE
   ========================= */

.fr-contact-page {
  background-color: #ffffff;
  transition: background-color 180ms linear;
}

body:has(.fr-contact-page) {
  background: #ffffff;
}

.fr-contact-page .fr-help-contact-section {
  padding-top: 5em;
}

.fr-contact-page-inner {
  max-width: 920px;
}

.fr-contact-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2em;
  width: 100%;
  margin: 2.4em auto 0 auto;
}

.fr-contact-toggle__button {
  appearance: none;
  position: relative;
  display: inline-block;
  overflow: hidden;

  padding: 2px 3px;
  border: 2px solid #000000;
  border-radius: 0;
  background: #ffffff;
  color: #000000;

  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.fr-contact-toggle__button span {
  position: relative;
  z-index: 2;
}

.fr-contact-toggle__button::after {
  content: attr(data-ticker);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  color: #000000;
  font-family: inherit;
  font-size: 29px;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  animation: none;
}

.fr-contact-toggle__button:hover {
  background: #ffff00;
  color: #000000;
}

.fr-contact-toggle__button.is-active,
.fr-contact-toggle__button.is-active:hover {
  background: #00ff00;
  color: #000000;
}

.fr-contact-toggle__button:hover span {
  opacity: 0;
}

.fr-contact-toggle__button:hover::after {
  opacity: 1;
  animation: tickerInsideButton 3s linear infinite;
}

.fr-contact-toggle__button.is-active span {
  opacity: 1;
}

.fr-contact-toggle__button.is-active::after {
  opacity: 0;
  animation: none;
}

.fr-contact-page-form {
  margin-top: 3em;
}


/* Tablet contact page */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-contact-page .fr-help-contact-section {
    padding-top: 4.5em;
  }

  .fr-contact-toggle {
    gap: 1em;
    margin-top: 2.2em;
  }

  .fr-contact-toggle__button {
    font-size: 22px;
    padding: 2px 3px;
  }

  .fr-contact-toggle__button::after {
    font-size: 24px;
  }

  .fr-contact-page-form {
    margin-top: 2.6em;
  }
}


/* Mobile contact page */

@media (max-width: 767px) {
  .fr-contact-page .fr-help-contact-section {
    padding-top: 4rem;
  }

  .fr-contact-toggle {
    gap: 0.8em;
    margin-top: 2em;
  }

  .fr-contact-toggle__button {
    font-size: 22px;
    padding: 2px 3px;
  }

  .fr-contact-toggle__button::after {
    font-size: 24px;
  }

  .fr-contact-page-form {
    margin-top: 2.4em;
  }
}



/* =========================
   PRICING PAGE HERO
   ========================= */

.fr-pricing-page {
  width: 100vw;
  margin: -15px 0 0 0;
  padding: 0;
  background: white;
  color: #303031;
  overflow-x: clip;
}

.fr-pricing-hero {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0.5em 2.6em 7em 2.6em;
  background: white;
  color: #303031;
  overflow: hidden;
}

.fr-pricing-hero__grid {
  display: grid;
  grid-template-columns: 26% 38% 19% 17%;
  grid-template-areas:
    "headline room clouds nav"
    "headline room clouds nav";
  column-gap: 2em;
  align-items: start;
  width: 100%;
}



.fr-pricing-hero__headline {
  grid-area: headline;
  align-self: center;
  margin-top: -4.58em;
  color: var(--fr-cyan);
  font-family: var(--fr-font-secondary);
  font-size: 36px;
  font-weight: 900;
  line-height: 33px;
  letter-spacing: -1px;
  text-align: right;
  text-transform: uppercase;
}

.fr-pricing-hero__headline span {
  display: block;
}

.fr-pricing-hero__room-wrap {
  grid-area: room;
  margin-top: -1.85em;
}

.fr-pricing-hero__room {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.fr-pricing-hero__button-wrap {
  margin-top: 1.4em;
  text-align: right;
}

.fr-pricing-hero__button {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 2px 3px;
  background: #ffffff;
  color: #000000;
  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-transform: uppercase;
  text-decoration: none;
}

.fr-pricing-hero__button:hover {
  background: #ffff00;
}

.fr-pricing-hero__clouds {
  grid-area: clouds;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.45em;
  width: 100%;
}

.fr-pricing-hero__cloud {
  display: block;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  border-radius: 12px;
}

.fr-pricing-hero__nav {
  grid-area: nav;
  margin-top: 3.1em;
}

.fr-pricing-hero__nav a {
  display: block;
  margin: 0 0 1.6em 0;
  color: #D1E231;
  font-family: var(--fr-font-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.fr-pricing-hero__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}



/* Tablet pricing hero */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-pricing-page {
    margin: -45px 0 0 0;
  }

  .fr-pricing-hero {
    min-height: auto;
    padding: 2em 1.2em 5em 1.2em;
  }

  .fr-pricing-hero__grid {
    grid-template-columns: 28% 48% 24%;
    grid-template-areas:
      "headline room nav"
      "clouds clouds nav";
    column-gap: 1.2em;
    row-gap: 1.4em;
    align-items: start;
    width: 100%;
  }


  .fr-pricing-hero__headline {
    margin-top: 0;
    align-self: start;
    font-size: 29px;
    line-height: 27px;
    text-align: right;
  }

  .fr-pricing-hero__room-wrap {
    margin-top: 0;
  }

  .fr-pricing-hero__button-wrap {
    margin-top: 1rem;
  }

  .fr-pricing-hero__button {
    padding: 2px 3px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
  }

  .fr-pricing-hero .ticker-hover-button::after {
    font-size: 24px;
  }

  .fr-pricing-hero__nav {
    margin-top: 7.5em;
    margin-right: 2em;
    text-align: right;
  }

  .fr-pricing-hero__nav a {
    margin-bottom: 0.9em;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
  }

  .fr-pricing-hero__clouds {
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    width: 100%;
    margin-top: 0.5em;
  }
}



/* Mobile pricing hero */

@media (max-width: 767px) {
  .fr-pricing-page {
    margin: -45px 0 0 0;
  }

  .fr-pricing-hero {
    min-height: auto;
    padding: 2em 12px 4em 12px;
  }

  .fr-pricing-hero__grid {
    grid-template-columns: 58% 42%;
    grid-template-areas:
      "room room"
      "headline nav"
      "button nav"
      "clouds clouds";
    column-gap: 0;
    row-gap: 1.2rem;
    align-items: start;
    width: 100%;
  }



  .fr-pricing-hero__headline {
    margin-top: 0;
    font-size: 31px;
    line-height: 29px;
    text-align: left;
  }

  .fr-pricing-hero__room-wrap {
    display: contents;
  }

  .fr-pricing-hero__room {
    grid-area: room;
  }

  .fr-pricing-hero__button-wrap {
    grid-area: button;
    margin-top: -0.2rem;
    text-align: left;
  }

  .fr-pricing-hero__button {
    padding: 2px 3px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
  }

  .fr-pricing-hero .ticker-hover-button::after {
    font-size: 24px;
  }

  .fr-pricing-hero__clouds {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }

  .fr-pricing-hero__nav {
    margin-top: 0;
    padding-top: 0.2rem;
    text-align: right;
  }

  .fr-pricing-hero__nav a {
    margin-bottom: 0.85em;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
  }
}


/* =========================
   INNER MARKETING PAGE HEROES
   about / early access / features / updates / help
   ========================= */

.fr-marketing-page {
  width: 100vw;
  margin: -15px 0 0 0;
  padding: 0;
  background: var(--fr-black);
  color: #ffffff;
  overflow-x: clip;
}

.fr-page-hero {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0.5em 2.6em 7em 2.6em;
  background: var(--fr-black);
  color: #ffffff;
  overflow: hidden;
}

.fr-page-hero__grid {
  display: grid;
  grid-template-columns: 26% 38% 19% 17%;
  grid-template-areas:
    "headline room clouds nav"
    "headline room clouds nav";
  column-gap: 2em;
  align-items: start;
  width: 100%;
}



.fr-page-hero__headline {
  grid-area: headline;
  align-self: center;
  margin-top: -1.2em;
  color: var(--fr-cyan);
  font-family: var(--fr-font-secondary);
  font-size: 36px;
  font-weight: 900;
  line-height: 33px;
  letter-spacing: -1px;
  text-align: right;
  text-transform: uppercase;
}

.fr-page-hero__headline span {
  display: block;
}

.fr-page-hero__room-wrap {
  grid-area: room;
  margin-top: 8em;
}

.fr-page-hero__room {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.fr-page-hero__button-wrap {
  margin-top: 1.4em;
  text-align: right;
}

.fr-page-hero__button {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 2px 3px;
  background: #ffffff;
  color: #000000;
  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-transform: uppercase;
  text-decoration: none;
}

.fr-page-hero__button:hover {
  background: #ffff00;
}

.fr-page-hero__clouds {
  grid-area: clouds;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.45em;
  width: 100%;
}

.fr-page-hero__cloud {
  display: block;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  border-radius: 12px;
}

.fr-page-hero__nav {
  grid-area: nav;
  margin-top: 14em;
}

.fr-page-hero__nav a {
  display: block;
  margin: 0 0 1.6em 0;
  color: #D1E231;
  font-family: var(--fr-font-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.fr-page-hero__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* Tablet inner marketing page heroes */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-marketing-page {
    margin: -45px 0 0 0;
  }

  .fr-page-hero {
    min-height: auto;
    padding: 8em 1.2em 5em 1.2em;
  }

  .fr-page-hero__grid {
    grid-template-columns: 28% 48% 24%;
    grid-template-areas:
      "headline room nav"
      "clouds clouds nav";
    column-gap: 1.2em;
    row-gap: 1.4em;
    align-items: start;
    width: 100%;
    transform: none;
  }



  .fr-page-hero__headline {
    margin-top: 0;
    align-self: start;
    font-size: 29px;
    line-height: 27px;
    text-align: right;
  }

  .fr-page-hero__room-wrap {
    margin-top: 0;
  }

  .fr-page-hero__button-wrap {
    margin-top: 1rem;
  }

  .fr-page-hero__button {
    padding: 2px 3px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
  }

  .fr-page-hero .ticker-hover-button::after {
    font-size: 24px;
  }

  .fr-page-hero__nav {
    margin-top: 7.5em;
    margin-right: 2em;
    text-align: right;
  }

  .fr-page-hero__nav a {
    margin-bottom: 0.9em;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
  }

  .fr-page-hero__clouds {
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    width: 100%;
    margin-top: 0.5em;
  }
}


/* Mobile inner marketing page heroes */

@media (max-width: 767px) {
  .fr-marketing-page {
    margin: -45px 0 0 0;
  }

  .fr-page-hero {
    min-height: auto;
    padding: 8em 12px 4em 12px;
  }

  .fr-page-hero__grid {
    grid-template-columns: 58% 42%;
    grid-template-areas:
      "room room"
      "headline nav"
      "button nav"
      "clouds clouds";
    column-gap: 0;
    row-gap: 1.2rem;
    align-items: start;
    width: 100%;
    transform: none;
  }



  .fr-page-hero__headline {
    margin-top: 0;
    font-size: 31px;
    line-height: 29px;
    text-align: left;
  }

  .fr-page-hero__room-wrap {
    display: contents;
  }

  .fr-page-hero__room {
    grid-area: room;
  }

  .fr-page-hero__button-wrap {
    grid-area: button;
    margin-top: -0.2rem;
    text-align: left;
  }

  .fr-page-hero__button {
    padding: 2px 3px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
  }

  .fr-page-hero .ticker-hover-button::after {
    font-size: 24px;
  }

  .fr-page-hero__clouds {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }

  .fr-page-hero__nav {
    margin-top: 0;
    padding-top: 0.2rem;
    text-align: right;
  }

  .fr-page-hero__nav a {
    margin-bottom: 0.85em;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
  }
}


/* =========================
   WEBSITE NAV TOGGLE
   ========================= */

.fr-site-nav-logo {
  position: fixed;
  top: 4px;
  left: 8px;
  z-index: 9000;
  display: block;
  width: 150px;
  height: auto;
  line-height: 0;
  text-decoration: none;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  will-change: opacity, transform;
}

.fr-site-nav-logo__image {
  display: block;
  width: 100%;
  height: auto;
}

.fr-site-nav-logo.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-80px);
}

.fr-site-nav-toggle {
  position: fixed;
  top: 0px;
  right: -12px;

  --fr-nav-toggle-y: -25px;

  z-index: 9000;
  display: block;
  width: 158px;
  height: 158px;
  line-height: 0;
  text-decoration: none;
  opacity: 1;
  transform: translateY(var(--fr-nav-toggle-y));
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  will-change: opacity, transform;
}

.fr-site-nav-toggle.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-90px);
}

.fr-site-nav-toggle__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fr-site-nav-toggle:hover {
  transform: translateY(var(--fr-nav-toggle-y)) scale(1.04);
}


.fr-site-nav-logo__image {
  display: block;
  width: 100%;
  height: auto;
}

.fr-site-nav-logo__image--light-text {
  display: none;
}

.fr-page-is-dark .fr-site-nav-logo__image--dark-text {
  display: none;
}

.fr-page-is-dark .fr-site-nav-logo__image--light-text {
  display: block;
}



/* Tablet website nav toggle */

@media (min-width: 768px) and (max-width: 1180px) {

  .fr-site-nav-logo {
    top: 5px;
    left: 8px;
    width: 130px;
  }

  .fr-site-nav-toggle {
    top: 3px; /* CHANGED: was 5px. Larger = lower, smaller = higher */
    right: 0px;
    width: 100px;
    height: 100px;

    --fr-nav-toggle-y: 0px; /* NEW: stops the desktop -25px upward pull on tablet */
  }

  .fr-site-nav-toggle.is-hidden {
    transform: translateY(-100px); /* CHANGED: was -80px, keeps hide movement clean */
  }
}


/* Mobile website nav toggle */

@media (max-width: 767px) {

  .fr-site-nav-logo {
    top: 1px; /* or 4px if you prefer */
    left: 8px;
    width: 100px;
  }

  .fr-site-nav-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 132px); /* CHANGED: keep aligned with final mobile override */
    right: 0px;
    width: 80px;
    height: 80px;

    --fr-nav-toggle-y: 0px; /* stops the -25px pull from desktop */
  }

  .fr-site-nav-toggle:hover {
    transform: translateY(0) scale(1.04);
  }

  .fr-site-nav-toggle.is-hidden {
    transform: translateY(-140px);
  }
}



/* =========================
   BLOG / INSIGHTS PAGES
   ========================= */

.fr-blog-page {
  background: var(--fr-black);
}


.fr-blog-page-title__heading {
  max-width: 430px;
  margin: 0;
  color: #ffffff;
  font-family: var(--fr-font-secondary);
  font-size: 55px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -1.8px;
  text-align: left;
  text-transform: uppercase;
}

.fr-blog-detail-section {
  width: 100vw;
  margin: 0;
  padding: 12rem 4.5rem 9rem 4.5rem;
  background: var(--fr-black);
  color: #ffffff;
  overflow: hidden;
}

/* CHANGED: two-column article layout */
.fr-blog-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, 33%) minmax(420px, 1fr);
  column-gap: 340px;
  align-items: start;
  width: 100%;
  max-width: 1320px;
  margin: 0;
  padding: 0;
}

/* CHANGED: intro column now starts cleanly */
.fr-blog-detail-intro-col {
  margin: 0;
  padding: 0;
  transform: translateX(4rem); /* TWEAK: negative = title further left */
}

/* CHANGED: replaces old .fr-blog-detail-strapline */
.fr-blog-detail-intro-heading {
  margin: 0 0 1.4rem 0;
  color: #D1E231;
  font-family: var(--fr-font-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

/* CHANGED: intro uses Antipoda / primary font */
.fr-blog-detail-intro-copy {
  max-width: 430px;
  margin: 0;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1.35;
  text-align: left;
}

/* CHANGED: paragraph spacing for plain article intro */
.fr-blog-detail-intro-copy p {
  margin: 0 0 1em 0;
}

.fr-blog-detail-intro-copy p:last-child {
  margin-bottom: 0;
}


.fr-blog-detail-copy-col {
  width: 100%;
  max-width: 480px;
  margin: 0;
  padding: 0;
}

.fr-blog-detail-card {
  margin: 0;
}

.fr-blog-detail-card + .fr-blog-detail-card {
  margin-top: 3.2rem;
}

.fr-blog-detail-intro-block {
  margin: 0 0 3.2rem 0;
}

.fr-blog-detail-card__title {
  margin: 0 0 0.8rem 0;
  color: #D1E231;
  font-family: var(--fr-font-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

/* CHANGED:
   - removed green background
   - removed card padding
   - body is Antipoda / primary font */
.fr-blog-detail-card__body {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1.35;
  text-align: left;
}

.fr-blog-detail-card__body p {
  margin: 0 0 1em 0;
}

.fr-blog-detail-card__body p:last-child {
  margin-bottom: 0;
}


/* =========================
   BLOG RELATED ARTICLE TILES
   ========================= */

.fr-blog-related {
  /* CHANGED: sits directly under the blog article */
  width: 100vw;
  margin: 0;
  padding: 0 40px 8em 40px;
  background: var(--fr-black);
  color: #ffffff;
}

/* CHANGED:
   optional, but recommended.
   This hides the normal static footer "read all about it" row on blog pages,
   so you do not get two article-tile rows. */
.fr-blog-page .fr-footer > .fr-footer-read {
  display: none;
}


/* Tablet blog layout */

@media (min-width: 768px) and (max-width: 1180px) {

  .fr-blog-page-title__heading {
    font-size: 32px;
    line-height: 0.9;
  }

  .fr-blog-detail-section {
    padding: 12rem 2.5rem 7rem 2.5rem;
  }

  .fr-blog-detail-grid {
    grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
    column-gap: 5.5rem;
    max-width: none;
  }

  .fr-blog-detail-intro-col {
    transform: translateX(-2rem); /* TWEAK: negative = title further left */
  }

  .fr-blog-detail-intro-copy,
  .fr-blog-detail-card__body {
    font-size: 15px;
    line-height: 1.35;
  }


  .fr-blog-detail-copy-col {
    justify-self: start;
    width: 100%;
    max-width: 380px;
  }
}

/* Tablet blog related tiles */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-blog-related {
    padding: 0 32px 7em 32px;
  }

  .fr-blog-related .fr-footer-read-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4.5em 32px;
  }

  .fr-blog-related .fr-footer-read-card__copy {
    grid-template-columns: 12% 88%;
  }

  .fr-blog-related .fr-footer-read-card__title {
    font-size: 15px;
  }

  .fr-blog-related .fr-footer-read-card__text {
    font-size: 14px;
  }
}



/* Mobile blog layout */

@media (max-width: 767px) {

  .fr-blog-page-title__heading {
    font-size: 38px;
    line-height: 0.9;
    letter-spacing: -1.4px;
  }

  .fr-blog-detail-section {
    padding: 9rem 1.25rem 5rem 1.25rem;
  }

  .fr-blog-detail-grid {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .fr-blog-detail-intro-col {
    margin: 0 0 3rem 0;
    padding: 0;
    transform: none;
  }

  .fr-blog-detail-intro-heading,
  .fr-blog-detail-card__title {
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .fr-blog-detail-intro-copy,
  .fr-blog-detail-card__body {
    max-width: none;
    font-size: 13px;
    line-height: 1.35;
  }

  .fr-blog-detail-copy-col {
    max-width: none;
  }

  .fr-blog-detail-card + .fr-blog-detail-card {
    margin-top: 2.6rem;
  }
}


/* Mobile blog related tiles */

@media (max-width: 767px) {
  .fr-blog-related {
    padding: 0 32px 5em 32px;
  }

  .fr-blog-related .fr-footer-read-grid {
    display: block;
  }

  .fr-blog-related .fr-footer-read-card {
    margin-bottom: 45px;
  }

  .fr-blog-related .fr-footer-read-card__copy {
    grid-template-columns: 16% 84%;
    margin-top: 0.9em;
  }

  .fr-blog-related .fr-footer-read-card__star {
    min-width: 0;
  }

  .fr-blog-related .fr-footer-read-card__title {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 15px;
  }

  .fr-blog-related .fr-footer-read-card__text {
    font-size: 14px;
  }
}




/* =========================
   UPDATES ARTICLE TILES
   ========================= */

.fr-updates-articles-section {
  width: 100vw;
  margin: 0;
  padding: 5em 40px 8em 40px;
  background: var(--fr-black);
  color: #ffffff;
}

.fr-updates-articles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5em 50px;
  width: 100%;
}

.fr-updates-article-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.fr-updates-article-card__image {
  display: block;
  width: 100%;
  height: 500px;
  border-radius: 12px;
}

.fr-updates-article-card__copy {
  display: grid;
  grid-template-columns: 9% 91%;
  align-items: start;
  margin-top: 1.2em;
}

.fr-updates-article-card__star {
  display: block;
  width: 100%;
  min-width: 48px;
  opacity: 0.29;
  transform: translateX(-2px);
}

.fr-updates-article-card__text-wrap {
  padding-left: 0.4em;
  transform: translateY(20px);
}

.fr-updates-article-card__title {
  margin: 0 0 0 -0.6em;
  color: #D1E231;
  font-family: var(--fr-font-primary);
  font-size: 17px;
  font-weight: 750;
  line-height: 19px;
  text-transform: uppercase;
}

.fr-updates-article-card__text {
  margin: 0 0 0 -0.6em;
  color: #ffffff;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 350;
  line-height: 1.4;
}

.fr-updates-article-card:hover .fr-updates-article-card__title {
  text-decoration: none;
  color: #00ff00;
}


/* Tablet updates article tiles */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-updates-articles-section {
    padding: 4em 1em 7em 1em;
  }

  .fr-updates-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6em 32px;
  }

  .fr-updates-article-card__copy {
    grid-template-columns: 8% 92%;
  }

  .fr-updates-article-card__text-wrap {
    position: relative;
    z-index: 2;
    padding-left: 0;
    transform: translate(-0.9em, 18px);
  }

  .fr-updates-article-card__title {
    margin: 0 0 0.5em 0;
    font-size: 15px;
    line-height: 19px;
  }

  .fr-updates-article-card__image {
    height: 390px;
  }

  .fr-updates-article-card__text {
    margin: 0;
    font-size: 14px;
  }
}





/* Mobile updates article tiles */

@media (max-width: 767px) {
  .fr-updates-articles-section {
    padding: 73px 0.8em 5em 0.8em;
  }

  .fr-updates-articles-grid {
    display: block;
  }

  .fr-updates-article-card {
    margin-bottom: 0;
  }

  .fr-updates-article-card + .fr-updates-article-card {
    margin-top: 68px;
  }

  .fr-updates-article-card__copy {
    grid-template-columns: 10% 90%;
    margin-top: 0.9em;
  }

  .fr-updates-article-card__star {
    min-width: 0;
  }

  .fr-updates-article-card__text-wrap {
    position: relative;
    z-index: 2;
    padding-left: 0;
    transform: translate(-1em, 16px);
  }

  .fr-updates-article-card__title {
    margin: 0 0 0.5em 0;
    font-size: 15px;
    line-height: 19px;
  }

  .fr-updates-article-card__image {
    height: 430px;
  }

  .fr-updates-article-card__text {
    margin: 0;
    font-size: 14px;
  }
}



/* =========================
   ABOUT INTRO SECTION
   ========================= */

.fr-about-intro-section {
  --fr-about-intro-font-size: clamp(48px, 5.8vw, 96px);
  --fr-about-body-font-size: 22px;
  --fr-about-location-font-size: 13px;

  width: 100vw;
  min-height: auto;
  margin: 0;
  padding: 12em 2.5em 3em 0.5em;

  background: transparent;
  color: #000000;
  overflow: visible;
}

.fr-about-intro-section__inner {
  max-width: 980px;
  margin: 0;
}


.fr-about-page {
  background-color: #e9ff00;
  transition: background-color 180ms linear;
  margin-top: 0;
}

.fr-about-page.fr-marketing-page {
  margin: -45px 0 0 0;
  background-color: #e9ff00;
}

.fr-about-intro-section__logo-link {
  display: block;
  width: 60%;
  max-width: 780px;
}

.fr-about-intro-section__logo {
  display: block;
  width: 100%;
  height: auto;
}

.fr-about-intro-section__intro {
  margin: 0;
  max-width: 920px;

  font-family: var(--fr-font-secondary);
  font-size: var(--fr-about-intro-font-size);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -3px;
  text-transform: uppercase;
}

.fr-about-intro-section__body {
  max-width: 620px;
  margin: 3em 0 0 0;

  font-family: var(--fr-font-primary);
  font-size: var(--fr-about-body-font-size);
  font-weight: 350;
  line-height: 1.25;
}

.fr-about-intro-section__location {
  margin: 4em 0 0 0;

  font-family: var(--fr-font-secondary);
  font-size: var(--fr-about-location-font-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 3.7px;
  text-transform: uppercase;
}


.fr-about-page {
  background-color: #e9ff00;
  transition: background-color 180ms linear;
}

body:has(.fr-about-page) {
  background: #e9ff00;
}

/* Tablet about intro */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-about-intro-section {
    --fr-about-intro-font-size: 44px;
    --fr-about-body-font-size: 18px;
    --fr-about-location-font-size: 12px;

    min-height: auto;
    margin: 0;
    padding: 6em 20em 3em 2em;
    background-attachment: scroll;
  }

  .fr-about-intro-section__logo-link {
    width: 70%;
    max-width: 540px;
  }

  .fr-about-intro-section__inner {
    max-width: 820px;
    margin: 0;
  }

  .fr-about-intro-section__intro {
    max-width: 760px;
    font-size: var(--fr-about-intro-font-size);
    line-height: 0.92;
    letter-spacing: -2.5px;
  }

  .fr-about-intro-section__body {
    max-width: 560px;
    margin: 2.5em 0 0 0;
    font-size: var(--fr-about-body-font-size);
    line-height: 1.28;
  }

  .fr-about-intro-section__location {
    margin: 3.5em 0 0 0;
    font-size: var(--fr-about-location-font-size);
    letter-spacing: 3px;
  }
}


/* =========================
   ABOUT — NARROW DESKTOP ONLY
   Fixes squished desktop view only.
   Does not affect touch tablet/mobile.
   ========================= */

@media (min-width: 768px) and (max-width: 1180px) and (min-height: 760px) and (hover: hover) and (pointer: fine) {
  .fr-about-intro-section {
    --fr-about-intro-font-size: 72px;
    --fr-about-body-font-size: 20px;

    /*
      TWEAK:
      top padding moves the text lower.
      right padding keeps the copy from getting too wide.
      left padding moves everything left/right.
    */
    padding: 8em 18em 3.5em 0.5em;
  }

  .fr-about-intro-section__inner {
    max-width: 780px;
  }

  .fr-about-intro-section__intro {
    max-width: 760px;
  }

  .fr-about-intro-section__body {
    max-width: 440px;
    margin-top: 2.7em;
  }
}


/* Mobile about intro */

@media (max-width: 767px) {
  .fr-about-intro-section {
    --fr-about-intro-font-size: 40px;
    --fr-about-body-font-size: 17px;
    --fr-about-location-font-size: 11px;

    min-height: auto;
    margin: 0;
    padding: 6em 3rem 3em 2em;
    background-attachment: scroll;
  }

  .fr-about-intro-section__logo-link {
    width: 80%;
    max-width: none;
  }

  .fr-about-intro-section__inner {
    max-width: none;
    margin: 0;
  }

  .fr-about-intro-section__intro {
    max-width: none;
    line-height: 0.92;
    letter-spacing: -2px;
  }

  .fr-about-intro-section__body {
    max-width: 92%;
    margin: 2em 0 0 0;
    line-height: 1.28;
  }

  .fr-about-intro-section__location {
    margin: 3em 0 0 0;
    letter-spacing: 2.4px;
  }
}



/* =========================
   BILLING CHOICES SECTION
   ========================= */

.fr-billing-section {
  width: 100vw;
  margin: -16em 0 0 0;
  padding: 7em 3em 8em 3em;
  background: transparent;
  color: #303031;
  overflow: visible;
  text-align: center;
}

.fr-billing-grid {
  display: block;
  width: 100%;
}

/* Hide the small intro label and paragraph */
.fr-billing-kicker,
.fr-billing-intro {
  display: none;
}

.fr-billing-left {
  max-width: none;
  margin: 0 auto 3.5em auto;
  padding: 0;
}


.fr-billing-title {
  display: inline-block;
  color: #303031;
  font-family: var(--fr-font-secondary);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}



/* Main content area */
.fr-billing-right {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 auto;
}

.fr-billing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  width: 100%;
  max-width: none;
  margin: 0 auto 2.5em auto;
}

.fr-billing-toggle__button {
  appearance: none;
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 2px 3px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: black;
  border: 2px solid black;
  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.fr-billing-toggle__button::after {
  content: attr(data-ticker);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  color: black;
  font-family: inherit;
  font-size: 29px;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  animation: none;
}

.fr-billing-toggle__button:hover {
  background: #ffff00;
  color: #000000;
}

.fr-billing-toggle__button.is-active,
.fr-billing-toggle__button.is-active:hover {
  background: #00ff00;
  color: #000000;
}

.fr-billing-toggle__button:hover span {
  opacity: 0;
}

.fr-billing-toggle__button.is-active span {
  opacity: 1;
}

.fr-billing-toggle__button:hover::after {
  opacity: 1;
  animation: tickerInsideButton 3s linear infinite;
}

.fr-billing-toggle__button.is-active::after {
  opacity: 0;
  animation: none;
}

/* Hide the extra white/magenta explanation row for now */
.fr-billing-mode-note {
  display: none;
}

.fr-billing-panel {
  margin: 0;
}

/* Cards: product-summary style, without images */
.fr-billing-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  align-items: stretch;
}

.fr-billing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 325px;
  padding: 30px 14px 38px 14px;
  background: #ffffff;
  color: #000000;
  border: 2px solid #080808;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
}


.fr-billing-card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 138px;
  margin: 0 0 1.6em 0;
}

.fr-billing-card__top h3 {
  margin: 0 0 0.55em 0;
  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 40px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -1.5px;
  text-align: center;
  text-transform: uppercase;
}

.fr-billing-price-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55em;
  width: 100%;
  flex-wrap: wrap;
}

.fr-billing-price-bubble {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 0.95rem;
  border: 2px solid #000000;
  border-radius: 55px;

  color: #303031;
  background: #ffff00;
  font-family: var(--fr-font-primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

/* Billing card heading above the body bullets */
.fr-billing-card__delivery {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto 0.85em auto;

  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.fr-billing-card__list {
  width: 100%;
  max-width: 260px;
  margin: 0 auto 2em auto;
  padding: 0;
  list-style: none;
  text-align: center;
  transform: translateX(0.03em);
}

.fr-billing-card__list li {
  display: block;
  margin: 0 0 0.45em 0;
  padding: 0;

  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.fr-billing-card__list li:last-child {
  margin-bottom: 0;
}

.fr-billing-card__list li::before {
  content: none;
  display: none;
}

/* Card buttons: homepage ticker-button style */
.fr-billing-card__button {
  position: relative;
  display: inline-block;
  width: max-content;
  margin: auto 0 0 0;
  overflow: hidden;

  padding: 2px 3px;
  border: 0;
  background: white;
  color: black;
  border: 2px solid black;
  font-family: var(--fr-font-secondary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.6px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.fr-billing-card__button::after {
  content: attr(data-ticker);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  color: #000000;
  font-family: inherit;
  font-size: 29px;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  animation: none;
}

.fr-billing-card__button:hover {
  background: #ffff00;
  color: transparent;
}

.fr-billing-card__button:active,
.fr-billing-card__button:focus-visible {
  background: #00ff00;
  color: transparent;
}

.fr-billing-card__button:hover::after,
.fr-billing-card__button:active::after,
.fr-billing-card__button:focus-visible::after {
  opacity: 1;
  animation: tickerInsideButton 3s linear infinite;
}

.fr-billing-card--plus .fr-billing-card__top h3 {
  font-family: var(--fr-font-secondary);
  font-size: 70px;
  font-weight: 800;
  line-height: 0.65;
  letter-spacing: -2px;
  transform: translateY(-8px);
  margin-bottom: 0.20em;
}


.fr-billing-plan-name {
  font-weight: 800;
  text-transform: uppercase;
}

.fr-billing-plan-name--plus {
  display: inline-block;
  font-size: 1.55em;
  font-weight: 800;
  line-height: 0.8;
  transform: translateY(0.10em);
  font-family: var(--fr-font-secondary);
}


/* Tablet billing choices */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-billing-section {
    margin: -3.5em 0 0 0;
    padding: 5em 1.5em 6em 1.5em;
  }

  .fr-billing-left {
    margin-bottom: 3em;
  }

  .fr-billing-title {
    font-size: 23px;
    line-height: 1;
    white-space: normal;
  }

  .fr-billing-toggle {
    width: 100%;
    gap: 1.4em;
    margin-bottom: 2.2em;
    flex-wrap: wrap;
  }

  .fr-billing-toggle__button,
  .fr-billing-card__button {
    font-size: 24px; /* TWEAK: tablet billing button text */
    padding: 1px 2px;
  }

  .fr-billing-toggle__button::after,
  .fr-billing-card__button::after {
    font-size: 26px; /* TWEAK: tablet billing hover ticker text */
  }

  .fr-billing-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .fr-billing-card {
    min-height: 340px;
    padding: 28px 14px 34px 14px;
  }

  .fr-billing-card__top {
    min-height: 108px; /* TWEAK: reduces space before card body text */
    margin-bottom: 1em;
  }

  .fr-billing-card__top h3 {
    font-size: 38px;
  }

  .fr-billing-card--plus .fr-billing-card__top h3 {
    font-size: 64px;
    line-height: 0.62;
    transform: translateY(-7px);
    margin-bottom: 0.18em;
  }

  .fr-billing-price-row {
    gap: 0.45em;
  }

  .fr-billing-price-bubble {
    font-size: 11px;
    padding: 0.65rem 0.8rem;
  }

  .fr-billing-card__list {
    max-width: 280px;
    margin: 0 auto 2em auto;
    transform: translateX(-1px);
  }

  .fr-billing-card__list li {
    display: block;
    font-size: 15px;
    line-height: 1.45;
  }

  .fr-billing-card__list li::before {
    content: none;
    display: none;
  }
}



/* Mobile billing choices */

@media (max-width: 767px) {
  .fr-billing-section {
    margin: -2.5rem 0 0 0;
    padding: 4rem 1rem 5rem 1rem;
  }

  .fr-billing-left {
    margin-bottom: 2.5em;
  }

  .fr-billing-title {
    font-size: 20px;
    line-height: 1;
    white-space: normal;
  }

  .fr-billing-toggle {
    width: 100%;
    gap: 0.75em;
    margin-bottom: 2em;
    flex-wrap: wrap;
  }

  .fr-billing-toggle__button {
    font-size: 22px; /* TWEAK: mobile annual/monthly button text */
    padding: 1px 2px;
  }

  .fr-billing-toggle__button::after {
    font-size: 24px;
  }

  .fr-billing-card__button {
    font-size: 22px; /* TWEAK: mobile choose button text */
    padding: 1px 2px;
  }

  .fr-billing-card__button::after {
    font-size: 24px;
  }

  .fr-billing-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fr-billing-card {
    min-height: auto;
    padding: 28px 14px 34px 14px;
  }

  .fr-billing-card__top {
    min-height: 104px; /* TWEAK: reduces space before card body text */
    margin-bottom: 1em;
  }

  .fr-billing-card__top h3 {
    font-size: 38px;
  }

  .fr-billing-card--plus .fr-billing-card__top h3 {
    font-size: 60px;
    line-height: 0.62;
    transform: translateY(-6px);
    margin-bottom: 0.16em;
  }

  .fr-billing-price-row {
    gap: 0.45em;
  }

  .fr-billing-price-bubble {
    font-size: 10px;
    padding: 0.6rem 0.75rem;
  }

  .fr-billing-card__list {
    max-width: 280px;
    margin: 0 auto 2em auto;
    transform: translateX(-1px);
  }

  .fr-billing-card__list li {
    display: block;
    font-size: 15px;
    line-height: 1.45;
  }

  .fr-billing-card__list li::before {
    content: none;
    display: none;
  }
}


/* =========================
   PAGE GAP CLEANUP BEFORE FOOTER
   ========================= */

/* About page: reduce the space before the footer */
.fr-about-intro-section {
  min-height: auto;
  padding-bottom: 3em;
}

/* Features page: reduce the space after the final cards */
.fr-features-shell {
  min-height: auto;
  padding-bottom: 3em;
}

/* Policy pages: reduce the space after the final policy block */
.fr-policy-content-section {
  padding-bottom: 3em;
}

/* Module pages: reduce the space after the final module content block */
.fr-module-detail-section {
  padding-bottom: 3em;
}

body:has(.fr-policy-page),
body:has(.fr-module-page) {
  background: var(--fr-black);
}


body:has(.fr-about-page),
body:has(.fr-policy-page),
body:has(.fr-module-page) {
  background: var(--fr-black);
}


/* =========================
   EARLY ACCESS PAGE
   ========================= */

.fr-early-access-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;

  /* TWEAK: pulls the page background up to close the top gap */
  margin-top: -68px;
  padding-top: 68px;

  /* TWEAK: fallback/start colour before JS scroll colour updates */
  background: #00ffff;
  background-color: #00ffff;
  transition: background-color 180ms linear;

  color: #303031;
  overflow: hidden;
}

html:has(.fr-early-access-page),
body:has(.fr-early-access-page) {
  background: #00ffff;
  background-color: #00ffff;
}

.fr-early-access-page::before {
  display: none;
}


.fr-early-access-logo-section {
  display: none;
}

.fr-early-access-note-section {
  width: 100vw;

  /* TWEAK: note section spacing */
  margin: -1em 0 0 0;
  padding: 0 0 18em 0;

  background: transparent;
  color: #303031;
  overflow: visible;
}

.fr-early-access-note {
  width: 29%;
  max-width: 430px;

  /* TWEAK: horizontal position */
  margin: 1.5em 0 0 33%;

  text-align: left;
}

.fr-early-access-note h2 {
  margin: 0 0 15px 0;
  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.fr-early-access-note p {
  margin: 0;
  color: #303031;
  font-family: var(--fr-font-secondary);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.3px;
  text-align: left;
}

.fr-early-access-indent {
  display: inline-block;
  padding-left: 44px;
}



/* =========================
   EARLY ACCESS WAITLIST FORM
   ========================= */

.fr-early-access-waitlist {
  width: calc(100% - 6em);
  margin: 3em auto 0 auto;
  padding: 0 0 2em 0;
}

.fr-early-access-waitlist-form {
  display: block;
  width: 100%;
  max-width: none;
  margin: 2.6em auto 0 auto;
}

.fr-early-access-waitlist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content auto;
  align-items: center;
  gap: 1em;
  width: 100%;
}

.fr-early-access-inline-field {
  min-width: 0;
  margin: 0;
}

/* CHANGED:
   The selected plan area is now two selectable bubbles:
   PLAN ANNUAL + PLAN MONTHLY.
*/

.fr-early-access-plan-options {
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: max-content;
}

.fr-early-access-plan-field .fr-early-access-plan-display {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  min-width: 185px;
  max-width: none;
  height: 57px;
  min-height: 57px;
  padding: 0 1.8em;
  border: 2px solid #000000;
  border-radius: 999px;

  background: #ffffff;
  color: #000000;

  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;

  cursor: pointer;
}


.fr-early-access-plan-field .fr-early-access-plan-display:hover {
  background: #ffff00;
}


.fr-early-access-plan-field .fr-early-access-plan-display.is-active,
.fr-early-access-plan-field .fr-early-access-plan-display[aria-pressed="true"] {
  background: #00ff00;
}


.fr-early-access-plan-field .fr-early-access-plan-display.is-active:hover,
.fr-early-access-plan-field .fr-early-access-plan-display[aria-pressed="true"]:hover {
  background: #00ff00;
}

.fr-early-access-plan-field .fr-early-access-plan-display:focus {
  outline: none;
  border-color: #000000;
}

.fr-early-access-send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* TWEAK: button position/height */
  align-self: center;
  min-height: 0;
  margin: 0;

  /* TWEAK: button padding */
  padding: 2px 3px;

  /* TWEAK: button text size */
  font-size: 26px;
}

.fr-early-access-waitlist-form .fr-help-contact-status {
  margin: 1rem 0 0 0;
}



/* =========================
   EARLY ACCESS WAITLIST FORM — TABLET + MOBILE
   Name row, email row, choices + send row.
   ========================= */

@media (max-width: 1180px) {
  .fr-early-access-waitlist {
    width: calc(100% - 3rem);
    margin-top: 2.4em;
  }

  .fr-early-access-waitlist-form {
    margin-top: 2em;
  }

  .fr-early-access-waitlist-row {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0.85em;
  }

  /* Name on its own line */
  .fr-early-access-waitlist-row > .fr-early-access-inline-field:nth-of-type(1) {
    grid-column: 1 / -1;
  }

  /* Email on its own line */
  .fr-early-access-waitlist-row > .fr-early-access-inline-field:nth-of-type(2) {
    grid-column: 1 / -1;
  }

  .fr-early-access-inline-field input {
    width: 100%;
  }

  /* Choices on line 3, send button beside them */
  .fr-early-access-plan-field {
    grid-column: 1 / 2;
    min-width: 0;
  }

  .fr-early-access-send-button {
    grid-column: 2 / 3;
    align-self: center;
  }

  .fr-early-access-plan-options {
    width: auto;
    max-width: 100%;
    gap: 0.55em;
  }

  .fr-early-access-plan-field .fr-early-access-plan-display {
    min-width: 145px;
    height: 52px;
    min-height: 52px;
    padding: 0 1.2em;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .fr-early-access-waitlist {
    width: calc(100% - 1.8rem);
    margin-top: 2em;
  }

  .fr-early-access-waitlist-row {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0.7em;
  }

  .fr-early-access-plan-options {
    gap: 0.42em;
  }

  .fr-early-access-plan-field .fr-early-access-plan-display {
    min-width: 108px;
    height: 44px;
    min-height: 44px;
    padding: 0 0.75em;
    font-size: 12px;
  }

  .fr-early-access-send-button {
    font-size: 22px;
    padding: 2px 3px;
  }
}



/* =========================
   EARLY ACCESS PAGE — TABLET
   ========================= */

@media (min-width: 768px) and (max-width: 1180px) {

  .fr-early-access-logo-section {
    display: none;
  }

  .fr-early-access-note-section {
    margin-top: 2em;
    padding-bottom: 4.5em;
  }

  .fr-early-access-note {
    width: 42%;
    max-width: 430px;
    margin-left: 30%;
  }

  .fr-early-access-note p {
    font-size: 16px;
    line-height: 1.55;
  }

}


/* =========================
   EARLY ACCESS PAGE — MOBILE
   ========================= */

@media (max-width: 767px) {

  .fr-early-access-logo-section {
    display: none;
  }

  .fr-early-access-note-section {
    margin-top: 0;
    padding: 2em 1.4rem 3.8rem 1.4rem;
  }

  .fr-early-access-note {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .fr-early-access-note p {
    font-size: 15px;
    line-height: 1.55;
  }
}



/* =========================
   FINAL TABLET FOOTER TYPE FIX
   Normal footer and Updates footer are deliberately separated.
   Put this at the very end of website.css.
   ========================= */

@media (min-width: 768px) and (max-width: 1366px) {

  /* NORMAL / HOMEPAGE FOOTER */

  .fr-footer:not(.fr-footer--updates) .fr-footer-kicker,
  .fr-footer:not(.fr-footer--updates) .fr-footer-read > h2.fr-footer-kicker,
  .fr-footer:not(.fr-footer--updates) .fr-footer-bottom__kicker-col > h2.fr-footer-kicker {
    font-size: 9px !important; /* TWEAK: homepage read all about it / get stuck in */
    line-height: 1 !important;
    letter-spacing: 2px !important;
  }

  .fr-footer:not(.fr-footer--updates) .fr-footer-legal,
  .fr-footer:not(.fr-footer--updates) .fr-footer-legal p {
    font-size: 8px !important; /* TWEAK: homepage legal/company info */
    line-height: 1.15 !important;
  }


  /* UPDATES FOOTER */

  .fr-footer.fr-footer--updates .fr-footer-kicker,
  .fr-footer.fr-footer--updates .fr-footer-bottom__kicker-col > h2.fr-footer-kicker {
    font-size: 15px !important; /* TWEAK: updates get stuck in */
    line-height: 1 !important;
    letter-spacing: 2.4px !important;
  }

  .fr-footer.fr-footer--updates .fr-footer-legal,
  .fr-footer.fr-footer--updates .fr-footer-legal p {
    font-size: 8px !important; /* TWEAK: updates legal/company info */
    line-height: 1.15 !important;
  }


  /* SHARED TABLET FOOTER LINKS */

  .fr-footer .fr-footer-link-column__title {
    font-size: 15px !important; /* TWEAK: white column headings */
    line-height: 1 !important;
  }

  .fr-footer .fr-footer-link-list a,
  .fr-footer .fr-footer-link-list a span {
    font-size: 15px !important; /* TWEAK: green footer links */
    line-height: 1 !important;
  }
}


/* =========================
   TABLET / MOBILE PRICING CARDS
   Separate section. Existing desktop pricing table is untouched.
   Put this at the very end of website.css.
   ========================= */

.fr-pricing-cards-section {
  display: none;
}


@media (max-width: 1180px) {

  /* Hide the original sticky pricing table on tablet/mobile only */

  .fr-home-page .fr-pricing-section {
    display: none !important;
  }


  /* Show the new card section */

  .fr-home-page .fr-pricing-cards-section {
    display: block;
    width: 100vw;
    margin: -2px 0 0 0;
    padding: calc(2.5rem + 2px) 1.25rem 4.5rem 1.25rem;
    background-color: var(--fr-home-canvas-colour, transparent);
    box-shadow: 0 -3px 0 0 var(--fr-home-canvas-colour, transparent);
    color: #303031;
    overflow: visible;
  }


  .fr-pricing-cards-intro {
    display: grid;
    grid-template-columns: minmax(120px, 24%) minmax(0, 76%);
    align-items: end;
    gap: 1rem;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto 2.2rem auto;
  }

  .fr-pricing-cards-cat {
    display: block;
    width: 145%;
    max-width: 280px;
    height: auto;
    margin: 0 0 -0.4rem -2.6rem;
  }

  .fr-pricing-cards-intro-copy {
    padding-bottom: 0.4rem;
    text-align: right;
  }

  .fr-pricing-cards-kicker {
    display: inline-block;
    margin: 0 0 0.7rem 0;
    color: #303031;
    font-family: var(--fr-font-primary);
    font-size: 13px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    letter-spacing: 2.2px;
    text-transform: uppercase;
  }

  .fr-pricing-cards-title {
    margin: 0;
    color: #303031;
    font-family: var(--fr-font-secondary);
    font-size: clamp(56px, 9vw, 104px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -3.4px;
    text-transform: uppercase;
  }


  .fr-pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
  }


  .fr-pricing-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 2px solid #303031;
    border-radius: 14px;
    background: #ffffff;
  }

  .fr-pricing-card-header {
    position: relative;
    min-height: 178px;
    padding: 1rem;
    overflow: hidden;
    background: #303031;
    color: #ffffff;
  }

  .fr-pricing-card-plan {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #ffffff;
    font-family: var(--fr-font-secondary);
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -3px;
    text-transform: uppercase;
  }

  .fr-pricing-card-price-img {
    position: absolute;
    right: 0.75rem;
    bottom: 0.7rem;
    z-index: 3;
    display: block;
    width: 62%;
    max-width: 260px;
    height: auto;
  }

  .fr-pricing-card-price-img--plus {
    width: 58%;
    max-width: 250px;
  }


  .fr-pricing-card-rows {
    width: 100%;
  }

  .fr-pricing-card-row {
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: center;
    min-height: 42px;
  }

  .fr-pricing-card-row--dark {
    background: #303031;
    color: #ffffff;
  }

  .fr-pricing-card-row--light {
    background: #ffffff;
    color: #303031;
  }

  .fr-pricing-card-feature,
  .fr-pricing-card-value {
    padding: 0.75em 0.7em;
    font-family: var(--fr-font-secondary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
  }

  .fr-pricing-card-feature {
    font-weight: 500;
  }


  .fr-pricing-card-cta {
    display: block;
    margin-top: auto;
    padding: 0.9em 0.8em;
    background: #ffff00;
    color: #303031;
    font-family: var(--fr-font-primary);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}



/* Mobile pricing cards */

@media (max-width: 767px) {

  .fr-home-page .fr-pricing-cards-section {
    padding: calc(2rem + 2px) 0.9rem 3.8rem 0.9rem;
  }

  .fr-pricing-cards-intro {
    grid-template-columns: 34% 66%;
    gap: 0.4rem;
    margin-bottom: 1.4rem;
  }

  .fr-pricing-cards-cat {
    width: 170%;
    max-width: 190px;
    margin-left: -2.5rem;
    margin-bottom: -0.2rem;
  }

  .fr-pricing-cards-intro-copy {
    padding-bottom: 0.2rem;
  }

  .fr-pricing-cards-kicker {
    margin-bottom: 0.45rem;
    font-size: 11px;
    letter-spacing: 1.6px;
  }

  .fr-pricing-cards-title {
    font-size: clamp(30px, 10vw, 42px);
    letter-spacing: -2px;
  }

  .fr-pricing-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .fr-pricing-card-header {
    min-height: 140px;
    padding: 0.85rem;
  }

  .fr-pricing-card-plan {
    font-size: clamp(34px, 11vw, 52px);
    letter-spacing: -2.4px;
  }

  .fr-pricing-card-price-img {
    right: 0.65rem;
    bottom: 0.6rem;
    width: 58%;
    max-width: 205px;
  }

  .fr-pricing-card-price-img--plus {
    width: 54%;
  }

  .fr-pricing-card-row {
    grid-template-columns: 45% 55%;
    min-height: 39px;
  }

  .fr-pricing-card-feature,
  .fr-pricing-card-value {
    padding: 0.68em 0.45em;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.05;
  }

  .fr-pricing-card-cta {
    padding: 0.85em 0.7em;
    font-size: 13px;
  }
}


/* TWEAK: pricing card plus title uses Satoshi */
.fr-pricing-card--plus .fr-pricing-card-plan {
  font-family: var(--fr-font-secondary);
  font-size: clamp(72px, 10vw, 120px);
  line-height: 0.75;
  letter-spacing: -4px;
}



/* =========================
   HEADER V2 — LAUNCH TEST
   New alternate homepage header.
   Does not affect original .fr-header.
   ========================= */

.fr-header-v2 {
  position: relative;
  width: 100vw;
  min-height: calc(100vh + 24px);
  margin: 0;
  padding: 0;
  background: var(--fr-black);
  color: #ffffff;
  overflow: hidden;
}

.fr-header-v2__purple-panel {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #bd00ff;

  /*
    TWEAK GUIDE:
    52.5% 0   = top-right corner of purple block
    52.5% 49% = where the straight vertical edge turns diagonal
    36.8% 100% = where the diagonal hits the bottom

    Move 52.5% right/left to change the straight vertical edge.
    Move 49% up/down to start the diagonal earlier/later.
    Move 36.8% right/left to change where the diagonal lands at the bottom.
  */
  clip-path: polygon(
    0 0,
    52.5% 0,
    52.5% 85%,
    37.5% 100%,
    0 100%
  );
}



.fr-header-v2__plus {
  position: absolute;
  top: 2.2rem;
  right: 3.8rem;
  z-index: 5;
  color: #dfff16;
  font-family: var(--fr-font-secondary);
  font-size: clamp(96px, 9vw, 150px);
  font-weight: 900;
  line-height: 0.7;
}

.fr-header-v2__cloud-wrap {
  position: absolute;
  top: 16.7%;
  left: 68.6%;
  z-index: 4;
  width: clamp(130px, 12.5vw, 210px);
  transform: translateX(-50%);
  border-radius: 0;
  overflow: hidden;
}

.fr-header-v2__cloud {
  display: block;
  width: 100%;
  height: auto;
}

.fr-header-v2__strapline {
  position: absolute;
  top: 45%;
  left: 65%;
  z-index: 8;
  width: max-content;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-family: var(--fr-font-secondary);
  font-size: 36px;
  font-weight: 900;
  line-height: 33px;
  letter-spacing: -1px;
  text-align: right;
  text-transform: uppercase;
}

.fr-header-v2__tv {
  position: absolute;

  /*
    TWEAK:
    left = moves TV left/right
    bottom = moves TV up/down. Bigger = higher. Smaller = lower.
    width = TV size.
  */
  left: 62.5%;
  bottom: 3%;
  z-index: 6;
  display: block;
  width: clamp(330px, 29vw, 500px);
  height: auto;
  transform: translateX(-50%);
}

.fr-header-v2__copy {
  position: absolute;
  left: 76.5%;
  top: 69%;
  z-index: 8;
  width: 330px;
  transform: translateY(-50%);
}

.fr-header-v2__copy h1 {
  margin: 0;
  color: var(--fr-cyan);
  font-family: var(--fr-font-secondary);
  font-size: 36px;
  font-weight: 900;
  line-height: 33px;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.fr-header-v2__button {
  margin-top: 1.6rem !important;
}

.fr-header-v2__tags {
  position: absolute;
  left: 0.5rem;
  bottom: 1.55rem;
  z-index: 5;
  color: #dfff16;
  font-family: var(--fr-font-secondary);
  font-size: 30px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.fr-header-v2__tags span {
  display: block;
}


/* =========================
   PRICING PAGE HEADER
   Variant of Header V2.
   Uses the same layout, different colours/images if needed.
   ========================= */

.fr-pricing-header {
  background: white; /* TWEAK: black/background side */
}

.fr-pricing-header .fr-header-v2__purple-panel {
  background: #dfff16; /* TWEAK: purple panel colour */
}

.fr-pricing-header .fr-header-v2__copy h1 {
  color: #bd00ff; /* TWEAK: blue headline */
}

.fr-pricing-header .fr-header-v2__strapline {
  color: black; /* TWEAK: white strapline */
}

.fr-pricing-header .fr-header-v2__tags {
  color: black; /* TWEAK: green tags */
}




/* =========================
   PRICING HEADER V2 — SAFE PAGE-SPECIFIC TWEAKS
   Keeps the normal homepage V2 shape.
   ========================= */

.fr-pricing-header-v2 {
  --fr-pricing-section-gap: 10rem; /* TWEAK: more = pushes pricing table lower */

  margin-top: -70px; /* TWEAK: moves header up */
  margin-bottom: 0;  /* IMPORTANT: spacing happens inside pricing section now */
  background: #ffffff;
  overflow: visible;  /* IMPORTANT: keeps header shape cropped like homepage */
}

.fr-pricing-header-v2 .fr-header-v2__purple-panel {
  background: #dfff16; /* pricing green */
}

.fr-pricing-header-v2 .fr-header-v2__copy h1 {
  white-space: nowrap;
}

/* CHANGED: desktop pricing copy gets Elementor-style right breathing room */
@media (min-width: 1181px) {
  .fr-pricing-header-v2 .fr-header-v2__copy {
    left: 75.8%;
    top: 66.3%;
    right: -4rem;
    width: auto;
    max-width: none;
  }
}


.fr-pricing-header-v2 .fr-header-v2__tags {
  bottom: -1.3rem; /* back to normal desktop header placement */
  color: #000000;
}

.fr-pricing-header-v2 .fr-header-v2__button {
  border: 2px solid #303031;
  box-sizing: border-box;
}

/* =========================
   PRICING HEADER V2 — FIND YOUR FIT PROMPT
   Fixed prompt in the green header panel.
   ========================= */

.fr-pricing-header-fit-layer {
  position: fixed;

  /*
    TWEAK:
    26.25vw is roughly the middle of the green header panel.
    Bigger = moves right.
    Smaller = moves left.
  */
  left: 26.25vw;

  /*
    TWEAK:
    25vh puts it roughly 3/4 of the way up the screen.
    Smaller = higher.
    Bigger = lower.
  */
  top: 25vh;

  z-index: 6600;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}

.fr-pricing-header-fit-layer.is-visible {
  opacity: 1;
  visibility: visible;
}

.fr-pricing-header-fit-text {
  margin: 0;
  color: #303031;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.fr-pricing-header-fit-arrow {
  display: block;
  width: 28px;
  height: auto;
  margin-top: 8px;
}

/* Hide on tablet/mobile until we place it separately there */
@media (max-width: 1180px) {
  .fr-pricing-header-fit-layer {
    display: none;
  }
}

/* =========================
   PRICING HEADER V2 → PRICING TABLE GREEN CONTINUATION
   Triangle only. Pricing page only.
   ========================= */

.fr-pricing-page .fr-pricing-section {
  position: relative;
  padding-top: var(--fr-pricing-section-gap, 10rem); /* pushes table down */
  overflow: visible;
}

.fr-pricing-page .fr-pricing-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 0;
  width: 37.5vw;
  height: 37.5vh;
  background: #dfff16;
  clip-path: polygon(
    0 0,
    100% 0,
    0 100%
  );
  pointer-events: none;
}

.fr-pricing-page .fr-pricing-table,
.fr-pricing-page .fr-pricing-sticky-parent {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 1180px) {

  .fr-pricing-page .fr-pricing-section {
    padding-top: 8rem;
  }

  .fr-pricing-page .fr-pricing-section::before {
    width: 14vw;   /* matches the tablet header bottom edge */
    height: 18vh;  /* TWEAK: taller = triangle goes further down */
  }
}


@media (max-width: 767px) {

  .fr-pricing-page .fr-pricing-section {
    padding-top: 5rem;
  }

  .fr-pricing-page .fr-pricing-section::before {
    width: 20vw;
    height: 12vh;
  }
}






/* =========================
   HEADER V2 — TABLET
   Mirrors final desktop V2, optimised for tablet.
   ========================= */

@media (min-width: 768px) and (max-width: 1180px) {

  .fr-header-v2 {
    min-height: 760px;
  }

  .fr-header-v2__purple-panel {
    clip-path: polygon(
      0 0,
      48% 0,
      48% 78%,
      14% 100%,
      0 100%
    );
  }


  .fr-header-v2__cloud-wrap {
    top: 23.5%;     /* TWEAK: smaller = up */
    left: 63.5%;      /* TWEAK: smaller = left */
    width: clamp(115px, 16vw, 175px);
  }

  .fr-header-v2__strapline {
    top: 47%;
    left: 61%;
    z-index: 8;
    font-size: 29px;
    line-height: 27px;
    letter-spacing: -1px;
    text-align: right;
  }

  .fr-header-v2__tv {
    left: 53%;
    bottom: 8%;
    width: clamp(310px, 43vw, 455px);
  }

  .fr-header-v2__copy {
    left: 73%;
    top: 66.5%;
    z-index: 8;
    width: 290px;
    transform: translateY(-50%);
  }

  .fr-header-v2__copy h1 {
    font-size: 29px;
    line-height: 27px;
    letter-spacing: -1px;
  }

  .fr-header-v2__button {
    margin-top: 1.15rem !important;
    font-size: 24px;
  }

  .fr-header-v2__tags {
    left: 0.55rem;
    bottom: 0.15rem;
    font-size: 23px;
    line-height: 0.9;
  }
}


/* =========================
   HOMEPAGE HEADER V2 — TABLET TWEAKS
   Homepage only. Does not affect pricing V2.
   ========================= */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-home-page .fr-header-v2__tags {
    bottom: 0.75rem; /* NEW: larger = tags higher */
  }

  .fr-home-page .fr-header-v2__copy {
    top: 68%; /* NEW: was 66.5%. Larger = blue text/button lower */
  }

  .fr-home-page .fr-header-v2__button {
    margin-top: 1.3rem !important; /* NEW: slightly more gap between text and button */
  }
}



/* =========================
   HOMEPAGE HEADER V2 — TABLET TWEAKS
   Homepage only. Does not affect pricing V2.
   ========================= */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-home-page .fr-header-v2__tags {
    bottom: 0.75rem; /* NEW: larger = tags higher, smaller = tags lower */
  }
}






/* =========================
   HEADER V2 — MOBILE
   Mirrors final desktop V2, optimised for phone.
   ========================= */

@media (max-width: 767px) {

  .fr-header-v2 {
    min-height: 720px;
  }

  .fr-header-v2__purple-panel {
    clip-path: polygon(
      0 0,
      48% 0,
      48% 78%,
      18% 100%,
      0 100%
    );
  }


  .fr-header-v2__cloud-wrap {
    top: 29.5%;
    left: 67.8%;
    width: 98px;
  }

  .fr-header-v2__strapline {
    top: 50.5%;
    left: 49.4%;
    z-index: 8;
    font-size: clamp(22px, 7.2vw, 31px);
    line-height: clamp(21px, 6.8vw, 29px);
    letter-spacing: -1px;
    text-align: right;
  }

  .fr-header-v2__tv {
    left: 28.6%;
    bottom: 14%;
    width: 250px;
  }

  .fr-header-v2__copy {
    left: 55%;
    top: 57%;
    bottom: 5.3rem;
    z-index: 8;
    width: min(43vw, 190px);
    transform: none;
  }

  .fr-header-v2__copy h1 {
    font-size: clamp(22px, 7.2vw, 31px);
    line-height: clamp(21px, 6.8vw, 29px);
    letter-spacing: -1px;
    text-align: left;
  }

  .fr-header-v2__button {
    margin-top: 0.85rem !important;
    font-size: 22px;
    letter-spacing: -1px;
    padding: 1px 2px;
  }

  .fr-header-v2__tags {
    left: 0.5rem;
    bottom: 0.65rem;
    font-size: clamp(18px, 5.6vw, 24px);
    line-height: 0.95;
  }
}


/* =========================
   HEADER V2 → MODULES PURPLE CONTINUATION
   Extends only the purple diagonal into the next section.
   ========================= */

/*.fr-home-page .fr-modules-section {*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*}*/
/**/
/*.fr-home-page .fr-modules-section::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: -1px;*/
/*  left: 0;*/
/*  z-index: 0;*/
/*  width: 37.5vw;*/
/*  height: 37.5vh;*/
/*  background: #bd00ff;*/
/*  clip-path: polygon(*/
/*    0 0,*/
/*    100% 0,*/
/*    0 100%*/
/*  );*/
/*  pointer-events: none;*/
/*}*/
/**/
/*.fr-home-page .fr-modules-grid {*/
/*  position: relative;*/
/*  z-index: 1;*/
/*}*/


/* Tablet purple continuation */

/*@media (min-width: 768px) and (max-width: 1180px) {*/
/**/
/*  .fr-home-page .fr-modules-section::before {*/
/*    width: 36vw;*/
/*    height: 34vh;*/
/*  }*/
/*}*/


/* Mobile purple continuation */

/*@media (max-width: 767px) {*/
/**/
/*  .fr-home-page .fr-modules-section::before {*/
/*    width: 20vw;*/
/*    height: 12vh;*/
/*  }*/
/*}*/



/* =========================
   INNER PAGES — FOOTER BOTTOM GUARD
   Keeps top of page coloured, but makes below-footer area black.
   ========================= */

/* Top/page background should NOT be black */
html:has(.fr-features-page),
body:has(.fr-features-page),
html:has(.fr-help-page),
body:has(.fr-help-page) {
  background: #e9ff00;
}

html:has(.fr-contact-page),
body:has(.fr-contact-page) {
  background: #ffffff;
}

/* Do not let the outer wrapper create a black band above the page */
main.fr-marketing-page.fr-help-page {
  background: transparent;
}

/* The footer itself creates the black safety area below it */
.fr-footer {
  position: relative;
  background: var(--fr-black);
  box-shadow: 0 100vh 0 100vh var(--fr-black);
}



/* =========================
   PRICING PAGE — TABLET / MOBILE PRICING CARDS
   Uses the old working pricing-section triangle pattern,
   but applies it to pricing cards because the table is hidden.
   Pricing page only.
   ========================= */

@media (max-width: 1180px) {

  /* Hide desktop sticky pricing table on pricing page */
  .fr-pricing-page .fr-pricing-section {
    display: none !important;
  }

  /* Show pricing cards on pricing page */
  .fr-pricing-page .fr-pricing-cards-section {
    display: block;
    position: relative;
    width: 100vw;

    margin: 0; /* IMPORTANT: do not pull this up with negative margin */
    padding: 6rem 1.25rem 4.5rem 1.25rem; /* TWEAK: smaller first value = cards move up */

    background: #ffffff;
    color: #303031;
    overflow: visible;
  }

  /* Pricing header V2 green continuation into cards */
  .fr-pricing-page .fr-pricing-cards-section::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    z-index: 0;

    width: 14vw;
    height: 18vh;

    background: #dfff16;
    clip-path: polygon(
      0 0,
      100% 0,
      0 100%
    );
    pointer-events: none;
  }

  .fr-pricing-page .fr-pricing-cards-intro,
  .fr-pricing-page .fr-pricing-cards-grid {
    position: relative;
    z-index: 1;
  }
}


/* Mobile pricing page cards */

@media (max-width: 767px) {

  .fr-pricing-page .fr-pricing-cards-section {
    margin: 0; /* IMPORTANT: no negative margin */
    padding: 3rem 1.25rem 4rem 1.25rem; /* TWEAK: smaller first value = cards move up */
  }

  .fr-pricing-page .fr-pricing-cards-section::before {
    display: block;
    width: 18vw;  /* matches mobile header bottom edge */
    height: 12vh;
  }
}


/* =========================
   COOKIES
   ========================= */


.fr-cookie-consent {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 90000;

  display: block;
}

.fr-cookie-consent[hidden] {
  display: none;
}

.fr-cookie-consent__inner {
  max-width: 550px;
  padding: 20px;
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
}

.fr-cookie-consent__title {
  margin: 0 0 10px 0;
  font-family: var(--fr-font-secondary);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.fr-cookie-consent__text {
  margin: 0 0 12px 0;
  font-family: var(--fr-font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

.fr-cookie-consent__link {
  display: inline-block;
  margin: 0 0 16px 0;
  color: inherit;
  font-family: var(--fr-font-primary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fr-cookie-consent__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fr-cookie-consent__button {
  position: relative;
  display: inline-block;
  overflow: hidden;

  padding: 2px 3px; /* TWEAK: button padding */
  border: 2px solid #000000;
  border-radius: 0;
  background: #ffffff;
  color: #000000;

  font-family: var(--fr-font-secondary);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.6px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.fr-cookie-consent__button-content {
  position: relative;
  z-index: 2;
}

.fr-cookie-consent__button-text {
  white-space: nowrap;
}

.fr-cookie-consent__button::after {
  content: attr(data-ticker);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  font-family: inherit;
  font-size: 31px; /* TWEAK: hover ticker text size */
  font-weight: inherit;
  line-height: 1;
  letter-spacing: inherit;
  color: inherit;

  animation: none;
}

.fr-cookie-consent__button:hover {
  background: #ffff00;
}

.fr-cookie-consent__button:hover .fr-cookie-consent__button-content {
  opacity: 0;
}

.fr-cookie-consent__button:hover::after {
  opacity: 1;
  animation: frCookieTickerInsideButton 3s linear infinite;
}

@keyframes frCookieTickerInsideButton {
  from {
    transform: translate(0, -50%);
  }

  to {
    transform: translate(-220px, -50%);
  }
}


/* =========================
   COOKIE CONSENT — TABLET
   ========================= */

@media (min-width: 768px) and (max-width: 1180px) {
  .fr-cookie-consent {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .fr-cookie-consent__inner {
    max-width: 560px; /* TWEAK: tablet card width */
    padding: 20px; /* TWEAK: inside spacing */
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
  }

  .fr-cookie-consent__title {
    margin: 0 0 10px 0;
    font-family: var(--fr-font-secondary);
    font-size: 24px; /* TWEAK: tablet title size */
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
  }

  .fr-cookie-consent__text {
    max-width: 500px; /* TWEAK: body line length */
    margin: 0 0 12px 0;
    font-family: var(--fr-font-primary);
    font-size: 15px; /* TWEAK: tablet body size */
    font-weight: 400;
    line-height: 1.35;
  }

  .fr-cookie-consent__link {
    display: inline-block;
    margin: 0 0 16px 0;
    color: inherit;
    font-family: var(--fr-font-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .fr-cookie-consent__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .fr-cookie-consent__button {
    position: relative;
    display: inline-block;
    overflow: hidden;

    padding: 2px 3px; /* TWEAK: tablet button padding */
    border: 2px solid #000000;
    border-radius: 0;
    background: #ffffff;
    color: #000000;

    font-family: var(--fr-font-secondary);
    font-size: 22px; /* TWEAK: tablet button text size */
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.2px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
  }

  .fr-cookie-consent__button-content {
    position: relative;
    z-index: 2;
  }

  .fr-cookie-consent__button-text {
    white-space: nowrap;
  }

  .fr-cookie-consent__button::after {
    content: attr(data-ticker);
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;

    font-family: inherit;
    font-size: 24px; /* TWEAK: hover ticker text size */
    font-weight: inherit;
    line-height: 1;
    letter-spacing: inherit;
    color: inherit;

    animation: none;
  }

  .fr-cookie-consent__button:hover {
    background: #ffff00;
  }

  .fr-cookie-consent__button:hover .fr-cookie-consent__button-content {
    opacity: 0;
  }

  .fr-cookie-consent__button:hover::after {
    opacity: 1;
    animation: frCookieTickerInsideButton 3s linear infinite;
  }

  .fr-cookie-consent__button--reject {
    min-width: 190px; /* TWEAK: essential only button width */
  }

  .fr-cookie-consent__button--accept {
    min-width: 105px; /* TWEAK: accept button width */
  }
}


@media (max-width: 767px) {
  .fr-cookie-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .fr-cookie-consent__inner {
    max-width: none;
    padding: 16px;
  }

  .fr-cookie-consent__title {
    font-size: 22px;
  }

  .fr-cookie-consent__button {
    padding: 1px 2px;
    font-size: 22px;
  }

  .fr-cookie-consent__button::after {
    font-size: 24px;
  }
}


/* =========================
   HEADER V2 — DESKTOP STABILITY PATCH
   Stops homepage/pricing hero text from drifting between browser heights.
   ========================= */

@media (min-width: 1181px) {

  .fr-header-v2 {
    /*
      CHANGED:
      +12px hides the tiny white sliver from the next section.
      Increase to +16px if you still see a line.
      Decrease to +6px if it feels too tall.
    */
    height: max(calc(100vh + 12px), clamp(820px, 54.8vw, 920px));
    height: max(calc(100svh + 12px), clamp(820px, 54.8vw, 920px));

    min-height: calc(100vh + 12px);
    min-height: calc(100svh + 12px);
  }

  .fr-header-v2__cloud-wrap {
    top: 16.7%;
  }

  .fr-header-v2__strapline {
    top: 46.5%;
    left: 64.6%;
  }

  .fr-header-v2__tv {
    left: 62.5%;
    bottom: 3%;
  }

  .fr-header-v2__copy {
    left: 76.5%;
    top: 71%;
  }
}


/* =========================
   HEADER V2 — DESKTOP TAGS BOTTOM LOCK
   Desktop only. Do not affect tablet/mobile.
   ========================= */

@media (min-width: 1181px) {
  .fr-home-page .fr-header-v2__tags {
    top: calc(100vh - 0.25rem);
    top: calc(100svh - 0.25rem);

    bottom: auto;
    transform: translateY(-100%);

    margin: 0;
  }
}



/* =========================
   HEADER V2 — SHORT DESKTOP FIX
   Keeps shorter desktop windows from cutting off,
   but keeps the hero cluster grounded like widescreen.
   ========================= */

@media (min-width: 1181px) and (max-height: 880px) {

  .fr-header-v2 {
    /*
      Keep the header tied to the visible screen height,
      so it does not continue too far below the fold.
    */
    height: calc(100vh + 12px);
    height: calc(100svh + 12px);

    min-height: calc(100vh + 12px);
    min-height: calc(100svh + 12px);
  }

  .fr-header-v2__cloud-wrap {
    top: 13.2%; /* TWEAK: larger = lower */
  }

  .fr-header-v2__strapline {
    top: 42.4% /* TWEAK: larger = lower */
  }

  .fr-header-v2__tv {
    /*
      Smaller bottom = lower TV.
      This is closer to the widescreen/default 3%.
    */
    bottom: 2.3%;
    width: clamp(320px, 28vw, 480px);
  }

  .fr-header-v2__copy {
    /*
      Larger top = blue text/button lower.
    */
    top: 70.9%;
  }
}



/* =========================
   PRICING HEADER V2 — DESKTOP STABILITY PATCH
   Keeps pricing strapline + purple copy consistent between
   normal laptop and maximised desktop.
   ========================= */

/* Taller / maximised desktop */
@media (min-width: 1181px) {
  .fr-pricing-header-v2 .fr-header-v2__strapline {
    top: 46.5%;
    left: 68.6%; /* bigger = right */
  }

  .fr-pricing-header-v2 .fr-header-v2__copy {
    left: 75.8%;
    top: 67.7%; /* bigger = lower */
    right: -4rem;
    width: auto;
    max-width: none;
  }
}

/* Normal laptop-height desktop */
@media (min-width: 1181px) and (max-height: 880px) {
  .fr-pricing-header-v2 .fr-header-v2__strapline {
    top: 42.4%;
    left: 67.8%;
  }

  .fr-pricing-header-v2 .fr-header-v2__copy {
    left: 75.8%;
    top: 66.3%;
    right: -4rem;
    width: auto;
    max-width: none;
  }
}





/* =========================
   PRICING HEADER V2 — MOBILE PURPLE COPY WIDTH
   Keeps "keeps your" on one line.
   ========================= */

@media (max-width: 767px) {
  .fr-pricing-header-v2 .fr-header-v2__copy {
    left: 55%;        /* CHANGED: puts text start back where the normal mobile layout had it */
    right: -5rem;     /* CHANGED: negative right pulls the box off-screen to create extra width */
    width: auto;
    max-width: none;
    overflow: visible;
  }

  .fr-pricing-header-v2 .fr-header-v2__copy h1 {
    white-space: nowrap; /* keeps each HTML line from wrapping */
  }
}


/* =========================
   HOMEPAGE HEADER V2 — MOBILE TOP CROP + EXTRA TAG ROOM
   Mobile only.
   Crops the top, lets the tags sit lower, and extends the
   purple/black header background down with them.
   ========================= */

@media (max-width: 767px) {
  .fr-home-page .fr-header-v2 {
    --fr-mobile-header-top-crop: 68px;     /* TWEAK: bigger = whole header moves higher */
    --fr-mobile-header-extra-bottom: 16px; /* NEW: more = purple/black background extends lower */
    --fr-mobile-tags-bottom: 0.5rem;       /* TWEAK: smaller = tags lower, larger = tags higher */

    min-height: calc(720px + var(--fr-mobile-header-extra-bottom));

    transform: translateY(calc(var(--fr-mobile-header-top-crop) * -1));

    /*
      Removes the top-crop gap, but keeps the extra-bottom space visible.
      Do not include extra-bottom in this margin-bottom calculation.
    */
    margin-bottom: calc(var(--fr-mobile-header-top-crop) * -1);
  }

  .fr-home-page .fr-header-v2__tags {
    top: auto;
    bottom: var(--fr-mobile-tags-bottom);
    transform: none;
  }
}


/* =========================
   MOBILE NAV TOGGLE POSITION
   ========================= */

@media (max-width: 767px) {
  .fr-site-nav-toggle {
    top: calc(env(safe-area-inset-top, 0px) - 5px); /* CHANGED: was 112px. Larger = lower */
    --fr-nav-toggle-y: 0px;
  }

  .fr-site-nav-toggle.is-hidden {
    transform: translateY(-140px);
  }
}


/* =========================================================
   FR HEADER V2 — FINAL DESKTOP / FULLSCREEN LOCK
   Paste this ONCE at the very end of website.css.

   Replace the earlier header override snippets with this single block.
   This keeps the TV, cloud, strapline, copy and button stable across:
   - laptop desktop
   - dragged wider browser
   - maximised browser
   - Mac green-button fullscreen
   - wider desktop screens

   Does not affect tablet or mobile.
   ========================================================= */

@media (min-width: 1181px) {

  .fr-header-v2 {
    /*
      Horizontal positions are based from the centre of the viewport.
      The clamp() caps stop items flying too far out on wide screens.
    */
    --fr-v2-tv-x: clamp(185px, 12.5vw, 300px);
    --fr-v2-cloud-x: clamp(292px, 17.5vw, 360px);
    --fr-v2-strap-x: clamp(236px, 14.8vw, 290px);
    --fr-v2-copy-x: clamp(400px, 26.3vw, 550px);

    /*
      Vertical positions use vw instead of vh/svh.
      This stops fullscreen height changes from pulling the cloud,
      strapline and copy into different positions.
    */
    --fr-v2-cloud-top: clamp(122px, 7.1vw, 142px);
    --fr-v2-strap-top: clamp(345px, 20.25vw, 390px);
    --fr-v2-copy-top: clamp(565px, 32.8vw, 670px);

    /*
      TV lock.
      This prevents the TV shrinking when fullscreen/maximised rules kick in.
    */
    --fr-v2-tv-width: 453px;
    --fr-v2-fullscreen-tv-lift: clamp(0px, calc(100svh - 1036px), 120px);
    --fr-v2-tv-bottom: calc(clamp(6px, 1vw, 18px) + var(--fr-v2-fullscreen-tv-lift));


    height: calc(100svh + 12px);
    min-height: 780px;
    overflow: hidden;
  }

  .fr-header-v2__cloud-wrap {
    top: var(--fr-v2-cloud-top) !important;
    left: calc(50% + var(--fr-v2-cloud-x)) !important;
    width: clamp(130px, 12.5vw, 210px) !important;
    transform: translateX(-50%) !important;
  }

  .fr-header-v2__strapline {
    top: var(--fr-v2-strap-top) !important;
    left: calc(50% + var(--fr-v2-strap-x)) !important;
    transform: translate(-50%, -50%) !important;
  }

  .fr-header-v2__tv {
    left: calc(50% + var(--fr-v2-tv-x)) !important;
    bottom: var(--fr-v2-tv-bottom) !important;
    width: var(--fr-v2-tv-width) !important;
    min-width: 453px !important;
    max-width: 453px !important;
    height: auto !important;
    transform: translateX(-50%) !important;
  }

  .fr-header-v2__copy {
    top: var(--fr-v2-copy-top) !important;
    left: calc(50% + var(--fr-v2-copy-x)) !important;
    right: auto !important;
    width: 340px !important;
    max-width: none !important;
    transform: translateY(-50%) !important;
  }

  .fr-header-v2__tags {
    top: auto !important;
    bottom: 0.85rem !important;
    transform: none !important;
  }
}


/* =========================================================
   PRICING HEADER V2 — FINAL DESKTOP / FULLSCREEN LOCK
   Mirrors the final homepage header behaviour:
   - fixed TV size on normal desktop
   - same bottom/fullscreen-lift logic
   - same width-based vertical positioning
   - no cloud/tags needed for pricing
   ========================================================= */

@media (min-width: 1181px) {

  .fr-pricing-header-v2 {
    /*
      Shared homepage-style positioning system.
      Keep the pricing-specific horizontal offsets for copy/strapline,
      because the pricing composition sits slightly further right.
    */
    --fr-v2-tv-x: clamp(185px, 12.5vw, 300px);
    --fr-v2-strap-x: clamp(272px, 17.1vw, 352px);
    --fr-v2-copy-x: clamp(410px, 25.8vw, 540px);

    /*
      Same vertical logic as the finished homepage header.
    */
    --fr-v2-strap-top: clamp(345px, 20.25vw, 390px);
    --fr-v2-copy-top: clamp(540px, 31.4vw, 645px);

    /*
      Same normal-desktop TV lock as homepage.
    */
    --fr-v2-tv-width: 453px;
    --fr-v2-fullscreen-tv-lift: clamp(0px, calc(100svh - 1036px), 120px);
    --fr-v2-tv-bottom: calc(clamp(6px, 1vw, 18px) + var(--fr-v2-fullscreen-tv-lift));
  }

  .fr-pricing-header-v2 .fr-header-v2__strapline {
    top: var(--fr-v2-strap-top) !important;
    left: calc(50% + var(--fr-v2-strap-x)) !important;
    transform: translate(-50%, -50%) !important;
  }

  .fr-pricing-header-v2 .fr-header-v2__tv {
    left: calc(50% + var(--fr-v2-tv-x)) !important;
    bottom: var(--fr-v2-tv-bottom) !important;
    width: var(--fr-v2-tv-width) !important;
    min-width: var(--fr-v2-tv-width) !important;
    max-width: var(--fr-v2-tv-width) !important;
    height: auto !important;
    transform: translateX(-50%) !important;
  }

  .fr-pricing-header-v2 .fr-header-v2__copy {
    top: var(--fr-v2-copy-top) !important;
    left: calc(50% + var(--fr-v2-copy-x)) !important;
    right: auto !important;
    width: max-content !important;
    max-width: none !important;
    transform: translateY(-50%) !important;
  }

  .fr-pricing-header-v2 .fr-header-v2__copy h1 {
    white-space: nowrap !important;
  }

  .fr-pricing-header-fit-layer {
    top: clamp(190px, 13vw, 250px) !important;
    left: 26.25vw !important;
  }
}


/* =========================================================
   HOMEPAGE HEADER V2 — WIDE / FULLSCREEN TV ONLY
   Only changes the TV.
   Does not move cloud, strapline, blue text, button or tags.
   ========================================================= */

@media (min-width: 1600px) {

  .fr-header-v2:not(.fr-pricing-header-v2) {
    /*
      TV only:
      - width = TV size
      - tv-x = larger moves TV right
      - bottom = smaller moves TV down
    */
    --fr-v2-tv-width: 560px;
    --fr-v2-tv-x: 145px;
    --fr-v2-tv-bottom: 24px;
    --fr-v2-copy-top: clamp(580px, 33.6vw, 690px);
  }

  .fr-header-v2:not(.fr-pricing-header-v2) .fr-header-v2__tv {
    
    left: calc(50% + var(--fr-v2-tv-x)) !important;
    bottom: var(--fr-v2-tv-bottom) !important;
    width: var(--fr-v2-tv-width) !important;
    min-width: var(--fr-v2-tv-width) !important;
    max-width: var(--fr-v2-tv-width) !important;
    height: auto !important;
    transform: translateX(-50%) !important;
  }

  .fr-header-v2:not(.fr-pricing-header-v2) .fr-header-v2__strapline {
    font-size: 37px !important;
    line-height: 0.92 !important;
  }

  .fr-header-v2:not(.fr-pricing-header-v2) .fr-header-v2__copy h1 {
    font-size: 37px !important;
    line-height: 0.92 !important;
  }

  .fr-header-v2:not(.fr-pricing-header-v2) .fr-hero-button,
  .fr-header-v2:not(.fr-pricing-header-v2) .fr-header-v2__button {
    font-size: 31px !important;
  }

  .fr-header-v2:not(.fr-pricing-header-v2) .fr-header-v2__button::after,
  .fr-header-v2:not(.fr-pricing-header-v2) .ticker-hover-button::after {
    font-size: 33px !important;
    line-height: 1 !important;
  }
}


/* =========================================================
   HOMEPAGE HEADER V2 — WIDE BUT NOT FULLSCREEN TV RESET
   Keeps your normal wide stretched browser view safe.
   Only resets the TV when the window is wide but not tall.
   ========================================================= */

@media (min-width: 1600px) and (max-height: 900px) {

  .fr-header-v2:not(.fr-pricing-header-v2) {
    /*
      Restore normal desktop TV only.
      This stops the enlarged fullscreen TV sitting behind the text
      when the browser is stretched wide but not green-button fullscreen.
    */
    --fr-v2-tv-width: 453px;
    --fr-v2-tv-x: clamp(185px, 12.5vw, 300px);
    --fr-v2-tv-bottom: calc(clamp(6px, 1vw, 18px) + var(--fr-v2-fullscreen-tv-lift));
  }

  .fr-header-v2:not(.fr-pricing-header-v2) .fr-header-v2__tv {
    left: calc(50% + var(--fr-v2-tv-x)) !important;
    bottom: var(--fr-v2-tv-bottom) !important;
    width: var(--fr-v2-tv-width) !important;
    min-width: var(--fr-v2-tv-width) !important;
    max-width: var(--fr-v2-tv-width) !important;
  }
}



/* =========================================================
   PRICING HEADER V2 — WIDE / FULLSCREEN TV + TEXT MODE
   Mirrors the finished homepage wide/fullscreen behaviour.
   ========================================================= */

@media (min-width: 1600px) {

  .fr-pricing-header-v2 {
    /*
      Same fullscreen TV controls as homepage.
    */
    --fr-v2-tv-width: 560px;
    --fr-v2-tv-x: 145px;
    --fr-v2-tv-bottom: 24px;
    --fr-v2-copy-top: clamp(555px, 32.2vw, 665px);
  }

  .fr-pricing-header-v2 .fr-header-v2__tv {
    left: calc(50% + var(--fr-v2-tv-x)) !important;
    bottom: var(--fr-v2-tv-bottom) !important;
    width: var(--fr-v2-tv-width) !important;
    min-width: var(--fr-v2-tv-width) !important;
    max-width: var(--fr-v2-tv-width) !important;
    height: auto !important;
    transform: translateX(-50%) !important;
  }

  .fr-pricing-header-v2 .fr-header-v2__strapline {
    font-size: 37px !important;
    line-height: 0.92 !important;
  }

  .fr-pricing-header-v2 .fr-header-v2__copy h1 {
    font-size: 37px !important;
    line-height: 0.92 !important;
  }

  .fr-pricing-header-v2 .fr-hero-button,
  .fr-pricing-header-v2 .fr-header-v2__button {
    font-size: 31px !important;
  }

  .fr-pricing-header-v2 .fr-header-v2__button::after,
  .fr-pricing-header-v2 .ticker-hover-button::after {
    font-size: 33px !important;
    line-height: 1 !important;
  }
}


/* =========================================================
   PRICING HEADER V2 — WIDE BUT NOT FULLSCREEN TV RESET
   Mirrors the homepage max-height: 900px fix.
   Keeps stretched-wide browser safe while preserving true fullscreen.
   ========================================================= */

@media (min-width: 1600px) and (max-height: 900px) {

  .fr-pricing-header-v2 {
    /*
      Restore normal desktop TV only.
      Same logic as the finished homepage reset.
    */
    --fr-v2-tv-width: 453px;
    --fr-v2-tv-x: clamp(185px, 12.5vw, 300px);
    --fr-v2-tv-bottom: calc(clamp(6px, 1vw, 18px) + var(--fr-v2-fullscreen-tv-lift));
  }

  .fr-pricing-header-v2 .fr-header-v2__tv {
    left: calc(50% + var(--fr-v2-tv-x)) !important;
    bottom: var(--fr-v2-tv-bottom) !important;
    width: var(--fr-v2-tv-width) !important;
    min-width: var(--fr-v2-tv-width) !important;
    max-width: var(--fr-v2-tv-width) !important;
  }
}


/* =========================================================
   HEADER V2 — NARROW DESKTOP / TABLET-WIDTH DESKTOP FIX
   For desktop/laptop windows made narrow.
   Does not affect normal desktop/fullscreen.
   Does not affect vertical mobile.
   The hover/pointer condition helps avoid changing touch/mobile layouts.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (hover: hover) and (pointer: fine) {

  /* -------------------------
     HOMEPAGE HEADER
     Move cloud, strapline and blue text/button up.
     ------------------------- */

  .fr-home-page .fr-header-v2__cloud-wrap {
    top: 10.5% !important;
  }

  .fr-home-page .fr-header-v2__strapline {
    top: 35.5% !important;
  }

  .fr-home-page .fr-header-v2__copy {
    top: 58.5% !important;
  }

  .fr-home-page .fr-header-v2__button {
    margin-top: 1.05rem !important;
  }


  /* -------------------------
     PRICING HEADER
     Move black strapline up.
     Move purple copy up and left.
     ------------------------- */

  .fr-pricing-header-v2 .fr-header-v2__strapline {
    top: 35.5% !important;
    left: 63% !important;
  }

  .fr-pricing-header-v2 .fr-header-v2__copy {
    top: 55.1% !important;
    left: 72.5% !important;
  }
}


/* =========================================================
   HEADER V2 — NARROW DESKTOP / TABLET-WIDTH DESKTOP FIX
   Keeps the header positioning tweaks.
   Uses only the pricing-cards triangle for the green slope.
   No header ::after triangle, so no kink.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (hover: hover) and (pointer: fine) {

  /* HOMEPAGE HEADER */

  .fr-home-page .fr-header-v2__cloud-wrap {
    top: 10.5% !important;
  }

  .fr-home-page .fr-header-v2__strapline {
    top: 35.5% !important;
  }

  .fr-home-page .fr-header-v2__copy {
    top: 58.5% !important;
  }

  .fr-home-page .fr-header-v2__button {
    margin-top: 1.05rem !important;
  }


  /* PRICING HEADER */

  .fr-pricing-header-v2 .fr-header-v2__strapline {
    top: 35.5% !important;
    left: 63% !important;
  }

  .fr-pricing-header-v2 .fr-header-v2__copy {
    top: 55.1% !important;
    left: 72.5% !important;
  }


  /* IMPORTANT: remove the experimental header triangle */

  .fr-pricing-header-v2::after {
    content: none !important;
    display: none !important;
  }


  /* Use the actual visible pricing-card continuation */

  .fr-pricing-page .fr-pricing-cards-section::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    z-index: 0 !important;

    width: 14vw !important;
    height: clamp(56px, 9vh, 76px) !important;

    background: #dfff16 !important;
    clip-path: polygon(
      0 0,
      100% 0,
      0 100%
    ) !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   PRICING HEADER V2 — HORIZONTAL MOBILE SAFETY
   Landscape phones can be wider than 767px, so catch them by height.
   ========================================================= */

@media (max-width: 1180px) and (max-height: 600px) and (pointer: coarse) {

  .fr-pricing-header-v2::after {
    content: none !important;
    display: none !important;
  }

  .fr-pricing-page .fr-pricing-cards-section {
    padding-top: 3rem !important;
  }

  .fr-pricing-page .fr-pricing-cards-section::before {
    display: block !important;
    top: -1px !important;
    width: 14vw !important;
    height: clamp(48px, 16vh, 70px) !important;
  }
}


/* =========================================================
   FOOTER — THIN DESKTOP ONLY TYPE FIX
   Desktop browser made tablet-width.
   Does not affect horizontal mobile / touch devices.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1366px) and (hover: hover) and (pointer: fine) {

  .fr-footer:not(.fr-footer--updates) .fr-footer-kicker,
  .fr-footer:not(.fr-footer--updates) .fr-footer-read > h2.fr-footer-kicker,
  .fr-footer:not(.fr-footer--updates) .fr-footer-bottom__kicker-col > h2.fr-footer-kicker {
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 2.4px !important;
  }

  .fr-footer:not(.fr-footer--updates) .fr-footer-legal,
  .fr-footer:not(.fr-footer--updates) .fr-footer-legal p,
  .fr-footer:not(.fr-footer--updates) .fr-footer-legal * {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .fr-footer.fr-footer--updates .fr-footer-legal,
  .fr-footer.fr-footer--updates .fr-footer-legal p,
  .fr-footer.fr-footer--updates .fr-footer-legal * {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}


/* =========================================================
   HOMEPAGE — TABLET / THIN DESKTOP CONTENT FIXES
   Excludes horizontal mobile by requiring min-height: 700px.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (min-height: 700px) {

  /* 1. CAT + VIDEO
     Keep this section tall enough, but do not push cards too far down.
  */

  .fr-home-page .fr-cat-video-section {
    padding-bottom: 0 !important;
  }

  .fr-home-page .fr-cat-video-grid {
    min-height: 560px !important;
  }


  /* 2. PRODUCT CARDS
     Move section back up, reduce side padding inside cards,
     increase top padding above image.
  */

  .fr-home-page .fr-product-summary-section {
    margin: -25px 0 0 0 !important; /* more negative = cards move up */
    padding: 0 1.5em 4em 1.5em !important;
  }

  .fr-home-page .fr-product-summary-grid {
    width: 90% !important; /* smaller = thinner cards overall */
    margin: 0 auto !important;
    gap: 16px !important;
  }

  .fr-home-page .fr-product-card {
    padding: 18px 14px 34px 14px !important;
    min-height: 320px !important;
  }

  .fr-home-page .fr-product-card__image {
    height: 210px !important;
    margin: 0 0 22px 0 !important;
  }


  /* 3. SUBSCRIPTIONS
     Increase only the large Mencken text.
  */

  .fr-home-page .fr-subscriptions-line {
    font-size: 85px !important;
    line-height: 0.88 !important;
  }

  /* Text column inside product cards */

  .fr-home-page .fr-product-card__title {
    max-width: 72% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .fr-home-page .fr-product-card__text {
    max-width: 68% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   HELP / FEATURES / EARLY ACCESS — TABLET WIDTH TWEAKS
   Tall tablet / thin desktop only.
   Does not affect horizontal mobile.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (min-height: 700px) {

  /* -------------------------
     HELP + FEATURES
     Narrow search bars/cards to increase page side gaps.
     ------------------------- */

  .fr-features-page .fr-features-search-wrap,
  .fr-help-page .fr-features-search-wrap {
    width: 84% !important;
  }

  .fr-features-page .fr-features-grid,
  .fr-help-page .fr-help-grid {
    width: 84% !important;
  }


  /* -------------------------
     HELP SUPPORT BUTTON
     Normal + hover ticker text.
     ------------------------- */

  .fr-help-contact-button {
    font-size: 24px !important;
  }

  .fr-help-contact-button::after {
    font-size: 26px !important;
  }


  /* -------------------------
     EARLY ACCESS SEND BUTTON
     Normal + hover ticker text, if present.
     ------------------------- */

  .fr-early-access-send-button {
    font-size: 24px !important;
  }

  .fr-early-access-send-button::after {
    font-size: 26px !important;
  }


  /* -------------------------
     EARLY ACCESS SUBSCRIPTIONS TEXT
     Match homepage tablet subscription text size.
     ------------------------- */

  .fr-early-access-page .fr-subscriptions-line {
    font-size: 85px !important;
    line-height: 0.88 !important;
  }
}


/* =========================================================
   UPDATES — TABLET / THIN DESKTOP FIXES
   Excludes horizontal mobile by requiring min-height: 700px.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (min-height: 700px) {

  /* 1. Hero right nav: tips / guidance / launches / news / updates
     Move it beside the image and left-align it.
  */

  .fr-marketing-page .fr-page-hero__nav {
    margin-top: 7.2em !important;
    margin-left: 0.8em !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .fr-marketing-page .fr-page-hero__nav a {
    text-align: left !important;
  }


  /* 2. Blue hero text
     Nudge down slightly.
  */

  .fr-marketing-page .fr-page-hero__headline {
    transform: translateY(24px) !important;
  }


  /* 3. Updates article / feature images
     Taller + stop warping.
  */

  .fr-updates-article-card__image {
    height: 620px !important;
    object-fit: cover !important;
  }


  /* 4. Site nav toggle
     Larger tablet / thin desktop plus.
  */

  .fr-site-nav-toggle {
    top: -6px !important;
    right: -8px !important;
    width: 124px !important;
    height: 124px !important;
    --fr-nav-toggle-y: 0px !important;
  }

  .fr-site-nav-toggle.is-hidden {
    transform: translateY(-130px) !important;
  }
}


/* =========================================================
   BLOG + MODULE DETAIL — TABLET / THIN DESKTOP FIXES
   Excludes horizontal mobile by requiring min-height: 700px.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (min-height: 700px) {

  /* -------------------------
     BLOG ARTICLE PAGE
     Move title away from left edge.
     Move article text slightly right.
     ------------------------- */

  .fr-blog-detail-section {
    padding-left: 4.5rem !important;
    padding-right: 3rem !important;
  }

  .fr-blog-detail-grid {
    grid-template-columns: minmax(240px, 31%) minmax(0, 1fr) !important;
    column-gap: 6rem !important;
  }

  .fr-blog-detail-intro-col {
    transform: none !important;
  }

  .fr-blog-detail-copy-col {
    transform: translateX(1.5rem) !important;
    max-width: 420px !important;
  }


  /* -------------------------
     MODULE DETAIL PAGES
     Wider left column, square image, bigger gap to middle,
     stronger right links.
     ------------------------- */

  .fr-module-detail-grid {
    grid-template-columns: 30% 46% 5% 19% !important;
    column-gap: 0 !important;
  }

  .fr-module-detail-intro-col {
    padding-right: 1.5rem !important;
  }

  .fr-module-detail-cloud-wrap {
    width: 86% !important;
    margin: 4em 0 0 8% !important;
    aspect-ratio: 1 / 1 !important;
  }

  .fr-module-detail-cloud {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  .fr-module-detail-copy-col {
    padding-left: 35px !important;
  }

  .fr-module-detail-menu a {
    font-weight: 900 !important;
    letter-spacing: 1.1px !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }
}

/* =========================================================
   BLOG + MODULE DETAIL — TABLET REFINEMENTS
   Add after the existing blog/module tablet fix.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1180px) and (min-height: 700px) {

  /* BLOG TITLE
     Adds right-side constraint so the title wraps sooner.
  */

  .fr-blog-detail-intro-col h1,
  .fr-blog-detail-intro-title {
    max-width: 82% !important;
    padding-right: 2rem !important;
  }


  /* BLOG INTRO COPY
     Nudge intro text into line with the main article text.
  */


  .fr-blog-detail-intro-heading {
    transform: translateX(1.5rem) !important;
  }


  .fr-blog-detail-intro-copy {
    transform: translateX(1.5rem) !important;
    max-width: 420px !important;
  }


  /* MODULE RIGHT MENU LINKS
     Slightly larger links.
  */

  .fr-module-detail-menu a {
    font-size: 12px !important;
    line-height: 1.05 !important;
    margin-bottom: 0.55em !important;
  }
}