/* ==========================================================================
   NetrAI — How we work, as pinned cards
   --------------------------------------------------------------------------
   Ported from the React <HowItWorks> component. Kept: the pin glyph over each
   card, the paper-card-on-a-board look (white card, padded, holding a tinted
   inner panel), the alternating left/right scatter with opposing rotations,
   the hand-drawn step number, the ruled-paper background, and the dashed
   connector that runs between the cards and travels on a loop.

   FOUR DEPARTURES, AND WHY

   1. NO framer-motion. The connector's only animation is `strokeDashoffset`
      cycling by one dash period, which is four lines of CSS keyframes. The
      component pulls in LazyMotion + domAnimation to do it, and this site has
      no motion library — adding ~18 KB to move a dashed line would be the
      most expensive decoration on the page.

   2. THE POSITIONS ARE A GRID, NOT `position: absolute` AT FIXED PIXELS. The
      component parks each card at a hardcoded top offset (0, 120, 450, 570,
      850) inside a container whose height is also hardcoded per card count.
      That only holds at one type size: our step descriptions are longer than
      its placeholders, so cards grew past their slots and collided. Same
      scatter, same rotations, built from a two-column grid with row offsets —
      it cannot overlap no matter how long the copy runs.

   3. THE PALETTE. The component cycles orange / blue / purple. This site's
      rule is one chromatic interactive colour, so the four steps run
      blue -> indigo -> teal -> blue, all drawn from the ambient mesh, and the
      accent stays reserved for things you can click.

   4. `font-handwriting` falls back to Comic Sans in the component. That is a
      joke a client's site cannot make, so the step numeral is the display
      face at its largest weight instead — still the loudest thing in the
      card, which is the job it was doing.
   ========================================================================== */

.hiw {
  position: relative;
  overflow: hidden;
}

/* ---- the ruled board ---------------------------------------------------
   The component paints 32px horizontal rules at 8% (light) and 15% (dark),
   then fades both halves out with two `from-background` gradients. Same two
   layers, one element. */
.hiw-rules {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--hiw-rule) 1px, transparent 1px);
  background-size: 100% 32px;
  margin-top: 4px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 45%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 45%, #000 30%, transparent 78%);
}
:root { --hiw-rule: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] { --hiw-rule: rgba(255, 255, 255, 0.10); }

.hiw-inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-inline: auto;
}

/* ---- the scatter -------------------------------------------------------
   Two columns. Odd steps sit left, even steps right, and every card after the
   first is pulled up so the column interleaves rather than stacking in pairs.
   That negative margin is what produces the component's staircase. */
.hiw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  position: relative;
}
@media (min-width: 861px) {
  .hiw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 90px between the columns, not 40. At 40 the two cards' boxes finished
       8px apart — and then each is rotated, so the corners crossed and the
       pair read as one collision rather than two pinned notes. */
    gap: 40px 90px;
    /* THE ONE THAT MATTERED. A grid stretches its items to the row height by
       default, so card 01 — whose row is tall because card 02 hangs 72px
       lower — grew to 403px while its tinted panel stayed 250px. The result
       was a white sheet with a third of its height empty below the copy, on
       every odd card. `start` lets each sheet size to what is inside it. */
    align-items: start;
  }
  .hiw-card { width: 300px; }
  /* 6deg -> 4.5deg. With the columns further apart the tilt no longer has to
     fight for room, and a shallower angle keeps the copy easier to read
     while still looking pinned rather than placed. */
  .hiw-card:nth-child(odd)  { grid-column: 1; justify-self: end;   transform: rotate(-4.5deg); }
  .hiw-card:nth-child(even) { grid-column: 2; justify-self: start; transform: rotate(4.5deg); }
  /* Row offsets only, never negative. A negative top margin on the first
     card of row two pulls it back into row one's band, and since the two
     columns are independent it lands on top of card one — measured as a real
     overlap before this changed. Positive offsets stagger the same way and
     the grid guarantees the rows cannot collide. */
  .hiw-card:nth-child(2) { margin-top: 72px; }
  .hiw-card:nth-child(3) { margin-top: 8px; }
  .hiw-card:nth-child(4) { margin-top: 80px; }
  .hiw-card:nth-child(5) { margin-top: 8px; }
}

/* ---- the card ----------------------------------------------------------
   A white sheet with 8px of padding holding a tinted panel — the component's
   `p-2 rounded-[25px]` outer over a `rounded-[15px] p-[15px]` inner. */
.hiw-card {
  position: relative;
  z-index: 2;
  padding: 8px;
  border-radius: 25px;
  background: var(--surface-white);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -12px rgba(17, 17, 26, 0.22);
  transition: transform 300ms var(--ease-apple), box-shadow 300ms var(--ease-apple);
}
[data-theme="dark"] .hiw-card {
  background: #0f0f12;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
.hiw-card:hover,
.hiw-card:focus-within {
  z-index: 3;
  box-shadow: 0 18px 40px -16px rgba(17, 17, 26, 0.30);
}
@media (min-width: 861px) {
  .hiw-card:nth-child(odd):hover,
  .hiw-card:nth-child(even):hover { transform: rotate(0deg) scale(1.04); }
}

.hiw-pin {
  display: block;
  width: 30px;
  height: 30px;
  margin: 4px auto 12px;
  color: var(--hiw-tone);
}

/* center.css centres everything inside .chapter; a card is a block of copy,
   not a caption. */
.hiw-panel {
  text-align: left;
  border-radius: 15px;
  padding: 16px 15px 18px;
  background: var(--hiw-fill);
  border: 1px solid var(--hiw-edge);
}

.hiw-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  color: var(--hiw-tone);
  margin-bottom: 14px;
}
.hiw-card h3 {
  margin: 0 0 8px;
  font-size: var(--text-heading-sm);
  line-height: 1.05;
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
}
.hiw-card p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--mist);
  text-wrap: pretty;
}

/* ---- the connector -----------------------------------------------------
   One dashed path threaded behind the cards. `stroke-dashoffset` cycles by
   exactly one dash period (8 + 6 = 14, so -140 is ten periods) which is what
   makes the loop seamless rather than snapping at the end.

   `vector-effect: non-scaling-stroke` matters: the SVG is stretched with
   preserveAspectRatio="none" to cover the grid, so without it the dashes
   would be squashed along one axis. */
.hiw-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: none;
  overflow: visible;
}
@media (min-width: 861px) { .hiw-path { display: block; } }
.hiw-path path {
  fill: none;
  stroke: var(--hiw-stroke);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
  animation: hiw-travel 3s linear infinite;
}
:root { --hiw-stroke: rgba(0, 0, 0, 0.20); }
[data-theme="dark"] { --hiw-stroke: rgba(255, 255, 255, 0.22); }
@keyframes hiw-travel { to { stroke-dashoffset: -140; } }

/* ---- the four tones ---------------------------------------------------- */
.hiw-card[data-tone="1"] { --hiw-tone: #0071e3; --hiw-fill: rgba(0, 113, 227, 0.07);  --hiw-edge: rgba(0, 113, 227, 0.16); }
.hiw-card[data-tone="2"] { --hiw-tone: #5856d6; --hiw-fill: rgba(88, 86, 214, 0.07);  --hiw-edge: rgba(88, 86, 214, 0.16); }
.hiw-card[data-tone="3"] { --hiw-tone: #12a594; --hiw-fill: rgba(18, 165, 148, 0.07); --hiw-edge: rgba(18, 165, 148, 0.16); }
.hiw-card[data-tone="4"] { --hiw-tone: #2997ff; --hiw-fill: rgba(41, 151, 255, 0.07); --hiw-edge: rgba(41, 151, 255, 0.16); }
[data-theme="dark"] .hiw-card[data-tone="1"] { --hiw-tone: #2997ff; --hiw-fill: rgba(41, 151, 255, 0.10); --hiw-edge: rgba(41, 151, 255, 0.20); }
[data-theme="dark"] .hiw-card[data-tone="2"] { --hiw-tone: #8b89ff; --hiw-fill: rgba(88, 86, 214, 0.14);  --hiw-edge: rgba(88, 86, 214, 0.24); }
[data-theme="dark"] .hiw-card[data-tone="3"] { --hiw-tone: #2bc8c4; --hiw-fill: rgba(43, 200, 196, 0.10); --hiw-edge: rgba(43, 200, 196, 0.20); }
[data-theme="dark"] .hiw-card[data-tone="4"] { --hiw-tone: #6cb8ff; --hiw-fill: rgba(41, 151, 255, 0.10); --hiw-edge: rgba(41, 151, 255, 0.20); }

/* ---- phones ------------------------------------------------------------
   No scatter, no rotation, no connector: one column of upright cards. A
   rotated card on a 390px screen is a card with less usable width. */
@media (max-width: 860px) {
  .hiw-card { transform: none; width: auto; }
  .hiw-rules { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-path path { animation: none; }
  .hiw-card { transition: none; }
  .hiw-card:hover { transform: none; }
}