/*
  PROJECT — Xometry, Manual Quoting Engine.

  NOT A PORT. There is no Axure export of this page: Xometry post-dates it. The
  source is the Figma file Resume-2026, frame 5031:9980, read on 2026-10-09 with
  the Figma connector (every layer's geometry, text and styling, and the image
  crops). Every top below is that frame's own coordinate. Every LEFT is too,
  minus 34: the frame is 1512 wide and this page, like every page, is 1444
  (owner's rule, 2026-10-12) — see .page below and the canvas line here.

  THE OWNER'S RULE FOR FIGMA WORK (2026-10-09): reuse V2's conventions,
  structures and styles; take the content, writing and layout from Figma; flag
  everything significant that differs. So the shell is Alere's (.page with a
  stated height, one absolutely-positioned .case, .case > * placed by
  coordinate, <site-nav> last), the section titles, callouts, leaders, badges,
  results list, platform plate, people clusters and head are V2's own rules
  carried over from css/projects-alere.css and components.css, and the copy is
  set in the site's 200 weight.

  WHERE V2'S STYLE WAS KEPT OVER FIGMA'S, each is one number to flip:

    canvas       1444, the site's — NOT Figma's 1512 (owner, 2026-10-12). Every
                 Figma x moved 34px left; full-width pieces cut to 1444;
                 left-column copy onto the site's x 64 and the section titles'
                 66px inset, so titles and copy line up as on the other case
                 studies; hero badge, title and lede at their 48 / 179 / 179;
                 annotation labels at Oracle's 13/17 so Figma's edge-to-edge
                 labels fit. The pre-conversion file is not kept in the repo.
    body copy    Figma: Kumbh Regular 400, 18px on a 22px leading, 15px between
                 paragraphs. KEPT the 18/22/15 metrics, because the layout is
                 laid to them — at V2's 19/25 four blocks run into the element
                 below. Weight is V2's 200 and the colour V2's white.
    emphasis     Figma's bold-white runs are <strong>, bold-yellow <b>, and
                 yellow-only <em>, the site's three forms. Figma's yellow is
                 #f6ff8d; the site's --color-emphasis (#ffe073) is used.
    titles       Figma: Josefin Light 55 white on a navy band 94 tall, with the
                 second half of "My Actions: X" in yellow. V2's .section-title:
                 Kumbh 200 30 in the cool blue, on Figma's 94px band (2026-10-12), the second half
                 as .aside at 50% white.
    callouts     Figma: 20px #d9d9d9 on a 25px leading, 1% tracking. V2's
                 .callout: 19px white on 25.
    leaders      Figma: 5px dashes (5 on, 5 off) in #d9d9d9 with a 16x20 head.
                 V2's .leader: 4px dashes at 49.8% white with its own head. The
                 Solution Concept arrows are yellow in Figma and stay yellow
                 here as .leader.gold, in --color-emphasis.
    hero         Figma: Josefin Light 57 with -4% tracking; the lede Kumbh
                 Regular 19 on 24. Size, tracking and leading are now Figma's
                 (owner, 2026-10-12); weight stays V2's 200 for both, and the
                 lede V2's 71%, in the panel's navy #41556a (this hero is LIGHT).
                 The logo circle is the other case studies' 102 (Figma: 127).
    badges       Figma: 80px rings, 35px values, 25px labels, 131px row pitch.
                 V2's 77px badge and 30px value, centred on Figma's ring
                 centres; labels at --metric-label-lg (26) on Figma's 131 pitch.
    plate        Figma: #ff9900, Josefin Medium 55, text at the left, 668x96.
                 V2's .platform-label: #ff9100, Kumbh 400 30, at Alere's 66
                 height and hugging its text (owner, 2026-10-12).
    clusters     Figma's people, bubbles and laptops redrawn from the shared
                 kit, at Figma's own positions and head colours. Two colours
                 Figma uses that the kit does not name are declared below
                 (fig-blue, fig-gold, fig-lead). The two text bubbles with words
                 in them are rounded boxes, not the kit's speech shape.
    tables       The three mock tables are ARTWORK (a drawn UI), so they keep
                 Figma's exact type: Kumbh 400 at 32/24/40, #1197f1 units, cell
                 gradients. The spaces Figma pads its cell text with are one
                 space here.
    import       The Import button mock is set in Avenir Next and Font Awesome
                 in Figma; neither is on the site, so it is Kumbh 600 with a
                 hand-drawn import glyph. The two light "beam" shapes behind it
                 are approximated with clip-path polygons from the render; their
                 outlines were not read. The three fades over the screenshots
                 are plain gradients in the directions the render shows.
    curve        The orange dashed line under the plate is drawn for this
                 page (owner, 2026-10-12): it bends from the plate to vertical
                 and runs straight down, as Figma's does. It is no longer
                 Alere's arrow-curved.svg turned 90 degrees.
    nav          Figma fades content out under the nav across 41px; V2's nav
                 is opaque with a hard edge.
    tail         Figma's frame is 17699 tall with ~2380px of blank frame after
                 the copy; this page ends 120 below the last block, as the other
                 case studies do.

  COPY IS FROM FIGMA, with the owner's word fixes of 2026-10-12 (HANDOFF lists
  what is still open). Where Figma pads a phrase with several spaces, HTML
  collapses them to one.
*/

/* ---------------------------------------------------------------------------
   PAGE SHELL — Alere's construction, with this page's own numbers
   --------------------------------------------------------------------------- */

/* 1444, the site's --page-width (components.css), like every other page —
   owner's rule, 2026-10-12 (CLAUDE.md, "Page width is 1444 on every page").
   This page was first built on Figma's 1512; every x below was moved onto
   1444 the same day: 34px left (the 1512 page was centred on the same
   axis), full-width pieces cut to 1444, left-column copy onto the site's
   x 64, the hero onto the other case studies' 48 / 179. */
.page {
  /* 15437 was the Figma-layout height (What I learned ended 15317, + 120).
     Everything from Onboarding down now sits in .rest and moves with it, so
     the page grows and shrinks by the same amount. See INTRO below. */
  height: calc(15383px + var(--rest-shift) + var(--decon-shift) + var(--solution-shift) + var(--risk-shift));   /* 120 below the last content, as on every case study (re-measured 2026-10-13 after the closing copy widened) */
}

/* The canvas clips: the hero render runs to x 1793 and y -46, and the Import
   screenshots start at x -591. `overflow: hidden` goes on .case, NOT .page — an
   overflow on .page would break the nav's `position: sticky`. */
.case {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.case > *,
.rest > *,
.after-decon > *,
.after-solution > *,
.after-risk > *,
.cluster > * {
  position: absolute;
}

.case em {
  font-style: normal;
  font-weight: var(--font-weight-body);
  color: var(--color-emphasis);
}

.case b {
  font-weight: 700;
  color: var(--color-emphasis);
}

.case strong {
  font-weight: 700;
}

/* Body copy — Figma's metrics, V2's weight and colour (see the header). */
.copy {
  font-size: 18px;
  line-height: 22px;
  color: var(--color-white);
}
.copy p { margin: 0; }
.copy p + p { margin-top: 15px; }

/* LISTS IN COPY — Context's four problems and My Tasks.
   My Tasks is Figma's structure (5045:12339, read 2026-10-12): a two-level
   ORDERED list whose five top items are bold, and "Key Solutions" as a plain
   bold line over an UNORDERED list. Figma spaces every paragraph and list item
   15px apart, the same as .copy p + p. Markers are V2's résumé convention
   (list-style: none, a positioned ::before in the cool blue, 22px of indent)
   rather than Figma's; the 22px is that convention's, not a Figma number.
   Level-two numbers are letters, which is how Figma numbers a nested ordered
   list. A top item's marker is bold because its text is. */
/* The reset is wrapped in :where() so it weighs nothing: at full weight
   (.copy .bullets is 0,2,0) it beat the 15px gaps below (.copy p + ul is
   0,1,2) and every list sat tight under its lead-in line. */
:where(.copy) :where(.bullets, .tasks, .tasks ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.copy .bullets > li,
.copy .tasks li {
  position: relative;
  padding-left: 22px;
}
.copy li + li,
.copy li > ol,
.copy p + ul,
.copy ul + p { margin-top: 15px; }

.copy .bullets > li::before,
.copy .tasks li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent-cool);
}
.copy .bullets > li::before { content: "\2022"; left: 2px; }

.tasks { counter-reset: task; }
.tasks > li { counter-increment: task; }
.tasks > li::before { content: counter(task) "."; font-weight: 700; }
.tasks ol { counter-reset: sub; }
.tasks ol > li { counter-increment: sub; }
.tasks ol > li::before { content: counter(sub, lower-alpha) "."; }

/* The toggle — owner, 2026-10-12. A native <details>, so it opens from the
   keyboard and reads as expandable to a screen reader with no script. The
   summary is a text link in the cool blue: "View Detailed List" with the
   site chevron pointing down, "Hide Details" with it pointing up. */
.task-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  list-style: none;
  cursor: pointer;
  color: var(--color-accent-cool);
}
.task-details > summary::-webkit-details-marker { display: none; }
.task-details > summary:hover .when-closed,
.task-details > summary:hover .when-open { text-decoration: underline; text-underline-offset: 3px; }
.task-details > summary:focus-visible { outline: 1px solid var(--color-accent-cool); outline-offset: 4px; }
.task-details .when-open,
.task-details[open] .when-closed { display: none; }
.task-details[open] .when-open { display: inline; }
.toggle-chevron {
  width: 6px;
  height: 13px;
  stroke-width: 1.6;
  transform: rotate(90deg);
}
.task-details[open] .toggle-chevron { transform: rotate(-90deg); }
.task-details > .tasks { margin-top: 15px; }


/* ---------------------------------------------------------------------------
   HERO — a light panel; the type is navy on it
   --------------------------------------------------------------------------- */

.hero-leader {
  overflow: visible;
  fill: none;
  stroke: #000;
  stroke-width: 1;
}

.hero-logo-mark { max-width: none; }

/* Figma's size and tracking (owner, 2026-10-12): Josefin 57 at -4%, whose cap
   height here measures 41.04 against the 41 in Figma's render. Figma's box is
   46 tall at y 174 on a 30px line height, which seats the glyphs differently from
   this flex box, so `top` is set from the INK: the M's baseline lands on
   Figma's y 211 (cap top 170), measured with a baseline probe. */
.hero-title {
  left: 179px;
  top: 188px;
  width: 710px;
  height: 46px;
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-heading-light);
  font-weight: 200;
  font-size: 57px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-bg);
}

/* Figma's 24px leading; its first cap top then measures 244.08 against
   Figma's 244. Weight and 71% opacity are still V2's. */
.hero-lede {
  left: 179px;
  top: 239px;
  width: 661px;
  margin: 0;
  font-family: var(--font-body-light);
  font-weight: 200;
  font-size: 19px;
  line-height: 24px;
  color: var(--color-bg);
  opacity: 0.71;
}

/* ---------------------------------------------------------------------------
   SECTION TITLE ROWS — V2's rule, verbatim from Alere
   --------------------------------------------------------------------------- */

/* 94, Figma's band ("Section Headers", 94 tall) — owner, 2026-10-12. At V2's
   65 the copy, which sits at Figma's offset from the band's TOP, landed 51px
   below the band where Figma has 22. The label is bottom-aligned, so it rides
   down with the band's lower edge. Other case studies keep 65. */
.section-title {
  height: 94px;
  margin: 0;
  display: flex;
  align-items: flex-end;
  /* 10px at the bottom keeps the descenders inside the band. With none, a
     "p" hung 7.3px below it, and the Reception screenshot, which starts at
     the band's lower edge, painted over the tail of "Reception". */
  padding: 0 2px 10px 66px;
  font-family: var(--font-body-light);
  font-weight: 200;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-accent-cool);
  white-space: nowrap;
  background: var(--section-break-fade);   /* Figma's; see base.css */
}

/* "My Actions: " + its topic. Alere's .aside carries a 152px margin for the
   head it makes room for; here the two halves are one phrase. */
.section-title .aside {
  margin-left: 0;
  color: rgba(255, 255, 255, 0.498);
}
/* The title is a flex box, so the space typed after "My Actions:" is dropped
   at the edge of the .aside flex item and the two words touched. A real space
   glyph inside the item puts it back at exactly the font's own width. */
.section-title .aside::before { content: " "; white-space: pre; }

/* ---------------------------------------------------------------------------
   THE BRIEF — Time / Team
   --------------------------------------------------------------------------- */

.brief-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 22px;
  color: var(--color-white);
}
.brief-list li + li { margin-top: 15px; }
.brief-list .count { font-family: var(--font-body-light); }

/* ---------------------------------------------------------------------------
   RESULTS — V2's badge, ring and list, on Figma's 131px rhythm
   --------------------------------------------------------------------------- */

.badge {
  left: 796px;
  width: 77px;
  height: 77px;
}

.ring-art {
  position: absolute;
  inset: 0;
  width: 77px;
  height: 77px;
}

.ring-track {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 3;
  opacity: 0.2;
}

.ring-arc {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 8;
  stroke-dasharray: var(--pct) 100;
  transform: rotate(90deg) scaleX(-1);
  transform-origin: 38.5px 38.5px;
  transform-box: view-box;
}

.ring-value {
  position: absolute;
  inset: 0;
  text-align: center;
  line-height: 77px;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 30px;
  color: var(--color-white);
}

.ring-value sup {
  display: inline-block;
  width: 0;
  vertical-align: 9.795px;
  position: relative;
  font-family: var(--font-body-light);
  font-weight: 200;
  font-size: 17px;
  line-height: 0;
}

/* Oracle's dollar: it hangs to the LEFT of the digits. */
.ring-value sup.pre {
  vertical-align: 8.965px;
  left: -8.727px;
}

/* Three rows on Figma's 131px pitch, each line's centre on its ring's centre
   (1068.5, 1199.5, 1330.5): 1068.5 - 65.5 = 1003. */
.results-list {
  left: 889px;
  top: 480px;
  width: 589px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--metric-label-lg);
  line-height: 131px;
  color: var(--color-white);
  white-space: nowrap;
}

.results-list em {
  font-style: normal;
  font-weight: var(--font-weight-body);
  color: var(--color-emphasis);
}

/* ---------------------------------------------------------------------------
   ACTION LABELS, CALLOUTS, LEADERS, PLATE — V2's rules from Alere
   --------------------------------------------------------------------------- */

.action-label {
  margin: 0;
  font-family: var(--font-body-light);
  font-weight: 200;
  font-size: 30px;
  line-height: 1.2;
  color: #ffeca9;
  white-space: nowrap;
}

/* The yellow key labels beside the Solution Concept table: Figma's 20 on 30 in
   --color-emphasis, which is the colour Figma uses here too. */
.key-label {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.2px;
  color: var(--color-emphasis);
}

.callout {
  margin: 0;
  /* Oracle's screenshot-label type (owner, 2026-10-12): 13 on 17 with 0.5px
     tracking, down from 19 on 25, so the labels Figma spread across 1512 fit
     the 1444 page. Every label's top moved down 4px with it — (25 - 17) / 2 —
     so its first line stays level with its pointer. */
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.5px;
  color: var(--color-white);
}

.leader {
  /* SOLID — owner's rule, 2026-10-13 (CLAUDE.md): every pointer on this page
     is a solid line; dashes mean progress, and the only progress line here is
     the orange arrow out of the "original spreadsheet" plate. Oracle's pointer:
     3px, white at 50%, an 8 x 14 head. */
  height: 3px;
  opacity: 0.498;
  background: var(--color-white);
  background-clip: content-box;
  padding-right: 6px;
  box-sizing: border-box;
}

.leader::after {
  content: "";
  position: absolute;
  left: calc(100% - 8px);
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-left: 8px solid var(--color-white);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* Solution Concept's yellow pointers: the same solid line, in the emphasis
   yellow at full strength. */
.leader.gold {
  opacity: 1;
  background: var(--color-emphasis);
  background-clip: content-box;
}
.leader.gold::after { border-left-color: var(--color-emphasis); }


.platform-label {
  margin: 0;
  display: flex;
  align-items: center;
  /* Owner, 2026-10-12: Figma's 668x96 plate read as immense. It is now
     Alere's 66 tall at the same 30px type, starts on the paragraph's x 64
     rather than at the page edge, and hugs its text exactly as Alere's does:
     the ink (340.09 measured) centred in 402 leaves 30.95 of orange each
     side, so it starts at x 95 — level with the gripes' text below (64 +
     their 31px indent). */
  justify-content: center;
  padding: 0;
  background: #ff9100;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--color-white);
}

.platform-gripes {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 19px;
  line-height: 29px;
  color: var(--color-white);
}

.platform-gripes li {
  position: relative;
  padding-left: 31px;
}

.platform-gripes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 5px;
  transform: translateY(-50%);
  background: #ff9100;   /* Oracle's solid dash — owner, 2026-10-12: one bullet style for all orange bullets */
}

.arrow-bend { overflow: visible; }
.arrow-bend-line {
  fill: none;
  stroke: #ff9100;
  stroke-width: 4;
  stroke-dasharray: 4 4;   /* the leaders' 4 on, 4 off */
}
.arrow-bend-head { fill: #ff9100; }

/* ---------------------------------------------------------------------------
   PEOPLE CLUSTERS — the shared kit, plus three head colours it does not name
   --------------------------------------------------------------------------- */

.cluster {
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.fig-blue { --icon-fill: #2dc3fe; }
.fig-gold { --icon-fill: var(--color-emphasis); }
/* The kit's slate, as on the torsos. It was a CSS linear-gradient(), which an
   SVG fill cannot take, so the head rendered BLACK. */
.fig-lead { --icon-fill: url(#kit-slate); }

/* ---------------------------------------------------------------------------
   THE MOCK TABLES — artwork: a drawn UI in Figma's own type
   --------------------------------------------------------------------------- */

.col-head {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 58px;
  letter-spacing: 0.32px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.col-head.centred { text-align: center; }

.cell {
  border-radius: 20px;
  /* Figma's fields are rotated 180 degrees, so the gradient runs #d0d0d0 at
     the TOP to white at the bottom (owner's screenshot: 205 top, 253 bottom). */
  background: linear-gradient(to top, #ffffff, #d0d0d0);
}
.cell.off {
  background: var(--color-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.cell.dim { opacity: 0.5; }
.cell.sq { border-radius: 10px; }

.caret {
  /* Figma's arrow is a 3-sided POLYGON inscribed in its 18 x 18 box, not a
     triangle filling it: an equilateral triangle 15.59 wide and 13.5 tall
     (radius 9: 2 x 9 sin 60, and 9 + 9 cos 60), flat edge 4.5 below the box's
     top once turned 180 degrees. Confirmed on the owner's screenshot: a 16px
     flat top 4px down, the point 13px below it. Each arrow's left/top is
     Figma's BOX; the margins seat the triangle inside it as Figma does. */
  /* Drawn as an SVG background, NOT a border triangle: Chrome rounds border
     widths down to whole pixels, so borders gave 14 x 13. */
  width: 15.588px;
  height: 13.5px;
  margin: 4.5px 0 0 1.206px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.588 13.5'%3E%3Cpath d='M0 0H15.588L7.794 13.5Z' fill='%23c9c9c9'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: url(#caret-inner-shadow);   /* Figma: inner shadow 0,2 blur 5 #000 @30% */
}
.svg-defs { width: 0; height: 0; overflow: hidden; }

[class^="tx-"], [class*=" tx-"],
[class$="-name"], [class$="-time"]:not(.col-head), [class$="-rate"]:not(.col-head), [class$="-cost"]:not(.col-head),
/* :not(.col-head) on -time/-rate/-cost: "col-head ch-time" etc. end the same
   way and turned the Time / Rate / Cost headings into black 32px cell text.
   :not(.copy) — the suffix match is for the mock-table cells (rk1-c, pr1-c,
   ...), and "copy text-proto-c" ends in "-c" too: it took the cells' 32px
   black unwrapped type and ran 2,600px off the page as one line. */
[class$="-v"], [class$="-lt"], [class$="-c"]:not(.copy), [class$="-cm"] {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;     /* Figma's 24 on 25 at 1% (Solution Concept, read 2026-10-12) */
  line-height: 25px;
  letter-spacing: 0.24px;
  color: #000;
  white-space: nowrap;
}
.unit { font-size: 0.6em; vertical-align: 8px; line-height: 0; letter-spacing: 0; color: #1197f1; }   /* Figma's superscript units, 0.6em raised 8px (measured) */
/* Solution Concept's three fields: Figma now sets the units small and raised —
   about 14px, baseline 8px above the digits' (measured off the owner's Figma
   screenshot of 2026-10-12 at 1:1; approximate). line-height: 0 so the smaller,
   raised run cannot grow the 49px line box (CLAUDE.md, the line-height trap). */
.bend { overflow: visible; max-width: none; }
.bend-line { fill: none; stroke: var(--color-emphasis); stroke-width: 3; }   /* solid, like every pointer */
.bend-head { fill: var(--color-emphasis); }
.dim-text { color: #575757; }
.dimmer { color: #8f8f8f; }

.glyph {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 40px;
  line-height: 38px;
  text-align: center;
  color: #1197f1;
}

/* ---------------------------------------------------------------------------
   THE IMPORT MOCK
   --------------------------------------------------------------------------- */

.shot-step1b, .shot-step2 { max-width: none; }

.mock-button {
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 0;
  background: var(--color-white);
  border: 1px solid #c5c5c5;
  border-radius: 20px;
  box-sizing: border-box;
}
.mock-button-icon { width: 34px; height: 34px; margin: 0 12px; flex: none; }
.mock-button-label {
  flex: 1;
  margin-left: 16px;   /* Figma (owner's screenshot, 2026-10-12): 16px more air after the icon; the button grew 581 -> 597 by exactly that */
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 32px;
  line-height: 30px;
  color: #0099ff;
  white-space: nowrap;
}
.mock-button-badge {
  flex: none;
  width: 51px;
  height: 40px;
  border-radius: 100px;
  background: #ff9100;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  color: var(--color-white);
}

/* ---------------------------------------------------------------------------
   WHAT I LEARNED — Alere's head, at Figma's size and 50%
   --------------------------------------------------------------------------- */

.growth-head .head-slot { background: var(--color-bg); }
.growth-head .head-gears { width: 100%; height: 100%; }

/* ---------------------------------------------------------------------------
   POSITIONS — every one is Figma's frame coordinate
   --------------------------------------------------------------------------- */
/* Figma's hero is Group 22 (5045:12318), MASKED by its first child, Rectangle
   154 at 0,63 1514x306: the group's own bounds are 63..369 although the render
   inside runs -46..433, which only a mask produces. So everything in the hero
   stops at y 369, and the 1px to the Context row at 370 is page navy, as in
   Figma. The render is OPAQUE (its ground is #f9f9f9, the band's own colour),
   so unclipped it hung 64px into the Context row as a pale box. clip-path is
   enough here: .case already clips layout, so this only has to clip paint. */
.hero-band { left: 0px; top: 63px; width: 1444px; height: 306px; background: #f9f9f9; }
.hero-photo { left: 856px; top: -46px; width: 903px; height: 479px; object-fit: cover;
              clip-path: inset(109px 0 64px 0); }   /* 63 - -46 = 109;  433 - 369 = 64 */
/* Figma's "contet box mask" instance (0,0 1512x104) fades the hero in under
   the nav across 63..104. Its children were not read; the colour is taken as
   the page navy, which is what the render shows at the nav's edge. It sits in
   the hero and scrolls with it — a fade that stays with the sticky nav is a
   site-wide change and is not made here. */
.hero-fade { left: 0px; top: 63px; width: 1444px; height: 41px;
             background: linear-gradient(to bottom, var(--color-bg), rgba(65, 85, 106, 0)); }
.hl-1 { left: 881px; top: 212px; width: 65.5px; height: 40.5px; }
.hl-2 { left: 902px; top: 221px; width: 72px; height: 51px; }
.hl-3 { left: 936px; top: 245px; width: 77px; height: 55px; }
.hl-4 { left: 1014px; top: 246px; width: 60px; height: 43px; }
.hl-5 { left: 1102px; top: 314px; width: 57px; height: 41px; }
.hl-6 { left: 1006px; top: 263px; width: 77px; height: 55px; }
.hl-7 { left: 1070px; top: 268px; width: 70px; height: 50px; }
.hero-price-1 { left: 869px; top: 243px; width: 35px; }
.hero-price-2 { left: 870px; top: 263px; width: 51px; }
.hero-price-3 { left: 918px; top: 291px; width: 38px; }
.hero-price-4 { left: 989px; top: 281px; width: 40px; }
.hero-price-5 { left: 1050px; top: 309px; width: 35px; }
.hero-price-6 { left: 986px; top: 309px; width: 38px; }
.hero-price-7 { left: 1045px; top: 346px; width: 71px; }
/* Rectangle 292: #7bb532 from alpha 0 at its top to 1 at its bottom, at 15%,
   and inside the mask, so its last 4px (369..373) never show. */
.hero-strip { left: 0px; top: 340px; width: 1444px; height: 29px;
              background: linear-gradient(to bottom, rgba(123, 181, 50, 0), rgba(123, 181, 50, 0.8788)); opacity: 0.15; }
/* The other case studies' badge: 102 at x 48, so the title at 179 clears it by
   29px as it does there. Figma's was 127; centred on the same point (y 219.5),
   and the mark scaled by 102/127. */
.hero-logo { left: 48px; top: 168.5px; width: 102px; height: 102px; }
.hero-logo-mark { left: 5.62px; top: 41.76px; width: 92.36px; height: 20.08px; }
/* INTRO — owner, 2026-10-12. Two rows under the hero:
     row 1   Context (370)      | Results (370)
     row 2   My Tasks (1084)    | Time / Team (1084)
   Row 2 starts 24px below the Context copy (486 + 574 measured = 1060), the
   gap Figma left between its Context copy and My Tasks; each section's copy
   keeps Figma's own offset under its title (116 Context, 124 My Tasks, 110
   Results, 130 Time / Team). Closed, the left column ends at 1452 and the
   right at 1458 (measured), so the two columns finish level.

   .rest holds everything from Onboarding down and keeps Figma's coordinates;
   --rest-shift moves it. Owner, 2026-10-12: the break is set by what the
   reader sees — 80px from the intro's last line to the TOP OF THE ONBOARDING
   LABEL'S LETTERS (about 3x the 22px under every bar). The label's cap top is
   62px into its 94px bar (measured), so the bar starts 18px below the
   intro. (Figma's 224, and then a 92px bar gap, both read as a hole: on this
   page's tall bars the gradient is nearly clear at the top, so the eye
   measures to the label, not the bar.)
     closed  max(1452, 1458) + 18 = 1476   ->  1476 - 2262 = -786
     open    1208 + 1182 (measured) + 18 = 2408  ->  2408 - 2262 = +146
   Both are measured, stated numbers, not computed by script: a copy change in
   Context or My Tasks means re-measuring them. */
.page { --rest-shift: -786px; }
.page:has(.task-details[open]) { --rest-shift: 146px; }
.rest { left: 0px; top: var(--rest-shift); width: 1444px; height: 0; }
/* WHEN A SECTION GETS SHORTER, EVERYTHING BELOW MOVES UP — owner's rule,
   2026-10-12. .after-decon holds Solution Concept to the end and keeps Figma's
   coordinates; --decon-shift closes the gap the re-laid Deconstruction left,
   by the same rule as the intro: 80px from the section's last content to the
   top of the next title's letters (62px into its bar, so the bar starts 18px
   below). Deconstruction's last content ends at 5800 (the two tall tables,
   measured): 5800 + 18 = 5818 -> 5818 - 6066 = -248. Re-measure if that
   section changes. */
.page { --decon-shift: -248px; }
.after-decon { left: 0px; top: var(--decon-shift); width: 1444px; height: 0; }
/* The same rule again for Solution Concept, re-laid shorter the same day: its
   last content ends at 7168 (the yellow key, measured), so Redesign's bar
   starts 18px below it: 7186 - 7357 = -171. Nested in .after-decon, so the two
   offsets add up for everything below. Re-measure if that section changes. */
.page { --solution-shift: -171px; }
.after-solution { left: 0px; top: var(--solution-shift); width: 1444px; height: 0; }
/* RISK's spacing — owner, 2026-10-12: more room above the first row, a little
   less between the rows, much less after. All three are now 80px, measured
   from ink: copy -> first headings' letters (was 34), row 1 -> row 2's
   headings (was 103; then 40, owner: "closer together", row 2 alone moved up
   40 and nothing else), row 2 -> the Import title's letters (was 262; now 120
   after that move). Row 1 moved down 46 and row 2 down 23 (the rk1- / rk2-
   rules); everything from Import on sits in .after-risk, up 10787 - 10628 = 159. */
.page { --risk-shift: -159px; }
.after-risk { left: 0px; top: var(--risk-shift); width: 1444px; height: 0; }
.title-context { left: 0px; top: 370px; width: 734px; }
.context-copy { left: 64px; top: 486px; width: 689px; }
.title-tasks { left: 0px; top: 1084px; width: 734px; }
.title-results { left: 734px; top: 370px; width: 710px; }
.task-list { left: 64px; top: 1208px; width: 663px; }
.badge-8m { top: 507px; --pct: 100; }
.badge-68 { top: 638px; --pct: 68; }
.badge-50 { top: 769px; --pct: 50; }
/* Row 2's two bars meet edge to edge, as row 1's do (Context 0..768, Results
   768..1512), so they read as one bar across both panels — owner, 2026-10-12.
   Figma had Time / Team at 766 x 777 with a fade over its left end, because it
   stood alone; level with My Tasks, the fade is gone and the 2px overlap that
   doubled the gradient into a seam is gone with it. */
.title-team { left: 734px; top: 1084px; width: 710px; }
.team-list { left: 799px; top: 1214px; width: 238px; }   /* ink level with the "Time / Team" title text, as on every other page */
.title-onboarding { left: 0px; top: 2262px; width: 1444px; }
.ob-1-body { left: 1135px; top: 2387.38px; --icon-width: 37px; --icon-height: 40.62px; }
.ob-1-head { left: 1142.05px; top: 2360px; --icon-width: 23.45px; --icon-height: 23.45px; }
.ob-2-body { left: 1071px; top: 2368.38px; --icon-width: 37px; --icon-height: 40.62px; }
.ob-2-head { left: 1078.05px; top: 2341px; --icon-width: 23.45px; --icon-height: 23.45px; }
.ob-3-body { left: 1107px; top: 2399.38px; --icon-width: 37px; --icon-height: 40.62px; }
.ob-3-head { left: 1114.05px; top: 2372px; --icon-width: 23.45px; --icon-height: 23.45px; }
.ob-4-body { left: 1148px; top: 2433.38px; --icon-width: 37px; --icon-height: 40.62px; }
.ob-4-head { left: 1155.05px; top: 2406px; --icon-width: 23.45px; --icon-height: 23.45px; }
.ob-5-body { left: 1172px; top: 2462.38px; --icon-width: 37px; --icon-height: 40.62px; }
.ob-5-head { left: 1179.05px; top: 2435px; --icon-width: 23.45px; --icon-height: 23.45px; }
.ob-6-body { left: 1115px; top: 2442.38px; --icon-width: 37px; --icon-height: 40.62px; }
.ob-6-head { left: 1122.05px; top: 2415px; --icon-width: 23.45px; --icon-height: 23.45px; }
.ob-7-body { left: 1081px; top: 2413.38px; --icon-width: 37px; --icon-height: 40.62px; }
.ob-7-head { left: 1088.05px; top: 2386px; --icon-width: 23.45px; --icon-height: 23.45px; }
.ob-8-body { left: 1014px; top: 2422px; --icon-width: 42px; --icon-height: 46px; }
.ob-8-head { left: 1022px; top: 2391px; --icon-width: 26.62px; --icon-height: 26.62px; }
.ob-9-body { left: 1036px; top: 2470px; --icon-width: 42px; --icon-height: 46px; }
.ob-9-head { left: 1044px; top: 2439px; --icon-width: 26.62px; --icon-height: 26.62px; }
.ob-10-body { left: 1076px; top: 2496px; --icon-width: 42px; --icon-height: 46px; }
.ob-10-head { left: 1084px; top: 2465px; --icon-width: 26.62px; --icon-height: 26.62px; }
.ob-say-1 { left: 1111px; top: 2304px; --icon-width: 64px; --icon-height: 40px; }
.ob-say-2 { left: 1172px; top: 2320px; --icon-width: 64px; --icon-height: 40px; }
.ob-say-3 { left: 1178px; top: 2375px; --icon-width: 64px; --icon-height: 40px; }
.ob-say-4 { left: 1212px; top: 2418px; --icon-width: 64px; --icon-height: 40px; }
.ob-say-5 { left: 947px; top: 2361px; --icon-width: 64px; --icon-height: 40px; }
.text-onboarding { left: 64px; top: 2383px; width: 813px; }
.platform-label { left: 64px; top: 2619px; width: 402px; height: 66px; }   /* left edge on the paragraph above (owner, 2026-10-12) */
.platform-gripes { left: 64px; top: 2698px; width: 280px; }   /* wide enough that no line wraps */   /* Figma's 13px under the plate */
.arrow-bend { left: 306px; top: 2685px; width: 52px; height: 185px; }   /* plate bottom to 3px above the screenshot (2873); Figma's bend, x 350 -> 372 */
.shot-sheet-a { left: 278px; top: 2873px; width: 941px; height: 488px; object-fit: cover; object-position: top; }
/* LEFT-SIDE LABELS — owner, 2026-10-12. Right-aligned, so each box starts
   on the body margin (x 64) and ends 9px short of its pointer (x 203 against
   the pointers' 212); the text wraps inside the margin. Each label is CENTRED
   VERTICALLY ON ITS POINTER (Oracle's rule): top = pointer y - height / 2,
   from measured heights at 13/17. Re-measure if a label's wording changes. */
.co-red { left: 64px; top: 2928px; width: 139px; text-align: right; }
.co-beige { left: 64px; top: 2948px; width: 139px; text-align: right; }
.co-pink { left: 64px; top: 3061px; width: 139px; text-align: right; }
.co-green { left: 64px; top: 3088px; width: 139px; text-align: right; }
.co-bold { left: 64px; top: 3275px; width: 139px; text-align: right; }
.co-lavender { left: 614px; top: 2781px; width: 176px; text-align: right; }
.co-purple { left: 915px; top: 2781px; width: 162px; text-align: right; }
.co-orange { left: 1299px; top: 2887px; width: 145px; }
.co-yellow { left: 1299px; top: 2948px; width: 145px; }
.co-total { left: 1299px; top: 3319px; width: 145px; }
.co-gray { left: 354px; top: 3456px; width: 180px; }
.co-ifyellow { left: 525px; top: 3455px; width: 370px; }   /* two lines at 13px (359 is the measured minimum) */
.co-borders { left: 916px; top: 3456px; width: 165px; }   /* one line at 13px (159 measured) */
.ld-a1 { left: 212px; top: 2934.5px; width: 64px; }
.ld-a2 { left: 212px; top: 2954.5px; width: 64px; }
.ld-a3 { left: 212px; top: 3067.5px; width: 64px; }
.ld-a4 { left: 212px; top: 3094.5px; width: 64px; }
.ld-a5 { left: 212px; top: 3281.5px; width: 64px; }
.ld-a6 { left: 663px; top: 2832.5px; width: 51px; transform: rotate(90deg); }
.ld-a7 { left: 991px; top: 2832.5px; width: 51px; transform: rotate(90deg); }
.ld-a8 { left: 1237px; top: 2893.5px; width: 51px; transform: rotate(180deg); }
.ld-a9 { left: 1237px; top: 2954.5px; width: 51px; transform: rotate(180deg); }
.ld-a10 { left: 1237px; top: 3325.5px; width: 51px; transform: rotate(180deg); }
.ld-a11 { left: 394.5px; top: 3404px; width: 64px; transform: rotate(270deg); }
.ld-a12 { left: 710.5px; top: 3403px; width: 64px; transform: rotate(270deg); }
.ld-a13 { left: 956.5px; top: 3404px; width: 64px; transform: rotate(270deg); }
.shot-sheet-b { left: 278px; top: 3567px; width: 941px; height: 493px; object-fit: cover; object-position: top; }
.co-summary { left: 1299px; top: 3611px; width: 145px; }
.co-irrelevant { left: 64px; top: 3660.5px; width: 139px; text-align: right; }
.co-precalc { left: 1299px; top: 3722px; width: 145px; }
.co-bundled { left: 64px; top: 3776.5px; width: 139px; text-align: right; }
.co-ambiguous { left: 1299px; top: 3834px; width: 145px; }
.co-scratch { left: 1299px; top: 3936px; width: 145px; }
.co-service { left: 64px; top: 3935px; width: 139px; text-align: right; }
.co-riskadj { left: 292px; top: 4136px; width: 302px; text-align: right; }
.co-shipping { left: 640px; top: 4137px; width: 804px; }
.ld-b1 { left: 1237px; top: 3617.5px; width: 51px; transform: rotate(180deg); }
.ld-b2 { left: 212px; top: 3675.5px; width: 64px; }
.ld-b3 { left: 1237px; top: 3729.5px; width: 51px; transform: rotate(180deg); }
.ld-b4 { left: 212px; top: 3808.5px; width: 64px; }
.ld-b5 { left: 1237px; top: 3841.5px; width: 51px; transform: rotate(180deg); }
.ld-b6 { left: 1237px; top: 3943.5px; width: 51px; transform: rotate(180deg); }
.ld-b7 { left: 212px; top: 3975.5px; width: 64px; }
.ld-b8 { left: 548.5px; top: 4094px; width: 64px; transform: rotate(270deg); }
.ld-b9 { left: 709.5px; top: 4094px; width: 64px; transform: rotate(270deg); }
.title-research { left: 0px; top: 4301px; width: 1444px; }
.text-research { left: 64px; top: 4416px; width: 863px; }
.rs-laptop { left: 1023px; top: 4458px; width: 86px; height: 60px; border: 4px solid var(--color-white); border-radius: 14px; background: var(--color-bg); }
.rs-base { left: 1024px; top: 4521px; width: 103px; height: 6px; border-radius: 10px; background: var(--color-white); }
.rs-shout { left: 1146px; top: 4384px; width: 117px; height: 51px; max-width: none; overflow: visible; fill: #d9d9d9; }   /* Figma's box; the pill is 108x32 of it */
.rs-shout-text { left: 1155px; top: 4389px; width: 108px; text-align: center; font-size: 16px; line-height: 22px; color: #000; }   /* across the pill (1155..1263), Figma's 16/22 */
.rs-1-body { left: 1222px; top: 4485px; --icon-width: 42px; --icon-height: 46px; }
.rs-1-head { left: 1230px; top: 4454px; --icon-width: 26.62px; --icon-height: 26.62px; }
.rs-2-body { left: 1187px; top: 4485px; --icon-width: 42px; --icon-height: 46px; }
.rs-2-head { left: 1195px; top: 4454px; --icon-width: 26.62px; --icon-height: 26.62px; }
.rs-3-body { left: 1151px; top: 4485px; --icon-width: 42px; --icon-height: 46px; }
.rs-3-head { left: 1159px; top: 4454px; --icon-width: 26.62px; --icon-height: 26.62px; }
.rs-4-body { left: 1084px; top: 4473.16px; --icon-width: 75px; --icon-height: 81.84px; }
.rs-4-head { left: 1098.29px; top: 4418px; --icon-width: 47.45px; --icon-height: 47.45px; }
.label-observation { left: 1241px; top: 4574px; width: 275px; }
.title-decon { left: 0px; top: 4620px; width: 1444px; }
.text-decon { left: 64px; top: 4735px; width: 863px; }
/* DECONSTRUCTION — re-laid from Figma on 2026-10-12 (the owner had rearranged it
   since the 10-09 read; layer read 2026-10-12). This section is placed at
   Figma x + 12, not the page's x - 34: +12 puts Figma's label column (x 52) on
   the site's 64 margin and keeps every label-to-piece gap Figma's, and the
   right column still ends inside 1444 (1432). Tops are Figma's; a label Figma
   sets 13/25 sits 4px lower so its text stays where Figma's is on our 13/17.
   The pieces are the same crops as before (transforms unchanged). */
/* Figma's 0 tracking for this section's labels, not Oracle's 0.5: the owner
   sized these boxes in Figma at 0, and at 0.5 four labels wrapped and two ran
   onto the piece below ("Materials / Finishes..." needs 299 in its 285). */
[class*=" dc-"] { letter-spacing: 0; }
.piece-40 { left: 372px; top: 4863px; width: 137px; height: 75px; }
.piece-41 { left: 547px; top: 4897px; width: 32px; height: 41px; }
.piece-42 { left: 768px; top: 4897px; width: 80px; height: 41px; }
.piece-43 { left: 1050px; top: 4897px; width: 381px; height: 118px; }
.piece-44 { left: 372px; top: 5005px; width: 307px; height: 10px; }
.piece-45 { left: 372px; top: 5064px; width: 254px; height: 15px; }
.piece-47 { left: 372px; top: 5131px; width: 225px; height: 11px; }
.piece-48 { left: 766px; top: 5283px; width: 79px; height: 11px; }
.piece-49 { left: 372px; top: 5186px; width: 189px; height: 22px; }
.piece-50 { left: 372px; top: 5632px; width: 573px; height: 89px; }
.piece-51 { left: 368px; top: 5264px; width: 177px; height: 72px; }
.piece-52 { left: 768px; top: 5419px; width: 177px; height: 175px; }
.piece-54 { left: 768px; top: 5003px; width: 136px; height: 21px; }
.piece-55 { left: 768px; top: 5087px; width: 136px; height: 21px; }
.piece-58 { left: 768px; top: 5116px; width: 136px; height: 40px; }
.piece-56 { left: 768px; top: 5207px; width: 136px; height: 17px; }
.piece-57 { left: 368px; top: 5375px; width: 134px; height: 45px; }
.piece-61 { left: 768px; top: 5341px; width: 95px; height: 39px; }
.piece-53 { left: 372px; top: 5472px; width: 136px; height: 108px; }
.piece-59 { left: 1050px; top: 5261px; width: 84px; height: 539px; }
.piece-60 { left: 1302px; top: 5261px; width: 130px; height: 539px; }
.piece-46 { left: 1050px; top: 5078px; width: 382px; height: 98px; }
.dc-1 { left: 64px; top: 4861px; width: 285px; text-align: right; }
.dc-2 { left: 64px; top: 4999px; width: 285px; text-align: right; }
.dc-3 { left: 64px; top: 5065px; width: 285px; text-align: right; }
.dc-4 { left: 64px; top: 5129px; width: 285px; text-align: right; }
.dc-5 { left: 768px; top: 5256px; width: 285px; }
.dc-6 { left: 64px; top: 5186px; width: 285px; text-align: right; }
.dc-7 { left: 64px; top: 5633px; width: 285px; text-align: right; }
.dc-8 { left: 64px; top: 5262px; width: 285px; text-align: right; }
.dc-9 { left: 768px; top: 5397px; width: 205px; }
.dc-10 { left: 64px; top: 5474px; width: 285px; text-align: right; }
.dc-11 { left: 765px; top: 4865px; width: 125px; }
.dc-12 { left: 765px; top: 4978px; width: 259px; }
.dc-13 { left: 765px; top: 5062px; width: 259px; }
.dc-14 { left: 765px; top: 5180px; width: 71px; }
.dc-15 { left: 190px; top: 5377px; width: 159px; text-align: right; }
.dc-16 { left: 765px; top: 5320px; width: 259px; }
.dc-17 { left: 1050px; top: 4865px; width: 381px; }
.dc-18 { left: 1050px; top: 5050px; width: 381px; }
.dc-19 { left: 1050px; top: 5229px; width: 116px; }
.dc-20 { left: 1302px; top: 5229px; width: 130px; text-align: right; }
.dc-21 { left: 545px; top: 4865px; width: 31px; text-align: right; }
.title-solution { left: 0px; top: 6066px; width: 1444px; }
/* SOLUTION CONCEPT — re-laid from Figma on 2026-10-12 (the owner's
   micro-adjustments; layer read 2026-10-12). Placed at Figma x + 8, which puts
   the copy and every left edge (Item, Ops, the yellow key) on the 64 margin;
   the section's right edge is then 1355, inside 1444. Tops are Figma's; text
   in a Figma box set "centred" sits on a line box of that box's height, or is
   offset by half the difference. Figma's cell type is 24 on 25 at 1% tracking;
   its units are a superscript (24px with the feature on), drawn here as 0.6em
   raised 8px — measured off the owner's screenshot. The two L-shaped arrows
   are Figma's paths in V2's pointer style (solid 3px, the 8 x 14 head). */
.text-solution { left: 64px; top: 6174px; width: 1350px; }
.ch-item { left: 64px; top: 6566px; width: 151px; font-size: 24px; line-height: 58px; letter-spacing: 0.24px; }
.ch-ops { left: 64px; top: 6654px; width: 151px; font-size: 24px; line-height: 58px; letter-spacing: 0.24px; }
.ch-time { left: 505px; top: 6506px; width: 94px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.ch-rate { left: 647px; top: 6506px; width: 94px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.ch-cost { left: 758px; top: 6506px; width: 93px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.ch-comments { left: 909px; top: 6506px; width: 242px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rl-s1 { left: 141px; top: 6594px; width: 1127px; height: 1px; background: #8fa4ba; }
.rl-s2 { left: 141px; top: 6683px; width: 1127px; height: 1px; background: #8fa4ba; }
.cl-1a { left: 140px; top: 6567px; width: 327px; height: 55px; }
.cl-1b { left: 506px; top: 6567px; width: 115px; height: 55px; }
.cl-1c { left: 627px; top: 6567px; width: 116px; height: 55px; }
.cl-1d { left: 749px; top: 6567px; width: 116px; height: 55px; }
.cl-1e { left: 910px; top: 6567px; width: 249px; height: 55px; }
.cl-1f { left: 1192px; top: 6574px; width: 39px; height: 39px; }
.cl-1g { left: 1236px; top: 6574px; width: 40px; height: 39px; }
.cl-2a { left: 140px; top: 6656px; width: 327px; height: 55px; }
.cl-2b { left: 506px; top: 6656px; width: 115px; height: 55px; }
.cl-2c { left: 627px; top: 6656px; width: 116px; height: 55px; }
.cl-2d { left: 749px; top: 6656px; width: 116px; height: 55px; }
.cl-2e { left: 910px; top: 6656px; width: 249px; height: 55px; }
.cl-2f { left: 1192px; top: 6662px; width: 39px; height: 39px; }
.cl-2g { left: 1236px; top: 6662px; width: 40px; height: 39px; }
.ct-s1 { left: 435px; top: 6585px; }
.ct-s2 { left: 435px; top: 6673px; }
/* Field text tops: the letters' top sits where Figma's does inside each field
   (21 / 21 / 23px below the field's top edge, measured off the owner's Figma
   screenshot of 2026-10-12). */
.tx-s1 { left: 171px; top: 6583px; width: 321px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #909090; }
.tx-s2 { left: 171px; top: 6671px; width: 383px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.tx-s3 { left: 527px; top: 6671px; width: 102px; text-align: center; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; }
.tx-s4 { left: 620px; top: 6672px; width: 130px; text-align: center; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; }
.tx-s5 { left: 749px; top: 6672px; width: 116px; text-align: center; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; }
.gl-s1 { left: 1194px; top: 6665px; width: 35px; line-height: 25px; }
.gl-s2 { left: 1239px; top: 6665px; width: 35px; line-height: 25px; }
.ld-g1 { left: 49.5px; top: 6775px; width: 84px; transform: rotate(270deg); }
.ld-g2 { left: 267.5px; top: 6775px; width: 84px; transform: rotate(270deg); }
.ld-g3 { left: 521.5px; top: 6775px; width: 84px; transform: rotate(270deg); }
.ld-g4 { left: 647.5px; top: 6775px; width: 84px; transform: rotate(270deg); }
/* "Cost /row": arrow and label centred under the Cost field (749..865,
   centre 807) — owner, 2026-10-12; Figma had both to its right. */
.ld-g5 { left: 765px; top: 6775px; width: 84px; transform: rotate(270deg); }
.ld-g6 { left: 984.5px; top: 6775px; width: 84px; transform: rotate(270deg); }
.key-1 { left: 64px; top: 6838px; width: 254px; }
.key-2 { left: 247px; top: 6838px; width: 335px; }
.key-3 { left: 516px; top: 6838px; width: 176px; }
.key-4 { left: 662px; top: 6838px; width: 176px; }
.key-5 { left: 719px; top: 6838px; width: 176px; text-align: center; }
.key-6 { left: 961px; top: 6838px; width: 127px; text-align: center; }
.key-7 { left: 1117px; top: 6838px; width: 199px; text-align: right; }
.key-null { left: 1116px; top: 6439px; width: 239px; }
.bend-null { left: 1276px; top: 6480px; width: 44px; height: 130px; }
.bend-rows { left: 1276px; top: 6668px; width: 44px; height: 150px; }
.text-model { left: 511px; top: 6943px; width: 824px; }
.title-redesign { left: 0px; top: 7357px; width: 1444px; }
.text-redesign { left: 64px; top: 7493px; width: 515px; }
.shot-step1 { left: 278px; top: 7690px; width: 940.86px; height: 891px; object-fit: cover; }
.rd-1 { left: 64px; top: 7698px; width: 139px; text-align: right; }
/* Centred on its arrow (ld-r2, centre x 841), Oracle's rule for a label above
   a pointer. Figma right-aligns it at 20px, which put the text over the arrow;
   at 13px right-aligned it started 23px past the arrow instead. */
.rd-2 { left: 673px; top: 7592px; width: 336px; text-align: center; }
.rd-3 { left: 64px; top: 7740px; width: 139px; text-align: right; }
.rd-4 { left: 64px; top: 7802px; width: 139px; text-align: right; }
.rd-5 { left: 64px; top: 7876px; width: 139px; text-align: right; }
.rd-6 { left: 64px; top: 8020px; width: 139px; text-align: right; }
.rd-7 { left: 64px; top: 8066px; width: 139px; text-align: right; }
.rd-8 { left: 64px; top: 8128px; width: 139px; text-align: right; }
.rd-9 { left: 64px; top: 8179px; width: 139px; text-align: right; }
.rd-10 { left: 64px; top: 8205px; width: 139px; text-align: right; }
.rd-11 { left: 64px; top: 8230px; width: 139px; text-align: right; }
.rd-12 { left: 64px; top: 8316px; width: 139px; text-align: right; }
.rd-13 { left: 64px; top: 8405px; width: 139px; text-align: right; }
.rd-14 { left: 64px; top: 8478px; width: 139px; text-align: right; }
.rd-15 { left: 1299px; top: 7825px; width: 145px; }
.rd-16 { left: 1299px; top: 7971px; width: 145px; }
.rd-17 { left: 1299px; top: 8199px; width: 145px; }
.rd-18 { left: 1299px; top: 8273px; width: 145px; }
.rd-19 { left: 1299px; top: 8462px; width: 145px; }
.ld-r1 { left: 212px; top: 7704.5px; width: 64px; }
.ld-r2 { left: 809px; top: 7648.5px; width: 64px; transform: rotate(90deg); }
.ld-r3 { left: 212px; top: 7746.5px; width: 64px; }
.ld-r4 { left: 212px; top: 7808.5px; width: 64px; }
.ld-r5 { left: 212px; top: 7899.5px; width: 64px; }
.ld-r6 { left: 212px; top: 8026.5px; width: 64px; }
.ld-r7 { left: 212px; top: 8072.5px; width: 64px; }
.ld-r8 { left: 212px; top: 8134.5px; width: 64px; }
.ld-r9 { left: 212px; top: 8185.5px; width: 64px; }
.ld-r10 { left: 212px; top: 8211.5px; width: 64px; }
.ld-r11 { left: 212px; top: 8236.5px; width: 64px; }
.ld-r12 { left: 212px; top: 8322.5px; width: 64px; }
.ld-r13 { left: 212px; top: 8428.5px; width: 64px; }
.ld-r14 { left: 212px; top: 8484.5px; width: 64px; }
.ld-r15 { left: 1237px; top: 7831.5px; width: 51px; transform: rotate(180deg); }
.ld-r16 { left: 1237px; top: 7977.5px; width: 51px; transform: rotate(180deg); }
.ld-r17 { left: 1237px; top: 8205.5px; width: 51px; transform: rotate(180deg); }
.ld-r18 { left: 1237px; top: 8279.5px; width: 51px; transform: rotate(180deg); }
.ld-r19 { left: 1237px; top: 8468.5px; width: 51px; transform: rotate(180deg); }
.ld-r20 { left: 1237px; top: 8518.5px; width: 51px; transform: rotate(180deg); }
.title-plusminus { left: 0px; top: 8668px; width: 1444px; }
/* +/- AND RISK TABLES — owner, 2026-10-12: Solution Concept's Figma geometry
   extrapolated (the owner adjusted only that one in Figma). Same field sizes,
   same in-field offsets for text, carets and buttons, measured from each row's
   own top, which is unchanged — so neither section changes height. The dimmed
   Risk row keeps its row line only in the gaps, because its cells are
   translucent. The +/- table sits 49px right of Solution Concept's columns:
   "Shipping" is the longest row label (ends at 164.8), and Solution's 24.4px
   from label to field puts its fields at 189 (140 + 49). */
.text-plusminus { left: 64px; top: 8804px; width: 1337px; }
.ch-process { left: 64px; top: 9041px; width: 151px; font-size: 24px; line-height: 58px; letter-spacing: 0.24px; }
.ch-t2 { left: 554px; top: 8981px; width: 94px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.ch-r2 { left: 696px; top: 8981px; width: 94px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.ch-c2 { left: 807px; top: 8981px; width: 93px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.pr1-a { left: 189px; top: 9042px; width: 327px; height: 55px; }
.pr1-b { left: 555px; top: 9042px; width: 115px; height: 55px; }
.pr1-c { left: 676px; top: 9042px; width: 116px; height: 55px; }
.pr1-d { left: 798px; top: 9042px; width: 116px; height: 55px; }
.pr1-e { left: 947px; top: 9050px; width: 39px; height: 39px; }
.pr1-f { left: 991px; top: 9050px; width: 40px; height: 39px; }
.pr1-ct { left: 484px; top: 9060px; }
.pr1-name { left: 220px; top: 9057px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.pr1-time { left: 576px; top: 9057px; width: 102px; text-align: center; }
.pr1-rate { left: 669px; top: 9058px; width: 130px; text-align: center; }
.pr1-cost { left: 798px; top: 9058px; width: 116px; text-align: center; }
.pr1-plus { left: 949px; top: 9053px; width: 35px; line-height: 25px; }
.pr1-minus { left: 994px; top: 9053px; width: 35px; line-height: 25px; }
.pr1-rl { left: 190px; top: 9069px; width: 833px; height: 1px; background: #8fa4ba; }
.pr2-a { left: 189px; top: 9116px; width: 327px; height: 55px; }
.pr2-b { left: 555px; top: 9116px; width: 115px; height: 55px; }
.pr2-c { left: 676px; top: 9116px; width: 116px; height: 55px; }
.pr2-d { left: 798px; top: 9116px; width: 116px; height: 55px; }
.pr2-e { left: 947px; top: 9124px; width: 39px; height: 39px; }
.pr2-f { left: 991px; top: 9124px; width: 40px; height: 39px; }
.pr2-ct { left: 484px; top: 9134px; }
.pr2-name { left: 220px; top: 9131px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.pr2-time { left: 576px; top: 9131px; width: 102px; text-align: center; }
.pr2-rate { left: 669px; top: 9132px; width: 130px; text-align: center; }
.pr2-cost { left: 798px; top: 9132px; width: 116px; text-align: center; }
.pr2-plus { left: 949px; top: 9127px; width: 35px; line-height: 25px; }
.pr2-minus { left: 994px; top: 9127px; width: 35px; line-height: 25px; }
.pr2-rl { left: 190px; top: 9143px; width: 833px; height: 1px; background: #8fa4ba; }
.pr3-a { left: 189px; top: 9190px; width: 327px; height: 55px; }
.pr3-b { left: 555px; top: 9190px; width: 115px; height: 55px; }
.pr3-c { left: 676px; top: 9190px; width: 116px; height: 55px; }
.pr3-d { left: 798px; top: 9190px; width: 116px; height: 55px; }
.pr3-e { left: 947px; top: 9198px; width: 39px; height: 39px; }
.pr3-f { left: 991px; top: 9198px; width: 40px; height: 39px; }
.pr3-ct { left: 484px; top: 9208px; }
.pr3-name { left: 220px; top: 9205px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.pr3-time { left: 576px; top: 9205px; width: 102px; text-align: center; }
.pr3-rate { left: 669px; top: 9206px; width: 130px; text-align: center; }
.pr3-cost { left: 798px; top: 9206px; width: 116px; text-align: center; }
.pr3-plus { left: 949px; top: 9201px; width: 35px; line-height: 25px; }
.pr3-minus { left: 994px; top: 9201px; width: 35px; line-height: 25px; }
.pr3-rl { left: 190px; top: 9217px; width: 833px; height: 1px; background: #8fa4ba; }
.pr4-a { left: 189px; top: 9264px; width: 327px; height: 55px; }
.pr4-b { left: 555px; top: 9264px; width: 115px; height: 55px; }
.pr4-c { left: 676px; top: 9264px; width: 116px; height: 55px; }
.pr4-d { left: 798px; top: 9264px; width: 116px; height: 55px; }
.pr4-e { left: 947px; top: 9272px; width: 39px; height: 39px; }
.pr4-f { left: 991px; top: 9272px; width: 40px; height: 39px; }
.pr4-ct { left: 484px; top: 9282px; }
.pr4-name { left: 220px; top: 9279px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.pr4-time { left: 576px; top: 9279px; width: 102px; text-align: center; }
.pr4-rate { left: 669px; top: 9280px; width: 130px; text-align: center; }
.pr4-cost { left: 798px; top: 9280px; width: 116px; text-align: center; }
.pr4-plus { left: 949px; top: 9275px; width: 35px; line-height: 25px; }
.pr4-minus { left: 994px; top: 9275px; width: 35px; line-height: 25px; }
.pr4-rl { left: 190px; top: 9291px; width: 833px; height: 1px; background: #8fa4ba; }
.ch-shipping { left: 64px; top: 9391px; width: 151px; font-size: 24px; line-height: 58px; letter-spacing: 0.24px; }
.sh1-a { left: 189px; top: 9392px; width: 327px; height: 55px; }
.sh1-b { left: 555px; top: 9392px; width: 115px; height: 55px; }
.sh1-c { left: 676px; top: 9392px; width: 116px; height: 55px; }
.sh1-d { left: 798px; top: 9392px; width: 116px; height: 55px; }
.sh1-e { left: 947px; top: 9400px; width: 39px; height: 39px; }
.sh1-f { left: 991px; top: 9400px; width: 40px; height: 39px; }
.sh1-ct { left: 484px; top: 9410px; }
.sh1-name { left: 220px; top: 9407px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.sh1-time { left: 576px; top: 9407px; width: 102px; text-align: center; }
.sh1-rate { left: 669px; top: 9408px; width: 130px; text-align: center; }
.sh1-cost { left: 798px; top: 9408px; width: 116px; text-align: center; }
.sh1-plus { left: 949px; top: 9403px; width: 35px; line-height: 25px; }
.sh1-minus { left: 994px; top: 9403px; width: 35px; line-height: 25px; }
.sh1-rl { left: 190px; top: 9419px; width: 833px; height: 1px; background: #8fa4ba; }
.sh2-a { left: 189px; top: 9466px; width: 327px; height: 55px; }
.sh2-b { left: 555px; top: 9466px; width: 115px; height: 55px; }
.sh2-c { left: 676px; top: 9466px; width: 116px; height: 55px; }
.sh2-d { left: 798px; top: 9466px; width: 116px; height: 55px; }
.sh2-e { left: 947px; top: 9474px; width: 39px; height: 39px; }
.sh2-f { left: 991px; top: 9474px; width: 40px; height: 39px; }
.sh2-ct { left: 484px; top: 9484px; }
.sh2-name { left: 220px; top: 9481px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.sh2-time { left: 576px; top: 9481px; width: 102px; text-align: center; }
.sh2-rate { left: 669px; top: 9482px; width: 130px; text-align: center; }
.sh2-cost { left: 798px; top: 9482px; width: 116px; text-align: center; }
.sh2-plus { left: 949px; top: 9477px; width: 35px; line-height: 25px; }
.sh2-minus { left: 994px; top: 9477px; width: 35px; line-height: 25px; }
.sh2-rl { left: 190px; top: 9493px; width: 833px; height: 1px; background: #8fa4ba; }
.sh3-a { left: 189px; top: 9540px; width: 327px; height: 55px; }
.sh3-b { left: 555px; top: 9540px; width: 115px; height: 55px; }
.sh3-c { left: 676px; top: 9540px; width: 116px; height: 55px; }
.sh3-d { left: 798px; top: 9540px; width: 116px; height: 55px; }
.sh3-e { left: 947px; top: 9548px; width: 39px; height: 39px; }
.sh3-f { left: 991px; top: 9548px; width: 40px; height: 39px; }
.sh3-ct { left: 484px; top: 9558px; }
.sh3-name { left: 220px; top: 9555px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.sh3-time { left: 576px; top: 9555px; width: 102px; text-align: center; }
.sh3-rate { left: 669px; top: 9556px; width: 130px; text-align: center; }
.sh3-cost { left: 798px; top: 9556px; width: 116px; text-align: center; }
.sh3-plus { left: 949px; top: 9551px; width: 35px; line-height: 25px; }
.sh3-minus { left: 994px; top: 9551px; width: 35px; line-height: 25px; }
.sh3-rl { left: 190px; top: 9567px; width: 833px; height: 1px; background: #8fa4ba; }
.sh4-a { left: 189px; top: 9614px; width: 327px; height: 55px; }
.sh4-b { left: 555px; top: 9614px; width: 115px; height: 55px; }
.sh4-c { left: 676px; top: 9614px; width: 116px; height: 55px; }
.sh4-d { left: 798px; top: 9614px; width: 116px; height: 55px; }
.sh4-e { left: 947px; top: 9622px; width: 39px; height: 39px; }
.sh4-f { left: 991px; top: 9622px; width: 40px; height: 39px; }
.sh4-ct { left: 484px; top: 9632px; }
.sh4-name { left: 220px; top: 9629px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.sh4-time { left: 576px; top: 9629px; width: 102px; text-align: center; }
.sh4-rate { left: 669px; top: 9630px; width: 130px; text-align: center; }
.sh4-cost { left: 798px; top: 9630px; width: 116px; text-align: center; }
.sh4-plus { left: 949px; top: 9625px; width: 35px; line-height: 25px; }
.sh4-minus { left: 994px; top: 9625px; width: 35px; line-height: 25px; }
.sh4-rl { left: 190px; top: 9641px; width: 833px; height: 1px; background: #8fa4ba; }
.sh5-a { left: 189px; top: 9688px; width: 327px; height: 55px; }
.sh5-b { left: 555px; top: 9688px; width: 115px; height: 55px; }
.sh5-c { left: 676px; top: 9688px; width: 116px; height: 55px; }
.sh5-d { left: 798px; top: 9688px; width: 116px; height: 55px; }
.sh5-e { left: 947px; top: 9696px; width: 39px; height: 39px; }
.sh5-f { left: 991px; top: 9696px; width: 40px; height: 39px; }
.sh5-ct { left: 484px; top: 9706px; }
.sh5-name { left: 220px; top: 9703px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.sh5-time { left: 576px; top: 9703px; width: 102px; text-align: center; }
.sh5-rate { left: 669px; top: 9704px; width: 130px; text-align: center; }
.sh5-cost { left: 798px; top: 9704px; width: 116px; text-align: center; }
.sh5-plus { left: 949px; top: 9699px; width: 35px; line-height: 25px; }
.sh5-minus { left: 994px; top: 9699px; width: 35px; line-height: 25px; }
.sh5-rl { left: 190px; top: 9715px; width: 833px; height: 1px; background: #8fa4ba; }
.title-risk { left: 0px; top: 9838px; width: 1444px; }
.text-risk { left: 64px; top: 9974px; width: 1337px; }
.rk1-h0 { left: 64px; top: 10319px; width: 151px; font-size: 24px; line-height: 58px; letter-spacing: 0.24px; }
.rk1-h1 { left: 505px; top: 10259px; width: 94px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rk1-h2 { left: 647px; top: 10259px; width: 94px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rk1-h3 { left: 758px; top: 10259px; width: 93px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rk1-h4 { left: 909px; top: 10259px; width: 242px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rk2-h0 { left: 64px; top: 10452px; width: 151px; font-size: 24px; line-height: 58px; letter-spacing: 0.24px; }
.rk2-h1 { left: 505px; top: 10392px; width: 94px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rk2-h2 { left: 647px; top: 10392px; width: 94px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rk2-h3 { left: 758px; top: 10392px; width: 93px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rk2-h4 { left: 909px; top: 10392px; width: 242px; font-size: 24px; line-height: 64px; letter-spacing: 0.24px; }
.rk1-a { left: 140px; top: 10320px; width: 327px; height: 55px; }
.rk1-b { left: 506px; top: 10320px; width: 115px; height: 55px; }
.rk1-c { left: 627px; top: 10320px; width: 116px; height: 55px; }
.rk1-d { left: 749px; top: 10320px; width: 116px; height: 55px; }
.rk1-e { left: 910px; top: 10320px; width: 384px; height: 55px; }
.rk1-ct { left: 435px; top: 10338px; }
.rk1-name { left: 171px; top: 10335px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.rk1-v { left: 527px; top: 10335px; width: 102px; text-align: center; }
.rk1-lt { left: 620px; top: 10336px; width: 130px; text-align: center; }
.rk1-cost { left: 749px; top: 10336px; width: 116px; text-align: center; }
.rk1-cm { left: 923px; top: 10335px; width: 360px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.rk1-rl1 { left: 467px; top: 10347px; width: 39px; height: 1px; background: #8fa4ba; }
.rk1-rl2 { left: 621px; top: 10347px; width: 6px; height: 1px; background: #8fa4ba; }
.rk1-rl3 { left: 743px; top: 10347px; width: 6px; height: 1px; background: #8fa4ba; }
.rk1-rl4 { left: 865px; top: 10347px; width: 45px; height: 1px; background: #8fa4ba; }
.rk2-a { left: 140px; top: 10453px; width: 327px; height: 55px; }
.rk2-b { left: 506px; top: 10453px; width: 115px; height: 55px; }
.rk2-c { left: 627px; top: 10453px; width: 116px; height: 55px; }
.rk2-d { left: 749px; top: 10453px; width: 116px; height: 55px; }
.rk2-e { left: 910px; top: 10453px; width: 384px; height: 55px; }
.rk2-ct { left: 435px; top: 10471px; }
.rk2-name { left: 171px; top: 10468px; width: 260px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.rk2-cm { left: 923px; top: 10468px; width: 360px; font-size: 24px; line-height: 25px; letter-spacing: 0.24px; color: #000; }
.rk2-rl { left: 141px; top: 10480px; width: 769px; height: 1px; background: #8fa4ba; }
.title-import { left: 0px; top: 10725px; width: 1444px; }
.text-import { left: 64px; top: 10861px; width: 1337px; }
.shot-step1b { left: -134px; top: 11387px; width: 941px; height: 891px; object-fit: cover; }
.fade-step1-v { left: -134px; top: 11472px; width: 952px; height: 828px; background: linear-gradient(to bottom, transparent, var(--color-bg)); }
.fade-step1-h { left: -134px; top: 11387px; width: 697px; height: 952px; background: linear-gradient(to right, var(--color-bg), transparent); }
.shot-step2 { left: -625px; top: 11685px; width: 1609px; height: 1521px; object-fit: cover; box-shadow: 0 36px 100px #000; }
/* The two light beams — a chain, owner 2026-10-12: each trapezoid's sides run
   from the button that spawns it out to the edges of what it opens; the
   owner's guide lines on a Figma screenshot fix the slopes. Fill #8c9cab in
   OVERLAY (Figma). Measured page coordinates, none estimated:
     big Import button (.mock-button)   393.5 .. 990.5, bottom 11207.3; the
       guides leave its bottom edge at 408.6 and 980.1
     small Import button in step1-import.png, outline scanned in the image
       and mapped through its object-fit (scale 0.5362): 660.6 .. 802.2,
       top 11436.3, bottom 11450.3 (the guides pass through these corners)
     lookup panel in step2-lookup.png (scale 0.9168): 405.5 .. 984, top 11685
   Upper: big button -> small button's top. Lower: small button's bottom ->
   the panel's top. Percentages are those points inside each box. */
.beam-a { left: 408.6px; top: 11207.3px; width: 571.5px; height: 229px; background: #8c9cab; mix-blend-mode: overlay; clip-path: polygon(0 0, 100% 0, 68.87% 100%, 44.09% 100%); }
.beam-b { left: 405.5px; top: 11450.3px; width: 578.5px; height: 234.7px; background: #8c9cab; mix-blend-mode: overlay; clip-path: polygon(44.1% 0, 68.57% 0, 100% 100%, 0 100%); }
/* The big Import button as Figma has it now (moved/resized since the 10-09
   read; measured off the owner's 2026-10-12 screenshot at 1:1, which matches
   the panel to 0.5px): 597 x 66, centred over the panel, 18.7px higher. */
.mock-button { left: 393.5px; top: 11141.3px; width: 597px; height: 66px; }
.mock-matches { left: 1029.3px; top: 11146.5px; width: 151px; font-size: 31px; line-height: 58px; letter-spacing: 0.31px; color: rgba(255, 255, 255, 0.5); }
.fade-step2-h { left: -577px; top: 11685px; width: 982px; height: 1642px; background: linear-gradient(to right, var(--color-bg), transparent); }
/* Import's labels: Figma's 20 on 25 at 1% and Figma's tops — there is room
   for them here (358 wide, to the page edge), so the Oracle 13/17 used for
   the edge-to-edge spreadsheet labels does not apply. */
.im-1, .im-2, .im-3, .im-4, .im-5, .im-6, .im-7, .im-8 { font-size: 20px; line-height: 25px; letter-spacing: 0.2px; }
.im-1 { left: 1086px; top: 11713px; width: 358px; }
.im-2 { left: 1086px; top: 11771px; width: 358px; }
.im-3 { left: 1086px; top: 11841px; width: 358px; }
.im-4 { left: 1086px; top: 11932px; width: 358px; }
.im-5 { left: 1086px; top: 12052px; width: 358px; }
.im-6 { left: 1086px; top: 12339px; width: 358px; }
.im-7 { left: 1086px; top: 12500px; width: 358px; }
.im-8 { left: 1086px; top: 12636px; width: 358px; }
.ld-i1 { left: 1024px; top: 11723.5px; width: 51px; transform: rotate(180deg); }
.ld-i2 { left: 1024px; top: 11781.5px; width: 51px; transform: rotate(180deg); }
.ld-i3 { left: 1024px; top: 11851.5px; width: 51px; transform: rotate(180deg); }
.ld-i4 { left: 1024px; top: 11942.5px; width: 51px; transform: rotate(180deg); }
.ld-i5 { left: 1024px; top: 12105.5px; width: 51px; transform: rotate(180deg); }
.ld-i6 { left: 1024px; top: 12238.5px; width: 51px; transform: rotate(180deg); }
.ld-i7 { left: 1024px; top: 12510.5px; width: 51px; transform: rotate(180deg); }
.ld-i8 { left: 1024px; top: 12646.5px; width: 51px; transform: rotate(180deg); }
.title-prototype { left: 0px; top: 13371px; width: 1444px; }
.text-prototype { left: 64px; top: 13498px; width: 1337px; }
.label-impressions { left: 22px; top: 13763px; width: 421px; text-align: center; }
.label-uat { left: 502px; top: 13763px; width: 480px; text-align: center; }
.label-scoring { left: 1048px; top: 13763px; width: 353px; text-align: center; }
/* The four text bubbles are Figma VECTORS (pill + tail) in 59.9-tall boxes —
   drawn as such, not boxes with one square corner. Pill 35.5 tall, fully
   rounded; the tail leans toward its speaker. Shapes traced off the owner's
   Figma screenshot of 2026-10-12 (scale 0.874), so tail points are to ~1px. */
.say-bubble { max-width: none; overflow: visible; fill: #d9d9d9; }
.fi-say1 { left: 32px; top: 13832px; width: 106.78px; height: 59.9px; }
.fi-say2 { left: 173px; top: 13832px; width: 189.78px; height: 59.9px; }
.fi-t1 { left: 45px; top: 13838px; width: 91px; font-size: 16px; line-height: 22px; color: #000; }
.fi-t2 { left: 196px; top: 13840px; width: 152px; font-size: 16px; line-height: 22px; color: #000; }
.fi-small-body { left: 123.87px; top: 13925.71px; --icon-width: 49.82px; --icon-height: 54.56px; }
.fi-small-head { left: 133.36px; top: 13888.94px; --icon-width: 31.57px; --icon-height: 31.57px; }
.fi-big-body { left: 229.44px; top: 13957.92px; --icon-width: 88.96px; --icon-height: 97.08px; }
.fi-big-head { left: 246.39px; top: 13892.49px; --icon-width: 56.3px; --icon-height: 56.3px; }
.fi-laptop { left: 157.09px; top: 13950.62px; width: 102.01px; height: 71.17px; border: 4px solid var(--color-white); border-radius: 14px; background: var(--color-bg); }
.fi-base { left: 158.27px; top: 14025.35px; width: 122.18px; height: 7.12px; border-radius: 10px; background: var(--color-white); }
.ua-say1 { left: 502px; top: 13832px; width: 163.78px; height: 59.9px; }
.ua-say2 { left: 716px; top: 13832px; width: 170.78px; height: 59.9px; }
.ua-t1 { left: 519px; top: 13838px; width: 186px; font-size: 16px; line-height: 22px; color: #000; }
.ua-t2 { left: 741px; top: 13840px; width: 130px; font-size: 16px; line-height: 22px; color: #000; }
.ua-small-body { left: 630.87px; top: 13925.71px; --icon-width: 49.82px; --icon-height: 54.56px; }
.ua-small-head { left: 640.36px; top: 13888.94px; --icon-width: 31.57px; --icon-height: 31.57px; }
.ua-big-body { left: 736.44px; top: 13957.92px; --icon-width: 88.96px; --icon-height: 97.08px; }
.ua-big-head { left: 753.39px; top: 13892.49px; --icon-width: 56.3px; --icon-height: 56.3px; }
.ua-laptop { left: 664.09px; top: 13950.62px; width: 102.01px; height: 71.17px; border: 4px solid var(--color-white); border-radius: 14px; background: var(--color-bg); }
.ua-base { left: 665.27px; top: 14025.35px; width: 122.18px; height: 7.12px; border-radius: 10px; background: var(--color-white); }
.sc-say1 { left: 1184px; top: 13853px; --icon-width: 40px; --icon-height: 24px; }
.sc-say2 { left: 1071px; top: 13832px; --icon-width: 84px; --icon-height: 52px; }
.sc-screen { left: 1120px; top: 13862px; width: 99px; height: 68px; border: 1px solid #d9d9d9; border-radius: 5px; }
.sc-base { left: 1111px; top: 13936px; width: 118px; height: 9px; border-radius: 5px; background: #d9d9d9; }
.sc-1-body { left: 1155px; top: 13896.34px; --icon-width: 29px; --icon-height: 31.66px; }
.sc-1-head { left: 1160.52px; top: 13875px; --icon-width: 18.35px; --icon-height: 18.35px; }
.sc-2-body { left: 1204px; top: 13927.66px; --icon-width: 55px; --icon-height: 60.34px; }
.sc-2-head { left: 1214.48px; top: 13887px; --icon-width: 34.9px; --icon-height: 34.9px; }
.sc-3-body { left: 1106px; top: 13984.81px; --icon-width: 44px; --icon-height: 47.19px; }
.sc-3-head { left: 1114.38px; top: 13953px; --icon-width: 27.6px; --icon-height: 27.6px; }
.sc-4-body { left: 1132px; top: 13999.21px; --icon-width: 43px; --icon-height: 47.79px; }
.sc-4-head { left: 1140.19px; top: 13967px; --icon-width: 27.45px; --icon-height: 27.45px; }
.sc-5-body { left: 1164px; top: 14005.81px; --icon-width: 44px; --icon-height: 47.19px; }
.sc-5-head { left: 1172.38px; top: 13974px; --icon-width: 27.6px; --icon-height: 27.6px; }
.sc-6-body { left: 1278px; top: 13951.21px; --icon-width: 43px; --icon-height: 47.79px; }
.sc-6-head { left: 1286.19px; top: 13919px; --icon-width: 27.45px; --icon-height: 27.45px; }
.sc-7-body { left: 1265px; top: 13982.81px; --icon-width: 43px; --icon-height: 47.19px; }
.sc-7-head { left: 1273.19px; top: 13951px; --icon-width: 27.3px; --icon-height: 27.3px; }
.sc-8-body { left: 1237px; top: 13999.21px; --icon-width: 43px; --icon-height: 47.79px; }
.sc-8-head { left: 1245.19px; top: 13967px; --icon-width: 27.45px; --icon-height: 27.45px; }
.sc-9-body { left: 1202px; top: 14008.4px; --icon-width: 43px; --icon-height: 46.6px; }
.sc-9-head { left: 1210.19px; top: 13977px; --icon-width: 27.1px; --icon-height: 27.1px; }
.text-proto-a { left: 64px; top: 14081px; width: 387px; }
.text-proto-b { left: 502px; top: 14081px; width: 440px; }
.text-proto-c { left: 1048px; top: 14081px; width: 361px; }
.title-reception { left: 0px; top: 14287px; width: 1444px; }
.shot-reception { left: 0px; top: 14381px; width: 1444px; height: 338px; object-fit: cover; }
.title-learned { left: 0px; top: 14832px; width: 1444px; }
/* GROWTH MINDSET — owner, 2026-10-13: the same row as the other four case
   studies, not Figma's large faint head beside the copy. "Growth Mindset", the
   head at 314 (104 wide) between it and "What I learned:" at 442 (the 152px
   gap the other pages use), the head standing on the bar's bottom edge: its
   120px box ends 1px below the bar, as Alere's does, so on this page's 94px
   bar its top is 25px above the bar's (14832 - 25). The copy takes the other
   pages' full width now that the head is not beside it. */
.title-learned .aside { margin-left: 152px; }
.title-learned .aside::before { content: none; }
.growth-text { left: 64px; top: 14975px; width: 1323px; }
.growth-head { left: 314px; top: 14807px; --head-width: 104px; }