/* =============================================================================
   hyyryn-about-card.css                                       21 Oct 2026 (rp183)
   About, the footer pass's seventh page.

   Sir, 21 Oct 2026: improve each footer page, push it live, then the next.
   Measured (Mason tools/cards.mjs, the walk at 390 and 1440): every container
   square by a rule of 2 Oct ("square, like the rest of Hyyryn", with
   !important), in a site whose cards are now rounded with an edge all round;
   the roadmap's states drawn as a bar along the top (a green rule, a hazard
   stripe); a row lit by a bar down its side when its step is pointed at; and
   on a phone the hero's words written over the name in the lights (the crumb
   and the kicker on the letters). Now:
     - the square rule is retired (hyyryn-about.css, with a note) and the cards
       take the site's grammar: a 22px corner (18 on a phone), an inner ring
       and a near and long shadow; the night cards a light ring; boxes inside a
       card 14px; the register's slip stays square, it is the evidence;
     - the two posts keep their gold frame, now with the mark's own rounded
       top (the logo's posts are rounded at the top);
     - the four steps' numbers are discs; a step pointed at lights its row with
       a tint, never a bar down a side;
     - the roadmap's states are a ring and the dot on the line, not a bar;
     - on a phone and a tablet the hero's words start under the name in the
       lights (the letters sit at 0.43 to 0.58 of the photograph, pinned 40px
       under the bar: their foot is var(--bar) + 40px + 10.1vw).
   The two photographs at the foot stay full width and run into the footer, as
   Sir asked on 2 Oct ("blend into the footer").
   ============================================================================= */
.ab { --ac-r: 22px; --ac-ring: inset 0 0 0 1px rgba(10,22,40,.12), inset 0 1px 0 #FFFFFF;
  --ac-drop: 0 1px 2px rgba(10,22,40,.07), 0 10px 22px -14px rgba(10,22,40,.24), 0 34px 60px -36px rgba(10,22,40,.42); }
@media (max-width: 600px) { .ab { --ac-r: 18px; } }

/* ── the hero on a phone and a tablet: the words under the name in the lights ── */
@media (max-width: 1000px) {
  .ab-hero.ab-hero { padding-top: calc(var(--bar) + 40px + 10.1vw + 28px); }
}

/* ── the two posts and the four steps ── */
.ab-post.ab-post { border-radius: var(--ac-r) var(--ac-r) 12px 12px; overflow: hidden; }
.ab-st2.ab-st2 { border-radius: 14px; }
.ab-st2.ab-st2 i { border-radius: 50%; }
/* the lit row: its bar down the side is taken out at its source (hyyryn-about.css, rp183), the lift and the tint stay */

/* ── the six claims ── */
.ab-bento .ab-b.ab-b { border-radius: var(--ac-r); }
.ab-bento .ab-b:not(.ab-b-flow):not(.ab-b-fee) { box-shadow: var(--ac-ring), var(--ac-drop); }
.ab-bento .ab-b-fee.ab-b-fee { box-shadow: inset 0 0 0 1px rgba(131,99,44,.24), var(--ac-drop); }
.ab-bento .ab-b-flow.ab-b-flow { box-shadow: inset 0 0 0 1px rgba(250,248,243,.12), 0 24px 50px -26px rgba(4,9,15,.6); }
.ab-bento .ab-b-flow.ab-b-flow:hover { box-shadow: inset 0 0 0 1px rgba(212,169,67,.45), 0 24px 50px -26px rgba(4,9,15,.6); }
.ab .ab-b .ab-receipt { border-radius: 14px; }
.ab .ab-fee-try, .ab .ab-flow .node, .ab .ab-flow-hy { border-radius: 14px; }
.ab .ab-mirror .scr { border-radius: 14px; overflow: hidden; }
.ab .ab-mirror .b { border-radius: 4px 12px 12px 12px; }

/* ── five things, never ── */
.ab .ab-never.ab-never { border-radius: calc(var(--ac-r) + 4px); box-shadow: inset 0 0 0 1px rgba(250,248,243,.10), 0 30px 60px -30px rgba(4,9,15,.7); }
/* a refusal's rule is a line under it: square at rest (a rounded corner bends the line), a card when pointed at */
.ab .ab-nlist li { border-radius: 0; }
.ab .ab-nlist li:hover { border-radius: 16px; }
.ab .ab-nvmark { border-radius: 18px; overflow: hidden; }

/* ── where we actually are: a state is a ring and the dot on the line, never a bar ── */
.ab .ab-stop.ab-stop { border-radius: var(--ac-r); }
.ab .ab-stop.is-live { box-shadow: inset 0 0 0 1.5px rgba(15,90,79,.45), var(--ac-drop); }
.ab .ab-stop.is-built { box-shadow: inset 0 0 0 1.5px rgba(131,99,44,.42), var(--ac-drop); }
.ab .ab-stop.is-built::before { display: none; }
.ab .ab-stop.is-explore { border-width: 1.5px; }

@media (forced-colors: active) { .ab .ab-stop.ab-stop { border: 1px solid CanvasText; } }