/* diagram-builder marketing site.
   The token block below is copied verbatim from crates/desktop/ui/static/app.css so the
   site and the product are visibly one design system. Do not try to share the file:
   rust-embed folder roots are per-crate, and a ../desktop/ reference would break the
   Docker build context. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #16191d;
  --muted: #626b76;
  --hairline: #dfe3e8;
  --accent: #2a78d6;
  --accent-soft: #e8f0fb;
  --amber: #b4740b;
  --amber-soft: #fdf3e2;
  --red: #c0392b;
  --red-soft: #fcecea;
  --green: #1f7a4d;
  --green-soft: #e4f4ec;
  --radius: 10px;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Two tokens the desktop app does not have, and needs no equivalent of.
     --accent is used there for borders and chrome, where the WCAG threshold is 3:1 and it
     passes at 4.16:1. This site uses the colour for link text and a solid CTA, where the
     threshold is 4.5:1 and it does not. See src/theme.rs, which tests every pair. */
  --accent-strong: #1f66c0;
  --on-accent: #ffffff;

  /* The content measure is literally the diagram page width in points, so a full-bleed
     diagram renders 1:1 at the container's maximum. */
  --page: 1008px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16191d;
    --panel: #1e2228;
    --ink: #e8eaed;
    --muted: #9aa4b0;
    --hairline: #2e343c;
    --accent: #5fa3ea;
    --accent-soft: #1c2a3b;
    --amber: #e0a94a;
    --amber-soft: #33291a;
    --red: #e8796b;
    --red-soft: #37211f;
    --green: #5cc08c;
    --green-soft: #1b2f26;

    --accent-strong: #5fa3ea;
    /* NOT white. button.primary in the desktop app is `background: var(--accent); color:
       #fff`, which in dark mode is white on #5fa3ea at about 2.5:1 -- unreadable. The site
       must not inherit that. */
    --on-accent: #0d1b2e;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); margin: 0 0 0.4em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin: 0 0 0.5em; }
h3 { font-size: 1.15rem; margin: 0 0 0.4em; }
p { margin: 0 0 1em; }

a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--panel); color: var(--ink);
  padding: 10px 16px; border-radius: var(--radius); z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.centred { text-align: center; }

/* --- header ------------------------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
  position: sticky; top: 0; z-index: 5;
}
.site-head nav {
  max-width: var(--page); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--mono); font-weight: 600; font-size: 1rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
}
.nav-links {
  list-style: none; display: flex; gap: 18px; margin: 0; padding: 0;
  margin-right: auto; flex-wrap: wrap;
}
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.925rem; }
.nav-links a:hover { color: var(--ink); }

/* --- layout ------------------------------------------------------------------------- */

.band { max-width: var(--page); margin: 0 auto; padding: 56px 20px; }
.band + .band { padding-top: 0; }
.narrow { max-width: 640px; }
.narrow-ish { max-width: 760px; }
.accent-band {
  background: var(--accent-soft);
  max-width: none; padding-left: 20px; padding-right: 20px;
}
.accent-band > * { max-width: var(--page); margin-left: auto; margin-right: auto; }

.section-title { margin-bottom: 0.6em; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.lede-block { max-width: 68ch; color: var(--muted); font-size: 1.05rem; }
.lede-block strong { color: var(--ink); }
.concession { font-style: italic; }
.footnote { margin-top: 1.2em; font-size: 0.925rem; }

.hero {
  max-width: var(--page); margin: 0 auto; padding: 64px 20px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
}
.hero h1 { margin-bottom: 0.3em; }
.trust { margin-top: 1.2em; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.card {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 20px;
}
.card p { margin-bottom: 0; color: var(--muted); }

.feature-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
}
.feature-grid li {
  padding-left: 22px; position: relative; color: var(--muted);
}
.feature-grid li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
}

.steps { counter-reset: step; list-style: none; margin: 28px 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps li { counter-increment: step; position: relative; padding-top: 40px; }
.steps li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-strong); color: var(--on-accent);
  display: grid; place-items: center; font-size: 0.875rem; font-weight: 600;
}
.steps p { color: var(--muted); margin-bottom: 0; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding-left: 26px; position: relative; margin-bottom: 10px; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700;
}

.closing { text-align: center; }
.closing .lede-block { margin: 0 auto 1.5em; }
.closing .cta-row { justify-content: center; }
.more { font-weight: 600; text-decoration: none; }

/* --- buttons ------------------------------------------------------------------------ */

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; }
.btn {
  display: inline-block; border-radius: var(--radius); border: 1px solid transparent;
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; text-align: center;
}
.btn-primary { background: var(--accent-strong); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-lg { padding: 13px 24px; font-size: 1.05rem; }
.btn-sm { padding: 7px 14px; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* --- diagram frames ----------------------------------------------------------------- */

/* The page in a diagram is white -- that is the product, not a styling accident. Framing
   it keeps a 1008x612 white rectangle from being a searchlight in dark mode. Never invert
   or filter the artwork. */
.page-frame {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}
.page-frame img { display: block; width: 100%; height: auto; }

figure { margin: 0; }
figcaption { margin-top: 10px; color: var(--muted); font-size: 0.925rem; }

/* --- code --------------------------------------------------------------------------- */

.code { position: relative; margin: 16px 0; }
.code pre {
  margin: 0; overflow-x: auto; background: var(--panel);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 16px 16px; font-family: var(--mono); font-size: 0.85rem; line-height: 1.6;
}
.code .copy {
  position: absolute; top: 8px; right: 8px;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 6px;
  padding: 4px 10px; font: inherit; font-size: 0.8rem; cursor: pointer;
}
.code .copy:hover { color: var(--ink); }
code { font-family: var(--mono); font-size: 0.9em; }
:not(pre) > code {
  background: var(--accent-soft); padding: 1px 5px; border-radius: 4px;
}

/* --- tabs and gallery --------------------------------------------------------------- */

/* Links styled as tabs, not role="tablist": they are real URLs with real pages behind
   them, so the anchor is semantically correct and the ARIA tabs keyboard contract (the
   most commonly botched widget on the web) never has to be implemented. */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 24px 0 20px;
  border-bottom: 1px solid var(--hairline); }
.tab {
  padding: 9px 14px; text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.95rem;
}
.tab:hover { color: var(--ink); }
.tab.current { color: var(--ink); border-bottom-color: var(--accent-strong); font-weight: 600; }

.example { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.example-meta h2 { font-size: 1.3rem; }
.example-meta .section-title { font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-top: 1.5em; }

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

.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 820px; margin: 32px auto 0; }
.tier {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 28px; position: relative;
  display: flex; flex-direction: column;
}
.tier.featured { border-color: var(--accent-strong); border-width: 2px; }
.tier-flag {
  position: absolute; top: -11px; left: 24px;
  background: var(--accent-strong); color: var(--on-accent);
  font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 20px;
}
.price { font-size: 2.4rem; font-weight: 700; margin: 0.2em 0 0.1em; letter-spacing: -0.03em; }
.price-unit { font-size: 0.95rem; font-weight: 400; color: var(--muted); }
.seats { font-weight: 600; margin-bottom: 1em; }
.includes { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.includes li { padding-left: 24px; position: relative; margin-bottom: 9px; color: var(--muted); }
.includes li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.buy { margin: 0; }

.disclosure { max-width: 820px; margin: 24px auto 0; color: var(--muted); font-size: 0.9rem; }
.disclosure p { margin-bottom: 0.6em; }
.consent { border-top: 1px solid var(--hairline); padding-top: 12px; }

/* --- FAQ ---------------------------------------------------------------------------- */

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; padding: 16px 30px 16px 0; font-weight: 600; position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 14px;
  font-size: 1.3rem; font-weight: 400; color: var(--muted);
}
.faq details[open] summary::after { content: "−"; }
.faq-a { padding-bottom: 16px; color: var(--muted); max-width: 66ch; }
.faq-a p:last-child { margin-bottom: 0; }

/* --- docs --------------------------------------------------------------------------- */

.doc-layout {
  max-width: var(--page); margin: 0 auto; padding: 48px 20px;
  display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start;
}
.doc-nav ul { list-style: none; margin: 0; padding: 0; position: sticky; top: 80px; }
.doc-nav li { margin-bottom: 8px; }
.doc-nav a { color: var(--muted); text-decoration: none; font-size: 0.925rem; }
.doc-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.doc { max-width: 68ch; }
.doc h2 { margin-top: 1.8em; }
.doc h3 { margin-top: 1.5em; }
.doc table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.925rem; }
.doc th, .doc td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--hairline); }
.doc th { font-weight: 600; }
.doc blockquote {
  margin: 1.2em 0; padding: 2px 0 2px 18px;
  border-left: 3px solid var(--accent); color: var(--muted);
}
.doc-index { list-style: none; margin: 24px 0 0; padding: 0; }
.doc-index li { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.doc-index a { display: block; font-weight: 600; margin-bottom: 2px; }
.doc-index span { font-size: 0.925rem; }

/* --- licence checker ---------------------------------------------------------------- */

.licence-form { display: grid; gap: 8px; margin: 24px 0; max-width: 460px; }
.licence-form label { font-weight: 600; font-size: 0.925rem; }
.licence-form input {
  padding: 11px 14px; font: inherit; font-family: var(--mono); font-size: 0.9rem;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
}
.result {
  border-radius: var(--radius); padding: 16px 18px; margin: 4px 0 20px;
  border: 1px solid var(--hairline); max-width: 460px;
}
.result .result-head { font-weight: 600; margin-bottom: 0.4em; }
.result p:last-child, .result ul:last-child { margin-bottom: 0; }
.result ul { margin: 0; padding-left: 20px; color: var(--muted); }
.result.ok { background: var(--green-soft); border-color: var(--green); }
.result.warn { background: var(--amber-soft); border-color: var(--amber); }
.result.bad { background: var(--red-soft); border-color: var(--red); }

/* htmx sets .htmx-request on the indicator's parent while a request is in flight. */
.spinner { display: none; }
.htmx-request .spinner, .spinner.htmx-request { display: inline-block; }
.spinner::after { content: "Checking…"; color: var(--muted); font-size: 0.9rem; }

.notice {
  background: var(--amber-soft); border: 1px solid var(--amber);
  border-radius: var(--radius); padding: 12px 14px; font-size: 0.9rem;
}

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

.site-foot {
  border-top: 1px solid var(--hairline); background: var(--panel);
  margin-top: 64px; padding: 48px 20px 32px;
}
.foot-grid {
  max-width: var(--page); margin: 0 auto;
  display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px;
}
.foot-brand { max-width: 260px; }
/* The company logo is black artwork, so it sits on a white plaque rather than on the page
   background -- in dark mode it would otherwise be invisible. Same treatment the diagram
   previews get, which makes it read as a deliberate lockup. Replace with a <picture> if a
   dark variant is ever produced. */
.logo-plaque {
  background: #fff; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 12px 14px; display: inline-block; margin-bottom: 14px;
}
.logo-plaque img { display: block; width: 180px; height: auto; }
.foot-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 0.9em; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 8px; }
.foot-col a { color: var(--muted); text-decoration: none; font-size: 0.925rem; }
.foot-col a:hover { color: var(--ink); }
.foot-legal { max-width: var(--page); margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid var(--hairline); }

/* --- responsive --------------------------------------------------------------------- */

/* One breakpoint. No hamburger: five links fit on a wrapped row, and a hamburger is a
   JavaScript dependency and a focus trap bought for nothing. */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; gap: 32px; }
  .two-up, .cards, .steps, .tiers, .example, .feature-grid { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; gap: 24px; }
  .doc-nav ul { position: static; display: flex; gap: 16px; flex-wrap: wrap; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .band { padding: 40px 20px; }
  .cta-row .btn { flex: 1 1 auto; }
  .nav-links { gap: 14px; font-size: 0.9rem; }
}

@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; }
}