/* fix round 2026-07-30 — targeted overrides, loaded last */
/* 1. The sticky header had a fully transparent background, so every band scrolled through it
   (the intro paragraph and the logo strip both collided with the nav links). */
[data-source-node-id="web-node-00147"]{background:rgba(250,250,250,0.88)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,0.07)}

/* 3. Logo strip: one mark shipped with no company name next to it, so it read as a broken cell. */
[data-source-node-id="web-node-00616"]{display:none!important}

/* ROUND 3 CLASS FIX A - screen-reader-only utilities render visibly.
   The shell emit copies the class name but not the clip, so sr-only copy paints on the page and
   jams into the adjacent label. Restore the standard clip. Covers Fzcv4W_visuallyHidden,
   sr-only and u-sr-only, so it holds on every template that uses any of them. */
.u-sr-only,
.sr-only,
[class*="visuallyHidden"],
[class*="visually-hidden"]{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important;
}

/* ROUND 3 POLISH - V1: the CI/CD terminal card let its longest line run into the card edge
   ('environmen'). Let the mono block wrap inside the card instead of clipping. */
[class*="text-label-13-mono"],[class*="font-mono"]{white-space:pre-wrap!important;overflow-wrap:anywhere!important}

/* ===== J2 + J3 - IMAGE EDGE TREATMENT (Shipyard style-contract item) =====
   Founder round 4: the hero ribbon 'ends in hard rectangle edges' and every other image on the
   template 'lost the fade out style'. Fixed as ONE rule over a SIZE CLASS, not eight per-image
   patches: tools/edge-fade.mjs stamps data-tpl-edge on every raster rendering above 200x140,
   'hero' on anything 600x600+. Two axis gradients intersected produce a true four-edge fade, so
   artwork melts into the page ground on all sides instead of ending in a rectangle. Superseded the
   round-2 left-only hero fade, which is why that rule is gone. Any image added later inherits this
   automatically on the next edge-fade run. */
[data-tpl-edge]{
  --tpl-fade-x:8%;
  --tpl-fade-y:8%;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 var(--tpl-fade-x),#000 calc(100% - var(--tpl-fade-x)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--tpl-fade-y),#000 calc(100% - var(--tpl-fade-y)),transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0,#000 var(--tpl-fade-x),#000 calc(100% - var(--tpl-fade-x)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--tpl-fade-y),#000 calc(100% - var(--tpl-fade-y)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* the hero plate is decorative: it can afford a generous melt on every edge */
[data-tpl-edge="hero"]{
  --tpl-fade-x:18%;--tpl-fade-y:16%;
  /* a third, radial layer melts the CORNERS too - two intersected axis gradients alone still leave a
     faint square ghost where the plate's cream ground meets the page. */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 var(--tpl-fade-x),#000 calc(100% - var(--tpl-fade-x)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--tpl-fade-y),#000 calc(100% - var(--tpl-fade-y)),transparent 100%),
    radial-gradient(ellipse 72% 72% at 50% 50%,#000 35%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0,#000 var(--tpl-fade-x),#000 calc(100% - var(--tpl-fade-x)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--tpl-fade-y),#000 calc(100% - var(--tpl-fade-y)),transparent 100%),
    radial-gradient(ellipse 72% 72% at 50% 50%,#000 35%,transparent 100%);
  -webkit-mask-composite:source-in,source-in;
  mask-composite:intersect,intersect;
}
/* product mockups carry information: fade just enough to lose the rectangle */
[data-tpl-edge="panel"]{--tpl-fade-x:4%;--tpl-fade-y:7%}
/* ===== ROUND 4 J5 =====
   (rule 1 first shipped as a bare [class*="grid-cols-12"] selector, which also matched EIGHT
   main-content grids and re-laid the whole page. Scoped to the footer nav, where the defect is.)
   1. The footer laid 13 link columns across a 12-column grid, so every column was 94px and every
      item wrapped to two or three lines - a wall of fragments. Six columns give each one 220px and
      the whole footer reads as links again. */
footer nav[class*="ss-site-nav"] > [class*="grid-cols"]{grid-template-columns:repeat(6,minmax(0,1fr))!important}

/* 2. Three footer links carried an empty 16px icon slot that rendered as a stray grey pip beside
      the label. The slot has no glyph in this shell, so it has nothing to render. */
nav[class*="ss-site-nav"] span[class*="inline-flex"][class*="shrink-0"]:empty{display:none!important}

/* 3. The CI/CD card is positioned '-right-10' on purpose - the source design lets it hang off the
      panel and crops it. That only reads as a crop and not as a bug while no WORD reaches the cut.
      Our mono copy did ('...for every environmen'). Pad the card's right edge past the crop line so
      the text column wraps before it, and the decorative hang is unchanged. */
[class*="overflow-hidden"] > [class*="-right-10"][class*="font-mono"]{padding-right:48px!important}

/* 4. The 'Instant deploys...' card is a LIGHT card (#fafafa) whose media slot was filled with a
      dark network-map image laid full-bleed over it, so the card's caption - styled text-gray-900
      for a light ground - rendered dark grey on near-black and was effectively unreadable. Light
      ink plus a soft scrim, applied structurally: only a card that actually has a full-bleed image
      child gets it, so the two sibling cards on white are untouched. */
a:has(> img[class*="inset-0"][class*="z-1"]) > header[class*="bottom-5"]{color:#fff!important}
a:has(> img[class*="inset-0"][class*="z-1"]) > header[class*="bottom-5"] *{color:#fff!important}
a:has(> img[class*="inset-0"][class*="z-1"]) > header[class*="bottom-5"]::before{
  content:"";position:absolute;inset:-24px -20px -20px -20px;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));border-radius:inherit;
}
/* ===== R6-5 product-ui mocks ===== */
/* R6-5 SHIPYARD SECTION MOCKS. Founder: 'an abstract pixel-mosaic dashboard where icons read
   as image-noise.' the live source site gives each section ONE real product screenshot plus a
   right-side caption and a feature link list; our layout already matched, the artwork did not.
   The three section panels and the observability panel are now authored product UI with real
   labels (tools/ui-mock.mjs).

   (a) Round 4's J3 edge-fade stamps data-tpl-edge on every raster over 200x140 and fades all
   four edges. That is right for a photographic plate and wrong for a UI screenshot: it ate the
   window chrome off the top of every panel. the live source site screenshots have hard edges and a
   hairline, which these mocks draw themselves, so they opt out.

   (b) The 900x160 strips are absolutely-positioned overlays sitting across the lower third of
   each panel; with a legible panel underneath they read as one screenshot torn in half. Live
   runs ONE image per section, so the overlays are dropped rather than nudged.
   Match counts read out of the HTML BEFORE shipping: ui-mock-*.svg 7, of which the three
   named overlays are 3; ui-mock-productUi-0009 is the standalone observability panel and stays. */
img[src*="ui-mock-"]{
  /* the mocks draw their own hairline and rounded corner; the four-edge fade ate the window
     chrome off the top of every panel, which is right for a photographic plate and wrong for a
     screenshot. A card shadow replaces the fade so the panel still separates from the page -
     the mock's ground is white and Shipyard's page ground is near-white. */
  -webkit-mask-image:none!important;mask-image:none!important;
  border-radius:10px;box-shadow:0 1px 2px rgba(16,16,18,.07),0 10px 30px rgba(16,16,18,.09)}
img[src*="ui-mock-productUi-0006"],
img[src*="ui-mock-productUi-0007"],
img[src*="ui-mock-productUi-0008"]{display:none!important}