/* Light Office Blue, matching the palette the rest of the public site declares
   inline (index / tools / pricing / faq). These pages used to ship a dark
   palette, so following "Download" or "Contact" from the light home page
   dropped the visitor onto a black page mid-journey. */
:root {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f0f4f9;
  --ink: #182130;
  --muted: #42597a;
  --quiet: #526988;
  --line: rgba(15, 23, 42, .10);
  --line-strong: rgba(0, 120, 212, .45);
  --blue: #0078d4;
  --blue-2: #106ebe;
  /* --blue on the #eef2f7 canvas is 4.0:1 - under the 4.5:1 AA needs for
     text below 18.66px. Fills and logotypes keep --blue; anything read as
     a word uses this. */
  --blue-ink: #005a9e;
  --green: #0a7a3a;
  --amber: #c97f00;
  --red: #d1293f;
  --r: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  position: relative;
  background: transparent;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

/* ONE INFINITE CANVAS, matching the home and tools pages: a fixed ambience
   layer that stays put in the viewport, plus one document-length dot grid
   that pans with the scroll. Painted from theme variables so the same stack
   works on CoLateral Dark and on every light theme. No section may paint an
   opaque background of its own or the canvas visibly stops there. */
.canvas-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: var(--bg);
}

.canvas-dots {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 20%, transparent) 1px, transparent 1.5px);
  background-size: 26px 26px;
}

/* CANVAS TOOLS: small tool / note / RFI cards pinned into the page gutters,
   mirroring real objects from the Project Canvas. They are anchored to the
   document so they scroll away like canvas objects, sit behind the content
   (.wrap is z-index 1), and are purely decorative. */
.sec-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.cvf {
  position: absolute;
  width: 236px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  overflow: hidden;
  opacity: .88;
  animation: cvfFloat 11s ease-in-out infinite alternate;
}

.cvf-sm { width: 210px; }

.cvf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.cvf-ic { display: inline-flex; flex: none; color: var(--blue); }
.cvf-ic svg { width: 14px; height: 14px; }
.cvf-ic-dim { color: var(--muted); opacity: .85; }

.cvf-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }

.cvf-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cvf-sub {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--quiet);
  white-space: nowrap;
}

.cvf-body {
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cvf-metric {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.cvf-metric b { color: var(--ink); font-weight: 750; white-space: nowrap; }

.cvf-util { display: flex; align-items: center; gap: 8px; margin-top: 2px; }

.cvf-util-bar {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.cvf-util-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--blue,#0078d4);
}

.cvf-pass,
.cvf-open {
  flex: none;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 999px;
}

.cvf-pass {
  color: var(--bg, #fff);
  background: var(--green);
  border: 1px solid var(--green);
}

.cvf-open {
  color: #fff;
  background: #965d00;
  border: 1px solid #965d00;
}

.cvf-note-body { font-size: 11px; line-height: 1.5; color: var(--muted); }

.cvf-spark { display: block; width: 100%; height: auto; }
.cvf-spark .axis { stroke: color-mix(in srgb, var(--ink) 32%, transparent); }
.cvf-spark .curve { stroke: var(--blue); fill: color-mix(in srgb, var(--blue) 14%, transparent); }

@keyframes cvfFloat {
  from { transform: translateY(-6px); }
  to { transform: translateY(7px); }
}

/* The gutter cards need real side room; below this they would crowd the copy. */
@media (max-width: 1359px) { .sec-canvas { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .canvas-bg:before,
  .cvf { animation: none; }
}

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

.wrap { position: relative; z-index: 1; width: min(1120px, calc(100% - 36px)); margin: auto; }

main { position: relative; display: block; }

.public-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.public-nav-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.public-brand-logo {
  width: 26px;
  height: 26px;
  flex: none;
}

.public-brand-word span { color: var(--blue); }

.public-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.public-links a {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.public-links a:hover,
.public-links a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(15, 23, 42, .04);
}

.public-links .nav-cta {
  color: var(--on-blue, #fff);
  border-color: transparent;
  background: var(--blue-2);
}

.hero {
  padding: 78px 0 34px;
}

.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .14em;
}

h1 {
  max-width: 900px;
  margin: 14px 0 18px;
  color: var(--ink);
  font-size: clamp(42px, 6vw, 72px);
  line-height: .98;
  letter-spacing: -.05em;
}

h2 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -.03em;
}

h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

/* Tool copy is generated from the catalogue, and a blurb like
   "Fink/Howe/Pratt/Warren/mono/scissor" has no break opportunity - a browser
   will not break after a slash. One 35-character token pushed the wood truss
   page 25px past a 320px viewport. Breaking inside a word is the lesser evil
   against a page that scrolls sideways. */
p { color: var(--muted); margin: 0 0 14px; overflow-wrap: break-word; }

.lede {
  max-width: 760px;
  font-size: 18px;
  overflow-wrap: break-word;
}

.hero-badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.hero-badge-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: 12px;
  font-weight: 720;
}

.hero-actions,
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(15, 23, 42, .04);
  color: var(--ink);
  font-weight: 820;
}

.btn.primary {
  border-color: transparent;
  background: var(--blue-2);
  color: var(--on-blue, #fff);
}

.section {
  padding: 32px 0 60px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card,
.form-panel,
.policy-panel,
.status-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.card { padding: 20px; min-height: 148px; }

.card p:last-child { margin-bottom: 0; }

/* The download card matching the visitor's own OS. Detection is a guess, so
   this marks the card rather than hiding the other two. */
.card-recommended { border-color: rgba(77, 166, 255, .45); }
.card-recommended .card-head .chip:last-child {
  background: rgba(77, 166, 255, .16);
  border-color: rgba(77, 166, 255, .45);
}

a.card { display: block; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.card:hover,
a.card:focus-visible {
  border-color: rgba(77,166,255, .45);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

.chip,
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(15, 23, 42, .04);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.status-chip.implemented { color: var(--green); }
.status-chip.in-progress { color: var(--blue-ink); }
.status-chip.planned { color: var(--amber); }
.status-chip.enterprise-roadmap { color: var(--muted); }

.form-panel { padding: 24px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.form-grid .wide { grid-column: 1 / -1; }

.form-grid input,
.form-grid textarea,
.form-grid select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 12px 13px;
}

.form-grid textarea { min-height: 150px; resize: vertical; }
.form-grid select option { background: var(--surface); color: var(--ink); }

.note {
  color: var(--quiet);
  font-size: 12px;
}

.policy-panel {
  padding: 10px 0;
  overflow: hidden;
}

.policy-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
}

.policy-row:first-child { border-top: 0; }

.policy-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.policy-row h2 {
  margin: 0;
  font-size: 20px;
}

.policy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}

.policy-icon svg { width: 21px; height: 21px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.card-iconed .chip { margin: 0; }

.card .policy-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.card .policy-icon svg { width: 19px; height: 19px; }

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.roadmap-column {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(8, 14, 21, .72);
}

.roadmap-column ul,
.plain-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.roadmap-column li,
.plain-list li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(15, 23, 42, .04);
}

.status-panel {
  padding: 6px 0;
}

.status-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

.status-row:first-child { border-top: 0; }

/* The footer floats on the same canvas - no wash or competing grid of its own. */
.public-footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 58px 0 46px;
  background: transparent;
}

.footer-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr));
  gap: 28px;
}

.footer-brand {
  display: grid;
  align-content: start;
  gap: 18px;
}

.footer-logo {
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.05em;
}

.footer-logo span { color: var(--blue); }

.footer-note {
  max-width: 330px;
  color: var(--muted);
  font-size: 13px;
}

.footer-col h3 {
  margin: 0 0 18px;
  color: var(--quiet);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
}

.footer-col a {
  display: block;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.footer-col a:hover { color: var(--ink); }

/* Home column: every entry leads back to the public site, so the links read as
   one grouped set of buttons instead of three loose text links. */
.footer-col-home {
  display: grid;
  align-content: start;
  gap: 8px;
}

.footer-col-home h3 { margin: 0 0 10px; }

.footer-col-home a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  font-size: 12.5px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.footer-col-home a:after {
  content: "\2192";
  font-size: 12px;
  opacity: .45;
  transition: transform .2s ease, opacity .2s ease;
}

.footer-col-home a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}

.footer-col-home a:hover:after {
  opacity: .9;
  transform: translateX(3px);
}

.footer-socials {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(15, 23, 42, .04);
  color: var(--muted);
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.social-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.social-btn:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(77,166,255, .1);
}

/* Footer email button: match the width and height of the Contact button
   below it so the two read as one stacked action group. */
.footer-brand .footer-socials { display: grid; }

.footer-brand .social-btn {
  width: 100%;
  height: auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 820;
}

.footer-legal-bar {
  position: relative;
  border-top: 1px solid var(--line);
  margin-top: 46px;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-legal-bar p {
  font-size: 12px;
  color: var(--quiet);
  margin: 0;
}

.footer-legal-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.footer-legal-links a {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  padding: 5px 10px;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.footer-legal-links a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(15, 23, 42, .04);
}

@media (max-width: 980px) {
  .grid,
  .grid.four,
  .footer-layout {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .public-nav { position: static; }
  .public-nav-inner { align-items: flex-start; flex-direction: column; padding: 16px 0; }
  .public-links { margin-left: 0; }
  .hero { padding-top: 54px; }
  .section-head { display: block; }
  .grid,
  .grid.two,
  .grid.four,
  .roadmap,
  .form-grid,
  .policy-row,
  .status-row,
  .footer-layout {
    grid-template-columns: 1fr;
  }

  .policy-row { gap: 10px; }
}

/* Tool landing pages, generated by apps/web/scripts/tool-pages.mjs. They reuse
   the public page shell above; only the breadcrumb and the screenshot figure
   are new. */
.tool-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--quiet, var(--muted));
}

.tool-breadcrumb a { color: inherit; text-decoration: none; }
.tool-breadcrumb a:hover { color: var(--blue-ink); text-decoration: underline; }
.tool-breadcrumb span[aria-hidden] { opacity: .45; }
.tool-breadcrumb [aria-current] { color: var(--ink); }

.tool-shot figure { margin: 0; }

.tool-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r, 16px);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
  background: var(--paper);
}

.tool-shot figcaption {
  margin-top: 12px;
  font-size: .84rem;
  color: var(--quiet, var(--muted));
  text-align: center;
}

/* Resources articles, generated by apps/web/scripts/resource-pages.mjs. The page
   shell is the shared public one above; what is new is a column of running prose,
   which the rest of the site does not have anywhere else. */
.res-body {
  max-width: 46rem;
}

.res-body h2 {
  margin: 44px 0 14px;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.03em;
}

.res-body h2:first-child { margin-top: 0; }

.res-body h3 {
  margin: 30px 0 10px;
  font-size: clamp(17px, 2vw, 20px);
}

.res-body p,
.res-body li {
  color: var(--muted);
  text-wrap: pretty;
}

.res-body p { margin: 0 0 16px; }
.res-body ul,
.res-body ol { margin: 0 0 20px; padding-left: 22px; }
.res-body li { margin-bottom: 8px; }
.res-body a { color: var(--blue-ink); font-weight: 640; }
.res-body a:hover { text-decoration: underline; }
.res-body strong { color: var(--ink); font-weight: 700; }

/* A named quantity, set apart to be scanned for rather than read. */
.res-formula {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r, 12px) var(--r, 12px) 0;
  background: var(--paper2);
  overflow-x: auto;
}

.res-formula code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .95rem;
  color: var(--ink);
  white-space: pre;
}

.res-callout {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r, 12px);
  background: var(--paper2);
}

.res-callout p { margin: 0; color: var(--ink); }

/* Tables scroll inside their own box so a wide one never widens the page. */
.res-table-wrap {
  margin: 0 0 24px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r, 12px);
  /* Opaque: the page sits on a dot grid, and a transparent table lets it show
     through between the rules, which reads as a rendering fault. */
  background: var(--paper);
}

.res-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}

.res-table caption {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--quiet, var(--muted));
  font-size: .84rem;
  text-align: left;
}

.res-table th,
.res-table td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.res-table th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.res-table td { color: var(--muted); }
.res-table tbody tr:last-child td { border-bottom: 0; }

.res-meta,
.res-card-meta {
  color: var(--quiet, var(--muted));
  font-size: .84rem;
  font-weight: 600;
}

.res-meta { margin: 18px 0 0; }
.res-card-meta { margin: 12px 0 0; }
.res-meta-sep { padding: 0 4px; opacity: .5; }

/* Question accordions on the resources pages. faq.html has its own copy of this
   inline because that page is pinned to a fixed palette and does not load this
   stylesheet; these pages do, so the pattern is defined once here for them. */
.faq-list { display: grid; gap: 12px; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r, 12px);
  background: var(--paper);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* The question is a heading so the page has an outline; font:inherit keeps it
   looking like the control it also is. */
.faq-item summary h3 { margin: 0; font: inherit; color: inherit; }

.faq-item summary:after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--blue-ink);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.faq-item[open] summary:after {
  content: "-";
  background: rgba(0, 120, 212, .08);
}

.faq-item .faq-answer { padding: 0 20px 20px; }
.faq-item .faq-answer p { margin: 0; color: var(--muted); text-wrap: pretty; }

/* Said before the download button, not after it. Amber rather than red: this is
   an expectation being set, not an error - the download is fine. */
.note-warn {
  border-left: 3px solid rgba(240, 173, 78, .7);
  padding-left: 10px;
  margin-bottom: 12px;
}