/*
  Autora: site styles.

  Colours, fonts, sizes and spacing copy the original BrandCrowd site as it was on
  28 September 2026 (the captured pages are in reference/original). Like the original,
  text grows smoothly with the screen up to 1200px wide, and the layout stacks below 768px.
*/

:root {
  /* Colours */
  --navy: #071327;
  --ice: #e1eafa;
  --white: #ffffff;
  --field-text: #5e5e5e;
  --field-border: #d0d0d0;
  --error: #ffb4b4;
  --teal: #19d1c2; /* the swirl picture's teal and blue, for the menu's hover line */
  --blue: #5b95d6;

  /* Fonts (loaded in fonts.css) */
  --font-display: 'Bruno Ace SC', 'Titillium Web', sans-serif;
  --font-body: 'Titillium Web', 'Lato', sans-serif;
  --font-ui: 'Lato', Helvetica, Arial, sans-serif;

  /*
    Text sizes follow the original's curve: a straight line from the size at 390px wide to
    the size at 800px, then another up to the full desktop size at 1200px and wider.
    Each comment reads: at 390px → at 800px (→ desktop, below).
  */
  --text-hero: calc(24.56px + 2.8561vw); /* 35.7 → 47.41 */
  --text-display-lg: calc(22.29px + 2.3756vw); /* 31.55 → 41.29 */
  --text-display: calc(19.47px + 1.7732vw); /* 26.39 → 33.66 */
  --text-heading: calc(18.4px + 1.5244vw); /* 24.35 → 30.6 */
  --text-lead: calc(17.36px + 1.2756vw); /* 22.33 → 27.56 */
  --text-label-lg: calc(15.88px + 0.8902vw); /* 19.35 → 23 */
  --text-button: calc(18.32px + 0.5951vw); /* 20.64 → 23.08 */
  --text-body-lg: calc(15.66px + 0.822vw); /* 18.87 → 22.24 */
  --text-heading-sm: calc(15.45px + 0.7537vw); /* 18.39 → 21.48 */
  --text-body: calc(14.65px + 0.478vw); /* 16.51 → 18.47 */
  --text-small: calc(14.09px + 0.1732vw); /* 14.77 → 15.48 */

  /* Content widths */
  --content: min(1152px, 100% - 48px);
  --content-wide: min(1200px, 100% - 48px);
}

@media (min-width: 800px) {
  :root {
    --text-hero: min(58px, 26.23px + 2.6475vw);
    --text-display-lg: min(50px, 23.87px + 2.1775vw);
    --text-display: min(40px, 20.98px + 1.585vw);
    --text-heading: min(36px, 19.8px + 1.35vw);
    --text-lead: min(32px, 18.68px + 1.11vw);
    --text-label-lg: min(26px, 17px + 0.75vw);
    --text-button: min(25px, 19.24px + 0.48vw);
    --text-body-lg: min(25px, 16.72px + 0.69vw);
    --text-heading-sm: min(24px, 16.44px + 0.63vw);
    --text-body: min(20px, 15.41px + 0.3825vw);
    --text-small: min(16px, 14.44px + 0.13vw);
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--ice);
  font: 400 16px/1.5 var(--font-ui);
}

/* The wave picture stays fixed behind the page while it scrolls */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--navy) url('/assets/img/background-waves.jpg?v=eb939c9ea9a2') center / cover no-repeat;
}

/*
  The swirl: a 15-second clip of the spiral turning in 3D (made in Higgsfield from the hero picture), which swirl.js
  plays back and forth as the page scrolls. These two addresses are read by swirl.js, so the server versions them.
  A copy sits fixed behind every page, off to one side and faint enough for text to stay readable over it; solid
  sections scroll over it. On Creators and Businesses it waits (.is-away) while the hero's swirl is on screen. The
  clip has its own navy background, close to the page's, so its edges just fade out (mask).
*/
:root {
  --swirl-clip-hevc: url('/assets/video/swirl-hevc.mp4?v=cf2f16fdbaea');
  --swirl-clip: url('/assets/video/swirl.mp4?v=33b962c1b557');
  --swirl-still: url('/assets/video/swirl-poster.webp?v=3bc17c919820');
}

.swirl {
  --level: 0.55;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.swirl.is-ready {
  opacity: var(--level);
}

.swirl.is-away {
  opacity: 0;
}

.swirl__clip {
  position: absolute;
  top: 0;
  right: -14vh;
  height: 100vh;
  width: auto;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}

/* Businesses: on the left and mirrored, like its hero */
.swirl--reverse .swirl__clip {
  right: auto;
  left: -14vh;
  transform: scaleX(-1);
}

@media (max-width: 767px) {
  .swirl {
    --level: 0.45;
  }

  .swirl__clip {
    top: 10vh;
    right: -28vw;
    height: 100vh;
  }

  .swirl--reverse .swirl__clip {
    right: auto;
    left: -28vw;
  }
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

/* Anything with the hidden attribute stays hidden, whatever display a class gives it */
[hidden] {
  display: none !important;
}

.container {
  width: var(--content);
  margin-inline: auto;
}

.container--wide {
  width: var(--content-wide);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header: the logo above a centred menu ---------- */

.site-header {
  padding: 42px 0 30px;
  text-align: center;
}

.site-header__logo {
  display: block;
  width: 316px;
  height: 156px;
  margin-inline: auto;
}

.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 32px;
}

.site-nav a {
  --pad: 8px;
  position: relative;
  padding: 12px var(--pad);
  border-bottom: 4px solid transparent;
  font: 400 16px/24px var(--font-ui);
  white-space: nowrap;
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease,
    transform 0.2s ease;
}

/* The page you're on ("true" on /refer/terms, which sits under Refer a Business, when the referral pages are live) */
.site-nav a[aria-current] {
  border-bottom-color: var(--ice);
}

/*
  Hover: the word lifts and glows, and a line in the swirl's teal and blue grows out from the middle over the
  bottom edge. Only where there's a mouse, so a tap on a phone doesn't leave it stuck; keyboard focus gets the line.
*/
.site-nav a::after {
  content: '';
  position: absolute;
  right: var(--pad);
  bottom: -4px;
  left: var(--pad);
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  box-shadow: 0 0 12px rgb(25 209 194 / 0.55);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--white);
    text-shadow: 0 0 16px rgb(25 209 194 / 0.7);
    transform: translateY(-2px);
  }

  .site-nav a:hover::after {
    transform: scaleX(1);
  }
}

.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a,
  .site-nav a::after {
    transition: none;
  }

  .site-nav a:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  .site-header {
    padding-bottom: 31px;
    background: var(--navy);
  }

  .site-header__logo {
    width: 175px;
    height: 44px;
  }

  .site-nav {
    gap: 6px;
    margin-top: 33px;
  }

  .site-nav a {
    font: 400 18px/22px var(--font-body);
  }
}

/*
  The tabs fit one line down to 640px wide. Narrower, the first three go on one line and the rest below, each line
  centred, and the space above and below the menu shrinks to make room. Widths measured in Titillium Web (30 September
  2026), when there were six tabs: the longer line (Pricing, Refer a Business, Contact Us) was 260px of words at 18px
  and 231px at 16px, plus the padding and gaps below: 320px and 275px. Each tab stays 46px tall to tap.
*/
@media (max-width: 639px) {
  .site-header {
    padding-bottom: 20px;
  }

  .site-nav {
    gap: 0 6px;
    margin-top: 22px;
  }

  .site-nav::after {
    content: '';
    flex-basis: 100%;
    order: 1;
  }

  .site-nav a:nth-child(n + 4) {
    order: 2;
  }

  .site-nav a {
    padding-block: 10px;
  }
}

@media (max-width: 359px) {
  .site-nav {
    gap: 0 4px;
  }

  .site-nav a {
    --pad: 6px;
    font-size: 16px;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: var(--ice);
  color: var(--navy);
  min-height: 60px;
  font: 400 var(--text-small) / 1.5 var(--font-ui);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn:hover {
  background: var(--white);
}

.btn:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* ---------- Home: hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 60px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px 16px;
  color: var(--white);
  text-align: center;
}

.hero h1 {
  font: 400 var(--text-hero) / 1.4 var(--font-display);
}

.hero__text p {
  margin-top: 20px;
  font: 400 var(--text-lead) / 1.5 var(--font-body);
}

.hero .btn {
  margin-top: 20px;
  font: 700 var(--text-body) / 1.5 var(--font-body);
}

/* At least square, and as tall as the text beside it */
.hero__media {
  position: relative;
}

.hero__media::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The swirl clip (swirl.js scrubs it), framed on the swirl, its navy background faded out at the edges */
.hero__swirl {
  object-position: 50% 28%;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
}

@media (max-width: 767px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero__media {
    order: -1;
  }

  .hero__text {
    padding-top: 16px;
  }

  .hero .btn {
    align-self: stretch;
  }
}

/* Businesses page: the picture on the left, mirrored */
.hero--reverse .hero__media {
  order: -1;
}

.hero--reverse .hero__media img,
.hero--reverse .hero__media video {
  transform: scaleX(-1);
}

/* ---------- Two columns: heading on the left, paragraphs on the right ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 767px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* "Attention isn't the same as a business." on a solid navy band */
.band {
  margin-top: 80px;
  padding: 32px 0;
  background: var(--navy);
}

.band h2 {
  font: 400 var(--text-display) / 1.4 var(--font-display);
}

.band p {
  font: 400 var(--text-body-lg) / 1.5 var(--font-body);
}

@media (max-width: 767px) {
  .band .split {
    gap: 8px;
  }
}

/* "Who's behind this" */
.about {
  padding: 62px 0 63px;
}

.about h2 {
  font: 400 var(--text-display) / 1.1 var(--font-display);
}

.about p {
  font: 400 var(--text-body) / 1.5 var(--font-body);
}

@media (max-width: 767px) {
  .about .split {
    gap: 8px;
  }
}

/* ---------- Rows of icon cards ---------- */

.cards {
  display: grid;
  gap: 40px;
}

.cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

.cards--5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 767px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card img {
  width: 88px;
  height: 88px;
}

/* "One complete system": the pale box with four stages */
.system {
  padding: 72px 0;
  border-radius: 6px;
  background: var(--ice);
  color: var(--navy);
  text-align: center;
}

.system h2 {
  font: 400 var(--text-display-lg) / 1.4 var(--font-display);
}

/* Same colour as the box, exactly as on the original site, so this line is invisible */
.system__intro {
  margin-top: 32px;
  color: var(--ice);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

/* The Businesses page shows its line; the homepage keeps the original's invisible one */
.system__intro--visible {
  color: var(--navy);
}

.system .cards {
  margin-top: 32px;
}

.system .card img {
  width: 64px;
  height: 64px;
}

.system .card h3 {
  margin-top: 24px;
  font: 700 var(--text-body-lg) / 1.4 var(--font-body);
}

.system .card p {
  margin-top: 16px;
  font: 400 var(--text-body-lg) / 1.5 var(--font-body);
}

/* "You stay the face. I run the engine." */
.engine {
  padding: 72px 0 24px;
}

.engine h2 {
  font: 400 var(--text-display-lg) / 1.1 var(--font-display);
}

.engine p {
  margin-top: 16px;
  font: 400 var(--text-display) / 1.5 var(--font-body);
  text-align: center;
}

/* Centred sections: the partnership, the five steps, who it's for */
.feature {
  padding: 62px 0 82px;
  text-align: center;
}

.feature--partnership {
  padding-top: 24px;
}

.feature--steps {
  padding-top: 81px;
}

.feature h2 {
  font: 400 var(--text-heading) / 1.1 var(--font-ui);
}

.feature__intro {
  margin-top: 32px;
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.feature .cards {
  margin-top: 32px;
}

.feature .card h3 {
  margin-top: 24px;
  font: 400 var(--text-heading-sm) / 1.4 var(--font-ui);
}

.feature .card p,
.feature .card ul {
  margin-top: 16px;
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

/* ---------- Questions ---------- */

.faq {
  padding: 70px 0 82px;
}

.faq h2 {
  font: 400 var(--text-heading) / 1.1 var(--font-ui);
  text-align: center;
}

.faq__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.faq h3 {
  font: 700 var(--text-small) / 1.5 var(--font-ui);
}

.faq p {
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

@media (max-width: 767px) {
  .faq__list {
    grid-template-columns: 1fr;
  }
}

/* ---------- Closing call to action ---------- */

.cta {
  padding: 62px 0 80px;
  text-align: center;
}

.cta h2 {
  font: 400 var(--text-heading) / 1.1 var(--font-ui);
}

.cta p {
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.cta__text {
  margin-top: 20px;
}

.cta .btn {
  margin-top: 20px;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 20px 0;
  background: var(--navy);
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer p {
  font: 400 20px/30px var(--font-body);
}

.site-footer p a {
  display: inline-block;
  padding: 7px 0;
  margin: -7px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The trading disclosures a limited company's website must show */
.site-footer .site-footer__legal {
  margin-top: 4px;
  font: 400 var(--text-small) / 1.5 var(--font-body);
  opacity: 0.8;
}

.social-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  transition: opacity 0.15s ease;
}

.social-link:hover {
  opacity: 0.8;
}

.social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

@media (max-width: 767px) {
  .site-footer .container {
    flex-direction: column;
  }

  .site-footer__text {
    text-align: center;
  }

  .social-link {
    margin-right: 0;
  }
}

/* ---------- Contact page ---------- */

.contact-intro {
  margin-top: 48px;
  padding: 12px 0;
  color: var(--white);
  text-align: center;
}

.contact-intro h1 {
  font: 400 var(--text-display-lg) / 1.3 var(--font-display);
}

.contact-intro p {
  font: 400 var(--text-body-lg) / 1.4 var(--font-body);
}

.contact-intro__text {
  margin-top: 16px;
}

/* The link to the questionnaire */
.contact-intro__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Creators or Businesses: the matching intro shows and the choice is sent with the form */
.audience-switch {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.audience-switch label {
  padding: 8px 20px;
  border: 2px solid var(--ice);
  border-radius: 8px;
  color: var(--ice);
  font: 400 16px/24px var(--font-ui);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.audience-switch input:checked + label {
  background: var(--ice);
  color: var(--navy);
}

.audience-switch input:focus-visible + label {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

.contact-intro__panel--business,
.contact-intro:has(#enquiry-business:checked) .contact-intro__panel--creator {
  display: none;
}

.contact-intro:has(#enquiry-business:checked) .contact-intro__panel--business {
  display: block;
}

.contact-email {
  padding: 32px 0;
  color: var(--white);
  text-align: center;
}

.contact-email img {
  width: 64px;
  height: 64px;
  margin-inline: auto;
}

.contact-email h2 {
  margin-top: 24px;
  font: 700 var(--text-label-lg) / 1.4 var(--font-body);
}

.contact-email a {
  display: inline-block;
  margin-top: 16px;
  font: 400 var(--text-body-lg) / 1.5 var(--font-body);
}

.divider {
  padding: 24px 0;
}

.divider hr {
  margin: 0;
  border: 0;
  border-top: 2px solid var(--white);
}

.contact-form-section {
  margin-bottom: 48px;
  padding: 32px 0 33px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field--full,
.contact-form__actions {
  grid-column: 1 / -1;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: var(--white);
  color: var(--field-text);
  font: 400 16px/24px var(--font-ui);
}

.field textarea {
  min-height: 80px;
  padding: 14px 16px;
  resize: vertical;
}

.contact-form__actions {
  margin-top: 6px;
  text-align: center;
}

.btn--send {
  min-height: 0;
  padding: 12px 32px;
  font: 400 var(--text-button) / 1.5 var(--font-body);
}

.form-status {
  min-height: 24px;
  margin-top: 11px;
  font: 400 16px/24px var(--font-ui);
}

.form-status[data-kind='error'] {
  color: var(--error);
}

/* The line under each Send button that links to the privacy notice */
.form-privacy {
  margin-top: 0;
  color: rgb(225 234 250 / 0.8);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.form-privacy a {
  display: inline-block;
  padding: 11px 0;
  margin: -11px 0;
  color: var(--ice);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A field people never see; only bots fill it in */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .contact-form {
    grid-template-columns: 1fr;
  }

  .btn--send {
    width: 100%;
  }
}

/* ---------- 404 ---------- */

.not-found {
  margin-top: 48px;
  padding: 40px 0 120px;
  text-align: center;
}

.not-found h1 {
  font: 400 var(--text-display-lg) / 1.3 var(--font-display);
  color: var(--white);
}

.not-found p {
  margin-top: 17px;
  font: 400 var(--text-body-lg) / 1.4 var(--font-body);
}

.not-found .btn {
  margin-top: 32px;
}

/* ---------- Privacy notice ---------- */

.legal {
  margin-top: 48px;
  padding: 40px 0 96px;
}

.legal__body {
  max-width: 720px;
  font: 400 var(--text-body) / 1.6 var(--font-body);
}

.legal h1 {
  color: var(--white);
  font: 400 var(--text-display-lg) / 1.3 var(--font-display);
}

.legal__updated {
  color: rgb(225 234 250 / 0.8);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.legal h2 {
  margin-top: 36px;
  color: var(--white);
  font: 700 var(--text-heading-sm) / 1.3 var(--font-body);
}

.legal p,
.legal ul {
  margin-top: 12px;
}

.legal ul {
  padding-left: 1.25em;
  list-style: disc;
}

.legal li + li {
  margin-top: 6px;
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Homepage questionnaire: one question per screen (questionnaire.js) ---------- */

.questionnaire {
  padding: 24px 0 96px;
}

.questionnaire__card {
  width: min(760px, 100% - 48px);
  margin-inline: auto;
  padding: 36px 48px 44px;
  border: 1px solid rgb(225 234 250 / 0.14);
  border-radius: 16px;
  background: rgb(7 19 39 / 0.85);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
  scroll-margin-top: 16px;
}

.questionnaire__progress {
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: rgb(225 234 250 / 0.15);
  appearance: none;
  overflow: hidden;
}

.questionnaire__progress::-webkit-progress-bar {
  border-radius: 2px;
  background: rgb(225 234 250 / 0.15);
}

.questionnaire__progress::-webkit-progress-value {
  border-radius: 2px;
  background: var(--ice);
  transition: width 0.3s ease;
}

.questionnaire__progress::-moz-progress-bar {
  border-radius: 2px;
  background: var(--ice);
}

.questionnaire__count {
  margin-top: 12px;
  color: rgb(225 234 250 / 0.7);
  font: 400 14px/20px var(--font-ui);
  letter-spacing: 0.02em;
}

.questionnaire__noscript {
  margin-top: 24px;
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.questionnaire__noscript a {
  text-decoration: underline;
}

.questionnaire__step {
  margin-top: 24px;
}

.questionnaire__step:not([hidden]) {
  animation: questionnaire-in 0.35s ease both;
}

@keyframes questionnaire-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .questionnaire__step:not([hidden]) {
    animation: none;
  }
}

.questionnaire__eyebrow {
  margin-bottom: 12px;
  color: rgb(225 234 250 / 0.8);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.questionnaire__question {
  color: var(--white);
  font: 700 var(--text-display) / 1.25 var(--font-body);
  outline: none;
}

/* The first question in the site's display face, like the Creators page headings */
.questionnaire__step--start .questionnaire__question,
.questionnaire__step--done .questionnaire__question {
  font: 400 var(--text-display-lg) / 1.3 var(--font-display);
}

.questionnaire__hint,
.questionnaire__text {
  margin-top: 10px;
  color: rgb(225 234 250 / 0.8);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.questionnaire__text {
  color: var(--ice);
  font: 400 var(--text-body) / 1.5 var(--font-body);
}

.questionnaire__options {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.questionnaire__options--two {
  grid-template-columns: 1fr 1fr;
}

.questionnaire__options--grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.questionnaire__option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 20px;
  border: 2px solid rgb(225 234 250 / 0.35);
  border-radius: 10px;
  background: rgb(225 234 250 / 0.04);
  color: var(--ice);
  font: 600 18px/1.3 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.questionnaire__option:hover {
  border-color: var(--ice);
  background: rgb(225 234 250 / 0.1);
}

.questionnaire__option[aria-pressed='true'] {
  border-color: var(--ice);
  background: var(--ice);
  color: var(--navy);
}

/* Business or creator: two big buttons */
.questionnaire__options--two .questionnaire__option {
  justify-content: center;
  min-height: 96px;
  font: 700 var(--text-body-lg) / 1.3 var(--font-body);
  text-align: center;
}

/* Pick-any questions get a tick box */
.questionnaire__step[data-type='multi'] .questionnaire__option::before {
  content: '';
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 5px;
  font: 700 13px/1 var(--font-ui);
}

.questionnaire__step[data-type='multi'] .questionnaire__option[aria-pressed='true']::before {
  content: '✓';
  border-color: var(--navy);
  background: var(--navy);
  color: var(--ice);
}

.questionnaire__input {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: 400 18px/26px var(--font-ui);
}

.questionnaire__input--long {
  min-height: 140px;
  resize: vertical;
}

.questionnaire__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.questionnaire__back {
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ice);
  font: 400 16px/24px var(--font-ui);
  cursor: pointer;
}

.questionnaire__back::before {
  content: '← ';
}

.questionnaire__back:hover {
  text-decoration: underline;
}

.questionnaire__next {
  min-height: 0;
  margin-left: auto;
  padding: 12px 40px;
  font: 700 var(--text-body) / 1.5 var(--font-body);
}

.questionnaire__next:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.questionnaire__recap {
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 3px solid var(--ice);
  border-radius: 0 8px 8px 0;
  background: rgb(225 234 250 / 0.06);
  font: 400 16px/1.5 var(--font-ui);
}

.questionnaire__recap ul {
  margin-top: 6px;
  padding-left: 20px;
  list-style: disc;
}

.questionnaire__recap li + li {
  margin-top: 4px;
}

.questionnaire__form {
  margin-top: 28px;
}

.questionnaire__cta {
  margin-top: 28px;
  font: 700 var(--text-body) / 1.5 var(--font-body);
}

@media (max-width: 767px) {
  .questionnaire {
    padding: 24px 0 64px;
  }

  .questionnaire__card {
    padding: 28px 20px 32px;
  }
}

@media (max-width: 575px) {
  .questionnaire__options--two,
  .questionnaire__options--grid {
    grid-template-columns: 1fr;
  }

  /* Short labels (the platforms) still fit two to a row on a phone */
  .questionnaire__options--short {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .questionnaire__options--short .questionnaire__option {
    min-height: 52px;
    padding: 10px 14px;
    font-size: 16px;
  }

  .questionnaire__options--two .questionnaire__option {
    min-height: 72px;
  }
}

/* ---------- Pricing page: the calculator (pricing.js) ---------- */

/* A link inside running text, such as "pricing page" on the Businesses page */
.inline-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pricing-intro {
  padding: 24px 0 8px;
  text-align: center;
}

.pricing-intro h1 {
  font: 400 var(--text-display-lg) / 1.25 var(--font-display);
}

.pricing-intro__lede {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--ice);
  font: 400 var(--text-body) / 1.6 var(--font-body);
}

.pricing-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 32px auto 0;
}

.pricing-facts li {
  display: grid;
  gap: 2px;
  padding: 18px 16px;
  border: 1px solid rgb(225 234 250 / 0.18);
  border-radius: 12px;
  background: rgb(7 19 39 / 0.6);
}

.pricing-facts__label,
.pricing-facts__then {
  color: rgb(225 234 250 / 0.8);
  font: 400 14px/1.4 var(--font-ui);
}

.pricing-facts__price {
  color: var(--white);
  font: 700 28px/1.2 var(--font-body);
}

.pricing-noscript {
  margin-top: 24px;
  font: 400 var(--text-small) / 1.5 var(--font-ui);
  text-align: center;
}

.pricing-noscript a {
  text-decoration: underline;
}

/* The search card: same look as the questionnaire's card */
.pricing-finder {
  padding: 40px 0 16px;
}

.pricing-card {
  max-width: 860px;
  margin-inline: auto;
  padding: 32px 40px 36px;
  border: 1px solid rgb(225 234 250 / 0.14);
  border-radius: 16px;
  background: rgb(7 19 39 / 0.85);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}

.pricing-card__title {
  color: var(--white);
  font: 700 var(--text-display) / 1.25 var(--font-body);
}

.pricing-card__hint {
  margin-top: 8px;
  color: rgb(225 234 250 / 0.8);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.finder {
  margin-top: 20px;
}

.finder__input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--white);
  color: var(--navy);
  font: 400 18px/26px var(--font-ui);
  appearance: none;
}

.finder__input::placeholder {
  color: var(--field-text);
}

.finder__results {
  max-height: 360px;
  margin-top: 8px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid rgb(225 234 250 / 0.25);
  border-radius: 10px;
  background: var(--navy);
}

.finder__group {
  padding: 8px 10px 4px;
  color: rgb(225 234 250 / 0.65);
  font: 700 12px/1.3 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.finder__option {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.finder__option:hover,
.finder__option[aria-selected='true'] {
  background: rgb(225 234 250 / 0.12);
}

.finder__option-name {
  color: var(--white);
  font: 600 17px/1.3 var(--font-body);
}

.finder__option-detail {
  color: rgb(225 234 250 / 0.75);
  font: 400 14px/1.4 var(--font-ui);
}

.finder__nothing {
  margin-top: 12px;
  color: var(--ice);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.finder__quick {
  margin-top: 20px;
}

.finder__quick-label {
  color: rgb(225 234 250 / 0.8);
  font: 400 14px/1.4 var(--font-ui);
}

.finder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.finder__chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid rgb(225 234 250 / 0.35);
  border-radius: 999px;
  background: rgb(225 234 250 / 0.04);
  color: var(--ice);
  font: 600 15px/1.2 var(--font-body);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.finder__chip:hover {
  border-color: var(--ice);
  background: rgb(225 234 250 / 0.1);
}

.finder__chip[aria-pressed='true'] {
  border-color: var(--ice);
  background: var(--ice);
  color: var(--navy);
}

/* Suggestions for the kind of business picked */
.match {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgb(225 234 250 / 0.15);
  outline: none;
  scroll-margin-top: 16px;
}

.match__eyebrow {
  color: rgb(225 234 250 / 0.7);
  font: 700 12px/1.3 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.match__title {
  margin-top: 6px;
  color: var(--white);
  font: 400 var(--text-heading) / 1.2 var(--font-display);
}

.match__leaks {
  margin-top: 12px;
  color: var(--ice);
  font: 400 var(--text-body) / 1.55 var(--font-body);
}

.match__picks {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.match__pick {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgb(225 234 250 / 0.2);
  border-radius: 12px;
  background: rgb(225 234 250 / 0.04);
}

.match__text {
  min-width: 0;
}

.match__start {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ice);
  color: var(--navy);
  font: 700 11px/1.3 var(--font-ui);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.match__name {
  margin: 0;
  color: var(--white);
  font: 700 18px/1.3 var(--font-body);
}

.match__why {
  margin-top: 4px;
  color: var(--ice);
  font: 400 16px/1.5 var(--font-body);
}

.match__price {
  margin-top: 6px;
  color: var(--white);
  font: 700 15px/1.4 var(--font-ui);
}

.match__more {
  margin-top: 16px;
  color: rgb(225 234 250 / 0.75);
  font: 400 14px/1.5 var(--font-ui);
}

/* Add buttons, in the suggestions and the list */
.add {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--ice);
  border-radius: 999px;
  background: transparent;
  color: var(--ice);
  font: 700 15px/1 var(--font-ui);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.add:hover {
  background: rgb(225 234 250 / 0.12);
}

.add[aria-pressed='true'] {
  background: var(--ice);
  color: var(--navy);
}

.add[aria-pressed='true']::before {
  content: '✓';
}

/* The list and the estimate, side by side on wide screens */
.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
  padding: 40px 0 24px;
}

.catalogue__title {
  color: var(--white);
  font: 700 var(--text-display) / 1.25 var(--font-body);
}

.catalogue__intro {
  margin-top: 8px;
  color: rgb(225 234 250 / 0.8);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

[data-catalogue] {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.group {
  border: 1px solid rgb(225 234 250 / 0.18);
  border-radius: 14px;
  background: rgb(7 19 39 / 0.85);
}

.group[open] {
  border-color: rgb(225 234 250 / 0.3);
}

/* Name above its count, with the open/close sign on the right */
.group__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 64px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
}

.group__summary::-webkit-details-marker {
  display: none;
}

.group__summary::after {
  content: '+';
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgb(225 234 250 / 0.5);
  border-radius: 50%;
  color: var(--ice);
  font: 400 18px/1 var(--font-ui);
}

.group[open] > .group__summary::after {
  content: '−';
}

.group__name {
  color: var(--white);
  font: 700 var(--text-body-lg) / 1.3 var(--font-body);
}

.group__meta {
  justify-self: start;
  color: rgb(225 234 250 / 0.75);
  font: 400 14px/1.3 var(--font-ui);
}

.group__meta--added {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ice);
  color: var(--navy);
  font-weight: 700;
}

.group__body {
  padding: 0 20px 20px;
}

.group__intro {
  color: var(--ice);
  font: 400 16px/1.55 var(--font-body);
}

.group__subhead {
  margin: 24px 0 0;
  color: rgb(225 234 250 / 0.75);
  font: 700 13px/1.3 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.group__items {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.sizes__size {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgb(225 234 250 / 0.06);
  color: rgb(225 234 250 / 0.85);
  font: 400 14px/1.45 var(--font-ui);
}

.sizes__size strong {
  color: var(--white);
}

.item {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid rgb(225 234 250 / 0.18);
  border-radius: 12px;
  background: rgb(225 234 250 / 0.03);
  scroll-margin-top: 24px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.item:has(.add[aria-pressed='true']) {
  border-color: var(--ice);
}

.item--found {
  border-color: var(--ice);
  box-shadow: 0 0 0 3px rgb(225 234 250 / 0.35);
}

.item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.item__name {
  margin: 0;
  color: var(--white);
  font: 700 18px/1.3 var(--font-body);
}

.item__price {
  color: var(--white);
  font: 700 15px/1.4 var(--font-ui);
}

.item__line {
  color: var(--ice);
  font: 400 16px/1.5 var(--font-body);
}

.item__meta {
  color: rgb(225 234 250 / 0.7);
  font: 400 13px/1.45 var(--font-ui);
}

.item__options {
  display: grid;
  gap: 14px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgb(225 234 250 / 0.15);
}

.choices {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choices__legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  color: var(--ice);
  font: 700 14px/1.4 var(--font-ui);
}

.choices__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice {
  position: relative;
  display: inline-flex;
}

.choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice__label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid rgb(225 234 250 / 0.35);
  border-radius: 10px;
  color: var(--ice);
  font: 600 15px/1.25 var(--font-body);
  cursor: pointer;
}

.choice__input:checked + .choice__label {
  border-color: var(--ice);
  background: var(--ice);
  color: var(--navy);
}

.choice__input:focus-visible + .choice__label {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

.choices__note {
  margin-top: 8px;
  color: rgb(225 234 250 / 0.7);
  font: 400 13px/1.45 var(--font-ui);
}

.choices__text {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: 400 16px/24px var(--font-ui);
}

/* The estimate: sticky beside the list on wide screens */
.estimate {
  position: sticky;
  top: 16px;
  scroll-margin-top: 16px;
}

.estimate__card {
  max-height: calc(100vh - 32px);
  padding: 24px 22px 26px;
  overflow-y: auto;
  border: 1px solid rgb(225 234 250 / 0.3);
  border-radius: 16px;
  background: rgb(7 19 39 / 0.92);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}

.estimate__title {
  color: var(--white);
  font: 400 var(--text-heading) / 1.2 var(--font-display);
}

.estimate__empty {
  margin-top: 12px;
  color: rgb(225 234 250 / 0.8);
  font: 400 15px/1.55 var(--font-ui);
}

.estimate__filled {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.estimate__cta {
  width: 100%;
  margin-top: 20px;
  font-weight: 700;
}

.estimate__small {
  margin-top: 10px;
  color: rgb(225 234 250 / 0.75);
  font: 400 13px/1.5 var(--font-ui);
  text-align: center;
}

.est-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(225 234 250 / 0.12);
}

.est-line--addon {
  padding-left: 14px;
}

.est-line__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.est-line__name {
  color: var(--white);
  font: 600 15px/1.35 var(--font-body);
}

.est-line__detail {
  color: rgb(225 234 250 / 0.7);
  font: 400 13px/1.4 var(--font-ui);
}

.est-line__figures {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.est-line__build {
  color: var(--white);
  font: 700 15px/1.35 var(--font-ui);
}

.est-line__monthly {
  color: rgb(225 234 250 / 0.75);
  font: 400 13px/1.4 var(--font-ui);
  white-space: nowrap;
}

.est-line__actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 16px;
}

.est-line__action {
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: rgb(225 234 250 / 0.8);
  font: 400 13px/1.3 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.est-line__action:hover {
  color: var(--white);
}

.est-totals {
  display: grid;
  gap: 6px;
  margin: 0;
}

.est-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.est-totals dt {
  color: var(--ice);
  font: 400 15px/1.4 var(--font-ui);
}

.est-totals dd {
  margin: 0;
  color: var(--white);
  font: 700 15px/1.4 var(--font-ui);
  white-space: nowrap;
}

.est-totals__saving dt,
.est-totals__saving dd {
  color: rgb(225 234 250 / 0.8);
  font-weight: 400;
}

.est-totals__main dd {
  font-size: 22px;
}

.est-totals__year {
  padding-top: 8px;
  border-top: 1px solid rgb(225 234 250 / 0.2);
}

.est-founding {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgb(225 234 250 / 0.08);
  color: var(--ice);
  font: 400 14px/1.5 var(--font-ui);
}

.est-founding strong,
.est-payback strong {
  color: var(--white);
}

.est-choice {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.est-choice__legend {
  margin-bottom: 4px;
  padding: 0;
  color: var(--white);
  font: 700 14px/1.4 var(--font-ui);
}

.est-radio,
.est-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 32px;
  color: var(--ice);
  font: 400 14px/1.45 var(--font-ui);
  cursor: pointer;
}

.est-radio input,
.est-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ice);
}

.est-value {
  display: grid;
  gap: 10px;
}

.est-value__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ice);
  font: 400 14px/1.4 var(--font-ui);
}

.est-value__money {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--white);
  font: 700 15px/1 var(--font-ui);
}

.est-value__money input {
  width: 84px;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: 400 16px/1.2 var(--font-ui);
}

.est-payback {
  color: var(--ice);
  font: 400 15px/1.55 var(--font-body);
}

.est-notes {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  color: rgb(225 234 250 / 0.75);
  font: 400 13px/1.5 var(--font-ui);
  list-style: disc;
}

/* How the prices work, and the offers */
.pricing-how {
  padding: 56px 0 24px;
}

.pricing-how h2 {
  font: 400 var(--text-heading) / 1.1 var(--font-ui);
  text-align: center;
}

.pricing-how__parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.pricing-how__part,
.pricing-how__promise {
  padding: 20px 22px;
  border: 1px solid rgb(225 234 250 / 0.18);
  border-radius: 14px;
  background: rgb(7 19 39 / 0.6);
}

.pricing-how__part h3,
.pricing-how__promise h3 {
  color: var(--white);
  font: 700 var(--text-body-lg) / 1.3 var(--font-body);
}

.pricing-how__part p,
.pricing-how__promise p {
  margin-top: 8px;
  color: var(--ice);
  font: 400 var(--text-small) / 1.55 var(--font-ui);
}

.pricing-how__promise {
  margin-top: 16px;
  border-color: var(--ice);
}

.pricing-offers {
  display: grid;
  margin: 28px 0 0;
  border-top: 1px solid rgb(225 234 250 / 0.18);
}

.pricing-offers > div {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 6px 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgb(225 234 250 / 0.18);
}

.pricing-offers dt {
  color: var(--white);
  font: 700 var(--text-small) / 1.5 var(--font-ui);
}

.pricing-offers dd {
  margin: 0;
  color: var(--ice);
  font: 400 var(--text-small) / 1.55 var(--font-ui);
}

/* Phones and tablets: one column, and a bar with the totals once something's picked */
.pricing-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(225 234 250 / 0.25);
  background: var(--navy);
  box-shadow: 0 -12px 30px rgb(0 0 0 / 0.35);
}

.pricing-bar__text {
  min-width: 0;
  color: var(--white);
  font: 700 15px/1.35 var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.pricing-bar__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ice);
  color: var(--navy);
  font: 700 15px/1 var(--font-ui);
}

@media (max-width: 1023px) {
  .pricing-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .estimate {
    position: static;
  }

  .estimate__card {
    max-height: none;
    overflow: visible;
  }

  .pricing-bar:not([hidden]) {
    display: flex;
  }

  body:has(.pricing-bar:not([hidden])) .site-footer {
    padding-bottom: 96px;
  }
}

@media (max-width: 767px) {
  .pricing-how__parts,
  .sizes {
    grid-template-columns: 1fr;
  }

  /* The three prices stay on one row, so the search is on the first screen */
  .pricing-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
  }

  .pricing-facts li {
    padding: 12px 8px;
  }

  .pricing-facts__price {
    font-size: 20px;
  }

  .pricing-facts__label,
  .pricing-facts__then {
    font-size: 12px;
  }

  .pricing-finder {
    padding-top: 28px;
  }

  .pricing-card {
    padding: 24px 18px 28px;
  }

  .pricing-offers > div {
    grid-template-columns: 1fr;
  }

  .match__pick {
    flex-direction: column;
  }

  .match__pick .add {
    align-self: stretch;
  }

  .group__summary {
    padding: 14px 16px;
  }

  .group__body {
    padding: 0 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .item,
  .finder__chip,
  .add {
    transition: none;
  }
}

/* ---------- Refer a business: referral partners (/refer) ---------- */

/* A visible label, for a field that arrives filled in ("Who sent you here?") */
.field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--ice);
  font: 400 14px/1.4 var(--font-ui);
}

.refer-hero {
  padding: 24px 0 48px;
  text-align: center;
}

.refer-hero__eyebrow {
  color: rgb(225 234 250 / 0.75);
  font: 700 13px/1.3 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.refer-hero h1 {
  max-width: 900px;
  margin: 12px auto 0;
  font: 400 var(--text-display-lg) / 1.25 var(--font-display);
}

.refer-hero__lede {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--ice);
  font: 400 var(--text-body-lg) / 1.55 var(--font-body);
}

.refer-hero .btn {
  margin-top: 28px;
}

.refer-hero__small {
  max-width: 560px;
  margin: 16px auto 0;
  color: rgb(225 234 250 / 0.75);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.refer-steps {
  padding: 32px 0 56px;
}

.refer-steps h2,
.refer-earn h2,
.refer-calc h2,
.refer-rules h2 {
  font: 400 var(--text-heading) / 1.1 var(--font-ui);
  text-align: center;
}

.refer-steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.refer-steps__list li {
  padding: 22px 22px 24px;
  border: 1px solid rgb(225 234 250 / 0.18);
  border-radius: 14px;
  background: rgb(7 19 39 / 0.6);
  counter-increment: step;
}

.refer-steps__list li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--navy);
  font: 700 16px/1 var(--font-ui);
}

.refer-steps__list h3 {
  margin-top: 14px;
  color: var(--white);
  font: 700 var(--text-body-lg) / 1.3 var(--font-body);
}

.refer-steps__list p {
  margin-top: 8px;
  color: var(--ice);
  font: 400 var(--text-small) / 1.55 var(--font-ui);
}

.refer-earn {
  padding: 24px 0 56px;
}

.refer-earn__intro,
.refer-earn__note {
  max-width: 680px;
  margin: 12px auto 0;
  color: var(--ice);
  font: 400 var(--text-small) / 1.55 var(--font-ui);
  text-align: center;
}

.refer-earn__note {
  margin-top: 16px;
  color: rgb(225 234 250 / 0.75);
}

.refer-table {
  max-width: 860px;
  margin: 24px auto 0;
  overflow-x: auto;
  border: 1px solid rgb(225 234 250 / 0.2);
  border-radius: 14px;
  background: rgb(7 19 39 / 0.85);
}

.refer-table table {
  width: 100%;
  border-collapse: collapse;
  font: 400 15px/1.45 var(--font-ui);
}

.refer-table th,
.refer-table td {
  padding: 14px 16px;
  border-top: 1px solid rgb(225 234 250 / 0.14);
  text-align: left;
  vertical-align: top;
}

.refer-table thead th {
  border-top: 0;
  color: rgb(225 234 250 / 0.7);
  font: 700 12px/1.3 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.refer-table tbody th {
  color: var(--white);
  font-weight: 700;
}

.refer-table tbody th > span {
  display: block;
  margin-top: 2px;
  color: rgb(225 234 250 / 0.7);
  font-size: 13px;
  font-weight: 400;
}

.refer-table td {
  color: var(--ice);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.refer-table td:last-child {
  color: var(--white);
  font: 700 18px/1.3 var(--font-ui);
}

/* The earnings calculator: the pricing page's groups and estimate card, with ticks instead of Add buttons */
.refer-calc {
  padding: 8px 0 56px;
}

.refer-calc__intro {
  max-width: 680px;
  margin: 12px auto 0;
  color: var(--ice);
  font: 400 var(--text-small) / 1.55 var(--font-ui);
  text-align: center;
}

.refer-calc__mode {
  margin: 24px 0 20px;
}

.refer-calc__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.refer-calc__groups {
  display: grid;
  gap: 12px;
}

.refer-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgb(225 234 250 / 0.18);
  border-radius: 12px;
  background: rgb(225 234 250 / 0.03);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.refer-pick:has(input:checked) {
  border-color: var(--ice);
}

.refer-pick input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--ice);
  cursor: pointer;
}

.refer-pick input:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
}

.refer-pick__text {
  display: grid;
  gap: 2px;
}

.refer-pick__name {
  color: var(--white);
  font: 700 17px/1.35 var(--font-body);
}

.refer-pick__price {
  color: rgb(225 234 250 / 0.8);
  font: 400 14px/1.4 var(--font-ui);
}

.refer-amount {
  display: none;
  gap: 10px;
  padding: 20px;
  border: 1px solid rgb(225 234 250 / 0.3);
  border-radius: 14px;
  background: rgb(7 19 39 / 0.85);
}

.refer-calc[data-mode='amount'] .refer-calc__groups {
  display: none;
}

.refer-calc[data-mode='amount'] .refer-amount {
  display: grid;
}

.refer-amount__label {
  color: var(--white);
  font: 700 var(--text-body-lg) / 1.35 var(--font-body);
}

.refer-amount__money {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font: 700 22px/1 var(--font-ui);
}

.refer-amount__money input {
  width: 100%;
  max-width: 240px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--white);
  color: var(--navy);
  font: 700 20px/1.2 var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.refer-amount__money input:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 2px;
}

.refer-amount__hint {
  color: rgb(225 234 250 / 0.75);
  font: 400 14px/1.5 var(--font-ui);
}

.refer-result__figure {
  color: var(--white);
  font: 700 clamp(34px, 30px + 1vw, 44px) / 1.1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.refer-result__basis {
  margin-top: -10px;
  color: rgb(225 234 250 / 0.75);
  font: 400 14px/1.4 var(--font-ui);
}

.refer-result__full {
  margin-top: -6px;
  color: var(--white);
  font: 700 20px/1.3 var(--font-ui);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.refer-result__when {
  color: var(--ice);
  font: 400 15px/1.5 var(--font-ui);
}

.refer-list {
  margin-top: 12px;
  padding-left: 1.25em;
  list-style: disc;
  font: 400 var(--text-body-lg) / 1.5 var(--font-body);
}

.refer-list li + li {
  margin-top: 4px;
}

.refer-rules {
  padding: 56px 0 24px;
}

.refer-rules__intro {
  max-width: 680px;
  margin: 12px auto 0;
  color: var(--ice);
  font: 400 var(--text-small) / 1.55 var(--font-ui);
  text-align: center;
}

.refer-rules__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 960px;
  margin: 24px auto 0;
}

.refer-rules__list li {
  padding: 16px 18px;
  border: 1px solid rgb(225 234 250 / 0.18);
  border-radius: 12px;
  background: rgb(7 19 39 / 0.6);
  color: var(--ice);
  font: 400 var(--text-small) / 1.55 var(--font-ui);
}

.refer-rules__list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
}

.refer-rules__more {
  margin-top: 20px;
  font: 400 var(--text-small) / 1.5 var(--font-ui);
  text-align: center;
}

.refer-apply {
  padding: 24px 0 88px;
  scroll-margin-top: 16px;
}

.refer-apply__card {
  max-width: 760px;
  margin-inline: auto;
  padding: 32px 40px 36px;
  border: 1px solid rgb(225 234 250 / 0.14);
  border-radius: 16px;
  background: rgb(7 19 39 / 0.85);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}

.refer-apply__card h2 {
  color: var(--white);
  font: 700 var(--text-display) / 1.25 var(--font-body);
}

.refer-apply__intro {
  margin: 8px 0 24px;
  color: rgb(225 234 250 / 0.8);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.refer-apply__done {
  outline: none;
}

.refer-apply__done h3 {
  color: var(--white);
  font: 700 var(--text-heading-sm) / 1.3 var(--font-body);
}

.refer-apply__done p {
  margin-top: 8px;
  color: var(--ice);
  font: 400 var(--text-body) / 1.55 var(--font-body);
}

/* A tick box with its words beside it, like agreeing to the partner terms */
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ice);
  font: 400 15px/1.5 var(--font-ui);
  cursor: pointer;
}

.check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ice);
}

@media (max-width: 767px) {
  .refer-steps__list,
  .refer-rules__list {
    grid-template-columns: 1fr;
  }

  .refer-apply__card {
    padding: 24px 18px 28px;
  }

  /* All three columns on a phone, so "You get" is never scrolled out of sight */
  .refer-table th,
  .refer-table td {
    padding: 12px 10px;
  }

  .refer-table td:last-child {
    font-size: 16px;
  }

  .refer-amount {
    padding: 18px 16px;
  }
}

/* The calculator's result goes under the ticks below 1024px, where the phone bar carries the figure */
@media (max-width: 1023px) {
  .refer-calc__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}