/* Background variants for the v4-01 full landing page.
   The page itself is 1280px wide and remains crisp white; the pattern
   shows outside the page on wider viewports AND subtly bleeds through
   the page via a soft top/bottom alpha mask. */

/* Wrap the page in a "matted" frame on bigger screens so the bg pattern
   reads as a deliberate surface, not stray wallpaper. */
.v4-d1-full {
  position: relative;
  border-left: 1px solid #EDEDEF;
  border-right: 1px solid #EDEDEF;
  box-shadow: 0 0 60px -16px rgba(11, 11, 12, 0.06);
}

/* ════════════════════════════════════════════════════════════════════
   VARIANT 1 — WIREFRAME / BLUEPRINT
   Hairline architectural grid + crosshair tile + a few accent boxes.
   ════════════════════════════════════════════════════════════════════ */
body.v4-bg-wireframe {
  background-color: #FBFBFC;
  background-image:
    /* CROSSHAIR tile — registration marks every 240px */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g stroke='%230B0B0C' stroke-opacity='0.10' stroke-width='1' fill='none'><path d='M120 110v-8M120 130v8M110 120h-8M130 120h8'/><circle cx='120' cy='120' r='1.4' fill='%230B0B0C' fill-opacity='0.18'/></g></svg>"),
    /* DIM cell grid — 40px */
    repeating-linear-gradient(0deg,  transparent 0 39px, rgba(11,11,12,0.035) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(11,11,12,0.035) 39px 40px),
    /* MACRO grid — every 8th cell darker for the blueprint feel */
    repeating-linear-gradient(0deg,  transparent 0 319px, rgba(11,11,12,0.07) 319px 320px),
    repeating-linear-gradient(90deg, transparent 0 319px, rgba(11,11,12,0.07) 319px 320px);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-size: 240px 240px, 40px 40px, 40px 40px, 320px 320px, 320px 320px;
}

/* (Light-blue wireframe accent boxes removed for a cleaner background.) */

/* Small floating tick marks on the wireframe boxes — use the page-level
   .v4-d1-full as a positioning anchor for a second decorative SVG group
   that fills the visible body width with corner-bracket annotations. */
body.v4-bg-wireframe .v4-d1-full {
  background: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════════════
   VARIANT 2 — PIXEL / DATA BRICKS
   A sparse "calendar-heatmap" pattern at small scale, like fieldwork
   blocks at low zoom. Ink with occasional product-blue accent.
   ════════════════════════════════════════════════════════════════════ */
body.v4-bg-pixel {
  background-color: #FBFBFC;
  /* The pattern is a 200x200 SVG tile with ~15 small cells filled at
     varying alphas. Repeats seamlessly. Two layers, the lower one
     offset so neighbouring tiles don't line up obviously. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g shape-rendering='crispEdges'><rect x='30'  y='10'  width='10' height='10' fill='%230B0B0C' fill-opacity='0.08'/><rect x='90'  y='30'  width='10' height='10' fill='%230B0B0C' fill-opacity='0.12'/><rect x='160' y='20'  width='10' height='10' fill='%230B0B0C' fill-opacity='0.06'/><rect x='10'  y='70'  width='10' height='10' fill='%230B0B0C' fill-opacity='0.14'/><rect x='50'  y='80'  width='10' height='10' fill='%230B0B0C' fill-opacity='0.06'/><rect x='120' y='60'  width='10' height='10' fill='%230B0B0C' fill-opacity='0.10'/><rect x='180' y='90'  width='10' height='10' fill='%230B0B0C' fill-opacity='0.08'/><rect x='40'  y='130' width='10' height='10' fill='%230B0B0C' fill-opacity='0.12'/><rect x='100' y='110' width='10' height='10' fill='%23007AFF' fill-opacity='0.18'/><rect x='150' y='140' width='10' height='10' fill='%230B0B0C' fill-opacity='0.10'/><rect x='20'  y='180' width='10' height='10' fill='%230B0B0C' fill-opacity='0.06'/><rect x='70'  y='170' width='10' height='10' fill='%230B0B0C' fill-opacity='0.14'/><rect x='130' y='180' width='10' height='10' fill='%230B0B0C' fill-opacity='0.08'/><rect x='190' y='160' width='10' height='10' fill='%23007AFF' fill-opacity='0.12'/></g></svg>"),
    /* Faint underlying grid so the bricks read as cells of a sheet */
    repeating-linear-gradient(0deg,  transparent 0 9px, rgba(11,11,12,0.02) 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(11,11,12,0.02) 9px 10px);
  background-size: 200px 200px, 10px 10px, 10px 10px;
  background-position: 0 0, 0 0, 0 0;
}
body.v4-bg-pixel .v4-d1-full {
  background: #FFFFFF;
}