/*
 * The site uses the application's palette, deliberately.
 *
 * Someone who downloads Buuk after reading this page should recognise it. A
 * marketing site in different colours from the product it sells is a promise
 * the first launch breaks.
 *
 * The tokens are copied rather than imported: this page must be servable as
 * static files with no build step, and one duplicated palette is a smaller
 * cost than a build pipeline for a page of HTML. `docs/DESIGN.md` in the app is
 * the source of truth if they ever drift.
 */

:root {
  color-scheme: light;
  --bg-0: #fcfbf8;
  --bg-1: #f7f5f1;
  --bg-2: #eae7e0;
  --bg-3: #d6cfc4;
  --paper: #fffefb;
  --bd: #c1b8a8;
  --ink-0: #2f2b26;
  --ink-1: #655f57;
  --ink-2: #938c84;
  --accent: #533afe;
  --accent-soft: #7c67ff;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg-0: #181c23;
    --bg-1: #222832;
    --bg-2: #2d3542;
    --bg-3: #3a4454;
    --paper: #1e242d;
    --bd: #0f1218;
    --ink-0: #e2e7ee;
    --ink-1: #aeb8c6;
    --ink-2: #828d9c;
    --accent: #6b52ff;
    --accent-soft: #9383fc;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

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

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
}

/*
 * The logo, inlined so it can follow the theme.
 *
 * The exported SVG hardcodes two fills: the mark in the brand violet and the
 * wordmark in near-black. Near-black disappears on the dark background, so the
 * wordmark takes `currentColor` and the mark takes the accent — which is the
 * brand violet in light and the lifted #6B52FF in dark, where the flat brand
 * colour would sit at 2.7:1 against the ground and read as muddy.
 *
 * That is only possible with the SVG inline; as an <img> its internal fills
 * cannot be reached.
 */
.mark { display: inline-flex; align-items: center; color: var(--ink-0); }
.logo { height: 38px; width: auto; display: block; }
.logo .logo-word { fill: currentColor; }
.logo .logo-mark { fill: var(--accent); }

/* Quieter in the footer — the header's is the one doing the work. */
.logo-footer { height: 28px; margin-bottom: 0.75rem; color: var(--ink-1); }

/*
 * The quill turns on its own vertical axis, once every fifteen seconds.
 *
 * rotateY, not rotate. A plain `rotate()` is rotation about Z — the axis
 * pointing out of the screen — which cartwheels the quill onto its side. The
 * mark should stay upright and turn the way an object on a turntable does, so
 * the axis has to be the vertical one.
 *
 * One revolution in 7.5 seconds, then eight seconds still, repeating: a
 * 15.5-second cycle that is turning for a little under half of it. The turn
 * itself is linear — a turntable holds its speed — so the keyframes carry the
 * rest rather than the easing, holding at 360 degrees from 48.3871% (7.5s of
 * 15.5s) to the end. Rest written into the timeline repeats; an
 * `animation-delay` would only quieten the first cycle.
 *
 * The turn is orthographic, and deliberately so. `perspective` on the <svg>
 * does not reach a path inside it — an SVG element does not propagate a 3D
 * rendering context to its SVG children, so the transform is flattened and
 * rotateY degrades to a horizontal squeeze. Measured: at 45 degrees the mark
 * is 13.27px wide, which is exactly 18.76 x cos 45. Getting real depth would
 * mean lifting the quill out into its own <svg> and positioning it over the
 * wordmark, in both copies, at both sizes — for a trapezoid under one pixel
 * deep on an 18px mark. Not worth the alignment it would cost.
 *
 * `transform-box: fill-box` makes the origin the quill's OWN bounding box
 * rather than the whole SVG's viewport — without it the mark swings around the
 * wordmark instead of turning in place, because it sits at the right-hand end
 * of a 192-unit canvas.
 *
 * The backface is left visible. Halfway through the turn you are looking at
 * the back of the quill, which is what a turntable shows you.
 */
@keyframes quill-turn {
  0%                { transform: rotateY(0deg); }
  48.3871%, 100%    { transform: rotateY(360deg); }
}

.logo .logo-mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: quill-turn 15.5s linear infinite;
}

/* Someone who has asked their system for less motion gets a still mark. */
@media (prefers-reduced-motion: reduce) {
  .logo .logo-mark { animation: none; }
}

nav { display: flex; gap: 1.5rem; align-items: center; }
nav a { color: var(--ink-1); text-decoration: none; font-size: 0.875rem; }
nav a:hover { color: var(--ink-0); }

.button {
  display: inline-block;
  background: var(--accent);
  /* Light labels on accent fills, always — the house rule from the app. */
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 5px;
}
.button:hover { opacity: 0.9; }
.button.quiet { background: var(--bg-2); color: var(--ink-0); }

/* Hero -------------------------------------------------------------------- */

.hero { padding: 5rem 0 4rem; }

h1 {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.08;
  font-weight: 400;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}

.lede {
  font-size: 1.2rem;
  color: var(--ink-1);
  max-width: var(--measure);
  margin: 0 0 2rem;
}

.arc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 3.5rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.arc span::after { content: ' →'; color: var(--accent-soft); }
.arc span:last-child::after { content: ''; }

/* Sections ---------------------------------------------------------------- */

section { padding: 4rem 0; border-top: 1px solid var(--bd); }

h2 {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1rem;
  max-width: 22ch;
}

section p { max-width: var(--measure); color: var(--ink-1); margin: 0 0 1rem; }
section p strong { color: var(--ink-0); font-weight: 600; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.card { background: var(--bg-1); border-radius: 6px; padding: 1.25rem; }
.card h3 { font-size: 0.95rem; margin: 0 0 0.4rem; }
.card p { font-size: 0.875rem; margin: 0; color: var(--ink-2); }

/* A quoted example of what the software actually says. */
.said {
  background: var(--paper);
  border-left: 2px solid var(--accent-soft);
  border-radius: 0 4px 4px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
  font-size: 0.9rem;
  color: var(--ink-1);
}
.said code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85em; }

/* Pricing ----------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.plan { background: var(--bg-1); border-radius: 6px; padding: 1.25rem; }
.plan.featured { outline: 1px solid var(--accent-soft); }
.plan h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.plan .price { font-size: 1.6rem; font-family: 'Source Serif 4', Georgia, serif; }
.plan .price small { font-size: 0.8rem; color: var(--ink-2); font-family: inherit; }
.plan ul { list-style: none; padding: 0; margin: 1rem 0 0; font-size: 0.85rem; color: var(--ink-2); }
.plan li { padding: 0.25rem 0; }

footer {
  border-top: 1px solid var(--bd);
  padding: 2.5rem 0 4rem;
  color: var(--ink-2);
  font-size: 0.85rem;
}
footer a { color: var(--ink-1); }

.note { font-size: 0.85rem; color: var(--ink-2); max-width: var(--measure); }

/* Beats ------------------------------------------------------------------- */

/*
 * The copy leans on short declarative lines set one per row — "Every change is
 * a proposal. / Accept it. / Reject it." Those are one thought with hard line
 * breaks in it, not a list, so they are <br> inside a paragraph rather than a
 * <ul> with the markers hidden.
 *
 * They sit a step darker and a step larger than body copy: the surrounding
 * paragraph explains, and the beat is the line meant to land.
 */
p.beats {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-0);
  max-width: var(--measure);
  margin: 1.5rem 0;
}

/* Enumerations ------------------------------------------------------------ */

/*
 * Genuine lists — the thirteen typesetting details, the eight measured voice
 * characteristics. Set in columns because thirteen single-word rows down the
 * left edge reads as a very long page rather than a short list.
 */
.ticks {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  max-width: 46rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.1rem 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-1);
}
.ticks li { padding: 0.15rem 0 0.15rem 0.9rem; position: relative; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-soft);
}

/* Fiction and nonfiction, side by side ------------------------------------ */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.panel { background: var(--bg-1); border-radius: 6px; padding: 1.5rem; }
.panel h3 {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0 0 0.75rem;
}
.panel p { max-width: none; }
.panel p.beats { font-size: 0.95rem; margin: 1rem 0 0; }

/* Button rows ------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 0; }

/* Hero body copy ---------------------------------------------------------- */

/*
 * The hero sits outside <section>, so it does not inherit `section p`. These
 * come after `.lede` in the file and are re-asserted at matching specificity
 * below so the lede keeps its size.
 */
.hero p { max-width: var(--measure); color: var(--ink-1); margin: 0 0 1rem; }
.hero p.lede { font-size: 1.2rem; margin: 0 0 1.5rem; }
.hero p.beats { color: var(--ink-0); margin: 1.5rem 0 0; }

/* Plans ------------------------------------------------------------------- */

/*
 * Column layout so the price sits under the name, the features stretch, and
 * every call to action lands on the same baseline no matter how many features
 * a plan lists.
 */
.plan { display: flex; flex-direction: column; }
.plan .who { font-size: 0.85rem; color: var(--ink-2); margin: 0.5rem 0 0; max-width: none; }
.plan .plus { font-size: 0.85rem; color: var(--ink-1); margin: 0.9rem 0 0; max-width: none; }
.plan ul { flex: 1 1 auto; }
.plan .cta {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.8rem;
  padding: 0.6rem 0.5rem;
}

.badge {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.6rem;
}

/* The close --------------------------------------------------------------- */

.closer { text-align: center; }
.closer h2, .closer p { margin-left: auto; margin-right: auto; }
.closer h2 { max-width: 24ch; }
.closer .actions { justify-content: center; }

.finale {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink-0);
  max-width: none;
  margin: 2.5rem 0 0;
}

/* Five across rather than four and a stranded fifth. */
.grid.five { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/*
 * Button rows, re-asserted last.
 *
 * `.hero p` and `section p` both score (0,1,1) and would otherwise zero the
 * row's top margin. Longhand rather than the shorthand, so `.closer p`'s auto
 * side margins survive and the closing button stays centred.
 */
p.actions { margin-top: 2rem; margin-bottom: 0; }

/* Narrow screens ---------------------------------------------------------- */

/*
 * The header is a single flex row that cannot fit a phone: the nav's natural
 * width is 375px and the logo is another 110px, against 327px of usable width
 * inside the padding. Rather than shrink the mark back down — it is meant to
 * be the size it is — both rows are allowed to wrap, so the nav drops beneath
 * the logo instead of pushing the page sideways.
 */
@media (max-width: 40rem) {
  header { flex-wrap: wrap; gap: 0.75rem 1rem; }
  nav { flex-wrap: wrap; gap: 0.75rem 1rem; }
}

/* Sign-up ----------------------------------------------------------------- */

.signup-hero { padding-bottom: 3rem; }

.signup {
  display: flex;
  flex-direction: column;
  max-width: 22rem;
  margin: 2.5rem 0 0;
}
.signup label {
  font-size: 0.8rem;
  color: var(--ink-1);
  margin-bottom: 0.35rem;
}
.signup input {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink-0);
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 5px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 1.1rem;
}
.signup input:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: transparent;
}
.signup .hint {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin: -0.75rem 0 1.25rem;
  max-width: none;
}
.signup .button { border: 0; cursor: pointer; font-family: inherit; }
.signup .button:disabled { opacity: 0.55; cursor: default; }

/*
 * The status line is empty until something happens, so it must not reserve
 * space or the button appears to float above a gap.
 */
.status { font-size: 0.85rem; margin: 0.9rem 0 0; max-width: none; }
.status:empty { display: none; }
.status.good { color: var(--ink-0); }
.status.bad { color: #b3261e; }

@media (prefers-color-scheme: dark) {
  .status.bad { color: #ff9a90; }
}

.signup-note { margin-top: 2.5rem; }