/* Marksidian website — ink & highlighter.
   Body type is the system stack (native macOS feel); display type is
   Source Serif 4, echoing Reading mode's rendered-document look. */

/* Source Serif 4 — self-hosted (SIL OFL, see fonts/LICENSE). Variable across
   the optical-size and weight axes, latin subset; nothing loads off-site. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #FBFAF7;
  --surface: #FFFFFF;
  --ink: #1D2126;
  --muted: #6A7178;
  --hairline: #E6E4DD;
  --code-bg: #F1EFE9;
  --mark-bg: #FFE55C;
  --mark-ink: #1D2126;
  --btn-bg: #1D2126;
  --btn-ink: #FBFAF7;
  --chrome: #ECEAE4;
  --accent: #B5661F;
  --shadow: 0 24px 60px -24px rgba(29, 33, 38, 0.35);
  --shadow-sm: 0 12px 30px -18px rgba(29, 33, 38, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191B1E;
    --surface: #202327;
    --ink: #E8E6E1;
    --muted: #9AA0A6;
    --hairline: #2E3237;
    --code-bg: #26292E;
    --mark-bg: #D9B93A;
    --mark-ink: #1D2126;
    --btn-bg: #E8E6E1;
    --btn-ink: #191B1E;
    --chrome: #26292E;
    --accent: #E5A15A;
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 12px 30px -18px rgba(0, 0, 0, 0.6);
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; font-optical-sizing: auto; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 600; margin: 0 0 0.4em; }
h2 { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 600; margin: 0 0 0.8em; }
h3 { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.3em; }
p { margin: 0.6em 0; }
a { color: inherit; }
mark { background: var(--mark-bg); color: var(--mark-ink); padding: 0 0.15em; border-radius: 2px; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }
code { background: var(--code-bg); padding: 0.12em 0.4em; border-radius: 4px; }
kbd {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.85em; background: var(--code-bg); border: 1px solid var(--hairline);
  border-bottom-width: 2px; border-radius: 5px; padding: 0.05em 0.45em; white-space: nowrap;
}
img { max-width: 100%; height: auto; display: block; }

.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75em 1.5em;
  border-radius: 8px;
  border: 1px solid var(--btn-bg);
}
.btn:hover { opacity: 0.88; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--mark-bg); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn.ghost:hover { border-color: var(--ink); opacity: 1; }

.section-lede { color: var(--muted); max-width: 40em; margin-top: -0.2em; }

/* ---------- Nav ---------- */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0;
  font-family: "Source Serif 4", Georgia, serif; font-optical-sizing: auto; font-weight: 700; font-size: 1.25rem; text-decoration: none;
}
.wordmark img { width: 28px; height: 28px; border-radius: 7px; margin-right: 0.45em; }
.wordmark mark { padding: 0 0.2em; }
nav .links { display: flex; gap: 1.6em; align-items: center; font-size: 0.95rem; }
nav .links a { text-decoration: none; color: var(--muted); }
nav .links a:hover { color: var(--ink); }
nav .links a.btn { color: var(--btn-ink); padding: 0.5em 1.1em; }
@media (max-width: 640px) { nav .links a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 48px 0 8px; }
.hero .lede { font-size: 1.2rem; color: var(--muted); max-width: 36em; }
.cta-row { display: flex; gap: 0.8em; flex-wrap: wrap; align-items: center; }
.cta-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.8em; }
/* Phones: shorten the wall of text above the first screenshot. */
@media (max-width: 640px) {
  .hero .lede { font-size: 1.05rem; }
  .cta-row .btn.ghost { display: none; }
}

/* ---------- Screenshot frames ---------- */
.shot {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.shot img, .shot picture { display: block; width: 100%; }
.shot.tight { box-shadow: var(--shadow-sm); }
.shot figcaption {
  font-size: 0.85rem; color: var(--muted); text-align: center;
  padding: 0.7em 1em 0.8em; border-top: 1px solid var(--hairline); background: var(--surface);
}
.shot.tight figcaption { border-top: none; border-bottom: 1px solid var(--hairline); padding: 0.45em 1em; text-align: left; font-weight: 600; color: var(--ink); }
.hero-shot { margin: 40px auto 0; max-width: 60rem; }
.titlebar {
  display: flex; align-items: center; gap: 8px;
  background: var(--chrome);
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.r { background: #FF5F57; } .dot.y { background: #FEBC2E; } .dot.g { background: #28C840; }
.titlebar .fname { margin: 0 auto; font-size: 0.8rem; color: var(--muted); padding-right: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Sections ---------- */
section { padding: 64px 0 8px; }

/* Mode tabs */
.tabs { display: flex; gap: 0.4em; margin: 1.6em 0 1.2em; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.tab {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 0.6em 1em; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
}
.tab .mono { font-weight: 400; font-size: 0.78rem; margin-left: 0.4em; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.panel > p { color: var(--muted); max-width: 44em; margin: 0 0 1.2em; }
.panel .shot { max-width: 60rem; margin: 0 auto; }
/* Narrow phones: the shortcut hints push "Reading" onto a second row. */
@media (max-width: 480px) {
  .tab { padding: 0.6em 0.7em; }
  .tab .mono { display: none; }
}

/* Feature rows: text beside a screenshot */
.feature-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5em; align-items: center;
  margin-top: 3.2em;
}
.feature-row .text p { color: var(--muted); }
.feature-row:nth-of-type(3) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.feature-row:nth-of-type(3) .text { order: 2; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
/* Auto-format: text above, before/after pair full width below. */
.feature-row.format-row, .feature-row.format-row:nth-of-type(3) { grid-template-columns: 1fr; gap: 1.2em; }
.feature-row.format-row .text { order: 0; max-width: 46em; }
.feature-row.format-row .before-after { max-width: 60rem; margin: 0 auto; width: 100%; }
@media (max-width: 860px) {
  .feature-row, .feature-row:nth-of-type(3) { grid-template-columns: 1fr; gap: 1.2em; }
  .feature-row:nth-of-type(3) .text { order: 0; }
}
@media (max-width: 560px) { .before-after { grid-template-columns: 1fr; } }

/* Agents section: steps across the top, the reload-prompt shot full width below. */
.feature-row.agent-row {
  grid-template-columns: 1fr;
  gap: 1.6em;
  align-items: start;
  margin-top: 2.4em;
}
.feature-row.agent-row .text { order: 0; }
.feature-row.agent-row .shot { order: 1; max-width: 60rem; margin: 0 auto; width: 100%; }
.agent-row .text > p { max-width: 46em; color: var(--muted); margin-top: 1em; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5em 2em;
  padding-left: 1.4em;
  margin: 1em 0 0;
}
.steps li { margin: 0; padding-right: 0.5em; }
.steps li::marker { color: var(--accent); font-weight: 600; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .steps li { margin: 0.5em 0; }
}

/* .zoom: scale the image toward the dialog at its centre; the picture box clips. */
.shot.zoom picture { display: block; overflow: hidden; aspect-ratio: 1180 / 752; }
.shot.zoom img { transform: scale(1.6); transform-origin: 50% 42%; }
/* Phones: the clip is ~342px wide, so the dialog needs more scale to stay legible. */
@media (max-width: 640px) {
  .shot.zoom img { transform: scale(2.4); }
}

/* ---------- The rest of it: fact list ---------- */
/* Clears the figure that ends the last feature row above it. */
.facts-heading { margin-top: 4em; font-size: 1.4rem; }
dl.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1em 2.5em;
  margin-top: 2em;
}
dl.facts dt { font-weight: 600; font-size: 1rem; }
dl.facts dd { margin: 0.15em 0 0; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 640px) { dl.facts { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); gap: 1.5em; justify-content: start; margin-top: 2em; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 1.8em 1.8em 1.6em;
}
.plan .price { font-family: "Source Serif 4", Georgia, serif; font-optical-sizing: auto; font-size: 2.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 0.15em 0 0; }
.plan .price small { font-size: 1rem; font-weight: 400; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 1em 0 1.4em; flex: 1 0 auto; color: var(--muted); font-size: 0.95rem; }
.plan li { padding: 0.25em 0; }
.plan li::before { content: "—"; margin-right: 0.6em; color: var(--muted); }
.plan .btn { width: 100%; text-align: center; margin-top: auto; }
.fine { text-align: left; color: var(--muted); font-size: 0.92rem; max-width: 44em; margin: 1em 0 0; }
.terms {
  text-align: left; color: var(--muted); font-size: 0.92rem;
  max-width: 44em; margin: 1.4em 0 0;
}

/* ---------- Deciding (prose) ---------- */
.prose { max-width: 46rem; }
.prose p { color: var(--ink); margin: 1em 0; }
.prose strong { font-weight: 600; }

/* ---------- From the maker ---------- */
.maker {
  max-width: 46rem; margin: 0; padding: 1.6em 0 0;
  border-top: 1px solid var(--hairline); border-bottom: none;
  font-family: "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.1rem; line-height: 1.55;
}
.maker p { margin: 0 0 0.8em; }
.maker p:last-child { margin-bottom: 0; }
.maker .sig {
  text-align: right; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem;
}

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 0.9em 0; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-family: ui-monospace, monospace; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0.6em 0 0.2em; }

/* ---------- Footer ---------- */
footer { margin-top: 80px; border-top: 1px solid var(--hairline); padding: 2.2em 0 3em; color: var(--muted); font-size: 0.9rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 2em; flex-wrap: wrap; }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }
footer .legal { font-size: 0.8rem; margin-top: 2em; max-width: 60em; }

/* ---------- Success page ---------- */
.success { max-width: 40rem; margin: 0 auto; padding: 72px 24px; }
.success h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.dl-list { list-style: none; padding: 0; margin: 1.4em 0; display: grid; gap: 0.8em; }
.dl-list a { display: block; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 1em 1.3em; text-decoration: none; }
.dl-list a:hover { border-color: var(--ink); }
.dl-list .sub { color: var(--muted); font-size: 0.85rem; display: block; }