/*
 * Kite: a cheerful, friendly theme for language schools and tutors of every age, after-school clubs, children's dance,
 * music and art classes, kids' parties and activities, family event hosts, kids' sports clubs and pet groomers. Things look like
 * stickers: a dark outline (the text colour, --kite-ink) and a solid offset shadow, in round, chunky shapes. Headings are
 * heavy and a word in them can carry a hand-drawn squiggle; little stars, dots and a doodled arrow add play.
 *
 * This file draws Kite's own frame (header, phone menu, footer, breadcrumbs, the 404 page, the split hero, the article
 * body and the divider). Every other block comes from the Theme Kit, styled by kit-theme.css. Colours come from the
 * palette (palettes/*.css): --background, --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink,
 * --on-accent, --on-primary, --text-primary, --text-secondary, --border, and Kite's own two bright colours --kite-pop
 * and --kite-fizz (text on them, as on the accent, is --on-accent). Plain CSS, no build step. Starts at 320px wide.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
  --kite-ink: var(--text-primary, #231942);
  --kite-gutter: clamp(1.25rem, 4vw, 3rem);
  --kite-width: 74rem;
  /* The frame (header, footer) spans the width the Theme Kit gives its widest sections, so it lines up with a hero. */
  --kite-width-wide: 90rem;
  /* How far the floating header, footer and colour bands sit in from the window's edges. */
  --kite-inset: clamp(0.5rem, 1.4vw, 1.25rem);
  --kite-header-height: 4.25rem;
  --kite-header-offset: 0.75rem;
  --kite-radius: 1.5rem;
  --kite-radius-large: clamp(1.5rem, 3.5vw, 2.5rem);
  --kite-line: var(--border, color-mix(in srgb, var(--kite-ink) 14%, transparent));
  --kite-line-strong: color-mix(in srgb, var(--kite-ink) 26%, transparent);
  --kite-outline: 2px solid var(--kite-ink);
  --kite-lift: 4px 4px 0 var(--kite-ink);
  --kite-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kite-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --kite-speed: 220ms;
  /* Drawn shapes, used as masks so they take the colour around them. */
  --kite-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kite-squiggle-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q 6 -1 12 4 T 24 4' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --kite-arrow-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 34C50 14 32 6 8 12'/%3E%3Cpath d='M16 4L7 12l10 6'/%3E%3C/g%3E%3C/svg%3E");
}

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

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

/* Whatever is scrolled into view (an anchor, a field reached with the keyboard) stops clear of the sticky header and of
   the bottom edge instead of sitting under or against them. */
html {
  scroll-padding-top: calc(var(--kite-header-height) + var(--kite-header-offset) + 1.5rem);
  scroll-padding-bottom: 1.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #fff8ec);
  color: var(--text-primary, #231942);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: var(--kite-fizz, #ffd447);
  color: var(--on-accent, #231942);
}

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

.kite-main {
  display: block;
  min-height: 40vh;
}

.kite-main > :where(h1, h2, h3) {
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--kite-heading-weight, 800);
}

/* The squiggle: a hand-drawn wavy line in the accent colour under a word of a heading. */
.kite-mark {
  position: relative;
  display: inline-block;
  padding-bottom: 0.08em;
}

.kite-mark::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.02em;
  bottom: -0.12em;
  height: 0.26em;
  background: var(--accent, #ff6b4a);
  -webkit-mask: var(--kite-squiggle-shape) 0 50% / 0.8em 100% repeat-x;
  mask: var(--kite-squiggle-shape) 0 50% / 0.8em 100% repeat-x;
  pointer-events: none;
}

.kite-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.7rem 1.4rem;
  border: var(--kite-outline);
  border-radius: 999px;
  background: var(--kite-fizz, #ffd447);
  color: var(--on-accent, #231942);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 200ms var(--kite-ease);
}

.kite-skip-link:focus {
  top: 1rem;
}

.kite-star {
  display: inline-block;
  flex: none;
  width: 0.85em;
  height: 0.85em;
  background: currentColor;
  -webkit-mask: var(--kite-star-shape) center / contain no-repeat;
  mask: var(--kite-star-shape) center / contain no-repeat;
}

/* A section's heading (drawn by the Theme Kit) gets a short squiggle under it, centred when the heading is. Kept here
   rather than in kit-theme.css, which may load no pictures. */
.kit-heading-group > .kit-heading--2::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.7rem;
  margin-top: 0.85rem;
  background: var(--accent, #ff6b4a);
  -webkit-mask: var(--kite-squiggle-shape) 0 50% / 1.5rem 100% repeat-x;
  mask: var(--kite-squiggle-shape) 0 50% / 1.5rem 100% repeat-x;
}

.kit-heading-group.kit-text--center > .kit-heading--2::after {
  margin-inline: auto;
}

.kit-heading-group.kit-text--end > .kit-heading--2::after {
  margin-inline-start: auto;
}

.kit-section--accent .kit-heading-group > .kit-heading--2::after {
  background: var(--on-accent, #231942);
}

.kit-section--inverse .kit-heading-group > .kit-heading--2::after {
  background: var(--kite-fizz, #ffd447);
}

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

/* A sticker pill: bright, outlined, on a solid shadow. It hops up on hover and presses down on a click. */
.kite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  max-width: 100%;
  padding: 0.75rem 1.6rem;
  border: var(--kite-outline);
  border-radius: 999px;
  background: var(--accent, #ff6b4a);
  box-shadow: 3px 3px 0 var(--kite-ink);
  color: var(--on-accent, #231942);
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background-color var(--kite-speed) ease, color var(--kite-speed) ease, box-shadow var(--kite-speed) ease, transform var(--kite-speed) var(--kite-bounce);
}

.kite-button:hover {
  box-shadow: 5px 5px 0 var(--kite-ink);
  transform: translate(-2px, -2px);
}

.kite-button:active {
  box-shadow: 0 0 0 var(--kite-ink);
  transform: translate(3px, 3px);
}

.kite-button--outline {
  background: var(--surface, #fff);
  color: var(--kite-ink);
}

.kite-button--outline:hover {
  background: var(--kite-fizz, #ffd447);
  color: var(--on-accent, #231942);
}

.kite-button--light {
  border-color: var(--on-primary, #fff);
  background: var(--surface, #fff);
  box-shadow: 3px 3px 0 var(--on-primary, #fff);
  color: var(--text-primary, #231942);
}

.kite-button--small {
  min-height: 2.6rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.92rem;
}

.kite-button--block {
  width: 100%;
}

/* ------------------------------------------------------------------ Announcement and contact line */

.kite-announcement {
  background: var(--primary, #231942);
  color: var(--on-primary, #fff8ec);
  font-size: 0.88rem;
  font-weight: 600;
}

.kite-announcement[hidden] {
  display: none;
}

.kite-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1rem;
  max-width: calc(var(--kite-width-wide) + 2 * var(--kite-gutter));
  margin-inline: auto;
  padding: 0.55rem var(--kite-gutter);
  text-align: center;
}

.kite-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.kite-announcement .kite-star {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--kite-fizz, #ffd447);
}

.kite-announcement a {
  font-weight: 800;
  text-decoration: underline wavy;
  text-decoration-color: var(--kite-fizz, #ffd447);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}

.kite-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.kite-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.kite-topbar {
  color: var(--text-secondary, #585070);
  font-size: 0.85rem;
  font-weight: 600;
}

.kite-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  max-width: calc(var(--kite-width-wide) + 2 * var(--kite-gutter));
  margin-inline: auto;
  padding: 0.6rem var(--kite-gutter) 0;
}

.kite-topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.kite-topbar a {
  text-decoration: none;
  transition: color var(--kite-speed) ease;
}

.kite-topbar a:hover {
  color: var(--accent-ink, #be3a1c);
}

.kite-topbar__social,
.kite-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.kite-topbar__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* ------------------------------------------------------------------ Header */

/* simple and topbar: a floating pill sticker (outline and solid shadow) that stays at the top. centered: a masthead, the
   name over a centred menu, with a line under it once the page scrolls. The header itself lets clicks through around
   the pill. */
.kite-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--kite-header-offset) var(--kite-inset) 0;
  pointer-events: none;
}

.kite-header > * {
  pointer-events: auto;
}

.kite-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--kite-header-height);
  max-width: 80rem;
  margin-inline: auto;
  padding: 0.45rem 0.45rem 0.45rem clamp(1rem, 2vw, 1.5rem);
  border: var(--kite-outline);
  border-radius: 999px;
  background: var(--surface, #fff);
  box-shadow: var(--kite-lift);
  transition: box-shadow var(--kite-speed) ease, transform var(--kite-speed) var(--kite-ease);
}

.kite-header.is-scrolled .kite-header__bar:not(.kite-header__bar--centered) {
  box-shadow: 6px 6px 0 var(--kite-ink);
}

/* The masthead spans the window and is not a pill. */
.kite-header--centered {
  padding: 0;
}

.kite-header--centered::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 2px solid transparent;
  background: var(--background, #fff8ec);
  transition: border-color var(--kite-speed) ease;
}

.kite-header--centered.is-scrolled::before {
  border-bottom-color: var(--kite-ink);
}

.kite-header__bar--centered {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 5.5rem;
  max-width: calc(var(--kite-width-wide) + 2 * var(--kite-gutter));
  padding: 0.5rem var(--kite-gutter);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.kite-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.kite-header__bar--centered .kite-header__brand {
  justify-self: center;
}

.kite-header__bar--centered .kite-brand__name {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
}

.kite-header__rail .kite-nav--desktop {
  justify-content: center;
  max-width: calc(var(--kite-width-wide) + 2 * var(--kite-gutter));
  margin-inline: auto;
  padding: 0 var(--kite-gutter) 0.6rem;
}

.kite-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  min-width: 0;
}

.kite-header__phone {
  color: var(--text-primary, #231942);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--kite-speed) ease;
}

.kite-header__phone:hover {
  color: var(--accent-ink, #be3a1c);
}

.kite-header__slot {
  display: flex;
  align-items: center;
}

/* The wordmark: the website's name in the heading face, as it is written. */
.kite-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: var(--text-primary, #231942);
}

.kite-brand__name {
  display: block;
  min-width: 0;
  max-width: min(20rem, 56vw);
  overflow: hidden;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.45rem;
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kite-brand--light {
  color: var(--on-primary, #fff8ec);
}

/* ------------------------------------------------------------------ Navigation */

.kite-nav--desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.3rem;
  min-width: 0;
}

.kite-nav__item {
  position: relative;
}

/* Each link is a pill that fills with the fizz colour on hover. */
.kite-nav--desktop .kite-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: var(--text-primary, #231942);
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--kite-speed) ease, color var(--kite-speed) ease;
}

.kite-nav--desktop .kite-nav__item > a:is(:hover, :focus-visible),
.kite-nav__item--parent:is(:hover, :focus-within) > a {
  background: var(--kite-fizz, #ffd447);
  color: var(--on-accent, #231942);
}

.kite-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--kite-speed) var(--kite-ease);
}

.kite-nav__item--parent:is(:hover, :focus-within) .kite-nav__caret {
  transform: rotate(180deg);
}

/* A parent's pages hang under it. The padding on top belongs to the list, so the pointer never crosses a gap. */
.kite-nav__children {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  padding-top: 0.7rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.4rem);
  transition: opacity var(--kite-speed) ease, transform var(--kite-speed) var(--kite-bounce), visibility var(--kite-speed);
}

.kite-nav__item--parent:is(:hover, :focus-within) > .kite-nav__children {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.kite-nav__panel {
  display: grid;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: var(--kite-outline);
  border-radius: 1.25rem;
  background: var(--surface, #fff);
  box-shadow: 5px 5px 0 var(--kite-pop, #6ccff6);
}

.kite-nav__panel a {
  display: block;
  padding: 0.55rem 1rem;
  border-radius: 0.85rem;
  color: var(--text-primary, #231942);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color var(--kite-speed) ease, color var(--kite-speed) ease;
}

.kite-nav__panel a:is(:hover, :focus-visible) {
  background: var(--surface-alt, #ffefc9);
  color: var(--text-primary, #231942);
}

/* The menu button: a round sticker with two lines that turn into a cross. */
.kite-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: var(--kite-outline);
  border-radius: 50%;
  background: var(--accent, #ff6b4a);
  color: var(--on-accent, #231942);
  cursor: pointer;
  transition: background-color var(--kite-speed) ease, transform var(--kite-speed) var(--kite-bounce);
}

/* Only where a pointer really hovers: a phone keeps the hover look after a tap. */
@media (hover: hover) {
  .kite-menu-button:hover {
    background: var(--kite-fizz, #ffd447);
    transform: rotate(-8deg);
  }
}

.kite-menu-button__lines {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 0.5rem;
}

.kite-menu-button__lines i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--kite-speed) var(--kite-ease), top var(--kite-speed) var(--kite-ease);
}

.kite-menu-button__lines i:first-child {
  top: 0;
}

.kite-menu-button__lines i:last-child {
  top: 100%;
}

.kite-menu-button[aria-expanded="true"] .kite-menu-button__lines i:first-child {
  top: 50%;
  transform: rotate(45deg);
}

.kite-menu-button[aria-expanded="true"] .kite-menu-button__lines i:last-child {
  top: 50%;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A rounded sticker card that drops under the pill (or under the masthead), across the phone or at the right on a
   tablet. */
.kite-drawer {
  position: fixed;
  top: calc(var(--kite-drawer-top, calc(var(--kite-header-height) + var(--kite-header-offset))) + 0.75rem);
  right: var(--kite-inset);
  left: var(--kite-inset);
  z-index: 49;
  max-height: calc(100dvh - var(--kite-drawer-top, calc(var(--kite-header-height) + var(--kite-header-offset))) - 0.75rem - var(--kite-inset) - 6px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--kite-outline);
  border-radius: var(--kite-radius-large);
  background: var(--surface, #fff);
  box-shadow: 6px 6px 0 var(--kite-ink);
  opacity: 1;
  transform: none;
  transition: opacity var(--kite-speed) ease, transform var(--kite-speed) var(--kite-bounce);
}

.kite-drawer[hidden] {
  display: none;
}

@starting-style {
  .kite-drawer:not([hidden]) {
    opacity: 0;
    transform: translateY(-0.6rem) scale(0.97);
  }
}

@media (min-width: 640px) {
  .kite-drawer {
    left: auto;
    width: min(26rem, calc(100vw - 2 * var(--kite-inset) - 6px));
  }
}

.kite-drawer__inner {
  display: flex;
  flex-direction: column;
  padding: 1rem clamp(1.25rem, 5vw, 2rem) 1.75rem;
}

.kite-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0 1rem;
}

.kite-nav--drawer {
  display: block;
}

.kite-drawer__item + .kite-drawer__item {
  border-top: 2px dashed var(--kite-line);
}

.kite-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  color: var(--text-primary, #231942);
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
  transition: color var(--kite-speed) ease, transform var(--kite-speed) var(--kite-bounce);
}

.kite-drawer__link:hover {
  color: var(--accent-ink, #be3a1c);
  transform: translateX(4px);
}

.kite-drawer__children {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0.9rem;
}

.kite-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #585070);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.kite-drawer__footer {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1.25rem;
  border: var(--kite-outline);
  border-radius: var(--kite-radius);
  background: var(--surface-alt, #ffefc9);
}

.kite-drawer__contact {
  color: var(--text-primary, #231942);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.kite-drawer__footer .kite-button {
  margin-top: 0.75rem;
}

html.kite-menu-open {
  overflow: hidden;
}

/* Below the desktop width the menu moves into the phone menu. */
@media (max-width: 1023.98px) {
  :root {
    --kite-header-height: 4rem;
  }

  .kite-nav--desktop,
  .kite-header__rail,
  .kite-header__cta,
  .kite-header__phone,
  .kite-header__slot {
    display: none;
  }

  .kite-menu-button {
    display: inline-flex;
  }

  .kite-header__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--kite-header-height);
    gap: 1rem;
  }

  .kite-header__bar--centered {
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    min-height: 4.5rem;
  }

  .kite-header__bar--centered .kite-header__actions {
    gap: 0;
  }

  .kite-header__bar--centered .kite-brand__name {
    font-size: 1.55rem;
  }
}

@media (min-width: 1024px) {
  .kite-drawer:not(#site-header.theme-nav-compact .kite-drawer) {
    display: none;
  }
}

@media (max-width: 1279.98px) {
  .kite-header__phone {
    display: none;
  }
}

/* A crowded desktop menu moves into the phone menu (the shared resilience script marks the header). */
#site-header.theme-nav-compact .kite-header__rail,
#site-header.theme-nav-compact .kite-header__cta,
#site-header.theme-nav-compact .kite-header__phone {
  display: none;
}

#site-header.theme-nav-compact .kite-header__bar:not(.kite-header__bar--centered) {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ------------------------------------------------------------------ Breadcrumbs */

.kite-breadcrumbs {
  max-width: calc(var(--kite-width) + 2 * var(--kite-gutter));
  margin-inline: auto;
  padding: 1.75rem var(--kite-gutter) 0;
}

.kite-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #585070);
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;
}

.kite-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.kite-breadcrumbs li + li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent, #ff6b4a);
}

.kite-breadcrumbs a {
  text-decoration: none;
  transition: color var(--kite-speed) ease;
}

.kite-breadcrumbs a:hover {
  color: var(--accent-ink, #be3a1c);
}

.kite-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #231942);
}

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

/* A rounded panel in the ink colour, floating like the colour bands above it, with a dashed line of bright dots along
   its top, closing with the name in big round letters. */
.kite-footer {
  position: relative;
  margin: clamp(1.5rem, 3vw, 2.5rem) var(--kite-inset) var(--kite-inset);
  overflow: hidden;
  border-radius: var(--kite-radius-large);
  background: var(--primary, #231942);
  color: var(--on-primary, #fff8ec);
}

.kite-footer::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 50%;
  width: 4.5rem;
  height: 0.75rem;
  transform: translateX(-50%);
  background:
    radial-gradient(circle closest-side, var(--accent, #ff6b4a) 92%, transparent) 0 50% / 0.75rem 0.75rem no-repeat,
    radial-gradient(circle closest-side, var(--kite-pop, #6ccff6) 92%, transparent) 50% 50% / 0.75rem 0.75rem no-repeat,
    radial-gradient(circle closest-side, var(--kite-fizz, #ffd447) 92%, transparent) 100% 50% / 0.75rem 0.75rem no-repeat;
}

.kite-footer__inner {
  max-width: calc(var(--kite-width-wide) + 2 * var(--kite-gutter));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.75rem) var(--kite-gutter) 1.75rem;
}

.kite-footer--minimal::before {
  display: none;
}

.kite-footer--minimal .kite-footer__inner {
  padding-block: 2rem;
}

.kite-footer .kite-brand {
  color: inherit;
}

.kite-footer__brand {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

.kite-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 2px dashed color-mix(in srgb, var(--on-primary, #fff8ec) 30%, transparent);
}

.kite-footer__closing h2 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.kite-footer__closing .kite-button {
  box-shadow: 3px 3px 0 var(--on-primary, #fff8ec);
}

.kite-footer__closing .kite-button:hover {
  box-shadow: 5px 5px 0 var(--on-primary, #fff8ec);
}

.kite-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2.5rem 3rem;
}

.kite-footer__about {
  display: grid;
  align-content: start;
  gap: 1.1rem;
}

.kite-footer__about p {
  max-width: 24rem;
  margin: 0;
  font-size: 0.97rem;
}

.kite-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--on-primary, #fff8ec);
  border-radius: 50%;
  color: var(--on-primary, #fff8ec);
  transition: background-color var(--kite-speed) ease, color var(--kite-speed) ease, transform var(--kite-speed) var(--kite-bounce);
}

.kite-footer__social a:hover {
  border-color: var(--on-primary, #fff8ec);
  background: var(--kite-fizz, #ffd447);
  color: var(--on-accent, #231942);
  transform: rotate(-10deg);
}

.kite-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.kite-footer__title {
  margin: 0 0 1rem;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.2rem;
  font-weight: var(--kite-heading-weight, 800);
  line-height: 1.2;
}

.kite-footer__links {
  display: grid;
  gap: 0.55rem;
}

.kite-footer__links a,
.kite-footer__contact a {
  width: fit-content;
  color: inherit;
  font-size: 0.97rem;
  text-decoration: none;
  text-underline-offset: 0.3em;
}

.kite-footer__links a:hover,
.kite-footer__contact a:hover {
  text-decoration: underline wavy;
  text-decoration-color: var(--kite-fizz, #ffd447);
}

.kite-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  font-style: normal;
}

.kite-footer__contact p:not(.kite-footer__title) {
  margin: 0 0 0.35rem;
  font-size: 0.97rem;
}

.kite-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: 1.25rem;
  border-top: 2px dashed color-mix(in srgb, var(--on-primary, #fff8ec) 30%, transparent);
}

.kite-footer__copyright {
  margin: 0;
  font-size: 0.88rem;
}

.kite-footer__legal,
.kite-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.kite-footer__legal a {
  color: inherit;
  font-size: 0.88rem;
  text-decoration: none;
}

.kite-footer__legal a:hover,
.kite-footer__inline a:hover {
  text-decoration: underline wavy;
  text-decoration-color: var(--kite-fizz, #ffd447);
  text-underline-offset: 0.3em;
}

.kite-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
}

.kite-footer__inline a {
  font-size: 0.97rem;
  text-decoration: none;
}

.kite-footer--minimal .kite-footer__legal {
  margin-top: 1rem;
}

/* The name, very large in the heading face and in the accent colour, along the bottom of the footer. Its size follows its
   length (the layout puts it in one of five classes), so it fills the width on one line and never breaks a word. */
.kite-footer__wordmark {
  margin: clamp(1.5rem, 4vw, 3rem) 0 -0.16em;
  overflow: hidden;
  color: var(--accent, #ff6b4a);
  font-family: var(--font-heading, sans-serif);
  font-size: min(13rem, 19vw);
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.kite-footer__wordmark--m { font-size: min(11rem, 13.5vw); }
.kite-footer__wordmark--l { font-size: min(8.5rem, 9vw); }
.kite-footer__wordmark--xl { font-size: min(6rem, 6.2vw); }
.kite-footer__wordmark--xxl { font-size: min(4.4rem, 4.6vw); }

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

.kite-not-found {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(4.5rem, 11vw, 8rem) var(--kite-gutter);
  text-align: center;
}

/* The number is a sticker: bright letters with an outline, on a shadow in the pop colour. */
.kite-not-found__number {
  display: inline-block;
  margin: 0;
  color: var(--kite-fizz, #ffd447);
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(6rem, 20vw, 10.5rem);
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 6px 6px 0 var(--kite-pop, #6ccff6);
  -webkit-text-stroke: 3px var(--kite-ink);
  paint-order: stroke fill;
  transform: rotate(-4deg);
}

/* A short squiggle under a heading. */
.kite-rule {
  display: block;
  width: 4.5rem;
  height: 0.75rem;
  margin: 1.5rem auto;
  background: var(--accent, #ff6b4a);
  -webkit-mask: var(--kite-squiggle-shape) 0 50% / 1.5rem 100% repeat-x;
  mask: var(--kite-squiggle-shape) 0 50% / 1.5rem 100% repeat-x;
}

.kite-not-found h1 {
  margin: 0 0 1rem;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.015em;
  line-height: 1.12;
}

.kite-not-found p:not(.kite-not-found__number) {
  margin: 0 auto 2.25rem;
  max-width: 32rem;
  color: var(--text-secondary, #585070);
}

/* ------------------------------------------------------------------ Divider block */

.kite-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  max-width: calc(var(--kite-width) + 2 * var(--kite-gutter));
  min-height: clamp(3.5rem, 8vw, 6rem);
  margin-inline: auto;
  padding-inline: var(--kite-gutter);
  color: var(--accent, #ff6b4a);
}

.kite-divider__squiggle {
  display: block;
  width: min(8rem, 26vw);
  height: 0.75rem;
  background: var(--kite-pop, #6ccff6);
  -webkit-mask: var(--kite-squiggle-shape) 0 50% / 1.5rem 100% repeat-x;
  mask: var(--kite-squiggle-shape) 0 50% / 1.5rem 100% repeat-x;
}

.kite-divider .kite-star {
  width: 1.4rem;
  height: 1.4rem;
}

.kite-divider__rule {
  display: block;
  width: 100%;
  border-top: 3px dashed var(--kite-line-strong);
}

.kite-dot {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--kite-ink);
  border-radius: 50%;
  background: var(--accent, #ff6b4a);
}

.kite-dot:nth-child(2) {
  background: var(--kite-pop, #6ccff6);
}

.kite-dot:nth-child(3) {
  background: var(--kite-fizz, #ffd447);
}

/* ------------------------------------------------------------------ Split hero */

/* The heading beside a picture in a tilted, outlined frame with a bright block behind it, a round name sticker and a
   couple of doodled stars. Without a picture, words alone, centred under a star. */
.kite-hero {
  overflow-x: clip;
  padding: clamp(2.5rem, 6vw, 5rem) var(--kite-gutter) clamp(3.5rem, 7vw, 6rem);
}

.kite-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  max-width: var(--kite-width-wide);
  margin-inline: auto;
}

.kite-hero--words .kite-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  max-width: 52rem;
  text-align: center;
}

.kite-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
  min-width: 0;
}

.kite-hero--words .kite-hero__copy {
  justify-items: center;
}

.kite-hero__star {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--kite-fizz, #ffd447);
  filter: drop-shadow(2px 0 0 var(--kite-ink)) drop-shadow(-2px 0 0 var(--kite-ink)) drop-shadow(0 2px 0 var(--kite-ink)) drop-shadow(0 -2px 0 var(--kite-ink));
  transform: rotate(-10deg);
}

.kite-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.8rem, 1.5rem + 4.6vw, 5.6rem);
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.kite-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #585070);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.7;
}

/* Selling points are little stickers, each leaning its own way, in the three bright colours. */
.kite-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kite-hero--words .kite-hero__points {
  justify-content: center;
}

.kite-hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem 0.4rem 0.75rem;
  border: var(--kite-outline);
  border-radius: 999px;
  background: var(--accent, #ff6b4a);
  color: var(--on-accent, #231942);
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  transform: rotate(-1deg);
}

.kite-hero__points li:nth-child(3n + 2) {
  background: var(--kite-pop, #6ccff6);
  transform: rotate(1deg);
}

.kite-hero__points li:nth-child(3n) {
  background: var(--kite-fizz, #ffd447);
  transform: rotate(-0.4deg);
}

.kite-hero__points .kite-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  stroke-width: 2.4;
}

.kite-hero__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.4rem;
}

.kite-hero--words .kite-hero__actions {
  justify-content: center;
}

/* The doodled arrow curls round to point at the buttons. Only beside a picture, and only where there is room. */
.kite-hero__arrow {
  display: none;
}

@media (min-width: 1100px) {
  .kite-hero--split .kite-hero__arrow {
    display: block;
    width: 4.25rem;
    height: 2.75rem;
    margin-inline-start: 0.35rem;
    background: var(--accent-ink, #be3a1c);
    -webkit-mask: var(--kite-arrow-shape) center / contain no-repeat;
    mask: var(--kite-arrow-shape) center / contain no-repeat;
    transform: rotate(-6deg);
  }
}

.kite-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  color: var(--text-secondary, #585070);
  font-size: 0.92rem;
  font-weight: 600;
}

.kite-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.kite-stars {
  display: inline-flex;
  gap: 0.15rem;
}

.kite-stars svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--kite-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.kite-stars svg.is-full {
  fill: var(--kite-fizz, #ffd447);
}

.kite-hero__trustpilot {
  font-weight: 800;
  text-decoration: underline wavy;
  text-decoration-color: var(--accent, #ff6b4a);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}

.kite-hero__media {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100%, 33rem);
  margin: 0;
  min-width: 0;
}

/* The bright block behind the frame, leaning the other way. */
.kite-hero__media::before {
  content: "";
  position: absolute;
  inset: 4% -3% -4% 5%;
  z-index: -1;
  border: var(--kite-outline);
  border-radius: var(--kite-radius-large);
  background: var(--kite-pop, #6ccff6);
  transform: rotate(4deg);
}

.kite-hero__frame {
  display: block;
  overflow: hidden;
  border: 3px solid var(--kite-ink);
  border-radius: var(--kite-radius-large);
  background: var(--surface-alt, #ffefc9);
  transform: rotate(-2deg);
}

.kite-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: min(78vh, 42rem);
  object-fit: cover;
}

/* Two doodled stars, one over the frame's corner and one at its side. */
.kite-hero__doodle {
  position: absolute;
  z-index: 1;
  color: var(--kite-fizz, #ffd447);
  filter: drop-shadow(2px 0 0 var(--kite-ink)) drop-shadow(-2px 0 0 var(--kite-ink)) drop-shadow(0 2px 0 var(--kite-ink)) drop-shadow(0 -2px 0 var(--kite-ink));
}

.kite-hero__doodle--top {
  top: -1.1rem;
  right: 8%;
  width: 2.6rem;
  height: 2.6rem;
  transform: rotate(14deg);
}

.kite-hero__doodle--side {
  top: 38%;
  right: -1.15rem;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent, #ff6b4a);
  transform: rotate(-12deg);
}

/* The sticker: the website's name around a star, in the fizz colour with an outline, gently rocking. */
.kite-hero__badge {
  position: absolute;
  bottom: 8%;
  left: -2rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 9vw, 8rem);
  aspect-ratio: 1;
  border: var(--kite-outline);
  border-radius: 50%;
  background: var(--kite-fizz, #ffd447);
  box-shadow: var(--kite-lift);
  color: var(--on-accent, #231942);
}

.kite-hero__badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.kite-hero__badge text {
  font-family: var(--font-body, sans-serif);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kite-hero__badge .kite-star {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent, #ff6b4a);
}

@media (prefers-reduced-motion: no-preference) {
  .kite-hero__badge svg {
    animation: kite-turn 24s linear infinite;
  }

  .kite-hero__doodle--top {
    animation: kite-wobble 3.2s ease-in-out infinite;
  }
}

@keyframes kite-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes kite-wobble {
  0%,
  100% {
    transform: rotate(14deg) scale(1);
  }

  50% {
    transform: rotate(-6deg) scale(1.08);
  }
}

@media (max-width: 860px) {
  .kite-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .kite-hero--split .kite-hero__media {
    order: -1;
    width: min(calc(100% - 1.5rem), 25rem);
  }

  .kite-hero__image {
    aspect-ratio: 5 / 6;
  }

  .kite-hero__badge {
    left: -0.5rem;
    bottom: 0.75rem;
    width: 5.75rem;
  }

  .kite-hero__doodle--side {
    right: -0.75rem;
  }
}

/* ------------------------------------------------------------------ Article body */

.kite-article {
  padding: clamp(3.5rem, 7vw, 6rem) var(--kite-gutter);
}

.kite-article--post {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.kite-article__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.kite-article__header {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

/* The date and author on a little tilted sticker. */
.kite-article__byline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.95rem;
  border: var(--kite-outline);
  border-radius: 999px;
  background: var(--kite-fizz, #ffd447);
  color: var(--on-accent, #231942);
  font-size: 0.9rem;
  font-weight: 700;
  transform: rotate(-1.5deg);
}

.kite-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.9rem);
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

.kite-article__header .kite-rule {
  margin: 1.75rem auto 0;
}

.kite-prose {
  color: var(--text-primary, #231942);
  font-size: 1.0625rem;
  line-height: 1.85;
}

.kite-prose > :first-child {
  margin-top: 0;
}

.kite-prose > :last-child {
  margin-bottom: 0;
}

.kite-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.5em;
}

.kite-prose :where(h2, h3, h4) {
  margin: 2em 0 0.6em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--kite-heading-weight, 800);
  letter-spacing: -0.015em;
  line-height: 1.18;
}

.kite-prose h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.3rem);
}

.kite-prose h3 {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
}

.kite-prose h4 {
  font-size: 1.2rem;
}

.kite-prose a {
  color: var(--accent-ink, #be3a1c);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.kite-prose a:hover {
  text-decoration-style: wavy;
}

.kite-prose :where(ul, ol) {
  padding-left: 1.25em;
}

.kite-prose li + li {
  margin-top: 0.4em;
}

.kite-prose li::marker {
  color: var(--accent-ink, #be3a1c);
  font-weight: 800;
}

/* A quote is a speech bubble. */
.kite-prose blockquote {
  position: relative;
  margin-inline: 0;
  margin-bottom: 2.25em;
  padding: 1.4rem 1.6rem;
  border: var(--kite-outline);
  border-radius: var(--kite-radius);
  background: var(--surface, #fff);
  box-shadow: 5px 5px 0 var(--kite-pop, #6ccff6);
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.55;
}

.kite-prose blockquote::after {
  content: "";
  position: absolute;
  bottom: -0.8rem;
  left: 2rem;
  width: 1.4rem;
  height: 1.4rem;
  border-right: var(--kite-outline);
  border-bottom: var(--kite-outline);
  border-bottom-right-radius: 0.3rem;
  background: var(--surface, #fff);
  transform: rotate(45deg) skew(8deg, 8deg);
}

.kite-prose blockquote > :last-child {
  margin-bottom: 0;
}

.kite-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border: var(--kite-outline);
  border-radius: var(--kite-radius);
}

.kite-prose figcaption {
  margin-top: 0.75rem;
  color: var(--text-secondary, #585070);
  font-size: 0.9rem;
  text-align: center;
}

/* A rule is three dots in the bright colours. */
.kite-prose hr {
  width: 4.5rem;
  height: 0.75rem;
  margin: 3em auto;
  border: 0;
  background:
    radial-gradient(circle closest-side, var(--accent, #ff6b4a) 92%, transparent) 0 50% / 0.75rem 0.75rem no-repeat,
    radial-gradient(circle closest-side, var(--kite-pop, #6ccff6) 92%, transparent) 50% 50% / 0.75rem 0.75rem no-repeat,
    radial-gradient(circle closest-side, var(--kite-fizz, #ffd447) 92%, transparent) 100% 50% / 0.75rem 0.75rem no-repeat;
}

.kite-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.kite-prose :where(th, td) {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 2px solid var(--kite-line);
  text-align: left;
  vertical-align: top;
}

.kite-prose th {
  color: var(--text-secondary, #585070);
  font-size: 0.88rem;
  font-weight: 800;
}

.kite-prose :where(code, pre) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.kite-prose pre {
  overflow-x: auto;
  padding: 1.25rem;
  border: var(--kite-outline);
  border-radius: 1rem;
  background: var(--surface-alt, #ffefc9);
}

/* ------------------------------------------------------------------ Form thanks */

.kite-form-success {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding: 2rem 0;
}

.kite-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.9rem;
  font-weight: var(--kite-heading-weight, 800);
  line-height: 1.12;
}

.kite-form-success p {
  margin: 0;
  color: var(--text-secondary, #585070);
}

.kite-form-success .kite-rule {
  margin: 0 0 0.5rem;
}

/* ------------------------------------------------------------------ Without JavaScript, and calm motion */

@media (scripting: none) {
  .kite-menu-button {
    display: none !important;
  }

  .kite-drawer[hidden] {
    display: block;
    position: static;
    width: auto;
    max-height: none;
    margin-top: 0.75rem;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 1024px) {
  .kite-drawer[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }

  .kite-hero__badge svg,
  .kite-hero__doodle--top {
    animation: none !important;
  }

  .kite-button:hover,
  .kite-menu-button:hover,
  .kite-drawer__link:hover {
    transform: none;
  }
}