/* Findel site: one stylesheet for every page. No external requests: the two fonts are served from this site. */

/* Fonts: one variable-weight file per family in assets/fonts (latin only; SIL Open Font License 1.1, each licence
   beside its file). Plus Jakarta Sans for headings, Inter for text. Until a file arrives the system font stands in
   (font-display: swap). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-soft: #f6f6f8;
  --surface: #ffffff;
  --text: #1f2328;
  --text-muted: #59636e;
  --border: #e3e5e8;
  --border-strong: #c9cdd2;
  --brand: #7c3aed;
  --brand-end: #4c1d95;
  --brand-strong: #6d28d9;
  --brand-fill: linear-gradient(135deg, #7c3aed, #4c1d95);
  --brand-fill-hover: linear-gradient(135deg, #6d28d9, #2e1065);
  --brand-ink: #6d28d9;
  --brand-soft: #f5f3ff;
  --cta-ink: #5b21b6;
  --brand-tint: #f5f3ff;
  --grad-a: var(--brand);
  --grad-b: var(--brand-end);
  --on-brand: #ffffff;
  --success: #1a7f37;
  --focus: var(--brand);
  /* The strongest text: the darkest text in light mode, white in dark mode. A hero phrase on hover and the links in the
     phone menu use it. */
  --text-strong: var(--text);
  --q-hot-text: var(--text-strong);
  --mark-bg: #fff3c4;
  --mark-text: #4d3b00;
  --mark-border: #e6c34a;
  --code-bg: #f1f2f4;
  --radius: 12px;
  --radius-sm: 8px;
  --wrap: 1280px;
  --gutter: 20px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Headings, the wordmark, prices and step numbers. Set on its own, not as var(--font), so a heading face and a
     text face can be chosen separately; serif and condensed faces use no negative tracking. */
  --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-tracking: -0.015em;
  /* Plus Jakarta Sans has a narrow space (0.18em at 800); this tops the gap between words up to about 0.25em. */
  --heading-word-spacing: 0.09em;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Dark: theme.js sets data-theme on <html> to light or dark (the visitor's choice, or else the time of day). Without
   JavaScript there is no data-theme and the system setting decides. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1115;
    --bg-soft: #151821;
    --surface: #171a22;
    --text: #e6e8eb;
    --text-muted: #a4acb6;
    --border: #2a2f3a;
    --border-strong: #3c4350;
    --brand-ink: #c4b5fd;
    --brand-soft: #2a1b4d;
    --grad-a: #ddd6fe;
    --grad-b: #a78bfa;
    --brand-fill: linear-gradient(135deg, #7c3aed, #6d28d9);
    --brand-fill-hover: linear-gradient(135deg, #6d28d9, #5b21b6);
    --success: #4ade80;
    --focus: var(--brand-ink);
    --text-strong: #ffffff;
    --mark-bg: #4a3b00;
    --mark-text: #ffe9a3;
    --mark-border: #8a6d00;
    --code-bg: #20242d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --bg-soft: #151821;
  --surface: #171a22;
  --text: #e6e8eb;
  --text-muted: #a4acb6;
  --border: #2a2f3a;
  --border-strong: #3c4350;
  --brand-ink: #c4b5fd;
  --brand-soft: #2a1b4d;
  --grad-a: #ddd6fe;
  --grad-b: #a78bfa;
  --brand-fill: linear-gradient(135deg, #7c3aed, #6d28d9);
  --brand-fill-hover: linear-gradient(135deg, #6d28d9, #5b21b6);
  --success: #4ade80;
  --focus: var(--brand-ink);
  --text-strong: #ffffff;
  --mark-bg: #4a3b00;
  --mark-text: #ffe9a3;
  --mark-border: #8a6d00;
  --code-bg: #20242d;
}
:root[data-theme="light"] { color-scheme: light; }

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

/* Smooth scrolling to #anchors, stopping below the sticky header (64px high). Reduced motion: see the end. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

/* Plain links are in the accent colour: in text, the header and the docs menu. Buttons set their own colours; on an
   accent background (.cta) a link is white; the phone menu and the footer use the text colour (see there). */
a { color: var(--brand-ink); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

/* Leading: display headings tight, running text open (1.6, 1.7 in long documents), small UI text in between. */
h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0 0 0.5em;
  letter-spacing: var(--heading-tracking);
  word-spacing: var(--heading-word-spacing);
  text-wrap: balance;
}
.lead, .section-head p, .fine-print, .feature-copy p, .steps p { text-wrap: pretty; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 750; line-height: 1.2; }
h3 { font-size: 1.15rem; font-weight: 650; line-height: 1.35; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li + li { margin-top: 0.3em; }
code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-bg);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 60;
  background: var(--surface);
  color: var(--brand-ink);
  border: 2px solid var(--focus);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* Header */

/* Sticky: it stays at the top while the page scrolls. Where the browser supports scroll-driven animations it also
   gains a soft shadow over the first 64px of scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-lift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 64px;
  }
  @keyframes header-lift {
    from { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
    to { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
  }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: var(--heading-tracking);
}
.brand svg { width: 28px; height: 28px; flex: 0 0 auto; }

.nav-inline { margin-left: auto; }
.nav-inline ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-inline li + li { margin-top: 0; }
.nav-inline a, .nav-menu a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 550;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-inline a:hover, .nav-menu a:hover { background: var(--bg-soft); }
/* The current page, and on the home page the section you are in (nav-spy.js). */
.nav-inline a[aria-current], .nav-menu a[aria-current] {
  color: var(--brand-ink);
  background: var(--brand-soft);
}
.nav-inline a.btn, .nav-menu a.btn { color: var(--on-brand); background: var(--brand-fill); }
.nav-inline a.btn:hover, .nav-menu a.btn:hover { background: var(--brand-fill-hover); }
@media (min-width: 761px) {
  .nav-inline a.btn, .nav-menu a.btn {
    margin-left: 8px;
  }
}

/* Light and dark switch, at the far right of the header. The knob sits under the icon of the current theme. It shows
   only once theme.js has set data-theme, so there is no dead switch without JavaScript. The ::after makes the tap
   target 46px high. */
.theme-switch {
  display: none;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  width: 64px;
  height: 34px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme] .theme-switch { display: inline-flex; }
.theme-switch::after { content: ""; position: absolute; inset: -6px -2px; }
.theme-switch:hover { border-color: var(--text-muted); }
.theme-switch:focus-visible { border-radius: 999px; }
.theme-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--text);
  transition: transform 0.2s ease;
}
:root[data-theme="dark"] .theme-knob { transform: translateX(30px); }
.theme-switch svg {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.2s ease;
}
:root[data-theme="light"] .theme-switch svg:first-of-type,
:root[data-theme="dark"] .theme-switch svg:last-of-type { color: var(--bg); }

/* Phone menu (760px and narrower): a button with three lines at the left of the header that turns into an X, with the
   wordmark centred between the edges of the header whatever the button's width (three grid columns). The
   menu slides in from the left under the header, over a dimmed page that does not scroll meanwhile. It is a
   <details>, so it opens and closes without JavaScript; menu.js also closes it when a link in it is followed, on a
   tap outside the panel, on Escape and when keyboard focus leaves it. */
.nav-menu { display: none; }
.nav-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -11px;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover { background: var(--bg-soft); }
/* The span is the middle line, ::before and ::after the outer two. Open, the outer two turn into an X and the middle
   one fades out. */
.menu-lines, .menu-lines::before, .menu-lines::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.menu-lines { position: relative; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; }
.menu-lines::before { top: -7px; }
.menu-lines::after { top: 7px; }
.nav-menu[open] .menu-lines { background-color: transparent; }
.nav-menu[open] .menu-lines::before { transform: translateY(7px) rotate(45deg); }
.nav-menu[open] .menu-lines::after { transform: translateY(-7px) rotate(-45deg); }
/* The dimmed page and the panel start under the header: 64px plus its 1px border. */
.nav-menu[open]::before {
  content: "";
  position: fixed;
  inset: 65px 0 0;
  background: rgba(15, 17, 21, 0.45);
}
.nav-menu nav {
  position: fixed;
  top: 65px;
  bottom: 0;
  left: 0;
  width: min(320px, 86vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px var(--gutter) 24px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.16);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.nav-menu[open] nav { transform: none; }
@starting-style {
  .nav-menu[open] nav { transform: translateX(-100%); }
}
.nav-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-menu li + li { margin-top: 4px; }
.nav-menu a { display: block; padding: 12px 14px; font-size: 1.05rem; }
/* In the panel the links are the strongest text colour, not the accent; the current page keeps its tinted background. */
.nav-menu a:not(.btn) { color: var(--text-strong); }
.nav-menu a.btn { margin-top: 12px; text-align: center; }
@media (max-width: 760px) {
  .site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
  .nav-inline { display: none; }
  .nav-menu { display: block; grid-area: 1 / 1; justify-self: start; }
  .nav-menu a { padding: 12px 0; }
  .brand { grid-area: 1 / 2; }
  .theme-switch { grid-area: 1 / 3; justify-self: end; }
  html:has(.nav-menu[open]) { overflow: hidden; }
}

/* Buttons */

.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--brand-fill);
  color: var(--on-brand);
  font-weight: 650;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1.3;
}
.btn:hover { background: var(--brand-fill-hover); }
.btn-sm { padding: 8px 14px; font-size: 0.92rem; }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Placeholders the owner must fill in */

.ph {
  background: var(--mark-bg);
  color: var(--mark-text);
  border: 1px dashed var(--mark-border);
  border-radius: 4px;
  padding: 0 0.3em;
  font-family: var(--mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

/* Sections */

main { display: block; }
.section { padding: 64px 0; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 680px; margin-bottom: 32px; }
.section-head p { color: var(--text-muted); font-size: 1.08rem; line-height: 1.6; }
.eyebrow {
  display: inline-block;
  color: var(--brand-ink);
  font-weight: 650;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.section-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.section .fine-print { text-align: center; margin-left: auto; margin-right: auto; }

.hero { --pad-top: 196px; --pad-bottom: 188px; position: relative; overflow: hidden; padding: var(--pad-top) 0 var(--pad-bottom); }
.hero-center { position: relative; z-index: 1; text-align: center; pointer-events: none; }
.hero-copy { position: relative; max-width: 620px; margin: 0 auto; pointer-events: auto; }

/* Hero variants: the class on the section picks one. hero-queries = phrases shoppers type, hero-icons = shop icons,
   hero-photo = assets/hero.jpg (below), no class = plain. Phrases and icons are hidden from screen readers.

   THE FADE is a mask on the decoration layer (--fade): fully transparent around the text, then an eased ramp to fully
   visible. Desktop: a clear area 30px past the text on every side, then a 220px ramp. Two gradients, added together:
   sideways, transparent within 340px of the centre (the text is 310px each side, the mouse shift 24px); down the
   page, transparent from 30px above the text to 30px below it. The layer starts 40px outside the hero, so that edge
   is the hero's padding plus 40px minus 30px from the layer's edge (--clear-*). Under 900px the text fills the
   width, so the phrases sit in bands above and below it instead, with a 72px ramp. hero.js reads the same numbers
   (FADE_*). */
.hero {
  --clear-top: calc(var(--pad-top) + 10px);
  --clear-bottom: calc(var(--pad-bottom) + 10px);
  --fade: linear-gradient(90deg, #000 0, #000 calc(50% - 560px), rgba(0, 0, 0, 0.84) calc(50% - 505px),
    rgba(0, 0, 0, 0.5) calc(50% - 450px), rgba(0, 0, 0, 0.16) calc(50% - 395px), transparent calc(50% - 340px),
    transparent calc(50% + 340px), rgba(0, 0, 0, 0.16) calc(50% + 395px), rgba(0, 0, 0, 0.5) calc(50% + 450px),
    rgba(0, 0, 0, 0.84) calc(50% + 505px), #000 calc(50% + 560px), #000 100%),
    linear-gradient(180deg, #000 calc(var(--clear-top) - 220px), rgba(0, 0, 0, 0.84) calc(var(--clear-top) - 165px),
    rgba(0, 0, 0, 0.5) calc(var(--clear-top) - 110px), rgba(0, 0, 0, 0.16) calc(var(--clear-top) - 55px), transparent var(--clear-top),
    transparent calc(100% - var(--clear-bottom)), rgba(0, 0, 0, 0.16) calc(100% - var(--clear-bottom) + 55px),
    rgba(0, 0, 0, 0.5) calc(100% - var(--clear-bottom) + 110px), rgba(0, 0, 0, 0.84) calc(100% - var(--clear-bottom) + 165px),
    #000 calc(100% - var(--clear-bottom) + 220px));
}
@media (max-width: 899px) {
  .hero.hero-queries, .hero.hero-icons { padding-top: 136px; padding-bottom: 128px; }
  .hero {
    --fade: linear-gradient(180deg, #000 0, #000 92px, rgba(0, 0, 0, 0.84) 110px, rgba(0, 0, 0, 0.5) 128px,
      rgba(0, 0, 0, 0.16) 146px, transparent 164px, transparent calc(100% - 156px), rgba(0, 0, 0, 0.16) calc(100% - 138px),
      rgba(0, 0, 0, 0.5) calc(100% - 120px), rgba(0, 0, 0, 0.84) calc(100% - 102px), #000 calc(100% - 84px), #000 100%);
  }
}
.hero-deco {
  display: none;
  position: absolute;
  inset: -40px;
  pointer-events: none;
  user-select: none;
  transform: translate3d(var(--hx, 0px), 0, 0);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-queries .deco-queries { display: flex; }
.hero-icons .deco-icons { display: block; }

/* Search phrases: a field of chips (.deco-track) that flows to any width and runs past both edges of the window,
   centred in the layer. hero.js makes it fall: it wraps the field in .deco-roll, repeats it below itself and moves
   the roll down by one copy per loop (.is-falling puts the roll at the top of the layer). */
.deco-queries {
  inset: -40px -300px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}
.deco-queries.is-falling { justify-content: flex-start; }
.deco-roll, .deco-track { flex: none; }
.deco-track { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 6px; }
/* NO GAP BETWEEN CHIPS: each chip's box takes half of the space around it (7px above and below, 6px each side), and
   the visible pill is its ::after, inset by exactly that much. The pills sit 14px / 12px apart as before, while
   the boxes touch, so the pointer is always over some phrase and a hover catches the space around a pill too. */
.q {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 21px;
  color: var(--text-muted);
  font-size: 0.86rem;
  white-space: nowrap;
  opacity: 0.2;
  transition: color 0.1s ease, opacity 0.1s ease;
}
.q::after {
  content: "";
  position: absolute;
  inset: 7px 6px;
  z-index: -1;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.1s ease;
}
/* Lit (hovered, or the simulated hover on touch screens): the text and the magnifier turn white in dark mode (the
   darkest text in light mode, where the pill is white) and the border takes the accent colour. The magnifier is
   painted in currentColor, so it follows the text by itself. */
.q.is-hot { color: var(--q-hot-text); opacity: 1; }
.q.is-hot::after { border-color: var(--brand); }
/* Where there is a mouse, the phrase under it. Without hero.js that is a CSS hover; hero.js (.is-live) sets is-hot
   itself, because the field falls under a still cursor and a hover would only update when the mouse moves. Touch
   screens get the simulated hover from hero.js. */
@media (hover: hover) and (pointer: fine) {
  .deco-queries { pointer-events: auto; }
  .hero:not(.is-live) .q:hover { color: var(--q-hot-text); opacity: 1; }
  .hero:not(.is-live) .q:hover::after { border-color: var(--brand); }
}
.q::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  transition: background-color 0.1s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Shop icons: one 216px tile of line icons, repeated as a mask on .deco-tile so it takes the theme colour; the fade
   is on the layer around it. The tile starts one tile above the layer, so hero.js can move it down by one tile per
   loop. The tint is in the colour rather than in opacity, so the accent glow inside the tile (hero.js) shows at full
   strength. */
.deco-icons {
  overflow: hidden;
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}
.deco-tile {
  position: absolute;
  top: -216px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='216' viewBox='0 0 216 216' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 12) rotate(-12 12 12) scale(1)'%3E%3Cpath d='M3.5 12.5 11 5h7.5v7.5L11 20z'/%3E%3Ccircle cx='15' cy='9' r='1.3'/%3E%3C/g%3E%3Cg transform='translate(86 18) rotate(6 12 12) scale(0.95)'%3E%3Cpath d='M5.5 8h13l-1 12h-11z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/g%3E%3Cg transform='translate(158 10) rotate(-4 12 12) scale(1.05)'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M6.5 8v3M10 8v4M13.5 8v3M17 8v4'/%3E%3C/g%3E%3Cg transform='translate(20 86) rotate(8 12 12) scale(0.9)'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5v17M3.5 12h17'/%3E%3C/g%3E%3Cg transform='translate(92 80) rotate(-8 12 12) scale(1)'%3E%3Cpath d='M3.5 8 12 4l8.5 4v8L12 20l-8.5-4z'/%3E%3Cpath d='M3.5 8 12 12l8.5-4M12 12v8'/%3E%3C/g%3E%3Cg transform='translate(162 90) rotate(4 12 12) scale(1)'%3E%3Cpath d='M2.5 7h11v9h-11zM13.5 10h4l3 3v3h-7z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(10 158) rotate(10 12 12) scale(0.9)'%3E%3Cpath d='m12 3.8 2.5 5.1 5.6.8-4.05 3.95.95 5.6L12 16.6l-5 2.65.95-5.6L3.9 9.7l5.6-.8z'/%3E%3C/g%3E%3Cg transform='translate(88 164) rotate(-6 12 12) scale(0.95)'%3E%3Cpath d='M12 20s-7.5-4.4-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.6-7.5 10-7.5 10z'/%3E%3C/g%3E%3Cg transform='translate(160 156) rotate(8 12 12) scale(1)'%3E%3Cpath d='M6 3.5h12v17l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4-2 1.4z'/%3E%3Cpath d='M9 8h6M9 11.5h6M9 15h3'/%3E%3C/g%3E%3Cg transform='translate(52 48) rotate(0 12 12) scale(0.8)'%3E%3Cpath d='M7 4.5h10l3 5-8 10-8-10z'/%3E%3Cpath d='M4 9.5h16M12 19.5 9 9.5l3-5 3 5z'/%3E%3C/g%3E%3Cg transform='translate(124 122) rotate(-10 12 12) scale(0.85)'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/g%3E%3Cg transform='translate(196 52) rotate(6 12 12) scale(0.8)'%3E%3Cpath d='M3 4.5h2.5l2 10.5h10l2-7.5H6.6'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='16.5' cy='19' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='216' height='216' viewBox='0 0 216 216' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 12) rotate(-12 12 12) scale(1)'%3E%3Cpath d='M3.5 12.5 11 5h7.5v7.5L11 20z'/%3E%3Ccircle cx='15' cy='9' r='1.3'/%3E%3C/g%3E%3Cg transform='translate(86 18) rotate(6 12 12) scale(0.95)'%3E%3Cpath d='M5.5 8h13l-1 12h-11z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/g%3E%3Cg transform='translate(158 10) rotate(-4 12 12) scale(1.05)'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M6.5 8v3M10 8v4M13.5 8v3M17 8v4'/%3E%3C/g%3E%3Cg transform='translate(20 86) rotate(8 12 12) scale(0.9)'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 3.5v17M3.5 12h17'/%3E%3C/g%3E%3Cg transform='translate(92 80) rotate(-8 12 12) scale(1)'%3E%3Cpath d='M3.5 8 12 4l8.5 4v8L12 20l-8.5-4z'/%3E%3Cpath d='M3.5 8 12 12l8.5-4M12 12v8'/%3E%3C/g%3E%3Cg transform='translate(162 90) rotate(4 12 12) scale(1)'%3E%3Cpath d='M2.5 7h11v9h-11zM13.5 10h4l3 3v3h-7z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(10 158) rotate(10 12 12) scale(0.9)'%3E%3Cpath d='m12 3.8 2.5 5.1 5.6.8-4.05 3.95.95 5.6L12 16.6l-5 2.65.95-5.6L3.9 9.7l5.6-.8z'/%3E%3C/g%3E%3Cg transform='translate(88 164) rotate(-6 12 12) scale(0.95)'%3E%3Cpath d='M12 20s-7.5-4.4-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.6-7.5 10-7.5 10z'/%3E%3C/g%3E%3Cg transform='translate(160 156) rotate(8 12 12) scale(1)'%3E%3Cpath d='M6 3.5h12v17l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4-2 1.4z'/%3E%3Cpath d='M9 8h6M9 11.5h6M9 15h3'/%3E%3C/g%3E%3Cg transform='translate(52 48) rotate(0 12 12) scale(0.8)'%3E%3Cpath d='M7 4.5h10l3 5-8 10-8-10z'/%3E%3Cpath d='M4 9.5h16M12 19.5 9 9.5l3-5 3 5z'/%3E%3C/g%3E%3Cg transform='translate(124 122) rotate(-10 12 12) scale(0.85)'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/g%3E%3Cg transform='translate(196 52) rotate(6 12 12) scale(0.8)'%3E%3Cpath d='M3 4.5h2.5l2 10.5h10l2-7.5H6.6'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='16.5' cy='19' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 216px 216px;
  mask-size: 216px 216px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .deco-tile { background-color: var(--text-muted); opacity: 0.4; }
}
.icon-glow {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-ink);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.icon-glow.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-deco, .q, .q::before, .q::after, .icon-glow { transition: none; }
}

/* Hero over a photo (assets/hero.jpg). The dark layer is 66%: that keeps the white headline and the light grey text
   at AA even over a pure white part of any photo, so the photo can be swapped without re-checking contrast. Without
   the file the section is a plain dark surface. */
.hero-photo {
  padding: 120px 0 112px;
  color: #ffffff;
  background-color: #1b1e27;
  background-image: linear-gradient(rgba(11, 13, 18, 0.66), rgba(11, 13, 18, 0.66)), url("/assets/hero.jpg");
  background-size: cover;
  background-position: center;
}
.hero h1 { max-width: 24ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.hero .lead { font-size: 1.2rem; line-height: 1.55; color: var(--text-muted); max-width: 60ch; margin: 0 auto 32px; }
.hero .actions { justify-content: center; }
.gradient-text {
  background: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* After the rules above on purpose: these override them inside the photo hero. */
.hero-photo h1 { color: #ffffff; }
.hero-photo .eyebrow, .hero-photo .lead { color: #e5e7eb; }
.hero-photo .gradient-text { background: none; color: #ffffff; }
.hero-photo .btn-secondary { color: #ffffff; border-color: rgba(255, 255, 255, 0.75); }
.hero-photo .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); }
.hero-photo :focus-visible { outline-color: #ffffff; }

/* Demo: a recording of the search pop-up (assets/demo.mp4, 16:10) in a drawn browser frame, right after the hero, with
   a rule between them. Until the file exists the frame shows its placeholder; the video covers it once it has a
   frame. demo.js takes the browser's controls away for a pause button and plays the video only while it is on
   screen; without the script the browser's own controls stay. */
.section-ruled { border-top: 1px solid var(--border); }
.demo { max-width: 1040px; margin: 0 auto; }
.demo-frame {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 48px -12px rgba(15, 23, 42, 0.2);
}
/* The address sits in the middle: the empty ::after is as wide as the three dots. */
.demo-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.demo-bar::after { content: ""; flex: 0 0 42px; }
.demo-dots { display: flex; flex: 0 0 42px; gap: 6px; }
.demo-dots i { width: 10px; height: 10px; border-radius: 999px; background: var(--border-strong); }
.demo-address {
  flex: 0 1 360px;
  min-width: 0;
  margin: 0 auto;
  padding: 3px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-screen { position: relative; aspect-ratio: 16 / 10; background: var(--bg-soft); }
.demo-missing { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; }
.demo.is-ready .demo-missing { display: none; }
.demo-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-pause {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.demo-pause:hover { color: var(--text); }
.demo-pause svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.demo-caption { margin-top: 24px; text-align: center; }
.demo-caption p { margin: 0 0 12px; color: var(--text-muted); }
.demo-queries { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; margin: 0; padding: 0; list-style: none; }
.demo-queries li { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; margin: 0; }
.demo-what { color: var(--text-muted); font-size: 0.88rem; }
.demo-actions { justify-content: center; margin-top: 28px; }
.demo-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.demo-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-actions + .fine-print { margin-top: 14px; }

/* Steps */

/* 1 - 2 - 3: large numbers joined by a line in the accent colours. The ring in the page colour around each number
   cuts the line, so the section must sit on the plain background (--bg). */
.steps {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: step;
}
.steps::before {
  content: "";
  position: absolute;
  top: 31px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-end));
  opacity: 0.4;
}
.steps > li { counter-increment: step; margin: 0; text-align: center; }
.steps > li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--brand-fill);
  color: var(--on-brand);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 750;
  box-shadow: 0 0 0 8px var(--bg);
}
.steps h3 { margin-bottom: 6px; }
/* reveal.js: the steps arrive one after the other, 480ms apart, and the line draws across in the time between the first
   and the last, so it reaches each number as that number appears. */
.steps.is-animated::before { transform: scaleX(0); transform-origin: left; }
.steps.is-started::before { transform: none; transition: transform 0.96s linear; }
.steps.is-animated > li::before {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.steps.is-animated > li > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s;
}
.steps.is-animated > li.is-in::before, .steps.is-animated > li.is-in > * { opacity: 1; transform: none; }
@media print {
  .steps.is-animated::before, .steps.is-animated > li::before, .steps.is-animated > li > * { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps::before { display: none; }
}

/* Keyword search versus Findel, one request per row. On a phone each row becomes a card. */
.cmp-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cmp { table-layout: fixed; font-size: 0.97rem; }
.cmp th, .cmp td { padding: 16px 20px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.5; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { font-size: 0.82rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.cmp thead th:first-child { width: 36%; }
.cmp thead th:last-child { color: var(--brand-ink); background: var(--brand-soft); }
/* The request, drawn as a small search field rather than a pill: a long one wraps to two lines and still looks
   like a box, with the magnifier level with the first line. */
.cmp-query {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 100%;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-weight: 550;
}
.cmp-query::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 5px;
  margin-top: calc((1lh - 13px) / 2);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cmp td { position: relative; padding-left: 48px; }
.cmp td svg {
  position: absolute;
  left: 20px;
  top: 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cmp-keyword { color: var(--text-muted); }
.cmp-findel { color: var(--text); background: var(--brand-soft); }
.cmp-findel svg { color: var(--brand-ink); }
/* reveal.js: the Findel column starts like the column beside it and the tint runs down it, each row filling from its
   top edge. A row takes as long as reveal.js waits between rows (120ms, linear), so the fill flows without a pause.
   Coming to the table from below, the rows arrive from the bottom up and fill from their bottom edge (.is-rising). */
.cmp.is-animated thead th:last-child, .cmp.is-animated .cmp-findel {
  background: linear-gradient(var(--brand-soft), var(--brand-soft)) top / 100% 0 no-repeat;
  transition: background-size 0.12s linear;
}
.cmp.is-animated tr.is-rising th:last-child, .cmp.is-animated tr.is-rising .cmp-findel { background-position: bottom; }
.cmp.is-animated tr.is-in th:last-child, .cmp.is-animated tr.is-in .cmp-findel { background-size: 100% 100%; }
@media (max-width: 760px) {
  .cmp-wrap { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tr { margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .cmp th, .cmp td { border-bottom: 0; }
  .cmp th[scope="row"] { padding: 16px 16px 6px; }
  .cmp td { padding: 10px 16px 12px 44px; }
  .cmp td svg { left: 16px; top: 30px; }
  .cmp td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .cmp td.cmp-findel::before { color: var(--brand-ink); }
}

.steps p { color: var(--text-muted); margin: 0; }

/* Features: one wide card per feature, a picture of what it does on one side and the words on the other, the sides
   alternating. The pictures are small drawings of the real thing, hidden from screen readers (the words say the same)
   and made from the theme's colours, so they follow every palette. reveal.js adds .is-animated and then .is-in to
   each card as it comes on screen: an odd card slides in from the left, an even one from the right, and the parts
   of its picture then rise in turn. Without the script nothing is hidden. The section clips the cards while they
   are outside the page width (clip, because a section with overflow: hidden can still be scrolled sideways by a link
   or by focus). */
#features { overflow: hidden; overflow: clip; }
.features { display: grid; gap: 24px; max-width: 1080px; margin: 0 auto; }
.feature {
  --from: -72px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.feature:nth-child(even) { --from: 72px; }
.feature:nth-child(even) .feature-art { order: 1; }
.feature-art {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 32px;
  background-color: var(--brand-soft);
}
.feature-copy { align-self: center; padding: 40px 48px; }
.feature-copy h3 { margin-bottom: 10px; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); font-weight: 750; line-height: 1.25; }
.feature-copy p { margin: 0; color: var(--text-muted); font-size: 1.05rem; }
.features.is-animated .feature {
  opacity: 0;
  transform: translateX(var(--from));
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.features.is-animated .feature.is-in { opacity: 1; transform: none; }
.features.is-animated .art-card > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.features.is-animated .is-in .art-card > * { opacity: 1; transform: none; }
.features.is-animated .is-in .art-card > :nth-child(1) { transition-delay: 0.3s; }
.features.is-animated .is-in .art-card > :nth-child(2) { transition-delay: 0.42s; }
.features.is-animated .is-in .art-card > :nth-child(3) { transition-delay: 0.54s; }
@media print {
  .features.is-animated .feature, .features.is-animated .art-card > * { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .feature { --from: -40px; grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .feature:nth-child(even) { --from: 40px; }
  .feature:nth-child(even) .feature-art { order: 0; }
  .feature-art { min-height: 0; padding: 24px 20px; }
  .feature-copy { padding: 22px 20px 26px; }
}

/* The drawings */
.art-card {
  display: grid;
  gap: 14px;
  width: min(100%, 372px);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 32px -16px rgba(15, 23, 42, 0.3);
  font-size: 0.9rem;
  line-height: 1.4;
}
.art-card p { margin: 0; }
.art-card svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.art-card .cmp-query { display: flex; }
.art-label { margin-bottom: 8px !important; color: var(--text-muted); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }

.art-read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.art-read li { margin: 0; padding: 7px 11px; border-radius: 9px; background: var(--brand-soft); color: var(--text); font-weight: 600; }
.art-read small { display: block; color: var(--brand-ink); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }

.art-typo { text-decoration: underline wavy #e5484d 1.5px; text-underline-offset: 3px; }
.art-fix { color: var(--text-muted); }
.art-fix strong { color: var(--brand-ink); }
.art-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.art-products span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); }
.art-products svg { width: 58%; height: auto; stroke-width: 1.4; }

.art-swatches { display: flex; gap: 10px; }
.art-swatches i { width: 24px; height: 24px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }
.art-swatches i:nth-child(1) { background: #e9e2d4; }
.art-swatches i:nth-child(2) { background: #7d8f69; }
.art-swatches i:nth-child(3) { background: #b5533c; }
.art-swatches i:nth-child(4) { background: #c8b79e; }
.art-swatches i:nth-child(5) { background: #2f3e55; }
.art-swatches i.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-ink); }
.art-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.art-pick { padding: 3px 11px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-muted); font-size: 0.85rem; }
.art-pick.is-on { border-color: var(--brand-ink); background: var(--brand-soft); color: var(--brand-ink); font-weight: 650; }
.art-range { position: relative; height: 4px; margin: 12px 8px 10px; border-radius: 4px; background: var(--border-strong); }
.art-range::before { content: ""; position: absolute; top: 0; bottom: 0; left: 18%; right: 34%; background: var(--brand-ink); }
.art-range i { position: absolute; top: 50%; left: 18%; width: 16px; height: 16px; margin: -8px; border: 2px solid var(--brand-ink); border-radius: 999px; background: var(--surface); }
.art-range i + i { left: 66%; }
.art-prices { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.8rem; }

.art-answer { display: grid; gap: 8px; padding: 12px 14px; border-left: 3px solid var(--brand-ink); border-radius: 4px 10px 10px 4px; background: var(--brand-soft); }
.art-source { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-ink); font-size: 0.8rem; font-weight: 650; }
.art-source svg { width: 15px; height: 15px; }

.art-chart { display: block; width: 100%; height: 72px; }
.art-chart path { vector-effect: non-scaling-stroke; }
.art-card .art-area { fill: var(--brand-soft); stroke: none; }
.art-card .art-line { stroke: var(--brand-ink); stroke-width: 2.4; }
.art-bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.art-bars li { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; color: var(--text-muted); font-size: 0.84rem; }
.art-bars i { height: 8px; border-radius: 8px; background: var(--brand-ink); }
.art-bars li + li i { width: 62%; }
.art-bars em { justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--mark-bg); color: var(--mark-text); font-size: 0.74rem; font-style: normal; font-weight: 650; }

.art-rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.art-rows li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 8px; border-radius: 10px; font-weight: 550; }
.art-rows i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; background: var(--brand-soft); }
.art-rows em { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--brand-ink); font-size: 0.76rem; font-style: normal; font-weight: 650; }
.art-rows em svg { width: 14px; height: 14px; }
.art-rows .is-boost { background: var(--brand-soft); }
.art-rows .is-boost i { background: var(--surface); }
.art-rows .is-hidden { color: var(--text-muted); }
.art-rows .is-hidden i { opacity: 0.5; }
.art-rows .is-hidden em { color: var(--text-muted); }
.art-syn { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }

/* Pricing */

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  vertical-align: middle;
}
table { border-collapse: collapse; width: 100%; }
.yes { color: var(--success); font-weight: 700; }
.no { color: var(--text-muted); }

/* One table for the plans: a column per plan. On a phone a switch above it (.pt-switch, radio buttons) picks one
   plan, and the table shows the feature column and that plan across the full width; Growth, the most popular, comes
   first. A browser without :has() gets no switch, and the table scrolls sideways with the feature column held in
   place. */
.pt-wrap {
  position: relative;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pricing-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}
.pt-col-feature { width: 32%; }
.pricing-table th, .pricing-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.pricing-table tbody tr:last-child > * { border-bottom: 0; }
.pricing-table tbody th[scope="row"] { text-align: left; font-weight: 450; color: var(--text-muted); }
.pricing-table tbody th[scope="row"], .pt-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}
.pricing-table .pt-corner { border-bottom: 2px solid var(--border-strong); }
.pricing-table .pt-plan {
  font-family: var(--font-heading);
  padding-top: 22px;
  border-bottom: 0;
  vertical-align: top;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.pt-plan .badge { display: block; width: fit-content; margin: 6px auto 0; }
.pricing-table .pt-head { padding-bottom: 20px; border-bottom: 2px solid var(--border-strong); vertical-align: top; }
.pt-price { margin: 4px 0 0; line-height: 1.15; }
.pt-price strong { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 750; letter-spacing: var(--heading-tracking); }
.pt-price span { color: var(--text-muted); white-space: nowrap; }
.pt-tagline { color: var(--text-muted); margin: 4px 0 14px; font-size: 0.88rem; line-height: 1.4; min-height: 2.8em; }
.pricing-table .is-popular { background: var(--brand-soft); }
.pt-plan.is-popular { box-shadow: inset 0 3px 0 var(--brand); }
/* The plan buttons again under the table. */
.pricing-table tfoot > tr > * { padding-top: 16px; padding-bottom: 20px; border-top: 2px solid var(--border-strong); border-bottom: 0; }
.pricing-table tfoot .pt-corner { border-bottom: 0; }
/* Wider than a phone: a vertical line before every plan column. */
@media (min-width: 761px) {
  .pricing-table :is(.pt-plan, .pt-head, .pt-foot, tbody td) { border-left: 1px solid var(--border); }
}
.pt-hint { display: none; color: var(--text-muted); font-size: 0.9rem; margin: 10px 0 0; }
.pt-switch { display: none; min-width: 0; margin: 0 0 14px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.pt-switch label {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 2px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.pt-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pt-switch label:hover { color: var(--text); }
.pt-switch label:has(input:checked) { background: var(--brand-fill); color: var(--on-brand); }
.pt-switch label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (max-width: 760px) {
  .pricing-table { width: 584px; font-size: 0.88rem; }
  .pt-col-feature { width: 136px; }
  .pt-col-plan { width: 112px; }
  .pricing-table th, .pricing-table td { padding: 9px 8px; }
  .pricing-table tbody th[scope="row"], .pt-corner { box-shadow: 1px 0 0 var(--border); }
  .pt-price strong { font-size: 1.45rem; }
  .pt-price span { display: block; }
  .pt-hint { display: block; }
}
@media (max-width: 760px) {
  @supports selector(:has(*)) {
    /* The switch stays under the header (64px and its border) down the whole table, so a plan can be changed at any row.
       The band is the page colour and runs edge to edge; nav-spy.js adds .is-stuck, which gives it a shadow, once it
       has stuck. It lets go where the table ends: .pt-plans holds both. */
    .pt-sticky {
      position: sticky;
      top: 65px;
      z-index: 20;
      margin: 0 calc(-1 * var(--gutter)) 16px;
      padding: 8px var(--gutter);
      background: var(--bg);
      transition: box-shadow 0.2s ease;
    }
    .pt-sticky.is-stuck { box-shadow: 0 8px 14px -10px rgba(0, 0, 0, 0.35); }
    .pt-switch { display: flex; margin-bottom: 0; }
    .pt-hint { display: none; }
    .pt-wrap { overflow-x: visible; }
    /* Each row is a grid: the feature, and all four plans stacked in the second column, three of them invisible. So a row
       is as high as its tallest plan whichever one is shown, and nothing moves when the switch changes plan. */
    .pricing-table { display: block; width: 100%; font-size: 0.92rem; }
    .pricing-table colgroup { display: none; }
    .pricing-table thead, .pricing-table tbody, .pricing-table tfoot { display: block; }
    .pricing-table tr { display: grid; grid-template-columns: 54% minmax(0, 1fr); }
    .pricing-table tr > * { grid-row: 1; grid-column: 2; }
    .pricing-table tr > :is(th[scope="row"], .pt-corner) { grid-column: 1; }
    .pricing-table tbody :is(th, td) { display: flex; flex-direction: column; justify-content: center; }
    .pricing-table th, .pricing-table td { padding: 10px 12px; }
    /* The line under the plan headers belongs to the row, so it also runs under the empty corner. */
    .pricing-table .pt-corner, .pricing-table .pt-head { border-bottom: 0; }
    .pricing-table thead tr:last-child { border-bottom: 2px solid var(--border-strong); }
    .pricing-table tbody th[scope="row"], .pt-corner { position: static; box-shadow: none; }
    .pt-price strong { font-size: 1.7rem; }
    /* The one plan shown always has the tint the most popular plan has on a wide screen. */
    .pricing-table :is(.pt-plan, .pt-head, .pt-foot, tbody td) { background: var(--brand-soft); }
    /* "Most popular" sits on the top edge of the column instead of under the name, so the name row is as high for
       every plan and the table does not jump when the switch changes plan. */
    .pricing-table .pt-plan { position: relative; }
    .pt-plan .badge {
      position: absolute;
      top: 0;
      left: 50%;
      margin: 0;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      background: var(--brand-fill);
      color: var(--on-brand);
    }
    /* The cells of the other plans stay in their rows, unseen. */
    #pricing:has(.pt-switch input[value="1"]:checked) .pricing-table :is(.pt-plan, .pt-head, .pt-foot, tbody td):not(:nth-of-type(1)),
    #pricing:has(.pt-switch input[value="2"]:checked) .pricing-table :is(.pt-plan, .pt-head, .pt-foot, tbody td):not(:nth-of-type(2)),
    #pricing:has(.pt-switch input[value="3"]:checked) .pricing-table :is(.pt-plan, .pt-head, .pt-foot, tbody td):not(:nth-of-type(3)),
    #pricing:has(.pt-switch input[value="4"]:checked) .pricing-table :is(.pt-plan, .pt-head, .pt-foot, tbody td):not(:nth-of-type(4)) {
      visibility: hidden;
    }
  }
}

.fine-print { color: var(--text-muted); font-size: 0.95rem; max-width: 72ch; }
.spaced { margin-top: 24px; }

/* FAQ */

.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  line-height: 1.45;
  font-weight: 650;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--brand-ink);
  transition: transform 0.3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-muted); margin: 0 0 18px; }
/* Opening and closing slide, where the browser can animate a <details> (::details-content and a height to "auto");
   elsewhere the answer simply appears. */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 0.3s ease, opacity 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* Final call to action */

.cta {
  text-align: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-end) 100%);
  color: var(--on-brand);
  border-radius: var(--radius);
  padding: 48px 24px;
}
.cta h2 { color: var(--on-brand); }
.cta p { color: var(--on-brand); opacity: 0.95; max-width: 56ch; margin-left: auto; margin-right: auto; }
.cta .btn { background: #ffffff; color: var(--cta-ink); }
.cta .btn:hover { background: var(--brand-tint); }
.cta a:not(.btn) { color: var(--on-brand); }
.cta .actions { justify-content: center; }
.cta :focus-visible { outline-color: #ffffff; }

/* Text pages: docs and legal */

.page { padding: 48px 0 72px; }
.prose { max-width: 72ch; line-height: 1.7; }
.prose-wide { max-width: 920px; }
.prose h2 { margin-top: 1.8em; font-size: 1.45rem; }
.prose h3 { margin-top: 1.5em; }
.prose .lead { font-size: 1.12rem; line-height: 1.6; color: var(--text-muted); }
.prose li { padding-left: 0.2em; }
.meta { color: var(--text-muted); font-size: 0.95rem; }

.breadcrumb { font-size: 0.92rem; margin-bottom: 18px; color: var(--text-muted); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li { margin-top: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--border-strong); }

.docs-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
}
.docs-nav { font-size: 0.95rem; }
.docs-nav h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 8px; }
.docs-nav ul { list-style: none; padding: 0; margin: 0 0 20px; }
.docs-nav li + li { margin-top: 2px; }
.docs-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--brand-ink);
  text-decoration: none;
}
.docs-nav a:hover { background: var(--bg-soft); }
.docs-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
@media (max-width: 860px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .docs-nav { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 16px; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .docs-nav li + li { margin-top: 0; }
}

.callout {
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin: 1.4em 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.shot { margin: 1.5em 0; }
.shot img {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
}
.shot figcaption { color: var(--text-muted); font-size: 0.92rem; margin-top: 8px; }

.ui { font-weight: 650; }

.doc-links { list-style: none; padding: 0; display: grid; gap: 12px; }
.doc-links li + li { margin-top: 0; }
.doc-links a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
}
.doc-links a:hover { border-color: var(--brand); }
.doc-links strong { display: block; color: var(--brand-ink); }
.doc-links span { color: var(--text-muted); font-size: 0.95rem; }

.pager { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }

/* A table that becomes a list of cards on narrow screens */

.data-table { font-size: 0.95rem; margin: 1.2em 0 1.6em; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.data-table thead th { border-bottom: 2px solid var(--border-strong); font-weight: 650; }
@media (max-width: 700px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table td, .data-table th { display: block; width: 100%; }
  .data-table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; padding: 4px 0; }
  .data-table td, .data-table th[scope="row"] { border-bottom: 0; padding: 6px 14px; }
  .data-table td::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 650; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .data-table th[scope="row"] { font-size: 1.05rem; }
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 48px 0 32px;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 32px;
}
.footer-grid h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 10px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li + li { margin-top: 6px; }
.footer-grid a { color: var(--text); text-decoration: none; }
.footer-grid a:hover { color: var(--brand-ink); text-decoration: underline; }
.footer-company { color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 20px; }
.footer-company p { margin: 0 0 4px; }

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .section { padding: 48px 0; }
  .hero { padding: 48px 0; }
  .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}