/* ═══════════════════════════════════════════════════════════════════════
   WiseBlock public site — "the surveyor's notebook".

   Warm paper with a faint drawing grid, navy ink, yellow as the highlighter.
   Headlines in DM Serif Display, everything else in DM Sans. Sections are
   numbered sheets, product screens are marked up rather than floated in
   cards, and lists are ruled like a schedule rather than tiled like a
   template.

   Every rule is scoped under .wb-site (the public layout's <body>), because
   Propshaft's :app tag hands this file to the back office too.

   Accessibility is not negotiable here: body text is #374151 or darker on
   paper (≥ 7:1), muted text #4b5563 (≥ 6.5:1), yellow is never used as text
   on a light ground, and nothing moves under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

.wb-site {
  --wb-ink: #0b173c;
  --wb-navy: #1A3681;
  --wb-navy-600: #22409a;
  --wb-yellow: #FBBA02;
  --wb-yellow-soft: rgba(251, 186, 2, 0.45);
  --wb-paper: #F2F0EA;
  --wb-paper-2: #F7F5EF;
  --wb-text: #2f3644;
  --wb-muted: #4b5563;
  --wb-line: rgba(26, 54, 129, 0.16);
  --wb-line-strong: rgba(26, 54, 129, 0.3);
  --wb-green: #166534;
  --wb-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --wb-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wb-spring: cubic-bezier(0.3, 1.5, 0.5, 1);
  --wb-grid: repeating-linear-gradient(0deg, rgba(26, 54, 129, 0.055) 0 1px, transparent 1px 24px),
             repeating-linear-gradient(90deg, rgba(26, 54, 129, 0.055) 0 1px, transparent 1px 24px);
  --wb-shadow: 0 1px 2px rgba(11, 23, 60, 0.05), 0 24px 48px -28px rgba(11, 23, 60, 0.35);

  background: var(--wb-paper);
  color: var(--wb-text);
  font-family: var(--wb-sans);
}

/* ── Skip link: the first thing a keyboard reaches ── */
.wb-site .wb-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.75rem 1rem; border-radius: 0.5rem;
  background: var(--wb-yellow); color: var(--wb-ink); font-weight: 700; text-decoration: none;
}
.wb-site .wb-skip:focus { top: 1rem; outline: 3px solid var(--wb-ink); outline-offset: 2px; }

/* ── Layout ── */
.wb-site .wb-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .wb-site .wb-wrap { padding: 0 2rem; } }

.wb-site .wb-sec { position: relative; padding: 4.5rem 0; }
@media (min-width: 1024px) { .wb-site .wb-sec { padding: 6.5rem 0; } }
.wb-site .wb-sec--paper { background: var(--wb-grid), var(--wb-paper); }
.wb-site .wb-sec--plain { background: var(--wb-paper-2); }
.wb-site .wb-sec--white { background: #fff; }
.wb-site .wb-sec--ink { background: var(--wb-ink); color: #d6dbe6; }
.wb-site .wb-sec--rule { border-top: 1px solid var(--wb-line-strong); }
.wb-site .wb-sec--tight { padding: 3rem 0; }

/* ── Type ── */
.wb-site .wb-sheet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0 0 1.25rem;
  font: 600 0.75rem/1.4 var(--wb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-navy);
}
.wb-site .wb-sheet > span + span::before { content: "·"; margin-right: 0.75rem; color: rgba(26, 54, 129, 0.45); }
.wb-site .wb-sec--ink .wb-sheet { color: var(--wb-yellow); }
.wb-site .wb-sec--ink .wb-sheet > span + span::before { color: rgba(251, 186, 2, 0.5); }

.wb-site .wb-h1, .wb-site .wb-h2 {
  font-family: var(--wb-serif); font-weight: 400; color: var(--wb-ink); letter-spacing: -0.02em; margin: 0;
}
.wb-site .wb-h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.02; }
.wb-site .wb-h2 { font-size: clamp(2rem, 3.8vw, 3.15rem); line-height: 1.06; }
.wb-site .wb-h1 em, .wb-site .wb-h2 em { font-style: italic; color: var(--wb-navy); }
.wb-site .wb-sec--ink .wb-h1, .wb-site .wb-sec--ink .wb-h2 { color: #fff; }
.wb-site .wb-sec--ink .wb-h1 em, .wb-site .wb-sec--ink .wb-h2 em { color: var(--wb-yellow); }
.wb-site .wb-h3 { font: 700 1.125rem/1.35 var(--wb-sans); color: var(--wb-ink); margin: 0 0 0.375rem; letter-spacing: -0.005em; }
.wb-site .wb-sec--ink .wb-h3 { color: #fff; }

.wb-site .wb-lede { font-size: 1.125rem; line-height: 1.7; color: #374151; margin: 0; max-width: 40rem; }
.wb-site .wb-sec--ink .wb-lede { color: #c9d0de; }
.wb-site .wb-prose { font-size: 1.0625rem; line-height: 1.75; color: #374151; max-width: 44rem; }
.wb-site .wb-prose p { margin: 0 0 1.1em; }
.wb-site .wb-prose strong { color: var(--wb-ink); }
.wb-site .wb-prose a, .wb-site .wb-inline-link { color: var(--wb-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wb-site .wb-prose a:hover, .wb-site .wb-inline-link:hover { text-decoration-thickness: 2px; }
.wb-site .wb-sec--ink .wb-prose { color: #c9d0de; }
.wb-site .wb-sec--ink .wb-prose strong { color: #fff; }
.wb-site .wb-sec--ink .wb-prose a, .wb-site .wb-cta .wb-inline-link { color: #fff; text-decoration-color: var(--wb-yellow); }
.wb-site .wb-sec--ink .wb-prose a:focus-visible { outline: 3px solid var(--wb-yellow); outline-offset: 2px; }

/* The highlighter: yellow under the words, never as the words. */
.wb-site .wb-mark {
  background: linear-gradient(transparent 58%, rgba(251, 186, 2, 0.75) 58%, rgba(251, 186, 2, 0.75) 92%, transparent 92%);
  padding: 0 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ── Buttons and links (press, loading and success states come from shared/_motion_system) ── */
.wb-site .wb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.wb-site .wb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: 0; cursor: pointer;
  background: var(--wb-yellow); color: var(--wb-ink); font: 700 0.9375rem/1.2 var(--wb-sans); text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(11, 23, 60, 0.25), 0 10px 22px -12px rgba(161, 118, 0, 0.65);
}
/* With the motion system's faces (label, busy, done) the button is a grid,
   so the three stack in one cell; as flex they sat side by side and the
   button took the width of all three. */
.wb-site .wb-btn.m-btn { display: inline-grid; place-items: center; }
.wb-site .wb-btn--ink { background: var(--wb-ink); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(11, 23, 60, 0.7); }
.wb-site .wb-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45); }
.wb-site .wb-btn:hover { filter: brightness(1.04); }
.wb-site .wb-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; filter: none; }
.wb-site .wb-btn:focus-visible { outline: 3px solid var(--wb-navy); outline-offset: 3px; }
.wb-site .wb-sec--ink .wb-btn:focus-visible, .wb-site .wb-btn--ink:focus-visible { outline-color: var(--wb-yellow); }
@media (prefers-reduced-motion: no-preference) {
  .wb-site .wb-btn { transition: transform 140ms var(--wb-spring), filter 140ms ease-out; }
  .wb-site .wb-btn:hover { transform: translateY(-1px); }
  .wb-site .wb-btn:active { transform: scale(0.97); transition-duration: 90ms; }
}

.wb-site .wb-link {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px;
  color: var(--wb-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.wb-site .wb-link:hover { text-decoration-thickness: 2px; }
.wb-site .wb-link:active { color: var(--wb-ink); }
.wb-site .wb-link:focus-visible { outline: 3px solid var(--wb-navy); outline-offset: 2px; border-radius: 2px; }
.wb-site .wb-sec--ink .wb-link { color: #fff; }
.wb-site .wb-sec--ink .wb-link:focus-visible { outline-color: var(--wb-yellow); }
.wb-site .wb-link svg { width: 1rem; height: 1rem; }

/* ── Breadcrumbs ── */
.wb-site .wb-crumbs { margin: 0 0 1.5rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.8125rem; color: var(--wb-muted); }
.wb-site .wb-crumbs li + li::before { content: "/"; margin: 0 0.5rem 0 0.25rem; color: rgba(26, 54, 129, 0.4); }
.wb-site .wb-crumbs a { color: var(--wb-navy); text-decoration: none; }
.wb-site .wb-crumbs a:hover { text-decoration: underline; }
.wb-site .wb-crumbs a:focus-visible { outline: 2px solid var(--wb-navy); outline-offset: 2px; }

/* ── Page hero: words on the left, the evidence on the right ── */
.wb-site .wb-hero { padding: 8rem 0 4.5rem; background: var(--wb-grid), var(--wb-paper); }
@media (min-width: 1024px) { .wb-site .wb-hero { padding: 9.5rem 0 6rem; } }
.wb-site .wb-hero-grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) {
  .wb-site .wb-hero-grid { grid-template-columns: 5fr 6fr; gap: 4rem; }
  .wb-site .wb-hero-grid--text { grid-template-columns: 7fr 4fr; align-items: end; }
}
.wb-site .wb-hero .wb-lede { margin-top: 1.5rem; }
.wb-site .wb-hero .wb-actions { margin-top: 2rem; }
.wb-site .wb-hero-facts { list-style: none; margin: 2.25rem 0 0; padding: 0; border-top: 1px solid var(--wb-line-strong); }
.wb-site .wb-hero-facts li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--wb-line); font-size: 0.9375rem; line-height: 1.5; }
.wb-site .wb-hero-facts b { color: var(--wb-navy); }
.wb-site .wb-hero-facts span { color: var(--wb-muted); }

/* ── Section head: title left, the reason right ── */
.wb-site .wb-head { display: grid; gap: 1.25rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .wb-site .wb-head { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: end; } }
.wb-site .wb-head--solo { grid-template-columns: 1fr; max-width: 52rem; }

/* ── An annotated product screen: the real thing, marked up ── */
.wb-site .wb-screen { margin: 0; }
.wb-site .wb-screen-chrome {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.625rem 1rem;
  background: #fff; border: 1px solid var(--wb-line); border-bottom: 0; border-radius: 0.75rem 0.75rem 0 0;
  font-size: 0.8125rem; font-weight: 600; color: var(--wb-muted);
}
.wb-site .wb-screen-chrome i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #d1d5db; }
.wb-site .wb-screen-chrome span { margin-left: 0.5rem; }
.wb-site .wb-screen-frame {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--wb-line); border-radius: 0 0 0.75rem 0.75rem;
  box-shadow: var(--wb-shadow), 0 0 0 6px rgba(251, 186, 2, 0.08);
}
.wb-site .wb-screen-frame img { display: block; width: 100%; height: auto; }
.wb-site .wb-pin {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px;
  display: grid; place-items: center; background: var(--wb-yellow); color: var(--wb-ink);
  border: 2px solid var(--wb-ink); font: 800 0.8125rem/1 var(--wb-sans);
  box-shadow: 0 0 0 4px rgba(251, 186, 2, 0.3);
}
.wb-site .wb-screen-caption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--wb-muted); }

.wb-site .wb-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.wb-site .wb-notes li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.875rem; }
.wb-site .wb-key {
  width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--wb-yellow); border: 2px solid var(--wb-ink); color: var(--wb-ink); font: 800 0.875rem/1 var(--wb-sans);
}
.wb-site .wb-notes strong { display: block; font: italic 400 1.3rem/1.2 var(--wb-serif); color: var(--wb-ink); margin-bottom: 0.3rem; }
.wb-site .wb-notes p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--wb-muted); }
.wb-site .wb-sec--ink .wb-notes strong { color: #fff; }
.wb-site .wb-sec--ink .wb-notes p { color: #c9d0de; }

.wb-site .wb-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
  .wb-site .wb-split { grid-template-columns: 4fr 7fr; gap: 4rem; }
  .wb-site .wb-split--flip { grid-template-columns: 7fr 4fr; }
  .wb-site .wb-split--flip > :first-child { order: 2; }
  .wb-site .wb-split--even { grid-template-columns: 1fr 1fr; }
}

/* ── Ruled rows: a schedule, not a card grid ── */
.wb-site .wb-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wb-line-strong); }
.wb-site .wb-row {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.5rem 1.25rem; padding: 1.5rem 0;
  border-bottom: 1px solid var(--wb-line); align-items: start;
}
@media (min-width: 900px) { .wb-site .wb-row { grid-template-columns: 3.5rem 15rem 1fr; gap: 2rem; } }
.wb-site .wb-row-num { font: 400 1.75rem/1 var(--wb-serif); color: var(--wb-navy); }
.wb-site .wb-row-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: grid; place-items: center; background: #fff; border: 1px solid var(--wb-line); color: var(--wb-navy); }
.wb-site .wb-row-icon svg { width: 1.25rem; height: 1.25rem; }
.wb-site .wb-row .wb-h3 { margin: 0.2rem 0 0; }
.wb-site .wb-row p { margin: 0; font-size: 0.9875rem; line-height: 1.65; color: var(--wb-muted); grid-column: 2; }
@media (min-width: 900px) { .wb-site .wb-row p { grid-column: auto; } }
/* In half a split there's no room for three columns: the title sits over its text. */
@media (min-width: 900px) {
  .wb-site .wb-split .wb-row { grid-template-columns: 2.75rem 1fr; gap: 0.35rem 1.25rem; }
  .wb-site .wb-split .wb-row p { grid-column: 2; }
}
.wb-site .wb-row a { color: var(--wb-navy); font-weight: 600; }
.wb-site .wb-sec--ink .wb-rows { border-color: rgba(255, 255, 255, 0.25); }
.wb-site .wb-sec--ink .wb-row { border-color: rgba(255, 255, 255, 0.12); }
.wb-site .wb-sec--ink .wb-row-num { color: var(--wb-yellow); }
.wb-site .wb-sec--ink .wb-row p { color: #c9d0de; }
.wb-site .wb-sec--ink .wb-row a { color: #fff; }

/* ── Numbered steps on a line ── */
.wb-site .wb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: wbstep; }
@media (min-width: 900px) { .wb-site .wb-steps { grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 2rem; } }
.wb-site .wb-step { position: relative; padding: 0 0 2rem 3.5rem; counter-increment: wbstep; }
.wb-site .wb-step::before {
  content: counter(wbstep); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: grid; place-items: center; background: var(--wb-yellow); border: 2px solid var(--wb-ink);
  font: 800 0.9375rem/1 var(--wb-sans); color: var(--wb-ink);
}
.wb-site .wb-step::after { content: ""; position: absolute; left: 1.08rem; top: 2.4rem; bottom: 0.25rem; border-left: 1.5px dashed var(--wb-line-strong); }
.wb-site .wb-step:last-child::after { display: none; }
@media (min-width: 900px) {
  .wb-site .wb-step { padding: 3.5rem 0 0; }
  .wb-site .wb-step::after { left: 2.6rem; right: -2rem; top: 1.1rem; bottom: auto; border-left: 0; border-top: 1.5px dashed var(--wb-line-strong); }
}
.wb-site .wb-step p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--wb-muted); }
.wb-site .wb-sec--ink .wb-step p { color: #c9d0de; }

/* ── Facts: a specification, read like a drawing's title block ── */
.wb-site .wb-facts { margin: 0; display: grid; border-top: 1px solid var(--wb-line-strong); }
@media (min-width: 768px) { .wb-site .wb-facts { grid-template-columns: repeat(var(--cols, 2), 1fr); column-gap: 3rem; } }
.wb-site .wb-facts div { padding: 1rem 0; border-bottom: 1px solid var(--wb-line); }
.wb-site .wb-facts dt { font: 600 0.75rem/1.4 var(--wb-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-navy); margin-bottom: 0.3rem; }
.wb-site .wb-facts dd { margin: 0; font-size: 0.9875rem; line-height: 1.6; color: var(--wb-text); }

/* ── Chips ── */
.wb-site .wb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.wb-site .wb-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: #fff; border: 1px solid var(--wb-line); font-size: 0.8125rem; font-weight: 600; color: var(--wb-ink); }
.wb-site .wb-sec--ink .wb-chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; }

/* ── Panels: paper cards for a form, a price, a contact block ── */
.wb-site .wb-panel { background: #fff; border: 1px solid var(--wb-line); border-radius: 0.875rem; padding: 1.75rem; box-shadow: var(--wb-shadow); }
.wb-site .wb-panel--ink { background: var(--wb-ink); color: #c9d0de; border-color: transparent; }

/* ── FAQ: real disclosure widgets, keyboard and screen-reader native ── */
.wb-site .wb-faq { border-top: 1px solid var(--wb-line-strong); }
.wb-site .wb-faq details { border-bottom: 1px solid var(--wb-line); }
.wb-site .wb-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none;
  font: 700 1.0625rem/1.4 var(--wb-sans); color: var(--wb-ink);
}
.wb-site .wb-faq summary::-webkit-details-marker { display: none; }
.wb-site .wb-faq summary::after {
  content: ""; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1.5px solid var(--wb-line-strong);
  background: linear-gradient(var(--wb-navy), var(--wb-navy)) center/0.7rem 2px no-repeat,
              linear-gradient(var(--wb-navy), var(--wb-navy)) center/2px 0.7rem no-repeat;
}
.wb-site .wb-faq details[open] summary::after { background: linear-gradient(var(--wb-navy), var(--wb-navy)) center/0.7rem 2px no-repeat; }
.wb-site .wb-faq summary:hover { color: var(--wb-navy); }
.wb-site .wb-faq summary:focus-visible { outline: 3px solid var(--wb-navy); outline-offset: 4px; border-radius: 4px; }
.wb-site .wb-faq .wb-faq-a { padding: 0 3rem 1.5rem 0; font-size: 1rem; line-height: 1.7; color: var(--wb-muted); }
.wb-site .wb-faq .wb-faq-a p { margin: 0 0 0.75rem; }

/* ── Closing call to action: one verb, everywhere ── */
.wb-site .wb-cta { background: var(--wb-ink); color: #c9d0de; padding: 5rem 0; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .wb-site .wb-cta { padding: 6.5rem 0; } }
.wb-site .wb-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 24px),
              repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 24px);
}
.wb-site .wb-cta-grid { position: relative; display: grid; gap: 2rem; }
@media (min-width: 1024px) { .wb-site .wb-cta-grid { grid-template-columns: 7fr 5fr; align-items: end; gap: 4rem; } }
.wb-site .wb-cta .wb-h2 { color: #fff; }
.wb-site .wb-cta .wb-h2 em { color: var(--wb-yellow); }
.wb-site .wb-cta p { margin: 0 0 1.75rem; font-size: 1.0625rem; line-height: 1.7; }

/* ── Related pages: contextual links, the way the SEO audit asked ── */
.wb-site .wb-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--wb-line-strong); }
@media (min-width: 900px) { .wb-site .wb-related { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; } }
.wb-site .wb-related a { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--wb-line); text-decoration: none; color: inherit; }
.wb-site .wb-related b { font-size: 1rem; color: var(--wb-ink); }
.wb-site .wb-related span { grid-column: 1; font-size: 0.875rem; line-height: 1.5; color: var(--wb-muted); }
.wb-site .wb-related svg { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 1.125rem; height: 1.125rem; color: var(--wb-navy); }
.wb-site .wb-related a:hover b { color: var(--wb-navy); text-decoration: underline; text-underline-offset: 3px; }
.wb-site .wb-related a:focus-visible { outline: 3px solid var(--wb-navy); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .wb-site .wb-related svg { transition: transform 140ms var(--wb-spring); }
  .wb-site .wb-related a:hover svg { transform: translateX(3px); }
}

/* ── A note that sample data is sample data ── */
.wb-site .wb-note { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.5; color: var(--wb-muted); margin-top: 1rem; }
.wb-site .wb-note svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.1rem; color: var(--wb-navy); }
.wb-site .wb-sec--ink .wb-note { color: #c9d0de; }
.wb-site .wb-sec--ink .wb-note svg { color: var(--wb-yellow); }

/* ── Tables (pricing, comparisons) ── */
.wb-site .wb-table-wrap { overflow-x: auto; border: 1px solid var(--wb-line); border-radius: 0.875rem; background: #fff; }
.wb-site .wb-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 36rem; }
.wb-site .wb-table th, .wb-site .wb-table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--wb-line); vertical-align: top; }
.wb-site .wb-table thead th { font: 600 0.75rem/1.4 var(--wb-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wb-navy); background: var(--wb-paper-2); }
.wb-site .wb-table tbody th { font-weight: 700; color: var(--wb-ink); }
.wb-site .wb-table tr:last-child td, .wb-site .wb-table tr:last-child th { border-bottom: 0; }

/* ── Forms on the public site ── */
.wb-site .wb-field { display: grid; gap: 0.4rem; }
.wb-site .wb-label { font-size: 0.875rem; font-weight: 600; color: var(--wb-ink); }
.wb-site .wb-input, .wb-site .wb-select, .wb-site .wb-textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border-radius: 0.5rem; border: 1.5px solid #c9cfdc; background: #fff;
  font: 400 1rem/1.4 var(--wb-sans); color: var(--wb-ink);
}
.wb-site .wb-textarea { min-height: 8rem; resize: vertical; }
.wb-site .wb-input:hover, .wb-site .wb-select:hover, .wb-site .wb-textarea:hover { border-color: #9aa5bd; }
.wb-site .wb-input:focus-visible, .wb-site .wb-select:focus-visible, .wb-site .wb-textarea:focus-visible { outline: 3px solid rgba(26, 54, 129, 0.35); outline-offset: 1px; border-color: var(--wb-navy); }
.wb-site .wb-error { color: #b42318; font-size: 0.875rem; }

/* ═══════════════ Header, mega menu, footer ═══════════════ */
.wb-site .wb-header { position: fixed; inset: 0 0 auto 0; z-index: 60; background: var(--wb-ink); }
.wb-site .wb-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6); }
.wb-site .wb-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.wb-site .wb-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: #fff; font: 800 1.25rem/1 var(--wb-sans); letter-spacing: -0.01em; }
.wb-site .wb-logo img { width: 2.1rem; height: 2.1rem; }
.wb-site .wb-logo b { color: var(--wb-yellow); font-weight: inherit; }
.wb-site .wb-logo:focus-visible { outline: 3px solid var(--wb-yellow); outline-offset: 4px; border-radius: 4px; }
.wb-site .wb-nav-links { display: none; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1100px) { .wb-site .wb-nav-links { display: flex; } }
.wb-site .wb-nav-links > li > a, .wb-site .wb-nav-trigger {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0 0.85rem; border-radius: 0.5rem;
  color: #dfe4ef; font: 500 0.9375rem/1 var(--wb-sans); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.wb-site .wb-nav-links > li > a:hover, .wb-site .wb-nav-trigger:hover, .wb-site .wb-nav-trigger[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.07); }
.wb-site .wb-nav-links > li > a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--wb-yellow); border-radius: 0; }
.wb-site .wb-nav-links a:focus-visible, .wb-site .wb-nav-trigger:focus-visible { outline: 3px solid var(--wb-yellow); outline-offset: 0; }
.wb-site .wb-nav-trigger svg { width: 0.8rem; height: 0.8rem; }
@media (prefers-reduced-motion: no-preference) { .wb-site .wb-nav-trigger svg { transition: transform 160ms var(--wb-ease); } }
.wb-site .wb-nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.wb-site .wb-nav-right { display: flex; align-items: center; gap: 0.5rem; }
.wb-site .wb-nav-signin { display: none; min-height: 44px; align-items: center; padding: 0 0.85rem; color: #dfe4ef; font-weight: 500; font-size: 0.9375rem; text-decoration: none; border-radius: 0.5rem; }
@media (min-width: 640px) { .wb-site .wb-nav-signin { display: inline-flex; } }
.wb-site .wb-nav-signin:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.wb-site .wb-nav-signin:focus-visible { outline: 3px solid var(--wb-yellow); }
.wb-site .wb-nav .wb-btn { min-height: 40px; padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.wb-site .wb-burger { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 0.5rem; background: none; border: 0; color: #fff; cursor: pointer; }
@media (min-width: 1100px) { .wb-site .wb-burger { display: none; } }
.wb-site .wb-burger:hover { background: rgba(255, 255, 255, 0.08); }
.wb-site .wb-burger:focus-visible { outline: 3px solid var(--wb-yellow); }
.wb-site .wb-burger svg { width: 1.5rem; height: 1.5rem; }

/* The Product menu: every module, grouped the way a managing agent's week is. */
.wb-site .wb-mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--wb-grid), var(--wb-paper);
  border-bottom: 1px solid var(--wb-line-strong); box-shadow: 0 30px 60px -30px rgba(11, 23, 60, 0.55);
}
.wb-site .wb-mega[hidden] { display: none; }
.wb-site .wb-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr; gap: 2rem; padding: 2rem 0 1.25rem; }
.wb-site .wb-mega-title { margin: 0 0 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--wb-line-strong); font: 600 0.75rem/1.4 var(--wb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-navy); }
.wb-site .wb-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.wb-site .wb-mega a { display: block; padding: 0.45rem 0.5rem; margin: 0 -0.5rem; border-radius: 0.4rem; text-decoration: none; }
.wb-site .wb-mega a b { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--wb-ink); }
.wb-site .wb-mega a small { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--wb-muted); }
.wb-site .wb-mega a:hover { background: rgba(255, 255, 255, 0.85); }
.wb-site .wb-mega a:hover b { color: var(--wb-navy); }
.wb-site .wb-mega a:focus-visible { outline: 3px solid var(--wb-navy); outline-offset: 0; }
.wb-site .wb-mega-feature { background: var(--wb-ink); border-radius: 0.875rem; padding: 1.25rem; color: #c9d0de; align-self: start; }
.wb-site .wb-mega-feature .wb-mega-title { color: var(--wb-yellow); border-color: rgba(255, 255, 255, 0.2); }
.wb-site .wb-mega-feature a b { color: #fff; }
.wb-site .wb-mega-feature a small { color: #b9c2d4; }
.wb-site .wb-mega-feature a:hover { background: rgba(255, 255, 255, 0.07); }
.wb-site .wb-mega-feature a:hover b { color: var(--wb-yellow); }
.wb-site .wb-mega-feature a:focus-visible { outline-color: var(--wb-yellow); }
.wb-site .wb-mega-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 0.9rem 0 1.4rem; border-top: 1px solid var(--wb-line); font-size: 0.875rem; color: var(--wb-muted); }
.wb-site .wb-mega-foot a { display: inline; margin: 0 0 0 1.25rem; padding: 0; color: var(--wb-navy); font-weight: 600; }
.wb-site .wb-mega-foot a:hover { background: none; text-decoration: underline; }

/* Mobile menu: the same map, as disclosure groups. */
.wb-site .wb-mobile { position: fixed; inset: 4rem 0 0 0; overflow-y: auto; background: var(--wb-grid), var(--wb-paper); padding: 1rem 1rem 3rem; }
.wb-site .wb-mobile[hidden] { display: none; }
@media (min-width: 1100px) { .wb-site .wb-mobile { display: none; } }
.wb-site .wb-mobile details { border-bottom: 1px solid var(--wb-line); }
.wb-site .wb-mobile summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font: 700 1.0625rem/1 var(--wb-sans); color: var(--wb-ink); }
.wb-site .wb-mobile summary::-webkit-details-marker { display: none; }
.wb-site .wb-mobile summary::after { content: "+"; font-size: 1.4rem; color: var(--wb-navy); }
.wb-site .wb-mobile details[open] summary::after { content: "–"; }
.wb-site .wb-mobile ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.wb-site .wb-mobile ul a { display: flex; min-height: 44px; align-items: center; padding: 0 0.25rem; color: var(--wb-navy); font-weight: 600; text-decoration: none; }
.wb-site .wb-mobile > a { display: flex; min-height: 52px; align-items: center; border-bottom: 1px solid var(--wb-line); color: var(--wb-ink); font: 700 1.0625rem/1 var(--wb-sans); text-decoration: none; }
.wb-site .wb-mobile a:focus-visible, .wb-site .wb-mobile summary:focus-visible { outline: 3px solid var(--wb-navy); outline-offset: 2px; }
.wb-site .wb-mobile .wb-actions { margin-top: 1.5rem; }

/* Footer */
.wb-site .wb-footer { background: #060f28; color: #b9c2d4; padding: 4rem 0 2rem; }
.wb-site .wb-footer-top { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .wb-site .wb-footer-top { grid-template-columns: 1.4fr 3fr; gap: 4rem; } }
.wb-site .wb-footer-brand p { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.65; max-width: 22rem; color: #b9c2d4; }
.wb-site .wb-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 768px) { .wb-site .wb-footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .wb-site .wb-footer-cols { grid-template-columns: repeat(5, 1fr); } }
.wb-site .wb-footer-title { margin: 0 0 0.9rem; font: 600 0.75rem/1.4 var(--wb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-yellow); }
.wb-site .wb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.wb-site .wb-footer ul a { display: inline-flex; min-height: 34px; align-items: center; color: #d6dbe6; font-size: 0.9375rem; text-decoration: none; }
.wb-site .wb-footer ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wb-site .wb-footer a:focus-visible, .wb-site .wb-footer button:focus-visible { outline: 2px solid var(--wb-yellow); outline-offset: 2px; }
.wb-site .wb-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8125rem; }
.wb-site .wb-footer-bottom p { margin: 0; color: #aeb7c9; }
.wb-site .wb-footer-cookie { background: none; border: 0; padding: 0 0 0 0.75rem; color: #d6dbe6; font: inherit; text-decoration: underline; cursor: pointer; }
.wb-site .wb-socials { display: flex; gap: 0.25rem; }
.wb-site .wb-socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0.5rem; color: #d6dbe6; }
.wb-site .wb-socials a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.wb-site .wb-socials svg { width: 1.1rem; height: 1.1rem; }

/* ═══════════════ Scroll reveal (site_reveal_controller) ═══════════════
   Content is visible by default. Only once the controller has run, and only
   when motion is welcome, does anything wait to be revealed. */
@media (prefers-reduced-motion: no-preference) {
  .wb-site.wb-reveal-on [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity 640ms var(--wb-ease), transform 640ms var(--wb-ease);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .wb-site.wb-reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ═══════════════ Papers: the document a page is about, drawn ═══════════════
   An invoice, a bank statement, a demand, a quote — set on the hero as the
   evidence, the way a surveyor clips the relevant sheet to the drawing.
   Real text (readable on a phone, and by search), sample data labelled
   illustrative, and a second sheet behind for depth. */
.wb-site .wb-paper-stack { position: relative; max-width: 36rem; margin: 0 auto; padding: 0.75rem 0.75rem 1.5rem; }
.wb-site .wb-paper-stack::before {
  content: ""; position: absolute; inset: 1.4rem 0.2rem 0.8rem 1.6rem; border-radius: 0.5rem;
  background: #fbfaf6; border: 1px solid var(--wb-line); transform: rotate(2.2deg);
  box-shadow: 0 18px 40px -26px rgba(11, 23, 60, 0.45);
}
.wb-site .wb-paper {
  position: relative; background: #fff; border: 1px solid var(--wb-line-strong); border-radius: 0.5rem;
  padding: 1.5rem 1.5rem 1.25rem; transform: rotate(-1deg); font-size: 0.875rem; line-height: 1.5; color: var(--wb-text);
  box-shadow: 0 2px 4px rgba(11, 23, 60, 0.05), 0 30px 60px -32px rgba(11, 23, 60, 0.5);
}
@media (max-width: 640px) { .wb-site .wb-paper { transform: none; padding: 1.25rem 1.1rem 1rem; } .wb-site .wb-paper-stack::before { display: none; } }
.wb-site .wb-paper-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: 0.875rem; margin-bottom: 0.75rem; border-bottom: 2px solid var(--wb-ink); }
.wb-site .wb-paper-kind { font: 600 0.6875rem/1.4 var(--wb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-navy); }
.wb-site .wb-paper-title { display: block; margin-top: 0.2rem; font: 400 1.35rem/1.15 var(--wb-serif); color: var(--wb-ink); }
.wb-site .wb-paper-meta { text-align: right; font-size: 0.75rem; color: var(--wb-muted); white-space: nowrap; }
.wb-site .wb-paper-meta b { display: block; color: var(--wb-ink); font-size: 0.8125rem; }
.wb-site .wb-paper-lines { list-style: none; margin: 0; padding: 0; }
.wb-site .wb-paper-lines li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.42rem 0; border-bottom: 1px solid #eef0f5; }
.wb-site .wb-paper-lines li > span:first-child { flex: 1; min-width: 0; }
.wb-site .wb-paper-lines small { display: block; color: var(--wb-muted); font-size: 0.75rem; }
.wb-site .wb-paper-lines b, .wb-site .wb-paper-amt { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wb-ink); }
.wb-site .wb-paper-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.02em; }
.wb-site .wb-paper-total { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0 0.2rem; font-weight: 700; color: var(--wb-ink); }
.wb-site .wb-paper-total b { font: 400 1.25rem/1 var(--wb-serif); }
.wb-site .wb-paper-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 0.9rem; font-size: 0.75rem; color: var(--wb-muted); }
.wb-site .wb-paper-tick, .wb-site .wb-paper-ask {
  flex-shrink: 0; width: 1.15rem; height: 1.15rem; border-radius: 999px; display: inline-grid; place-items: center; font-size: 0.6875rem; font-weight: 800; align-self: center;
}
.wb-site .wb-paper-tick { background: var(--wb-green); color: #fff; }
.wb-site .wb-paper-tick svg { width: 0.65rem; height: 0.65rem; }
.wb-site .wb-paper-ask { background: #fef3c7; color: #92400e; border: 1.5px solid #f59e0b; }
.wb-site .wb-paper-lines li.is-ask { background: linear-gradient(90deg, rgba(254, 243, 199, 0.7), transparent); margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.wb-site .wb-stamp {
  display: inline-block; padding: 0.3rem 0.65rem; border: 2px solid currentColor; border-radius: 0.3rem; transform: rotate(-4deg);
  font: 800 0.6875rem/1.2 var(--wb-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wb-green); background: rgba(255, 255, 255, 0.85);
}
.wb-site .wb-stamp--navy { color: var(--wb-navy); }
.wb-site .wb-paper-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.wb-site .wb-paper-tag { padding: 0.15rem 0.55rem; border-radius: 999px; background: #e8ecf5; color: var(--wb-navy); font-size: 0.75rem; font-weight: 700; }
.wb-site .wb-paper-tag--urgent { background: #fef3c7; color: #92400e; }
.wb-site .wb-paper-photo { position: relative; border-radius: 0.375rem; overflow: hidden; aspect-ratio: 16 / 10; margin: 0.25rem 0 0.75rem; }
.wb-site .wb-paper-photo svg { display: block; width: 100%; height: 100%; }
.wb-site .wb-paper-box { position: absolute; left: 34%; top: 9%; width: 50%; height: 38%; border: 2.5px solid var(--wb-yellow); border-radius: 0.3rem; box-shadow: 0 0 0 1px rgba(11, 23, 60, 0.35); }
.wb-site .wb-paper-box span { position: absolute; left: -2.5px; bottom: 100%; margin-bottom: 3px; padding: 0.1rem 0.35rem; border-radius: 0.2rem; background: var(--wb-yellow); color: var(--wb-ink); font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.wb-site .wb-paper-buttons { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.wb-site .wb-paper-buttons span { flex: 1; text-align: center; padding: 0.55rem; border-radius: 0.4rem; font-weight: 700; font-size: 0.8125rem; background: var(--wb-ink); color: #fff; }
.wb-site .wb-paper-buttons span + span { background: #fff; color: var(--wb-ink); box-shadow: inset 0 0 0 1.5px var(--wb-line-strong); }
.wb-site .wb-paper-illustrative { margin: 0.6rem 0 0; text-align: center; font-size: 0.75rem; color: var(--wb-muted); }

/* The drawing title block: a sheet's identity, boxed. */
.wb-site .wb-titleblock { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--wb-ink); }
.wb-site .wb-titleblock div { padding: 0.6rem 0.75rem; border-right: 1px solid var(--wb-line-strong); border-bottom: 1px solid var(--wb-line-strong); }
.wb-site .wb-titleblock div:nth-child(2n) { border-right: 0; }
.wb-site .wb-titleblock .is-wide { grid-column: 1 / -1; border-right: 0; }
.wb-site .wb-titleblock dt { font: 600 0.625rem/1.4 var(--wb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-navy); }
.wb-site .wb-titleblock dd { margin: 0.15rem 0 0; font-size: 0.875rem; color: var(--wb-ink); font-weight: 600; overflow-wrap: anywhere; }
.wb-site .wb-titleblock dd a { color: var(--wb-navy); }

/* The block drawing (an elevation with keyed pins) and its schedule. */
.wb-site .wb-drawing { margin: 0; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--wb-line-strong); box-shadow: var(--wb-shadow); }
.wb-site .wb-drawing svg { display: block; width: 100%; height: auto; }
.wb-site .wb-dl { fill: none; stroke: var(--wb-navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wb-site .wb-dl--thin { stroke-width: 0.9; }
.wb-site .wb-dl--dash { stroke-dasharray: 4 4; }
.wb-site .wb-dl--ground { stroke: var(--wb-ink); stroke-width: 2.5; }
.wb-site .wb-dl--hatch { stroke: rgba(26, 54, 129, 0.35); stroke-width: 0.8; }
.wb-site .wb-dlabel { font: 600 11px var(--wb-sans); fill: var(--wb-navy); letter-spacing: 0.08em; }
.wb-site .wb-dpin circle { fill: var(--wb-yellow); stroke: var(--wb-ink); stroke-width: 1.5; }
.wb-site .wb-dpin text { font: 700 13px var(--wb-sans); fill: var(--wb-ink); text-anchor: middle; dominant-baseline: central; }
.wb-site .wb-dleader { fill: none; stroke: var(--wb-ink); stroke-width: 1; }
.wb-site .wb-drawing-key { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wb-line-strong); }
.wb-site .wb-drawing-key li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.7rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--wb-line); font-size: 0.875rem; line-height: 1.45; }
.wb-site .wb-drawing-key li:last-child { border-bottom: 0; }
.wb-site .wb-drawing-key b { display: block; color: var(--wb-ink); }
.wb-site .wb-drawing-key small { color: var(--wb-muted); font-size: 0.8125rem; }
.wb-site .wb-drawing-key .wb-key { width: 1.6rem; height: 1.6rem; font-size: 0.75rem; border-width: 1.5px; }
@media (prefers-reduced-motion: no-preference) {
  .wb-site .wb-ddraw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wb-draw 1.2s var(--wb-ease) 0.3s forwards; }
  .wb-site .wb-dpin { animation: wb-drop 0.45s var(--wb-spring) both; transform-box: fill-box; transform-origin: center; }
  .wb-site .wb-dpin.p1 { animation-delay: 1.1s; } .wb-site .wb-dpin.p2 { animation-delay: 1.2s; }
  .wb-site .wb-dpin.p3 { animation-delay: 1.3s; } .wb-site .wb-dpin.p4 { animation-delay: 1.4s; }
  .wb-site .wb-stamp { animation: wb-stamp 0.5s var(--wb-spring) 0.9s both; }
}
@keyframes wb-draw { to { stroke-dashoffset: 0; } }
@keyframes wb-drop { from { transform: translateY(-10px) scale(0.6); } to { transform: none; } }
@keyframes wb-stamp { from { transform: rotate(-4deg) scale(1.6); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }

/* ═══════════════ Phones: the WiseBlock app, as it is ═══════════════
   Real screens from the app, two to a hero: the front one set lower and
   turned a little, the one behind it upright, the way two phones lie on a desk. */
.wb-site .wb-phones { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0; max-width: 35rem; margin: 0 auto; padding: 1rem 0 0.5rem; }
.wb-site .wb-phone {
  position: relative; margin: 0; border-radius: 2.4rem; padding: 0.55rem; background: linear-gradient(160deg, #1d2b55, var(--wb-ink) 55%);
  box-shadow: 0 0 0 1px rgba(11, 23, 60, 0.6), 0 40px 70px -36px rgba(11, 23, 60, 0.65), 0 12px 24px -16px rgba(11, 23, 60, 0.4);
}
.wb-site .wb-phone img { display: block; width: 100%; height: auto; border-radius: 1.9rem; aspect-ratio: 600 / 1304; object-fit: cover; object-position: top; background: #f6f7fb; }
.wb-site .wb-phone:first-child { transform: translate(14%, 2.5rem) rotate(-4deg); z-index: 2; }
.wb-site .wb-phone:last-child { transform: translateX(-6%); z-index: 1; }
.wb-site .wb-phones-cap { grid-column: 1 / -1; margin: 3.25rem 0 0; text-align: center; font-size: 0.8125rem; color: var(--wb-muted); }
@media (max-width: 640px) {
  .wb-site .wb-phones { max-width: 22rem; }
  .wb-site .wb-phone { border-radius: 1.7rem; padding: 0.4rem; }
  .wb-site .wb-phone img { border-radius: 1.35rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .wb-site .wb-phone { transition: transform 0.5s var(--wb-spring); }
  .wb-site .wb-phones:hover .wb-phone:first-child { transform: translate(10%, 2.25rem) rotate(-6deg); }
  .wb-site .wb-phones:hover .wb-phone:last-child { transform: translate(-4%, -0.4rem); }
}
.wb-site .wb-drawing-head { display: flex; justify-content: space-between; margin: 0; padding: 0.6rem 1rem; border-top: 1px solid var(--wb-line-strong); font: 600 0.6875rem/1.4 var(--wb-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-navy); }
.wb-site .wb-paper-head--plain { border-bottom: 0; margin-bottom: 0.25rem; }
.wb-site .wb-paper-quoted { font-size: 0.75rem; font-weight: 600; color: var(--wb-muted); white-space: nowrap; }