/* ================= homepage specific premium styles ================= */
    .h-wrap {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 24px;
    }

    @media(max-width: 640px) {
      .h-wrap {
        padding: 0 18px;
      }
    }

    /* ---- reveal system ----
       Plates stand up rather than slide: the origin sits on the bottom
       edge, so a card arrives like paper being lifted off a desk.

       Gated on html.motion-ready (set by assets/motion.js) and kept here only
       to override the shared rule's stagger delay — this page drives its own
       .rv observer. If the motion layer never loads, nothing is hidden. */
    html.motion-ready .rv {
      opacity: 0;
      transform: perspective(1000px) translate3d(0, 30px, 0) rotateX(8deg) scale(0.985);
      transform-origin: 50% 100%;
      transition: opacity 0.62s var(--ease-out-strong), transform 0.8s var(--ease-out-strong);
      transition-delay: 0s;
      backface-visibility: hidden;
    }

    html.motion-ready .rv.in {
      opacity: 1;
      transform: none;
    }

    @media(prefers-reduced-motion: reduce) {
      html.motion-ready .rv {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* ---- hero ---- */
    .h-hero {
      position: relative;
      padding: 86px 0 104px;
      overflow: hidden;
      perspective: 1500px;
      perspective-origin: 64% 30%;
      background:
        radial-gradient(ellipse at 78% 12%, rgba(124, 58, 237, 0.13) 0%, transparent 55%),
        radial-gradient(ellipse at 12% 88%, rgba(107, 59, 167, 0.09) 0%, transparent 55%);
    }

    /* copy and the object share one stage; the object only takes its own
       column once there is room for it (see the breakpoints below) */
    .h-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 44px;
    }

    .h-copy {
      min-width: 0;
    }

    /* ---- the object: one composition, two scales ----

       A sheet of paper — the compound plan — with the inspection panel
       resting on it and the seal pressed over its top-right corner. Both
       breakpoints share this structure and these placement rules; they
       differ only in the values the two media queries set (--seal, --gutter
       and the turns). That is the whole point: a plate's place is written
       once and a breakpoint scales it, so the desktop scene and the phone
       composition cannot drift apart as either one is edited.

       The stage's padding IS the composition — it is the paper's bleed.
       --seal-band is the strip of plan the seal sits in, derived from the
       seal's own size so the two can never cross however either is scaled;
       --gutter is the plan showing beside the panel; --foot the strip under
       it. The panel is in flow between those gutters, so its height is the
       object's height and no magic min-height is involved anywhere.

       Padding rather than margins on the panel because a child's top margin
       collapses out of this stage, which would drag the whole composition —
       and every plate placed against it — down the page.

       The whole story — what each plate is for, why the light comes from the
       upper left, the numbers that keep the two scales in step and the house
       rules — is in dev/hero-object.md. Read it before editing this. */
    /* The four values the stage's padding is written in are registered here as
       lengths, which is not decoration. An unregistered custom property keeps
       its token stream, so a hand-set `--seal-over: 0` — the obvious way to
       say "no overhang" — is not a length to anything reading it:
       `calc(var(--gutter) + var(--seal-over))` stops parsing, and because that
       padding used to be ONE declaration built from all four, the declaration
       went invalid at computed-value time and the browser dropped the whole
       composition's padding to zero. Registered, `0` is 0px here, and a value
       that still is not a length falls back to the initial 0px instead of
       poisoning everything that reads it. The padding below is written as four
       longhands for the same reason: a browser that does not know @property
       loses one edge to a bad value, never the object. */
    @property --gutter    { syntax: '<length>'; inherits: true; initial-value: 0px; }
    @property --seal-over { syntax: '<length>'; inherits: true; initial-value: 0px; }
    @property --seal-band { syntax: '<length>'; inherits: true; initial-value: 0px; }
    @property --foot      { syntax: '<length>'; inherits: true; initial-value: 0px; }

    .h-scene {
      position: relative;
      min-height: 0;
      perspective: 1500px;
      /* one vanishing point at both scales. The desktop's 62% served a scene
         with the copy beside it, but this composition IS the column, and an
         off-centre origin is what turns a small turn into a lopsided card —
         the near edge eaten and the far edge overhanging. */
      perspective-origin: 50% 40%;

      --seal: 156px;                          /* the seal's diameter; its type, its rules and its ring follow it */
      --gutter: 30px;                         /* plan showing beside the panel */
      --seal-over: calc(var(--seal) * .1);    /* how far the seal crosses the paper's edge */
      --seal-band: calc(var(--seal) + 8px);   /* the strip of plan above the panel */
      --foot: calc(var(--seal) * .22);        /* plan showing under the panel */
      /* The plates' turns. ONE light: the sheet faces one way, the card above
         it is nearly parallel to it, and the seal is the single disc turned
         in the hand. The desktop's paper rotateY(15deg) against a panel
         rotateY(-13deg) was two objects facing away from each other. */
      --paper-turn: rotateY(9deg) rotateX(2deg) rotateZ(-1deg);
      --panel-turn: rotateY(5deg) rotateX(1deg);
      --seal-turn: rotateY(-13deg) rotateX(10deg) rotateZ(-8deg);
      --seal-in: rotateY(-26deg) rotateX(34deg) rotateZ(-8deg);
      /* ONE light for the object, keyed from its upper left — the seal's own
         glint sits at 30% 22% — so every shadow falls down and to the RIGHT
         by this much. All three plates read their x-offset from it, which is
         what stops a plate being re-lit on its own: the paper, the panel and
         the seal cannot disagree about where the light is, and the phone
         scale can shorten the throw without turning the light around. */
      --lit: 16px;
    }

    .h-scene-stage {
      position: relative;
      /* the right pad carries --seal-over as well: the paper is inset by it
         (see .h-blueprint) and the seal crosses the paper's edge by it, so
         the two land together on the scene's own right edge — which is the
         page gutter this column already sits in.

         Four longhands rather than one shorthand, deliberately, and the same
         four values in the same order: a shorthand is a single declaration,
         so a value it cannot use takes the OTHER three edges down with it — a
         unitless `--foot: 24` used to leave the stage with no padding at all
         and the composition gone. Written this way the damage is the edge that
         was named, which is what "derived" has to mean if a reader is allowed
         to poke at one of these values. */
      padding-top: var(--seal-band);
      padding-right: calc(var(--gutter) + var(--seal-over));
      padding-bottom: var(--foot);
      padding-left: var(--gutter);
      transform-style: preserve-3d;
    }

    /* each depth layer keeps the stage's 3D chain intact, so the plates
       inside it are drawn in the scene's perspective rather than flattened
       into an orthographic squash */
    .h-blueprint,
    .h-stampwrap,
    .h-ticketwrap {
      transform-style: preserve-3d;
    }

    /* Ambient life is opacity-only on purpose: motion.js owns every
       transform on the stage, so the aurora must not compete for one. */
    .h-aurora {
      position: absolute;
      inset: -20% -18% -8% -14%;
      pointer-events: none;
      background:
        radial-gradient(52% 48% at 62% 38%, rgba(139, 92, 246, 0.22), transparent 70%),
        radial-gradient(48% 44% at 30% 72%, rgba(59, 130, 246, 0.11), transparent 70%);
      filter: blur(30px);
      animation: auroraPulse 9s ease-in-out infinite;
    }

    /* the paper — the compound plan the panel rests on and the seal is
       pressed against. It fills the stage's bleed box, inset by --seal-over
       on the right only, so the plan IS what the panel's gutters show and
       the seal can cross its edge and still land inside the column. One
       rectangle: there is no second outline to fall out of step with it. */
    .h-blueprint {
      position: absolute;
      inset: 0 var(--seal-over) 0 0;
      width: auto;
    }

    .h-blueprint-in {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      /* the frame and the grid are what make this a plan rather than a
         rectangle drawn on the background: at 30% and 6% the sheet read as a
         tinted box, which is the one thing the panel rests on. Both go a step
         up, still far enough under the panel's own type to stay behind it. */
      border: 1.5px dashed rgba(124, 58, 237, 0.40);
      background:
        linear-gradient(rgba(124, 58, 237, 0.085) 1px, transparent 1px) 0 0 / 100% 24px,
        linear-gradient(90deg, rgba(124, 58, 237, 0.085) 1px, transparent 1px) 0 0 / 24px 100%,
        rgba(255, 253, 250, 0.72);
      transform: var(--paper-turn);
      /* a sheet lying on the page, said in one soft tinted shadow falling with
         the light: the old plan had none of the card elevation, so it read as
         a rectangle drawn on the background rather than as paper on it */
      box-shadow:
        var(--bezel),
        var(--lit) 34px 60px -34px rgba(74, 40, 120, 0.45);
    }

    .h-bp-lbl {
      position: absolute;
      left: 15px;
      top: 12px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(107, 59, 167, 0.66);
    }

    /* the plan's one landmark: the gate the walk is measured from, drawn as a
       ringed pin with its name under it. It used to be a bare dot whose halo
       was the most saturated thing on the paper while meaning nothing, and it
       sat at 44% of a sheet that is a different shape at each scale — now it
       rests on the band's centre line at both. */
    .h-bp-pin {
      position: absolute;
      left: 46%;
      top: calc(var(--seal-band) / 2 - 8px);
      width: 15px;
      height: 15px;
      transform: translateX(-50%);
      border-radius: 50%;
      border: 2px solid var(--stamp-vibrant);
      background: rgba(255, 255, 255, 0.9);
      box-shadow:
        0 0 0 6px rgba(124, 58, 237, 0.09),
        calc(var(--lit) * .2) 5px 12px -3px rgba(124, 58, 237, 0.42);
    }

    .h-bp-pin::after {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background: var(--stamp-vibrant);
    }

    .h-bp-cap {
      position: absolute;
      left: 46%;
      top: calc(var(--seal-band) / 2 + 13px);
      transform: translateX(-50%);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(107, 59, 167, 0.5);
    }

    /* the seal: pressed over the plan's top-right corner, so the one plate
       that is a stamped disc rather than a sheet is what breaks the paper's
       rectangle. It crosses both edges by --seal-over: horizontally because
       the PAPER is the thing inset by it (see .h-blueprint), so the disc hangs
       past the sheet and the composition still ends on the page's gutter,
       vertically because a stamp set on a corner is exactly the thing that
       overshoots it. */
    .h-stampwrap {
      position: absolute;
      top: calc(-1 * var(--seal-over));
      right: 0;
      width: var(--seal);
      height: var(--seal);
    }

    /* the panel: the four facts, resting on the paper. In flow between the
       stage's own gutters, so its height is the object's height. */
    .h-ticketwrap {
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      width: auto;
      margin: 0;
    }

    .h-ticket {
      border-radius: 16px;
      padding: 19px 22px 15px;
      background: var(--plate);
      border: 1px solid var(--edge);
      transform: var(--panel-turn);
      /* a card floating above the sheet: the shared elevation plus a tight
         contact shadow, so the paper stays readable right up to the edge */
      /* two shadows, because a card on a sheet casts two: a tight contact one
         the width of the panel's own edge, and the wide one that lifts it off
         the paper. Both fall with the light, so the card sits on the sheet
         instead of hovering with a shadow of its own invention */
      box-shadow:
        var(--bezel),
        calc(var(--lit) * .38) 3px 9px -3px rgba(24, 14, 40, 0.13),
        var(--lit) 26px 50px -24px rgba(60, 30, 100, 0.45);
    }

    .h-ticket-hd {
      display: block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--stamp-vibrant);
      margin-bottom: 10px;
    }

    .h-ticket ul {
      list-style: none;
    }

    .h-ticket li {
      display: flex;
      align-items: baseline;
      gap: 12px;
      padding: 7px 0;
      border-top: 1px solid rgba(226, 217, 206, 0.7);
      font-size: 13.5px;
      line-height: 1.4;
    }

    .h-ticket li:first-child {
      border-top: none;
    }

    .h-ticket li b {
      font-family: var(--display);
      font-weight: 700;
      color: var(--ink);
      min-width: 60px;
      letter-spacing: -.01em;
    }

    .h-ticket li span {
      color: var(--mid);
    }

    .h-eyebrow {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--stamp);
      margin-bottom: 28px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: rgba(124, 58, 237, 0.08);
      border-radius: 20px;
      border: 1px solid rgba(124, 58, 237, 0.18);
      backdrop-filter: blur(8px);
    }

    .h-eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--stamp-vibrant);
      display: inline-block;
      box-shadow: 0 0 10px var(--stamp-vibrant);
    }

    .h-h1 {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(44px, 9.6vw, 86px);
      line-height: .95;
      letter-spacing: -.04em;
      max-width: 12ch;
      margin-bottom: 28px;
      text-wrap: balance;
    }

    .h-h1 .ln {
      display: block;
      overflow: hidden;
    }

    .h-h1 .ln i {
      display: block;
      font-style: normal;
      transform: translateY(105%);
      animation: rise 0.95s var(--ease-spring) forwards;
    }

    .h-h1 .ln:nth-child(2) i {
      animation-delay: .1s;
    }

    .h-h1 .ln:nth-child(3) i {
      animation-delay: .2s;
    }

    .h-h1 em {
      font-style: normal;
      background: linear-gradient(135deg, var(--stamp) 0%, var(--stamp-vibrant) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    @keyframes rise {
      to {
        transform: none;
      }
    }

    .h-lede {
      font-size: clamp(17.5px, 2.3vw, 21px);
      line-height: 1.58;
      color: var(--body-c);
      max-width: 44ch;
      margin-bottom: 38px;
      opacity: 0;
      animation: fadeUp 0.85s var(--ease-spring) 0.42s forwards;
      text-wrap: pretty;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(18px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .h-doors {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeUp 0.85s var(--ease-spring) 0.55s forwards;
    }

    .h-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16.5px;
      font-weight: 700;
      padding: 17px 30px;
      border-radius: 10px;
      text-decoration: none;
      border: 2px solid var(--stamp);
      transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease, background 0.25s ease;
    }

    .h-btn:active {
      transform: scale(0.965);
    }

    .h-p {
      background: linear-gradient(135deg, var(--stamp) 0%, var(--stamp-vibrant) 100%);
      color: #fff;
      border: none;
      box-shadow: 0 8px 24px var(--stamp-glow);
    }

    .h-p:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 32px rgba(124, 58, 237, 0.4);
    }

    .h-s {
      background: var(--glass-bg-light);
      backdrop-filter: blur(10px);
      color: var(--stamp-vibrant);
      border-color: rgba(124, 58, 237, 0.3);
    }

    .h-s:hover {
      transform: translateY(-3px);
      background: var(--stamp-soft);
      border-color: var(--stamp-vibrant);
    }

    .h-third {
      margin-top: 24px;
      font-size: 15px;
      opacity: 0;
      animation: fadeUp 0.85s var(--ease-spring) 0.68s forwards;
    }

    .h-third a {
      color: var(--stamp);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 4px;
      display: inline-block;
      padding: 6px 0;
    }

    /* the seal: minted rather than printed — a rim, a soft inner falloff, a
       glint off its upper-left and a real cast shadow, all at a slight tilt.
       Its type, its rules and its inner ring are sized from --seal, so the
       phone's seal is the same seal smaller rather than a second one with
       its own numbers; the clamp floors are where legibility stops scaling
       (at 108px the old fixed 20px INSPECTED was wider than the ring it sits
       in). */
    .h-stamp {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 3px solid var(--stamp-vibrant);
      color: var(--stamp-vibrant);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
      background: linear-gradient(150deg, #FFFFFF 0%, #F5EEE5 55%, #E8DFF6 100%);
      box-shadow:
        var(--bezel),
        inset 0 -8px 16px rgba(107, 59, 167, 0.14),
        calc(var(--lit) * .62) 18px 36px -16px rgba(74, 40, 120, 0.5);
      transform: var(--seal-turn);
      animation: coinIn 0.9s var(--ease-out-strong) 0.34s both;
    }

    /* the light: a glint off the disc's upper-left, so the seal is lit from
       the same side every shadow on this object falls */
    .h-stamp::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(40% 36% at 30% 22%, rgba(255, 255, 255, 0.9), transparent 72%);
      opacity: .8;
    }

    .h-stamp::after {
      content: "";
      position: absolute;
      inset: clamp(6px, calc(var(--seal) * .057), 11px);
      border: 1.5px solid var(--stamp-vibrant);
      border-radius: 50%;
      opacity: .45;
    }

    .h-stamp b {
      font-size: clamp(9px, calc(var(--seal) * .0625), 12px);
      font-weight: 800;
      letter-spacing: .2em;
      display: block;
    }

    .h-stamp strong {
      font-family: var(--display);
      /* .128 of the diameter is the widest the word can be and still sit
         inside the inner ring: at .153 its ends rode over it at BOTH scales,
         which is what made the seal read as cramped rather than minted */
      font-size: clamp(13px, calc(var(--seal) * .128), 27px);
      font-weight: 800;
      letter-spacing: -.02em;
      display: block;
      margin: 4px 0;
    }

    .h-stamp span {
      font-size: clamp(9px, calc(var(--seal) * .0625), 12px);
      letter-spacing: .14em;
      display: block;
      font-variant-numeric: tabular-nums;
    }

    .h-stamp hr {
      width: clamp(50px, calc(var(--seal) * .45), 80px);
      border: none;
      border-top: 1.5px solid var(--stamp-vibrant);
      opacity: .5;
      margin: 0;
    }

    /* the seal turns to face the reader as it lands. One keyframe for both
       scales: the turns are variables, so the phone lands on its own resting
       angle instead of on a rotateX(12deg) chosen for a scene seen from
       below — which on a phone read as a card falling over backwards. */
    @keyframes coinIn {
      0% {
        opacity: 0;
        transform: var(--seal-in) scale(1.18);
      }

      100% {
        opacity: 1;
        transform: var(--seal-turn) scale(1);
      }
    }

    @keyframes auroraPulse {
      0%,
      100% {
        opacity: .5;
      }

      50% {
        opacity: .95;
      }
    }

    @media(min-width: 940px) {
      .h-hero-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
        gap: 44px;
        align-items: center;
      }

      /* the headline only wraps where it should: each line of the h1 is
         a mask for its own rise, so a second wrap inside a line would
         break the effect */
      .h-h1 {
        font-size: clamp(44px, 5.2vw, 72px);
        max-width: none;
      }

      /* the desktop scale: a bigger seal and a wider gutter. The band, the
         overhang and the foot are all derived from --seal (see .h-scene), so
         the two scales cannot disagree about the composition — there is
         nothing here to keep in step with the phone but the seal itself. */
      .h-scene {
        --seal: 156px;
        --gutter: 30px;
      }
    }

    @media(max-width: 939px) {
      .h-hero {
        /* The object keeps its own band below the copy instead of floating
           over it: nothing decorative can ever sit on top of a link, a
           button or a line of text, so the hero only needs the gutter that
           band actually takes. */
        padding-bottom: 56px;
      }

      /* Below the split the object is the same composition, scaled — the same
         three plates in the same arrangement, laid out by the same rules,
         because it IS the same rules. Only the sizes and the turns differ
         here, and the band, the seal's overhang and the foot are derived from
         --seal, so there is nothing in this block to keep in step with the
         desktop scene beyond the seal's own size. Width is capped so a 900px
         tablet does not stretch a four-row panel across the screen.

         What cannot be shared is the depth: the motion layer writes each
         plate's translateZ inline from data-z, and a depth offset belongs to a
         scene with a pointer to move it. There is none here, so the offset
         would survive only as a distortion — the panel magnified 5% out of a
         313px box, the plan shrinking 2%, which is what ate the plan's
         margin. The plates are pages in a stack on a phone, so the layer gets
         no say in where they sit; the !important is because the value being
         overridden is an inline style, not a rule. It covers the wrappers
         only — the seal's own turn and the plan's turn sit on elements below
         them and keep the scene's perspective. */
      .h-scene {
        --seal: 108px;
        --gutter: 15px;
        /* the small turn on the panel is the one thing that keeps a card on a
           phone from reading as printed on the page, and a 9deg sheet in a
           342px column would be a perspective drawing rather than paper */
        --paper-turn: rotateY(3.5deg) rotateZ(-.8deg);
        --panel-turn: rotateY(2.5deg);
        --seal-turn: rotateZ(-7deg) rotateY(-9deg);
        --seal-in: rotateZ(-7deg) rotateY(-24deg);
        /* the same light at a shorter throw: a 152px-wide sheet casts a
           narrower shadow than a 424px one, and a 16px offset here would
           read as the whole composition leaning */
        --lit: 8px;
        max-width: 440px;
        margin: 2px 0 0;
        pointer-events: none;
      }

      .h-blueprint,
      .h-stampwrap,
      .h-ticketwrap {
        transform: none !important;
      }

      /* the wash was drawn for a wide, dark hero and would tint the panel;
         the paper's own tinted shadow is what lifts it off the page here */
      .h-aurora {
        display: none;
      }

      /* rows tightened the way the 760px block tightens the page's cards: less
         padding and a narrower label column, so four facts stay on four lines
         instead of eight */
      .h-ticket {
        padding: 17px 17px 13px;
        /* the same two shadows as the desktop card, at this scale's lighter
           elevation and with the light still falling to the right */
        box-shadow:
          var(--bezel),
          calc(var(--lit) * .38) 2px 7px -2px rgba(24, 14, 40, 0.13),
          var(--lit) 18px 36px -20px rgba(60, 30, 100, 0.42);
      }

      .h-ticket li {
        gap: 11px;
      }

      .h-ticket li b {
        min-width: 56px;
      }

      /* The shared layer's scroll-driven drift is an entrance tied to a
         timeline, and the object is in flow here, so mobile keeps one ambient
         motion instead: a slow float that runs off the main thread. Its last
         frame is the resting transform, so the reduced-motion collapse lands
         flat rather than mid-drift. animation-timeline is reset explicitly
         because the shorthand does not always clear it. */
      .h-scene[data-drift] {
        animation: stampFloat 8s ease-in-out infinite;
        animation-timeline: auto;
      }

      @keyframes stampFloat {
        0%,
        100% {
          transform: none;
        }

        50% {
          transform: translate3d(0, -5px, 0);
        }
      }

      .h-doors {
        flex-direction: column;
      }

      .h-doors .h-btn {
        width: 100%;
        text-align: center;
      }

      .h-h1 {
        max-width: none;
      }
    }

    /* ---- open strip ---- */
    .h-strip {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--stamp-soft);
      backdrop-filter: blur(8px);
      padding: 18px 0;
    }

    .h-strip p {
      font-size: 15.5px;
      color: var(--body-c);
      margin: 0;
      font-weight: 500;
    }

    .h-strip b {
      color: var(--stamp-vibrant);
    }

    /* ---- signature dark band section ---- */
    .h-band {
      background: #08060E;
      color: #fff;
      padding: 104px 0 112px;
      position: relative;
      overflow: hidden;
    }

    .h-band::before {
      content: "";
      position: absolute;
      top: -120px;
      right: -120px;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 65%);
      pointer-events: none;
    }

    .h-band::after {
      content: "";
      position: absolute;
      bottom: -100px;
      left: -100px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 65%);
      pointer-events: none;
    }

    .h-band h2 {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(31px, 5vw, 52px);
      line-height: 1.08;
      letter-spacing: -.038em;
      color: #fff;
      max-width: 20ch;
      margin-bottom: 18px;
      text-wrap: balance;
    }

    .h-band .sub {
      font-size: 16px;
      color: #C4B8D1;
      max-width: 56ch;
      margin-bottom: 46px;
      line-height: 1.58;
    }

    .h-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 38px;
      align-items: start;
      /* one vanishing point for the console; the bar wall keeps its own
         nearer perspective so its tracks recede faster */
      perspective: 1200px;
      perspective-origin: 34% 46%;
    }

    @media(max-width: 760px) {
      .h-grid {
        grid-template-columns: 1fr;
        gap: 34px;
      }
    }

    .h-bars .row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .h-bars .k {
      width: 122px;
      flex: none;
      font-size: 14px;
      color: #E0D7E8;
      font-variant-numeric: tabular-nums;
      font-weight: 500;
    }

    /* The wall of bars shares one perspective, so every track recedes
       toward the same vanishing point. Only the track is turned: the
       label and the count stay flat, because those are the numbers
       someone is actually reading. */
    .h-bars {
      perspective: 950px;
      perspective-origin: 10% 50%;
    }

    .h-bars .row {
      transform-style: preserve-3d;
    }

    .h-bars .t {
      flex: 1;
      height: 30px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 24px -16px rgba(0, 0, 0, 0.9);
      transform-origin: left center;
      transform: rotateY(-16deg);
      transition: transform 0.95s var(--ease-out-strong);
    }

    /* arrive tipped away from the reader, then stand up */
    .h-bars.rv:not(.in) .t {
      transform: rotateY(-46deg);
    }

    .h-bars .t i {
      display: block;
      height: 100%;
      width: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      background: var(--stamp);
      border-radius: 8px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
      transition: transform 0.95s var(--ease-out-strong), background 0.3s ease;
    }

    .h-bars .t i.lit {
      background: linear-gradient(90deg, #8B5CF6 0%, #A855F7 100%);
      box-shadow: 0 0 18px rgba(168, 85, 247, 0.5);
    }

    .h-bars .v {
      width: 36px;
      text-align: right;
      flex: none;
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: #fff;
    }

    .h-ctl {
      background:
        radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.1), transparent 62%),
        var(--plate-dark);
      border: 1px solid var(--glass-border-dark);
      border-radius: 16px;
      padding: 30px 28px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 34px 64px -28px rgba(0, 0, 0, 0.8);
      transform-style: preserve-3d;
      transform-origin: right center;
    }

    @media(min-width: 941px) {
      /* the console faces the wall it controls */
      .h-ctl {
        transform: rotateY(-5deg) rotateX(1.5deg);
      }
    }

    .h-ctl .cl {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #C4B5FD;
      margin-bottom: 18px;
    }

    .h-ctl .pv {
      font-family: var(--display);
      font-weight: 800;
      font-size: 52px;
      letter-spacing: -.04em;
      font-variant-numeric: tabular-nums;
      line-height: 1;
      margin-bottom: 22px;
      color: #fff;
      text-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
    }

    .h-ctl input[type=range] {
      width: 100%;
      accent-color: #A855F7;
      height: 44px;
      cursor: pointer;
    }

    .h-out {
      margin-top: 24px;
      font-size: 17px;
      line-height: 1.5;
      color: #EDE5F5;
    }

    .h-out b {
      font-family: var(--display);
      font-weight: 800;
      font-size: 40px;
      color: #fff;
      letter-spacing: -.03em;
      font-variant-numeric: tabular-nums;
      display: block;
      margin-bottom: 4px;
    }

    .h-note {
      margin-top: 22px;
      font-size: 15px;
      line-height: 1.55;
      padding: 16px 20px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #E2D9EC;
    }

    .h-cap {
      margin-top: 34px;
      font-size: 13.5px;
      color: #9A8CA8;
    }

    /* ---- FAQ / SEO cards ---- */
    .faq-grid {
      margin-top: 36px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .faq-card {
      padding: 24px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--line);
    }

    .faq-card h3 {
      font-size: 18px;
      margin-bottom: 8px;
    }

    .faq-card p {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--body-c);
    }

    .faq-note {
      margin-top: 18px;
      font-size: 13.5px;
      color: var(--mid);
      line-height: 1.55;
    }

    /* ---- generic sections ---- */
    .h-sec {
      padding: 104px 0;
      border-bottom: 1px solid var(--line);
    }

    .h-lbl {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--stamp-vibrant);
      padding: 5px 12px;
      border-radius: var(--r-full);
      background: rgba(124, 58, 237, 0.07);
      border: 1px solid rgba(124, 58, 237, 0.16);
      margin-bottom: 24px;
    }

    .h-h2 {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(31px, 4.8vw, 50px);
      line-height: 1.1;
      letter-spacing: -.035em;
      max-width: 22ch;
      margin-bottom: 20px;
      text-wrap: balance;
    }

    .h-sub {
      font-size: 17px;
      line-height: 1.6;
      color: var(--body-c);
      max-width: 68ch;
    }

    /* problem quote */
    .h-quote {
      margin-top: 40px;
      padding: 32px 36px;
      background: var(--surface);
      backdrop-filter: blur(12px);
      border-radius: 16px;
      border: 1px solid var(--line);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    }

    .h-quote p {
      font-size: clamp(19px, 2.6vw, 24px);
      line-height: 1.48;
      font-style: italic;
      color: var(--ink);
      margin-bottom: 16px;
    }

    .h-quote p b {
      font-style: normal;
      color: var(--stamp-vibrant);
    }

    .h-quote cite {
      font-size: 14px;
      color: var(--mid);
      font-style: normal;
      font-weight: 600;
    }

    /* steps */
    .h-steps {
      margin-top: 46px;
      display: grid;
      gap: 16px;
    }

    .h-step {
      background: var(--glass-bg-light);
      backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border-light);
      border-radius: 14px;
      padding: 28px 32px;
      display: flex;
      gap: 24px;
      align-items: flex-start;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
      transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-spring), border-color 0.28s ease;
    }

    .h-step:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 36px rgba(107, 59, 167, 0.08);
      border-color: rgba(124, 58, 237, 0.3);
    }

    .h-step .n {
      font-family: var(--display);
      font-weight: 800;
      font-size: 16.5px;
      color: #fff;
      background: linear-gradient(135deg, var(--stamp) 0%, var(--stamp-vibrant) 100%);
      flex: none;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-variant-numeric: tabular-nums;
      box-shadow: 0 4px 14px var(--stamp-glow);
    }

    .h-step h3 {
      font-family: var(--display);
      font-weight: 700;
      font-size: 21px;
      letter-spacing: -.02em;
      margin-bottom: 7px;
    }

    .h-step p {
      font-size: 15.5px;
      color: var(--mid);
      line-height: 1.58;
      max-width: 66ch;
    }

    /* verification */
    .h-tiers {
      margin-top: 44px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    @media(max-width: 760px) {
      .h-tiers {
        grid-template-columns: 1fr;
      }
    }

    .h-tier {
      background: var(--glass-bg-light);
      backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border-light);
      border-radius: 14px;
      padding: 28px 26px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
      transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-spring), border-color 0.28s ease;
    }

    .h-tier:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    }

    .h-tier.lead {
      border-color: var(--stamp-vibrant);
      border-width: 2px;
      box-shadow: 0 10px 30px var(--stamp-glow);
    }

    .h-badge {
      display: inline-block;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 6px;
      margin-bottom: 18px;
    }

    .h-tier h3 {
      font-family: var(--display);
      font-weight: 700;
      font-size: 19px;
      margin-bottom: 9px;
      letter-spacing: -.018em;
    }

    .h-tier p {
      font-size: 15px;
      color: var(--mid);
      line-height: 1.58;
    }

    .h-promise {
      margin-top: 24px;
      background: linear-gradient(135deg, var(--stamp) 0%, var(--stamp-vibrant) 100%);
      color: #fff;
      border-radius: 16px;
      padding: 32px 36px;
      box-shadow: 0 16px 40px var(--stamp-glow);
    }

    .h-promise h3 {
      font-family: var(--display);
      font-weight: 800;
      font-size: 24px;
      margin-bottom: 12px;
      letter-spacing: -.02em;
    }

    .h-promise p {
      font-size: 16px;
      line-height: 1.62;
      color: #EDE5F5;
      max-width: 72ch;
    }

    .h-promise a {
      color: #fff;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    /* closing dark section */
    .h-close {
      background: #08060E;
      color: #fff;
      padding: 104px 0;
      position: relative;
      overflow: hidden;
    }

    .h-close h2 {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(32px, 5vw, 48px);
      line-height: 1.08;
      letter-spacing: -.04em;
      color: #fff;
      max-width: 18ch;
      margin-bottom: 20px;
      text-wrap: balance;
    }

    .h-close p {
      font-size: 17px;
      color: #C4B8D1;
      max-width: 54ch;
      margin-bottom: 40px;
      line-height: 1.58;
    }

    .h-close .h-p {
      background: #fff;
      color: var(--ink);
      border: none;
    }

    .h-close .h-p:hover {
      box-shadow: 0 12px 36px rgba(255, 255, 255, 0.25);
      background: #f5f5f5;
      transform: translateY(-3px);
    }

    .h-close .h-s {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(8px);
    }

    .h-close .h-s:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: #fff;
      transform: translateY(-3px);
    }

    /* ---- small screens: the same page with room to breathe ----
       At 390px the desktop rhythm (104px between sections, a 122px label
       column beside every bar) leaves the numbers it is showing a squeeze
       and turns four screens of content into eight. These are the same
       values at the scale the screen can hold — nothing is hidden, nothing
       moves out of its place, and the section order is untouched. */
    @media(max-width: 760px) {
      .h-hero {
        padding-top: 56px;
      }

      .h-sec {
        padding: 72px 0;
      }

      .h-band {
        padding: 72px 0 80px;
      }

      .h-close {
        padding: 72px 0;
      }

      .h-band .sub {
        margin-bottom: 32px;
      }

      /* the label column stops competing with the track it labels, but stays
         wide enough that "₦100k – ₦150k" is one line — a wrapped label makes
         the rows uneven and reads as a broken table */
      .h-bars .k {
        width: 106px;
        font-size: 12px;
        letter-spacing: -.01em;
        white-space: nowrap;
      }

      .h-bars .v {
        width: 30px;
        font-size: 12.5px;
      }

      .h-bars .row {
        gap: 10px;
        margin-bottom: 11px;
      }

      .h-bars .t {
        height: 26px;
      }

      .h-ctl {
        padding: 24px 20px;
      }

      .h-ctl .pv {
        font-size: 42px;
      }

      .h-out b {
        font-size: 34px;
      }

      .h-quote {
        padding: 24px 22px;
      }

      .h-quote p {
        font-size: 18.5px;
      }

      .h-step {
        padding: 22px 20px;
        gap: 16px;
      }

      .h-steps {
        margin-top: 34px;
      }

      .h-tier {
        padding: 24px 20px;
      }

      .h-tiers,
      .faq-grid {
        margin-top: 32px;
      }

      .h-promise {
        padding: 24px 22px;
      }

      .h-cap {
        margin-top: 26px;
      }
    }