/* Request flow: one request, from the client's email to the contract LHM Step's team approves.
   Used on the Customer stories page and the For manufacturers board. The canvas loads this same file
   as an uploaded asset: after editing it, upload it to the canvas again and repoint the boards'
   <link> (see README). State sits on the markup: data-step (1-5), data-playing (the visitor has not
   paused it: the button reads Pause) and data-running (it is moving now: the step's line fills) on
   the root, aria-selected on the tabs, data-active on the shown panel. Every animation lives in the
   no-preference block, so the resting state of each panel is its finished scene.
   .request-flow--split (the home page) puts the steps in a column beside the stage from 1024px. */

.request-flow{--rf-dwell:6000ms;--rf-frame:#efece5;--rf-frame-line:#d9d4c8;display:grid;gap:clamp(22px,2.6vw,32px)}

/* The live line and the play control */
.rf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.rf-live{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:14px;font-weight:650;line-height:1.4;color:var(--ink)}
.rf-live-dot{position:relative;flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--green)}
.rf-live-dot::after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--green);border-radius:50%;opacity:0}
.rf-play{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 13px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:border-color 160ms,transform 120ms}
@media(hover:hover) and (pointer:fine){.rf-play:hover{border-color:var(--ink)}}
.rf-play:active{transform:scale(.97)}
.rf-play[hidden]{display:none}
.rf-play svg{width:14px;height:14px}
.rf-icon-play{fill:currentColor;stroke:none}
.rf-icon-pause{stroke-width:2.4}
.rf-icon-pause,.rf-label-pause,
.request-flow[data-playing="true"] .rf-icon-play,
.request-flow[data-playing="true"] .rf-label-play{display:none}
.request-flow[data-playing="true"] .rf-icon-pause{display:block}
.request-flow[data-playing="true"] .rf-label-pause{display:inline}

/* The rail: five steps on one line; the ink line marks how far the request has come */
.rf-rail{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.rf-rail::after{content:"";position:absolute;top:-4px;right:1px;width:8px;height:8px;border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg);transition:border-color 300ms}
.request-flow[data-step="5"] .rf-rail::after{border-color:var(--ink)}
.rf-tab{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:10px;row-gap:4px;padding:20px 18px 2px 0;border:0;background:none;color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:color 160ms}
.rf-tab::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--line)}
.rf-tab::after{content:"";position:absolute;top:-4px;left:0;height:9px;border-left:1px solid var(--line);transition:border-color 300ms}
.rf-tab:hover,.rf-tab[aria-selected="true"]{color:var(--ink)}
.rf-tab[aria-selected="true"]::after{border-color:var(--ink)}
.rf-tab:focus-visible{outline-offset:2px}
.rf-progress{position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.rf-tab[aria-selected="true"] .rf-progress,
.request-flow[data-step="2"] .rf-tab[data-n="1"] .rf-progress,
.request-flow[data-step="3"] .rf-tab:is([data-n="1"],[data-n="2"]) .rf-progress,
.request-flow[data-step="4"] .rf-tab:is([data-n="1"],[data-n="2"],[data-n="3"]) .rf-progress,
.request-flow[data-step="5"] .rf-tab:not([data-n="5"]) .rf-progress{transform:none}
.rf-num{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.rf-name{font-size:17px;font-weight:650;line-height:1.25;letter-spacing:-.015em}
.rf-who{grid-column:2;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;line-height:1.3;color:var(--muted)}
.rf-who-live::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--green)}

/* The stage: a warm frame, like the product screens on the home page, holding one panel at a time */
.rf-stage{position:relative;display:grid;padding:clamp(20px,3.2vw,44px);border:1px solid var(--rf-frame-line);border-radius:20px;background:var(--rf-frame)}
.rf-panels{display:grid}
.rf-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;visibility:hidden;opacity:0}
.rf-panel[data-active="true"]{visibility:visible;opacity:1}
.rf-copy{display:grid;gap:16px;justify-items:start;max-width:30ch}
.rf-caption{margin:0;font-size:clamp(1.2rem,1.75vw,1.5rem);font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rf-scene{display:grid;gap:12px;justify-items:start;align-content:center;justify-self:center;width:100%;max-width:460px;min-width:0}
.state-live{background:var(--green-soft);color:var(--green)}
.state-live::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:currentColor}

/* The scene cards: small product surfaces, raised by shadow alone */
.rf-card{width:100%;padding:16px 18px 18px;border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(37,37,33,.06),0 14px 30px -6px rgba(37,37,33,.14);font-size:14px;line-height:1.5}
.rf-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--soft);font-size:13px;font-weight:700}
.rf-card-title{display:inline-flex;align-items:center;gap:8px}
.rf-card-title svg{width:15px;height:15px;color:var(--muted)}
.rf-card-meta{font-size:12px;font-weight:550;color:var(--muted)}
.rf-result{display:grid;justify-items:start}
.rf-result>*{grid-area:1/1}

/* 1 Request */
.rf-mail-subject{margin:0 0 4px;font-weight:700}
.rf-mail-body{margin:0}
.rf-gloss{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.rf-mark{padding:0 2px;border-radius:3px;background:linear-gradient(var(--orange-soft),var(--orange-soft)) 0 0/100% 100% no-repeat;box-shadow:0 0 0 2px var(--orange-soft);color:inherit}
.rf-attach{margin-top:12px;font-size:12px}
.rf-reading{opacity:0}

/* 2 Draft */
.rf-fields{display:grid;margin:0}
.rf-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--soft)}
.rf-row:first-child{padding-top:0;border-top:0}
.rf-row dt{font-size:12px;color:var(--muted)}
.rf-row dd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0}
.rf-val{font-weight:650;font-variant-numeric:tabular-nums;text-decoration:underline dashed var(--dash);text-decoration-thickness:1px;text-underline-offset:4px}
.rf-val-empty{font-weight:500;color:var(--muted);text-decoration:none}
.rf-src{padding:2px 6px;border-radius:4px;background:var(--orange-soft);color:var(--orange-text);font-size:11px;font-weight:650;line-height:1.4;white-space:nowrap}

/* 3 Price */
.rf-lines{display:grid;margin:0;padding:0;list-style:none}
.rf-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--soft)}
.rf-line:first-child{padding-top:0;border-top:0}
.rf-from{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:var(--green);white-space:nowrap}
.rf-from svg{width:12px;height:12px;stroke-width:2.4}
.rf-total{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:10px 0 0;padding-top:12px;border-top:1px solid var(--ink);font-weight:700}

/* 4 Offer */
.rf-scene-offer{max-width:640px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start;justify-items:stretch}
.rf-scene-offer .rf-result{grid-column:1/-1}
.rf-doc{align-self:stretch}
.rf-doc-lines{display:grid;margin:0;padding:0;list-style:none;font-size:12px;color:var(--muted)}
.rf-doc-lines li{padding:7px 0;border-top:1px solid var(--soft)}
.rf-doc-lines li:first-child{padding-top:0;border-top:0}
.rf-reply-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.rf-send{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:6px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:650}

/* 5 Contract */
.rf-checks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.rf-checks li{display:flex;align-items:center;gap:10px}
.rf-check{display:inline-grid;place-items:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--green-soft);color:var(--green)}
.rf-check svg{width:12px;height:12px;stroke-width:2.4}
.rf-approve-row{position:relative;display:grid;justify-items:end;align-items:center;min-height:52px;margin-top:16px;padding-top:14px;border-top:1px solid var(--soft)}
.rf-approve-row>.rf-approve,.rf-approve-row>.rf-stamp{grid-area:1/1}
.rf-approve{display:inline-flex;align-items:center;min-height:36px;padding:0 18px;border-radius:6px;background:var(--orange);color:var(--surface);font-size:13px;font-weight:650;opacity:0}
.rf-stamp{padding:7px 11px;font-size:13px}
.rf-stamp svg{width:13px;height:13px}
.rf-cursor{position:absolute;right:34px;bottom:-4px;width:22px;height:22px;fill:var(--ink);stroke:var(--surface);stroke-width:1.4;opacity:0;filter:drop-shadow(0 2px 3px rgba(37,37,33,.28));pointer-events:none}

@media(max-width:900px){
  .rf-panel{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:20px}
  .rf-copy{max-width:46ch}
  .rf-scene{justify-self:start}
}
@media(max-width:640px){
  .rf-tab{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:16px 6px 0 0}
  .rf-num{font-size:11px}
  .rf-name{font-size:13px;letter-spacing:-.01em}
  .rf-who{display:none}
  .rf-stage{padding:16px 16px 20px;border-radius:16px}
  .rf-caption{font-size:1.1rem}
  .rf-card{padding:14px 14px 16px}
  .rf-scene-offer{grid-template-columns:minmax(0,1fr)}
}

/* Split (the home page): the five steps in a column, the stage beside them, like a numbered
   how-it-works list. Below 1024px it is the ordinary rail. */
@media(min-width:1024px){
  .request-flow--split{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"top top" "rail stage";column-gap:clamp(36px,4.5vw,72px);align-items:start}
  .request-flow--split>.rf-top{grid-area:top}
  .request-flow--split>.rf-rail{grid-area:rail;grid-template-columns:minmax(0,1fr)}
  .request-flow--split>.rf-stage{grid-area:stage}
  .request-flow--split .rf-rail::after{display:none}
  .request-flow--split .rf-tab{grid-template-columns:30px minmax(0,1fr);row-gap:3px;padding:18px 0 18px 22px}
  .request-flow--split .rf-tab::before{top:0;bottom:0;left:0;right:auto;border-top:0;border-left:1px solid var(--line)}
  .request-flow--split .rf-tab::after{display:none}
  .request-flow--split .rf-progress{top:0;bottom:0;left:-1px;right:auto;width:3px;height:auto;transform:scaleY(0);transform-origin:50% 0}
  .request-flow--split .rf-name{font-size:19px}
  .request-flow--split .rf-who{font-size:13px}
  .request-flow--split .rf-panel{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:24px}
  .request-flow--split .rf-copy{max-width:44ch}
  .request-flow--split .rf-scene{justify-self:start;max-width:540px}
  .request-flow--split .rf-scene-offer{max-width:640px}
}

@media screen and (prefers-reduced-motion:no-preference){
  .rf-live-dot::after{animation:rf-ping 1800ms var(--ease) 600ms 3 both}
  .rf-progress{transition:transform 420ms var(--ease)}
  .request-flow[data-running="true"] .rf-tab[aria-selected="true"] .rf-progress{animation:rf-fill var(--rf-dwell) linear both}
  .request-flow--split[data-running="true"] .rf-tab[aria-selected="true"] .rf-progress{animation-name:rf-fill-split}
  .rf-panel[data-active="true"] .rf-copy{animation:rf-copy-in 520ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-card{animation:rf-card-in 640ms var(--ease) 60ms both}

  /* 1 Request: the assistant reads, marks what it found, then opens the case */
  .rf-panel[data-active="true"] .rf-m1{animation:rf-mark 520ms var(--ease) 650ms both}
  .rf-panel[data-active="true"] .rf-m2{animation:rf-mark 520ms var(--ease) 950ms both}
  .rf-panel[data-active="true"] .rf-m3{animation:rf-mark 520ms var(--ease) 1250ms both}
  .rf-panel[data-active="true"] .rf-attach{animation:rf-attach 700ms var(--ease) 1500ms both}
  .rf-panel[data-active="true"] .rf-reading{animation:rf-reading 2300ms linear both}
  .rf-panel[data-active="true"] .rf-opened{animation:rf-pop 480ms var(--ease) 2250ms both}

  /* 2 Draft: each value arrives, then the place it came from */
  .rf-panel[data-active="true"] .rf-row{animation:rf-row 480ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-src{animation:rf-src 440ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-row:nth-child(1){animation-delay:320ms}
  .rf-panel[data-active="true"] .rf-row:nth-child(2){animation-delay:470ms}
  .rf-panel[data-active="true"] .rf-row:nth-child(3){animation-delay:620ms}
  .rf-panel[data-active="true"] .rf-row:nth-child(4){animation-delay:770ms}
  .rf-panel[data-active="true"] .rf-row:nth-child(5){animation-delay:920ms}
  .rf-panel[data-active="true"] .rf-row:nth-child(1) .rf-src{animation-delay:640ms}
  .rf-panel[data-active="true"] .rf-row:nth-child(2) .rf-src{animation-delay:790ms}
  .rf-panel[data-active="true"] .rf-row:nth-child(3) .rf-src{animation-delay:940ms}
  .rf-panel[data-active="true"] .rf-row:nth-child(4) .rf-src{animation-delay:1090ms}
  .rf-panel[data-active="true"] .rf-ask{animation:rf-pop 480ms var(--ease) 1450ms both}

  /* 3 Price: every line from the price list, then the total */
  .rf-panel[data-active="true"] .rf-line{animation:rf-row 480ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-from{animation:rf-tick 420ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-line:nth-child(1){animation-delay:320ms}
  .rf-panel[data-active="true"] .rf-line:nth-child(2){animation-delay:520ms}
  .rf-panel[data-active="true"] .rf-line:nth-child(3){animation-delay:720ms}
  .rf-panel[data-active="true"] .rf-line:nth-child(1) .rf-from{animation-delay:620ms}
  .rf-panel[data-active="true"] .rf-line:nth-child(2) .rf-from{animation-delay:820ms}
  .rf-panel[data-active="true"] .rf-line:nth-child(3) .rf-from{animation-delay:1020ms}
  .rf-panel[data-active="true"] .rf-total{animation:rf-row 480ms var(--ease) 1150ms both}
  .rf-panel[data-active="true"] .rf-calc{animation:rf-stamp 600ms var(--ease) 1450ms both}

  /* 4 Offer: the document fills in, the reply waits for the team */
  .rf-panel[data-active="true"] .rf-doc-lines li{animation:rf-line 560ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-doc-lines li:nth-child(1){animation-delay:380ms}
  .rf-panel[data-active="true"] .rf-doc-lines li:nth-child(2){animation-delay:520ms}
  .rf-panel[data-active="true"] .rf-doc-lines li:nth-child(3){animation-delay:660ms}
  .rf-panel[data-active="true"] .rf-reply{animation-delay:760ms}
  .rf-panel[data-active="true"] .rf-ready{animation:rf-pop 480ms var(--ease) 1700ms both}

  /* 5 Contract: details check in, then a person approves */
  .rf-panel[data-active="true"] .rf-checks li{animation:rf-row 460ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-check{animation:rf-tick 420ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-checks li:nth-child(1){animation-delay:320ms}
  .rf-panel[data-active="true"] .rf-checks li:nth-child(2){animation-delay:500ms}
  .rf-panel[data-active="true"] .rf-checks li:nth-child(3){animation-delay:680ms}
  .rf-panel[data-active="true"] .rf-checks li:nth-child(1) .rf-check{animation-delay:540ms}
  .rf-panel[data-active="true"] .rf-checks li:nth-child(2) .rf-check{animation-delay:720ms}
  .rf-panel[data-active="true"] .rf-checks li:nth-child(3) .rf-check{animation-delay:900ms}
  .rf-panel[data-active="true"] .rf-approve{animation:rf-approve 2400ms linear both}
  .rf-panel[data-active="true"] .rf-cursor{animation:rf-cursor 2700ms var(--ease) both}
  .rf-panel[data-active="true"] .rf-stamp{animation:rf-stamp 640ms var(--ease) 2350ms both}
}

@keyframes rf-fill{from{transform:scaleX(0)}to{transform:none}}
@keyframes rf-fill-split{from{transform:scaleY(0)}to{transform:none}}
@keyframes rf-ping{0%{opacity:.75;transform:scale(.55)}100%{opacity:0;transform:scale(1.7)}}
@keyframes rf-copy-in{from{opacity:0;transform:translateY(8px)}}
@keyframes rf-card-in{from{opacity:0;transform:translateX(28px)}}
@keyframes rf-mark{from{background-size:0% 100%;box-shadow:0 0 0 2px transparent}}
@keyframes rf-attach{0%{opacity:0;transform:translateY(6px)}55%{opacity:1;transform:none;box-shadow:0 0 0 4px var(--orange-soft)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes rf-reading{0%{opacity:0}8%,88%{opacity:1}100%{opacity:0}}
@keyframes rf-pop{from{opacity:0;transform:scale(.9)}}
@keyframes rf-row{from{opacity:0;transform:translateY(6px)}}
@keyframes rf-src{from{opacity:0;transform:translateX(10px)}}
@keyframes rf-tick{from{opacity:0;transform:scale(.55)}}
@keyframes rf-line{from{opacity:0;clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rf-stamp{0%{opacity:0;clip-path:inset(0 100% 0 0 round 4px);transform:scale(1.05)}55%{opacity:1;clip-path:inset(0 0 0 0 round 4px)}100%{clip-path:inset(0 0 0 0 round 4px);transform:none}}
@keyframes rf-approve{0%,36%{opacity:0;transform:translateY(6px)}44%{opacity:1;transform:none}86%{opacity:1;transform:none}90%{opacity:1;transform:scale(.95)}100%{opacity:0;transform:scale(.95)}}
@keyframes rf-cursor{0%,40%{opacity:0;transform:translate(-72px,38px)}52%{opacity:1}74%{opacity:1;transform:none}79%{transform:scale(.86)}85%{transform:none}100%{opacity:0;transform:translate(8px,6px)}}

/* The Home flow's stage shows the app screen for each step (20 Oct 2026, replacing the illustrated scene and
   the screenshot tabs that were a section of their own): the screenshot sits in the stage's frame itself, no
   second frame, with the screen's name and the sample-data note under it. The link the build adds around it
   opens the screenshot in site.js's dialog (home.css .screen-zoom). */
.rf-shot{display:grid;gap:10px;margin:0;min-width:0}
.rf-shot img{display:block;width:100%;height:auto;border:1px solid var(--rf-frame-line);border-radius:10px;background:var(--paper);box-shadow:0 12px 32px rgba(37,37,33,.10)}
.rf-shot-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;color:var(--muted);font-size:13px;line-height:1.5}
.rf-shot-caption span:first-child{color:var(--ink);font-weight:650}

/* The screenshot zoom link and the dialog it opens (site.js), here since 20 Oct 2026 because every page with the flow
   shows real screens (Home, For manufacturers); they lived in home.css while only Home had them. */
.screen-zoom{display:block;border-radius:12px;cursor:zoom-in}
.screen-zoom:focus-visible{outline:3px solid var(--focus);outline-offset:4px}

/* The screenshot at a readable size (site.js opens it in a dialog). */
.screen-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink)}
.screen-dialog::backdrop{background:transparent}
html{scrollbar-gutter:stable}
.screen-dialog-scroll{display:flex;width:100%;height:100%;overflow:auto;overscroll-behavior:contain}
.screen-dialog-scroll img{flex:none;margin:auto;width:max(100%,1440px);height:auto;cursor:zoom-out}
@media(min-width:761px){.screen-dialog-scroll img{width:min(100%,1880px)}}
@media(max-width:760px){.screen-dialog-scroll{box-sizing:border-box;padding-top:68px}}
.screen-dialog-close{position:fixed;top:12px;right:12px;z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color 160ms var(--ease),transform 120ms var(--ease)}
.screen-dialog-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.screen-dialog-close:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.screen-dialog-close:hover{border-color:var(--ink)}}
.screen-dialog-close:active{transform:scale(.97)}
html:has(.screen-dialog[open]){overflow:hidden}
@media(prefers-reduced-motion:reduce){.screen-dialog-close:active{transform:none}}