/* ===========================================================================
   CONCEPT 1 - SUMMIT
   The founder's option: the product landing page's hero treatment as the
   background. Nothing here approximates that hero, it reuses it - the same
   .hero / .dark-hero / data-hbg="swarm" machinery agent-swarm.html runs, the
   same clear-until-scrolled header, the same eyebrow + h1 rhythm. What
   is new is what happens at the bottom of it: the three plans rise out of the
   wallpaper's fade into cream, so the page opens on the artwork and resolves
   on the decision.
   ========================================================================= */

/* ---- scroll-aware header, lifted from agent-swarm.html ------------------ */
.nav{position:fixed;left:0;right:0;top:0;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,backdrop-filter .28s ease}
.nav:not(.clear){background:var(--bg)}
.nav.clear{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.clear .logo span,.nav.clear .logo b{color:#fff !important}
.nav.clear .nav-links > a,.nav.clear .nav-links > .dd > a{color:rgba(255,255,255,.94)}
.nav.clear .nav-links > a:hover,.nav.clear .nav-links > .dd > a:hover{color:#fff}
.nav.clear .dd-menu a,.nav.clear .dd-menu .t{color:var(--ink)}
.nav.clear .dd-mega a{color:var(--ink-2)}
.nav.clear .dd-mega .ds-h,.nav.clear .dd-mega .ds-all{color:var(--dw-deep)}
.nav.clear .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);color:#fff}
.nav.clear .pilot-link{color:rgba(255,255,255,.94)}
.nav.clear .pilot-link:hover{color:#fff}

/* The product landing page's own wallpaper, same gradient stops as shared.css,
   re-encoded as webp INSIDE this lab folder: assets/bg/hero-swarm.png is
   3.6 MB and this page would be unusable to flick between concepts with. Same
   picture, same pixel size, 517 KB instead. Nothing in ../assets was touched.

   Quality 88, measured rather than picked, and the justification has been
   corrected once. Raw PSNR against the PNG is only 33.9 dB, which sounds lossy,
   but the difference is grain and not structure, and these heroes never render
   raw: they render under shared.css's rgba(8,13,9,.52) overlay. Measured
   THROUGH that composite the numbers clear ~40 dB, the visually-identical
   threshold, somewhere in the mid-80s.

   The first version of this comment said q=88 was the FIRST step to clear 40.
   That was wrong twice over. It came from sampling q at 80/84/88/92 and calling
   the first SAMPLED step over the line the first step, which is not the same
   claim; filling in the gaps puts my own model's crossing at q=87 (40.03 dB),
   and a second independent measurement with a slightly different overlay model
   puts it at q=86. The two models disagree by 0.3-0.4 dB throughout, which is
   an order of magnitude larger than the gap between adjacent quality steps
   around the threshold, so no single step can honestly be named as the
   boundary.

   What both models DO agree on: q<=84 is under 40, and q>=88 is over it with
   margin. That makes 88 the cheapest setting that clears in both, which is the
   claim that survives someone re-running this with a third overlay model.
   Beyond it the trade collapses: q=92 costs another 93 KB for 0.6 dB.

   If Summit ships, this belongs in assets/bg so every product page gets the
   same win, not just this one. That is a founder decision (32 in the launch
   artifact) because it touches the flagship pages' visuals. */
/* THE LAST STOP IS THE BAND'S GREEN, NOT THE CREAM PAGE GROUND. Founder picked
   "fade into green" from the review bar on 2026-08-09.
   Why it was wrong before: var(--bg) is the cream page, and the deep-green .bp
   band's top edge sits in the SAME pixel row as the hero's bottom - both measured
   at 1103px at 1440w - so the wallpaper resolved into cream and then collided
   with green. This value is only correct on THIS page; the other pages using this
   hero really do open onto cream, which is why the stop is set here and not in
   shared.css. If the band under the hero ever changes colour, this stop moves
   with it. */
.hero[data-hbg="swarm"]::before{
  background-image:linear-gradient(180deg,rgba(8,13,9,.66) 0%,rgba(8,13,9,.52) 40%,rgba(8,13,9,.50) 100%),url(hero-swarm.webp);
  background-size:cover,cover;background-position:center 32%,center 32%}

/* COMPARE PLANS LIVES INSIDE THE FAQ ACCORDION. Founder picked "one accordion"
   on 2026-08-09: "can we make common questions a drop down too, just so that this
   section is cohesive ... if you put compare plans as one of the drop downs in FAQ
   commmon questions". The standalone section is gone from page_v2 and the table is
   the accordion's first row, built from the same matrix_v2() call so it cannot
   drift from the real table.
   The matrix keeps its own horizontal scroller, so the answer padding that would
   double up on it is removed. */
.faq-cmp .faq-a{padding-left:0;padding-right:0}


/* The real CTA component pulls assets/bg/cta-tree.png, 2.80 MB. Same treatment
   as the hero and the same measurement: q=88 is 458 KB and 42.1 dB measured
   through the component's own dark gradient, comfortably past visually
   identical.

   IT IS NO LONGER A LOCAL COPY. The lab's cta-tree.webp turned out to be
   BYTE-IDENTICAL to assets/bg/forest-wall.webp, same md5 c09fdfaa, 469,162
   bytes, so we were publishing one 458 KB image at two URLs and a visitor
   going /pricing/ then /book-demo/ downloaded it twice with no cache reuse.
   This now points at the shared file and the duplicate is deleted.

   RELATIVE, not absolute, because this stylesheet is served from two roots:
   docs/mockups/website/v6/lab-pricing/ for the lab pages and /v6/lab-pricing/
   in production. "../assets/bg/..." resolves correctly under both; any
   absolute path would only work under one of them. */
/* Stops copied from shared.css EXACTLY. Only the image swaps, to the local
   webp; nothing about how the component looks changes.

   An earlier version of this rule darkened the 70% stop from .16 to .30, on the
   strength of my own measurement that the h2 sat at 2.72:1 against the tree at
   390, marginally under AA-large. That finding did not survive re-testing and
   I have withdrawn it. Measured with the reveal forced to its resting state and
   shared.css's own stops restored, the headline is 4.06:1 at worst with zero
   glyph pixels under 3.0. It passes, and the nudge was fixing nothing.

   Reverted rather than kept "because it does no harm": a lab that renders the
   canonical component slightly darker than the real one is precisely the silent
   divergence that lets a port drift, and the whole point of using the real
   component here was that it should be the real component. */
.cta{background:linear-gradient(to top,rgba(7,11,8,.92) 0%,rgba(7,11,8,.60) 38%,rgba(7,11,8,.16) 70%,rgba(7,11,8,0) 100%),
  url(../assets/bg/forest-wall.webp) center bottom/cover no-repeat,var(--dark)}

/* ---- the band: headline AND plans over one photograph -------------------- */
/* Widths come from the ?lab=1 bar when it is on and fall back to these defaults
   when it is not. The defaults are measured, not guessed. The founder's note was
   that the columns are "too tight, and it's tough to read": at the site's
   standard 1180 band the feature text runs 35 characters per line, well under
   the 45 to 75 readability band. 1340 with 24px card padding gives 44, a 26%
   improvement, and still leaves 50px of breathing room either side at a 1440
   viewport. 1420 is the only setting that formally clears 45 (48 chars) but it
   leaves 10px, so it is offered in the bar rather than shipped as the default.
   Note this page is then wider than the site's 1180 --maxw: worth his ruling. */
.hero{max-width:var(--lab-maxw,1340px)}
.hero{min-height:0;display:flex;flex-direction:column;justify-content:flex-start;
  padding-top:clamp(128px,17vh,188px);padding-bottom:clamp(52px,6vw,84px)}
.hero .eyebrow::before,.hero .eyebrow::after{display:none}
.hero h1{font-size:clamp(40px,5.7vw,70px);line-height:1.02;letter-spacing:-.035em;
  max-width:17ch;margin:18px 0 clamp(38px,5vw,66px)}
.hero.dark-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;display:block}
/* FOUNDER 2026-08-09: the italic green clause goes "in the next line", so it is
   its own block rather than an inline span that wraps at whatever the measure
   happens to allow. Applies to every headline variant on this page: all four are
   a plain clause plus an italic clause, so all four read as two lines. */


/* A local scrim over the wallpaper, on top of shared.css's own vertical
   gradient and under the text. The page's own scrim rather than a change to
   shared.css, whose stops are tuned for the product pages' own headlines.
   Lightened once the sub-headline came out and the hero went down to two
   lines of text. Tuned against measured pixels, not by eye: the verifier
   hides the glyphs, captures what is really behind them and scores every
   covered pixel, so this number is checked rather than assumed. */
.hero[data-hbg] > .hero-scrim{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:100%;z-index:0;pointer-events:none;
  background:
    linear-gradient(103deg,rgba(5,10,7,.72) 0%,rgba(5,10,7,.62) 34%,rgba(5,10,7,.34) 62%,rgba(5,10,7,.10) 84%,rgba(5,10,7,0) 100%),
    linear-gradient(180deg,rgba(5,10,7,.40) 0%,rgba(5,10,7,.20) 34%,rgba(5,10,7,.10) 62%,rgba(5,10,7,0) 100%)}
@media(max-width:900px){
  .hero[data-hbg] > .hero-scrim{
    background:linear-gradient(180deg,rgba(5,10,7,.74) 0%,rgba(5,10,7,.62) 30%,rgba(5,10,7,.30) 62%,rgba(5,10,7,0) 100%)}
}
@media(max-width:560px){
  .hero{min-height:0;padding-top:112px;padding-bottom:132px}
  .hero h1{font-size:38px;max-width:none}
}

/* ---- the plans, sitting on the photograph -------------------------------- */
.sm-plans{position:relative;z-index:2}
.c-summit .tgrid{gap:var(--lab-gap,18px)}
.c-summit .tcard{border-radius:var(--r-xl);box-shadow:0 30px 70px rgba(0,0,0,.34);
  border-color:transparent;padding:var(--lab-pad,24px)}
.c-summit .tcard.is-hi{border:1px solid var(--dw-tint);
  background:linear-gradient(180deg,var(--dw-tint-2) 0%,var(--card) 46%)}

/* The founder's hierarchy: the tier NAME is the display line, the price is the
   supporting line under it. It was the other way round, which is why the row
   read as "Free / Available on request / Available on request" rather than as
   three named plans. */
/* One height for all three heads, so the FEATURES rules land on a single line.
   The three heads are not naturally equal: only Agentic carries the
   Recommended flag, and Free prints no price line because its price is its
   name. Reserving the height here is what keeps the row from looking accidental
   again, which was the founder's original complaint about this card row. */
.t-head--name{min-height:104px;gap:0}
@media(max-width:900px){
  .t-head--name{min-height:0}
  /* Free prints no price, and once the cards stack there is nothing left to
     align it with, so the reserved line collapses rather than leaving a hole. */
  .c-summit .t-head--name .t-price:empty{display:none}
}
.c-summit .t-head--name .t-name{font-family:var(--sans);font-weight:600;text-transform:none;
  letter-spacing:-.03em;font-size:clamp(28px,3vw,38px);line-height:1.05;color:var(--ink)}
.c-summit .t-head--name .t-flag{order:-1;margin:0 0 8px}
/* the price slot keeps its height even when empty, so the three Features
   headings below it land on one line. Free's price is the word "Free", which is
   already the name, so it prints nothing rather than saying it twice. */
.c-summit .t-head--name .t-price{font-family:var(--sans);font-weight:450;font-size:16px;
  letter-spacing:0;line-height:1.4;color:var(--ink-2);margin-top:8px;min-height:1.4em;padding:0}
.c-summit .t-fxh{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.c-summit .t-fx{margin-top:12px;padding-top:0;border-top:0}

/* ---- one CTA for the section, not three --------------------------------- */
.plans-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(22px,2.6vw,32px)}
.plans-cta .btn{min-width:190px}
/* Opaque, not translucent. A .14-alpha white pill over the photograph measured
   3.77:1 at worst against the pixels actually behind it, because what is behind
   it is a photo and not a flat colour. Two solid buttons also read better on
   artwork than one solid and one ghost. */
.c-summit .plans-cta .btn-ghost{background:rgba(255,255,255,.95);border-color:transparent;
  color:var(--ink)}
.c-summit .plans-cta .btn-ghost:hover{background:#fff;border-color:transparent}
.c-summit .plans-cta .btn:focus-visible{outline:3px solid #CAFF02;outline-offset:3px;box-shadow:none}

/* ---- sections ----------------------------------------------------------- */
.sm-mx{padding-top:clamp(56px,7vw,96px);max-width:var(--lab-maxw,1340px)}
.sm-faq{padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--line);
  margin-top:clamp(56px,7vw,96px);max-width:var(--lab-maxw,1340px)}
.c-summit .sec-lead h2{font-size:clamp(28px,3.4vw,44px)}
/* "Compare plan features" is the dbt-style second section the founder asked
   for, and it is Ledger's table rather than a third pattern. */
.c-summit .sec-lead{margin-bottom:clamp(20px,2.4vw,30px)}
.sm-cta{padding-top:clamp(56px,7vw,96px);padding-bottom:0}
.sm-cta .wrap{max-width:var(--lab-maxw,1340px)}

/* The closing CTA is now the REAL shared component (.cta in shared.css), not a
   lookalike. Nothing to style here beyond the webp swap at the top of this
   file: that is the whole point of using it. */

/* ===========================================================================
   VARIANT PAGES ONLY - summit-band.html and summit-core.html
   Same visual language as Summit on purpose: only the ladder SHAPE changes, so
   this is an extension of the concept and not a fork of it. summit.html gets
   none of it, because .c-variant is only on the two variant bodies.
   ========================================================================= */

/* ---- placeholder banner -------------------------------------------------- */
/* Deliberately does not look like page furniture. He rejected copy rewrites
   earlier today and that rejection stands, so nothing here should be mistakable
   for a proposal. */
/* Above the hero, not below it. It sits before the ladder because the ladder
   is where the placeholder names are, and a disclaimer read after the thing it
   disclaims is not a disclaimer. Clears the fixed header. */
.ph-banner{max-width:var(--lab-maxw,1420px);margin:0 auto;position:relative;z-index:3;
  top:clamp(84px,10vh,116px);
  padding:18px 22px;border:1px dashed var(--line-2);border-left:3px solid var(--dw-deep);
  border-radius:var(--r-sm);background:var(--bg-2);display:flex;gap:18px;align-items:flex-start}
@media(max-width:700px){.ph-banner{flex-direction:column;gap:8px}}
.ph-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dw-deep);flex:none;padding-top:3px}
.ph-banner p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:80ch}
.ph-banner b{color:var(--ink);font-weight:600}

/* ---- the third slot ------------------------------------------------------ */
.t-desc{font-size:16px;line-height:1.45;color:var(--ink-2);margin-top:10px}
/* the head grows by a line, so the FEATURES rules need a new common floor */
.c-variant .t-head--name{min-height:172px}
@media(max-width:900px){.c-variant .t-head--name{min-height:0}}

/* two columns when the open-source offer leaves the ladder */
.tgrid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin:0 auto}
@media(max-width:900px){.tgrid-2{grid-template-columns:1fr;max-width:none}}

/* ---- bands --------------------------------------------------------------- */
.band{max-width:var(--lab-maxw,1420px);padding-top:clamp(46px,5.6vw,78px)}
.band-in{border-top:1px solid var(--line-2);padding-top:clamp(28px,3.4vw,44px)}
.band h2{font-size:clamp(28px,3.4vw,44px);max-width:20ch;margin:14px 0 14px}
/* --dw measures 3.84:1 on cream. Large text clears AA-large at 3.0, but the
   rest of this lab already uses --dw-deep for green, so keep one green. */
.band h2 em{font-family:var(--serif);font-style:italic;color:var(--dw-deep)}
.band-p{font-size:17px;line-height:1.62;color:var(--ink-2);max-width:70ch}
/* A sentence, so it is set as one. It was 11px mono, which my own type rule
   forbids for anything that is not a typographic label, and growing the
   exemption list to cover it would have been the wrong way round. */
.band-note{font-size:16px;line-height:1.5;color:var(--ink-2);margin-top:16px}
.band-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* the open-source band is substantial, not a footnote: lifting the offer out of
   the ladder must not read as burying it */
.band-oss-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.4vw,64px);
  align-items:start}
@media(max-width:900px){.band-oss-in{grid-template-columns:1fr;gap:28px}}
.band-oss-fx{margin-top:6px;padding-top:0;border-top:0}
@media(max-width:900px){.band-oss-fx{border-top:1px solid var(--line);padding-top:22px}}

/* the hero's top padding is sized for a fixed header over an empty band; on the
   variant pages the banner is occupying that space instead */
.c-variant .hero{padding-top:clamp(112px,13vh,150px)}
@media(max-width:560px){.c-variant .hero{padding-top:104px}}

/* ---------------------------------------------------------------------------
   DESCRIPTORS ONLY: the tier header with no price line
   ---------------------------------------------------------------------------
   The founder dropped the price line entirely, so the reserved 104px header
   that kept three price lines on one baseline is now reserving space for
   something that does not exist. These cards align on the NAME and let the
   descriptor set its own depth. min-height stays, at a smaller figure, because
   a one-line and a two-line descriptor still have to leave the feature lists
   level with each other. */
.t-head--nprice{min-height:96px}
@media(max-width:900px){.t-head--nprice{min-height:0}}
.c-variant .t-head--nprice{min-height:112px}
@media(max-width:900px){.c-variant .t-head--nprice{min-height:0}}
.t-head--nprice .t-desc{margin-top:12px}

/* the conflict note in the review banner: same banner, louder line */
.ph-warn{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}

/* ---------------------------------------------------------------------------
   OPEN SOURCE: three treatments, one visible
   ---------------------------------------------------------------------------
   All three ship in the markup and the switcher picks. display:none rather
   than visibility or opacity, deliberately: a hidden treatment must not be
   reachable by keyboard, must not be read out, and must not be measured by the
   contrast harness as if it were on the page. */
/* one treatment now, so nothing to switch and nothing to hide */
.oss-h{font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 12px;text-wrap:balance}

/* 1. Quiet rail. One line of type and a button, sitting on a rule. */
.oss-rail-in{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,48px);border-top:1px solid var(--line-2);padding-top:26px}
.oss-rail .oss-h{font-size:clamp(22px,2.2vw,28px);margin-bottom:8px}
.oss-rail .band-p{max-width:66ch}
@media(max-width:760px){.oss-rail-in{flex-direction:column;align-items:flex-start;gap:18px}}

/* 2. Proof card. Pitch left, repository facts right. */
.oss-proof-in{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,60px);align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,44px);box-shadow:var(--sh-sm)}
@media(max-width:900px){.oss-proof-in{grid-template-columns:1fr;gap:26px}}
.oss-proof-box{border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg);padding:20px}
.oss-pr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.oss-pk{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);flex:none}
.oss-pv{font-size:16px;color:var(--ink);text-align:right}
.oss-clone{padding-top:14px}
.oss-clone .oss-pk{display:block;margin-bottom:8px}
/* the command is the proof, so it has to be selectable and must not wrap into
   something you cannot paste */
.oss-clone code{display:block;font-family:var(--mono);font-size:12.5px;
  line-height:1.5;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;overflow-x:auto;white-space:nowrap;
  -webkit-user-select:all;user-select:all}

/* 3. Built on the core. Two lists, core on the left, platform on the right. */
.oss-core-lead{max-width:72ch;margin-bottom:clamp(24px,3vw,38px)}
.oss-core-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,44px)}
@media(max-width:860px){.oss-core-cols{grid-template-columns:1fr;gap:26px}}
.oss-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px)}
/* the core column is the foundation, so it is the one that reads as solid */
.oss-col--core{background:linear-gradient(180deg,var(--dw-tint-2) 0%,var(--card) 60%);
  border-color:var(--dw-tint)}
.oss-col-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dw-deep);font-weight:400;margin-bottom:16px}
.oss-col .t-fx{margin-top:0;padding-top:0;border-top:0}
.oss-col .btn{margin-top:22px}

/* The Recommended flag sits ABOVE the tier name (order:-1), so it adds its own
   height to one card and not the other, and the two feature lists end up 10px
   out of step. The min-height cannot absorb it: the flagged card's natural
   height simply exceeds the floor.
   Reserving the row on the unflagged cards fixes it without a magic number
   large enough to swallow the difference, which would break again the moment a
   descriptor wrapped to a third line. The spacer inherits the SAME font metrics
   and margin as the real flag, so the two boxes cannot drift apart. */
.c-summit .tcard:not(.is-hi) .t-head--name::before{
  content:"";display:block;order:-1;
  font-family:var(--mono);font-size:9.5px;line-height:1.6;height:1.6em;margin:0 0 8px}
@media(max-width:900px){.c-summit .tcard:not(.is-hi) .t-head--name::before{display:none}}

/* the bands gained a second paragraph and the two ran together as one block */
.band-p + .band-p{margin-top:14px}

/* ===========================================================================
   THE FOUNDER'S SIZING, SCOPED TO THE LIVE DESIGN
   ===========================================================================
   c1-summit.css is shared with summit.html, which is the frozen review record,
   so a bare change to the rules above restyles the archive as well. Everything
   he decided on 2026-08-09 is therefore scoped to .c-variant, which is only on
   the live page. The unscoped rules keep the values the archive was reviewed
   at (1340 / 18).

   The class is called .c-variant for historical reasons: it marked the two
   OSS-placement variants when there were two. One of them is now THE design
   and the other is deleted, so read it as "the live page". */
.c-variant .hero{max-width:var(--lab-maxw,1420px)}
.c-variant .tgrid{gap:var(--lab-gap,32px)}
.c-variant .sm-cta .wrap{max-width:var(--lab-maxw,1420px)}

/* HIS 1180 FOR THE MATRIX AND THE FAQ ONLY, and deliberately NOT on the
   tweaks-bar variable: he has picked 1180 as the answer for these two, so the
   bar keeps driving the ladder and the hero and stops driving these. A slider
   that can still move a settled decision is a slider that will eventually
   un-settle it by accident.

   It is also the typographically correct call rather than only a preference.
   At 1420 the FAQ answers run to roughly 140 characters a line, about double a
   comfortable measure, and a table that wide leaves a long eye-travel between
   a row label and the far column. Both improve at 1180. */
.c-variant .sm-mx{max-width:1180px}
.c-variant .sm-faq{max-width:1180px}

/* ===========================================================================
   THE CLOSING CTA'S WHITESPACE
   ===========================================================================
   Measured before touching anything: 160px above and 293px below at 1440,
   which is why it read as floating in a void.

   The 293 is worth writing down because the obvious arithmetic gets it wrong
   and predicts 192. The missing 101px is lab-pricing.css:155,
   section[class$="-cta"]{padding-bottom:clamp(60px,7vw,110px)}, an ATTRIBUTE
   selector that matches .sm-cta and outranks it (0,1,1 against 0,1,0). So
   .sm-cta's own padding-bottom:0 never applied and never had. The real stack
   below the CTA was 64 (component margin) + 100.8 (that rule at 7vw) + 128
   (footer margin) = 292.8.

   Target is a symmetric 64 top and bottom, which is the shared component's own
   margin doing the whole job at both ends.

   WHAT IS NOT TOUCHED: .cta{margin:var(--s9) 0} in shared.css. That is the real
   component the home page and every product page render, and changing it would
   silently respace the entire site. Everything here is pricing-local and
   scoped to .c-variant, so the frozen summit.html keeps the spacing it was
   reviewed with. */
.c-variant .sm-cta{padding-top:0}
/* beats section[class$="-cta"] on specificity rather than !important */
.c-variant .sm-cta{padding-bottom:0}

/* The footer's 128px top margin is the rest of the gap. There is already a
   precedent for exactly this case: the React footer takes a `flush` prop and
   v6chrome.css:243 has .v6ch.v6-foot.flush{margin-top:0}, written for "pages
   whose last element already carries its own bottom margin", which is this page
   exactly. The mockup footer has no prop to pass, so the same idea is applied
   by selector, and it is named after the React one on purpose so the two are
   visibly the same decision. */
.c-variant footer{margin-top:0}

/* the seat ceiling on the entry rung, under the descriptor rather than in the
   vacated price slot: a number back in that position rebuilds the price line
   he asked to have removed */
.t-seats{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dw-deep);margin-top:12px}

/* the banner's conflict list */
.ph-list{list-style:none;margin:8px 0 0;padding:0}
.ph-list li{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0 0 8px;
  padding-left:16px;position:relative}
.ph-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--dw-deep)}
.ph-list b{color:var(--ink);font-weight:600}
.ph-body{flex:1;min-width:0}


/* ===========================================================================
   v2, THE PRICED LADDER (9 August 2026)
   ===========================================================================
   Everything below is scoped to .c-variant, which is only on the live page
   (summit-band.html and its shipped twin ../pricing.html). summit.html,
   ledger.html and control-room.html are the frozen review record and must not
   move, so nothing here is unscoped. The same discipline as the 2026-08-09
   block above, for the same reason.

   WHAT CHANGED VISUALLY AND WHY, in one place:
     1. the cards carry real prices now, so the head has a figure line and an
        italic secondary line under it
     2. the RECOMMENDED badge and the shaded Scale card are GONE on the
        founder's instruction, and the only emphasis left is one hairline
        border. The tinted Scale column went with them: it is the same emphasis
        in the same page, so keeping it would half-ignore him.
     3. the comparison table is the visual centre, so it sits on its own white
        panel with room around it and a row-label column that sticks on a phone
     4. the best-price band is the design system's loudest register, a deep
        green full-bleed slab, because it is the most clickable thing on the
        page after the CTAs
   ========================================================================= */

/* ---- hero: a longer headline and a three-clause sub ---------------------- */
/* 17ch was sized for "Start free. Scale when ready.". The v2 headline is 74
   characters and would set to five lines at that measure. */
.c-variant .hero h1{max-width:26ch;font-size:clamp(34px,4.4vw,56px);
  margin:18px 0 14px}
@media(max-width:560px){.c-variant .hero h1{font-size:34px;max-width:none}}
.c-variant .hero .sub{max-width:56ch;margin-bottom:clamp(34px,4.4vw,58px);
  font-size:17.5px}

/* ---- tier cards: one template, six bullets, CTA last -------------------- */
/* THE EMPHASIS ON SCALE, AT ITS QUIETEST. The founder asked for the badge and
   the shading off. This is what is left: a hairline in the brand green at 45%,
   over the same white card as its neighbours and the same shadow. If he wants
   the emphasis back, the fill is one line:
     background:linear-gradient(180deg,var(--dw-tint-2) 0%,var(--card) 46%) */
.c-variant .tcard.is-hi{border:1px solid var(--dw-ring);
  background:var(--card)}

.c-variant .tcard-v2{padding:clamp(24px,2.4vw,30px)}
/* The head reserves one height so the three lead-in lines land on a baseline;
   the CTA is pushed to the bottom by margin-top:auto so the three buttons land
   on one too, whatever the bullets do in between. */
.c-variant .t-head--v2{min-height:0;gap:0;display:flex;flex-direction:column}
/* TIER NAME DOMINANT, PRICE STEPPED DOWN. Founder, 2026-08-09: "I dont like
   that the price is bigger than the tier name, give me an option on the tweaks
   bar that flips that." This is the flipped state and it is the DEFAULT, so it
   is the plain rule here and the old price-dominant state is an override the
   review bar adds (see lab-tweaks-choices.js, group 2). The shipping page needs
   no attribute and carries none.

   It is a real hierarchy change, not a nudge: the name goes 20px -> up to 34px
   and becomes the display line; the figure comes down from up to 38px to 21px
   and takes the supporting colour, so the eye reads Start / Scale / Enterprise
   first and the number second. The canonical copy bolds only the figure, and
   that is still true - it is bold, it is simply no longer the biggest thing on
   the card. */
.c-variant .t-head--v2 .t-name{font-family:var(--sans);font-weight:600;
  text-transform:none;letter-spacing:-.03em;font-size:clamp(27px,2.5vw,34px);
  line-height:1.06;color:var(--ink)}
.c-variant .t-price2{margin-top:12px;font-size:15px;line-height:1.4;
  color:var(--ink-2);letter-spacing:0}
/* THE PRICE PAIR IS ONE SIZE NOW. Founder 2026-08-09: "can you make this the
   same smaller font - $7,500 one time / six to twelve week pilot". The amount was
   21px against the term's 15px, which read as two different pieces of
   information; they are one fact stated in two clauses. Weight still separates
   them, so the amount does not disappear - it just stops competing with the tier
   name, which is the hierarchy he asked for earlier ("I dont like that the price
   is bigger than the tier name").

   AND NOW ONE WEIGHT TOO. Founder, same day: "please make this all the same font
   since of it is bolded and idfferent font". Worth stating what was actually
   true: both clauses were ALREADY the same family (--sans, inherited - nothing
   on this page gives <strong> a face of its own), so what read as a second
   typeface was the 600 weight against the 400 next to it. Setting the amount to
   400 makes the pair one continuous line in one face, one size, one weight, one
   colour. The amount still reads first because it is first and on its own line.
   THE CANONICAL COPY BOLDS THE FIGURE, and this is now the second place we have
   departed from that (the first was the size); both departures are his, both are
   recorded here so nobody "restores" the bold as a copy fix. */
.c-variant .t-price2 strong{display:block;font-weight:400;font-size:15px;
  line-height:1.4;letter-spacing:0;color:var(--ink-2);margin-bottom:1px}
.c-variant .t-price2-m{display:inline}
.c-variant .t-price2-sub{margin-top:6px;font-size:15px;line-height:1.4}
.c-variant .t-price2-sub em{font-family:var(--serif);font-style:italic;
  color:var(--dw-deep)}
/* .c-variant .tcard-v2 .t-desc USED TO BE DECLARED HERE TOO, setting 15.5px in
   --ink-2. Deleted rather than left in: every one of its four declarations was
   superseded by the identical selector further down (the descriptor rule the
   founder locked in), so it did nothing except make the descriptor look like it
   was styled in two places at two sizes - which is exactly the confusion that hid
   the colour bug for as long as it did. One selector, one rule, one place. */

/* The lead-in carries the divider that .t-fx used to, because the lead-in is
   what introduces the list. One of the three is a full sentence and two are
   short carries, so it is bold prose rather than the mono uppercase label the
   frozen cards use. */
/* FOUNDER 2026-08-09: "currently a pilot program with the named engineer is
   bolded. Instead, I would make 'for data teams putting agents into
   production' bolded, and the pilot program line in the regular text as the
   rest of it." So the weight moves from the lead-in to the descriptor: the
   line that says WHO THE RUNG IS FOR earns the emphasis, and the lead-in to
   the bullets reads as body text like the bullets it introduces. That also
   removes one of the competing weights he objected to in this block. */
/* THE HAIRLINE MOVED UP, above BOTH lines rather than between them.
   Founder 2026-08-09: "the line between these 2 can you move to above these 2",
   naming the descriptor ("For teams who want the platform run for them...") and
   the lead ("Everything from the Pilot Program, ongoing, plus:").
   It was a border-top on .t-lead, which is exactly what put it between the two.
   It is now a border-top on .t-desc, so one rule separates the PRICE BLOCK from
   the two prose lines, and the descriptor and lead read as one group - which is
   what they are, since both describe the rung rather than its cost.
   .t-desc sits inside .t-head--v2 and .t-lead outside it, so the two cannot
   share a single wrapper without restructuring the card; moving the border is
   the whole change. */
/* SCOPED .tcard-v2 SO THE COLOUR ACTUALLY LANDS. This rule asked for
   color:var(--ink) - the darker ink that IS the emphasis the founder asked for -
   and never got it: at (0,2,0) it lost to .c-variant .tcard-v2 .t-desc (0,3,0)
   twenty lines up, which sets --ink-2. Higher specificity wins whatever the
   order, so the "bold in ink" descriptor has been rendering bold in the MUTED
   colour this whole time, which is part of why it did not read as emphasised.
   Measured, not assumed: computed colour was rgb(76,90,84) = --ink-2.
   Matching the selector makes the two rules equal-specificity, and this one is
   later in the file, so every declaration here now applies. All three .t-desc on
   both the shipping page and this twin sit inside a .tcard-v2, so nothing else
   changes behaviour. */
/* DECIDED AND LOCKED IN, 2026-08-10: "lets go with Descriptor emphasis Larger
   and lock it in". So 17.5px/1.4 is folded in here and the four-option block and
   its bar group are gone - one rule, no attribute, nothing to leave switched to
   the wrong state by accident. The three rejected options (serif at 19px, green
   rule, and body-size-as-it-was) are in the git history at this line if he ever
   wants to see them again.

   Note the size now beats the .t-lead and .t-fx li below it (both 15.5px), which
   is the whole point: the line that says WHO THE RUNG IS FOR is the largest prose
   on the card and the lead-in and bullets read as its supporting text.

   Two silent bugs were fixed getting here, both worth remembering because the
   build passed and the buttons lit up through both of them:
     1. the four options were written 'body[data-tw-desc="b"] .c-variant .t-desc'
        and .c-variant IS ON <body>, so they asked for a .c-variant DESCENDANT and
        matched nothing. The founder found it, not me. Same trap
        lab-tweaks-choices.js documents at length against group 2.
     2. THIS rule asked for color:var(--ink) and never got it: at (0,2,0) as
        '.c-variant .t-desc' it lost to '.c-variant .tcard-v2 .t-desc' (0,3,0)
        twenty lines up, which sets --ink-2. So the descriptor rendered bold in
        the MUTED colour the whole time. Measured rgb(76,90,84) before,
        rgb(17,32,26) after. Matching the selector is what fixed it - do not
        "simplify" it back to .c-variant .t-desc. */
.c-variant .tcard-v2 .t-desc{margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);font-size:17.5px;line-height:1.4;
  font-weight:600;color:var(--ink)}
.c-variant .t-lead{margin-top:14px;padding-top:0;border-top:0;
  font-size:15.5px;line-height:1.45;font-weight:400;color:var(--ink-2)}
.c-variant .tcard-v2 .t-fx{margin-top:12px;padding-top:0;border-top:0;gap:10px}
.c-variant .tcard-v2 .t-fx li{font-size:15.5px;line-height:1.45}
/* FOUNDER 2026-08-09: "the text of book a demo isnt centered ... vertically
   its like sticking to the top of the button." It was never an alignment
   problem - .btn already sets align-items:center. Measured: padding resolved
   to 0px 19px 8px, so the label sat 2.8px from the top and 10.9px from the
   bottom. TWO rules stacked to produce that. shared.css .btn-green sets
   padding-block:8px, a LOGICAL shorthand that overrides .btn's
   padding:11px 19px on both edges, and then this rule's own padding-top:0
   zeroed the top. Setting padding-block here beats both and restores a
   symmetric box. Not fixed in shared.css on purpose: .btn-green is every
   green button on the site and this page is not the place to move them. */
.c-variant .tcard-v2 .t-cta{margin-top:auto;padding-block:12px;width:100%}
/* auto margin collapses to nothing when the card is exactly as tall as its
   content, so the button still needs air above it */
.c-variant .tcard-v2 .t-fx{margin-bottom:22px}

/* the (preview) marker. Load-bearing: those surfaces are not hardened.
   IT IS NOT ITALIC AND NOT A SECOND TYPEFACE. Founder, 2026-08-09: "I dont like
   that prepview is itlizecide so remove that extra font." It was Instrument
   Serif italic inside a six-word sans bullet. It is now the body face at the
   bullet's own size and weight; the deep green is what marks it as a qualifier.
   The WORDING stays - that is the part that is load-bearing, and build.py's
   guard() counts three of them and fails if one comes back as an <em>. */
/* FOUNDER 2026-08-09: "the preview in brackets is green. It should be the
   regular color." It now inherits entirely - face, style, weight AND colour -
   so it is a marker in the sentence rather than a fourth treatment in the
   card. guard() still counts three of them and still fails on an <em>. */
.t-prev{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit}
/* In the table it sits inside a mono uppercase group label, so it takes that
   label's face rather than the body face - it was never the serif italic there,
   which is what he objected to. */
.mx-sec .t-prev{font-family:var(--mono);font-style:normal;letter-spacing:.08em;
  text-transform:none;color:inherit}

/* ---- the comparison table: now COLLAPSED behind a small heading --------- */
/* Founder, 2026-08-09: "change compare title to Compare plans and have it be
   small sized and click to open." This diverges from note 1 of the canonical
   copy, which calls the table the visual centre of the page and asks for it to
   be given room; the divergence is recorded in summit_v2() in build.py.
   A native <details>/<summary>, so it opens with no JS, takes focus and Enter
   from the keyboard for free, and stays in the DOM for a crawler. */
.c-variant .sm-mx{padding-top:clamp(64px,8vw,112px);
  padding-bottom:clamp(52px,6.5vw,88px)}
.c-variant .cmp{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.c-variant .cmp-sum{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:22px 2px}
.c-variant .cmp-sum::-webkit-details-marker{display:none}
/* SMALL. It is a section switch now, not the page's second display line: the
   open heading used to be clamp(28px,3.4vw,44px). */
.c-variant .cmp-h{font-family:var(--sans);font-size:19px;line-height:1.25;
  font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0}
.c-variant .cmp-c{width:20px;height:20px;flex:none;color:var(--ink-2);
  transition:transform .18s}
.c-variant .cmp[open] .cmp-c{transform:rotate(180deg)}
.c-variant .cmp-sum:hover .cmp-h,.c-variant .cmp-sum:hover .cmp-c{color:var(--dw-deep)}
.c-variant .cmp-sum:focus-visible{outline:2px solid var(--dw);outline-offset:3px;
  border-radius:8px}
.c-variant .cmp-body{padding-bottom:26px}
@media(prefers-reduced-motion:reduce){.c-variant .cmp-c{transition:none}}
.c-variant .mx-panel{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:clamp(18px,2.2vw,30px)}
/* NO overflow property on the panel. overflow:hidden or clip would round the
   corners and kill position:sticky on the table head in the same stroke, and
   the head sticking is the point of the section. */
.c-variant .mx-panel .mx thead th{background:var(--card)}
.c-variant .mx-v2 .mx-tn{font-size:16px}
/* the four packaging rows above the first group heading */
.c-variant .mx-v2 tr.mx-key th[scope=row]{font-weight:600;color:var(--ink)}
.c-variant .mx-v2 tr.mx-key .mx-txt{color:var(--ink)}
.c-variant .mx-secl{display:inline-block}
.c-variant .mx-hint{display:none}

@media(max-width:760px){
  /* PHONE: the row label sticks and the tiers scroll under it. Without this the
     label leaves the screen on the first swipe and the reader is comparing
     three unlabelled columns, which is the whole failure mode of a wide table
     on a phone. The table head cannot ALSO stick vertically, because
     position:sticky does not work inside a horizontal scroller; that is a
     browser constraint, not an oversight, and it is why the plan names are
     restated in the head that scrolls with the columns. */
  .c-variant .mx-panel{padding:14px}
  /* the scroller's negative inline margin is written for a table sitting
     directly on the page; inside the panel it would punch through the padding */
  .c-variant .mx-panel .mx-scroll{margin-inline:0;padding-inline:0}
  .c-variant .mx-v2{min-width:640px;table-layout:fixed}
  .c-variant .mx-v2 .mx-corner{width:184px}
  .c-variant .mx-v2 .mx-th{width:152px;padding:0 10px 14px}
  .c-variant .mx-v2 .mx-corner,
  .c-variant .mx-v2 tbody th[scope=row]{position:sticky;left:0;z-index:4;
    background:var(--card);box-shadow:1px 0 0 var(--line)}
  .c-variant .mx-v2 .mx-sec th{background:var(--card)}
  /* the group label rides the horizontal scroll so it is still readable when
     the reader is looking at the Enterprise column */
  .c-variant .mx-v2 .mx-secl{position:sticky;left:0}
  .c-variant .mx-v2 tbody td{padding:13px 10px}
  .c-variant .mx-hint{display:block;margin-top:14px;font-size:13.5px;
    color:var(--ink-2)}
}

/* ---- the best-price band: full bleed, deep green ------------------------ */
/* --grad-flag is shared.css's own deep-green feature surface, so this is the
   system's loudest existing register rather than a new one. Full bleed because
   the copy says full-width band, and because a hairline-topped cream band
   cannot be the second most clickable thing on a page that already has four
   cream sections. */
.bp{background:var(--grad-flag);color:#fff;
  padding:clamp(56px,7vw,96px) 0 clamp(52px,6.5vw,88px)}
.bp-in{max-width:1180px}
.bp h2{font-size:clamp(30px,4vw,52px);line-height:1.06;letter-spacing:-.032em;
  color:#fff;max-width:26ch;margin:0 0 24px;text-wrap:balance}
.bp h2 em{font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:var(--dw-tint)}
.bp-p{max-width:76ch;color:rgba(255,255,255,.88);font-size:16.5px;line-height:1.66}
.bp-p + .bp-p{margin-top:18px}
/* FOUNDER 2026-08-09: "visually the text doesnt look to be the same in this
   section", quoting the commitments paragraph and the market paragraph. It
   was three paragraphs set three ways - .bp-commit at 17.5px/1.62, .bp-p at
   16.5px/1.66, and .bp-work in tint. They are ONE size and ONE leading now;
   the commitments keep only the near-white colour, which is a promise/proof
   distinction rather than a second typeface. .bp-work is gone with its
   paragraph. */
.bp-commit{color:#fff}
/* the in-line link inside the second commitment. Underlined rather than
   coloured: on a deep-green slab a colour change is not a reliable affordance,
   and the paragraph is near-white by design. */
.bp-link{color:#fff;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:1px}
.bp-link:hover{border-bottom-color:#fff}
.bp-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bp-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.bp-b1{background:#fff;border-color:#fff;color:var(--dw-deep);font-weight:600}
.bp-b1:hover{background:var(--dw-tint);border-color:var(--dw-tint)}
.bp-b2{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
.bp-b2:hover{background:rgba(255,255,255,.2)}
.bp .btn:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:none}
@media(max-width:640px){.bp-acts .btn{flex:1 1 auto;min-width:100%}}

/* ---- FAQ: the two open-source links live inside the first answer -------- */
/* That placement is the page's biggest known risk, which is why all three
   open-source links carry data-dw-track. See faqs_v2() in build.py. */
.c-variant .sm-faq{border-top:0;margin-top:0;padding-top:clamp(56px,7vw,96px)}
.c-variant .faq-a p + p{margin-top:14px}
.c-variant .faq-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px}
.c-variant .faq-link,.c-variant .faq-foot a{font-size:15.5px;font-weight:550;
  color:var(--dw-deep);border-bottom:1px solid var(--dw-ring);padding-bottom:2px}
.c-variant .faq-link:hover,.c-variant .faq-foot a:hover{border-bottom-color:var(--dw-deep)}
/* The foot line is now a sentence with the post title as its anchor, not a
   bare button-shaped link, so the lead-in needs body treatment of its own. */
.c-variant .faq-foot{margin-top:28px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* ---- the close: three CTAs on the shared component --------------------- */
/* No paragraph under the heading: the canonical closing is a heading and three
   buttons, and the component's usual subline is copy this page does not have.
   So the buttons carry the gap the paragraph used to. */
.cta-v2 .cta-actions{margin-top:30px}
.cta-v2 .cta-b2{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.cta-v2 .cta-b2:hover{background:rgba(255,255,255,.22)}
.cta-v2 .cta-b3{background:transparent;border-color:rgba(255,255,255,.36);color:#fff}
.cta-v2 .cta-b3:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.cta-v2 .btn:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:none}