:root {
  /* light — Theme.swift light column */
  --paper:      #F4F2EB;   /* panel faces */
  --sunk:       #E7E4DA;   /* page ground, sidebar, rows */
  --ink:        #171717;
  --muted:      #525048;   /* darkened with the tints: at the old value
                              secondary text fell to 3.5:1 on the blue */
  --border:     #C2BFB2;
  --select:     #B7C3E2;
  --wave:       #4A4E57;
  --playhead:   #64A8DE;
  --sel-block:  #2E3F8E;
  --sel-ink:    #A9BDF2;
  --sel-edge:   #1E2A5E;
  --note:       #FFE75C;
  --note-deep:  #B8890E;
  --heat:       #C8402F;
  --key-white:  #F4F2EB;
  --key-black:  #2B2A26;
  --btn-fill:   #2B2A26;
  --btn-ink:    #F4F2EB;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  /* what the SlowBird name itself is set in — one line to swap. */
  --display: var(--serif);
  --ui: "Lucida Grande", -apple-system, BlinkMacSystemFont, "Segoe UI",
        system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
          "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --rule: 1px solid var(--border);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark — Theme.swift dark column (Sublime Text "Mariana") */
    --paper:     #3B4754;
    --sunk:      #2E3841;
    --ink:       #D8DEE9;
    --muted:     #9FB0C0;
    --border:    #4A5867;
    --select:    #46586E;
    --wave:      #9FB0C0;
    --playhead:  #F9AE58;
    --sel-block: #4A6FA5;
    --sel-ink:   #D6E6FF;
    --sel-edge:  #8FB6E8;
    --note:      #E5C07B;
    --note-deep: #F5DFAE;
    --heat:      #F2705C;
    --key-white: #C6CFD8;
    --key-black: #1E252C;
    --btn-fill:  #D8DEE9;
    --btn-ink:   #1E252C;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sunk);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15;
             letter-spacing: -0.01em; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--muted); }
img, svg { max-width: 100%; }
ul { margin: 0 0 1em; padding-left: 1.25em; }
li { margin: 0.35em 0; }
strong { font-weight: 600; }

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

.wrap { max-width: 1060px; margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--paper);
  padding: 0.6em 1em; border: var(--rule); z-index: 10;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --- the bird ------------------------------------------------------------ */
.bird { display: block; color: var(--ink); fill: currentColor; }
@media (prefers-color-scheme: dark) { .bird { color: var(--ink); } }

/* --- masthead ------------------------------------------------------------ */
.masthead {
  border-bottom: var(--rule); background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.masthead .wrap { display: flex; align-items: center; gap: 1rem;
                  min-height: 58px; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
         font-family: var(--display); font-size: 1.3rem; font-weight: 600;
         letter-spacing: -0.01em; }
.brand .bird { width: 30px; }
.nav { margin-left: auto; display: flex; gap: clamp(0.75rem, 2.5vw, 1.6rem);
       font-family: var(--ui); font-size: 0.82rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 560px) { .nav .opt { display: none; } }

/* --- hero ---------------------------------------------------------------- */
.hero { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem); }
/* The bird keeps its place on a phone. It used to be hidden below 820px,
   which left the hero as a wall of text exactly where the brand needs to
   land hardest. Two columns at every width instead: the art just gets much
   narrower, and sits top-right beside the wordmark rather than centred
   against the whole column. */
.hero-grid { display: grid; gap: clamp(0.9rem, 4vw, 3rem);
             grid-template-columns: minmax(0, 1fr) clamp(72px, 21vw, 128px);
             align-items: start; }
@media (min-width: 820px) {
  .hero-grid { grid-template-columns: 1fr 300px; align-items: center; }
}

.hero h1 { margin: 0 0 1rem; }
.wordmark {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(3.2rem, 11vw, 6rem); line-height: 0.95;
  letter-spacing: -0.025em; margin-bottom: 0.35rem;
}
.hero-sub {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 3.1vw, 1.6rem); line-height: 1.3;
  color: var(--muted); letter-spacing: 0;
}
.lede { font-size: 1.08rem; max-width: 48ch; }
.hero-bird { justify-self: center; width: 100%; margin-top: 0.4rem; }
@media (min-width: 820px) { .hero-bird { width: min(280px, 62vw); margin-top: 0; } }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
           margin: 1.6rem 0 0.9rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--ui); font-size: 0.94rem; font-weight: 500;
  padding: 0.62em 1.15em; border: 1px solid var(--btn-fill); border-radius: 6px;
  background: var(--btn-fill); color: var(--btn-ink); text-decoration: none;
}
.btn:hover { opacity: 0.86; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--paper); opacity: 1; }
.btn .apple { width: 0.95em; height: 1.15em; fill: currentColor; flex: none;
              position: relative; top: -0.05em; }
.fineprint { font-family: var(--ui); font-size: 0.8rem; color: var(--muted); margin: 0; }

/* --- panels -------------------------------------------------------------- */
.panel { background: var(--paper); border: var(--rule); border-radius: 8px;
         padding: clamp(1rem, 2.5vw, 1.4rem); }
.panel-sunk { background: var(--sunk); }

.figure { margin: 0; }
.figure figcaption { font-family: var(--ui); font-size: 0.78rem; color: var(--muted);
                     margin-top: 0.7rem; }

/* the LCD readout strip, as in the app's control bar */
.readout { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
           font-family: var(--ui); font-size: 0.78rem; color: var(--muted);
           border-top: var(--rule); margin-top: 0.85rem; padding-top: 0.7rem; }
.readout b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- sections ------------------------------------------------------------ */
.section { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: var(--rule); }
.section > .wrap > h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.eyebrow { font-family: var(--ui); font-size: 0.74rem; letter-spacing: 0.13em;
           text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem; }
.intro { max-width: 62ch; }

.split { display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  /* prose always comes first in the markup so a phone reads heading-then-figure;
     on a wide screen alternate rows pull the figure back to the left. */
  .split.flip > figure { order: -1; }
}
.split h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.split + .split { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* --- feature grid -------------------------------------------------------- */
.grid { display: grid; gap: 1px; background: var(--border); border: var(--rule);
        border-radius: 8px; overflow: hidden;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid .cell { background: var(--paper); padding: 1.15rem 1.2rem; }
.grid h3 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.grid p { font-size: 0.94rem; color: var(--muted); margin: 0; }

/* --- steps --------------------------------------------------------------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0;
         display: grid; gap: 1px; background: var(--border);
         border: var(--rule); border-radius: 8px; overflow: hidden; }
.steps li { counter-increment: step; background: var(--paper); margin: 0;
            padding: 1rem 1.2rem 1rem 3.4rem; position: relative; }
.steps li::before {
  content: counter(step); position: absolute; left: 1.2rem; top: 1rem;
  font-family: var(--ui); font-size: 0.78rem; font-weight: 600;
  width: 1.55em; height: 1.55em; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%; color: var(--muted);
}
.steps b { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }

/* --- keyboard keys ------------------------------------------------------- */
kbd { font-family: var(--ui); font-size: 0.82em; border: var(--rule);
      border-radius: 4px; padding: 0.1em 0.42em; background: var(--sunk);
      color: var(--ink); white-space: nowrap; }

/* --- faq ----------------------------------------------------------------- */
.faq { border: var(--rule); border-radius: 8px; overflow: hidden;
       background: var(--paper); }
.faq details { border-top: var(--rule); }
.faq details:first-child { border-top: 0; }
.faq summary {
  cursor: pointer; padding: 0.95rem 1.2rem; font-family: var(--serif);
  font-size: 1.08rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--ui); color: var(--muted);
                      font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--sunk); }
.faq .answer { padding: 0 1.2rem 1.1rem; max-width: 68ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* --- download ------------------------------------------------------------ */
.download-box { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 720px) { .download-box { grid-template-columns: 130px 1fr; } }
.download-box .bird { width: 130px; justify-self: center; }
.specs { font-family: var(--ui); font-size: 0.84rem; color: var(--muted);
         display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; padding: 0; margin: 0.9rem 0 0;
         list-style: none; }

/* --- footer -------------------------------------------------------------- */
.foot { border-top: var(--rule); padding: 2rem 0 2.5rem;
        font-family: var(--ui); font-size: 0.8rem; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; }
.foot .sep { opacity: 0.5; }
.foot .bird { width: 22px; opacity: 0.75; }

/* --- little mockups of the app's own panels ------------------------------ */
.lib { font-family: var(--ui); font-size: 0.84rem; border: var(--rule);
       border-radius: 6px; overflow: hidden; background: var(--sunk); }
.lib-search, .lib-head {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem;
  border-bottom: var(--rule); background: var(--paper);
}
.lib-search { color: var(--ink); }
.lib-search span:first-child { color: var(--muted); font-size: 1rem; }
.lib-head { color: var(--muted); font-size: 0.72rem; font-weight: 600;
            letter-spacing: 0.1em; text-transform: uppercase; }
.lib-head .count { margin-left: auto; letter-spacing: 0; }
.lib-list { list-style: none; margin: 0; padding: 0; }
.lib-list li { display: flex; align-items: center; gap: 0.6rem; margin: 0;
               padding: 0.45rem 0.7rem; border-top: var(--rule); }
.lib-list li:first-child { border-top: 0; }
.lib-list i { flex: none; width: 4px; height: 27px; border-radius: 2px; }
.lib-list div { display: flex; flex-direction: column; line-height: 1.32; min-width: 0; }
.lib-list .t { color: var(--ink); white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
.lib-list .s { color: var(--muted); font-size: 0.75rem; }
.lib-list .time { margin-left: auto; color: var(--muted); font-size: 0.75rem;
                  font-variant-numeric: tabular-nums; flex: none; }
.lib-list li.is-sel { background: var(--select); }
.lib-list li.is-sel .s { color: var(--ink); opacity: 0.72; }

/* --- product screenshots --------------------------------------------------
   The shot already carries the app's own window chrome, so it gets NO panel
   box around it — a frame inside a frame just reads as clutter. A hairline
   keeps the near-white title bar from bleeding into the page. */
.shot-fig { margin: 1.5rem 0 2rem; }
/* Flat house style: one firm ink outline and a hard offset shadow under the
   bottom edge — no blur, so the lift stays graphic rather than soft. (A double
   ring was tried here and looked fussy; one line does the job.) */
.shot { display: block; width: 100%; height: auto;
        border: 1px solid var(--wave); border-radius: 8px; background: var(--sunk);
        box-shadow: 0 10px 0 -4px rgba(0, 0, 0, 0.10); }
@media (prefers-color-scheme: dark) {
  .shot { box-shadow: 0 10px 0 -4px rgba(0, 0, 0, 0.35); }
}
.shot-fig figcaption { max-width: 62ch; margin-top: 1rem; }

/* --- the hero's three points --------------------------------------------- */
.lede-list { list-style: none; margin: 0 0 1.3rem; padding: 0;
             max-width: 46ch; font-size: 1.06rem; }
.lede-list li { position: relative; padding-left: 1.4rem; margin: 0 0 0.6rem; }
/* A small diamond rather than a disc: it is the shape of the app's own slider
   thumbs, so the page keeps borrowing from the product instead of from Bootstrap. */
.lede-list li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.62em;
  width: 6px; height: 6px; background: var(--muted); transform: rotate(45deg);
}

/* --- hand-drawn decorations ----------------------------------------------
   Same ink as the bird, so they read as part of the same drawn set rather
   than as clip art. They are decoration only: alt="", aria-hidden, and no
   pointer target — a screen reader should never announce them.
   They are flat black artwork, so unlike the bird (an SVG using currentColor)
   they cannot follow the theme on their own and are inverted for dark mode. */
.deco { display: block; opacity: 0.85; pointer-events: none; user-select: none;
        height: auto; }
/* No invert rule here any more: the only decoration left carries its own
   colour. Flat black artwork WOULD need one (it vanishes on a dark ground). */

/* The note tag beside the Notes heading. It is the app's OWN 12x12 sprite,
   scaled by a whole multiple (12 -> 24) and rendered pixelated: the app draws
   it only at native size on purpose, and interpolating it turns a crisp little
   icon into mush. It carries its own colour, so unlike flat black artwork it
   must NOT be inverted for dark mode.
   It sits OUTSIDE the <h2> deliberately — anything inside a data-copy element
   is run through the sanitiser when the editor saves, which strips <img>. */
.head-row { display: flex; align-items: flex-start; gap: 0.55rem; }
.head-row h2 { margin-bottom: 0.5em; }
.deco-tag { width: 24px; height: 24px; flex: none; margin-top: 0.22em;
            image-rendering: pixelated; image-rendering: crisp-edges; }

@media (max-width: 559px) { .deco-tag { display: none; } }

/* --- section tints --------------------------------------------------------
   Drawn from the app's own eight track-label colours (Theme.trackColorHexes),
   mixed 22% over the page ground in light and 10% in dark. Taking them from
   the product rather than inventing a palette keeps the page and the app
   looking like one thing, and the Notes section gets the post-it yellow the
   app already uses for a saved passage.
   Measured against --ink before shipping: 12.6:1 or better in light, 6.8:1 or
   better in dark — comfortably past WCAG AAA either way. */
:root {
  --tint-teal:   #BADBD2;
  --tint-yellow: #F3E6AE;
  --tint-blue:   #A5C8E1;
  --tint-green:  #CCE2BA;
  --tint-peach:  #F5D2AE;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark is built the opposite way round to light, and this took two goes.
       Mixing the pale label colours INTO a dark ground greys them out: the
       yellow came out khaki and the peach came out brown, which is exactly the
       mud you get from lightening a dark surface with a desaturated hue. These
       instead keep the hue, sit slightly DARKER than the ground, and carry only
       12% saturation — present enough to tell two sections apart, never enough
       to look like a colour block. Panels stay a step lighter so cards read. */
    --tint-teal:   #273231;
    --tint-yellow: #322F27;
    --tint-blue:   #272E32;
    --tint-green:  #273227;
    --tint-peach:  #322C27;
  }
}

.section { background: var(--section-bg, transparent); }
.tint-teal   { --section-bg: var(--tint-teal); }
.tint-yellow { --section-bg: var(--tint-yellow); }
.tint-blue   { --section-bg: var(--tint-blue); }
.tint-green  { --section-bg: var(--tint-green); }
.tint-peach  { --section-bg: var(--tint-peach); }

/* --- hero texture ---------------------------------------------------------
   A hand-written manuscript behind the bird, fading in from the left so it
   never sits under the wordmark or the reading text. Drawn on a pseudo-element
   rather than as a background on .hero itself so it can be masked and inverted
   independently of the content above it.
   The artwork is black ink on transparency, exactly like the bird — so on a
   dark ground it would be invisible, and it gets inverted to pale ink there. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/img/sheetmusic.webp") no-repeat right center / auto 118%;
  opacity: 0.13;
  /* the gradient IS the effect: solid at the right edge, gone by the middle,
     so the texture emerges behind the bird and never fights the copy */
  -webkit-mask-image: linear-gradient(to right, transparent 34%, #000 100%);
          mask-image: linear-gradient(to right, transparent 34%, #000 100%);
}
@media (prefers-color-scheme: dark) {
  .hero::before { filter: invert(1); opacity: 0.10; }
}
/* On a phone the hero is mostly text and the bird is small — the texture would
   just be noise under the words. */
@media (max-width: 620px) { .hero::before { display: none; } }

/* The quaver in the brand and the hero wordmark is a text glyph, not part of
   the typeface's design — at full size and weight it out-shouts the letters,
   so it is set a touch smaller and lighter in both places. */
.brand [data-copy="brand.name"] { white-space: nowrap; }

/* grid cells that ARE links to deeper pages */
.grid h3 a { text-decoration: none; }
.grid h3 a:hover { text-decoration: underline; }