/* padding was clamp(90px,12vw,170px) top AND bottom, sized for the era when this section led
   with a headline block. That block is gone, so it rendered as up to 170px of empty navy
   above and below the image. The band is full-bleed and carries its own statement, so it
   needs only enough room to separate from its neighbours. */
#auth #process{background:var(--navy);position:relative;overflow:hidden;
  padding:clamp(18px,2.4vw,36px) 0}
  #auth .hw-head{max-width:1180px;margin:0 auto clamp(40px,5vw,72px);padding:0 clamp(20px,5vw,48px)}
  #auth .hw-eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:22px}
  #auth .hw-h{font-size:clamp(32px,5.4vw,66px);font-weight:900;line-height:1.0;letter-spacing:-.035em;color:var(--ink);text-wrap:balance;max-width:18ch}
  #auth .hw-h em{font-style:normal;color:var(--lime)}
  /* full-bleed cinematic band — ultra-wide letterbox, edge to edge */
  #auth .hw-band{position:relative;width:100%;aspect-ratio:1400/600;background:#08080f;overflow:hidden}
  #auth .hw-band video,#auth .hw-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.8) saturate(1.03) blur(.6px);transform:scale(1.04)}
  /* darken + vignette + top/bottom scrims so overlaid text stays readable and it reads filmic */
  #auth .hw-band::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:linear-gradient(180deg,rgba(6,6,12,.68) 0%,rgba(6,6,12,.12) 30%,rgba(6,6,12,.12) 58%,rgba(6,6,12,.92) 100%),
      radial-gradient(120% 82% at 50% 48%,rgba(6,6,12,0) 48%,rgba(6,6,12,.66) 100%)}
  /* film grain to marry the render to the site treatment */
  #auth .hw-band::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.3;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  /* floating caption inside the band, bottom-left */
  #auth .hw-tag{position:absolute;z-index:4;left:clamp(20px,5vw,64px);bottom:clamp(20px,4vw,48px);right:clamp(20px,5vw,64px);
    display:flex;align-items:baseline;gap:clamp(14px,2.2vw,28px);flex-wrap:wrap}
  #auth .hw-no{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--lime);font-variant-numeric:tabular-nums;flex:none;white-space:nowrap;padding-top:4px}
  #auth .hw-cap{font-size:clamp(18px,2.3vw,30px);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:#fff;text-wrap:balance;max-width:24ch;
    text-shadow:0 2px 24px rgba(0,0,0,.6)}
  #auth .hw-cap b{color:var(--lime)}
  /* spacing between the two bands */
  #auth .hw-gap{height:clamp(18px,2.4vw,32px)}
  /* reveal */
  #auth .hw-band.rv{opacity:0;transform:translateY(26px) scale(.995);transition:opacity 1.1s var(--ease-out,cubic-bezier(.22,.61,.36,1)),transform 1.1s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
  #auth .hw-band.rv.in{opacity:1;transform:none}
  @media(max-width:760px){
    /* on phones the ultra-wide letterbox gets too short — relax to a taller cinematic crop */
    #auth .hw-band{aspect-ratio:4/3}
    #auth .hw-cap{max-width:none}
  }

  /* hw-manifesto: four big white lines over the remaining band. Set as a heading rather than a
     caption, since it now carries the whole section. The scrim is strengthened because white type
     has to stay legible over the brighter parts of the photo. */
  /* ⛔⛔ This overlay is position:absolute over a FULL-BLEED band (.hw-band measured 4..1436 at
     1440), so padding alone lands ~110px left of the content column and the headline does not line
     up with any other heading on the page. Measured before/after:
         hero h1 161 · FAQ h2 209 · manifesto 51  <-- adrift
     An absolute overlay inherits no column, so it must REPRODUCE the column arithmetic: the same
     max-width + auto margins .frame uses, then .pad's padding inside that. Do not "fix" this back
     to a bare padding value. */
  /* ⛔ TWO JOBS, TWO ELEMENTS. The overlay paints the scrim and MUST stay inset:0 across the
     full-bleed band — constraining it to the content column left the gradient ending mid-band,
     which reads as a second background. The COLUMN lives on .hw-lines instead, which is what
     needed aligning in the first place. */
  #auth .hw-manifesto{position:absolute;inset:0;display:flex;align-items:center;
    background:linear-gradient(90deg,rgba(11,11,24,.82) 0%,rgba(11,11,24,.55) 46%,rgba(11,11,24,.12) 78%)}
  /* the text column: reproduces .frame's max-width + auto margins and .pad's padding, because an
     absolutely-positioned overlay inherits no content column of its own. */
  #auth .hw-manifesto .hw-lines{width:100%;max-width:var(--max);margin:0 auto;
    padding:clamp(24px,5vw,72px) var(--pad)}
  /* ⛔ ONE source of vertical rhythm. Previously this gap AND .hw-rest{margin-top} both applied,
   so the two headlines sat up to 28px apart while their line-height was ~.98em — they read as
   two unrelated lines rather than one statement. The gap is now a fraction of the shared type
   size (em), so the pair keeps its relationship at every viewport. */
#auth .hw-lines{display:flex;flex-direction:column;gap:.16em}

  /* hw-rotate: skeleton-loading word swap, ported from the agency hero. The slot width is set in
     px by JS per word and transitioned, so the sentence glides rather than snapping as the word
     length changes. */
  #auth .hw-rotate{position:relative;display:inline-block;vertical-align:baseline;min-width:1ch;
    white-space:nowrap;transition:width .78s cubic-bezier(.16,1,.3,1);will-change:width}
  #auth .hw-rotate-word{display:inline-block;white-space:nowrap;
    transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1),
      filter .62s cubic-bezier(.16,1,.3,1);will-change:opacity,transform,filter}
  #auth .hw-rotate.is-loading .hw-rotate-word{opacity:0;transform:translateY(-.16em);filter:blur(2.5px)}
  #auth .hw-rotate.is-entering .hw-rotate-word{opacity:0;transform:translateY(.18em);
    filter:blur(2.5px);transition:none}
  #auth .hw-rotate-skel{position:absolute;left:0;right:0;top:.12em;bottom:.14em;border-radius:.12em;
    pointer-events:none;opacity:0;transform:scaleX(.96);transform-origin:left center;
    background:linear-gradient(100deg,rgba(245,255,171,.10) 25%,rgba(245,255,171,.34) 50%,
      rgba(245,255,171,.10) 75%);background-size:220% 100%;
    transition:opacity .34s ease,transform .34s cubic-bezier(.16,1,.3,1)}
  #auth .hw-rotate.is-loading .hw-rotate-skel{opacity:1;transform:scaleX(1);
    animation:hwRotateShimmer 1.1s linear infinite}
  @keyframes hwRotateShimmer{0%{background-position:200% 0}100%{background-position:-120% 0}}
  /* hw-rotate-fix: direct children only. This rule was written for the old three-line list
     and matched the nested rotate spans too, turning the phrase into its own block above
     the word AI before JS had measured the slot. */
  #auth .hw-lines > span{display:block;color:#fff;font-weight:900;
    font-size:clamp(28px,4.4vw,64px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
  /* the payoff line carries the brand accent instead of a dimmed white, so it reads as the
   reward rather than a fourth instruction. Full opacity: lime on the dark scrim is already
   distinct enough without also dropping it back. */
  #auth .hw-lines .hw-line{white-space:nowrap}
  /* min-width in ch so the slot occupies space on the FIRST paint, before JS measures it;
     without this the phrase has zero width and reflows above the line. */
  #auth .hw-lines .hw-rotate{display:inline-block;min-width:11ch}
  #auth .hw-lines .hw-rotate-word{display:inline-block}
  #auth .hw-lines .hw-rest{color:var(--lime) !important;opacity:1}
  @media(max-width:760px){
    #auth .hw-manifesto{background:linear-gradient(180deg,rgba(11,11,24,.55) 0%,rgba(11,11,24,.86) 100%)}}
  @media(prefers-reduced-motion:reduce){#auth .hw-band.rv{opacity:1;transform:none;transition:none}
    #auth .hw-band video{display:none}#auth .hw-band .hw-vfallback{display:block!important}}