/* ============================================================
   SECTION 02 — "CUSTOM AUTOMATIONS", as a spread hand of paper slips.
   Chosen from twelve treatments across two rounds on s02b.html (round two,
   option E), founder-locked.

   Replaces: a mono eyebrow, a heading, a lede, six bare NAMES on hairlines and
   a link. The heading promised "turned into rules: when this happens, do this"
   and the section then never showed a single rule — six names is a menu, and a
   reader who did not already know what an automation is learned nothing. Every
   slip here carries a whole rule, written out.

   Round one of the options was rejected entire, and the reason is worth
   keeping: all six were card-and-type layouts, which is what the hero and 01
   already are. This one uses no card and no grid.

   THE GROUND ALTERNATES. The hero runs white → mocha. 01 runs mocha → white.
   This runs white → mocha again. Every section therefore ENDS on the colour the
   next one BEGINS on, so the joins are seamless by construction rather than by
   anyone matching two hex values by eye — which is the failure the marquee band
   took three attempts to stop making.
   ============================================================ */
.sec--hand { background: var(--ramp-down); padding-block: var(--s7);
  /* the ramp ends on #DECBB6, darker than the paper --ink-3/--ink-4 were solved
     against; same scoping as the hero and 01, at a value that clears 4.5:1
     against the darkest point rather than the lightest */
  --ink-3: #585858; --ink-4: #5F5F5F; }
/* CENTRED, founder-directed. The heading and the lede are one unit and are
   centred together — a centred title over a left-ragged paragraph reads as a
   mistake rather than as a choice. The link goes with them for the same reason:
   the hand below is a symmetrical fan, so a left-anchored link under it is the
   only thing in the section with an edge, and it looks like it was missed.
   `margin-inline: auto` as well as `text-align`, because both carry a max-width
   — centring the TEXT inside a box that is still hard against the left gutter
   moves the words and leaves the block where it was. */
.sec--hand h2, .sec--hand .lede { text-align: center; margin-inline: auto; }
.sec--hand .t3__more { display: flex; justify-content: center; }

/* ============================================================
   E — THE HAND.

   Six slips of paper spread across the section like a hand of cards, each one a
   rule written as a single sentence, each at its own angle. Hovering or
   focusing one lifts it clear.

   It is the hero's rotated-card idea taken somewhere it has not been: the hero
   has two cards placed, this has six OVERLAPPING, which reads as "there are
   more of these than we are showing" — exactly what the link underneath says.

   Angles and offsets come from a per-item custom property set in the markup, so
   the spread is data rather than six hand-written rules that drift apart the
   first time one is reordered.
   ============================================================ */
.hand { position: relative; height: 460px; margin-top: var(--s6); }
.hand__s { position: absolute; left: 50%; top: 50%; width: min(280px, 62vw);
  margin-left: calc(var(--x) - 140px); margin-top: -150px;
  transform: rotate(var(--a)); transform-origin: 50% 100%;
  background: #FFFFFF; border-radius: var(--r); padding: var(--s4) var(--s3);
  box-shadow: var(--lift-3); min-height: 260px;
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease); }
.hand__s:hover, .hand__s:focus-within {
  transform: rotate(var(--a)) translateY(-22px); box-shadow: var(--lift-4); z-index: 5; }
.hand__n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--ink-4); }
.hand__b { font-size: var(--t-body); line-height: 1.45; color: var(--ink-3); margin-top: var(--s3); }
.hand__b b { font-weight: 600; color: var(--ink); }


/* the phone-only chrome does not exist on desktop; the inner track generates no
   box, so the fan's absolute positioning still resolves against `.hand` */
.hand__i { display: contents; }
.hand__k, .hand__dots { display: none; }

/* ⚠️ LEFT ON A PHONE, CENTRED ON DESKTOP — founder-directed, "align title and
   description left for the custom automations section".

   Scoped to the phone deliberately. The centring is on the record as a founder
   decision for the desktop composition ("the heading and the lede are one unit
   and are centred together — a centred title over a left-ragged paragraph reads
   as a mistake"), and that argument still holds where the hand is a fan with
   the type sitting over the middle of it. On a phone the section is a rail
   whose cards, count line and dots all start at the left gutter, and a centred
   heading above a left-aligned everything is the mismatch that argument warns
   about, just pointing the other way. */
@media (max-width: 900px) {
  .sec--hand h2, .sec--hand .lede { text-align: left; margin-inline: 0; }
  .sec--hand .t3__more { justify-content: flex-start; }
}

@media (max-width: 900px) {
  /* ⚠️ A CENTRED SWIPE RAIL OF FOUR, not the six-card stack that was here.
     Founder-chosen: design 14 off /s02m.html, after "can't have the longest
     stack in the world" — the stack ran 1760px on a phone for six rules.

     ⚠️ IT IS NOT SCROLL-LINKED. This is a plain scroll container the reader
     swipes, plus a timer in js/rail.js that steps to the next card. Nothing
     here is bound to page-scroll position; that machinery came off this site
     deliberately.

     ⚠️ TWO RULES ARE NOT ON THE PHONE. 04 (the booking confirmation) and 06
     (the stale-job nudge) are hidden — they are the two a reader can most
     easily assume, and the four that stay are the recurring-revenue pair the
     service catalog says to lead with (CP12 renewals, service reminders) plus
     the two money ones. Both live on /automations/, which this section links
     to and which carries all thirteen. Stated here because content that exists
     at one width and not another is a thing to decide, never to discover. */
  /* ⚠️ FULL-BLEED WITH A DEFINITE WIDTH — `100vw` plus `50% - 50vw` of margin,
     not a negative gutter.

     The gutter version looked right and was measurably wrong: `.wrap` carries
     `margin-inline: auto`, and a flex item with auto cross-axis margins is NOT
     stretched by its column container — it is sized to fit-content. So the
     rail's max-content track (1362px of cards) inflated `.wrap` to its 1200px
     max-width inside a 390px screen, and everything centred against a frame
     three times the size of the phone. `overflow-x: auto` did not stop it:
     a scroll container with an INDEFINITE width still contributes its content
     to its parent's intrinsic sizing.
     A definite `100vw` ends that: the rail cannot inflate anything, and the
     margin pulls it out of whatever padding its container happens to have
     rather than out of one specific token. */
  /* the rail sits --s4 under the lede. It was --s5 with a count line between
     them, and removing that line left 96px of nothing where there used to be a
     label. */
  .hand { height: auto; margin-top: var(--s4);
    width: 100vw; margin-inline: calc(50% - 50vw);
    --rl-card: min(78vw, 300px);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .hand::-webkit-scrollbar { display: none; }
  /* ⚠️ LEFT-ALIGNED, founder-directed — the cards start on the same gutter as
     the heading, the lede and the link. That replaced a centred rail, and the
     two numbers that had to change together are this padding and
     `scroll-snap-align` below; the THIRD is in rail.js, which is told the same
     thing by `data-rail-align`. If the script centres what the stylesheet snaps
     to the start, every auto-advance lands half a card out. */
  /* ⚠️ AND TRAILING ROOM, or the LAST card never lands where the others do.
     With a gutter at both ends the rail runs out of scroll before card four
     reaches the left edge — it stops at max-scroll, sitting right-aligned,
     which is the one card that does not obey "align the cards left" and the one
     the auto-advance cannot put in its correct place. The trailing pad is
     exactly the leftover — viewport minus a card minus the gutter — so every
     card, first to last, snaps to the same x. It is 70px at 390 and 110 at 430:
     a sliver of ground after the last card, not a void. */
  .hand__i { display: flex; gap: var(--s3); width: max-content;
    padding-inline: var(--gutter) calc(100vw - var(--rl-card) - var(--gutter)); }
  .hand__s { position: static; flex: 0 0 var(--rl-card); width: auto;
    margin: 0; transform: none; min-height: 0; scroll-snap-align: start; }
  .hand__s:hover, .hand__s:focus-within { transform: none; }
  .hand__s:nth-of-type(4), .hand__s:nth-of-type(6) { display: none; }

  /* ⚠️ THE VISIBLE CARDS ARE RENUMBERED, BY COUNTER. Two of the six are hidden
     here, so the numbers written in the markup read 01, 02, 03, 05 — a rail of
     four with a gap in it, which looks like a card failed to load rather than
     like a chosen set.
     A CSS counter is the fix rather than editing the markup, because the markup
     serves DESKTOP as well, where all six show and 01-06 is correct. And it is
     self-correcting: an element with `display: none` generates no box and does
     not increment, so changing WHICH two are hidden — or hiding none — needs no
     other edit. The numbers cannot disagree with what is on screen.
     `decimal-leading-zero` because the artefact's own numbering is zero-padded
     and 1..4 beside a 01..06 desktop would be a second style of the same thing. */
  .hand__i { counter-reset: hand-rule; }
  .hand__s { counter-increment: hand-rule; }
  .hand__s .hand__n { display: none; }
  .hand__s::before {
    content: counter(hand-rule, decimal-leading-zero);
    display: block; font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; color: var(--ink-4);
  }

  /* ⚠️ A 44px TARGET AROUND A 7px DOT. The mark is small because it is a
     readout, not a control competing with the cards; the thumb still gets the
     whole square. Padding, not a bigger dot. */
  .hand__dots { display: flex; gap: 4px; margin-top: var(--s3); }
  .hand__dots button { appearance: none; -webkit-appearance: none; background: none;
    border: 0; width: 44px; height: 44px; padding: 0; margin-left: -18px;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .hand__dots button:first-child { margin-left: 0; }
  /* ⚠️ HOLLOW VERSUS FILLED, NOT TWO GREYS. Founder: "improve the dots, its
     invisible, the grey". The inactive dot was `--line-2` (#D4D4D4) — a hairline
     colour, solved against white — and these sit at the mocha end of the
     section's ramp, roughly #E6D8C8, where it measures about 1.2:1 and simply is
     not there.
     Two greys were never the right distinction anyway: a ring against a solid
     disc reads at a glance and at any size, where light-grey-versus-dark-grey
     needs the reader to compare. The ring is --ink-4, which measures 4.6:1
     against that ground — SC 1.4.11 asks 3 for a control. */
  .hand__dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: transparent; border: 1.5px solid var(--ink-4);
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
      transform var(--fast) var(--ease); }
  .hand__dots button[aria-current="true"]::before { background: var(--ink);
    border-color: var(--ink); transform: scale(1.15); }
  .hand__dots button:focus-visible { outline: 2px solid var(--brand-hot);
    outline-offset: -8px; border-radius: 50%; }
  @media (prefers-reduced-motion: reduce) { .hand__dots button::before { transition: none; } }
}

/* ============================================================
   THE PARTNER STRIP, AS SECTION 02'S BOTTOM EDGE.
   Founder-directed: moved out from under the dashboard section and given the
   hero band's treatment — "copy that hero marquee design".

   WHAT THAT DESIGN IS, and why each part of it: no label, no painted end fades,
   one 90deg ramp, a hairline on top. The hero band earned every one of those.
   A gradient paints across each element's OWN box, so a label and a band and
   two fades each render a complete ramp at their own width and can never align
   — that is the seam that took three attempts to kill. Drop the label, move the
   fade into the ALPHA CHANNEL as a mask on the CONTAINER, and exactly one
   surface paints the gradient with nothing left to match.

   Masking the container is the part that matters: the container IS the band,
   stationary and exactly the width the stops assume. The track inside starts at
   -43px and is three times wider, so masking that instead puts every stop in
   the wrong coordinate space.

   `margin-top: auto` and the section's zero bottom padding put it flush against
   the section's own edge, which is what makes it read as part of the section
   rather than a ribbon lying between two of them.
   ============================================================ */
.sec--hand { padding-bottom: 0; display: flex; flex-direction: column; }
/* ⚠️ THE BAND ITSELF MOVED TO `site.css`. It was authored here, as home section
   02's bottom edge, and it is now also the bottom edge of the Voice AI page's
   pipeline section — two callers, so it is a site component and lives with
   `.mq`, which it modifies. Copying sixty lines of solved CSS into a second
   stylesheet is how two bands drift apart. */