/* ---------------------------------------------------------------------------
   Leaf — site styles.

   The palette is the application's own, so the site and the thing it is
   selling look like the same object: warm charcoal rather than the blue-grey
   every developer tool defaults to, and Leaf's default green.

   No build step and no external requests. The fonts are the ones already on
   the machine — which is also the honest choice for a product whose whole
   claim is that it never contacts a server.
   --------------------------------------------------------------------------- */

:root {
  --base:      #1e1c1a;
  --base-2:    #272320;
  --line:      #34302a;
  --ink:       #ece6dc;
  --ink-soft:  #a9a094;
  --ink-faint: #7d746a;
  --mark:      #7ecfa4;
  --on-mark:   #0f1a13;
  --serif: "Cambria", "Georgia", "Iowan Old Style", serif;
  --sans:  "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  "Cascadia Mono", "Consolas", ui-monospace, monospace;
  --ease:  cubic-bezier(.22, 1, .36, 1);
  --measure: 40rem;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --base:      #f6f3ec;
    --base-2:    #fffdf8;
    --line:      #e3ddd0;
    --ink:       #1a1713;
    --ink-soft:  #5c554a;
    --ink-faint: #8b8274;
    --mark:      #2c6e49;
    --on-mark:   #ffffff;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.wrap { width: min(68rem, calc(100% - 3rem)); margin-inline: auto; }
section { padding: 5.5rem 0; scroll-margin-top: 4.5rem; }
@media (max-width: 40rem) { section { padding: 3.5rem 0; } }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.012em; line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); margin: 0 0 .6em; }
h3 { font-size: 1.06rem; margin: 0 0 .35em; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
a { color: var(--mark); text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: .88em; }

/* --- masthead ------------------------------------------------------------ */

header.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--base) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
header.top .wrap { display: flex; align-items: center; gap: .6rem; height: 3.5rem; }
header.top img { width: 1.4rem; height: 1.4rem; }
header.top a.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
header.top b { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; }
header.top nav { margin-left: auto; display: flex; gap: 1.4rem; font-size: .88rem; }
header.top nav a { color: var(--ink-soft); text-decoration: none; }
header.top nav a:hover { color: var(--ink); }
@media (max-width: 34rem) { header.top nav a.hide-sm { display: none; } }

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

.hero { padding: 6rem 0 3rem; text-align: center; }
.hero img.mark { width: 5.5rem; height: 5.5rem; filter: drop-shadow(0 12px 28px rgb(0 0 0 / .3)); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.1rem); margin: 1.4rem 0 .3rem; }
.hero .lead {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2.6vw, 1.4rem);
  color: var(--ink-soft);
  max-width: 34rem; margin: 0 auto 1.4rem; line-height: 1.5;
}
.hero .sub { max-width: var(--measure); margin: 0 auto 2rem; color: var(--ink-faint); font-size: .96rem; }

.cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .68rem 1.35rem; border-radius: 8px;
  background: var(--mark); color: var(--on-mark);
  font: 600 .95rem var(--sans); text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost { background: none; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink-faint); }
.note { font-size: .84rem; color: var(--ink-faint); margin-top: 1rem; }

/* --- screenshots --------------------------------------------------------- */

.shot {
  margin: 3.5rem auto 0; border-radius: 12px;
  border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 32px 70px -24px rgb(0 0 0 / .55);
  background: var(--base-2);
}
.shot img { display: block; width: 100%; height: auto; }
.caption { text-align: center; font-size: .82rem; color: var(--ink-faint); margin-top: .9rem; }

/* --- the rotating shot ---------------------------------------------------- */

/* Five renders on a thirty-second loop, in CSS alone — the site carries no
   scripts. Each slide holds six seconds and hands over with a short
   cross-fade; the chip row underneath names the format being shown, on the
   same clock. The first slide starts visible so the page never opens on an
   empty frame, and the last is still fading over it when the loop comes
   round, which is what makes the wrap a cross-fade rather than a jump. */
.slides { position: relative; aspect-ratio: 1492 / 1094; }
.slides img {
  position: absolute; inset: 0;
  width: 100%; height: auto;
  opacity: 0;
  animation: slide 30s linear infinite;
}
.slides img:first-child { animation-name: slideFirst; }
.slides img:nth-child(2) { animation-delay: 6s; }
.slides img:nth-child(3) { animation-delay: 12s; }
.slides img:nth-child(4) { animation-delay: 18s; }
.slides img:nth-child(5) { animation-delay: 24s; }
@keyframes slide      { 0% {opacity:0} 2% {opacity:1} 20% {opacity:1} 22% {opacity:0} 100% {opacity:0} }
@keyframes slideFirst { 0% {opacity:1} 20% {opacity:1} 22% {opacity:0} 100% {opacity:0} }

/* The radios that let a visitor take over. Visually hidden, still focusable,
   so the chips work by keyboard as a normal radio group. */
.pick {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.shot-chips {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .35rem; margin-top: 1rem;
}
.shot-chips label {
  font: .72rem var(--mono);
  padding: .22rem .6rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  cursor: pointer;
  animation: chip 30s linear infinite;
}
.shot-chips label:hover { color: var(--ink); border-color: var(--ink-faint); }
.shot-chips label:first-child { animation-name: chipFirst; }
.shot-chips label:nth-child(2) { animation-delay: 6s; }
.shot-chips label:nth-child(3) { animation-delay: 12s; }
.shot-chips label:nth-child(4) { animation-delay: 18s; }
.shot-chips label:nth-child(5) { animation-delay: 24s; }

/* Once any chip is picked, the clock stops and the choice is shown. */
.pick:checked ~ .shot .slides img,
.pick:checked ~ .shot-chips label { animation: none; }
.pick:checked ~ .shot .slides img { opacity: 0; transition: opacity .45s var(--ease); }
#s1:checked ~ .shot .slides img:nth-child(1),
#s2:checked ~ .shot .slides img:nth-child(2),
#s3:checked ~ .shot .slides img:nth-child(3),
#s4:checked ~ .shot .slides img:nth-child(4),
#s5:checked ~ .shot .slides img:nth-child(5) { opacity: 1; }
#s1:checked ~ .shot-chips label[for="s1"],
#s2:checked ~ .shot-chips label[for="s2"],
#s3:checked ~ .shot-chips label[for="s3"],
#s4:checked ~ .shot-chips label[for="s4"],
#s5:checked ~ .shot-chips label[for="s5"] {
  color: var(--mark); border-color: var(--mark);
  background: color-mix(in srgb, var(--mark) 12%, transparent);
}
#s1:focus-visible ~ .shot-chips label[for="s1"],
#s2:focus-visible ~ .shot-chips label[for="s2"],
#s3:focus-visible ~ .shot-chips label[for="s3"],
#s4:focus-visible ~ .shot-chips label[for="s4"],
#s5:focus-visible ~ .shot-chips label[for="s5"] {
  outline: 2px solid var(--mark);
  outline-offset: 2px;
}
@keyframes chip {
  0%, 100% { color: var(--ink-faint); border-color: var(--line); background: transparent; }
  2%, 20%  { color: var(--mark); border-color: var(--mark); background: color-mix(in srgb, var(--mark) 12%, transparent); }
  22%      { color: var(--ink-faint); border-color: var(--line); background: transparent; }
}
@keyframes chipFirst {
  0%, 20%   { color: var(--mark); border-color: var(--mark); background: color-mix(in srgb, var(--mark) 12%, transparent); }
  22%, 100% { color: var(--ink-faint); border-color: var(--line); background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .slides img, .shot-chips label { animation: none; }
  .slides img { transition: none; }
  .slides img:first-child { opacity: 1; }
  .pick:checked ~ .shot .slides img:first-child { opacity: 0; }
  #s1:checked ~ .shot .slides img:first-child { opacity: 1; }
}

/* --- points -------------------------------------------------------------- */

.points { display: grid; gap: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.point p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.point .glyph {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border-radius: 8px; margin-bottom: .9rem;
  background: color-mix(in srgb, var(--mark) 15%, transparent);
  color: var(--mark);
}
.point .glyph svg {
  width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --- formats ------------------------------------------------------------- */

.band { background: var(--base-2); border-block: 1px solid var(--line); }
.formats { display: grid; gap: 1.6rem 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.fmt h3 { color: var(--ink); }
.fmt .exts { display: flex; flex-wrap: wrap; gap: .3rem; }
.fmt code {
  font-size: .74rem; padding: .12rem .38rem; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-soft);
}
.fmt .what { font-size: .86rem; color: var(--ink-faint); margin: 0 0 .5em; }

/* --- split --------------------------------------------------------------- */

.split { display: grid; gap: 3rem; grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 48rem) { .split { grid-template-columns: 1fr; } }
.split img { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; }
.split p { color: var(--ink-soft); font-size: .96rem; }

/* --- pricing ------------------------------------------------------------- */

.price {
  max-width: 34rem; margin-inline: auto; text-align: center;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 2.4rem 2rem; background: var(--base-2);
}
.price ul { list-style: none; padding: 0; margin: 1.4rem 0 0; text-align: left; display: inline-block; }
.price li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; color: var(--ink-soft); font-size: .93rem; }
.price li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: .5rem; height: .28rem;
  border-left: 2px solid var(--mark); border-bottom: 2px solid var(--mark);
  transform: rotate(-45deg);
}

/* --- prose pages --------------------------------------------------------- */

.doc { width: min(var(--measure), calc(100% - 3rem)); margin: 0 auto; padding: 4.5rem 0 6rem; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 0 0 .2em; }
.doc .stamp { color: var(--ink-faint); font-size: .86rem; margin-bottom: 2.5rem; }
.doc h2 { font-size: 1.3rem; margin: 2.6em 0 .5em; }
.doc h3 { margin: 2em 0 .4em; }
.doc p, .doc li { color: var(--ink-soft); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: .5em; }
.doc .lede { font-family: var(--serif); font-size: 1.16rem; color: var(--ink); line-height: 1.55; }
.doc blockquote {
  margin: 1.6em 0; padding: .1em 0 .1em 1.2em;
  border-left: 2px solid var(--mark); color: var(--ink-soft);
}
.doc table { border-collapse: collapse; width: 100%; margin: 1.4em 0; font-size: .93rem; }
.doc th, .doc td { text-align: left; padding: .55em .8em; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.doc td { color: var(--ink-soft); }

/* --- utilities ------------------------------------------------------------ */

/* These were inline style attributes until the site's own content-security
   policy — style-src 'self', with no 'unsafe-inline' — silently dropped every
   one of them, leaving buttons unaligned and margins collapsed. Keeping the
   policy strict and the rules here is the right way round: the privacy page
   makes a claim about that policy, so the page had better honour it. */
.center     { text-align: center; }
.lede-narrow { color: var(--ink-soft); max-width: var(--measure); }
.grid-top   { margin-top: 2.5rem; }
.after-grid { margin: 3.2rem 0 0; }
.tight      { margin: 0; }
.tight-head { margin: 0 0 .3em; }
.get-row    { margin: 1.8rem 0 0; }
.foot-name  { font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.foot-line  { margin-top: .3rem; }

/* the 404 */
.gone       { text-align: center; padding-top: 8rem; }
.gone-mark  { width: 4rem; height: 4rem; opacity: .7; }
.gone h1    { margin-top: 1.5rem; }
.gone-back  { margin-top: 2rem; }

/* --- the support form ------------------------------------------------------ */

/* Posts to its own origin and returns a rendered page, so the site keeps its
   no-script policy. No third-party form service: one would mean embedding
   somebody else's code on a page whose privacy notice promises there is none. */
.form { margin: 1.6em 0 0; display: flex; flex-direction: column; gap: .3rem; }
.form label { font-size: .84rem; color: var(--ink); margin-top: .9rem; }
.form input, .form textarea {
  font: inherit;
  font-size: .94rem;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--base-2);
  color: var(--ink);
  width: 100%;
}
.form textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-faint); }
.form input:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 1px;
  border-color: transparent;
}
.form button {
  align-self: flex-start;
  margin-top: 1.3rem;
  padding: .68rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--mark);
  color: var(--on-mark);
  font: 600 .95rem var(--sans);
  cursor: pointer;
  transition: filter .18s var(--ease), transform .18s var(--ease);
}
.form button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.form button:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.form .note { margin-top: 1rem; }

/* The honeypot: off-screen rather than display:none, because some bots skip
   what is hidden outright but will still fill a field they can reach. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- footer -------------------------------------------------------------- */

footer { border-top: 1px solid var(--line); padding: 3rem 0 4rem; font-size: .86rem; color: var(--ink-faint); }
footer .cols { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--mark); }
footer nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
footer .legal { margin-top: 1.6rem; line-height: 1.7; }