/* ============================================================
   THE HERO RUN — one workflow, from setting it up to it running.

   Three beats in one frame, told with the components the rest of
   the page already uses rather than new ones:

     1  Claude          .ai-window + the PROCESS.md .ai-card
     2  Stripe          .rn-crm, the third-party tool screen
     3  Askpilot        .sc-app + .rn-sessionview, the run itself

   Everything here is the frame around them and the cross-fade
   between them. The frame is the same object as .hxl-layer and
   .wfi-frame further down the page: solid edge, 28px corner,
   dashed lid broken by the nameplate. Three sightings of one
   thing.

   The lid carries the narration. A state chip on the left and a
   caption on the right say which beat is on screen, so the frame
   is doing a job rather than decorating one.
   ============================================================ */

.hr { display: block; margin-top: 54px; }

/* The stage is a field, not a box. No border, no corner radius, no shadow:
   a faint grid that fades out at every edge, with a survey plus at each
   corner — the same device the hero has always used (see
   .hero-compare-stage and .hero-compare-mark). The window is an object
   placed on a drawing board, and a drawing board has no lid. */
.hr-frame {
    position: relative;
    padding: 62px 44px 44px;
}
/* The grid lives on its own layer so the mask fades only the grid. Masking
   .hr-frame itself would fade the window standing on it. */
/* Starts below the caption rather than at the top edge: a label sitting on
   ruled lines needs a patch behind it to stay readable, and that patch was
   the thing that looked wrong. Clear the lines instead. */
.hr-frame::before {
    content: "";
    position: absolute; top: 46px; left: 0; right: 0; bottom: 0; z-index: 0;
    background-image:
        linear-gradient(rgba(22, 18, 26, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 18, 26, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(102% 100% at 50% 46%,
        #000 34%, rgba(0, 0, 0, 0.45) 68%, transparent 100%);
    mask-image: radial-gradient(102% 100% at 50% 46%,
        #000 34%, rgba(0, 0, 0, 0.45) 68%, transparent 100%);
    pointer-events: none;
}
/* a whisper of the brand where the caption sits, over the grid */
.hr-frame::after {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(52% 210px at 50% 0,
        rgba(213, 59, 213, 0.055), transparent 70%);
    pointer-events: none;
}

/* the survey pegs, at the corners of the field */
.hr-mark {
    position: absolute; z-index: 1;
    width: 17px; height: 17px;
    opacity: 0.45;
    pointer-events: none;
}
.hr-mark::before, .hr-mark::after { content: ""; position: absolute; background: var(--body); }
.hr-mark::before { left: 8px; top: 0; width: 1px; height: 17px; }
.hr-mark::after { left: 0; top: 8px; width: 17px; height: 1px; }
.hr-mark.is-tl { top: 12px; left: 12px; }
.hr-mark.is-tr { top: 12px; right: 12px; }
.hr-mark.is-bl { bottom: 12px; left: 12px; }
.hr-mark.is-br { bottom: 12px; right: 12px; }

/* --- the narration -----------------------------------------------------
   One line above the window saying what is on screen and where: the brand
   mark says where, the words say what.

   It sits on clean cream, not on the grid. An earlier pass floated it over
   the grid on a soft cream halo, and a gradient blob over ruled lines reads
   as a smudge however well it is feathered — so the grid now simply starts
   below the line (see .hr-frame::before) and the label needs no backing at
   all.

   Every caption is in the HTML and all four stay in the DOM: which one shows
   is chosen with opacity, never display, because an element that starts at
   display:none cannot animate.

   The line assembles a word at a time rather than fading in whole. That is
   the whole "something is happening here" signal, and it is carried by the
   type itself, so there is no separate spinner or dot trail sitting beside
   the words looking like debris. */
.hr-state {
    position: absolute; top: 18px; left: 50%; z-index: 3;
    transform: translateX(-50%);
    /* the tallest line sets the height once, so nothing shifts as they swap */
    height: 20px;
    display: block;
    pointer-events: none;
}

.hr-st {
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center;
    gap: 0.44em;
    font-size: 0.75rem; font-weight: 800;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--ink); white-space: nowrap;

    /* the line leaving goes as one piece, and quickly */
    opacity: 0;
    transition: opacity 0.2s ease;
}
.hr-st img { width: 16px; height: 16px; flex: none; }
.hr-st > i { font-style: normal; }

/* the emphasis stays in the markup, but the line is set as one colour */
.hr-st > b { font-weight: 800; color: inherit; }

/* Each word waits its turn. The delay travels as a custom property rather
   than as its own `animation-delay` rule: the on-state below sets the
   animation with a shorthand, and a shorthand resets every longhand it does
   not name — so a lower-specificity `animation-delay` further down would be
   flattened to 0s and every word would land at once. A variable is read by
   the shorthand instead of fighting it. */
.hr-st > * { opacity: 0; transform: translateY(6px); --d: 0s; }
.hr-st > *:nth-child(1) { --d: 0.02s; }
.hr-st > *:nth-child(2) { --d: 0.07s; }
.hr-st > *:nth-child(3) { --d: 0.12s; }
.hr-st > *:nth-child(4) { --d: 0.17s; }
.hr-st > *:nth-child(5) { --d: 0.22s; }
.hr-st > *:nth-child(6) { --d: 0.27s; }
.hr-st > *:nth-child(7) { --d: 0.32s; }
.hr-st > *:nth-child(8) { --d: 0.37s; }

.hr-frame[data-beat="setup"][data-phase="connect"]   .hr-st--connect,
.hr-frame[data-beat="setup"][data-phase="connected"] .hr-st--connected,
.hr-frame[data-beat="setup"][data-phase="build"]     .hr-st--build,
.hr-frame[data-beat="setup"][data-phase="live"]      .hr-st--live,
.hr-frame[data-beat="stripe"]   .hr-st--stripe,
.hr-frame[data-beat="askpilot"] .hr-st--askpilot { opacity: 1; }
.hr-frame[data-beat="setup"][data-phase="connect"]   .hr-st--connect > *,
.hr-frame[data-beat="setup"][data-phase="connected"] .hr-st--connected > *,
.hr-frame[data-beat="setup"][data-phase="build"]     .hr-st--build > *,
.hr-frame[data-beat="setup"][data-phase="live"]      .hr-st--live > *,
.hr-frame[data-beat="stripe"]   .hr-st--stripe > *,
.hr-frame[data-beat="askpilot"] .hr-st--askpilot > * {
    animation: hr-word 0.44s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both;
}

@keyframes hr-word {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* --- the pair: Claude and Askpilot, and the wire between them ----------
   The setup beat is about one thing joining another, so for its first two
   captions the brand mark is a pair rather than a single icon. Three states,
   each true to what the chat underneath is doing at that moment:

     connecting   the marks sit apart; a dashed wire marches from Claude
                  toward Askpilot (the request is out) and the Askpilot
                  mark waits at half strength
     connected    a new line lands: the marks slide together, the wire goes
                  solid magenta and short, the Askpilot mark comes up to
                  full strength and a tick badge pops at the joint
     build        the joined pair, still, so the installed state carries
                  through into "setting up the workflow"

   The join is timed from the caption line arriving, and the line arrives
   on the `connected` phase that js/ai-setup.js fires the instant the
   chat's button says Askpilot connected. Nothing here keeps its own clock. */
.hr-pair {
    position: relative;
    display: inline-flex; align-items: center;
    flex: none;
    margin-right: 0.1em;
}
.hr-pair img { position: relative; z-index: 1; }
.hr-pair-ap { opacity: 0.45; }

.hr-wire {
    position: relative; flex: none; display: block;
    width: 22px; height: 2px; margin: 0 3px;
}
.hr-wire::before, .hr-wire::after {
    content: ""; position: absolute; inset: 0; border-radius: 1px;
}
/* dashed and moving: the request travelling from Claude to Askpilot */
.hr-wire::before {
    background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px);
    background-size: 6px 2px;
    animation: hr-march 0.7s linear infinite;
}
@keyframes hr-march { to { background-position: 6px 0; } }
/* solid: the connection, held */
.hr-wire::after { background: var(--brand-magenta); opacity: 0; }

.hr-pair.is-joined .hr-wire { width: 8px; margin: 0 2px; }
.hr-pair.is-joined .hr-wire::before { opacity: 0; animation: none; }
.hr-pair.is-joined .hr-wire::after { opacity: 1; }
.hr-pair.is-joined .hr-pair-ap { opacity: 1; }

/* the badge at the joint, only on the connected line */
.hr-tick {
    position: absolute; z-index: 2;
    left: 50%; bottom: -5px;
    width: 10px; height: 10px; margin-left: -5px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-magenta); color: #fff;
    box-shadow: 0 0 0 2px var(--cream);
    transform: scale(0);
}
.hr-tick svg { width: 6px; height: 6px; }
.hr-tick::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 1.5px solid var(--brand-magenta);
    opacity: 0;
}

/* The join, played as the connected line lands. Each part starts where the
   connecting line left it, so the swap reads as one motion rather than a cut:
   wire shrinks, dashes fade, solid rises, the mark comes up, the badge pops
   and rings once. Delays stagger after the pair's own word-arrival (0.02s). */
.hr-frame[data-beat="setup"][data-phase="connected"] .hr-st--connected .hr-wire {
    animation: hr-join 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
@keyframes hr-join {
    from { width: 22px; margin: 0 3px; }
    to   { width: 8px;  margin: 0 2px; }
}
.hr-frame[data-beat="setup"][data-phase="connected"] .hr-st--connected .hr-wire::before {
    animation: hr-fade 0.3s ease 0.3s both;
}
@keyframes hr-fade { from { opacity: 1; } to { opacity: 0; } }
.hr-frame[data-beat="setup"][data-phase="connected"] .hr-st--connected .hr-wire::after {
    animation: hr-rise 0.3s ease 0.42s both;
}
@keyframes hr-rise { from { opacity: 0; } to { opacity: 1; } }
.hr-frame[data-beat="setup"][data-phase="connected"] .hr-st--connected .hr-pair-ap {
    animation: hr-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.46s both;
}
@keyframes hr-pop {
    from { opacity: 0.45; transform: scale(0.88); }
    to   { opacity: 1;    transform: none; }
}
.hr-frame[data-beat="setup"][data-phase="connected"] .hr-st--connected .hr-tick {
    animation: hr-badge 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.7s both;
}
@keyframes hr-badge { from { transform: scale(0); } to { transform: scale(1); } }
.hr-frame[data-beat="setup"][data-phase="connected"] .hr-st--connected .hr-tick::after {
    animation: hr-ring 0.9s ease-out 0.82s both;
}
@keyframes hr-ring {
    from { transform: scale(0.6); opacity: 0.85; }
    to   { transform: scale(2.8); opacity: 0; }
}

/* --- the document: the workflow being written ---------------------------
   Once connected, the pair carries a small file between the two marks: the
   PROCESS.md that the conversation underneath is producing. While the
   workflow is being described (`build`) its three lines write themselves,
   hold, clear and write again, and the Askpilot mark gives a small nod each
   time a draft reaches it. When the chat approves the workflow (`live`, fired
   by js/ai-setup.js as the card's tag turns Active) a new line lands with the
   file complete and a tick on the Askpilot mark: the workflow now lives there. */
.hr-wire--s { width: 6px !important; margin: 0 2px !important; }
.hr-doc {
    flex: none; display: block;
    width: 12px; height: 14px;
    overflow: visible;
}
/* a file, drawn the way the rest of the site draws icons: thin round strokes,
   white face, a folded corner */
.hr-doc-body { fill: #fff; stroke: var(--body); stroke-width: 1.2; stroke-linejoin: round; }
.hr-doc-fold { fill: none; stroke: var(--body); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
/* the lines of the process, each a unit long so the dash offset draws it */
.hr-doc-l {
    fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round;
    stroke-dasharray: 1; stroke-dashoffset: 0;
}

/* writing: one line at a time, hold, clear, again */
.hr-pair.is-writing .hr-doc-l:nth-of-type(3) { animation: hr-write-1 2.8s ease-in-out infinite; }
.hr-pair.is-writing .hr-doc-l:nth-of-type(4) { animation: hr-write-2 2.8s ease-in-out infinite; }
.hr-pair.is-writing .hr-doc-l:nth-of-type(5) { animation: hr-write-3 2.8s ease-in-out infinite; }
@keyframes hr-write-1 { 0%, 6%  { stroke-dashoffset: 1; } 20%, 86% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1; } }
@keyframes hr-write-2 { 0%, 24% { stroke-dashoffset: 1; } 38%, 86% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1; } }
@keyframes hr-write-3 { 0%, 42% { stroke-dashoffset: 1; } 56%, 86% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1; } }
/* the draft reaches Askpilot: the mark gives a nod on the same cycle */
.hr-pair.is-writing .hr-pair-ap { animation: hr-nod 2.8s ease-in-out infinite; }
@keyframes hr-nod { 0%, 60%, 84%, 100% { transform: none; } 68% { transform: scale(1.18); } }

/* written: the file complete, with the tick on its own corner. The mark it
   sits next to is four colours already; a badge on top of that was noise. */
.hr-docwrap { position: relative; flex: none; display: block; line-height: 0; }
.hr-docwrap .hr-tick { left: auto; right: -4px; bottom: -2px; margin-left: 0; width: 9px; height: 9px; }
.hr-docwrap .hr-tick svg { width: 5px; height: 5px; }
.hr-frame[data-beat="setup"][data-phase="live"] .hr-st--live .hr-tick {
    animation: hr-badge 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.4s both;
}
.hr-frame[data-beat="setup"][data-phase="live"] .hr-st--live .hr-tick::after {
    animation: hr-ring 0.9s ease-out 0.52s both;
}
.hr-frame[data-beat="setup"][data-phase="live"] .hr-st--live .hr-pair-ap {
    animation: hr-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.3s both;
}

/* --- the event: Stripe to Askpilot -----------------------------------------
   Beat 2 in the caption: the Stripe mark, a dashed wire, the Askpilot mark
   waiting. When the invoice tips past due (`due`) an amber flag pops on the
   Stripe mark; when Stripe's webhook leaves (`sent`) a packet crosses the wire
   and the Askpilot mark nods as it lands. js/hero-run.js sets the phases at
   the same moments the screen below shows the pill and the toast. */
.hr-src { position: relative; display: block; flex: none; line-height: 0; }
.hr-due {
    position: absolute; z-index: 2;
    right: -4px; top: -4px;
    width: 9px; height: 9px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #DF7A1F; color: #fff;
    box-shadow: 0 0 0 2px var(--cream);
    transform: scale(0);
}
/* drawn, not typed: a glyph from a font sits on its baseline, off the
   circle's centre, so the mark is two shapes instead */
.hr-due svg { display: block; width: 7px; height: 7px; }
.hr-wire--evt::before { animation: none; }           /* nothing is moving until it does */
.hr-pkt {
    position: absolute; z-index: 1;
    left: -2px; top: 50%;
    width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%;
    background: var(--brand-magenta);
    opacity: 0;
}
.hr-frame[data-beat="stripe"][data-phase="due"]  .hr-due,
.hr-frame[data-beat="stripe"][data-phase="sent"] .hr-due {
    animation: hr-badge 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.hr-frame[data-beat="stripe"][data-phase="sent"] .hr-pkt {
    animation: hr-cross 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes hr-cross {
    0%   { opacity: 0; transform: translateX(0); }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(22px); }
}
.hr-frame[data-beat="stripe"][data-phase="sent"] .hr-pair--evt .hr-pair-ap {
    animation: hr-land 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.55s both;
}
@keyframes hr-land {
    from { opacity: 0.45; transform: scale(0.9); }
    40%  { opacity: 1; transform: scale(1.16); }
    to   { opacity: 1; transform: none; }
}

/* --- the run: four steps closing ------------------------------------------
   Beat 3 in the caption: the Askpilot mark and a four-segment track, one per
   todo. The open segment breathes while its todo is being worked, then fills
   as it closes, so the caption keeps count with the rail on the screen. */
.hr-run { display: inline-flex; align-items: center; flex: none; gap: 5px; margin-right: 0.1em; }
.hr-steps { display: inline-flex; gap: 2px; }
.hr-steps > i {
    display: block; width: 6px; height: 3px; border-radius: 2px;
    background: #DDD5DB;
    transition: background 0.3s ease;
}
.hr-frame[data-done="1"] .hr-steps > i:nth-child(-n+1),
.hr-frame[data-done="2"] .hr-steps > i:nth-child(-n+2),
.hr-frame[data-done="3"] .hr-steps > i:nth-child(-n+3),
.hr-frame[data-done="4"] .hr-steps > i:nth-child(-n+4) { background: var(--brand-magenta); }
.hr-frame[data-doing="1"] .hr-steps > i:nth-child(1),
.hr-frame[data-doing="2"] .hr-steps > i:nth-child(2),
.hr-frame[data-doing="3"] .hr-steps > i:nth-child(3),
.hr-frame[data-doing="4"] .hr-steps > i:nth-child(4) { animation: hr-working 1s ease-in-out infinite; }
@keyframes hr-working {
    0%, 100% { background: #DDD5DB; }
    50%      { background: var(--pink-strong, #D96FD9); }
}
/* done: once the fourth segment fills, a tick pops at the end of the track
   and rings once. Its space is held from the start so the line never shifts. */
.hr-done {
    position: relative; flex: none;
    width: 0; height: 10px; border-radius: 50%;
    /* no space held while it is not there: the track sits tight to the words
       and the line grows by the badge's width as it pops in */
    margin-left: -5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-magenta); color: #fff;
    transform: scale(0);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hr-done svg { width: 6px; height: 6px; }
.hr-done::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 1.5px solid var(--brand-magenta);
    opacity: 0;
}
.hr-frame[data-done="4"] .hr-done { width: 10px; margin-left: 0; animation: hr-badge 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.3s both; }
.hr-frame[data-done="4"] .hr-done::after { animation: hr-ring 0.9s ease-out 0.42s both; }

/* --- the stage: one window, three things inside it -------------------
   Fixed height rather than auto, so the page below never moves as the
   contents change — the same reason .sc-app pins its own. */
.hr-stage { position: relative; z-index: 1; height: 640px; }

/* the shell stays put; only what is on its screen changes */
.hr-win { height: 100%; display: flex; flex-direction: column; }
.hr-views { position: relative; flex: 1; min-height: 0; }

/* The screen changes, it does not dissolve. Two opaque screenshots fading
   through each other always ghost — you see both at half strength — and
   fading one out before the other arrives leaves the window empty. So the
   swap is instant and opaque, and only the contents ease in over the new
   screen's own white. Nothing is ever double-exposed, and nothing blanks. */
.hr-view {
    position: absolute; inset: 0; z-index: 1;
    background: #fff;
    visibility: hidden;
}
.hr-view.is-on { z-index: 2; visibility: visible; }
.hr-view.is-on > * { animation: hr-view-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes hr-view-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Everything on the screen fills it, and none of them draw their own frame:
   the shell is the frame now. .step-win already does this for .ai-window. */
.hr-view > * { height: 100%; }
.hr-win .sc-app,
.hr-win .rn-crm {
    border: 0; border-radius: 0; box-shadow: none; margin: 0;
}

/* Beat 2 is Stripe rather than a CRM, so the tool screen's one Street-ism
   goes: Street sets page titles in a serif, Stripe does not. */
.hr-stripe .rn-crm-h {
    font-family: inherit;
    font-size: 19px; font-weight: 750; letter-spacing: -0.02em;
}
.hr-inv-pill {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 10px; padding: 3px 10px;
    border-radius: 9999px;
    background: #FFF3E8; color: #B2540A;
    font-size: 11px; font-weight: 700; letter-spacing: 0;
    text-transform: none; vertical-align: 2px;
}
.hr-inv-pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
/* The invoice tips past due on its own, so the status lands rather than being
   clicked. Only hidden once the driver takes charge, so with no script the
   screen still reads complete. */
.hr-stripe.is-live .hr-inv-pill { opacity: 0; transform: scale(0.9); }
.hr-stripe.is-live .hr-inv-pill.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
/* the amount is the thing the eye should land on */
.hr-stripe .rn-crm-in.is-amt { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
/* Stripe's confirmation is a webhook leaving, not a record being saved: a
   small notification card. A bolt in Stripe's purple, the event name as a
   code chip, and where it went. */
.hr-stripe .rn-crm-toast {
    gap: 11px; padding: 10px 16px 10px 10px;
    background: #fff; color: var(--ink);
    border: 1px solid #E6E8EF; border-radius: 12px;
    box-shadow: 0 14px 34px -14px rgba(17, 24, 39, 0.28), 0 2px 6px rgba(17, 24, 39, 0.05);
    font-weight: 500;
}
.hr-toast-ico {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    background: #EEF0FF; color: #635BFF;
}
.hr-stripe .rn-crm-toast .hr-toast-ico svg { width: 15px; height: 15px; }
.hr-toast-body { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.hr-toast-h { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.hr-toast-l {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; color: var(--body);
}
.hr-toast-l code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 500; letter-spacing: 0;
    padding: 2px 7px; border-radius: 6px;
    background: #F3F4F8; border: 1px solid #E6E8EF; color: #4338CA;
}
.hr-stripe .rn-crm-toast .hr-toast-arr { width: 11px; height: 11px; color: var(--muted); }
.hr-toast-l img { width: 13px; height: 13px; }

/* --- the Street screen (industries/estate-agents): Street's own serif title,
   the Save button pressed on the driver's `save` phase, and a status that
   lands green because the record is saved rather than overdue ------------- */
.hr-street .rn-crm-h { font-family: ui-serif, Georgia, 'Times New Roman', serif; font-size: 25px; font-weight: 500; }
[data-phase="save"] .hr-street .rn-crm-save { transform: scale(0.96); }
.hr-inv-pill.is-ok { background: #E7F8EC; color: #15803D; }

/* the seed carries the whole story in the source for readers that never
   run scripts; the beats above are what a person sees */
.hr-seed { display: none; }

@media (prefers-reduced-motion: reduce) {
    /* the words still change, they just do not travel */
    .hr-st > * { animation: none !important; opacity: 1; transform: none; }
    .hr-view.is-on > * { animation: none; }
    .hr-pair *, .hr-pair *::before, .hr-pair *::after { animation: none !important; }
    .hr-pair.is-joined .hr-tick { transform: scale(1); }
    .hr-due { transform: scale(1); }
    .hr-pkt, .hr-steps > i, .hr-done, .hr-done::after { animation: none !important; }
    .hr-frame[data-done="4"] .hr-done { transform: scale(1); transition: none; }
}

@media (max-width: 900px) {
    .hr { margin-top: 44px; }
    /* the window needs the same breathing room below as the caption band gives
       it above, or the bottom marks land on its rounded corners */
    .hr-frame { padding: 48px 14px 40px; }
    .hr-mark { width: 13px; height: 13px; }
    .hr-mark::before { left: 6px; height: 13px; }
    .hr-mark::after { top: 6px; width: 13px; }
    .hr-mark.is-tl, .hr-mark.is-tr { top: 8px; }
    .hr-mark.is-bl, .hr-mark.is-br { bottom: 10px; }
    .hr-mark.is-tl, .hr-mark.is-bl { left: 4px; }
    .hr-mark.is-tr, .hr-mark.is-br { right: 4px; }
    /* the caption is the only thing above the window, so it stays and shrinks */
    .hr-st { font-size: 0.625rem; gap: 0.4em; letter-spacing: 0.08em; }
    .hr-st img { width: 13px; height: 13px; }
    .hr-wire { width: 16px; }
    .hr-pair.is-joined .hr-wire { width: 6px; }
    .hr-tick { width: 8px; height: 8px; margin-left: -4px; bottom: -4px; }
    .hr-wire--s { width: 5px !important; }
    .hr-doc { width: 10px; height: 12px; }
    .hr-docwrap .hr-tick { right: -4px; bottom: -2px; }
    .hr-due { width: 8px; height: 8px; right: -3px; top: -3px; }
    .hr-due svg { width: 6px; height: 6px; }
    .hr-steps > i { width: 5px; }
    .hr-done { height: 8px; margin-left: -4px; }
    .hr-frame[data-done="4"] .hr-done { width: 8px; }
    .hr-done svg { width: 5px; height: 5px; }
    .hr-tick svg { width: 5px; height: 5px; }
    .hr-state { top: 14px; height: 16px; }
    .hr-stage { height: 580px; }
}