/* Klembara Solutions v3, direction A: the Custom apps page.
   Linked after style.css and built only from its tokens, buttons, header,
   footer, dashboard screen, How it works band and depth tokens. One
   showpiece (the dashboard, played by app.js); everything else is still or
   rises in once. */

/* Heading band (paper, under the blue header): H1, his line, his price line */
.ca-band { background: var(--paper); color: var(--ink); padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 3vw, 40px); }
.ca-band h1 {
  font-size: clamp(2.6rem, 1.4rem + 3.8vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.ca-lede {
  margin-top: 22px;
  max-width: 34em;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem);
  line-height: 1.5;
  color: var(--body-p);
}
.ca-band .price-line { background: var(--paper2); color: var(--ink); }

/* The dashboard straddles the charcoal and the paper below it */
.ca-show { position: relative; z-index: 1; background: var(--char); padding: clamp(16px, 2vw, 24px) 0 0; }
.ca-show::after {
  /* bottom -1px: overlaps the paper below so no subpixel seam shows */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44%;
  background: var(--paper);
}
.ca-show .wrap { position: relative; z-index: 1; }
.ca-ex { margin-bottom: 18px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 500; color: var(--on-c); text-wrap: pretty; }

/* What we build (option 1C, owner pick 2026-10-20): one white plate on
   paper holding the heading, the six outcomes in a 3 x 2 grid separated by
   whitespace, and the integrations row in a sunken tile at the foot (no
   shadow on it). Glyph tiles are SOLID with white glyphs (owner: the pale
   tints "look washed out"), colour by meaning: blue for quotes and leads,
   amber for the schedule, green for invoices, charcoal for jobs and
   customers. White glyph on each: blue #0E6FD6 4.93:1, amber #BF7F0C 3.36:1
   (the asked-for #D9930D gave 2.58:1, under 3:1 for a graphic, so it is
   darkened), green #1E8A4C 4.38:1, charcoal #33332F 12.69:1.
   "Can integrate with" #6B6A64 on the #EFEDE7 tile 4.63:1; mark names
   #3E3F43 on it 8.98:1. */
.wb { background: var(--paper); color: var(--ink); padding: clamp(56px, 6vw, 96px) 0; }
.wb-plate {
  padding: clamp(28px, 3.6vw, 52px) clamp(24px, 3.6vw, 56px) clamp(24px, 3vw, 40px);
  border-radius: 16px; background: #FFFFFF var(--plate-fill); box-shadow: var(--plate-shadow);
}
.wb-plate h2 { font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); }
.wb-grid {
  list-style: none; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3.6vw, 52px) clamp(28px, 3.4vw, 52px);
}
.wb-grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.wb-grid h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; }
.wb-grid p { margin-top: 6px; color: var(--body-p); text-wrap: pretty; }
.wb-gt {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--char3); color: #FFFFFF;
  box-shadow: var(--contact);
}
.wb-gt svg { width: 24px; height: 24px; }
.wb-gt.is-blue { background: #0E6FD6; }
.wb-gt.is-amber { background: #BF7F0C; }
.wb-gt.is-green { background: #1E8A4C; }
.wb-gt.is-char { background: #33332F; }
.wb-int {
  margin-top: clamp(36px, 4vw, 56px); padding: clamp(20px, 2.4vw, 28px);
  border-radius: 10px; background: #EFEDE7;
}
.wb-sent { max-width: 46em; color: var(--body-p); text-wrap: pretty; }
.wb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 18px; }
.wb-lead { flex: none; font-weight: 500; color: var(--mut-p); }
.wb-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 24px; }
.wb-marks li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wb-marks img { flex: none; width: 28px; height: 28px; object-fit: contain; }
.wb-marks span { font-size: 14.5px; font-weight: 500; line-height: 1.25; color: var(--body-p); }

/* Closer (charcoal) */
.ca-close-band { background: var(--char); padding: clamp(56px, 6vw, 88px) 0; }
.ca-close {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 64px; align-items: end;
}
.ca-close h2 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.7rem); line-height: 1.03; letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; }
.ca-close .btn { margin-top: 32px; }
.ca-close .contact-lines { margin-top: 0; }

/* Entry motion: the six outcomes rise in once, 90ms apart (the shared .rise
   in style.css); the marks follow the same way, closer together. */
@media (prefers-reduced-motion: no-preference) {
  .js .wb-marks.rise.in > * { animation-delay: calc(var(--i, 0) * 40ms); }
}

/* Responsive */
@media (max-width: 960px) {
  .wb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-close { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .ca-band { padding-top: 28px; padding-bottom: 24px; }
  .ca-band h1 { font-size: 2.5rem; }
  .ca-lede { margin-top: 16px; }
  .ca-band .price-line { margin-top: 18px; }
  .ca-ex { margin-bottom: 14px; }
  .wb, .ca-close-band { padding-top: 56px; padding-bottom: 56px; }
  .wb-plate { margin-left: calc(-1 * var(--gut) + 8px); margin-right: calc(-1 * var(--gut) + 8px); padding: 26px 18px 18px; }
  .wb-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .wb-grid li { flex-direction: row; gap: 14px; }
  .wb-grid h3 { padding-top: 10px; }
  .wb-int { padding: 18px 16px; }
  .wb-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; width: 100%; }
  .ca-close .btn { width: 100%; margin-top: 24px; }
  .ca-close .contact-lines { gap: 6px; }
}