/* Fresh: two always-visible app screens and a smaller static five-stage diagram (preview only;
   design docs/fresh-flow-static-2026-11-03, Astra). Linked from the six Fresh pages only. Everything is visible
   in plain HTML: no tabs, no active stage, nothing hidden or switched. fresh-flow.js only adds an optional
   enlargement dialog. Inter and palette v1.1 from the page; no v2.0 tokens. */
body.jp-preview.jp-products--fresh .jp-fresh-flow{--ff-ink:#012d32;--ff-copy:#36575b;--ff-muted:#516c6f;--ff-teal:#0f6e72;--ff-line:#cbded9;--ff-rail:#a6c6c0;--ff-gap:20px}
body.jp-preview.jp-products--fresh .jp-fresh-flow__intro{margin-block-end:32px}
body.jp-preview.jp-products--fresh .jp-fresh-flow__intro .jp-h2{margin:0}

/* Screens: 09 (portrait 390 x 844) and 18 (1440 x 1200). Column factors equal the image aspect ratios
   (390/844 and 1440/1200), so both screens get exactly the same height without cropping, stretching or an empty
   passe-partout: about 300 + 780 px and 650 px high in the 1108 px pair. Shared top edge through subgrid rows
   (heading, image, caption); without subgrid the single-line headings keep it in practice. */
body.jp-preview.jp-products--fresh .jp-fresh-flow__screens{display:grid;grid-template-columns:minmax(0,46.2085fr) minmax(0,120fr);grid-template-rows:auto auto auto;gap:0 28px;max-inline-size:1108px;margin-inline:auto}
body.jp-preview.jp-products--fresh .jp-fresh-flow__screen{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;min-inline-size:0;margin:0}
body.jp-preview.jp-products--fresh .jp-fresh-flow__screen-title{margin:0 0 12px;font-size:16px;line-height:1.4;font-weight:600;letter-spacing:-.005em;color:var(--ff-ink)}
/* The 1 px frame is a ring outside the image (box-shadow), so it never changes the image size or proportions. */
body.jp-preview.jp-products--fresh .jp-fresh-flow__img{display:block;inline-size:100%;max-inline-size:100%;block-size:auto;border:0;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--ff-line)}
body.jp-preview.jp-products--fresh .jp-fresh-flow.is-zoomable .jp-fresh-flow__img{cursor:zoom-in}
body.jp-preview.jp-products--fresh .jp-fresh-flow__caption{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--ff-muted)}
body.jp-preview.jp-products--fresh .jp-fresh-flow__full{display:inline-block;color:var(--ff-teal);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
body.jp-preview.jp-products--fresh .jp-fresh-flow__full:hover{color:var(--ff-ink)}
body.jp-preview.jp-products--fresh .jp-fresh-flow :is(.jp-fresh-flow__full,.jp-fresh-flow__dialog-link,.jp-fresh-flow__close):focus-visible{outline:2px solid var(--ff-teal);outline-offset:3px;border-radius:2px}

/* Diagram: five equal columns on one thin numbered rail, original illustrations at about 100 x 73 px.
   No active stage and no controls; all titles and descriptions are always shown. */
body.jp-preview.jp-products--fresh .jp-fresh-flow__box{margin-block-start:48px;padding:26px 24px 28px;background:#fff;border:1px solid var(--ff-line);border-radius:8px}
body.jp-preview.jp-products--fresh .jp-fresh-flow__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--ff-gap);margin:0;padding:0;list-style:none}
body.jp-preview.jp-products--fresh .jp-fresh-flow__step{display:flex;flex-direction:column;align-items:center;min-inline-size:0;text-align:center}
body.jp-preview.jp-products--fresh .jp-fresh-flow__art{display:block;inline-size:100px;block-size:73px}
body.jp-preview.jp-products--fresh .jp-fresh-flow__art svg{display:block;inline-size:100%;block-size:100%}
body.jp-preview.jp-products--fresh .jp-fresh-flow__node{position:relative;display:flex;justify-content:center;align-self:stretch;margin:10px 0 12px}
/* Each node draws the rail back to the previous node's centre (column width + gap). */
body.jp-preview.jp-products--fresh .jp-fresh-flow__step + .jp-fresh-flow__step .jp-fresh-flow__node::before{content:"";position:absolute;inset-block-start:50%;inset-inline-start:calc(-50% - var(--ff-gap));inset-inline-end:50%;block-size:1px;background:var(--ff-rail)}
body.jp-preview.jp-products--fresh .jp-fresh-flow__num{position:relative;z-index:1;display:grid;place-items:center;inline-size:28px;block-size:28px;border:1px solid var(--ff-rail);border-radius:50%;background:#fff;color:#4f7674;font-size:12px;line-height:1;font-variant-numeric:tabular-nums}
body.jp-preview.jp-products--fresh .jp-fresh-flow__copy{min-inline-size:0}
body.jp-preview.jp-products--fresh .jp-fresh-flow__title{margin:0 0 6px;font-size:16px;line-height:1.35;font-weight:600;letter-spacing:-.01em;color:var(--ff-ink);overflow-wrap:break-word;hyphens:manual}
body.jp-preview.jp-products--fresh .jp-fresh-flow__text{margin:0;font-size:14px;line-height:1.55;color:var(--ff-copy);overflow-wrap:break-word}
body.jp-preview.jp-products--fresh .jp-fresh-flow__nobr{white-space:nowrap}
body.jp-preview.jp-products--fresh .jp-fresh-flow__caveat{max-inline-size:83ch;margin-block-start:24px}

/* Optional enlargement in a native modal dialog; the inline screens are never moved or changed. */
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog{inline-size:min(1280px,96vw);max-inline-size:96vw;max-block-size:92vh;max-block-size:92dvh;margin:auto;padding:0;border:1px solid var(--ff-line);border-radius:8px;background:#f7fafa;color:var(--ff-ink);overflow:auto;overscroll-behavior:contain}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog::backdrop{background:rgb(1 45 50 / 60%)}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-head{position:sticky;inset-block-start:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px 24px;padding:10px 18px;background:#fff;border-block-end:1px solid var(--ff-line)}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-head p{margin:0;font-size:13px;line-height:1.5;color:var(--ff-copy)}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-actions{display:flex;flex:none;align-items:center;gap:8px 20px}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-link{display:inline-flex;align-items:center;min-block-size:44px;color:var(--ff-teal);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-link:hover{color:var(--ff-ink)}
body.jp-preview.jp-products--fresh .jp-fresh-flow__close{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;margin:0;padding:0 18px;border:1px solid #99b7b2;border-radius:999px;background:#fff;color:var(--ff-teal);font:inherit;font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;touch-action:manipulation}
body.jp-preview.jp-products--fresh .jp-fresh-flow__close:hover{background:#eef8f7;border-color:#1b9092;color:var(--ff-ink)}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-media{padding:16px;overflow-x:auto;text-align:center}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-media img{display:inline-block;inline-size:100%;max-inline-size:1440px;block-size:auto;vertical-align:top}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-media.is-portrait img{inline-size:auto;max-inline-size:100%}
body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-hint{display:none;margin:0;padding:0 12px 12px;font-size:12px;line-height:1.5;color:var(--ff-muted)}

@media (max-width:1080px){
  body.jp-preview.jp-products--fresh .jp-fresh-flow{--ff-gap:14px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__box{padding-inline:18px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__text{font-size:13.5px}
}
/* Tablet and phone: screens one below the other (09 at most 300 px, 18 full width, both complete) and the
   stages as a compact list with the small illustration beside the full text. No horizontal carousel. */
@media (max-width:900px){
  body.jp-preview.jp-products--fresh .jp-fresh-flow__intro{margin-block-end:24px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__screens{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:36px;max-inline-size:none}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__screen{display:block;grid-row:auto}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__screen--floor{inline-size:100%;max-inline-size:300px;margin-inline:auto}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__screen-title{margin-block-end:10px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__box{margin-block-start:40px;padding:4px 20px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__steps{grid-template-columns:minmax(0,1fr);gap:0}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__step{display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-areas:"art node" "art copy";grid-template-rows:auto 1fr;align-items:start;column-gap:16px;padding-block:16px;text-align:start}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__step + .jp-fresh-flow__step{border-block-start:1px solid var(--ff-line)}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__art{grid-area:art;inline-size:80px;block-size:58px;margin-block-start:2px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__node{grid-area:node;justify-content:flex-start;margin:0 0 6px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__step + .jp-fresh-flow__step .jp-fresh-flow__node::before{content:none}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__num{inline-size:24px;block-size:24px;font-size:11px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__copy{grid-area:copy}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__title{font-size:16px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__text{font-size:14px}
}
@media (max-width:720px){
  body.jp-preview.jp-products--fresh .jp-fresh-flow__box{padding-inline:16px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__step{grid-template-columns:72px minmax(0,1fr);column-gap:14px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__art{inline-size:72px;block-size:52px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-head{flex-wrap:wrap;padding:8px 12px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-media{padding:8px}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-media:not(.is-portrait) img{inline-size:740px;max-inline-size:none}
  body.jp-preview.jp-products--fresh .jp-fresh-flow__dialog-hint:not([hidden]){display:block}
}
@media (prefers-reduced-motion:reduce){
  body.jp-preview.jp-products--fresh .jp-fresh-flow *{transition:none!important;animation:none!important}
}