/* How it works — page two only.
 *
 * A SEPARATE FILE on purpose. The landing page is the one thing on this site
 * that already looks the way it should, and the fastest way to damage it is
 * to edit the stylesheet it shares. index.html does not load this, so nothing
 * in here can reach it.
 *
 * The page it replaces was 901 words in seven sections, every one of them a
 * 1,180px column of pale-blue-on-white centred in a 1,440px window. Three
 * things were wrong and only one of them was the writing:
 *
 *   it never entered `.dark-zone`, so the warehouse palette the hero is built
 *   from — concrete, neon orange, argon blue — appeared nowhere on it;
 *
 *   `.prose` caps at 64ch and `h2` at 24ch, so on a wide screen the content
 *   occupied about a third of the glass and the rest was margin;
 *
 *   seven sections of body copy in a row have no rhythm. Nothing was ever
 *   wide, nothing was ever dark, so nothing stood out.
 *
 * So: four acts, alternating dark and light, and the two things on the page
 * that are actual product — the pair of result cards and the price panel —
 * are given the room instead of the paragraphs.
 */

/* ------------------------------------------------------------------ shell */

.hiw { --hiw-gutter: clamp(20px, 4vw, 64px); }

/* Full-bleed. `section` in style.css is already full width; what was narrow
   was the `.wrap` inside it. This one goes to 1,360 and then stops, because
   a line of text 1,900px long is not a design, it is a wall. */
.hiw-wrap {
  width: 100%;
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--hiw-gutter);
}

.hiw-dark {
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
  border-block: 1px solid var(--line);
}
/* `.dark-zone` in style.css redefines the palette variables; this inherits
   that block so the oranges and blues here are the SAME oranges and blues as
   the hero, not a second set that drifts. */
.hiw-dark h1, .hiw-dark h2, .hiw-dark h3 { color: var(--text); }
.hiw-dark .hiw-lede, .hiw-dark .hiw-note { color: var(--dim); }

.hiw section { padding: clamp(56px, 7vw, 108px) 0; }

/* The measure cap in style.css is right for an essay and wrong for a grid.
   Headings here are allowed to be as wide as they want to be. */
.hiw h2 {
  max-width: 18ch;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.05;
  margin: 0 0 18px;
}
.hiw .hiw-lede {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.5;
  color: var(--dim);
}
.hiw .hiw-eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--neon);
}
.hiw-dark .hiw-eyebrow { color: var(--neon); }

/* A heading and its paragraph side by side rather than stacked. This is most
   of what stops the page reading as one long column. */
.hiw-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin: 0 0 clamp(32px, 4vw, 56px);
}
@media (max-width: 860px) {
  .hiw-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .hiw h2 { max-width: 24ch; }
}

/* ------------------------------------------------------------------- hero */

.hiw-hero { padding: clamp(72px, 10vw, 150px) 0 clamp(56px, 7vw, 104px) !important; }
.hiw-hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 0 24px;
  max-width: 16ch;
}
/* The one piece of colour in the headline. A thin rule in neon, the same
   tube orange as the hero render, so page two announces itself as the same
   product rather than a documentation site someone bolted on. */
.hiw-hero h1 em {
  font-style: normal;
  color: var(--neon);
}
.hiw-rule {
  height: 2px; border: 0; margin: 0 0 34px;
  width: clamp(80px, 12vw, 160px);
  background: linear-gradient(90deg, var(--neon), transparent);
}

/* ---------------------------------------------------------- the two cards */

/* The differentiator, and previously four paragraphs above a pair of cards
   nobody reached. The cards ARE the argument, so they get the width. */
.hiw-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
@media (max-width: 820px) { .hiw-cards { grid-template-columns: 1fr; } }

.hiw-card {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hiw-card-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.hiw-card-body { padding: clamp(20px, 2.4vw, 30px); }

.hiw-badge {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.hiw-badge.ok  { background: rgba(127,199,222,.14); color: var(--argon); }
.hiw-badge.bad { background: rgba(255,138,43,.14);  color: var(--neon); }

.hiw-mpn {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -.01em;
  color: var(--text);
}
.hiw-mpn.muted { color: var(--glass); }
.hiw-sub { margin: 0 0 22px; color: var(--dim); font-size: 15px; }

.hiw-kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; }
.hiw-kv dt {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.hiw-kv dd { margin: 0; font-size: 14.5px; color: var(--text); }
.hiw-kv dd.num { font-family: var(--mono); color: var(--argon); }
.hiw-kv dd.warn { color: var(--neon); }

.hiw-note {
  margin: clamp(22px, 3vw, 34px) 0 0;
  font-size: 15px; color: var(--dim); max-width: 54ch;
}
.hiw-note strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------- the four steps */

/* Four across, because there are four of them and they are one sentence each.
   The old version was a stacked <ol> with a 60ch paragraph per step, which is
   the shape of a manual, not of a product page. */
.hiw-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}
@media (max-width: 1000px) { .hiw-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hiw-steps { grid-template-columns: 1fr; } }

.hiw-steps li { padding-top: 20px; border-top: 2px solid var(--line); }
.hiw-steps .n {
  display: block; margin: 0 0 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--neon-ink);
}
.hiw-dark .hiw-steps .n { color: var(--neon); }
.hiw-steps h3 { margin: 0 0 8px; font-size: 1.0625rem; }
.hiw-steps p { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.5; }

/* --------------------------------------------------------------- the price */

.hiw-price {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .hiw-price { grid-template-columns: 1fr; } }

.hiw-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 36px);
}
.hiw-panel .label {
  margin: 0 0 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.hiw-figure {
  margin: 0; font-family: var(--mono);
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1;
  letter-spacing: -.03em; color: var(--text);
}
.hiw-range {
  margin: 10px 0 24px; font-size: 15px; color: var(--argon);
  font-family: var(--mono);
}

/* ----------------------------------------------------------- what it won't */

.hiw-wont {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}
@media (max-width: 1000px) { .hiw-wont { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hiw-wont { grid-template-columns: 1fr; } }

.hiw-wont li { padding-top: 18px; border-top: 1px solid var(--line); }
.hiw-wont h3 { margin: 0 0 7px; font-size: 1rem; }
.hiw-wont p { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.5; }

/* ------------------------------------------------------------------ close */

.hiw-close { text-align: center; }
.hiw-close h2 { max-width: 20ch; margin-inline: auto; }
.hiw-close .hiw-lede { margin-inline: auto; text-align: center; }
.hiw-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 30px;
}

/* ------------------------------------------------------ the hero backdrop */

/* A render of four bays of orange racking, straight on, behind the headline.
 * `render/blender/scene_shelf.py` makes it; `render/post/bake.py` bakes the
 * responsive WebP and the phone crop.
 *
 * THE SCRIM IS A MEASURED NUMBER, NOT A TASTE DECISION. White text on an
 * image is a WCAG contrast problem: at L <= 0.300 a background can carry
 * large text at 3:1, and at L <= 0.183 it can carry body text at 4.5:1.
 * `python -m tools.check_backdrop render/out/shelf/shelf.png` reports the
 * brightest 24px block of the column the copy actually occupies, and on the
 * shipped render that is 0.267 - so the headline needs nothing and the lede
 * needs 16% black. Re-run it after any re-render and move these numbers; do
 * not adjust them by eye, because the thing being protected is a person
 * reading a 17px line on a laptop in a warehouse, not how it looks here.
 *
 * The scrim is a gradient rather than a flat wash because the copy is on the
 * left and the orange is worth keeping on the right. Every stop inside the
 * left 52% is at or above the measured 0.16, so the gradient is strictly
 * safer than the flat value the tool asks for.
 */

.hiw-hero {
  position: relative;
  isolation: isolate;     /* so z-index: -1 stays inside this section */
  overflow: hidden;
}

.hiw-hero::before,
.hiw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* 62% down, not centred: the top of the frame is the upper decks and the
   bottom is bare floor, and the headline wants racking behind it rather than
   concrete. If the image 404s this rule simply does nothing and the section
   falls back to its own flat `var(--bg)` - no broken-image box, no reflow. */
.hiw-hero::before {
  background-image: url("/assets/shelf/shelf-1400.webp");
  background-size: cover;
  background-position: 50% 62%;
}
@media (min-width: 1500px) {
  .hiw-hero::before { background-image: url("/assets/shelf/shelf-2400.webp"); }
}
/* ON A PHONE IT IS A HORIZON, NOT A FILL, and that is the one place this
   backdrop changes job rather than size.
   A phone hero is about 375x800 - roughly 1:2 - and the picture is 3:1. There
   is no way to `cover` one with the other: scaled to that height, a 2400px
   frame shows 15% of its width, so whatever happens to be behind the headline
   arrives three times life size. The 4:5 crop was the first attempt and it is
   still a 2x zoom - the render came back with a single orange beam running
   dead through the middle of "cannot read the", legible because of the scrim
   and wrong because of the composition.
   So below 768 the image sits at its own proportions along the BOTTOM of the
   section and the headline gets clean dark above it. It reads as a deliberate
   horizon instead of a crop that went wrong, and the one thing that cannot
   happen - a hard edge landing across a word - cannot happen. */
@media (max-width: 767px) {
  .hiw-hero::before {
    background-image: url("/assets/shelf/shelf-phone-900.webp");
    background-size: 100% auto;
    background-position: 50% 100%;
    background-repeat: no-repeat;
  }
}

.hiw-hero::after {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .38) 0%,
      rgba(0, 0, 0, .26) 28%,
      rgba(0, 0, 0, .16) 52%,
      rgba(0, 0, 0, .06) 100%),
    /* Into the section below it, which is also dark, so the backdrop ends
       without a visible edge across the page. */
    linear-gradient(180deg,
      rgba(0, 0, 0, .30) 0%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 58%,
      var(--bg) 100%);
}

/* The copy runs the full width here, so the left-weighted half of the scrim
   has nowhere to hide. It becomes a vertical one instead: opaque over the
   headline, easing off across the racking, and closing on `--bg` so the band
   meets the next section without a seam. The top stop is the section's own
   background colour rather than black - black over a dark blue-grey page
   reads as a bruise. */
@media (max-width: 767px) {
  .hiw-hero::after {
    background:
      linear-gradient(180deg,
        var(--bg) 0%,
        var(--bg) 34%,
        rgba(0, 0, 0, .46) 54%,
        rgba(0, 0, 0, .34) 78%,
        var(--bg) 100%);
  }
}

.hiw-hero > .hiw-wrap { position: relative; }

/* ------------------------------------------- section proportions (A4) */

/* Every section used to take the same `clamp(56px, 7vw, 108px)` of padding
 * whatever was inside it, so a four-step explanation and a two-line sign-off
 * occupied the same height. That is what made the page read as a stack of
 * equal slabs rather than as something with a shape.
 *
 * Two modifiers, and the rule is content-led: the section the page is NAMED
 * after gets the room, and the ones that are a list of one-liners give it
 * back. Nothing here changes the default, so any section without a modifier
 * behaves exactly as it did.
 */
.hiw .hiw-process { padding: clamp(72px, 9vw, 136px) 0; }
.hiw .hiw-tight   { padding: clamp(44px, 5.5vw, 84px) 0; }

/* The pricing hero carries one line, not a three-line headline, so it does
   not need the full hero measure. */
.hiw .hiw-hero-short {
  padding: clamp(60px, 8vw, 112px) 0 clamp(48px, 6vw, 84px) !important;
}

/* ------------------------------------------------ the process, in depth */

/* The steps carry two paragraphs now rather than one line, so four across is
   too narrow to read - at 1360px that is a 38ch column of body copy. Two up
   gives each step about 56ch, which is a measure rather than a ticker. */
.hiw-steps-deep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .hiw-steps-deep { grid-template-columns: 1fr; } }

.hiw-steps-deep li { padding-top: 22px; }
.hiw-steps-deep p { margin: 0 0 10px; }
.hiw-steps-deep p:last-child { margin-bottom: 0; }

/* The second paragraph is the measured detail, not more prose. Set smaller
   and in the mono face so the eye can skip it on the way down and come back
   to it, which is how anybody reads a specification. */
.hiw-step-note {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--neon-ink);
}
.hiw-dark .hiw-step-note { color: var(--neon); }

/* ------------------------------------------------------------- the plans */

.hiw-plans {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
  align-items: stretch;
}
@media (max-width: 920px) { .hiw-plans { grid-template-columns: 1fr; } }

.hiw-plan {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
/* The middle one is marked, because three equal boxes make a reader do the
   comparing and most of them simply leave instead. */
.hiw-plan.featured {
  border-color: var(--neon);
  box-shadow: 0 0 0 1px var(--neon) inset;
}
.hiw-plan-flag {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--neon-ink);
}
/* `.hiw h2` is (class + element) and beats a bare class, so the plan names
   came out at headline size - 3rem of "Standard" above a 2.75rem price. The
   extra `.hiw` is the whole fix. */
.hiw .hiw-plan-name { margin: 0 0 12px; font-size: 1.125rem; max-width: none; }
.hiw-plan-price { margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px; }
.hiw-plan-price .fig {
  font-family: var(--mono);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1; letter-spacing: -.03em;
}
/* A word is not a number. "Free" and "Talk to us" set at the price size
   wrap and shout; they are the same line of information, not the same weight
   of claim. */
.hiw-plan-price .fig.word { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
/* "a part" is a unit, not a billing period, so it sits on the baseline of the
   figure rather than hanging off it as "/month" did. */
.hiw-plan-price .per { font-size: 14px; color: var(--dim); }
.hiw-plan-sub { margin: 0 0 20px; font-size: 14px; color: var(--dim); }

.hiw-plan-list {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; gap: 9px;
  /* `flex: 1` makes the list take the leftover height so the buttons line up
     across cards - but a GRID that is taller than its rows spreads them, so
     the three-item Trial list was distributing its bullets down a seven-item
     card with a centimetre of air between them. `align-content: start` packs
     them at the top and leaves the slack underneath, which is what pushing
     the button down was supposed to mean. */
  flex: 1;
  align-content: start;
}
.hiw-plan-list li {
  position: relative; padding-left: 20px;
  font-size: 14px; line-height: 1.45;
}
.hiw-plan-list li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--neon-ink);
}
.hiw-plan .btn { width: 100%; text-align: center; justify-content: center; }

.hiw-plan-note { max-width: none; margin-top: clamp(24px, 3vw, 36px); }

/* ---------------------------------------------------- the light close */

/* The close is light now. `.hiw-close` only centred things; the dark came
   from `.hiw-dark` sitting beside it in the markup, so removing that class is
   the whole change and this rule exists to keep the top rule that separates
   it from the section above. */
.hiw .hiw-close:not(.hiw-dark) { border-top: 1px solid var(--line); }


/* -------------------------------------------------- the pricing backdrop */

/* Page two gets the shelf still; pricing gets a storage door opening on it.
 * Same band, same 3:1, different argument: the shelf says "this is the
 * inventory", the door says "this much of it, and it is already yours to get
 * through" - which is the question a price actually has to answer.
 *
 * The film sits at z-index -2 so the scrim on `::after` still covers it. The
 * still on `::before` is switched off here, because on this page the video IS
 * the backdrop and loading a second full-width image behind an opaque one is
 * a megabyte nobody sees.
 */
.hiw-hero-door::before { background-image: none; }

/* A SCRIM OF ITS OWN, and a lighter one than the first measurement asked for.
 *
 * check_backdrop on the open-door frame first reported the copy column
 * peaking at 0.462 against a 0.183 body-text cap - a 34% flat wash, which
 * would have fixed the contrast by flattening the picture. It also said where:
 * x 0.08, y 0.03, the galvanised left door jamb, directly behind the
 * headline. Darkening that one strip of metal and moving the yard lamp to
 * frame right took the peak to 0.360 and moved it to the bottom edge, out of
 * the headline entirely. The headline now needs 8% where it needed 18%.
 *
 * So this gradient only has to carry the 27% the lede still needs. Every stop
 * inside the left 52% is at or above it, which makes the gradient strictly
 * safer than the flat number the tool asks for, while leaving the right-hand
 * side of the picture - the lit stock, which is the whole argument - alone.
 *
 * Re-run the tool after any re-render and move these numbers with it:
 *   python -m tools.check_backdrop website-build/render/out/door/frames/f0104.png
 */
.hiw-hero-door::after {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .44) 0%,
      rgba(0, 0, 0, .34) 28%,
      rgba(0, 0, 0, .27) 52%,
      rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg,
      rgba(0, 0, 0, .26) 0%,
      rgba(0, 0, 0, 0) 34%,
      rgba(0, 0, 0, 0) 62%,
      var(--bg) 100%);
}

.hiw-hero-door .hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -2;
  pointer-events: none;
}

/* ON A PHONE IT IS A HORIZON AGAIN, and the film does not play at all.
   A 3:1 film covering a 1:2 hero is a 3x zoom onto one slat of a shutter,
   and it is also a video download on a connection in a storage unit. Below
   768 the poster takes over at its own proportions along the bottom edge,
   exactly as the shelf does on page two, and nothing streams. */
@media (max-width: 767px) {
  .hiw-hero-door .hero-film { display: none; }
  .hiw-hero-door::before {
    background-image: url("/assets/door/door-900.webp");
    background-size: 100% auto;
    background-position: 50% 100%;
    background-repeat: no-repeat;
  }
}


/* ------------------------------------------- pricing: hero into the plans */

/* Sam: "i dont think it sits well in the entire webapage... right now its
 * almost meaningless because of the juxtaposition of the hero and pricing
 * underneath." He is right, and the cause is a hard edge: a dark warehouse
 * band stopped dead against a pale panel of white cards, so the film read as
 * decoration bolted onto a pricing table rather than the room the prices are
 * being quoted in.
 *
 * So the plans sit in the same room. The section carries on dark, the open
 * door's last frame continues behind it heavily dimmed, and the cards go
 * translucent so the stock shows through them. Nothing about the layout
 * moves - only what is behind it.
 */
.hiw-plans-zone {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
}
.hiw-plans-zone::before,
.hiw-plans-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* The poster, not the film. One moving picture on a page is a focal point;
   two is a fairground, and this one is 500px below the fold anyway. */
.hiw-plans-zone::before {
  background-image: url("/assets/door/door-1800.webp");
  background-size: cover;
  background-position: 50% 42%;
  opacity: .30;
}
/* Top stop is transparent so the hero's own closing gradient runs straight
   into this one and there is no seam where the two sections meet. */
.hiw-plans-zone::after {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .34) 22%,
    rgba(0, 0, 0, .52) 62%,
    var(--bg) 100%);
}

/* Translucent, so the unit behind shows through the card instead of the card
   sitting on top of a photograph of one. `backdrop-filter` is progressive -
   where it is unsupported the rgba background alone still gives a readable
   card, which is why the colour is not left to the filter to supply. */
.hiw-plans-zone .hiw-plan {
  background: rgba(22, 27, 32, .62);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-color: rgba(230, 234, 237, .16);
}
.hiw-plans-zone .hiw-plan.featured {
  background: rgba(26, 31, 36, .74);
  border-color: var(--neon);
}
.hiw-plans-zone .hiw-plan-name,
.hiw-plans-zone .hiw-plan-price .fig,
.hiw-plans-zone .hiw-plan-list li { color: var(--text); }
.hiw-plans-zone .hiw-plan-sub,
.hiw-plans-zone .hiw-plan-price .per { color: var(--dim); }
.hiw-plans-zone .hiw-plan-flag { color: var(--neon); }
.hiw-plans-zone .hiw-plan-list li::before { background: var(--neon); }
.hiw-plans-zone .hiw-note { color: var(--dim); }
.hiw-plans-zone .hiw-note strong { color: var(--text); }
.hiw-plans-zone .btn.ghost {
  border-color: rgba(230, 234, 237, .22);
  color: var(--text);
}

/* The hero no longer closes on `--bg`, because the section under it is no
   longer `--bg`. It closes on nothing and lets the plans zone take over. */
.hiw-hero-door::after {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .44) 0%,
      rgba(0, 0, 0, .34) 28%,
      rgba(0, 0, 0, .27) 52%,
      rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg,
      rgba(0, 0, 0, .26) 0%,
      rgba(0, 0, 0, 0) 34%,
      rgba(0, 0, 0, 0) 74%,
      rgba(0, 0, 0, .18) 100%);
}


/* ------------------------------------------------ pricing: ONE stage, one backdrop
 *
 * Sam: "it doesnt look good how its the end storage unit scene duplicated 2x
 * for the background of the pricing. i think it should just fade to opaque."
 *
 * Why the earlier attempt did not read as one window: `.hiw-plans-zone::before`
 * painted door-1800.webp AGAIN, `cover`, across an 860px-tall section, so the
 * same unit appeared twice - once as the film, once as a five-times-enlarged
 * still behind the cards. Sharing a section was never the problem; sharing a
 * SECOND COPY of the picture was. (The shelf was never involved:
 * `.hiw-hero-door::before` was already `none` here.) The `.hiw-plans-zone`
 * rules below are left in place but now match no element on any page.
 *
 * So: ONE section holds the headline, the cards and the film. The film is laid
 * in at the top at its own proportions and a mask fades it to nothing, letting
 * the section's own flat colour show through. No second image, no gradient
 * stacked on it, and therefore no seam - the fade lands on the very colour the
 * cards already sit on. Grey chosen by Sam over black and navy: it is the one
 * where the fade does not announce itself.
 */
.hiw-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--stage, var(--glass, #2f363c));
  color: var(--text);
}
.hiw-stage .hero-film {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1800 / 818;       /* the render's own frame */
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 98%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 98%);
}
/* Legibility for the headline only, on the left, and nothing below it.
   LOAD-BEARING: measured, the lede clears its cap by 0.039 WITH this scrim and
   fails without it - the same region would need 32% flat black. Do not drop it
   in a tidy-up. */
.hiw-stage::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 72%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .30) 30%,
    rgba(0, 0, 0, .14) 55%, rgba(0, 0, 0, 0) 100%);
  /* Faded out at its own bottom edge so extending it leaves no visible band.
     It was 56% and the worst 24px block in the copy column sat at y 59% - just
     past the edge, measuring 0.186 against the lede's 0.183 cap while the same
     frame measured 0.146 inside the scrim. The scrim was ending mid-paragraph.
     Strengthening it changed nothing, because the hot spot was never under it. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.hiw-stage .hiw-hero-copy { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(36px, 5vw, 72px); }
.hiw-stage .hiw-plans-wrap { padding-bottom: clamp(48px, 6vw, 88px); }
.hiw-stage .hiw-plan { background: rgba(14, 19, 25, .66); border-color: rgba(230, 234, 237, .16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hiw-stage .hiw-plan.featured { background: rgba(14, 19, 25, .78); border-color: var(--neon); }
.hiw-stage .hiw-plan-name,
.hiw-stage .hiw-plan-price .fig,
.hiw-stage .hiw-plan-list li { color: var(--text); }
.hiw-stage .hiw-plan-sub,
.hiw-stage .hiw-plan-price .per { color: var(--dim); }
/* The note sits directly on the flat grey, not on a card: --dim is 4.17:1
   there (fails 4.5), --ink-2 is ~6.4:1. */
.hiw-stage .hiw-note { color: var(--ink-2); }
.hiw-stage .hiw-note strong { color: var(--text); }
.hiw-stage .hiw-plan-flag { color: var(--neon); }
.hiw-stage .hiw-plan-list li::before { background: var(--neon); }
.hiw-stage .btn.ghost { border-color: rgba(230, 234, 237, .22); color: var(--text); }

/* Phone: the still, never the film. The `min-width: 768px` on the video's
   sources already stops the webm and mp4 downloading; this only gives the
   poster a shorter crop so the copy is not pushed down a tall picture on a
   narrow screen. */
@media (max-width: 767px) {
  .hiw-stage .hero-film { aspect-ratio: 3 / 2; }
  .hiw-stage::after { height: 62%; }
  .hiw-stage .hiw-hero-copy { padding-top: clamp(40px, 12vw, 72px); }
}