:root {
  --ink: #0b1a33;
  --paper: #f5f6fa;
  --card: #ffffff;
  --line: #e4e6ec;
  --chip: #eef0f5;
  --quiet: #4a4c56;
  --accent: #c2410c;
  --accent-ink: #ffffff;
  --tint: #fff1e8;
  /* One family for the page, the try-it views included. */
  --display: "Outfit", system-ui, sans-serif;
  --text: "Outfit", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Links to a spot on the page (the nav's Pricing) glide there; the scroll-margin-top
   rules keep each target clear of the sticky header. The footer's colour on html is what
   overscrolling past either end shows, so the dark footer has no light band under it;
   body carries the page's own background. */
html {
  background: var(--ink);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem / 1.6 var(--text);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

a {
  color: inherit;
}

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

/* The header stays at the top. Where the browser links animations to scrolling, it
   tightens into a floating white pill over the first 8rem of scroll and opens up again
   at the top of the page; elsewhere it simply stays put. */
.bar {
  position: sticky;
  top: var(--sitr-bar-height, 0px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  /* The name, the links and the button text share one baseline. */
  align-items: baseline;
  gap: 0.75rem 2rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.125rem clamp(1rem, 4vw, 2.5rem);
  border-radius: 1.25rem;
}

@supports (animation-timeline: scroll()) {
  .bar {
    animation: bar-collapse linear both;
    animation-timeline: scroll(root);
    animation-range: 0 8rem;
  }
}

@keyframes bar-collapse {
  from {
    max-width: 76rem;
    top: var(--sitr-bar-height, 0px);
    padding: 1.125rem clamp(1rem, 4vw, 2.5rem);
    background: rgb(255 255 255 / 0);
    box-shadow: 0 0 0 rgb(11 26 51 / 0);
  }
  to {
    /* As wide as the page's content, so its edges line up with the sections below. */
    max-width: calc(min(76rem, 100%) - 2 * clamp(1rem, 4vw, 2.5rem));
    top: calc(var(--sitr-bar-height, 0px) + 0.625rem);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background: var(--bar-glass, rgb(255 255 255 / 0.72));
    box-shadow:
      0 12px 32px -14px rgb(11 26 51 / 0.3),
      0 1px 2px rgb(11 26 51 / 0.06);
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    backdrop-filter: blur(8px) saturate(1.4);
  }
}

/* Inline, not flex: then the brand's baseline is its name's, not the logo's bottom edge. */
.brand {
  display: inline-block;
  white-space: nowrap;
  font: 800 1.3rem var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* The Sitebend logo: ink and the site's orange, fixed, so a theme change leaves it alone. */
.mark {
  display: inline-block;
  vertical-align: middle;
  width: 2rem;
  height: 2rem;
  margin-right: 0.6rem;
}

.mark svg {
  width: 100%;
  height: 100%;
}

/* The wordmark, as in brand/: "Site" in the text colour, "bend" in the logo's orange,
   rising at the end. 0.85em high draws "Site" at the font size. */
.wordmark {
  height: 0.85em;
  width: auto;
  vertical-align: middle;
}

.nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.nav a {
  text-decoration: none;
  color: #3d3f48;
}

/* Header links: an accent line grows under the link on hover and keyboard focus. */
.nav a,
.signin {
  padding-bottom: 0.15rem;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 0 2px;
  transition:
    background-size 0.2s ease,
    color 0.2s ease;
}
.nav a:hover,
.nav a:focus-visible,
.signin:hover,
.signin:focus-visible {
  color: var(--ink);
  background-size: 100% 2px;
}
@media (prefers-reduced-motion: reduce) {
  .nav a,
  .signin {
    transition: none;
  }
}

.bar-end {
  display: flex;
  align-items: center;
  align-items: baseline;
  gap: 1.25rem;
  margin-left: auto;
  font-size: 0.95rem;
}

.signin {
  text-decoration: none;
  font-weight: 500;
}

/* "Se connecter" and "Créer un site" stay on one line. */
.bar-end a {
  white-space: nowrap;
}

.button.bar-cta {
  padding: 0.7rem 1.2rem;
  border-radius: 0.875rem;
  background: var(--ink);
  color: #ffffff;
  font-size: 0.95rem;
}

/* The header's button stays put on hover and turns the accent colour instead. */
.button.bar-cta {
  transition: background-color 0.2s ease;
}
.button.bar-cta:hover,
.button.bar-cta:focus-visible {
  transform: none;
  background: var(--accent);
}

/* The language menu: a pill with the current language, a card with all of them. */
.lang-menu {
  position: relative;
}

/* Baseline from the "EN", icons centred beside it. */
.lang-menu summary {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem 0.45rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  list-style: none;
  user-select: none;
}

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

.lang-menu summary:hover,
.lang-menu[open] summary {
  background: var(--chip);
}

.lang-menu summary svg {
  align-self: center;
  width: 1rem;
  height: 1rem;
}

.lang-menu .chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--quiet);
  transition: transform 0.15s;
}

.lang-menu[open] .chevron {
  transform: rotate(180deg);
}

.lang-menu nav {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.5rem);
  left: 0;
  display: grid;
  min-width: 11rem;
  padding: 0.375rem;
  border-radius: 1rem;
  background: var(--card);
  box-shadow:
    0 18px 40px -16px rgb(11 26 51 / 0.3),
    0 0 0 1px rgb(11 26 51 / 0.06);
}

.lang-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.7rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.lang-menu nav a:hover {
  background: var(--chip);
}

.lang-menu nav svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  visibility: hidden;
}

.lang-menu nav a[aria-current] svg {
  visibility: visible;
}

/* The hamburger: below 52rem the French and Dutch headers no longer fit on one line,
   so the links, Sign in and the languages fold into a card hung from its right edge. */
/* Icon only, no text to share a baseline with. */
.menu {
  position: relative;
  display: none;
  align-self: center;
}

.menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.875rem;
  cursor: pointer;
  list-style: none;
}

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

.menu summary:hover,
.menu[open] summary {
  background: var(--chip);
}

.menu summary svg {
  width: 1.375rem;
  height: 1.375rem;
}

.menu .menu-close,
.menu[open] .menu-open {
  display: none;
}

.menu[open] .menu-close {
  display: block;
}

.menu-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(17rem, calc(100vw - 2rem));
  padding: 0.375rem;
  border-radius: 1.125rem;
  background: var(--card);
  box-shadow:
    0 18px 40px -16px rgb(11 26 51 / 0.3),
    0 0 0 1px rgb(11 26 51 / 0.06);
}

.menu-panel nav {
  display: grid;
}

.menu-panel a {
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.menu-panel a:hover {
  background: var(--chip);
}

.menu-panel .menu-langs {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgb(11 26 51 / 0.08);
}

.menu-langs a {
  padding: 0.55rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
}

.menu-langs a[aria-current] {
  background: var(--chip);
}

@media (max-width: 52rem) {
  .bar {
    flex-wrap: nowrap;
  }

  .nav,
  .signin,
  .lang-menu {
    display: none;
  }

  .menu {
    display: block;
  }

  .bar-end {
    gap: 0.5rem;
  }
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(2.75rem, 6.6vw, 5.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* The hero's key word, underlined as if by hand; the line draws itself in once. */
.hero h1 .hl {
  position: relative;
  white-space: nowrap;
  color: var(--accent);
}
.hero h1 .hl::after {
  content: "";
  position: absolute;
  left: -0.03em;
  right: -0.03em;
  bottom: -0.12em;
  height: 0.24em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17C46 9 120 5 196 10' fill='none' stroke='%23fdba74' stroke-width='7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
  pointer-events: none;
  animation: hl-draw 0.7s 0.4s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}
@keyframes hl-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hl::after {
    animation: none;
  }
}

.lead {
  max-width: 34rem;
  margin: 1.5rem 0 2rem;
  font-size: clamp(1.125rem, 1.8vw, 1.25rem);
  color: var(--quiet);
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.button {
  display: inline-block;
  padding: 1rem 1.6rem;
  border-radius: 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s;
}

.button:hover {
  transform: translateY(-2px);
}

.button.quiet {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(11 26 51 / 8%);
}

.button.invert {
  background: var(--paper);
  color: var(--ink);
}

.link {
  font-weight: 500;
  text-underline-offset: 0.25em;
}

/* The hero's demo: a site on a wide card, and a copy of the input floating over its bottom
   edge, where wishes are typed and the site changes after each one. One 22.5 s loop, CSS
   only: five wishes, 4.5 s apart (typed in 1.6 s, sent at 1.8 s, the site changes at
   2.2 s). The fifth reverts the site to where it started, so the loop closes without a
   jump. Every animation shares the loop and starts with the page, so they stay in step.
   Sizes are in --u, so the whole card scales with the window. */
.stage {
  --loop: 22.5s;
  --u: clamp(0.8rem, 1.55vw, 1.35rem);
  position: relative;
  /* The hero's full content width: as wide as the header once it has shrunk. */
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: calc(1.65 * var(--u));
  text-align: left;
}

.mini {
  overflow: hidden;
  border-radius: calc(1.5 * var(--u));
  background: var(--card);
  box-shadow: 0 30px 70px -30px rgb(11 26 51 / 30%);
}

.mini-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: calc(23 * var(--u));
  overflow: hidden;
  padding: calc(1.5 * var(--u)) calc(1.75 * var(--u)) calc(3.25 * var(--u));
  animation: demo-page var(--loop) infinite;
}

/* Fixed height: the parts keep their size and the page clips below them. */
.mini-page > * {
  flex: none;
}

/* The light that sweeps over the page while a wish is being carried out. */
.mini-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 45%) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: demo-sweep var(--loop) infinite;
}

.mini-nav {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: calc(0.9 * var(--u));
  height: calc(1.6 * var(--u));
  margin-bottom: calc(0.6 * var(--u));
  font-size: calc(0.68 * var(--u));
}

.mini-nav > span:not(.mini-book) {
  opacity: 0.75;
}

.mini-nav > .mini-name {
  margin-right: auto;
  font-weight: 700;
  opacity: 1;
}

/* The grey shows until a photo has loaded. */
.mini-dishes img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: rgb(127 127 127 / 18%);
}

.mini-page b {
  width: calc(2.5 * var(--u));
  height: calc(0.35 * var(--u));
  margin-bottom: calc(0.6 * var(--u));
  border-radius: calc(1 * var(--u));
  animation: demo-accent var(--loop) infinite;
}

.mini-eyebrow {
  margin-bottom: calc(0.3 * var(--u));
  font-size: calc(0.7 * var(--u));
  font-style: italic;
  opacity: 0.75;
}

.mini-title {
  line-height: 1.05;
  animation: demo-title var(--loop) infinite;
}

.mini-hours {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: calc(0.8 * var(--u));
  font-weight: 600;
  letter-spacing: 0.02em;
  animation: demo-hours var(--loop) infinite;
}

.mini-intro {
  max-width: calc(26 * var(--u));
  margin-top: calc(0.8 * var(--u));
  font-size: calc(0.78 * var(--u));
  line-height: 1.45;
  opacity: 0.8;
}

/* Three dishes off the menu: a photo, the name, the price. */
.mini-dishes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(0.75 * var(--u));
  width: 100%;
  margin-top: calc(1 * var(--u));
}

.mini-dishes > span {
  display: flex;
  flex-direction: column;
  gap: calc(0.2 * var(--u));
  font-size: calc(0.7 * var(--u));
  font-weight: 600;
  line-height: 1.25;
}

.mini-dishes img {
  height: calc(5.5 * var(--u));
  margin-bottom: calc(0.25 * var(--u));
  border-radius: calc(0.6 * var(--u));
}

/* On a phone the intro wraps to more lines, so the photos give up some height. */
@media (max-width: 40rem) {
  .mini-dishes img {
    height: calc(4 * var(--u));
  }
}

.mini-dishes small {
  font-size: calc(0.68 * var(--u));
  font-weight: 400;
  opacity: 0.7;
}

/* Wish 4's button lands in the top bar, where a real site keeps it. */
.mini-book {
  max-width: 0;
  margin-left: -0.9rem;
  overflow: hidden;
  padding: calc(0.35 * var(--u)) 0;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.6);
  animation: demo-book var(--loop) infinite;
}

/* A copy of the dock, over the card's bottom edge. */
.mini-dock {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--u));
  width: min(calc(30 * var(--u)), calc(100% - calc(2 * var(--u))));
  padding: calc(0.4 * var(--u)) calc(0.4 * var(--u)) calc(0.4 * var(--u)) calc(1.1 * var(--u));
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  box-shadow:
    0 24px 50px -18px rgb(11 26 51 / 40%),
    0 1px 2px rgb(11 26 51 / 8%);
  color: var(--ink);
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.mini-field {
  position: relative;
  flex: 1;
  min-width: 0;
  height: calc(2.5 * var(--u));
}

.mini-field span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-size: calc(0.875 * var(--u));
  font-weight: 500;
  line-height: calc(2.4 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  animation: demo-type var(--loop) infinite backwards;
}

.mini-field span:nth-child(2) {
  animation-delay: 4.5s;
}

.mini-field span:nth-child(3) {
  animation-delay: 9s;
}

.mini-field span:nth-child(4) {
  animation-delay: 13.5s;
}

.mini-field span:nth-child(5) {
  animation-delay: 18s;
}

.mini-send {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(2.5 * var(--u));
  height: calc(2.5 * var(--u));
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  animation: demo-send var(--loop) infinite;
}

.mini-send svg {
  width: calc(1.125 * var(--u));
  height: calc(1.125 * var(--u));
}

/* Timings in seconds of the 22.5 s loop: wish n is typed from 4.5·(n−1) s, sent 1.8 s
   later, and the site changes 0.4 s after that. Typing runs 0–1.6 s of each wish's turn. */
@keyframes demo-type {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    animation-timing-function: steps(22, end);
  }
  7.11% {
    clip-path: inset(0 0 0 0);
  }
  8% {
    opacity: 1;
  }
  8.89%,
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes demo-send {
  0%,
  7.56%,
  8.89%,
  27.56%,
  28.89%,
  47.56%,
  48.89%,
  67.56%,
  68.89%,
  87.56%,
  88.89%,
  100% {
    filter: none;
    transform: none;
  }
  8%,
  28%,
  48%,
  68%,
  88% {
    filter: brightness(1.2);
    transform: scale(0.9);
  }
}

@keyframes demo-sweep {
  0%,
  9.78%,
  12.04%,
  29.78%,
  32.04%,
  49.78%,
  52.04%,
  69.78%,
  72.04%,
  89.78%,
  92.04%,
  100% {
    transform: translateX(-100%);
  }
  12%,
  32%,
  52%,
  72%,
  92% {
    transform: translateX(100%);
  }
}

/* Plain, then warm (wish 1), dark green (wish 3), and plain again (wish 5). */
@keyframes demo-page {
  0%,
  9.78%,
  91.11%,
  100% {
    background: #ffffff;
    color: #2a2a2a;
  }
  11.11%,
  49.78% {
    background: #f7ead9;
    color: #4a2f22;
  }
  51.11%,
  89.78% {
    background: #1f3d36;
    color: #f4ecd8;
  }
}

@keyframes demo-accent {
  0%,
  9.78%,
  91.11%,
  100% {
    background: #c9c9c9;
  }
  11.11%,
  49.78% {
    background: #c8553d;
  }
  51.11%,
  89.78% {
    background: #e3b34a;
  }
}

/* A system sans at first, a soft serif after wish 1, bigger after wish 3, back after wish 5. */
@keyframes demo-title {
  0%,
  9.73%,
  91.6%,
  100% {
    font: 600 calc(1.4 * var(--u)) / 1.05 var(--text);
  }
  9.78%,
  49.78% {
    font:
      700 calc(1.6 * var(--u)) / 1.05 Georgia,
      "Times New Roman",
      serif;
  }
  51.56%,
  89.78% {
    font:
      700 calc(2.3 * var(--u)) / 1.05 Georgia,
      "Times New Roman",
      serif;
  }
  91.56% {
    font:
      700 calc(1.4 * var(--u)) / 1.05 Georgia,
      "Times New Roman",
      serif;
  }
}

/* The opening hours arrive with wish 2 and leave with wish 5. */
@keyframes demo-hours {
  0%,
  29.78%,
  91.56%,
  100% {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
  }
  31.56%,
  89.78% {
    max-height: calc(2 * var(--u));
    margin-top: calc(0.6 * var(--u));
    opacity: 0.85;
  }
}

/* The booking button arrives with wish 4 and leaves with wish 5. It takes no room in the
   bar until then. */
@keyframes demo-book {
  0%,
  69.33% {
    max-width: 0;
    margin-left: -0.9rem;
    padding-inline: 0;
    background: #e3b34a;
    color: #1f3d36;
    opacity: 0;
    transform: scale(0.6);
  }
  69.78% {
    max-width: calc(8 * var(--u));
    margin-left: 0;
    padding-inline: calc(0.75 * var(--u));
    opacity: 0;
    transform: scale(0.6);
  }
  70.89% {
    opacity: 1;
    transform: scale(1.08);
  }
  71.78%,
  89.78% {
    max-width: calc(8 * var(--u));
    margin-left: 0;
    padding-inline: calc(0.75 * var(--u));
    background: #e3b34a;
    color: #1f3d36;
    opacity: 1;
    transform: none;
  }
  90.67% {
    max-width: calc(8 * var(--u));
    margin-left: 0;
    padding-inline: calc(0.75 * var(--u));
    opacity: 0;
  }
  91.78%,
  100% {
    max-width: 0;
    margin-left: -0.9rem;
    padding-inline: 0;
    opacity: 0;
    transform: scale(0.6);
  }
}

/* Without motion: the finished site, and the wish that finished it in the input. */
@media (prefers-reduced-motion: reduce) {
  .mini-page,
  .mini-page::after,
  .mini-page b,
  .mini-title,
  .mini-hours,
  .mini-book,
  .mini-field span,
  .mini-send {
    animation: none;
  }

  .mini-page {
    background: #1f3d36;
    color: #f4ecd8;
  }

  .mini-page::after {
    display: none;
  }

  .mini-page b {
    background: #e3b34a;
  }

  .mini-title {
    font:
      700 calc(2.3 * var(--u)) / 1.05 Georgia,
      "Times New Roman",
      serif;
  }

  .mini-hours {
    max-height: calc(2 * var(--u));
    margin-top: calc(0.6 * var(--u));
    opacity: 0.85;
  }

  .mini-book {
    max-width: calc(8 * var(--u));
    margin-left: 0;
    padding-inline: calc(0.75 * var(--u));
    background: #e3b34a;
    color: #1f3d36;
    opacity: 1;
    transform: none;
  }

  .mini-field span:nth-child(4) {
    opacity: 1;
  }
}

.section {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6.5rem) clamp(1rem, 4vw, 2.5rem);
}

.section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  text-align: center;
  text-wrap: balance;
}

/* The white band under the hero: the top edge rises to the right, the bottom edge falls. */
.band {
  --tilt: clamp(1.25rem, 3.5vw, 3.5rem);
  background: var(--card);
  clip-path: polygon(0 var(--tilt), 100% 0, 100% 100%, 0 calc(100% - var(--tilt)));
}

.band > .section {
  padding-top: calc(clamp(4rem, 8vw, 6.5rem) + var(--tilt));
  padding-bottom: calc(clamp(4rem, 8vw, 6.5rem) + var(--tilt));
}

.steps ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.25rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem;
  border-radius: 1.75rem;
  background: var(--paper);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.5rem;
  border-radius: 1.125rem;
  background: var(--accent);
  color: var(--accent-ink);
  font: 800 1.375rem var(--display);
}

.steps h3,
.features h3 {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.features h3 {
  margin-top: 0.25rem;
  font-size: 1.1875rem;
}

.steps p,
.features p,
.section-head p {
  margin: 0;
  color: var(--quiet);
}

.features p {
  margin-top: 0.375rem;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 3rem 3.5rem;
  margin-top: 3.5rem;
}

.grid > div {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
}

.icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.125rem;
  background: var(--tint);
  color: var(--accent);
}

.icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Pricing: three white cards on the page's grey, the one most people need ringed in the
   accent. */
.pricing {
  padding-top: 0;
  /* The nav's "#pricing" lands with the title clear of the sticky header. */
  scroll-margin-top: calc(var(--sitr-bar-height, 0px) + 7rem);
}

/* Monthly or yearly: a pill with two radios. The page shows the per-month or the
   per-year twin of each price and design-change line, by which one is checked. */
.billing {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  padding: 0.3rem;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
}

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

.billing input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.billing label {
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  color: var(--quiet);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.billing input:checked + label {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(11 26 51 / 0.12);
}

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

.billing-save {
  margin-left: 0.3rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.pricing .billing-note {
  max-width: 34rem;
  margin: 1rem auto 0;
  color: var(--quiet);
  font-size: 0.95rem;
  text-align: center;
  text-wrap: balance;
}

.pricing .per-year {
  display: none;
}
.pricing:has(#billing-year:checked) .per-month {
  display: none;
}
.pricing:has(#billing-year:checked) .per-year {
  display: revert;
}

/* "a year (€8.33 a month)" is too long to sit beside the price: it goes under it. */
.plan-price.per-year span {
  display: block;
  margin-top: 0.25rem;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.25rem;
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 1.75rem;
  background: var(--card);
  box-shadow: 0 1px 2px rgb(11 26 51 / 0.05);
}

.plan.featured {
  box-shadow:
    0 0 0 2px var(--accent),
    0 24px 50px -28px rgb(194 65 12 / 0.45);
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2rem;
}

.plan h3 {
  margin: 0;
  font-size: 1.375rem;
}

.plan-badge {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.plan .plan-text {
  margin: 0.375rem 0 0;
  color: var(--quiet);
}

.plan-price {
  margin: 1.5rem 0 0;
  color: var(--quiet);
}

.plan-price b {
  margin-right: 0.25rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.plan .plan-trial {
  margin: 0.25rem 0 0;
  color: var(--accent);
  font-weight: 600;
}

.plan ul {
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

/* A check mark in the accent before every line. */
.plan li {
  position: relative;
  padding-left: 1.75rem;
}

.plan li::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0.15rem;
  width: 0.75rem;
  height: 0.4rem;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.plan .button {
  margin-top: auto;
  justify-content: center;
}

.pricing .pricing-note {
  max-width: 40rem;
  margin: 2rem auto 0;
  color: var(--quiet);
  font-size: 0.9rem;
  text-align: center;
  text-wrap: balance;
}

.pricing .pricing-note + .pricing-note {
  margin-top: 0.5rem;
}

.closing {
  padding-top: 0;
  padding-bottom: 1.25rem;
}

.closing h2 {
  max-width: 16ch;
  margin: 0 auto;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* The footer: dark, edge to edge, the page's last word in large type. */
.footer {
  background: var(--ink);
  color: rgb(245 246 250 / 0.6);
  font-size: 0.9rem;
}

.footer-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem);
}

.footer p {
  margin: 0;
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.footer-tagline {
  max-width: 15ch;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.footer-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
}

.footer-nav a {
  color: var(--paper);
  text-decoration: none;
  opacity: 0.75;
}

.footer-nav a:hover {
  opacity: 1;
}

/* The fine print, with the privacy link at its far end. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgb(245 246 250 / 0.12);
}

.footer-bottom a {
  color: inherit;
}

.footer-bottom a:hover {
  color: var(--paper);
}

.prose {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem);
}

.prose h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.pagination {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 52rem) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Try it": the views a visitor asks for, and the input they ask in. A view names one of
   the page's colour schemes and try.js sets the --try-* variables to this theme's own
   (--paper, --ink, --accent, --display, ...), so a view never brings a look of its own. */
.try-view {
  background: var(--try-bg);
  color: var(--try-ink);
  font-family: var(--try-body);
  scroll-margin-top: var(--sitr-bar-height, 0px);
}

.try-new {
  animation: try-in 0.5s ease-out;
}

@keyframes try-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .try-new {
    animation: none;
  }
}

.try-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem);
}

.try-copy {
  max-width: 48rem;
}

.try-view h2,
.try-view h3 {
  font-family: var(--try-head);
  font-weight: 700;
}

.try-view h2 {
  overflow-wrap: anywhere;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
}

.try-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.try-body {
  margin: 1.25rem 0 0;
  max-width: 38rem;
  font-size: 1.1875rem;
  line-height: 1.5;
}

/* The page's own .button, in the view's scheme. */
.try-cta {
  display: inline-block;
  padding: 1rem 1.6rem;
  border-radius: 1rem;
  background: var(--try-accent);
  color: var(--try-accent-ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s;
}

.try-cta:hover {
  transform: translateY(-2px);
}

.try-items {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.try-items h3 {
  font-size: 1.375rem;
  line-height: 1.15;
}

.try-items p {
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.try-cards .try-items {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.try-cards .try-items li {
  padding: 1.25rem;
  border: 2px solid var(--try-accent);
  border-radius: 1.125rem;
}

.try-steps .try-items {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  counter-reset: try;
}

.try-steps .try-items li {
  counter-increment: try;
}

.try-steps .try-items li::before {
  content: counter(try);
  display: block;
  margin-bottom: 0.5rem;
  color: var(--try-ink);
  font: 700 clamp(2.5rem, 5vw, 3.5rem) / 1 var(--try-head);
}

.try-list .try-items {
  gap: 0;
}

.try-list .try-items li {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.25rem 2rem;
  padding: 1rem 0;
  border-top: 2px solid var(--try-accent);
}

.try-list .try-items p {
  margin: 0;
}

.try-chat .try-items {
  max-width: 44rem;
}

.try-chat .try-items li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.try-chat .try-items h3,
.try-chat .try-items p {
  max-width: 85%;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font: 400 1.0625rem / 1.4 var(--try-body);
  letter-spacing: 0;
}

.try-chat .try-items h3 {
  align-self: flex-end;
  background: var(--try-accent);
  color: var(--try-accent-ink);
}

.try-chat .try-items p {
  align-self: flex-start;
  border: 2px solid var(--try-accent);
}

.try-poster {
  background: var(--try-accent);
  color: var(--try-accent-ink);
}

.try-poster h2 {
  max-width: 100%;
  font-size: clamp(3rem, 10vw, 8.5rem);
  line-height: 0.95;
}

.try-poster .try-copy {
  max-width: none;
}

.try-poster .try-cta {
  background: var(--try-accent-ink);
  color: var(--try-accent);
}

.try-quote h2 {
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.15;
}

.try-statement {
  text-align: center;
}

.try-statement .try-inner {
  align-items: center;
}

.try-statement .try-body {
  margin-inline: auto;
}

@media (min-width: 52rem) {
  .try-split .try-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 3rem;
    max-width: none;
    width: 100%;
  }

  .try-split .try-eyebrow {
    grid-column: 1 / -1;
    margin: 0;
  }

  .try-split .try-body {
    margin: 0;
  }
}

/* The input, under the closing line and after the last view: a soft panel with the
   white pill in it. Without the script there is nothing to send, so it stays hidden. */
.try-dock {
  display: none;
  width: min(48rem, calc(100% - 2rem));
  margin: 1rem auto clamp(4rem, 8vw, 6rem);
  border: 1px solid rgb(11 26 51 / 0.06);
  /* The input's radius (half its 3rem) plus the panel's padding: the corners run parallel. */
  border-radius: 2.25rem;
  background: var(--paper);
  box-shadow:
    0 24px 60px -24px rgb(11 26 51 / 0.3),
    0 1px 2px rgb(11 26 51 / 0.06);
  color: var(--ink);
}

.try-ready .try-dock {
  display: block;
}

.try-dock-inner {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem;
}

.try-dock form[hidden],
.try-dock [hidden] {
  display: none;
}

/* The input and the examples explain themselves; the label is there for screen readers. */
.try-dock label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* One white pill holds the picture button, the input, the microphone and the arrow. */
.try-field {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 1px 2px rgb(11 26 51 / 0.08);
}

.try-field:focus-within {
  box-shadow: 0 0 0 2px var(--accent);
}

.try-box {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  min-height: 2.75rem;
}

.try-box input {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.375rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 1.0625rem var(--text);
  outline: none;
}

.try-box input::placeholder {
  color: rgb(74 76 86 / 0.8);
}

.try-tool {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #3d3f48;
  cursor: pointer;
}

.try-tool[data-try-add] {
  width: 2.75rem;
  height: 2.75rem;
  background: var(--chip);
}

.try-tool:hover {
  background: var(--chip);
  color: var(--ink);
}

.try-tool:disabled {
  opacity: 0.5;
  cursor: default;
}

.try-tool svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The added picture takes the place of the +; clicking it takes the picture away. */
.try-thumb {
  position: relative;
}

.try-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.try-thumb::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(11 26 51 / 0.55);
  color: #fffdf8;
  font: 400 1.25rem / 1 var(--text);
  opacity: 0;
}

.try-thumb:hover::after,
.try-thumb:focus-visible::after {
  opacity: 1;
}

/* While it listens, the microphone glows in the accent colour. */
.try-listening .try-mic {
  background: var(--accent);
  color: var(--accent-ink);
  animation: try-listen 1.2s ease-in-out infinite alternate;
}

@keyframes try-listen {
  to {
    box-shadow: 0 0 0 0.375rem rgb(194 65 12 / 0.25);
  }
}

.try-field > button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  padding: 0;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

/* A phone keyboard has its own microphone, and the placeholder needs the room. */
@media (max-width: 40rem) {
  .try-mic {
    display: none;
  }

  .try-under {
    padding-inline: 0.875rem;
  }
}

/* The page's buttons lift on hover; this one stays put inside the pill. */
.try-field > button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.try-field > button:hover {
  transform: none;
  filter: brightness(1.08);
}

.try-field > button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* A picture the visitor added, under the section it inspired. */
.try-picture {
  margin: 2rem 0 0;
}

.try-picture img {
  display: block;
  width: 100%;
  max-width: 40rem;
  max-height: 26rem;
  object-fit: cover;
  border-radius: 0.75rem;
}

.try-under {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1rem;
}

/* The examples are plain links, centred under the input. */
.try-chips {
  display: flex;
  flex: 1;
  gap: 1.25rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Auto margins centre the row and still scroll from the start once it overflows,
   where justify-content: center would cut off the first link. */
.try-chips > :first-child {
  margin-left: auto;
}

.try-chips > :last-child {
  margin-right: auto;
}

.try-chips button,
.try-restart {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--quiet);
  cursor: pointer;
  font: 400 0.875rem var(--text);
  white-space: nowrap;
}

.try-chips button {
  text-decoration: underline;
  text-decoration-color: rgb(11 26 51 / 0.25);
  text-underline-offset: 0.25em;
}

.try-chips button:hover,
.try-restart:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.try-chips button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Start over sits apart from the examples, on the right, with an icon instead of a line. */
.try-restart {
  margin-left: auto;
  padding-inline: 0.5rem;
  color: var(--quiet);
}

.try-restart svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 40rem) {
  .try-restart {
    width: 2.25rem;
    padding: 0;
    justify-content: center;
  }

  .try-restart span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

.try-status {
  margin: 0;
  padding-inline: 0.5rem;
  color: var(--quiet);
  font-size: 0.875rem;
}

.try-status:empty {
  display: none;
}

.try-limit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  font: 700 1.125rem / 1.25 var(--display);
}

/* The fine print's links: why Sitebend, privacy. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* Example sites: the page widens for a grid of screenshots; the text keeps its measure. */
.prose:has(.examples) {
  max-width: 76rem;
}
.prose:has(.examples) > h1,
.prose:has(.examples) > div > p {
  max-width: 42rem;
}
.examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 2.5rem 2rem;
  margin-top: 2.5rem;
}
.examples figure {
  margin: 0;
}
.examples img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgb(11 26 51 / 0.06);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.examples a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgb(11 26 51 / 0.12);
}
.examples figcaption {
  margin-top: 0.9rem;
  color: var(--quiet);
  line-height: 1.45;
}
.examples figcaption a {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}
.examples figcaption a:hover {
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .examples img {
    transition: none;
  }
}

/* "Try it" can turn the whole page dark: try.js sets data-try-mode="dark" on <html> and
   swaps the colour variables. These are the few rules that name a colour of their own. */
[data-try-mode="dark"] .bar {
  --bar-glass: rgb(21 32 57 / 0.72);
}
[data-try-mode="dark"] .nav a,
[data-try-mode="dark"] .try-tool {
  color: var(--quiet);
}
[data-try-mode="dark"] .button.bar-cta {
  color: var(--paper);
}
[data-try-mode="dark"] .try-box input::placeholder {
  color: rgb(170 178 195 / 0.8);
}