/*
  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 the homepage 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);
  }
}

/*
  Four tabs (Home, How it works, My Work, Contact Us since 25 October 2026, when How it works replaced Pricing) fit on
  one line on any phone: about 340px at 17px with their padding and gaps, and about 310px at 16px below 360px. If a
  screen is narrower still they wrap onto a second line on their own. Each tab stays 44px tall to tap.
*/
@media (max-width: 639px) {
  .site-header {
    padding-bottom: 20px;
  }

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

  .site-nav a {
    --pad: 6px;
    padding-block: 10px;
    font-size: 17px;
  }
}

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

  .site-nav a {
    --pad: 5px;
    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);
}

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

/*
  Phones: the words and the "Book a Free Call" button come first, so the button is on the first screen
  (it sat a scroll away, under a full-width swirl, until 21 October 2026). The swirl follows the button
  as a shorter band, and the spacing is tighter than on wider screens.
*/
@media (max-width: 767px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 16px;
  }

  .hero__media,
  .hero--reverse .hero__media {
    order: 1;
  }

  .hero__media::before {
    padding-top: 62%;
  }

  .hero__text {
    padding-top: 8px;
  }

  .hero h1 {
    line-height: 1.22;
  }

  .hero__text p {
    margin-top: 14px;
    font-size: var(--text-body-lg);
    line-height: 1.45;
  }

  .hero .btn {
    align-self: stretch;
    margin-top: 16px;
  }
}

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

/* ---------- The page film, under the homepage hero ---------- */

/*
  A silent, looping film made in code (autora-videos, brief/website-films.md). It sits after the hero's
  "Book a Free Call" button, so on a phone it never pushes the button down. As wide as the content, but
  never taller than the screen. object-fit: contain everywhere, so neither cut is ever cropped.
*/
.film {
  width: min(1152px, 100% - 48px, (100vh - 120px) * 16 / 9);
  margin: 56px auto 0;
}

.film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #050d1d;
  border: 1px solid rgba(25, 209, 194, 0.22);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 90px rgba(25, 209, 194, 0.1);
}

/* The 9:16 cut on a phone held upright (film.js adds .tall): as tall as the screen allows, centred */
.film__video.tall {
  aspect-ratio: 9 / 16;
  width: min(100%, (100svh - 32px) * 9 / 16);
  margin: 0 auto;
}

@media (max-width: 767px) {
  .film {
    width: calc(100% - 20px);
    margin-top: 32px;
  }

  .film__video {
    border-radius: 16px;
  }
}

/* ---------- 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;
}

/* Links in the intro */
.contact-intro__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.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 select,
.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);
}

/* The two optional questions (25 October 2026) have visible labels, so their boxes line up at the bottom */
.field select {
  min-height: 42px;
  appearance: auto;
}

.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;
}

/* ---------- The free audit questionnaire (off the site since 21 October 2026; kept for parked/free-audit-and-creators/) ---------- */

.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);
  }
}

/* ---------- My Work page: four things Euan has built, each with screenshots ---------- */

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

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

.work-intro__lede {
  max-width: 760px;
  margin: 20px auto 0;
  font: 400 var(--text-body-lg) / 1.6 var(--font-body);
}

/* Jump links to the four projects */
.work-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.work-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgb(225 234 250 / 0.3);
  border-radius: 999px;
  background: rgb(7 19 39 / 0.6);
  font: 700 var(--text-small) / 1.2 var(--font-body);
  transition: border-color 0.15s ease;
}

@media (hover: hover) {
  .work-jump a:hover {
    border-color: var(--teal);
  }
}

/*
  Each project: on a computer, the words on one side and the screenshots on the other (swapping sides each time), the
  screenshots staying in view while the list scrolls past. On a phone: name and summary, then the screenshots, then
  the rest.
*/
.project {
  padding: 72px 0;
  scroll-margin-top: 16px;
}

.project + .project {
  border-top: 1px solid rgb(225 234 250 / 0.12);
}

.project__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'head shots'
    'body shots';
  gap: 28px 56px;
}

.project--flip .project__layout {
  grid-template-areas:
    'shots head'
    'shots body';
}

.project__head {
  grid-area: head;
}

.project__body {
  grid-area: body;
}

.project__eyebrow {
  color: var(--teal);
  font: 700 14px/1.4 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project h2 {
  margin-top: 10px;
  color: var(--white);
  font: 400 var(--text-display) / 1.2 var(--font-display);
}

.project__lede {
  margin-top: 16px;
  font: 400 var(--text-body-lg) / 1.55 var(--font-body);
}

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

.project__body > h3:not(:first-child) {
  margin-top: 28px;
}

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

/* A tick in the swirl's teal */
.project__list li {
  position: relative;
  padding-left: 30px;
  font: 400 var(--text-body) / 1.55 var(--font-body);
}

.project__list li::before {
  content: '';
  position: absolute;
  top: 0.4em;
  left: 2px;
  width: 14px;
  height: 8px;
  border-bottom: 2px solid var(--teal);
  border-left: 2px solid var(--teal);
  transform: rotate(-45deg);
}

.project__why {
  margin-top: 20px;
  color: var(--white);
  font: 700 var(--text-body) / 1.55 var(--font-body);
}

/* "How this could help your business": the pale box */
.project__fit {
  margin-top: 28px;
  padding: 22px 24px 24px;
  border-radius: 12px;
  background: var(--ice);
  color: var(--navy);
}

.project__body .project__fit h3 {
  color: var(--navy);
}

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

/* Creator DMs: the steps it used to take, and the taps it takes now */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.before-after > div {
  padding: 18px 20px 20px;
  border: 1px solid rgb(225 234 250 / 0.18);
  border-radius: 12px;
  background: rgb(7 19 39 / 0.6);
}

.before-after > div + div {
  border-color: var(--teal);
}

.before-after ol {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 1.3em;
  font: 400 var(--text-small) / 1.5 var(--font-body);
}

.before-after li::marker {
  color: var(--teal);
  font-weight: 700;
}

/* The screenshots: a row of phone screens, swiped (or scrolled) sideways when there are more than fit */
.shots {
  grid-area: shots;
  align-self: start;
  position: sticky;
  top: 24px;
  min-width: 0;
  margin: 0;
}

.shots__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 4px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: rgb(225 234 250 / 0.35) transparent;
  scrollbar-width: thin;
}

.shot {
  flex: none;
  width: min(250px, 64vw);
  height: auto;
  border: 6px solid #0d1b33;
  border-radius: 30px;
  background: #0d1b33;
  box-shadow:
    0 0 0 1px rgb(225 234 250 / 0.16),
    0 20px 50px rgb(0 0 0 / 0.45);
  scroll-snap-align: start;
}

/* The Bibs ad: 9:16, as tall as the phone screens beside it. It only loads when someone taps play */
.shot--video {
  width: min(296px, 76vw);
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* A computer screen (Autora HQ) */
.shot--wide {
  width: min(560px, 86vw);
  border-radius: 14px;
}

/* Autora HQ on a computer: the computer screen, with the phone screen over its corner */
@media (min-width: 768px) {
  .shots--combo .shots__row {
    display: block;
    position: relative;
    padding: 0 0 14%;
    overflow: visible;
  }

  .shots--combo .shot--wide {
    width: 100%;
  }

  .shots--combo .shot:not(.shot--wide) {
    position: absolute;
    right: -2%;
    bottom: 0;
    width: 30%;
    border-width: 4px;
    border-radius: 18px;
  }

  .shot--phone-only {
    display: none;
  }
}

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

@media (max-width: 767px) {
  .project {
    padding: 48px 0;
  }

  .project__layout,
  .project--flip .project__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      'head'
      'shots'
      'body';
    gap: 24px;
  }

  .shots {
    position: static;
  }

  /* Edge to edge, so the next screenshot peeks in from the side */
  .shots__row {
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }

  /* On a phone, Autora HQ's phone screens come before its computer screen */
  .shot--wide {
    order: 1;
  }

  .shots__note {
    text-align: center;
  }

  .project__fit {
    padding: 20px 18px 22px;
  }
}

@media (max-width: 575px) {
  .before-after {
    grid-template-columns: 1fr;
  }
}

/* Staff rota page (/rota): the My Work layout, with its eyebrow and button in the opening */
.rota-title {
  margin-top: 12px;
}

.rota-cta {
  margin-top: 28px;
}

/* ---------- The apps offer (25 October 2026): homepage, How it works, the trade pages and How I work ---------- */

/* The commitment, always next to "no upfront cost" (CAP Code 3.24 and 3.25: never a bare "free") */
.hero__terms {
  max-width: 34em;
  margin-top: 16px;
  color: var(--ice);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

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

/* Section headings and intros shared by the new sections */
.section {
  padding: 72px 0;
}

.section--navy {
  background: var(--navy);
}

.section__title {
  color: var(--white);
  font: 400 var(--text-display) / 1.25 var(--font-display);
  text-align: center;
}

.section__intro {
  max-width: 720px;
  margin: 18px auto 0;
  font: 400 var(--text-body-lg) / 1.55 var(--font-body);
  text-align: center;
}

.section__more {
  margin-top: 32px;
  text-align: center;
}

.text-link {
  border-bottom: 1px solid var(--teal);
  font-weight: 700;
}

@media (hover: hover) {
  .text-link:hover {
    color: var(--white);
  }
}

@media (max-width: 767px) {
  .section {
    padding: 52px 0;
  }
}

/* "In plain English": the three cards on the pale box (the .system box) */
.system .card p strong {
  font-weight: 700;
}

.system--plain .card h3 {
  margin-top: 16px;
}

/* ---------- The app preview (app-preview.js): pick your business, type its name, tap through the phone ---------- */

/* On a computer the phone sits on the left; on a phone it comes straight after the business picker */
.app-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    'phone pick'
    'phone custom'
    'phone panel'
    'phone note';
  grid-template-rows: auto auto 1fr auto;
  gap: 24px 56px;
  align-items: start;
  margin-top: 40px;
}

/* On the trade pages there's no business to pick */
.app-demo--single {
  grid-template-areas:
    'phone custom'
    'phone panel'
    'phone note';
  grid-template-rows: auto 1fr auto;
}

.app-demo__pick {
  grid-area: pick;
}

.app-demo__panel {
  grid-area: panel;
}

.app-demo__note {
  grid-area: note;
  color: rgb(225 234 250 / 0.75);
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.app-demo__stage {
  grid-area: phone;
  display: flex;
  justify-content: center;
}

.app-demo__label {
  display: block;
  margin-bottom: 10px;
  color: var(--white);
  font: 700 var(--text-body) / 1.4 var(--font-body);
}

.app-demo fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.app-demo legend {
  padding: 0;
}

.app-demo__trades,
.app-demo__colours {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgb(225 234 250 / 0.35);
  border-radius: 999px;
  background: rgb(7 19 39 / 0.6);
  color: var(--ice);
  font: 700 var(--text-small) / 1.2 var(--font-body);
  cursor: pointer;
}

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

@media (hover: hover) {
  .chip:hover {
    border-color: var(--teal);
  }
}

/* The name box and the colours only work with JavaScript, so they stay hidden until app-preview.js starts */
.app-demo__custom {
  grid-area: custom;
  display: none;
}

.app-demo.is-live .app-demo__custom {
  display: grid;
  gap: 18px;
}

.app-demo__trades-wrap {
  display: none;
}

.app-demo.is-live .app-demo__trades-wrap {
  display: block;
}

.app-demo__input {
  width: 100%;
  max-width: 360px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: 400 17px/1.4 var(--font-ui);
}

.swatch {
  width: 44px;
  height: 44px;
  border: 3px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.swatch[aria-pressed='true'] {
  border-color: var(--white);
  box-shadow: 0 0 0 2px var(--navy) inset;
}

.swatch--teal { background: #19d1c2; }
.swatch--berry { background: #c2416b; }
.swatch--forest { background: #2f8f5b; }
.swatch--sunset { background: #e0742c; }
.swatch--indigo { background: #5b6cd6; }
.swatch--charcoal { background: #3a414d; }

.app-demo__panel h3 {
  color: var(--white);
  font: 400 var(--text-heading-sm) / 1.3 var(--font-display);
}

.app-demo__panel ul {
  margin-top: 16px;
}

.app-demo__panel li {
  position: relative;
  padding-left: 28px;
  font: 400 var(--text-body) / 1.55 var(--font-body);
}

.app-demo__panel li + li {
  margin-top: 10px;
}

.app-demo__panel li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.app-demo__panel .text-link {
  display: inline-block;
  margin-top: 18px;
}

@media (max-width: 767px) {
  .app-demo {
    grid-template-columns: 1fr;
    grid-template-areas:
      'pick'
      'phone'
      'custom'
      'panel'
      'note';
    grid-template-rows: none;
    gap: 24px;
  }

  .app-demo--single {
    grid-template-areas:
      'phone'
      'custom'
      'panel'
      'note';
  }
}

/* The phone itself. Its colours come from data-colour, never a style attribute (the site's CSP blocks those) */
.phone {
  --app: #19d1c2;
  --on-app: #04201e;
  --app-soft: #e3faf8;
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 9 / 18.5;
  padding: 12px;
  border-radius: 46px;
  background: #0b0f17;
  box-shadow:
    0 0 0 2px #2a3242,
    0 30px 70px rgb(0 0 0 / 0.55),
    0 0 80px rgb(25 209 194 / 0.12);
}

.phone[data-colour='berry'] { --app: #c2416b; --on-app: #ffffff; --app-soft: #fbe9ef; }
.phone[data-colour='forest'] { --app: #2f8f5b; --on-app: #ffffff; --app-soft: #e6f4ec; }
.phone[data-colour='sunset'] { --app: #e0742c; --on-app: #2a1100; --app-soft: #fdeee3; }
.phone[data-colour='indigo'] { --app: #5b6cd6; --on-app: #ffffff; --app-soft: #eceefb; }
.phone[data-colour='charcoal'] { --app: #3a414d; --on-app: #ffffff; --app-soft: #eceef1; }

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: #f6f7f9;
  color: #18202c;
  font: 400 14px/1.4 var(--font-ui);
}

.phone__status {
  display: flex;
  justify-content: space-between;
  padding: 12px 22px 4px;
  font: 700 12px/1 var(--font-ui);
}

.app__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
}

.app__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--app);
  color: var(--on-app);
  font: 700 17px/1 var(--font-body);
}

.app__name {
  overflow: hidden;
  font: 700 16px/1.2 var(--font-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app__view {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 12px;
}

.app__hello {
  color: #5a6575;
  font-size: 13px;
}

.app__hero {
  margin-top: 8px;
  padding: 16px;
  border-radius: 18px;
  background: var(--app);
  color: var(--on-app);
}

.app__hero-title {
  font: 700 18px/1.2 var(--font-body);
}

.app__hero-text {
  margin-top: 6px;
  font-size: 13px;
}

.app__button {
  min-height: 40px;
  margin-top: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--on-app);
  color: var(--app);
  font: 700 13px/1 var(--font-ui);
  cursor: pointer;
}

.app__button--wide {
  width: 100%;
  background: var(--app);
  color: var(--on-app);
}

.app__button:disabled {
  opacity: 0.7;
  cursor: default;
}

.app__offer {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--app-soft);
  font: 700 13px/1.35 var(--font-ui);
}

.app__mini {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  font-size: 13px;
}

.app__mini-title {
  font-weight: 700;
}

.app__heading {
  margin: 4px 0 10px;
  font: 700 17px/1.2 var(--font-body);
}

.app__item {
  display: grid;
  grid-template-columns: 1fr auto 40px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.app__item + .app__item {
  margin-top: 8px;
}

.app__item-name {
  font-weight: 700;
}

.app__item-detail {
  color: #5a6575;
  font-size: 13px;
}

.app__add {
  width: 40px;
  height: 40px;
  border: 2px solid var(--app);
  border-radius: 50%;
  background: transparent;
  color: #18202c;
  font: 700 20px/1 var(--font-ui);
  cursor: pointer;
}

.app__add[aria-pressed='true'] {
  background: var(--app);
  color: var(--on-app);
}

.app__basket {
  margin-top: 12px;
  color: #5a6575;
  font-size: 13px;
  text-align: center;
}

.app__done {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--app-soft);
  font: 700 13px/1.35 var(--font-ui);
  text-align: center;
}

.app__stamps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.app__stamp {
  aspect-ratio: 1;
  border: 2px dashed #c3cad4;
  border-radius: 50%;
}

.app__stamp.is-on {
  border: 0;
  background: var(--app);
}

.app__prize {
  margin-top: 12px;
  font: 700 14px/1.35 var(--font-ui);
  text-align: center;
}

.app__gift {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--app);
  border-radius: 14px;
  font-size: 13px;
  text-align: center;
}

.app__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6px 8px 14px;
  border-top: 1px solid #e3e6eb;
  background: var(--white);
}

.app__tab {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #5a6575;
  font: 700 12px/1 var(--font-ui);
  cursor: pointer;
}

/* The drawn staff app on My Work uses spans, not buttons, so they need centring too */
.app__tab,
span.app__button {
  display: inline-grid;
  place-items: center;
}

.app__tab[aria-current] {
  color: #18202c;
  background: var(--app-soft);
}

/* The notification: slides down over the top of the screen, then away */
.app__push {
  position: absolute;
  top: 34px;
  right: 10px;
  left: 10px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  font-size: 12px;
  opacity: 0;
  transform: translateY(-140%);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease;
  pointer-events: none;
}

.app__push strong {
  display: block;
}

.app__push.is-on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .app__push {
    transition: none;
  }
}

/* ---------- "A week with your own app" ---------- */

.week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.week__day {
  padding: 20px 18px 22px;
  border: 1px solid rgb(225 234 250 / 0.16);
  border-radius: 16px;
  background: rgb(7 19 39 / 0.7);
}

.week__when {
  color: var(--teal);
  font: 700 14px/1.3 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.week__day p + p {
  margin-top: 8px;
  font: 400 var(--text-small) / 1.5 var(--font-body);
}

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

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

/* ---------- Steps (How it works) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  counter-reset: step;
}

.step {
  padding: 22px 20px 24px;
  border-radius: 16px;
  background: var(--ice);
  color: var(--navy);
}

.step__number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--ice);
  font: 700 18px/1 var(--font-body);
}

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

.step p {
  margin-top: 8px;
  font: 400 var(--text-small) / 1.5 var(--font-ui);
}

.step__you {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgb(7 19 39 / 0.15);
  font-weight: 700;
}

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

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

/* ---------- What's included, and the terms in plain words ---------- */

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

.included__box {
  padding: 26px 24px 28px;
  border: 1px solid rgb(225 234 250 / 0.16);
  border-radius: 18px;
  background: rgb(7 19 39 / 0.75);
}

.included__box h3 {
  color: var(--white);
  font: 400 var(--text-heading-sm) / 1.3 var(--font-display);
}

.included__box ul {
  margin-top: 16px;
}

.included__box li {
  position: relative;
  padding-left: 30px;
  font: 400 var(--text-body) / 1.55 var(--font-body);
}

.included__box li + li {
  margin-top: 10px;
}

.included__box li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

.included__box--terms li::before {
  content: '·';
  left: 8px;
  font-size: 1.4em;
  line-height: 1;
}

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

/* ---------- Longer FAQs: questions that open ---------- */

.qa {
  max-width: 860px;
  margin: 32px auto 0;
}

.qa details {
  border-bottom: 1px solid rgb(225 234 250 / 0.18);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  color: var(--white);
  font: 700 var(--text-body) / 1.4 var(--font-body);
  list-style: none;
  cursor: pointer;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: '+';
  flex: none;
  color: var(--teal);
  font: 400 26px/1 var(--font-ui);
}

.qa details[open] summary::after {
  content: '–';
}

.qa details p {
  padding-bottom: 18px;
  font: 400 var(--text-body) / 1.6 var(--font-body);
}

.qa details p + p {
  margin-top: -6px;
}

/* ---------- The delivery-app commission calculator (commission.js, on /apps/takeaways) ---------- */

.calc {
  max-width: 760px;
  margin: 36px auto 0;
  padding: 28px 24px 30px;
  border-radius: 18px;
  background: var(--ice);
  color: var(--navy);
}

.calc__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.calc label {
  display: block;
  font: 700 var(--text-small) / 1.4 var(--font-ui);
}

.calc__hint {
  margin-top: 4px;
  color: #3d4a5e;
  font: 400 14px/1.4 var(--font-ui);
}

.calc input {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid #9aa6b8;
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: 400 18px/1.4 var(--font-ui);
}

.calc__result {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgb(7 19 39 / 0.15);
  font: 400 var(--text-body) / 1.55 var(--font-body);
}

.calc__result strong {
  font: 700 var(--text-body-lg) / 1.4 var(--font-body);
}

.calc__small {
  margin-top: 12px;
  color: #3d4a5e;
  font: 400 14px/1.5 var(--font-ui);
}

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

/* ---------- How I work: the AI team behind Autora Systems ---------- */

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

.team-list__item {
  padding: 20px 18px 22px;
  border: 1px solid rgb(225 234 250 / 0.16);
  border-radius: 16px;
  background: rgb(7 19 39 / 0.75);
}

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

.team-list__item p {
  margin-top: 8px;
  font: 400 var(--text-small) / 1.5 var(--font-body);
}

@media (max-width: 1023px) {
  .team-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .team-list {
    grid-template-columns: 1fr;
  }
}

/* The phone's app area, between the status bar and the bottom of the screen */
.phone__app {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.app__item--plain {
  grid-template-columns: 48px 1fr;
}

.app__items,
.steps,
.week {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.hero__terms--centre {
  margin-inline: auto;
  text-align: center;
}

/* The drawn staff app on My Work: one phone, centred */
.shots__row--phone {
  display: flex;
  justify-content: center;
}