/* markup-claw.com: one stylesheet for the site (owner 2026-10-10: a release-ready
   frontend and a Figma template the owner then refactors).

   The look is the drafting sheet: a cool vellum page, graphite ink, the redline
   red every markup tool uses for the action, and AutoSnap yellow kept for the
   one thing that is ours alone, the snap glyphs in the hero. One family,
   Archivo, used at two widths: condensed for headings, normal for reading.
   The fleet CSP is default-src 'self', so the font is served from /fonts. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --sheet: #f5f6f3;
  --card: #ffffff;
  --ink: #161b20;
  --ink-2: #242b32;
  --lead: #4c555d;
  --rule: #d7dbd6;
  --redline: #c8372b;
  --redline-dark: #a52b21;
  --snap: #f2c230;
  --ok: #1d7a46;
  --err: #b3261e;
  --measure: 72ch;
  --wide: 1120px;
  --r: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sheet);
}
a { color: var(--redline); text-underline-offset: 3px; }
a:hover { color: var(--redline-dark); }
:focus-visible { outline: 3px solid var(--snap); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }

/* ── type ─────────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-stretch: 72%;
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.35rem; font-stretch: 80%; margin-bottom: 0.35rem; }
p { margin: 0 0 1rem; }
.lead { font-size: 1.15rem; color: var(--lead); max-width: var(--measure); }

/* ── top bar ──────────────────────────────────────────────────────────── */
.topnav { background: var(--ink); border-bottom: 1px solid #2c343c; }
.topnav .wrap { display: flex; align-items: center; gap: 24px; min-height: 56px; flex-wrap: wrap; }
.brand {
  color: #fff; text-decoration: none; font-weight: 780; font-stretch: 78%;
  font-size: 1.25rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px;
}
.brand:hover { color: #fff; }
.brand svg, .brand img { flex-shrink: 0; }
.brand img { border-radius: 6px; }

/* Beta and Pricing ride beside the name (owner 2026-10-15). */
.quick { display: flex; gap: 8px; }
.quick a {
  color: #e9edf0; text-decoration: none; font-size: 0.88rem; font-weight: 600;
  padding: 5px 12px; border: 1px solid #47515a; border-radius: 999px;
}
.quick a:hover { border-color: var(--snap); color: #fff; }

/* The account: Sign in, or an avatar whose menu holds the rest. */
.account { display: flex; align-items: center; }
.account .signin {
  color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 650;
  padding: 6px 14px; border-radius: 999px; background: var(--redline);
}
.account .signin:hover { background: var(--redline-dark); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: #2c6fd6; color: #fff; font-weight: 700; font-size: 0.95rem;
  text-transform: uppercase; border: 2px solid #1e252c; box-shadow: 0 0 0 1px #47515a;
}
.account .menu summary { padding: 0; border: 0; }
.account .menu summary::after { display: none; }
.account .menu[open] summary .avatar { box-shadow: 0 0 0 2px var(--snap); }
.account .menu-panel { left: auto; right: 0; width: 260px; }
.account .menu-panel .who { padding: 10px 16px 8px; color: #9aa7b1; font-size: 0.85rem; border-bottom: 1px solid #2c343c; overflow-wrap: anywhere; }
.account .menu-panel .who b { display: block; color: #fff; font-size: 0.95rem; }
.topnav .account .menu-panel a { padding: 9px 16px; color: #e9edf0; font-size: 0.92rem; }
.topnav .account .menu-panel a.sep { border-top: 1px solid #2c343c; }
.topnav .links { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.topnav .account { margin-left: 4px; }
.topnav .links a { color: #c9d0d6; text-decoration: none; font-size: 0.95rem; padding: 4px 0; border-bottom: 2px solid transparent; }
.topnav .links a:hover { color: #fff; }
.topnav .links a[aria-current="page"] { color: #fff; border-bottom-color: var(--redline); }
.topnav .links { align-items: center; }

/* Workflows menu: a details element, so it opens without script; home.js only
   closes it on an outside click or Escape. */
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; color: #c9d0d6; font-size: 0.95rem; padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.menu summary:hover, .menu[open] summary { color: #fff; }
.menu[open] summary { border-bottom-color: var(--snap); }
.menu-panel {
  position: absolute; top: calc(100% + 10px); left: -16px; z-index: 20; width: 300px;
  background: var(--ink); border: 1px solid #2c343c; border-top: 2px solid var(--snap);
  border-radius: 0 0 var(--r) var(--r); padding: 6px 0; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.topnav .menu-panel a { display: block; padding: 10px 16px; border: 0; }
.topnav .menu-panel a strong { display: block; color: #fff; font-weight: 650; }
.topnav .menu-panel a span { display: block; color: #9aa7b1; font-size: 0.85rem; margin-top: 2px; }
.topnav .menu-panel a:hover, .topnav .menu-panel a:focus-visible { background: #1e252c; }

/* ── hero: the sheet that snaps ───────────────────────────────────────── */
.hero { background: var(--ink); color: #e9edf0; }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 72px;
}
.hero h1 { color: #fff; max-width: 11em; }
.hero .sub { font-size: 1.15rem; color: #b9c2ca; max-width: 34em; margin: 20px 0 28px; }
.hero .sub + .sub { margin-top: -12px; }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 0.95rem; color: #e9edf0; margin-bottom: 20px; }
.status::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--redline);
  box-shadow: 0 0 0 4px rgba(200, 55, 43, 0.25);
}

.join { max-width: 520px; }
.join form { display: flex; gap: 8px; flex-wrap: wrap; }
.join input {
  flex: 1 1 240px; min-width: 0; padding: 13px 14px; font: inherit; font-size: 1rem;
  border-radius: var(--r); border: 1px solid #47515a; background: #1e252c; color: #fff;
}
.join input::placeholder { color: #8b959e; }
.btn {
  display: inline-block; font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2;
  padding: 13px 20px; border-radius: var(--r); border: 0; cursor: pointer; text-decoration: none;
  background: var(--redline); color: #fff;
}
.btn:hover { background: var(--redline-dark); color: #fff; }
.btn:disabled { opacity: 0.6; cursor: default; }
.submsg { min-height: 1.4em; margin-top: 10px; font-size: 0.95rem; }
.submsg.ok { color: #7fd7a2; }
.submsg.err { color: #ffb4a9; }
.join .member { font-size: 0.95rem; color: #b9c2ca; margin-top: 14px; }
.join .member a { color: #fff; }
.consent { font-size: 0.85rem; color: #8b959e; margin-top: 8px; }
/* The list's optional questions, under the email row and inside the form (Enter still submits). */
.join-q { flex: 1 1 100%; margin: 6px 0 0; padding: 0; border: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.join-q[hidden] { display: none; }
.join-q legend { grid-column: 1 / -1; padding: 0; margin-bottom: 2px; font-size: 0.85rem; color: #8b959e; }
.join-q label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: #b9c2ca; min-width: 0; }
.join-q .wide { grid-column: 1 / -1; }
.join-q select, .join-q textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.92rem; padding: 8px 10px;
  border-radius: var(--r); border: 1px solid #47515a; background: #1e252c; color: #fff;
}
.join-q textarea { resize: vertical; min-height: 2.6em; }
.join-q select:focus-visible, .join-q textarea:focus-visible { outline: 2px solid var(--snap); outline-offset: 1px; }
@media (max-width: 480px) { .join-q { grid-template-columns: minmax(0, 1fr); } }

.sheet { position: relative; }
.sheet svg { display: block; width: 100%; height: auto; border-radius: var(--r); }
.sheet figcaption { font-size: 0.85rem; color: #8b959e; margin-top: 10px; }

/* One orchestrated moment: the cursor travels and locks to three snaps. */
.snap-cursor { animation: travel 9s ease-in-out infinite; }
.snap-glyph { opacity: 0; animation: glyph 9s infinite; }
.snap-glyph.g2 { animation-delay: 3s; }
.snap-glyph.g3 { animation-delay: 6s; }
@keyframes travel {
  0%, 6% { transform: translate(0, 0); }
  22%, 33% { transform: translate(0, 0); }
  55%, 66% { transform: translate(-150px, 0); }
  88%, 100% { transform: translate(-90px, 120px); }
}
@keyframes glyph {
  0%, 18% { opacity: 0; }
  22%, 32% { opacity: 1; }
  36%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .snap-cursor { animation: none; }
  .snap-glyph { animation: none; opacity: 1; }
}

/* ── sections ─────────────────────────────────────────────────────────── */
/* Sections space by margin: .wrap owns the side padding. */
main > section.wrap { margin-top: 88px; }
main > section.wrap:last-of-type { margin-bottom: 88px; }
.compare {
  margin-top: 28px; padding: 20px 24px; background: var(--card); border: 1px solid var(--rule);
  border-left: 4px solid var(--redline); border-radius: var(--r); max-width: 860px;
}
.compare strong { color: var(--ink); }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.feature { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.feature img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #e3e7e2; }
.feature div { padding: 18px 20px 20px; }
.feature p { color: var(--lead); font-size: 0.98rem; margin: 0; }

/* Workflows: screen and steps side by side, the screen alternating sides. */
.workflow {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center;
  margin-top: 48px; scroll-margin-top: 24px;
}
.workflow:nth-of-type(even) img { order: 2; }
.workflow img {
  display: block; width: 100%; height: auto; border-radius: var(--r);
  border: 1px solid var(--rule); background: #e3e7e2; box-shadow: 0 10px 30px rgba(22, 27, 32, 0.12);
}
.workflow h3 { font-size: 1.6rem; }
.workflow ol { margin: 12px 0 0; padding-left: 1.3em; color: var(--lead); }
.workflow li { margin-bottom: 8px; padding-left: 4px; }
.workflow li::marker { color: var(--redline); font-weight: 700; }

.ledger { margin-top: 24px; border-top: 1px solid var(--rule); max-width: 960px; }
.ledger div { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ledger dt { font-weight: 650; }
.ledger dd { margin: 0; color: var(--lead); }
/* Roadmap rows look different from shipped ones: a reader never has to guess. */
.ledger .soon dt { color: var(--lead); font-weight: 500; }
.ledger .soon dt::after { content: "In development"; display: block; font-weight: 400; font-size: 0.85rem; }

.plugins { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 24px; }
.plugins a {
  display: block; padding: 18px 20px; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); text-decoration: none; color: var(--ink);
}
.plugins a:hover { border-color: var(--ink); }
.plugins strong { display: block; font-stretch: 80%; font-size: 1.15rem; }
.plugins span { display: block; color: var(--lead); font-size: 0.95rem; margin-top: 4px; }
.plugins em { display: inline-block; margin-top: 10px; font-style: normal; font-size: 0.85rem; color: var(--lead); border: 1px dashed var(--rule); border-radius: 4px; padding: 1px 8px; }

.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin-top: 24px; }
.about h3 { margin-bottom: 8px; }
.about p { color: var(--lead); }
.mission { font-size: 1.2rem; max-width: var(--measure); margin-top: 12px; }

.beta-band { background: var(--ink-2); color: #e9edf0; }
.beta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-top: 56px; padding-bottom: 56px; align-items: start; }
.beta-band h2 { color: #fff; }
.beta-band p { color: #b9c2ca; }

#updates { margin-top: 16px; max-width: 860px; }

footer { background: var(--ink); color: #9aa7b1; font-size: 0.92rem; }
footer .footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px;
  padding-top: 48px; padding-bottom: 32px;
}
footer .footer-brand p { margin-top: 12px; max-width: 30em; }
footer nav { display: flex; flex-direction: column; gap: 10px; }
footer nav h2 { font-size: 0.95rem; font-stretch: 90%; color: #fff; margin: 0 0 4px; letter-spacing: 0; }
footer a { color: #c9d0d6; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
footer .footer-base { border-top: 1px solid #2c343c; padding-top: 18px; padding-bottom: 28px; font-size: 0.85rem; }

@media (max-width: 900px) {
  .hero .wrap, .beta-band .wrap { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; padding-bottom: 48px; }
  .features { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .ledger div { grid-template-columns: 1fr; gap: 4px; }
  .workflow { grid-template-columns: 1fr; gap: 20px; }
  .workflow:nth-of-type(even) img { order: 0; }
  footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .footer-brand { grid-column: 1 / -1; }
  main > section.wrap { margin-top: 64px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .topnav .links { gap: 14px; }
  .menu-panel { left: auto; right: -40px; width: min(300px, calc(100vw - 32px)); }
}

/* ── Downloads and resources (/downloads/) ────────────────────────────── */
.dl-hero { background: var(--ink); color: #e9edf0; }
.dl-hero .wrap { padding-top: 56px; padding-bottom: 56px; }
.dl-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.dl-hero .sub { color: #b9c2ca; font-size: 1.1rem; max-width: 40em; margin: 16px 0 24px; }
.dl-hero .note, .dl-hero .note a { color: #b9c2ca; }
.dl-hero .note b { color: #fff; }
.dl-main section { margin-top: 56px; }
.dl-main section:last-of-type { margin-bottom: 80px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.dl-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.dl-card p { color: var(--lead); margin: 0; }
.dl-card .meta { font-size: 0.88rem; }
.dl-card .btn { align-self: flex-start; margin-top: auto; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.dl-hero .btn.ghost { color: #fff; border-color: #fff; }
.note { font-size: 0.92rem; color: var(--lead); margin-top: 14px; }
[hidden] { display: none !important; }

/* "Use it in your browser" under the beta form (owner 2026-10-16). */
.try-web { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.try-web span { color: #9aa7b1; font-size: 0.92rem; }
.hero .btn.ghost { color: #fff; border-color: #fff; }
.hero .btn.ghost:hover { background: #fff; color: var(--ink); }

/* The beta sign-up page (/beta/) and its plans (owner 2026-10-16). */
.beta-hero { padding-bottom: 56px; }
.beta-hero .join { max-width: 640px; }
.cta-row { margin: 0 0 10px; }
.dl-card.plan .price { font-size: 1.35rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.dl-grid.plans { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }