/* Freshness on the homepage. Generated by install-homepage.py from the mock-up stylesheets in
   work/claude-mobile-examples/src: change those and re-run, don't edit this file. */
#unit-fresh{font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#unit-fresh{--deep: #102a28;
  --scrim: 6 29 27;
  --ink: #144444;
  --lime: #a4cd3a;
  --paper: #fff;
  --line: #e8e8e8;
  --muted: #637272;
  --t1: #f1f4f0;
  --t2: #c3cfc8;
  --t3: #b0c0b7;
  --t4: #93a79e;
  --hair: rgb(221 233 225 / 13%);
  --arrive-1: #9eae6b;
  --arrive-2: #7e9580;
  --arrive-3: #657d6d;
  --route-end: #526e5e;
  --font: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;}
#unit-fresh *,#unit-fresh *::before,#unit-fresh *::after{box-sizing: border-box;}
html:has(#sources[open]){overflow: hidden;}
#unit-fresh img{display: block; max-width: 100%;}
#unit-fresh button{font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;}
#unit-fresh p{margin: 0;}
#unit-fresh .sr{position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;}
#unit-fresh .fx{position: relative;
  background: var(--deep);
  color: var(--t1);
  font-variant-numeric: lining-nums;}
#unit-fresh .fx :is(a, button, summary):focus-visible{outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;}
#unit-fresh .fx .fx-title{margin: 0 16px; font-weight: 600;}
#unit-fresh .h-shelf{display: block; color: #b2c0ba; font-weight: 400;}
#unit-fresh .h-harvest{display: block; color: #fff;}
#unit-fresh .h-ne{color: var(--lime); font-weight: 400;}
#unit-fresh .tag{display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid rgb(221 233 225 / 24%);
  border-radius: 5px;
  color: #c7d2cc;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: normal;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;}
#unit-fresh .fn{position: relative;
  display: inline-block;
  margin: 0 0 0 2px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #c4d1c9;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: super;
  cursor: pointer;}
#unit-fresh .fn::after{content: ''; position: absolute; inset: -14px -10px;}
#unit-fresh .fig .fn{vertical-align: top; top: 0.25em; font-size: 11px;}
#unit-fresh .stop{display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t3);
  cursor: pointer;}
#unit-fresh .node{position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--node-bg, var(--deep));
  color: var(--lime);}
#unit-fresh .stop-icon{display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;}
#unit-fresh .stop-name{font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.005em;
  white-space: nowrap;}
#unit-fresh .stop[aria-expanded='true'] .stop-name{color: #fff; text-decoration: underline; text-underline-offset: 3px;}
#unit-fresh [data-stop='store-farm']{--arrive: var(--lime); --delay: 0ms;}
#unit-fresh [data-stop='store-storage']{--arrive: var(--arrive-1); --delay: 950ms;}
#unit-fresh [data-stop='store-store']{--arrive: var(--arrive-2); --delay: 2350ms;}
#unit-fresh [data-stop='store-home']{--arrive: var(--arrive-3); --delay: 3750ms;}
#unit-fresh .track-store .node{color: var(--arrive);}
#unit-fresh .track-ours .node{color: var(--lime);}
#unit-fresh .line::before,#unit-fresh .line::after{content: '';
  position: absolute;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;}
#unit-fresh .line::after{background: var(--lime); opacity: 0; transform-origin: left center;}
#unit-fresh .line-ours::before{background: var(--lime); opacity: 0.92;}
#unit-fresh .line-store::before{background: linear-gradient(90deg, var(--lime), var(--arrive-1) 34%, var(--arrive-2) 67%, var(--route-end));}
#unit-fresh .line.reverse::after{transform-origin: right center;}
#unit-fresh [data-state='ready'] .track-store .node{color: var(--lime);}
#unit-fresh [data-state='ready'] .line-store::before{background: var(--lime);}
#unit-fresh [data-state='done'] .track-store .node{animation: fr-stop-fade 850ms ease-out var(--delay) both;}
#unit-fresh [data-state='done'] .line-store::after{animation: fr-store-trace 4.8s ease-in-out both;}
#unit-fresh [data-state='done'] .line-ours::after{background: #d9f08f; animation: fr-direct-trace 850ms ease-out both;}
@keyframes fr-stop-fade{ from { color: var(--lime); } to { color: var(--arrive); } }
@keyframes fr-store-trace{
  0%, 14% { transform: scaleX(0); opacity: 1; }
  24%, 40% { transform: scaleX(0.333333); opacity: 0.92; }
  50%, 66% { transform: scaleX(0.666667); opacity: 0.68; }
  78%, 92% { transform: scaleX(1); opacity: 0.3; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes fr-direct-trace{ from { transform: scaleX(0); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
#unit-fresh [data-still] *,#unit-fresh [data-still] *::before,#unit-fresh [data-still] *::after{animation: none !important;}
#unit-fresh.noanim *,#unit-fresh.noanim *::before,#unit-fresh.noanim *::after,#unit-fresh[data-rm] *,#unit-fresh[data-rm] *::before,#unit-fresh[data-rm] *::after{transition: none !important;
  animation: none !important;}
@media (prefers-reduced-motion: reduce){
#unit-fresh *,#unit-fresh *::before,#unit-fresh *::after{transition: none !important; animation: none !important;}
}
#unit-fresh .stop-pop{position: fixed;
  z-index: 40;
  width: min(264px, calc(100vw - 24px));
  padding: 14px 44px 14px 16px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 32px rgb(6 29 27 / 32%), 0 1px 2px rgb(6 29 27 / 20%);}
#unit-fresh .stop-pop[hidden]{display: none;}
#unit-fresh .stop-pop::after{content: '';
  position: absolute;
  left: calc(var(--caret, 50%) - 7px);
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);}
#unit-fresh .stop-pop[data-placement='above']::after{bottom: -6px;}
#unit-fresh .stop-pop[data-placement='below']::after{top: -6px;}
#unit-fresh .pop-kicker{color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;}
#unit-fresh .pop-title{margin: 3px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em;}
#unit-fresh .pop-body{margin-top: 4px; font-size: 14px; line-height: 1.45;}
#unit-fresh .pop-body p + p{margin-top: 8px;}
#unit-fresh .pop-body small{display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4;}
#unit-fresh .pop-body b{display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;}
#unit-fresh .pop-note{margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.4;}
#unit-fresh .pop-note:empty{display: none;}
#unit-fresh .pop-close{position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;}
#unit-fresh .pop-close svg{width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none;}
#unit-fresh .pop-close:focus-visible{outline: 2px solid var(--ink); outline-offset: -4px;}
#unit-fresh dialog.fr-sheet{position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;}
#unit-fresh dialog.fr-sheet[open]{display: flex; align-items: flex-end; justify-content: center;}
#unit-fresh dialog.fr-sheet::backdrop{background: rgb(10 42 42 / 45%);}
#unit-fresh .fr-sheet-panel{display: flex;
  flex-direction: column;
  width: min(100%, 430px);
  max-height: 88vh;
  max-height: 88dvh;
  border-radius: 20px 20px 0 0;
  background: #fff;
  color: var(--ink);
  animation: fr-sheet-up 0.32s var(--ease-out);}
@keyframes fr-sheet-up{ from { transform: translateY(48px); opacity: 0; } }
#unit-fresh .fr-sheet-grab{flex: none; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 5px; background: var(--line);}
#unit-fresh .fr-sheet-head{flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 4px 20px;}
#unit-fresh .fr-sheet-head h2:focus{outline: none;}
#unit-fresh .fr-sheet-head h2{margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em;}
#unit-fresh .fr-sheet-close{display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;}
#unit-fresh .fr-sheet-close svg{width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none;}
#unit-fresh .fr-sheet-body{flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px max(28px, env(safe-area-inset-bottom));}
#unit-fresh .topic{border-top: 1px solid rgb(20 68 68 / 14%);}
#unit-fresh .topic:last-child{border-bottom: 1px solid rgb(20 68 68 / 14%);}
#unit-fresh .topic > summary{display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;}
#unit-fresh .topic > summary::-webkit-details-marker{display: none;}
#unit-fresh .topic > summary::after{content: '+'; color: var(--muted); font-size: 25px; font-weight: 300; line-height: 1;}
#unit-fresh .topic[open] > summary::after{content: '\2212';}
#unit-fresh .topic > summary:focus-visible{outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px;}
#unit-fresh .topic-copy{padding-bottom: 22px;}
#unit-fresh .more-section{scroll-margin-top: 12px; border-radius: 10px;}
#unit-fresh .more-section + .more-section{margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);}
#unit-fresh .more-section.is-target{animation: fr-target-glow 1.6s ease-out both;}
@media (prefers-reduced-motion: reduce){
#unit-fresh .more-section.is-target{background: rgb(164 205 58 / 14%); box-shadow: 0 0 0 8px rgb(164 205 58 / 14%);}
}
#unit-fresh[data-rm] .more-section.is-target{background: rgb(164 205 58 / 14%); box-shadow: 0 0 0 8px rgb(164 205 58 / 14%);}
@keyframes fr-target-glow{ from { background: rgb(164 205 58 / 26%); box-shadow: 0 0 0 8px rgb(164 205 58 / 26%); } to { background: rgb(164 205 58 / 0%); box-shadow: 0 0 0 8px rgb(164 205 58 / 0%); } }
#unit-fresh .more-label{display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;}
#unit-fresh .ref-num{display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;}
#unit-fresh .more-p{font-size: 17px; line-height: 1.4;}
#unit-fresh .more-sub{margin-top: 6px; font-size: 15px; line-height: 1.45;}
#unit-fresh .more-list{display: grid; gap: 16px; margin: 0; padding: 0; list-style: none;}
#unit-fresh .more-list li{font-size: 15px; line-height: 1.45;}
#unit-fresh .more-list strong{display: block; margin-bottom: 2px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em;}
#unit-fresh .cite{margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.5;}
#unit-fresh .cite a{color: var(--ink);}
#unit-fresh .bars{display: grid; gap: 10px; margin: 2px 0 16px;}
#unit-fresh .bars p{display: grid; grid-template-columns: 6.6em minmax(0, 1fr) 3em; align-items: center; gap: 12px; font-size: 13px;}
#unit-fresh .bars span{color: var(--muted);}
#unit-fresh .bars i{height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--lime) var(--w), #e9eeec var(--w));}
#unit-fresh .bars b{font-weight: 650; text-align: right; font-variant-numeric: tabular-nums;}
#unit-fresh .stat-pair{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
#unit-fresh .stat-pair p{display: grid; gap: 2px;}
#unit-fresh .stat-pair b{font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;}
#unit-fresh .stat-pair span{color: var(--muted); font-size: 13px; line-height: 1.35;}
#unit-fresh .fr-sheet :is(a, button):focus-visible{outline: 2px solid var(--ink); outline-offset: 3px;}
#unit-fresh .fr-sheet-close:focus-visible{outline-offset: -6px; border-radius: 50%;}
#unit-fresh .fx{padding: 52px 0 48px;}
#unit-fresh .fx .fx-title{text-align: center;}
#unit-fresh .h-shelf{font-size: 20px; line-height: 26px; letter-spacing: -0.01em;}
#unit-fresh .h-harvest{margin-top: 4px; font-size: clamp(30px, 9.6vw, 38px); line-height: 1.1; letter-spacing: -0.035em;}
#unit-fresh .picture{--x-farm: 34px;
  --x-you: 50%;
  --hop: clamp(58px, 18vw, 72px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  height: clamp(340px, 96vw, 384px);
  margin-top: 32px;
  background: #0b2220;}
#unit-fresh .half{position: relative; margin: 0; overflow: hidden;}
#unit-fresh .half img{width: 100%; height: 100%; object-fit: cover;}
#unit-fresh .half-store img{object-position: 30% 30%;}
#unit-fresh .half-ours img{object-position: 50% 30%;}
#unit-fresh .picture::after{content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(var(--scrim) / 58%) 0%, rgb(var(--scrim) / 0%) 18%,
    rgb(var(--scrim) / 0%) 50%, rgb(var(--scrim) / 70%) 68%,
    rgb(var(--scrim) / 94%) 82%, rgb(var(--scrim)) 100%);}
#unit-fresh .half figcaption{position: absolute;
  top: 14px;
  z-index: 2;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;}
#unit-fresh .half-store figcaption{left: 16px;}
#unit-fresh .half-ours figcaption{right: 16px; text-align: right;}
#unit-fresh .route{position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  z-index: 3;
  height: 68px;}
#unit-fresh .arm{position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;}
#unit-fresh .arm > li:not(.sr),#unit-fresh .at-you{position: absolute; top: 0; transform: translateX(-50%);}
#unit-fresh .route .stop{gap: 5px; pointer-events: auto;}
#unit-fresh .route .node{display: grid;
  justify-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;}
#unit-fresh .route .stop-icon{width: 24px; height: 24px; stroke-width: 1.35;}
#unit-fresh .dot{display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgb(var(--scrim));}
#unit-fresh .at-farm{left: var(--x-farm);}
#unit-fresh .at-storage{left: calc(var(--x-farm) + (var(--x-you) - var(--x-farm)) / 3);}
#unit-fresh .at-store{left: calc(var(--x-farm) + (var(--x-you) - var(--x-farm)) * 2 / 3);}
#unit-fresh .at-you{left: var(--x-you); top: -6px;}
#unit-fresh .at-ours{left: calc(var(--x-you) + var(--hop));}
#unit-fresh .line::before,#unit-fresh .line::after{top: 35.5px;}
#unit-fresh .line-store::before,#unit-fresh .line-store::after{left: var(--x-farm); right: calc(100% - var(--x-you));}
#unit-fresh .line-ours::before,#unit-fresh .line-ours::after{left: var(--x-you); right: calc(100% - var(--x-you) - var(--hop));}
#unit-fresh .track-ours .stop-name{color: #fff;}
#unit-fresh .arrow{position: absolute;
  top: 32px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-top: 2px solid;
  border-right: 2px solid;}
#unit-fresh .arrow-store{left: calc(var(--x-you) - 22px); transform: rotate(45deg); color: var(--route-end);}
#unit-fresh .arrow-ours{left: calc(var(--x-you) + 13px); transform: rotate(-135deg); color: var(--lime);}
#unit-fresh [data-state='ready'] .arrow-store{color: var(--lime);}
#unit-fresh .stop-you .node{color: var(--t1);}
#unit-fresh .stop-you .stop-icon{width: 30px; height: 30px; stroke-width: 1.4;}
#unit-fresh .stop-you .dot{width: 13px;
  height: 13px;
  border: 2px solid var(--t1);
  background: var(--deep);}
#unit-fresh .stop-you .stop-name{color: #fff; font-weight: 600;}
#unit-fresh .tape{position: relative; margin: 0 16px; padding-top: 30px;}
#unit-fresh .tape::before{content: '';
  position: absolute;
  top: 0;
  bottom: 4px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgb(221 233 225 / 30%), rgb(221 233 225 / 12%) 30%, rgb(221 233 225 / 12%) 85%, rgb(221 233 225 / 0%));}
#unit-fresh .tape-row{position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  padding-top: 30px;}
#unit-fresh .tape-row + .tape-row{margin-top: 30px;}
#unit-fresh .tape-label{position: absolute;
  top: 0;
  left: 50%;
  padding: 2px 10px;
  transform: translateX(-50%);
  background: var(--deep);
  color: var(--t4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 14px;
  text-transform: uppercase;
  white-space: nowrap;}
#unit-fresh .tape-row > div{display: flex; flex-direction: column; gap: 6px; min-width: 0;}
#unit-fresh .tape-row > .side-store{align-items: flex-end; text-align: right;}
#unit-fresh .tape-row > .side-ours{align-items: flex-start; text-align: left;}
#unit-fresh .fig{font-size: clamp(22px, 7.2vw, 28px);
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.03em;}
#unit-fresh .tape-time .fig{line-height: 30px; text-wrap: balance;}
#unit-fresh .side-store .fig{color: var(--t2);}
#unit-fresh .side-ours .fig{color: var(--lime);}
#unit-fresh .fig small{font-size: 15px; font-weight: 500; letter-spacing: -0.01em;}
#unit-fresh .cap{color: var(--t3); font-size: 13px; line-height: 18px; text-wrap: pretty;}
#unit-fresh .closers{max-width: 360px; margin: 52px auto 0; padding: 0 24px; text-align: center;}
#unit-fresh .close-waste{color: #cfdad4; font-size: 20px; line-height: 28px; letter-spacing: -0.015em; text-wrap: balance;}
#unit-fresh .close-waste strong{color: #fff; font-weight: 600;}
#unit-fresh .close-claim{margin-top: 16px; color: var(--t3); font-size: 15px; line-height: 22px; text-wrap: balance;}
#unit-fresh .close-tag{margin-top: 8px;}
#unit-fresh .details-pill{display: flex;
  align-items: center;
  min-height: 44px;
  margin: 28px auto 0;
  padding: 0 20px;
  border: 1px solid rgb(241 244 240 / 34%);
  border-radius: 22px;
  background: none;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;}
@media (max-width: 359px){
#unit-fresh .route .stop-name{font-size: 11px;}
#unit-fresh .tape-row{column-gap: 24px;}
#unit-fresh .fig small{font-size: 13px;}
#unit-fresh .cap{font-size: 12.5px;}
}
@property --lvl{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 32.4%;
}
#unit-fresh .picture{height: clamp(420px, 114vw, 464px);}
#unit-fresh .picture::after{background: linear-gradient(180deg,
    rgb(var(--scrim) / 88%) 0%, rgb(var(--scrim) / 72%) 22%,
    rgb(var(--scrim) / 0%) 46%, rgb(var(--scrim) / 0%) 56%,
    rgb(var(--scrim) / 72%) 72%, rgb(var(--scrim) / 95%) 86%, rgb(var(--scrim)) 100%);}
#unit-fresh .half-store img{object-position: 30% 62%;}
#unit-fresh .half-ours img{object-position: 50% 58%;}
#unit-fresh .score{position: absolute;
  top: 18px;
  right: 0;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  padding: 0 16px;
  pointer-events: none;}
#unit-fresh .score > div{display: flex; flex-direction: column; gap: 6px; min-width: 0;}
#unit-fresh .score > .side-store{align-items: flex-end; text-align: right;}
#unit-fresh .score > .side-ours{align-items: flex-start; text-align: left;}
#unit-fresh .score :is(button, .tag){pointer-events: auto;}
#unit-fresh .score-name{color: #fff; font-size: 13px; font-weight: 500; line-height: 18px;}
#unit-fresh .score-fig{margin-top: 2px;
  font-size: clamp(54px, 16.4vw, 66px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;}
#unit-fresh .score-fig .unit{font-size: 0.5em; font-weight: 500; letter-spacing: -0.02em;}
#unit-fresh .score .side-store .score-fig{color: var(--t2);}
#unit-fresh .score .side-ours .score-fig{color: var(--lime);}
#unit-fresh .score .fn{vertical-align: top; top: 10px; margin-left: 1px; font-size: 11px;}
#unit-fresh .fill{--lvl: 32.4%;
  background-image: linear-gradient(to top, var(--lime) var(--lvl), var(--t2) var(--lvl));
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;}
#unit-fresh [data-state='ready'] .fill{--lvl: 84%;}
#unit-fresh [data-state='done'] .fill{animation: fr-drain 4.8s linear both;}
@keyframes fr-drain{ from { --lvl: 84%; } to { --lvl: 32.4%; } }
#unit-fresh .score-cap{max-width: 13em;
  color: rgb(255 255 255 / 82%);
  font-size: 12.5px;
  line-height: 17px;
  text-wrap: balance;}
#unit-fresh .score .tag{margin-top: 2px; background: rgb(var(--scrim) / 45%);}
@media (max-width: 359px){
#unit-fresh .score{column-gap: 20px;}
#unit-fresh .score-cap{font-size: 12px;}
}
#unit-fresh .half-ours img{object-position: 58% 50%; filter: saturate(1.06) contrast(1.04);}
#unit-fresh .half-store img{filter: saturate(0.4) brightness(0.84);}
#unit-fresh [data-state='ready'] .half-store img{filter: none;}
#unit-fresh [data-state='done'] .half-store img{animation: fr-tire 4.8s linear both;}
@keyframes fr-tire{ from { filter: none; } to { filter: saturate(0.4) brightness(0.84); } }
#unit-fresh .picture::after{background: linear-gradient(180deg,
    rgb(var(--scrim) / 88%) 0%, rgb(var(--scrim) / 72%) 22%,
    rgb(var(--scrim) / 0%) 46%, rgb(var(--scrim) / 0%) 60%,
    rgb(var(--scrim) / 62%) 74%, rgb(var(--scrim) / 92%) 84%, rgb(var(--scrim)) 100%);}
#unit-fresh .half-ours img{object-position: 50% 50%; filter: saturate(1.12) contrast(1.05);}
#unit-fresh .half-store img{object-position: 52% 50%;}
#unit-fresh .cite .tag{margin-right: 6px; border-color: var(--line); color: var(--ink);}
#unit-fresh .half-store img{filter: none;}
#unit-fresh [data-state='done'] .half-store img{animation: none;}
#unit-fresh .half-store .at-home{position: absolute; inset: 0;}
#unit-fresh [data-state='ready'] .half-store .at-home{opacity: 0;}
#unit-fresh [data-state='done'] .half-store .at-home{animation: fr-home 4.8s linear both;}
@keyframes fr-home{
  0%, 64% { opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  80%, 100% { opacity: 1; }
}
#unit-fresh .half-store .at-harvest{object-position: 50% 50%;}
#unit-fresh .route{bottom: 8px; height: 44px;}
#unit-fresh .route .stop-icon{display: none;}
#unit-fresh .route .stop{min-height: 44px;}
#unit-fresh .line::before,#unit-fresh .line::after{top: 3.5px;}
#unit-fresh .arrow{top: 0;}
#unit-fresh .at-you{top: -2px;}
#unit-fresh .picture::after{background: linear-gradient(180deg,
    rgb(var(--scrim) / 88%) 0%, rgb(var(--scrim) / 72%) 22%,
    rgb(var(--scrim) / 0%) 46%, rgb(var(--scrim) / 0%) 68%,
    rgb(var(--scrim) / 72%) 84%, rgb(var(--scrim) / 96%) 93%, rgb(var(--scrim)) 100%);}
#unit-fresh .tape{margin: 0 12px; padding-top: 36px;}
#unit-fresh .tape-row{column-gap: 28px;}
#unit-fresh .tape-time > div{container-type: inline-size;}
#unit-fresh .tape-time .fig{font-size: min(28px, 14.6cqi); line-height: 1.15; white-space: nowrap;}
#unit-fresh .details-pill{margin-top: 40px;}
#unit-fresh :is(#detail-store-keep, #detail-store-waste, #detail-claim-evidence) .ref-num{display: none;}
#unit-fresh .fx{--g: 20px;                          
  --gut: 24px;                        
  --ink-1: #fff;
  --ink-2: #a5b2ad;                   
  --t2: var(--ink-2);                 
  --scrim: 16 42 40;                  
  --head: 32px;
  --fig: 88px;
  --title: 22px;
  --cap: 15px;
  --label: 13px;
  --photo-h: 264px;
  --tile: calc(50vw - 1px);           
  
  --rise: calc(var(--photo-h) * 0.78 - var(--tile) * 0.853 + 4px);
  --home-h: 201%;                     
  --home-x: 35%;                      
  padding: 40px 0 40px;}
#unit-fresh .fx .fx-title{margin: 0 var(--g);}
#unit-fresh .h-shelf,#unit-fresh .h-harvest{font-size: var(--head);
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: -0.03em;}
#unit-fresh .h-shelf{padding-right: 0.11em; color: var(--ink-2);}
#unit-fresh .h-harvest{position: static; width: auto; margin: 0; color: var(--ink-1);}
#unit-fresh .h-ne{position: relative;
  display: inline-block;
  margin: 0;
  color: var(--ink-2);
  font-size: 0;
  font-weight: inherit;}
#unit-fresh .h-ne::before{content: '='; font-size: var(--head); line-height: 1.125;}
#unit-fresh .h-ne::after{content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--head) * 0.2407);
  width: calc(var(--head) * 0.1);
  height: calc(var(--head) * 0.58);
  background: currentColor;
  transform: translateX(-50%) rotate(30deg);}
#unit-fresh .picture{--x-farm: calc(var(--g) + 16px);
  height: auto;
  margin-top: 32px;
  grid-template-rows: auto var(--photo-h) auto;
  column-gap: 2px;
  row-gap: 0;
  background: none;}
#unit-fresh .picture::after{display: none;}
#unit-fresh .journey-frame{grid-column: 1 / -1; grid-row: 1 / -1; pointer-events: none;}
#unit-fresh .score{position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 3;
  grid-column: 1 / -1;
  grid-row: 1;
  column-gap: var(--gut);
  padding: 0 var(--g);}
#unit-fresh .score > div{gap: 0;}
#unit-fresh .score-name{color: var(--ink-1);
  font-size: var(--cap);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;}
#unit-fresh .score .side-store .score-name{color: var(--ink-2);}
#unit-fresh .score-fig{margin-top: 2px;
  font-size: var(--fig);
  line-height: 0.86;
  letter-spacing: -0.045em;}
#unit-fresh .score-fig .unit{font-weight: 600; letter-spacing: -0.01em;}
#unit-fresh .fill{padding-top: 0.07em;}
#unit-fresh .score .side-ours .score-fig{margin-left: -0.04em;}
#unit-fresh .score .side-ours .score-fig .unit{margin-left: -0.1em;}
#unit-fresh .score .side-ours .score-name{margin-left: -0.05em;}
#unit-fresh .score-cap{max-width: none;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: var(--cap);
  line-height: 20px;
  letter-spacing: -0.02em;
  text-wrap: balance;}
#unit-fresh .score-status{display: flex; margin-top: 8px;}
#unit-fresh .score .tag{height: 20px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid rgb(221 233 225 / 26%);
  border-radius: 5px;
  background: none;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;}
#unit-fresh .score-cap .fn,#unit-fresh .cap .fn{top: 0;
  margin-left: 1px;
  padding: 0;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  vertical-align: super;}
#unit-fresh .side-store .score-cap .fn{margin-right: calc(-1px - 0.4em);}
#unit-fresh .side-store .cap .fn{margin-right: calc(-1px - 0.59em);}
#unit-fresh .fn::after{inset: auto; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);}
#unit-fresh .half-store{grid-row: 2; grid-column: 1;}
#unit-fresh .half-ours{grid-row: 2; grid-column: 2;}
#unit-fresh .half::after{content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;}
#unit-fresh .half-store::after{background: linear-gradient(180deg,
    rgb(var(--scrim)) 0, rgb(var(--scrim) / 94%) calc(var(--rise) - 24px),
    rgb(var(--scrim) / 82%) calc(var(--rise) - 4px), rgb(var(--scrim) / 62%) calc(var(--rise) + 16px),
    rgb(var(--scrim) / 40%) calc(var(--rise) + 36px), rgb(var(--scrim) / 20%) calc(var(--rise) + 56px),
    rgb(var(--scrim) / 7%) calc(var(--rise) + 76px), rgb(var(--scrim) / 0%) calc(var(--rise) + 92px),
    rgb(var(--scrim) / 0%) calc(100% - 64px), rgb(var(--scrim) / 60%) calc(100% - 44px),
    rgb(var(--scrim) / 92%) calc(100% - 32px), rgb(var(--scrim)) calc(100% - 26px));}
#unit-fresh .half-ours::after{background: linear-gradient(180deg,
    rgb(var(--scrim)) 0, rgb(var(--scrim) / 55%) 7%, rgb(var(--scrim) / 0%) 17%,
    rgb(var(--scrim) / 0%) calc(100% - 64px), rgb(var(--scrim) / 60%) calc(100% - 44px),
    rgb(var(--scrim) / 92%) calc(100% - 32px), rgb(var(--scrim)) calc(100% - 26px));}
#unit-fresh .half-store .at-harvest{object-position: 50% 58%;}
#unit-fresh .half-ours img{object-position: 50% 78%;}
#unit-fresh .half-store .at-home{inset: auto;
  top: calc(var(--rise) - var(--home-h) * 0.3);
  left: 0;
  width: 100%;
  height: var(--home-h);
  object-position: var(--home-x) 0%;
  filter: brightness(0.7) contrast(1.1) saturate(0.88);
  transform-origin: 50% 50%;}
#unit-fresh .route{position: relative;
  inset: auto;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 3;
  height: 44px;
  margin-top: -24px;}
#unit-fresh .route .stop-name{color: var(--ink-2); font-size: var(--label); line-height: 16px; letter-spacing: 0;}
#unit-fresh .route .track-ours .stop-name,#unit-fresh .route .stop-you .stop-name{color: var(--ink-1); font-weight: 600;}
#unit-fresh .route .stop-you{gap: 3px;}
#unit-fresh .picture .line::before,#unit-fresh .picture .line::after{top: 3px; height: 3px; border-radius: 3px;}
#unit-fresh .picture .arrow{border-top-width: 2.5px; border-right-width: 2.5px;}
@keyframes fr-drain{
  0%, 10% { --lvl: 84%; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  78%, 100% { --lvl: 32.4%; }
}
#unit-fresh .picture .line::before{background: rgb(221 233 225 / 16%); opacity: 1;}
#unit-fresh .picture .line::after{opacity: 1; transform: none; clip-path: inset(0);}
#unit-fresh [data-state] .line-store::after{background: linear-gradient(90deg, var(--lime), var(--arrive-1) 34%, var(--arrive-2) 67%, var(--route-end));}
#unit-fresh [data-state] .line-ours::after{background: var(--lime);}
#unit-fresh [data-state='ready'] .line-store::after{clip-path: inset(0 100% 0 0);}
#unit-fresh [data-state='ready'] .line-ours::after{clip-path: inset(0 0 0 100%);}
#unit-fresh [data-state='ready'] .arrow{opacity: 0;}
#unit-fresh [data-state='done'] .arrow-store{animation: fr-arrow-in 0.3s ease-out 3.5s both;}
#unit-fresh [data-state='done'] .arrow-ours{animation: fr-arrow-in 0.3s ease-out 0.65s both;}
@keyframes fr-arrow-in{ from { opacity: 0; } }
@keyframes fr-store-trace{
  0%, 10% { clip-path: inset(0 100% 0 0); }
  20%, 40% { clip-path: inset(0 66.667% 0 0); }
  49%, 66% { clip-path: inset(0 33.333% 0 0); }
  78%, 100% { clip-path: inset(0); }
}
@keyframes fr-direct-trace{ from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes fr-home{
  0%, 70% { opacity: 0; transform: scale(1.04); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  78%, 100% { opacity: 1; transform: none; }
}
#unit-fresh .tape{margin: 0 var(--g); padding-top: 16px;}
#unit-fresh .tape::before{display: none;}
#unit-fresh .tape-row{column-gap: var(--gut); row-gap: 8px; padding-top: 0;}
#unit-fresh .tape-label{position: static;
  grid-column: 1 / -1;
  justify-self: center;
  padding: 0;
  transform: none;
  background: none;
  color: var(--ink-2);
  font-size: var(--label);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: none;}
#unit-fresh .tape-row > div{gap: 4px;}
#unit-fresh .tape-time .fig{font-size: var(--title); line-height: 28px; letter-spacing: -0.03em;}
#unit-fresh .tape .side-store .fig{color: var(--ink-2);}
#unit-fresh .tape .side-ours .fig{margin-left: -0.07em; color: var(--ink-1);}
#unit-fresh .cap{color: var(--ink-2); font-size: var(--cap); line-height: 20px; letter-spacing: -0.02em; text-wrap: balance;}
#unit-fresh .details-pill{margin-top: 32px;
  padding: 0 22px;
  border: 0;
  background: rgb(241 244 240 / 10%);
  font-size: var(--cap);
  font-weight: 500;
  letter-spacing: -0.01em;}
#unit-fresh .fx .details-pill:focus-visible{border-radius: 22px;}
#unit-fresh .stop-pop{width: min(calc(100vw - 24px), 406px); padding-right: 16px;}
#unit-fresh .pop-kicker,#unit-fresh .pop-title{padding-right: 32px;}
#unit-fresh .pop-close{top: 2px; right: 2px; width: 44px; height: 44px;}
#unit-fresh .pop-body p,#unit-fresh .pop-body small,#unit-fresh .pop-note{text-wrap: pretty;}
@media (max-width: 700px){
#unit-fresh .stop-pop{width: calc(100vw - 24px);}
#unit-fresh .fr-sheet-panel{width: 100%;}
}
@media (min-width: 414px){
#unit-fresh .fx{--photo-h: 296px;}
}
@media (min-width: 441px) and (max-width: 700px){
#unit-fresh .fx{--photo-h: calc(var(--tile) * 1.352);}
}
@media (min-width: 701px){
#unit-fresh .fx{--tile: 214px;}
}
@media (max-width: 389px){
#unit-fresh .fx{--gut: 20px;}
}
@media (max-width: 374px){
#unit-fresh .fx{--g: 16px;}
}
@media (max-width: 359px){
#unit-fresh .journey-frame{margin-top: calc(19px + 2px + var(--fig) * 0.86 + 4px);}
#unit-fresh .fx{--gut: 20px; --head: 28px; --fig: 72px; --title: 20px; --cap: 14px; --photo-h: 250px;}
#unit-fresh .score-name,#unit-fresh .score-cap,#unit-fresh .cap{line-height: 19px;}
#unit-fresh .route .stop-name{font-size: 11px;}
#unit-fresh .picture{--x-farm: calc(var(--g) + 12px);}
}
#unit-fresh .half-ours img{object-position: 50% 50%; filter: none;}
#unit-fresh :is(#detail-store-keep, #detail-store-waste, #detail-claim-evidence) .ref-num{display: inline-grid;}
#unit-fresh .tape-row + .tape-row{margin-top: 32px;}
#unit-fresh .tape .fig{font-size: var(--title); line-height: 28px; letter-spacing: -0.03em; white-space: nowrap;}
#unit-fresh .tape .fig small{color: var(--ink-1); font-size: var(--cap); font-weight: 500; letter-spacing: -0.02em;}
#unit-fresh .fig .fn,#unit-fresh .close-waste .fn{top: 0;
  margin-left: 1px;
  padding: 0;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: super;}
#unit-fresh .tape .side-store .fig .fn{margin-right: calc(-1px - 0.62em);}
#unit-fresh .tape .tag{margin: 0;}
#unit-fresh .closers{margin: 40px var(--g) 0; padding: 0; border: 0; text-align: center;}
#unit-fresh .close-waste{color: var(--ink-2); font-size: 20px; line-height: 28px; letter-spacing: -0.02em; text-wrap: balance;}
#unit-fresh .close-waste strong{color: var(--ink-1); font-weight: 600;}
#unit-fresh .close-waste + .close-waste{margin-top: 24px;}
#unit-fresh .close-tag{margin-top: 8px;}
#unit-fresh .details-pill{margin-top: 40px;}
@media (max-width: 359px){
#unit-fresh .close-waste{font-size: 18px; line-height: 26px;}
}
#unit-fresh .fx{--g: var(--oh-gutter);
  --gut: 2px;                         
  --inner: 12px;                      
  --ink-1: #fff;
  --ink-2: var(--oh-soft-dark);
  --t1: #fff;
  --t2: var(--oh-soft-dark);
  --head: var(--oh-head);
  --title: var(--oh-item);
  --cap: var(--oh-small);
  --label: var(--oh-micro);
  --name: var(--oh-item);
  --name-lh: 26px;
  
  --fig: min(96px, calc((var(--tile) - 2 * var(--g)) / 1.74));
  padding: var(--oh-space) 0;
  color: #fff;}
#unit-fresh .fx .fx-title{margin: 0 var(--g); text-align: left;}
#unit-fresh .h-shelf,#unit-fresh .h-harvest{font-weight: 500; line-height: 1.08; letter-spacing: -0.045em;}
#unit-fresh .h-shelf{padding-right: 0;}
#unit-fresh .h-shelf,#unit-fresh .h-harvest{margin-left: -0.05em;}
#unit-fresh .h-ne::before{line-height: 1.08;}
#unit-fresh .h-ne::after{bottom: calc(var(--head) * 0.2185); width: calc(var(--head) * 0.082);}
#unit-fresh .score{padding: 0;}
#unit-fresh .tape{margin: 0; padding-top: 24px;}
#unit-fresh .score > div,#unit-fresh .tape-row > div{padding: 0 var(--inner) 0 var(--g);}
#unit-fresh .score > .side-ours,#unit-fresh .tape-row > .side-ours{padding-right: var(--g);}
#unit-fresh .score > .side-store,#unit-fresh .tape-row > .side-store{align-items: flex-start; text-align: left;}
#unit-fresh .score-name,#unit-fresh .score .side-ours .score-name{margin-left: 0; font-size: var(--name); font-weight: 500; line-height: var(--name-lh); letter-spacing: -0.02em;}
#unit-fresh .score-fig{font-weight: 500; letter-spacing: -0.05em;}
#unit-fresh .score .side-store .score-fig,#unit-fresh .score .side-ours .score-fig{margin-left: -0.04em;}
#unit-fresh .score-fig .unit,#unit-fresh .score .side-ours .score-fig .unit{margin-left: 0; font-weight: 500; letter-spacing: -0.02em;}
#unit-fresh .score-cap,#unit-fresh .cap{letter-spacing: 0;}
#unit-fresh .fn,#unit-fresh .score-cap .fn,#unit-fresh .cap .fn,#unit-fresh .fig .fn,#unit-fresh .close-waste .fn{font-size: var(--oh-micro);}
#unit-fresh .side-store .score-cap .fn,#unit-fresh .side-store .cap .fn,#unit-fresh .tape .side-store .fig .fn{margin-right: 0;}
#unit-fresh .picture{--x-farm: calc(var(--g) + 13px);}
#unit-fresh .route .stop-name{font-size: var(--label);}
#unit-fresh .picture .line::before{background: var(--oh-line-dark);}
#unit-fresh .tape-row + .tape-row{margin-top: 32px;}
#unit-fresh .tape-label{justify-self: start;
  margin-left: var(--g);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;}
#unit-fresh .tape .fig,#unit-fresh .tape-time .fig{font-size: var(--title); font-weight: 500; line-height: 26px; letter-spacing: -0.02em;}
#unit-fresh .tape .side-ours .fig{margin-left: 0;}
#unit-fresh .tape .fig small{font-size: var(--cap); font-weight: 400; letter-spacing: 0;}
#unit-fresh .closers{margin: 40px var(--g) 0; text-align: left;}
#unit-fresh .close-waste{font-size: var(--oh-item); line-height: 28px; text-wrap: pretty;}
#unit-fresh .close-waste strong{font-weight: 500;}
#unit-fresh .details-pill{display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 2 * var(--g));
  min-height: 54px;
  margin: 40px var(--g) 0;
  padding: 0 20px;
  border: 0;
  border-radius: 100px;
  background: none;
  box-shadow: inset 0 0 0 1.5px #fff;
  color: #fff;
  font-family: var(--oh-font);
  font-size: var(--oh-button);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;}
#unit-fresh .fx .details-pill:focus-visible{border-radius: 100px;}
#unit-fresh .stop-pop{border-radius: var(--oh-corner);}
#unit-fresh .pop-kicker,#unit-fresh .pop-body b{color: var(--oh-muted); font-size: var(--oh-micro); font-weight: 600; letter-spacing: 0.1em;}
#unit-fresh .pop-title{font-size: var(--oh-row); font-weight: 500; letter-spacing: -0.025em;}
#unit-fresh .pop-body{font-size: var(--oh-small);}
#unit-fresh .pop-body small,#unit-fresh .pop-note{color: var(--oh-muted); font-size: var(--oh-micro);}
#unit-fresh .fr-sheet-head h2{font-size: var(--oh-sub); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em;}
#unit-fresh .topic,#unit-fresh .topic:last-child{border-color: var(--oh-line);}
#unit-fresh .topic > summary{gap: 20px; min-height: 62px; padding: 16px 0; font-size: var(--oh-row); letter-spacing: -0.025em; line-height: 1.3;}
#unit-fresh .topic > summary::after,#unit-fresh .topic[open] > summary::after{content: '';
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--oh-plus);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);}
#unit-fresh .topic[open] > summary::after{transform: rotate(45deg);}
#unit-fresh .more-section + .more-section{border-color: var(--oh-line);}
#unit-fresh .more-label{color: var(--oh-muted); font-size: var(--oh-micro); font-weight: 600; letter-spacing: 0.1em;}
#unit-fresh .ref-num{font-size: var(--oh-micro);}
#unit-fresh .more-p{font-size: var(--oh-body); line-height: 1.5;}
#unit-fresh .more-sub,#unit-fresh .more-list li{font-size: var(--oh-small); line-height: 1.5;}
#unit-fresh .more-list strong{font-size: var(--oh-row); font-weight: 500; letter-spacing: -0.025em;}
#unit-fresh .cite{color: var(--oh-muted); font-size: var(--oh-micro);}
#unit-fresh .cite a{text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 500;}
#unit-fresh .bars p{font-size: var(--oh-micro);}
#unit-fresh .bars span{color: var(--oh-muted);}
#unit-fresh .bars b{font-weight: 600;}
#unit-fresh .stat-pair b{font-size: var(--oh-sub); font-weight: 500;}
#unit-fresh .stat-pair span{color: var(--oh-muted); font-size: var(--oh-micro);}
@media (max-width: 359px){
#unit-fresh .fx{--name: var(--oh-row); --name-lh: 22px; --inner: 4px;}
#unit-fresh .score > .side-ours,#unit-fresh .tape-row > .side-ours{padding-right: 12px;}
#unit-fresh .journey-frame{margin-top: calc(var(--name-lh) + 2px + var(--fig) * 0.86 + 4px);}
}
#unit-fresh .tape{position: relative; padding-top: 28px; padding-bottom: 8px;}
#unit-fresh .tape::before{display: block;
  content: '';
  position: absolute;
  top: 4px;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  background: var(--oh-line-dark);}
#unit-fresh .tape-label{position: relative;
  left: auto;
  z-index: 1;
  justify-self: center;
  margin: 0;
  padding: 4px 12px;
  background: var(--deep);}
#unit-fresh .tape-row > .side-store{align-items: flex-end; text-align: right; padding: 0 12px 0 var(--g);}
#unit-fresh .tape-row > .side-ours{padding: 0 var(--g) 0 12px;}
#unit-fresh .tape .fig,#unit-fresh .tape-time .fig{font-size: var(--oh-sub); line-height: 30px; letter-spacing: -0.03em;}
#unit-fresh .tape .side-ours .fig{color: var(--oh-lime);}
#unit-fresh .tape .fig small{color: var(--ink-2);}
#unit-fresh .tape .side-store .fig .fn{margin-right: calc(-1px - 0.62em);}
#unit-fresh .side-store .cap .fn{margin-right: calc(-1px - 0.62em);}
@media (max-width: 389px){
#unit-fresh .tape .fig,#unit-fresh .tape-time .fig{font-size: var(--oh-item); line-height: 26px; letter-spacing: -0.02em;}
}
@media (max-width: 359px){
#unit-fresh .tape .fig,#unit-fresh .tape-time .fig{font-size: var(--oh-row);}
}
#unit-fresh .fx{--seam-gap: 16px;}
#unit-fresh .score > .side-ours{padding-left: var(--seam-gap);}
#unit-fresh .tape-row > .side-store{padding-right: var(--seam-gap);}
#unit-fresh .tape-row > .side-ours{padding-left: var(--seam-gap);}
#unit-fresh .tape{padding-top: 24px;}
#unit-fresh .tape-row + .tape-row{margin-top: 40px;}
#unit-fresh .tape::before{top: -8px;
  background: linear-gradient(180deg, var(--oh-line-dark) calc(100% - 28px), rgb(255 255 255 / 0%));}
#unit-fresh .tape .fig,#unit-fresh .tape-time .fig{letter-spacing: -0.04em;}
#unit-fresh .tape .side-ours .fig small,#unit-fresh .tape .side-ours .cap{color: #fff;}
@media (max-width: 389px){
#unit-fresh .tape .fig,#unit-fresh .tape-time .fig{letter-spacing: -0.02em;}
}
@media (max-width: 359px){
#unit-fresh .fx{--seam-gap: 12px;}
}
#unit-fresh .fx{--tile: calc(min(100vw, 430px) / 2 - 1px - var(--g) - var(--seam-gap));
  --fig: min(104px, calc(var(--tile) / 1.74));
  --photo-h: calc(var(--tile) * 1.363);}
#unit-fresh #detail-claim-evidence .ref-num{display: none;}
#unit-fresh .picture{margin-top: 40px;}
#unit-fresh .score{padding-bottom: 24px;}
#unit-fresh .half{border-radius: var(--oh-corner);}
#unit-fresh .half-store{margin: 0 var(--seam-gap) 0 var(--g);}
#unit-fresh .half-ours{margin: 0 var(--g) 0 var(--seam-gap);}
#unit-fresh .half-store::after,#unit-fresh .half-ours::after{display: none;}
#unit-fresh .half-ours img{object-position: 50% 50%;}
#unit-fresh .half-store .at-harvest{object-position: 50% 72%;}
#unit-fresh .half-store .at-home{inset: auto;
  top: -9%;
  left: -9%;
  width: 118%;
  max-width: none;
  height: 118%;
  object-position: 50% 44%;
  filter: none;}
#unit-fresh .picture{--hop: clamp(48px, 15.4vw, 66px);}
#unit-fresh .route{margin-top: 24px;}
#unit-fresh .picture .arrow{display: none;}
#unit-fresh .picture .line::before,#unit-fresh .picture .line::after{height: 2px;}
#unit-fresh .route .track-ours .stop-name,#unit-fresh .route .stop-you .stop-name{font-weight: 500;}
#unit-fresh .tag,#unit-fresh .score .tag{height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--oh-soft-dark);
  font-size: var(--oh-micro);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 16px;}
#unit-fresh .cite .tag{border: 0; color: var(--oh-muted); font-weight: 500;}
#unit-fresh .score-status{margin-top: 4px;}
#unit-fresh .fn,#unit-fresh .score-cap .fn,#unit-fresh .cap .fn,#unit-fresh .fig .fn,#unit-fresh .close-waste .fn{font-weight: 400;}
#unit-fresh .tape{padding-top: 32px;}
#unit-fresh .closers{margin-top: 48px;}
#unit-fresh .details-pill{display: inline-flex;
  width: auto;
  min-height: 44px;
  margin: 16px var(--g) 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--oh-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;}
#unit-fresh .fx .details-pill:focus-visible{border-radius: 6px;}
#unit-fresh .half-store .at-home{top: -16%;
  left: -15%;
  width: 130%;
  height: 130%;
  object-position: 50% 45%;}
#unit-fresh .picture{--x-farm: calc(var(--g) + 15px);}
@media (max-width: 359px){
#unit-fresh .picture{--x-farm: calc(var(--g) + 12px);}
}
#unit-fresh .fx{--photo-h: calc(min(100vw, 430px) / 2 * 1.28);}
#unit-fresh .half{border-radius: 0;}
#unit-fresh .half-store,#unit-fresh .half-ours{margin: 0;}
#unit-fresh .picture{grid-template-rows: var(--photo-h) auto auto; margin-top: 32px;}
#unit-fresh .half-store,#unit-fresh .half-ours{grid-row: 1;}
#unit-fresh .score{grid-row: 2; padding-top: 20px; padding-bottom: 8px;}
#unit-fresh .route{grid-row: 3;}
@media (max-width: 359px){
#unit-fresh .journey-frame{margin-top: 0;}
}
#unit-fresh .half-store .at-home{top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;}
#unit-fresh .half-store .at-harvest,#unit-fresh .half-ours img{object-position: 50% 50%;}
#unit-fresh .tape-row > .side-store{align-items: flex-start; text-align: left; padding: 0 var(--seam-gap) 0 var(--g);}
#unit-fresh .tape-label{justify-self: start; margin-left: var(--g); padding: 0; background: none;}
#unit-fresh .fill{padding-top: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  animation: none !important;}
#unit-fresh .score .side-store .score-fig{color: var(--oh-soft-dark);}
@keyframes fr-fig-fade{
  0%, 10% { color: var(--oh-lime); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  78%, 100% { color: var(--oh-soft-dark); }
}
#unit-fresh [data-state='ready'] .side-store .score-fig{color: var(--oh-lime);}
#unit-fresh [data-state='done']:not([data-still]) .side-store .score-fig{animation: fr-fig-fade 4.8s linear both;}
#unit-fresh .journey-frame{grid-row: 1; margin-top: 0;}
@keyframes fr-cap-in{
  0%, 74% { opacity: 0; }
  80%, 100% { opacity: 1; }
}
#unit-fresh [data-state='ready'] .side-store .score-cap{opacity: 0;}
#unit-fresh [data-state='done']:not([data-still]) .side-store .score-cap{animation: fr-cap-in 4.8s linear both;}
#unit-fresh .picture{margin-top: 32px;}
#unit-fresh .score{padding-top: 24px;}
#unit-fresh .journey-frame{grid-row: 2;}
#unit-fresh .dot{color: inherit;}
@media (min-width: 700px){
#unit-fresh .fx{--seam-gap: 24px;
    --cap: var(--oh-body);
    --tile: calc(50vw - 1px - var(--g) - var(--seam-gap));
    --fig: min(132px, calc(var(--tile) / 1.74));
    --photo-h: calc(var(--tile) * 1.1);}
#unit-fresh .picture{--hop: 15.4vw;}
#unit-fresh .journey-frame{grid-row: 2 / -1;}
#unit-fresh .tape .fig,#unit-fresh .tape-time .fig{line-height: 1.25;}
#unit-fresh .fr-sheet-panel{width: min(100%, 560px);}
}
@media (min-width: 1000px){
#unit-fresh .fx{--g: max(var(--oh-gutter), calc(50vw - 600px));
    --fig: min(168px, calc(var(--tile) / 1.74));
    --photo-h: min(calc(var(--tile) * 0.82), 480px);}
#unit-fresh .half-store .at-home{top: -9%; left: -9%; width: 118%; height: 118%; object-position: 50% 47%;}
#unit-fresh .half-ours img{object-position: 50% 60%;}
}
@media (min-width: 700px){
#unit-fresh .fx{--photo-h: calc((50vw - 1px - var(--g)) * 1.02);}
#unit-fresh .picture{margin-top: 40px;}
#unit-fresh .journey-frame{grid-row: 2;}
#unit-fresh .half-store{margin-left: var(--g); border-radius: var(--oh-corner) 0 0 var(--oh-corner);}
#unit-fresh .half-ours{margin-right: var(--g); border-radius: 0 var(--oh-corner) var(--oh-corner) 0;}
#unit-fresh .half-store .at-home{top: 0; left: 0; width: 100%; height: 100%; object-position: 50% 50%;}
#unit-fresh .half-store .at-harvest,#unit-fresh .half-ours img{object-position: 50% 50%;}
#unit-fresh .score{padding-top: 32px;}
}
@media (min-width: 1000px){
#unit-fresh .fx{--photo-h: min(calc((50vw - 1px - var(--g)) * 0.8), 480px);}
#unit-fresh .picture{margin-top: 48px;}
#unit-fresh .half-store .at-home{top: 0; left: 0; width: 100%; height: 100%; object-position: 50% 50%;}
#unit-fresh .half-ours img{object-position: 50% 50%;}
}