/* ============================================================
   VIREVO — HEALTHCARE
   ------------------------------------------------------------
   The page's own layout, restated in Virevo's tokens. Loaded after
   style.css, which already owns #nav, #menu, #sidePane, #foot and
   .to-top — none of that is repeated here.

   WHY EVERY CLASS IS PREFIXED hc-
   The source page arrived carrying generic names: .btn, .tag, .copy,
   .mid, .level, .plan, .price, .rule, .close, .media. style.css owns
   several of those already, and .pr-page proved that scoping alone
   only solves the leak in ONE direction — it stops this sheet reaching
   the rest of the site, but it does not stop style.css's global .btn
   and .tag reaching in here. The prefix removes the whole class of
   problem in both directions, so .hc-page is a readability aid rather
   than the thing holding the page together.

   COLOUR — one source of truth, style.css §2. No :root here.
     source #f2f0ec / #e9e6e0 paper ... var(--bg), and a warmer step below
     source #0d1410 near-black ....... var(--ink), the site's deep green
     source #1c4b33 forest "action" .. var(--ink) — action IS the ink here
     source #8a6826 brass "worth" .... var(--grid), the site's gold
     source #879689 sage title ....... var(--grid)
     source #c1bcb9 warm-grey title .. var(--ink-mute) on dark, --ink-soft on paper
     source #444/#4e4e4e copy ........ var(--ink-soft)
   The source carried five greys for text; the site carries two. Anything
   that needed a third step is an alpha of --ink rather than a new hex,
   so the page cannot drift away from the palette the tokens define.

   TYPE — the measured scale from virevo-type-scale.md, in the SAME
   Option-B clamps style.css already uses for .bii-title / .bii-sec-h /
   .bii-copy / .bii-kp. Reusing those exact expressions rather than
   re-deriving them is what keeps this page's type identical to the
   index's, not merely similar. Bebas Neue is self-hosted by style.css.

   MOTION — the three curves named in STYLE-GUIDE §7 and nothing else:
     --e-out  premium out    cubic-bezier(.22,1,.36,1)
     --e-io   cinematic inOut cubic-bezier(.77,0,.18,1)
   ============================================================ */

.hc-page{
  /* page-local helpers only — never a colour or a font, which come from
     style.css's :root and would be a second source of truth here */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.77,0,.18,1);
  /* STYLE-GUIDE §7's third curve — playful overshoot. It is what makes the
     kicker land with a bounce and the pushed word overshoot before settling. */
  --e-bounce:cubic-bezier(.2,1.35,.35,1);
  --hc-pad:24px;
  --hc-max:1280px;
  /* a warmer step under --bg, for raised cards on the paper ground */
  --hc-raise:#efeade;
  /* THE LATTICE MARKS ARE GREEN, AND THESE ARE THE INDEX'S OWN VALUES.
     #intro draws its plus-to-square in --ln rgba(30,55,39,.46) with the
     chase in --lnd rgba(30,55,39,.88), and the What We Do rule uses
     rgba(30,55,39,.34) for the line and rgba(30,55,39,.5) for its nodes.
     Copied rather than approximated, so a node here is the same green as a
     node on the index rather than merely close to it. */
  --hc-node:rgba(30,55,39,.5);
  --hc-line:rgba(30,55,39,.34);
  --hc-lit:rgba(30,55,39,.88);
  /* the measured roles, as tokens so a section never invents its own size */
  /* WIDTH AND HEIGHT BOTH CAP THE HEADLINE.
     It was sized off vw alone, so on a 1366x768 laptop it took a poster's
     worth of a 768px-tall pinned screen and pushed the buttons under the
     fold on every slide but the first. min() lets whichever axis is
     scarcer decide, which is the one thing a vw-only clamp cannot do. */
  --t-title:clamp(30px,min(calc(18.2px + 6.2vw),9.2vh),104px);
  --t-sec:clamp(1.9rem,4vw,3.3rem);
  --t-general:clamp(16px,calc(13.98px + 0.326vw),21.5px);
  --t-sub:clamp(15px,calc(14.30px + 0.113vw),17px);
  --t-heading:clamp(20.8px,calc(18.71px + 0.338vw),26.5px);
  --t-phrase:clamp(26.6px,calc(24.03px + 0.415vw),33.6px);
  --lh-heading:1.35;
  /* RUNNING TEXT IS THE INDEX'S OWN BODY ROLE, MEASURED OFF THE PAGE.
     This was a flat 17px/1.6 taken from STYLE-GUIDE §3's table. That table
     gives the CAP, not the expression: what index.html actually renders for
     a paragraph is `#intro .wd-body` — clamp(12px, .95vw, 17px) at 1.62 —
     which only reaches 17px on a very wide screen and sets around 13.7px at
     1440. A flat 17px therefore ran a good 3px larger than the same
     sentence anywhere else on the site, which is what showed in the
     columns. Copied verbatim from style.css so the two cannot drift.

     The one thing not copied is the weight: the index sets this role in
     Poppins 300, but it also colours it #565656, while this page uses
     --ink-soft, which is already at 3.82:1. Light at that alpha would take
     it further down, so the weight stays at 400 and only the metrics match.

     Mono labels are unchanged — 10.5–12.5px uppercase is what the site uses
     and what the guide's table says, for once agreeing. */
  --t-body:clamp(12px,.95vw,17px);
  --lh-body:1.62;
  --t-mono:12.5px;
  --t-mono-sm:10.5px;
  --t-copy:var(--t-body);
  --lh-copy:var(--lh-body);
  background:var(--bg);color:var(--ink);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
}
@media (min-width:1024px){ .hc-page{--lh-heading:1.20;--hc-pad:40px;} }
/* no step at 640: the clamp's own floor is what the site uses down there */

/* ---------- the measure ----------
   One holder, used by every band, so the hero copy, the levels and the
   footer all start on the same left edge. */
.hc-page .hc-hold{
  width:100%;max-width:var(--hc-max);margin:0 auto;
  padding-left:var(--hc-pad);padding-right:var(--hc-pad);
}

/* The .hc-reveal fade-up that used to live here is gone: every block on
   the page now arrives through the sequencer instead, so nothing carried
   the class any more and the rules were dead weight. */

/* ============================================================
   TYPE ROLES
   ============================================================ */

/* PAGE TITLE — Bebas, per virevo-type-scale §1.
   NOT the full 89–215px wordmark clamp. That clamp is for a title that
   owns a whole screen (.bii-title does); here the title shares its row
   with a 16:9 media panel from 981px up, and at 215px it simply would
   not fit beside one. The letter-spacing, line-height and the two-tone
   colour pair are the spec's, unchanged — only the size is rescaled. */
.hc-page .hc-title{
  margin:min(16px,1.8vh) 0 0;font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:var(--t-title);line-height:.90;letter-spacing:.015em;
  text-transform:uppercase;color:var(--grid);
}
/* NOTHING IN THE HEADLINE IS ITALIC.
   Bebas Neue ships one upright face, so an italic request is synthesised
   as a mechanical slant — which is what was happening: the typewriter
   wraps each character in <i>, and <i> is italic by default, so the two
   typed runs sheared over while the word that flies in stayed upright.
   Stated on every part of the headline rather than only on the element
   that caused it, so re-marking the title later cannot bring it back. */
.hc-page .hc-title,
.hc-page .hc-title em,
.hc-page .hc-tl,
.hc-page .hc-tl-in,
.hc-page .hc-push,
.hc-page .hc-w,
.hc-page .hc-c{font-style:normal;}
.hc-page .hc-title em{display:block;color:var(--ink-mute);}
@media (min-width:1024px){ .hc-page .hc-title{line-height:.95;} }

/* SECTION HEADING — matches .bii-sec-h / .su-h exactly */
.hc-page .hc-sec-h{
  margin:12px 0 0;font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:var(--t-sec);line-height:1.35;letter-spacing:0;
  text-transform:uppercase;color:var(--ink);
}
.hc-page .hc-sec-h em{font-style:normal;color:var(--grid);}
@media (min-width:1024px){ .hc-page .hc-sec-h{line-height:1.20;} }

/* GENERAL COPY — Poppins 400, lead word 700, −0.015em, 1.55 */
.hc-page .hc-general{
  margin-top:clamp(18px,2.4vw,28px);font-weight:400;
  font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:-.015em;
  color:var(--ink-soft);max-width:62ch;
}
.hc-page .hc-general b{font-weight:700;color:var(--ink);}

/* TILE SUB-HEADING (the eyebrow) — Poppins 600, +0.09em, uppercase */
.hc-page .hc-eyebrow{
  display:flex;align-items:center;gap:10px;margin:0;font-weight:600;
  font-size:var(--t-sub);line-height:1.2;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);
}
/* the leading rule and the section index were removed from the markup, so
   the eyebrow is now the words alone; the flex row stays because the copy
   still sets on one line and may wrap */

/* TILE COPY */
.hc-page .hc-copy{
  margin-top:clamp(12px,1.4vw,18px);font-weight:400;
  font-size:var(--t-copy);line-height:var(--lh-copy);letter-spacing:-.01em;
  color:var(--ink-soft);max-width:62ch;
}

/* ============================================================
   BUTTONS
   Not style.css's .btn: that component is 18px/36px mono with a wipe,
   built for a page with two buttons on it. This page has fourteen, several
   of them inside cards narrower than that button is wide. Same voice —
   mono, uppercase, letterspaced, a fill that rises on hover — at a size
   the cards can actually hold.
   ============================================================ */
.hc-page .hc-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;overflow:hidden;text-decoration:none;
  padding:14px 22px;border-radius:4px;border:1px solid var(--ink);
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(10.5px,.8vw,12.5px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:transparent;
  transition:color .45s var(--e-io),border-color .45s var(--e-io);
  /* a real target on a phone, whatever the type does */
  min-height:46px;
  /* THE LABEL HAS TO SIT ABOVE THE FILL, AND IT IS NOT AN ELEMENT.
     The rising fill is a ::before, and `.hc-btn > *` lifts the button's
     CHILDREN over it — but a button's label is a bare text node with no
     wrapper to lift. Only the arrow, which happens to be a <span>, was
     ever above the fill; the words were painted under it and vanished the
     moment the hover completed. On the hero that read as the CTA text
     disappearing on hover, because ink type and the band behind it are
     the same colour, so there was nothing left to see either way.

     Isolating the button is what makes the negative z-index below legal:
     with a stacking context of its own, the fill paints after the
     button's own background and before its text, which is exactly the
     order wanted. Without it, -1 would drop the fill behind the solid
     variant's background and the hover would do nothing at all. */
  isolation:isolate;
}
.hc-page .hc-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .45s var(--e-io);
}
.hc-page .hc-btn > *{position:relative;z-index:1;}
.hc-page .hc-btn:hover::before,
.hc-page .hc-btn:focus-visible::before{transform:translateY(0);}
.hc-page .hc-btn:hover,
.hc-page .hc-btn:focus-visible{color:var(--cream);}
.hc-page .hc-btn:focus-visible{outline:2px solid var(--grid);outline-offset:3px;}
.hc-page .hc-ar{transition:transform .45s var(--e-out);}
.hc-page .hc-btn:hover .hc-ar{transform:translateX(4px);}

/* solid — ink field, cream label, floods gold on hover */
.hc-page .hc-btn-solid{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.hc-page .hc-btn-solid::before{background:var(--grid);}
.hc-page .hc-btn-solid:hover,
.hc-page .hc-btn-solid:focus-visible{color:var(--ink);border-color:var(--grid);}

/* ghost — hairline only */
.hc-page .hc-btn-ghost{border-color:var(--gold-dim);color:var(--ink);}

/* line — for the pricing cards, where the card already has a border */
.hc-page .hc-btn-line{width:100%;border-color:var(--gold-dim);}

/* cream — for buttons on the ink bands, where an ink border is invisible */
.hc-page .hc-btn-cream{border-color:rgba(246,242,233,.46);color:var(--cream);}
.hc-page .hc-btn-cream::before{background:var(--cream);}
.hc-page .hc-btn-cream:hover,
.hc-page .hc-btn-cream:focus-visible{color:var(--ink);border-color:var(--cream);}

/* ---------- ON THE INK BANDS ----------
   Stated once, here, rather than repeated per section. Anything inside a
   .hc-hero or .hc-band-deep inverts; nothing else has to know about it. */
.hc-page .hc-hero,
.hc-page .hc-band-deep{background:var(--hc-band,var(--ink));color:var(--cream);}
.hc-page .hc-hero .hc-sec-h,
.hc-page .hc-band-deep .hc-sec-h{color:var(--cream);}
.hc-page .hc-hero .hc-general,
.hc-page .hc-band-deep .hc-general{color:rgba(246,242,233,.72);}
.hc-page .hc-hero .hc-general b,
.hc-page .hc-band-deep .hc-general b{color:var(--cream);}
.hc-page .hc-hero .hc-eyebrow,
.hc-page .hc-band-deep .hc-eyebrow{color:rgba(246,242,233,.56);}
.hc-page .hc-hero .hc-copy,
.hc-page .hc-band-deep .hc-copy{color:rgba(246,242,233,.72);}

/* THE BUTTONS HAVE TO INVERT WITH THE BAND.
   .hc-btn-solid paints an --ink field and .hc-btn-ghost draws --ink type;
   both of those are the band's own background here, so on the hero the
   solid button was an invisible rectangle and the ghost button's label
   was dark green on dark green — legible to nobody and to no contrast
   checker. On the ink bands the roles swap: gold becomes the filled
   button, cream becomes the outline. */
.hc-page .hc-hero .hc-btn-solid,
.hc-page .hc-band-deep .hc-btn-solid{
  background:var(--grid);color:var(--ink);border-color:var(--grid);
}
.hc-page .hc-hero .hc-btn-solid::before,
.hc-page .hc-band-deep .hc-btn-solid::before{background:var(--cream);}
.hc-page .hc-hero .hc-btn-solid:hover,
.hc-page .hc-hero .hc-btn-solid:focus-visible,
.hc-page .hc-band-deep .hc-btn-solid:hover,
.hc-page .hc-band-deep .hc-btn-solid:focus-visible{
  color:var(--ink);border-color:var(--cream);
}
.hc-page .hc-hero .hc-btn-ghost,
.hc-page .hc-band-deep .hc-btn-ghost{
  color:var(--cream);border-color:rgba(246,242,233,.4);
}
.hc-page .hc-hero .hc-btn-ghost::before,
.hc-page .hc-band-deep .hc-btn-ghost::before{background:var(--cream);}
.hc-page .hc-hero .hc-btn-ghost:hover,
.hc-page .hc-hero .hc-btn-ghost:focus-visible,
.hc-page .hc-band-deep .hc-btn-ghost:hover,
.hc-page .hc-band-deep .hc-btn-ghost:focus-visible{
  color:var(--ink);border-color:var(--cream);
}

/* ============================================================
   1 · HERO CAROUSEL
   The track moves in whole multiples of 100%, so a slide is never
   half-shown; the stage clips it. Slides that are not current are made
   `inert` by the script, which takes them out of the tab order too —
   a carousel that leaves four screens of links reachable by keyboard
   is the commonest way this pattern fails an audit.
   ============================================================ */
/* FIVE VIEWPORTS TALL, ONE OF THEM STUCK.
   Four slides need four dwells plus the one the pin occupies, so the
   section is 5x --vh and .hc-pin holds the top of it for the whole ride.
   --vh, not 100vh: style.css upgrades it to 100lvh, and plain vh on a
   phone measures the viewport as if the address bar were never there —
   which on a pinned section shows as the bar clipping off the bottom. */
.hc-page .hc-hero{
  position:relative;
  height:calc(var(--vh) * 5);
  /* the four steps from --ink down to --ink-deep. Interpolated, not
     eyeballed: 30,55,39 to 12,23,16 in three equal moves, so the last
     slide lands exactly on the token the site already names. */
  --hc-band:#1e3727;
}
.hc-page .hc-hero[data-slide="1"]{--hc-band:#182c1f;}
.hc-page .hc-hero[data-slide="2"]{--hc-band:#122217;}
.hc-page .hc-hero[data-slide="3"]{--hc-band:#0c1710;}
.hc-page .hc-pin{
  position:sticky;top:0;height:var(--vh);overflow:hidden;
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + clamp(18px,3.4vw,44px)) 0 clamp(16px,2.4vw,28px);
  background:var(--hc-band);
  transition:background .9s var(--e-io);
}
.hc-page .hc-stage{flex:1;min-height:0;display:flex;align-items:center;overflow:hidden;}
.hc-page .hc-track{
  display:flex;width:100%;
  transition:transform .9s var(--e-io);
  will-change:transform;
}
.hc-page .hc-slide{flex:0 0 100%;min-width:0;}

/* ---------- THE ENTRANCE, SLIDE BY SLIDE ----------
   Hidden states are gated on (scripting:enabled) for the same reason the
   scroll reveals are: only JS ever takes them off, so without the gate a
   reader whose script never arrived gets four blank screens.

   Delays are set from JS as inline transition-delay rather than being
   written per-child here. The typewriter's length depends on how many
   characters the headline has, and everything after it has to queue
   behind that — a fixed CSS ladder would either overlap a long line or
   leave a gap after a short one. */
/* THE TRANSITIONS LIVE ON THE RESTING STATE, NOT ON .hc-on.
   They used to be declared only in the .hc-on rules, which is fine for an
   arrival and useless for a departure: taking the class off also takes the
   transition off, so everything snapped back to hidden in a single frame
   instead of dissolving. Stated here instead, so the same properties
   animate in both directions and the script only has to reverse the
   delays.

   Scoped away from .hc-slide. The carousel resets a slide by removing the
   class and forcing a reflow, and it depends on that being instantaneous —
   an animated retreat there would be visible underneath the slide that is
   arriving. The hero keeps its own one-way rules below. */
@media (scripting:enabled){
  .hc-page .hc-seq [data-anim="kicker"]{opacity:0;transform:translateY(-38px);}
  .hc-page .hc-seq [data-anim="rise"]{opacity:0;transform:translateY(28px);}
  /* the letters fall in from above, one after the next */
  .hc-page .hc-seq .hc-c{opacity:0;transform:translateY(-.66em);}
  .hc-page .hc-seq:not(.hc-slide) [data-anim="kicker"]{
    transition:opacity .42s var(--e-out),transform .74s var(--e-bounce);
  }
  .hc-page .hc-seq:not(.hc-slide) [data-anim="rise"]{
    transition:opacity .66s var(--e-out),transform .66s var(--e-out);
  }
  .hc-page .hc-seq:not(.hc-slide) .hc-c{
    transition:opacity .22s linear,transform .54s var(--e-bounce);
  }
  /* THE OFFSET ITSELF IS SET BY JS, NOT DECLARED HERE.
     It was `transform:translateX(calc(var(--pw) * -1))`, with --pw written
     onto the element as the measured width of the missing word. The custom
     property updated correctly — it read back as 138px — but the resolved
     transform stayed at the 230px from the first measurement, taken before
     Bebas had loaded and the fallback face was wider. So the line sat too
     far left and the typewriter's first two characters were clipped away.
     A length that is measured, and re-measured when the font arrives,
     belongs in the inline style where re-writing it cannot be missed.
     Only the opacity is stated here, so a reader without JS — for whom the
     offset is never applied — still gets the complete headline. */
  /* the word waits a screen and a bit off to the left, outside the stage's
     clip, so it is genuinely travelling in from off-screen rather than
     appearing at the edge */
  .hc-page .hc-slide .hc-push{opacity:0;transform:translateX(-118vw);}
}
.hc-page .hc-seq.hc-on [data-anim="kicker"]{opacity:1;transform:none;}
.hc-page .hc-seq.hc-on [data-anim="rise"]{opacity:1;transform:none;}
/* the hero's slides keep the one-way declarations, so a reset still snaps */
.hc-page .hc-slide.hc-on [data-anim="kicker"]{
  transition:opacity .42s var(--e-out),transform .74s var(--e-bounce);
}
.hc-page .hc-slide.hc-on [data-anim="rise"]{
  transition:opacity .66s var(--e-out),transform .66s var(--e-out);
}
/* each letter drops onto its line and settles with the overshoot curve;
   the stagger is set per character from JS */
.hc-page .hc-seq.hc-on .hc-c{opacity:1;transform:none;}

/* ---------- THE TYPEWRITER, ON THE PHONE ONLY ----------
   The origin note is split into letters on every screen — the splitter has
   to run before the markup is measured, and a stray <i> cannot be put back
   afterwards — but only the phone hides them. Above 980px every letter is
   simply on, so the paragraph behaves exactly as it always has and the
   split is invisible.

   The words are inline-block and nowrap for the same reason a headline's
   are: without it, a word that is half typed can be broken across a line by
   the letters standing there waiting, and the paragraph reflows under the
   reader as each one arrives.

   NO TRANSFORM, unlike the falling headline letters. A key strikes the page
   and the character is there; sliding it into place would read as a wave
   passing through the line rather than as typing. The fade is short enough
   to be a soft edge rather than a dissolve, which is what keeps it from
   looking like a cheap terminal effect while still not being a hard cut. */
.hc-page .hc-tw{display:inline-block;white-space:nowrap;}
@media (max-width:980px) and (scripting:enabled){
  .hc-page .hc-seq .hc-tc{opacity:0;}
}
@media (max-width:980px){
  .hc-page .hc-seq .hc-tc{transition:opacity .13s linear;}
  .hc-page .hc-seq.hc-on .hc-tc{opacity:1;}
}
/* ---------- and the same letters, written by the scroll ----------
   The tools table types on the gesture rather than on a timer, so its
   characters cannot be released by the block's .hc-on — they are lit one
   at a time from the scrub instead, which is what .hc-lit marks.

   The fade is shorter than the timed one. A timed typewriter sets its own
   pace and can afford a soft edge; this one's pace is the reader's thumb,
   and at a flick that same edge turns the whole table into a smear. */
.hc-page .hc-tcs{transition:opacity .09s linear;}
@media (max-width:980px) and (scripting:enabled){
  .hc-page .hc-tcs{opacity:0;}
}
@media (max-width:980px){
  .hc-page .hc-tcs.hc-lit{opacity:1;}
}

/* typed out in one go for a reader who has asked for less movement: five
   seconds of letters arriving is precisely the thing that setting is for */
@media (prefers-reduced-motion:reduce){
  .hc-page .hc-seq .hc-tc,
  .hc-page .hc-tcs{opacity:1 !important;transition:none !important;}
}
.hc-page .hc-slide.hc-on .hc-c{
  transition:opacity .22s linear,transform .54s var(--e-bounce);
}
/* THE PUSH IS ONE TRANSFORM ON THE WHOLE LINE, NOT A WIDTH ANIMATION.
   The first version grew the word's max-width from 0, which reads well on
   paper — the word's own width shoves the rest of the line along — but in
   place it refused to hold its from-value and the space was reserved from
   the first frame, so nothing was ever pushed. Translating the line is
   equivalent in effect and cannot fail that way: a transform always
   interpolates, it never depends on a measured length being parsed as an
   animatable endpoint, and it runs on the compositor instead of forcing a
   reflow of a 100px headline on every frame. --pw is the measured width of
   the missing word, so the line travels exactly that far and lands with
   the gutter. */
/* AN ELASTIC SETTLE, WHICH A SINGLE CUBIC-BEZIER CANNOT GIVE.
   This was one transition on the overshoot curve. That curve does pass its
   endpoint before coming back, but only by about five pixels at this size —
   technically an overshoot and visually nothing at all, which is why the
   shove read as a plain slide. A cubic-bezier can only cross its endpoint
   once, so no amount of tuning turns it into a bounce; the wobble has to be
   keyframed. Three diminishing swings, sized in em so the bounce stays in
   proportion to the headline at every breakpoint.
   0% is the parked position, and animation-fill-mode:backwards holds it
   through the delay, so this keyframe owns the whole journey and the inline
   transform JS sets is only the no-animation fallback. */
@keyframes hcShove{
  0%   {transform:translateX(calc(var(--pw,0px) * -1));}
  54%  {transform:translateX(.145em);}
  72%  {transform:translateX(-.062em);}
  87%  {transform:translateX(.024em);}
  100% {transform:translateX(0);}
}
.hc-page .hc-slide.hc-on .hc-tl-in{animation:hcShove .92s var(--e-out) both;}

/* the word lands with a small squash of its own so the contact has a beat
   to it, rather than the whole line simply setting off at once */
@keyframes hcStrike{
  0%   {transform:translateX(-118vw);}
  62%  {transform:translateX(.05em);}
  80%  {transform:translateX(-.022em);}
  100% {transform:translateX(0);}
}
.hc-page .hc-slide.hc-on .hc-push{
  opacity:1;
  animation:hcStrike .62s var(--e-io) both;
  transition:opacity .16s linear;
}

.hc-page .hc-tl{display:block;}
/* NOT CLIPPED. It used to be, to hide the word until it was needed, but
   the word now flies the width of the screen to get here and clipping at
   the gutter would have thrown away the whole of that journey. The stage
   clips instead — it is the viewport edge, which is where the word should
   disappear — and opacity keeps the other three slides' words out of
   sight while they wait their turn off-stage. */
.hc-page .hc-tl-push{overflow:visible;}
.hc-page .hc-tl-in{display:inline-block;}
.hc-page .hc-push{display:inline-block;white-space:pre;}
.hc-page .hc-w{display:inline-block;white-space:nowrap;}
.hc-page .hc-c{display:inline-block;}
.hc-page .hc-slide-grid{display:grid;gap:clamp(26px,4vw,44px);align-items:center;}
.hc-page .hc-slide-copy{min-width:0;}

.hc-page .hc-kicker{
  margin:0;font-family:var(--font-mono);font-size:clamp(10.5px,.8vw,12.5px);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(246,242,233,.66);font-weight:600;}

/* the four claims. A list, not four paragraphs — each line is one fact and
   the gold rule at its head is what makes that legible at a glance. */
/* The rhythm around the claims is measured in vh as well as vw for the
   same reason the headline is: this block lives on a pinned screen whose
   height is fixed, so every margin here is height the buttons below do not
   get. Type stays at the site's body size; it is the spacing that gives. */
.hc-page .hc-chips{
  list-style:none;margin:min(clamp(16px,2.2vw,26px),2.6vh) 0 0;padding:0;max-width:54ch;
}
.hc-page .hc-chips li{
  position:relative;padding:0 0 0 20px;margin:0 0 min(10px,1.15vh);
  font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:-.01em;
  color:rgba(246,242,233,.74);
}
.hc-page .hc-chips li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--grid);
}
.hc-page .hc-chips b{color:var(--cream);font-weight:600;}

.hc-page .hc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:min(clamp(18px,2.6vw,28px),3vh);}

/* media panel */
.hc-page .hc-media{margin:0;min-width:0;}
.hc-page .hc-ph{
  display:flex;flex-direction:column;gap:min(14px,1.6vh);
  padding:clamp(14px,1.6vw,20px);border-radius:8px;
  border:1px dashed var(--gold-dim);
  background:rgba(246,242,233,.045);
  aspect-ratio:16/9;max-height:100%;
}
/* On a short screen the brief is the first thing that can go: it is
   scaffolding for whoever fills the slot, not copy for the reader, and
   losing it is better than losing the buttons underneath. */
@media (max-height:760px){ .hc-page .hc-slide .hc-ph-note{display:none;} }

/* ---------- short windows ----------
   A 1024x600 landscape window — a small laptop, a tablet on its side, or
   anyone with a browser that is not full height — leaves about 430px of
   stage once the nav, the padding and the slide bar have taken their share,
   and the copy column wanted 460. The buttons went under the bar by two
   pixels, which is the only size in the whole sweep where they did.
   Reclaimed from the frame rather than from the words: the pin's padding,
   the gap above the bar and the space between the claims all give, and the
   body stays at the size STYLE-GUIDE sets for it. */
@media (max-height:700px){
  .hc-page{--t-title:clamp(30px,min(calc(18.2px + 6.2vw),8.4vh),104px);}
  .hc-page .hc-pin{
    padding-top:calc(var(--nav-h) + 8px);
    padding-bottom:8px;
  }
  .hc-page .hc-bar{margin-top:10px;padding-top:10px;}
  .hc-page .hc-chips{margin-top:12px;}
  .hc-page .hc-chips li{margin-bottom:4px;}
  .hc-page .hc-acts{margin-top:12px;}
  .hc-page .hc-btn{min-height:42px;padding-top:11px;padding-bottom:11px;}
  .hc-page .hc-arrow{width:36px;height:36px;}
}

/* ---------- the phone: the panel takes what is left, not what it wants ----
   Stacked one above the other, the copy's height is fixed by its words but
   the media slot's was not — it sized itself and pushed its own bottom edge
   past the pinned screen. Giving the grid an auto row and a 1fr row makes
   the slot the flexible one: it fills the space the copy has not used and
   stops exactly at the stage's edge, which will still be true once a real
   16:9 film is dropped into it. */
/* ---------- air between the bar and the first slide ----------
   On a phone the bar sits right on the kicker, because --nav-h only clears
   the bar itself and the gap under it was sized in vw, which a narrow
   screen collapses to its 18px floor. 25px more, on the pin's own padding
   so the stage below keeps sizing itself off whatever is left.

   Not on a short screen: the max-height:700px block above spends its whole
   budget buying that space back to keep the CTAs off the bottom edge, and
   this would hand the 25px straight back. */
@media (max-width:980px) and (min-height:701px){
  .hc-page .hc-pin{
    padding-top:calc(var(--nav-h) + clamp(18px,3.4vw,44px) + 25px);
  }
}
@media (max-width:980px){
  /* the 1fr row can only hold the panel back if something above it knows
     how tall the screen is, so the height is handed down the chain —
     stage, slide, grid — rather than each box sizing to its own content */
  .hc-page .hc-stage{align-items:stretch;}
  .hc-page .hc-slide{display:flex;}
  .hc-page .hc-slide-grid{flex:1;min-height:0;}
  .hc-page .hc-slide-grid{
    grid-template-rows:auto minmax(0,1fr);
    align-content:start;
    gap:min(clamp(20px,3.4vw,34px),2.6vh);
  }
  .hc-page .hc-media{min-height:0;min-width:0;}
  .hc-page .hc-ph{height:100%;min-height:0;}
  .hc-page .hc-ph-mid{min-height:0;}
}
@media (max-width:900px){ .hc-page .hc-ph{aspect-ratio:auto;} }
.hc-page .hc-ph-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.hc-page .hc-tag,
.hc-page .hc-ratio{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(246,242,233,.5);font-weight:600;}
.hc-page .hc-ph-mid{
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:min(120px,12vh);
}
.hc-page .hc-ph-mid span{
  font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:clamp(24px,3vw,40px);line-height:1.1;letter-spacing:.015em;
  text-transform:uppercase;color:rgba(246,242,233,.34);
}
.hc-page .hc-ph-note{
  margin:0;font-size:clamp(11px,.85vw,13px);line-height:1.5;
  color:rgba(246,242,233,.6);
}

/* the bar: count, ticks, arrows */
.hc-page .hc-bar{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);
  margin-top:clamp(22px,3vw,34px);
  padding-top:clamp(14px,2vw,20px);border-top:1px solid rgba(246,242,233,.14);
}
.hc-page .hc-count{
  font-family:var(--font-mono);font-size:clamp(10.5px,.8vw,12.5px);
  letter-spacing:.2em;color:rgba(246,242,233,.56);flex:none;font-weight:600;}
.hc-page .hc-count #hcCur{color:var(--grid);}
.hc-page .hc-ticks{display:flex;gap:8px;flex:1;min-width:0;}
.hc-page .hc-tick{
  position:relative;flex:1;max-width:84px;height:2px;border:0;padding:0;
  background:rgba(246,242,233,.18);cursor:pointer;overflow:hidden;
  border-radius:2px;
}
.hc-page .hc-tick::after{
  content:"";position:absolute;inset:0;background:var(--grid);
  transform:scaleX(0);transform-origin:left;
}
.hc-page .hc-tick[aria-selected="true"]::after{transform:scaleX(1);}
/* the autoplay bar fills across the dwell; a manual move removes .hc-run
   and the bar snaps to full instead of continuing an animation that no
   longer matches when the next slide will arrive */
.hc-page .hc-tick.hc-run::after{animation:hcTick 7s linear forwards;}
@keyframes hcTick{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.hc-page .hc-tick:focus-visible{outline:2px solid var(--grid);outline-offset:4px;}
.hc-page .hc-arrows{display:flex;gap:8px;flex:none;}
.hc-page .hc-arrow{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(246,242,233,.24);background:transparent;color:var(--cream);
  font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--e-out),border-color .3s var(--e-out),color .3s var(--e-out);
}
.hc-page .hc-arrow:hover{background:var(--grid);border-color:var(--grid);color:var(--ink);}
.hc-page .hc-arrow:focus-visible{outline:2px solid var(--grid);outline-offset:3px;}

/* NO PIN, NO SIDEWAYS, NO SEQUENCE.
   Someone who has asked for reduced motion should not be made to scroll
   horizontally to read four screens, and a pinned section is motion they
   cannot opt out of once they are inside it. So the hero stops being a
   carousel altogether and becomes four stacked blocks in normal flow —
   the same content, in the same order, with nothing to drive. */
@media (prefers-reduced-motion:reduce){
  .hc-page .hc-hero{height:auto;}
  .hc-page .hc-pin{position:static;height:auto;display:block;transition:none;}
  .hc-page .hc-stage{display:block;overflow:visible;}
  .hc-page .hc-track{flex-direction:column;transform:none !important;transition:none;}
  .hc-page .hc-slide{flex:0 0 auto;padding-bottom:clamp(44px,7vw,84px);}
  .hc-page .hc-bar{display:none;}
  .hc-page .hc-seq [data-anim],
  .hc-page .hc-seq .hc-c{opacity:1 !important;transform:none !important;}
  .hc-page .hc-slide .hc-push{opacity:1 !important;animation:none !important;}
  .hc-page .hc-slide .hc-tl-in{transform:none !important;animation:none !important;}
  .hc-page .hc-tl-push{overflow:visible;}
  .hc-page .hc-tick.hc-run::after{animation:none;transform:scaleX(1);}
}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.hc-page .hc-sec{padding:clamp(56px,8vw,112px) var(--hc-pad);}
.hc-page .hc-band{background:var(--hc-raise);}
/* DECLARED HERE, AFTER .hc-band, AND THAT IS THE WHOLE POINT.
   The ink band's background is set up in the "ON THE INK BANDS" block
   near the top of this file, but #premium carries BOTH classes and the
   two selectors have identical specificity — so .hc-band, being later in
   the file, won, and the whole Vidur/Narad section painted its cream
   text onto the pale raise colour. Restating it after its rival is what
   settles the tie; raising specificity instead would have left the next
   reader to work out why. */
.hc-page .hc-band-deep{background:var(--ink);}
.hc-page .hc-head{max-width:70ch;}

/* ---------- THE RULE DRAWS ITSELF, LEFT TO RIGHT ----------
   A plus sits at the left margin. As the reader scrolls, a second plus
   travels across and the hairline extends behind it, so the line is drawn
   rather than revealed, and it ends as a full-width rule with a plus at
   each end.

   Driven by --p, a 0-to-1 scrub the script writes on each rule from its own
   position in the viewport. That is deliberately not an IntersectionObserver
   fire-once: scrubbing means scrolling back up un-draws it, which is what
   "with scroll/gesture" asks for, and it costs one rect read per rule per
   frame on the same ticker everything else here already uses.

   No JS, no --p, no problem: the fallback in the var() is 1, so the rule is
   simply complete. */
.hc-page .hc-rule{
  position:relative;height:1px;
  margin:clamp(30px,4vw,48px) 0 clamp(34px,5vw,60px);
}
.hc-page .hc-rule-line{
  position:absolute;left:0;top:0;height:1px;background:var(--hc-line);
  width:calc(var(--p,1) * 100%);
}
/* THE PLUS IS DRAWN, NOT TYPED.
   It was a "+" character, and a glyph's ink is not centred in its line box —
   the old mono face's sat a little low, so the cross came out a pixel under the
   hairline no matter what the box was told to do. Two 1px bars instead: the
   horizontal one IS the same weight as the rule and lands on exactly the
   same row, because both are positioned from the same origin rather than
   one being typeset and the other painted. */
.hc-page .hc-plus{
  position:absolute;top:0;width:11px;height:11px;margin-top:-5px;
  transform:translateX(-50%);
}
.hc-page .hc-plus::before,
.hc-page .hc-plus::after{content:"";position:absolute;background:var(--hc-node);}
/* the horizontal bar sits on row 5 of 11 — the same row as the 1px rule,
   which is at top:0 of a box pulled up by half its own height */
.hc-page .hc-plus::before{left:0;right:0;top:5px;height:1px;}
.hc-page .hc-plus::after{top:0;bottom:0;left:5px;width:1px;}
.hc-page .hc-plus-l{left:0;}
/* the travelling one rides the line's leading edge, so it is always the
   thing doing the drawing rather than a marker that appears at the end */
.hc-page .hc-plus-r{left:calc(var(--p,1) * 100%);}
/* until it has travelled at all, the two pluses are stacked on the left
   margin and read as one — fading the second one in over the first fifth
   of the journey keeps that from looking like a doubled glyph */
.hc-page .hc-plus-r{opacity:clamp(0,calc(var(--p,1) * 5),1);}
/* on the ink bands the green would vanish, so those keep the gold */
.hc-page .hc-band-deep .hc-rule-line{background:rgba(199,164,93,.45);}
.hc-page .hc-band-deep .hc-plus::before,
.hc-page .hc-band-deep .hc-plus::after{background:var(--grid);}

/* ============================================================
   2 · THREE LEVELS
   ============================================================ */
.hc-page .hc-level{
  display:grid;gap:clamp(26px,4vw,52px);
  padding:0 0 clamp(16px,2.4vw,32px);
}
.hc-page .hc-level-body{min-width:0;}

.hc-page .hc-level-id{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
/* Devanagari sits on a different vertical rhythm from Latin; giving it its
   own size and a muted gold keeps the name the thing you read first. */
.hc-page .hc-deva{
  font-size:clamp(19px,1.7vw,26px);line-height:1.5;color:var(--grid);font-weight:400;
}
.hc-page .hc-level-name{
  font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:var(--t-phrase);line-height:1.1;letter-spacing:.015em;
  text-transform:uppercase;color:var(--ink);font-style:normal;
}
/* the falling letters are inline-blocks, so the line they sit on needs the
   same leading it would have had as plain text */
.hc-page .hc-level-name .hc-c,
.hc-page .hc-sec-h .hc-c{line-height:inherit;}
.hc-page .hc-level-role{
  margin:10px 0 0;font-family:var(--font-mono);
  font-size:clamp(10.5px,.8vw,12.5px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
.hc-page .hc-gloss{
  margin:clamp(14px,1.8vw,20px) 0 0;font-style:italic;font-weight:300;
  font-size:var(--t-heading);line-height:var(--lh-heading);color:var(--grid);
}
.hc-page .hc-band-deep .hc-gloss{color:var(--grid);}
.hc-page .hc-origin{
  margin:clamp(12px,1.4vw,18px) 0 0;padding-left:16px;
  border-left:2px solid var(--gold-dim);
  font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--ink-soft);max-width:60ch;
}
.hc-page .hc-origin i{font-style:italic;}

/* the toolset */
.hc-page .hc-toolset{margin-top:clamp(22px,3vw,32px);}
.hc-page .hc-toolset-h{
  margin:0 0 14px;font-family:var(--font-mono);font-weight:600;
  font-size:clamp(10.5px,.78vw,12.5px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);
}
.hc-page .hc-tools{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--gold-faint);border:1px solid var(--gold-faint);
}
.hc-page .hc-tools li{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 14px;background:var(--bg);
  font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-soft);
}
.hc-page .hc-tools b{
  font-weight:600;font-size:var(--t-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}

/* the price line */
.hc-page .hc-price-row{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;
  margin-top:clamp(22px,3vw,32px);padding-top:clamp(16px,2vw,22px);
  border-top:1px solid var(--gold-faint);
}
.hc-page .hc-from{
  font-family:var(--font-mono);font-size:var(--t-mono-sm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
.hc-page .hc-amt{
  font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:.01em;color:var(--grid);
}
/* the quoted levels say a sentence, not a number, so it is set as text */
.hc-page .hc-quote .hc-amt{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--t-heading);letter-spacing:0;line-height:1.2;color:var(--ink);
}
.hc-page .hc-qt{font-size:var(--t-mono);color:var(--ink-soft);}
/* ---------- THE JUMP LINK — the footer button's hover, in ink ----------
   Ported from .ft-cta in style.css rather than approximated, so the two
   behave identically: the label crosses to the far end of the link, a wave
   of open tracking runs right-to-left through its letters, the resting
   arrow fades and a new one is drawn in at the left, and the underline
   retracts to its right end before redrawing from its left. Every duration,
   delay and curve is the one style.css uses. Only the colours change —
   white on the footer's near-black, ink and gold on this cream.

   The classes are prefixed rather than reused because .ft-cta is sized and
   coloured for the footer grid; borrowing it would have dragged that in. */
.hc-page .hc-jump{
  position:relative;display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,1.6vw,34px);min-height:1.35em;max-width:100%;
  margin-left:auto;text-decoration:none;padding-bottom:.75em;
  font-family:var(--font-mono);font-size:var(--t-mono-sm);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:600;}
.hc-page .hc-jump-t{
  position:absolute;left:0;top:0;transform:translateX(0);
  display:flex;align-items:baseline;
  transition:left 1.37s cubic-bezier(.16,1,.3,1),
             transform 1.37s cubic-bezier(.16,1,.3,1);
}
.hc-page .hc-jump:hover .hc-jump-t,
.hc-page .hc-jump:focus-visible .hc-jump-t{left:100%;transform:translateX(-100%);}
.hc-page .hc-jump-t i{display:block;font-style:normal;}
.hc-page .hc-jump-t i.sp{width:.34em;}
/* THE LINK CANNOT SIZE ITSELF TO A LABEL THAT HAS LEFT THE FLOW.
   .hc-jump-t is absolutely positioned — it has to be, because the hover
   moves it from one end of the link to the other with left + translate, and
   a transform alone cannot land it flush. That leaves the link with no
   intrinsic width, so it fell back to a min-width guess and the longest
   label, "Listener · Thinker · Strategist", ran out over the arrow and past
   the column. This is the same string again, in flow but invisible: it
   reserves exactly the width the real label needs, at any font size, in any
   of the three lengths, with no measuring in script. */
.hc-page .hc-jump-w{
  visibility:hidden;pointer-events:none;
  white-space:nowrap;letter-spacing:inherit;
}
/* the wave is margin, not letter-spacing: these are flex items, and
   letter-spacing on a single character is applied inconsistently at the end
   of a run. --r counts from the far end, which is what makes it run
   right-to-left like the reference. */
.hc-page .hc-jump:hover .hc-jump-t i,
.hc-page .hc-jump:focus-visible .hc-jump-t i{
  animation:hcWave 1.50s cubic-bezier(.33,0,.2,1) both;
  animation-delay:calc(var(--r) * .059s);
}
@keyframes hcWave{
  0%   {margin-right:0;}
  42%  {margin-right:.40em;}
  100% {margin-right:0;}
}
/* the arrow is drawn, not moved — its left edge never travels */
.hc-page .hc-arw{font-style:normal;line-height:inherit;}
.hc-page .hc-arw-l{
  position:absolute;left:0;top:0;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .31s linear;
}
.hc-page .hc-jump:hover .hc-arw-l,
.hc-page .hc-jump:focus-visible .hc-arw-l{
  clip-path:inset(0 0 0 0);
  transition:clip-path .31s linear .68s;
}
.hc-page .hc-arw-r{margin-left:auto;transition:opacity .36s ease;}
.hc-page .hc-jump:hover .hc-arw-r,
.hc-page .hc-jump:focus-visible .hc-arw-r{opacity:0;}
/* two lines in the same place: one retracts to its right end, the other
   redraws from its left, handing over at the instant the first has no width
   — which is why no seam shows. One element cannot do this, because
   transform-origin is fixed for the whole transition. */
.hc-page .hc-jump::before,
.hc-page .hc-jump::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-dim);
}
.hc-page .hc-jump::before{transform-origin:100% 50%;transition:transform .65s cubic-bezier(.5,0,.75,0);}
.hc-page .hc-jump::after{
  background:var(--grid);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .75s cubic-bezier(.22,1,.36,1);
}
.hc-page .hc-jump:hover::before,
.hc-page .hc-jump:focus-visible::before{transform:scaleX(0);}
.hc-page .hc-jump:hover::after,
.hc-page .hc-jump:focus-visible::after{transform:scaleX(1);transition-delay:.62s;}
.hc-page .hc-jump:focus-visible{outline:1px solid var(--gold-dim);outline-offset:6px;}
@media (prefers-reduced-motion:reduce){
  .hc-page .hc-jump-t{position:static;transition:none;}
  .hc-page .hc-jump:hover .hc-jump-t{left:auto;transform:none;}
  .hc-page .hc-jump:hover .hc-jump-t i{animation:none;}
  .hc-page .hc-arw-l{display:none;}
  .hc-page .hc-jump::before,.hc-page .hc-jump::after{transition:none;}
}

/* the shot beside each level */
.hc-page .hc-level-shot{min-width:0;}
.hc-page .hc-shot{
  margin:0;overflow:hidden;border-radius:8px;
  border:1px solid var(--gold-dim);background:var(--hc-raise);
}
.hc-page .hc-shot img{display:block;width:100%;height:auto;}
/* The three portraits are tall full-figure artwork. The column they sit in
   is sticky, so anything taller than the viewport can never be seen whole —
   it just scrolls past its own pin. Capped to the visible height, contained
   rather than cropped so no one loses their feet, and centred on the card. */
/* NO CARD BEHIND THE PORTRAITS.
   .hc-shot is a bordered, rounded, filled panel — right for a screenshot of
   an interface, wrong for cut-out artwork, which ends up sitting in a box it
   does not need. The three level portraits keep only the sizing. */
.hc-page .hc-level-shot .hc-shot{
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:0;overflow:visible;
}
.hc-page .hc-level-shot .hc-shot img{
  width:auto;max-width:100%;
  max-height:calc(100vh - var(--nav-h) - clamp(90px,12vh,150px));
  object-fit:contain;
}

/* ---------- THE ONE LEVEL THAT MOVES ----------
   Sanjay's shot is a clip, not a cut-out, so the rule directly above —
   which strips the card off the portraits because artwork does not want a
   box — is wrong for it. This puts the card back for that one figure, and
   only that one: .hc-shot-film is on the <figure>, so Vidur and Narad are
   untouched.

   The card, not the video, carries the size. A 9:16 box capped to what is
   actually visible in the sticky column, and the clip fills it — so the
   panel is its final shape from the first paint and nothing reflows when
   the poster arrives, let alone when the video does.

   Radius on BOTH the card and the video on purpose. overflow:hidden on a
   rounded parent does not clip a <video> in Safari — the corners come back
   square — so the element rounds itself as well. */
.hc-page .hc-level-shot .hc-shot.hc-shot-film{
  display:block;margin-inline:auto;
  width:min(100%, calc((100vh - var(--nav-h) - clamp(90px,12vh,150px)) * 480 / 854));
  aspect-ratio:480/854;
  border:1px solid var(--gold-dim);border-radius:14px;
  overflow:hidden;
  /* WHAT THE CARD IS BEFORE THE PICTURE ARRIVES.
     The poster is attached a screen and a half early, so this is only ever
     seen in the gap on a slow connection or a fast scroll — but it is seen,
     and a bright hole in the page is the wrong thing to see.

     Each card sets --film-bg to the average colour of its OWN poster's
     outer edge, so the panel waiting is already the colour the picture will
     meet it with and the arrival is a resolve rather than a flash. One
     value for both would have been wrong for one of them: Sanjay's clip is
     a near-black night scene and Vidur's a warm, bright hall. */
  background:var(--film-bg,#0b1113);
}
.hc-page .hc-level-shot .hc-shot-film video{
  display:block;width:100%;height:100%;
  object-fit:cover;border-radius:13px;
  /* the poster is painted by the element itself, so it is cropped the same
     way the frames are and the two cannot disagree at the edges */
  object-position:center;
}
.hc-page .hc-ph-shot{
  border:0;border-radius:0;background:transparent;aspect-ratio:4/3;
}
.hc-page .hc-ph-shot .hc-tag,
.hc-page .hc-ph-shot .hc-ph-note{color:rgba(30,55,39,.72);}
.hc-page .hc-ph-shot .hc-ph-mid span{color:rgba(30,55,39,.26);}
.hc-page .hc-cap{
  margin:12px 0 0;font-family:var(--font-mono);font-size:var(--t-mono-sm);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);line-height:1.6;font-weight:600;}

/* ============================================================
   3 · AUTOMATION SUITES
   ============================================================ */

/* ---------- THE PANEL: FOUR NODES THAT STRETCH THE LINES ----------
   The frame is its full size from the start. Four pluses strike ON the
   corners — not held off them the way #intro holds its nodes clear with
   --po, because here they are meant to read as the things gripping the
   box, not as marks beside it — and each edge is then pulled out of one
   of them towards the next. All four draw at once, clockwise, so the
   rectangle closes as the four lines meet the four nodes.

   Scrubbed on --bp, a 0-to-1 the script writes from the panel's position,
   so the box is built by the reader's own scrolling and unbuilt if they
   go back. Once it is closed and the content has arrived, a dash runs
   round the perimeter — the .in-trace chase from the index, which is an
   SVG because only a path carries a dash through a corner.

   NO GROUND. The panel had a near-black fill; it sits on the section's
   own cream and the frame is the only thing drawn. */
.hc-page .hc-panel{
  position:relative;margin-top:clamp(40px,6vw,76px);
  /* the box is drawn at inset:0 of this element, so the panel's own vertical
     padding is space INSIDE the frame — it and .hc-panel-in's together are
     what the top and bottom breathing room adds up to. Both are at 88% of
     what they were. */
  padding:clamp(26.4px,3.52vw,49.3px) clamp(22px,3vw,48px);
  color:var(--ink);
}
.hc-page .hc-box{position:absolute;inset:0;pointer-events:none;}
.hc-page .hc-box-p{
  position:absolute;width:20px;height:20px;z-index:3;
  /* in over the first twelfth of the scrub, before any line moves */
  opacity:clamp(0,calc(var(--bp,1) * 12),1);
  transform:translate(-50%,-50%) scale(clamp(.5,calc(.5 + var(--bp,1) * 6),1));
}
.hc-page .hc-box-p::before,
.hc-page .hc-box-p::after{content:"";position:absolute;background:var(--hc-node);}
.hc-page .hc-box-p::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px;}
.hc-page .hc-box-p::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;}
/* dead on the corners */
.hc-page .hc-box-p.tl{left:0;top:0;}
.hc-page .hc-box-p.tr{left:100%;top:0;}
.hc-page .hc-box-p.bl{left:0;top:100%;}
.hc-page .hc-box-p.br{left:100%;top:100%;}

/* each edge grows out of one node towards the next, so the four of them
   stretch the box open between them */
.hc-page .hc-box-e{
  position:absolute;background:var(--hc-line);z-index:1;
  --ed:clamp(0,calc((var(--bp,1) - .1) * 1.15),1);
}
.hc-page .hc-box-e.top{left:0;right:0;top:0;height:1px;transform:scaleX(var(--ed));transform-origin:0 50%;}
.hc-page .hc-box-e.right{top:0;bottom:0;right:0;width:1px;transform:scaleY(var(--ed));transform-origin:50% 0;}
.hc-page .hc-box-e.bottom{left:0;right:0;bottom:0;height:1px;transform:scaleX(var(--ed));transform-origin:100% 50%;}
.hc-page .hc-box-e.left{top:0;bottom:0;left:0;width:1px;transform:scaleY(var(--ed));transform-origin:50% 100%;}

/* ---------- ONE HIGHLIGHT, ALL THE WAY ROUND ----------
   This was an SVG rect with a dash pattern, which is how #intro does it.
   On a rect stretched by preserveAspectRatio="none" and stroked with
   non-scaling-stroke, the dash is measured in a different space from the
   path it rides, so what should have been a single 16-unit mark came out
   as several — one per edge. Drawn on the edges instead: one short bar
   that crosses the top, then the right, then the bottom, then the left,
   with the four windows sharing a single cycle so exactly one of them is
   ever lit. There is no way for this one to multiply.

   --span is how far the bar travels as a multiple of its own length:
   the edge is 100/18 bar-lengths, so from -100% to 455%. */
.hc-page .hc-box-e::after{
  content:"";position:absolute;background:var(--hc-lit);opacity:0;
  --span:455%;
}
.hc-page .hc-box-e.top::after,
.hc-page .hc-box-e.bottom::after{left:0;top:0;height:1px;width:18%;}
.hc-page .hc-box-e.left::after,
.hc-page .hc-box-e.right::after{left:0;top:0;width:1px;height:18%;}
@keyframes hcRunT{
  0%        {opacity:1;transform:translateX(-100%);}
  25%       {opacity:1;transform:translateX(var(--span));}
  25.01%,100%{opacity:0;transform:translateX(var(--span));}
}
@keyframes hcRunR{
  0%,25%    {opacity:0;transform:translateY(-100%);}
  25.01%    {opacity:1;transform:translateY(-100%);}
  50%       {opacity:1;transform:translateY(var(--span));}
  50.01%,100%{opacity:0;transform:translateY(var(--span));}
}
@keyframes hcRunB{
  0%,50%    {opacity:0;transform:translateX(var(--span));}
  50.01%    {opacity:1;transform:translateX(var(--span));}
  75%       {opacity:1;transform:translateX(-100%);}
  75.01%,100%{opacity:0;transform:translateX(-100%);}
}
@keyframes hcRunL{
  0%,75%    {opacity:0;transform:translateY(var(--span));}
  75.01%    {opacity:1;transform:translateY(var(--span));}
  100%      {opacity:1;transform:translateY(-100%);}
}
.hc-page .hc-panel.hc-on .hc-box-e.top::after   {animation:hcRunT 5.2s linear infinite;}
.hc-page .hc-panel.hc-on .hc-box-e.right::after {animation:hcRunR 5.2s linear infinite;}
.hc-page .hc-panel.hc-on .hc-box-e.bottom::after{animation:hcRunB 5.2s linear infinite;}
.hc-page .hc-panel.hc-on .hc-box-e.left::after  {animation:hcRunL 5.2s linear infinite;}

@media (prefers-reduced-motion:reduce){
  .hc-page .hc-box-p{opacity:1;transform:translate(-50%,-50%);}
  .hc-page .hc-box-e.top,.hc-page .hc-box-e.bottom,
  .hc-page .hc-box-e.left,.hc-page .hc-box-e.right{transform:none;}
  .hc-page .hc-box-e::after{display:none;}
}

.hc-page .hc-panel-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,38px);
  /* vertical at 88%, horizontal untouched */
  padding:clamp(12.3px,1.76vw,26.4px) clamp(14px,2vw,30px);
}
.hc-page .hc-ceo-kicker{
  margin:0;font-weight:600;font-size:var(--t-sub);line-height:1.2;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
}
.hc-page .hc-ceo-name{
  margin:6px 0 0;font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:clamp(34px,3.4vw,52px);line-height:1;letter-spacing:.015em;
  text-transform:uppercase;color:var(--ink);font-style:normal;
}
.hc-page .hc-ceo-fn{
  margin:10px 0 0;font-size:var(--t-body);line-height:1.4;color:var(--ink-soft);
}
.hc-page .hc-ceo-copy{
  margin:0;font-size:var(--t-body);line-height:var(--lh-body);
  letter-spacing:-.01em;color:var(--ink-soft);max-width:62ch;
}
.hc-page .hc-chiprow{
  list-style:none;margin:clamp(18px,2.2vw,26px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.hc-page .hc-chiprow li{
  padding:9px 15px;border:1px solid var(--gold-dim);border-radius:3px;
  font-size:var(--t-mono);line-height:1.3;color:var(--ink-soft);
}
.hc-page .hc-sub-grid{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--gold-faint);border:1px solid var(--gold-faint);
}
.hc-page .hc-sub{
  display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--hc-raise);
}
.hc-page .hc-sub b{
  font-weight:600;font-size:var(--t-body);letter-spacing:.04em;color:var(--ink);
}
.hc-page .hc-sub span{
  font-size:var(--t-mono);line-height:var(--lh-body);color:var(--ink-soft);
}

/* ---------- THE RULE THAT EXTENDS ----------
   One line growing left to right on --cp, a node staying behind at each of
   the five column boundaries as it passes, and a leading node riding its
   end. A node's appearance is a calc() of the scrub against its own
   position: (cp*100 - x) + 1, clamped — zero until the line reaches it,
   one once it has, with a few per cent of fade in between. */
.hc-page .hc-trip{
  position:relative;height:1px;margin:clamp(40px,6vw,74px) 0 0;
}
.hc-page .hc-trip-line{
  position:absolute;left:0;top:0;height:1px;background:var(--hc-line);
  width:calc(var(--cp,1) * 100%);
}
.hc-page .hc-trip-p,
.hc-page .hc-trip-lead{
  position:absolute;top:0;width:13px;height:13px;
  transform:translate(-50%,-50%);
}
.hc-page .hc-trip-p::before,.hc-page .hc-trip-lead::before,
.hc-page .hc-trip-p::after,.hc-page .hc-trip-lead::after{
  content:"";position:absolute;background:var(--hc-node);
}
.hc-page .hc-trip-p::before,
.hc-page .hc-trip-lead::before{left:0;right:0;top:6px;height:1px;}
.hc-page .hc-trip-p::after,
.hc-page .hc-trip-lead::after{top:0;bottom:0;left:6px;width:1px;}
.hc-page .hc-trip-p{
  left:calc(var(--x) * 1%);
  opacity:clamp(0,calc((var(--cp,1) * 100 - var(--x)) + 1),1);
}
/* the one riding the leading edge fades out as it reaches the far end,
   where the last boundary node takes over from it */
.hc-page .hc-trip-lead{
  left:calc(var(--cp,1) * 100%);
  opacity:clamp(0,calc(min(var(--cp,0) * 14,(1 - var(--cp,0)) * 14)),1);
}
@media (prefers-reduced-motion:reduce){
  .hc-page .hc-trip-line{width:100%;}
  .hc-page .hc-trip-p{opacity:1;}
  .hc-page .hc-trip-lead{display:none;}
}

/* ---------- THE FOUR COLUMNS ----------
   They sit side by side, so they all cross into view in the same frame and
   nothing about their own position can stagger them. The rule above does
   it: as its leading edge clears a column's boundary, that column comes
   up. No divider of their own — in the reference the horizontal rule and
   its nodes are the whole of the structure. */
.hc-page .hc-cols{display:grid;grid-template-columns:1fr;}
.hc-page .hc-col{
  position:relative;padding:clamp(26px,3vw,40px) 0 clamp(20px,2.4vw,32px);
}
.hc-page .hc-col-in{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--e-out),transform .75s var(--e-out);
}
.hc-page .hc-col.hc-on .hc-col-in{opacity:1;transform:none;}
/* the columns already came and went with the rule above them; the only
   thing they needed was for the retreat to be staggered the other way,
   which the script does by reversing their delays */
@media (scripting:none),(prefers-reduced-motion:reduce){
  .hc-page .hc-col-in{opacity:1;transform:none;transition:none;}
}

/* ---------- THE PER-COLUMN RULE — the phone's version ----------
   Stacked, each column is its own row, so the structure that belongs to it
   is a rule of its own: the node strikes at the left, the line draws across
   the column's width, a second node lands on the far end, and only then
   does the content rise. --rp is that column's own scrub, written by the
   script from its own position, so the four of them arrive one at a time as
   the reader comes down the page rather than all at once off a single
   progress value that was measured across the whole row.

   From 981px up this is hidden and the shared .hc-trip filmstrip is what
   draws instead — there the columns sit side by side and one rule across
   the top of them is exactly right. */
.hc-page .hc-col-rule{
  position:absolute;left:0;right:0;top:0;height:1px;
}
.hc-page .hc-col-line{
  position:absolute;left:0;top:0;height:1px;background:var(--hc-line);
  width:calc(var(--rp,1) * 100%);
}
.hc-page .hc-col-p{
  position:absolute;top:0;width:13px;height:13px;transform:translate(-50%,-50%);
}
.hc-page .hc-col-p::before,
.hc-page .hc-col-p::after{content:"";position:absolute;background:var(--hc-node);}
.hc-page .hc-col-p::before{left:0;right:0;top:6px;height:1px;}
.hc-page .hc-col-p::after{top:0;bottom:0;left:6px;width:1px;}
.hc-page .hc-col-p.l{left:0;opacity:clamp(0,calc(var(--rp,1) * 14),1);}
/* the far node rides the line's leading edge and settles on the end */
.hc-page .hc-col-p.r{
  left:calc(var(--rp,1) * 100%);
  opacity:clamp(0,calc((var(--rp,1) - .06) * 14),1);
}
@media (min-width:981px){
  .hc-page .hc-col-rule{display:none;}
}
@media (max-width:980px){
  /* the shared filmstrip belongs to a row that is side by side; stacked,
     it would sit above all four columns and describe none of them */
  .hc-page .hc-trip{display:none;}
  .hc-page .hc-col{padding-top:clamp(30px,7vw,48px);}
}

.hc-page .hc-col-shot{margin:0 0 clamp(16px,2vw,22px);overflow:hidden;border-radius:6px;}
.hc-page .hc-col-shot img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
}
.hc-page .hc-col-kicker{
  margin:0;font-family:var(--font-mono);font-size:var(--t-mono-sm);
  letter-spacing:.2em;text-transform:uppercase;color:var(--grid);font-weight:600;}
.hc-page .hc-col-h{
  margin:10px 0 0;font-weight:400;font-size:var(--t-heading);
  line-height:var(--lh-heading);text-transform:uppercase;color:var(--ink);
}
.hc-page .hc-col-fn{margin:6px 0 0;font-size:var(--t-mono);letter-spacing:.04em;color:var(--ink-soft);}
.hc-page .hc-col-copy{
  margin:clamp(12px,1.4vw,16px) 0 0;font-size:var(--t-body);
  line-height:var(--lh-body);letter-spacing:-.01em;color:var(--ink-soft);
}
.hc-page .hc-col-tags{
  list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
}
.hc-page .hc-col-tags li{
  padding:5px 10px;border:1px solid var(--gold-faint);border-radius:3px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;}

/* ============================================================
   4 · PRICING
   ============================================================ */
.hc-page .hc-part{
  display:flex;flex-direction:column;gap:16px;
  margin-top:clamp(34px,5vw,56px);padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--gold-faint);
}
.hc-page .hc-part-id{display:flex;align-items:center;gap:14px;}
.hc-page .hc-part-name{
  margin:0;font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:var(--t-phrase);line-height:1.1;letter-spacing:.015em;
  text-transform:uppercase;color:var(--ink);
}
.hc-page .hc-part-role{
  margin:2px 0 0;font-family:var(--font-mono);font-size:clamp(10.5px,.8vw,12.5px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
.hc-page .hc-part-note{
  margin:0;font-size:var(--t-body);line-height:var(--lh-body);
  color:var(--ink-soft);max-width:60ch;
}

.hc-page .hc-toggle-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,34px);
}
.hc-page .hc-toggle{
  display:inline-flex;padding:4px;gap:4px;
  border:1px solid var(--gold-dim);border-radius:5px;background:var(--hc-raise);
}
.hc-page .hc-toggle button{
  border:0;cursor:pointer;background:transparent;color:var(--ink-soft);
  padding:10px 18px;border-radius:3px;min-height:42px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .35s var(--e-out),color .35s var(--e-out);font-weight:600;}
.hc-page .hc-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--cream);}
.hc-page .hc-toggle button:focus-visible{outline:2px solid var(--grid);outline-offset:2px;}
.hc-page .hc-save{
  font-family:var(--font-mono);font-size:var(--t-mono-sm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--grid);font-weight:600;}
.hc-page .hc-save[hidden]{display:none;}

.hc-page .hc-plans{
  display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,22px);
  margin-top:clamp(24px,3vw,34px);
  /* stretch, not start: the three tiers do not carry the same number of words
     - "Full skillset library" sits on one line where the other two wrap - so
     sized to their own content they ended at three different heights and the
     row looked ragged along the bottom. Stretched, they share one height and
     the buttons land on one line, which is what .hc-plan .hc-btn{margin-top:
     auto} below was written for. */
  align-items:stretch;
}
.hc-page .hc-plan{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--gold-dim);border-radius:8px;background:var(--bg);
}
/* the recommended tier carries the ink field, so it is the one thing on
   the row that reads as chosen rather than merely listed */
.hc-page .hc-plan-feature{
  background:var(--ink);border-color:var(--ink);
}
.hc-page .hc-flag{
  position:absolute;top:-11px;left:clamp(22px,2.6vw,32px);
  padding:4px 12px;border-radius:3px;background:var(--grid);color:var(--ink);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;}
.hc-page .hc-plan-lvl{
  margin:0;font-family:var(--font-mono);font-size:var(--t-mono-sm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--grid);font-weight:600;}
.hc-page .hc-plan-tier{
  margin:10px 0 0;font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:var(--t-phrase);line-height:1.1;letter-spacing:.015em;
  text-transform:uppercase;color:var(--ink);
}
.hc-page .hc-plan-gloss{
  margin:6px 0 0;font-style:italic;font-weight:300;
  font-size:var(--t-body);color:var(--ink-soft);
}
.hc-page .hc-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin-top:clamp(18px,2.2vw,26px);
}
.hc-page .hc-inr{
  font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:clamp(34px,3.2vw,50px);line-height:1;letter-spacing:.01em;color:var(--ink);
}
.hc-page .hc-usd{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);font-weight:600;}
.hc-page .hc-per{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);font-weight:600;}
.hc-page .hc-bill{
  margin:8px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;}
.hc-page .hc-specs{
  margin:clamp(20px,2.4vw,28px) 0 clamp(20px,2.4vw,28px);
  border-top:1px solid var(--gold-faint);
}
.hc-page .hc-sr{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--gold-faint);
}
.hc-page .hc-sr span{font-size:var(--t-mono);color:var(--ink-soft);flex:none;}
.hc-page .hc-sr b{font-weight:600;font-size:var(--t-mono);text-align:right;color:var(--ink);}
/* THE SPEC VALUES ARE INK, AND THE GOLD IS A MARKER.
   These were set in --grid, which is 2.11:1 against the cream card — far
   under AA, and this is not decoration: "Complete set" against "—" is the
   whole point of the table, so a reader who cannot resolve it cannot
   compare the tiers. Gold stays as the thing that says "included", but as
   a glyph beside the value rather than as the value's own colour, so the
   brass-means-worth language survives and the words stay readable.
   Selectors carry b to outrank .hc-sr b (0,2,1); the earlier version used
   !important for exactly this and that is what !important usually means. */
.hc-page .hc-sr b.hc-no{color:var(--ink-soft);font-weight:400;}
.hc-page .hc-sr b.hc-all,
.hc-page .hc-sr b.hc-only,
.hc-page .hc-sr b.hc-cr{color:var(--ink);}
.hc-page .hc-sr b.hc-all::before,
.hc-page .hc-sr b.hc-only::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  margin-right:7px;vertical-align:.14em;background:var(--grid);
}
.hc-page .hc-cr i{font-style:normal;font-weight:400;color:var(--ink-soft);}
.hc-page .hc-plan .hc-btn{margin-top:auto;}

/* the ink tier, inverted */
.hc-page .hc-plan-feature .hc-plan-tier,
.hc-page .hc-plan-feature .hc-inr,
.hc-page .hc-plan-feature .hc-sr b{color:var(--cream);}
.hc-page .hc-plan-feature .hc-plan-gloss,
.hc-page .hc-plan-feature .hc-usd,
.hc-page .hc-plan-feature .hc-per,
.hc-page .hc-plan-feature .hc-bill,
.hc-page .hc-plan-feature .hc-sr span,
.hc-page .hc-plan-feature .hc-cr i{color:rgba(246,242,233,.6);}
.hc-page .hc-plan-feature .hc-sr b.hc-no{color:rgba(246,242,233,.45);}
/* on the ink tier the value is cream and the marker keeps its gold */
.hc-page .hc-plan-feature .hc-sr b.hc-all,
.hc-page .hc-plan-feature .hc-sr b.hc-only,
.hc-page .hc-plan-feature .hc-sr b.hc-cr{color:var(--cream);}
.hc-page .hc-plan-feature .hc-specs,
.hc-page .hc-plan-feature .hc-sr{border-color:rgba(246,242,233,.14);}
.hc-page .hc-plan-feature .hc-btn-solid{
  background:var(--cream);color:var(--ink);border-color:var(--cream);
}
.hc-page .hc-plan-feature .hc-btn-solid::before{background:var(--grid);}
.hc-page .hc-plan-feature .hc-btn-solid:hover,
.hc-page .hc-plan-feature .hc-btn-solid:focus-visible{color:var(--ink);border-color:var(--grid);}

.hc-page .hc-fine{
  margin-top:clamp(24px,3vw,34px);max-width:88ch;
  font-size:var(--t-mono);line-height:var(--lh-body);color:var(--ink-soft);
}

/* ============================================================
   5 · VIDUR & NARAD — the ink band
   ============================================================ */
.hc-page .hc-prem-grid{
  display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,28px);
  margin-top:clamp(34px,5vw,56px);align-items:start;
}
.hc-page .hc-prem{
  display:flex;flex-direction:column;
  padding:clamp(24px,3vw,40px);border-radius:8px;
  border:1px solid rgba(246,242,233,.16);
  background:rgba(246,242,233,.04);
}
/* Narad is the tier above; the gold edge is the only thing separating
   them, because a second background would make the band read as striped */
.hc-page .hc-prem-top-tier{border-color:var(--gold-dim);}
.hc-page .hc-prem-top{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.hc-page .hc-prem-tag{
  padding:4px 11px;border:1px solid var(--gold-dim);border-radius:3px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grid);font-weight:600;}
.hc-page .hc-prem-name{
  margin:16px 0 0;font-family:'Bebas Neue',var(--font-display);font-weight:400;
  font-size:var(--t-phrase);line-height:1.1;letter-spacing:.015em;
  text-transform:uppercase;color:var(--cream);
}
.hc-page .hc-prem-role{
  margin:4px 0 0;font-family:var(--font-mono);font-size:clamp(10.5px,.8vw,12.5px);
  letter-spacing:.18em;text-transform:uppercase;color:rgba(246,242,233,.56);font-weight:600;}
.hc-page .hc-prem-copy{
  margin:clamp(14px,1.8vw,20px) 0 0;
  font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:-.01em;
  color:rgba(246,242,233,.72);
}
.hc-page .hc-inc{margin-top:clamp(22px,3vw,30px);}
.hc-page .hc-inc-h{
  margin:0 0 14px;font-family:var(--font-mono);font-weight:600;
  font-size:clamp(10.5px,.78vw,12.5px);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(246,242,233,.56);
}
.hc-page .hc-inc-list{list-style:none;margin:0;padding:0;}
.hc-page .hc-inc-list li{
  position:relative;padding:0 0 0 20px;margin:0 0 10px;
  font-size:var(--t-body);line-height:var(--lh-body);color:rgba(246,242,233,.72);
}
.hc-page .hc-inc-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold-dim);
}
.hc-page .hc-inc-list b{color:var(--cream);font-weight:600;}
.hc-page .hc-inc-lead{
  padding:12px 14px 12px 20px;margin-bottom:14px;
  background:rgba(199,164,93,.10);border-left:2px solid var(--grid);
}
.hc-page .hc-inc-lead::before{display:none;}
.hc-page .hc-why{
  margin:clamp(20px,2.6vw,28px) 0 clamp(20px,2.6vw,28px);
  padding-top:clamp(16px,2vw,22px);border-top:1px solid rgba(246,242,233,.14);
  font-size:var(--t-body);line-height:var(--lh-body);color:rgba(246,242,233,.72);
}
.hc-page .hc-why b{color:var(--grid);font-weight:600;}
.hc-page .hc-prem .hc-btn{margin-top:auto;}
.hc-page .hc-prem-foot{
  margin-top:clamp(28px,3.6vw,40px);max-width:80ch;
  font-size:var(--t-mono);line-height:var(--lh-body);color:rgba(246,242,233,.56);
}

/* ============================================================
   CLOSE
   ============================================================ */
.hc-page .hc-close{
  background:var(--bg);border-top:1px solid var(--gold-faint);
  padding:clamp(56px,8vw,112px) 0;
}
.hc-page .hc-close-in{max-width:min(var(--hc-max),74ch);}
.hc-page .hc-close .hc-acts{margin-top:clamp(26px,3.4vw,38px);}

/* ---------- TABLETS — a refinement inside the phone build ----------
   STYLE-GUIDE §0 forbids widening a phone rule to cover all widths, and
   §4 names 640px as a refinement step INSIDE the phone build — which is
   what this is. Between 641 and 980px a single column leaves the suites,
   the sub-suites and the tool lists as one endless ribbon with half the
   screen empty either side; two-up costs nothing and stops the reader
   scrolling past the same card five times. Nothing here is the only
   declaration of its property. */
@media (min-width:641px) and (max-width:980px){
  .hc-page .hc-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hc-page .hc-sub-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hc-page .hc-tools{grid-template-columns:1fr 1fr;}
  .hc-page .hc-plans{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* the third tier is the featured one; on a two-up row it takes the
     full width beneath the other two rather than sitting orphaned */
  .hc-page .hc-plan-feature{grid-column:1/-1;}
  .hc-page .hc-prem-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hc-page .hc-level{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;}
}

/* ============================================================
   DESKTOP — min-width:981px
   Every selector here mirrors one above it. Per STYLE-GUIDE §0 the two
   builds are kept apart: nothing in this block is allowed to be the only
   declaration of a property, so a narrow viewport never inherits a rule
   written for a wide one.
   ============================================================ */
@media (min-width:981px){
  /* hero: copy left, media right, on the same baseline */
  .hc-page .hc-slide-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}

  /* levels: copy left, shot right, the shot pinned near the top of the row
     rather than centred — the copy column is much the taller of the two and
     a centred shot floats in the middle of nothing */
  .hc-page .hc-level{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;}
  .hc-page .hc-level-shot{position:sticky;top:calc(var(--nav-h) + 28px);}
  .hc-page .hc-tools{grid-template-columns:1fr 1fr;}

  /* the panel puts its identity beside its copy, as the reference does */
  .hc-page .hc-panel-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);align-items:start;}
  .hc-page .hc-sub-grid{grid-template-columns:repeat(3,minmax(0,1fr));}

  /* four across, divided by hairlines with a plus on each division */
  .hc-page .hc-cols{grid-template-columns:repeat(4,minmax(0,1fr));}
  .hc-page .hc-col{padding-left:clamp(22px,2.2vw,34px);padding-right:clamp(22px,2.2vw,34px);}
  .hc-page .hc-col:last-child{padding-right:0;}

  /* pricing: three across, all three on one line */
  .hc-page .hc-plans{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* The feature tier used to be lifted 14px above the other two to mark it as
     the recommended one. It read as a card that had slipped rather than one
     singled out, so the lift is gone and the three sit on one line; the ink
     field and the DEEPEST flag already say which is which, and they say it
     without putting the row out of true.

     Kept as an explicit 0 rather than deleted, with the note that cost us an
     afternoon once: do NOT bring the lift back as translateY. .hc-reveal.hc-in
     sets transform:none the moment the card scrolls in, so a transform there
     is silently wiped. If a lift is ever wanted again, it is a margin. */
  .hc-page .hc-plan-feature{margin-top:0;}

  /* the two quoted engines, side by side */
  .hc-page .hc-prem-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* the part head puts its note beside the name rather than under it */
  .hc-page .hc-part{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;}
  .hc-page .hc-part-note{max-width:46ch;text-align:right;}
}

@media (min-width:1280px){
  .hc-page .hc-cols{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ---------- narrow phones ----------
   The two places the layout has to give: the price row's trailing link
   drops to its own line rather than being squeezed, and the spec rows
   stack so a long value is never set three words to a line. */
@media (max-width:420px){
  .hc-page .hc-jump{margin-left:0;width:100%;white-space:normal;}
  .hc-page .hc-sr{flex-direction:column;gap:3px;}
  .hc-page .hc-sr b{text-align:left;}
  .hc-page .hc-acts{flex-direction:column;align-items:stretch;}
  .hc-page .hc-acts .hc-btn{width:100%;}
}

/* ---------- THE BAR, OVER A DARK HERO, ON THE WIDE DESIGN ----------
   style.css paints the bar's marks in --ink and only recolours them to
   cream inside its phone block — which is correct for index.html, whose
   hero is dark on a phone and cream on a desktop. This page's hero is the
   green band at every width, so above 980px the wordmark, the tagline and
   the burger were deep green on deep green and the bar read as missing.

   Only the ink changes. The wide design deliberately strips the bar's
   fill, blur and outline ("Nothing left of the panel"), and putting a pane
   back to carry the contrast would be this page inventing a bar the site
   does not have. Cream on the lightest band is about 11:1, and the band
   only gets darker as the carousel advances.

   Stated for .solid too: the shared script can set that class on scroll,
   and its own rule is an ink override that would undo this one. */
@media (min-width:981px){
  body.hc-page #nav .logo,
  body.hc-page #nav.solid .logo,
  body.hc-page #nav .nav-link,
  body.hc-page #nav.solid .nav-link{color:var(--cream);}
  body.hc-page #nav .burger span,
  body.hc-page #nav.solid .burger span{background:var(--cream);}
}

/* ============================================================
   SANJAY ON A PHONE — THE CARD COMES UP UNDER THE NAME
   ------------------------------------------------------------
   Stacked, the shot is the last thing in the article, so the clip sat
   below the price row: you met Sanjay, read eight lines about him and
   only then saw him. On a phone the picture should introduce the copy,
   not conclude it.

   The card cannot simply be moved in the markup, because the header it
   has to follow — the name and the role line — lives INSIDE
   .hc-level-body while the shot is that div's sibling. order only sorts
   items of one formatting context, so the wrapper hands its children up
   with display:contents and all of them, shot included, become items of
   the article's own grid. Then order puts them in reading order.

   row-gap goes to 0 in the same breath. .hc-level carries a 26-52px gap
   for the two columns it has on a wide screen; applied between what are
   now nine stacked items it would push every paragraph apart. The
   children already space themselves with margin-top — that is how they
   have always been spaced inside the wrapper — so with the gap off the
   rhythm is exactly what it was, and the card brings its own margins.

   Only this level. Vidur and Narad keep their portrait at the foot,
   which is right for a still.
   ============================================================ */
@media (max-width:640px){
  .hc-page .hc-level-film{row-gap:0;}
  .hc-page .hc-level-film .hc-level-body{display:contents;}

  .hc-page .hc-level-film .hc-level-id{order:1;}
  .hc-page .hc-level-film .hc-level-role{order:2;}
  .hc-page .hc-level-film .hc-level-shot{order:3;}
  .hc-page .hc-level-film .hc-gloss{order:4;}
  .hc-page .hc-level-film .hc-origin{order:5;}
  .hc-page .hc-level-film .hc-copy{order:6;}
  .hc-page .hc-level-film .hc-toolset{order:7;}
  .hc-page .hc-level-film .hc-price-row{order:8;}

  /* its own breathing room, since the grid no longer provides any */
  .hc-page .hc-level-film .hc-level-shot{
    margin:clamp(20px,5vw,30px) 0 clamp(4px,1.5vw,10px);
  }
}