/* Pricing-only craft. Loaded AFTER v2.css, site-craft.css and inner-craft.css.
   Nothing here is a new colour, font, radius or duration: every value is either
   an existing token or a value lifted verbatim from the rule this page used
   before the inner-craft conversion, so the approved look is preserved while
   the container changes.

   Three kinds of rule live here and only three:
     1. the C0145 plan-column typography, which used to be scoped under `.proof`
        and loses its home when the plan band becomes `.plan-cols`;
     2. the 2026-08-25 plan-band repair: the hover surface, the padding that
        gives every column equal air, the dividers, the arrival, and C0153;
     3. three narrow guards where a shared inner-craft rule misfires against this
        page's markup or against V2's own chrome. Each one names what it fixes
        and is meant to be deleted once the coordinator lifts it upstream.
   ------------------------------------------------------------------------- */


/* ---------- C0145 plan columns: the type the band used to own --------------
   Every declaration below is lifted VERBATIM from the `.proof .plan-*` rules
   in v2.css that styled these same four columns before the conversion. That
   scoping died with the `.proof` container, and inner-craft.css deliberately
   supplies only the grid, the dashed rules and the ground - so the type is
   re-homed here rather than redesigned. No value changed. */

.plan-col .plan-tier{
  display:block;position:relative;margin:0;padding-bottom:9px;
  font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-label);
}
/* The one signature response on this section: a 52px accent rule draws under
   the tier name while the column's ground comes up. Response, not entrance,
   so it stays on the 200ms interface timing. */
.plan-col .plan-tier::after{
  content:"";position:absolute;left:0;bottom:0;width:52px;height:2px;border-radius:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
.plan-col:hover .plan-tier::after,
.plan-col:focus-within .plan-tier::after{transform:scaleX(1)}

.plan-col>b{
  display:block;margin-top:16px;font-size:clamp(30px,3vw,42px);line-height:1.02;
  letter-spacing:-.03em;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
}
/* the unit and the rate line stay sentence case on purpose: the tier name is
   the ONE caps label per column, so four columns spend four labels, not twelve */
.plan-col .plan-unit{
  display:block;margin-top:10px;font-size:15px;font-weight:400;
  line-height:1.4;letter-spacing:0;text-transform:none;color:var(--muted);
}
/* min-height keeps the four blurbs on one baseline even though Enterprise
   publishes no monthly rate line */
.plan-col .plan-price{margin-top:24px;padding-top:16px;min-height:62px;border-top:1px solid var(--line-2)}
.plan-col .plan-price b{
  display:block;margin-top:0;font-size:16px;font-weight:600;line-height:1.4;
  letter-spacing:-.008em;color:var(--ink);
}
.plan-col .plan-price i{
  display:block;margin-top:5px;font-style:normal;font-size:13px;font-weight:400;
  line-height:1.4;letter-spacing:0;text-transform:none;color:var(--quiet);
}
.plan-col p{margin-top:18px;font-size:16px;line-height:1.6;color:var(--muted);max-width:34ch;text-wrap:pretty}


/* ===========================================================================
   2026-08-25 PLAN BAND REPAIR (C0145 amendment + C0153)
   ---------------------------------------------------------------------------
   Two hover defects were reported live at 1440. Both had the same cause: the
   hover surface was painted with an OUTSET box-shadow, so it was measured off
   the column's box and then pushed outside the grid.

     BUG 1, Essential: `box-shadow:-16px 0 0 0 var(--paper)` (this file) drew a
       solid 16px white bar clamped to the outside of the grid's left edge.
     BUG 2, Growth/Pro/Enterprise: `box-shadow:0 0 0 16px var(--paper)`
       (inner-craft.css) inflated the column into a white panel that started
       ~15px above the band's top rule and ended below it, punching a hole
       through both rules.

   The corrected pattern is the one already approved on the Home solution cards
   (`home-craft.css .grid2--objects .card::before`): the hover surface FILLS ITS
   GRID CELL EXACTLY at inset:0, and the air lives INSIDE the cell as padding.
   Nothing paints outside the cell, so no rule can be crossed.

   Making that true here needed one decision, because `.plan-col:first-child`
   carried padding-left:0 so the plan copy would line up with the heading above
   it - which is exactly why a cell-filling surface had nowhere to breathe and
   why an outset shadow got reached for. A bled grid was tried first and
   rejected on the evidence: measured at 1440 it put 22px of hovered ground to
   the LEFT of where the band's top rule starts, which is the reported defect
   arriving by a prettier route.

   So the air moved inside instead. All four columns carry the same 26px/22px,
   the grid keeps the shell's own column, and the surface, the dividers and the
   band's top rule now begin and end on exactly the same two vertical lines.
   The cost is 22px: the plan copy is inset from the section rule by the cell
   padding of a table, which is what this band is.
   =========================================================================== */

/* ---------- the band, and the air that now lives inside each cell ---------- */

/* The C0141 drawn rule sits on the band's first pixel row, which is also the
   columns' first pixel row, and the columns paint after it in DOM order. Left
   alone, a hovered column's ground would erase that rule across its own width -
   "the top rule stops and restarts around it", arriving by a third route.
   Lifting the rule above the columns keeps it continuous under every hover. */
.plan-cols::before{z-index:1}

/* One blanket declaration at 0,3,0 so it wins over every `.plan-col` padding
   rule inner-craft.css sets at every breakpoint. The stack resets it below. */
.plan-cols>.plan-col,
.plan-cols>.plan-col:first-child,
.plan-cols>.plan-col:last-child{padding:26px 22px;position:relative;isolation:isolate}

/* ---------- the hover surface: inset:0, nothing outside the cell ------------ */
/* `isolation:isolate` above makes each column its own stacking context, so the
   z-index:-1 surface sits above the column's own ground and below its copy
   without being swallowed by `.sec-shell`'s tint. */

.plan-cols>.plan-col::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:transparent;box-shadow:inset 0 0 0 1px transparent;
  transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
@media (hover:hover){
  .plan-cols>.plan-col:hover::before,
  .plan-cols>.plan-col:focus-within::before{
    background:var(--paper);box-shadow:inset 0 0 0 1px var(--blue-line);
  }
}
/* The two shadows that broke out of the grid, retired. Both are on the element
   itself, so naming the element is enough; the surface above is a pseudo. */
.plan-cols>.plan-col,
.plan-cols>.plan-col:hover,
.plan-cols>.plan-col:focus-within{box-shadow:none}

/* ---------- the dashed dividers move off the border box -------------------- */
/* A `border-right` on the column shrinks its padding box, which would leave the
   inset:0 surface 1px short of the cell's right edge. The dividers become an
   overlay at inset:0 instead: identical position, identical native dashes, and
   the surface can now measure 0 on all four edges. `pointer-events:none` keeps
   the overlay out of the hover test. */

.plan-cols>.plan-col{border-right:0;border-bottom:0}
.plan-cols>.plan-col::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-right:1px dashed var(--line);
  transition:border-color var(--t-base) var(--ease);
}
.plan-cols>.plan-col:last-child::after{border-right:0}
@media (hover:hover){
  .plan-cols>.plan-col:hover::after{border-color:var(--edge)}
}

/* At two-up the shared rule used to leave a dashed rule hanging on the grid's
   outer right edge, and this file closed the row gap with `border-top` on the
   second row while inner-craft.css already set `border-bottom` on the first -
   two dashed rules stacked into one 2px line. One declaration now owns it. */
@media (min-width:641px) and (max-width:1000px){
  .plan-cols>.plan-col:nth-child(2n)::after{border-right:0}
  .plan-cols>.plan-col:nth-child(-n+2)::after{border-bottom:1px dashed var(--line)}
}
@media (max-width:640px){
  .plan-cols>.plan-col,
  .plan-cols>.plan-col:first-child,
  .plan-cols>.plan-col:last-child{padding-left:0;padding-right:0}
  .plan-cols>.plan-col::after{border-right:0;border-bottom:1px dashed var(--line)}
  .plan-cols>.plan-col:last-child::after{border-bottom:0}
}

/* ---------- C0153 published quota scale ------------------------------------
   Four columns of type give the eye nothing to compare, so the published
   quotas draw themselves to scale: fill width = the plan's own minutes over
   3800, the largest quota this page publishes. The percentages are declared on
   the elements in pricing.html next to the numerals they measure. This asserts
   nothing that is not already printed one line above it - no price, no ranking,
   no recommendation - and it is aria-hidden because the numeral is the content.
   Enterprise publishes no numeral, so its track is drawn open and dashed. */

.plan-scale{
  position:relative;display:block;margin-top:14px;height:2px;
  border-radius:1px;background:var(--line);
}
.plan-scale::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--q,0);
  border-radius:1px;background:var(--blue);transform-origin:left center;
  transition:transform 800ms var(--ic-ease) calc(var(--pc-d,0ms) + 300ms),
             background var(--t-base) var(--ease);
}
.plan-scale--open{
  background:repeating-linear-gradient(to right,var(--line) 0 5px,transparent 5px 9px);
}
/* The comparison affordance: reading one plan greys the other magnitudes, so
   the column under the cursor is the only one still measured in the accent.
   Graphics only - no text colour is touched, so no contrast ratio moves. */
@media (hover:hover){
  .plan-cols:hover>.plan-col:not(:hover) .plan-scale::after{background:var(--edge)}
}

/* ---------- arrival ---------------------------------------------------------
   The band rides the same C0141 signal its own top rule rides: inner-craft.js
   sets `data-chassis-in` on `[data-chassis]` when the block reaches the reading
   zone, which is the inner-page driver of the site's `data-home-in` entrance
   language (site-craft.js). Columns rise left to right on the 700ms expo-out
   the inner pages already use, then each quota rule draws.

   The hidden state is gated on `(scripting: enabled)`, so with JavaScript off
   the media query is false and all four plans render complete and static. A
   browser without the `scripting` feature drops the block for the same result.
   Reduced motion is muted below and inner-craft.js marks arrival immediately. */

.plan-cols>.plan-col{
  transition:opacity var(--ic-enter) var(--ic-ease) var(--pc-d,0ms),
             transform var(--ic-enter) var(--ic-ease) var(--pc-d,0ms);
}
.plan-cols>.plan-col:nth-child(2){--pc-d:90ms}
.plan-cols>.plan-col:nth-child(3){--pc-d:180ms}
.plan-cols>.plan-col:nth-child(4){--pc-d:270ms}

@media (scripting:enabled){
  .plan-cols:not([data-chassis-in="true"])>.plan-col{
    opacity:0;transform:translateY(16px);
  }
  .plan-cols:not([data-chassis-in="true"]) .plan-scale::after{transform:scaleX(0)}
}
@media (prefers-reduced-motion:reduce){
  .plan-cols:not([data-chassis-in="true"])>.plan-col{opacity:1;transform:none}
  .plan-cols:not([data-chassis-in="true"]) .plan-scale::after{transform:none}
  .plan-cols>.plan-col,
  .plan-cols>.plan-col::before,
  .plan-cols>.plan-col::after,
  .plan-scale::after{transition:none}
}
@media print{
  .plan-cols:not([data-chassis-in="true"])>.plan-col{opacity:1;transform:none}
  .plan-cols:not([data-chassis-in="true"]) .plan-scale::after{transform:none}
}


/* ---------- GUARD 2: the sub-nav's focus ring must survive its scroller ----
   `.subnav-tabs` is a horizontal scroll container, so an outline pushed 2px
   OUTSIDE a tab is clipped by it - measured: only a 2px sliver on the tab's
   right edge survived, which is not a visible focus state. The ring is moved
   inside, matching the inset-ring pattern v2.css already uses for
   `.hero-index li>a` and `.cell-link`. Same colour, same width. */
.subnav-tab:focus-visible{outline-offset:-2px}


/* ---------- GUARD 3: the held statement's head needs the full column -------
   `.sec-head` caps its width at 760px, which would crush the held head's 1fr
   column against the 300px note column. The cap is released; `.h2` still holds
   the headline at 20ch, and `.sec-head`'s 56px bottom margin is kept so the
   factor list below sits on the page's own rhythm. */

.sec-night .sec-head.band-hold{max-width:none}

/* GUARD 4: under reduced motion inner-craft sets the `background` SHORTHAND on
   the band, which silently drops the radial ground `.sec-night` already carries
   in v2.css - so reduced-motion users lose the glow entirely. The identical
   gradient is restated. The upstream fix is `background-color`. */
@media (prefers-reduced-motion:reduce){
  .sec-night[data-band-hold]{
    background-image:radial-gradient(76% 60% at 16% 94%,#151F37 0%,var(--night-lift) 58%);
  }
}