/* ==========================================================================
   Skanli / work.css
   The Work index (work/index.html) and the two case studies
   (work/nearblend/index.html, work/zer0/index.html). Owner: work page builder.
   Builds on the tokens and components in site.css, which is never edited here.
   Classes: work- (Work index), case- (both case studies, the template for later
   case pages), nb- (NearBlend only), z- (Zer0 only).

    1  Work index: filters
    2  Project rows (Work index and the "Next project" block)
    3  Case head: title, line and facts
    4  Case device frames: fill, dark, crop
    5  Fig. 01: the device wall
    6  Overview facts (NearBlend) and scope grid (Zer0)
    7  Gallery heads and plates
    8  NearBlend galleries
    9  Zer0 galleries
   10  Light and dark comparison
   11  Round 3 case components: browser frame, store block, listing strip,
       web-and-app pair, phone flow row (owner: components; SYSTEM.md 13)
   12  Case pages: WorkDail and NearBlend (owner: pages-1)
   13  Case pages: AnyTool, Chai Mahel, Dabba, Lumen Greens (owner: pages-2)
   ========================================================================== */

/* 1 ─ Work index: filters ──────────────────────────────────────────────── */
/* Shown by work.js. Without the script the filters stay hidden and every project shows. */
.work-tools{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.work-filter{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.work-filter__btn{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;
  background:var(--paper);border:1px solid var(--field);border-radius:0;color:var(--ink);
  font:500 15px/1.2 var(--font-sans);letter-spacing:-.005em;
  transition:background-color var(--dur-1) linear,color var(--dur-1) linear,border-color var(--dur-1) linear;
}
.work-filter__btn::before{content:"";flex:none;width:10px;height:10px;border:1px solid var(--field);background:var(--paper)}
.work-filter__btn:hover{border-color:var(--ink)}
.work-filter__btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.work-filter__btn[aria-pressed="true"]::before{background:var(--lime);border-color:var(--lime)}
.work-filter__count{font:500 var(--fs-micro)/16px var(--font-mono);letter-spacing:.06em;color:var(--ink-3)}
.work-filter__btn[aria-pressed="true"] .work-filter__count{color:var(--on-dark-2)}
.work-count{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
@media (max-width:1099px){
  .work-tools{align-items:flex-start}
  .work-filter{justify-content:flex-start}
}
@media (max-width:699px){
  .work-tools{align-items:stretch}
  .work-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}

.work-index{padding-top:var(--space-8)}

/* 2 ─ Project rows ─────────────────────────────────────────────────────── */
/* A .project-card laid out as a wide editorial row: cover on 7 columns, the
   numeral, type, title, line, badges and link on 4. --flip swaps the sides. */
.work-list{display:grid;row-gap:clamp(64px,8vw,120px)}
.work-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);scroll-margin-top:24px}
.work-row > .project-card__media{grid-column:1 / span 7;grid-row:1}
.work-row > .project-card__body{
  grid-column:9 / span 4;grid-row:1;justify-content:space-between;gap:40px;
  padding-top:16px;border-top:1px solid var(--line-strong);
}
.work-row--flip > .project-card__media{grid-column:6 / span 7}
.work-row--flip > .project-card__body{grid-column:1 / span 4}
.work-row__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.work-row__num{display:block;font:300 clamp(3.25rem,2.6rem + 2.2vw,4.75rem)/.78 var(--font-serif);letter-spacing:-.045em;color:var(--text);margin-left:-.04em}
.work-row__type{padding-top:2px;text-align:right}
.work-row__main{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.work-row .project-card__title{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.022em}
.work-row .project-card__line{max-width:36ch;font-size:var(--fs-lede);line-height:1.45;letter-spacing:-.01em}
.work-row .project-card__foot{margin-top:4px}
.work-row .project-card__arrow{width:22px;height:22px}
/* The "Read the case study" cue is part of the whole-card link, so it follows the card's hover */
.work-row__cue{margin-top:4px;pointer-events:none}
.project-card:hover .work-row__cue > span{background-size:100% 100%;text-decoration-color:transparent;color:var(--ink)}
.project-card:hover .work-row__cue svg{transform:translateX(3px)}
/* The live-site link sits above the whole-card link, so it stays its own target */
.work-row .link-arrow--ext{position:relative;z-index:calc(var(--z-raised) + 1)}
/* Rows without a case page are not links: no zoom on hover */
.work-row--static:hover .project-card__media > img{transform:none}
/* Arriving from work/index.html#<slug>: mark the card */
.work-row:target > .project-card__body{border-top-width:3px;padding-top:14px}
.work-row:target .work-row__type{background:var(--lime);color:var(--ink);box-shadow:0 0 0 4px var(--lime)}

@media (min-width:900px) and (max-width:1099px){
  .work-row > .project-card__body{grid-column:8 / span 5}
  .work-row--flip > .project-card__media{grid-column:6 / span 7}
  .work-row--flip > .project-card__body{grid-column:1 / span 5}
}
@media (max-width:899px){
  .work-row > .project-card__media,.work-row--flip > .project-card__media{grid-column:1 / -1;grid-row:auto}
  .work-row > .project-card__body,.work-row--flip > .project-card__body{
    grid-column:1 / -1;grid-row:auto;margin-top:24px;
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:20px;
  }
  .work-row__top{grid-column:1 / span 3;flex-direction:column;justify-content:flex-start;gap:18px}
  .work-row__type{text-align:left}
  .work-row__main{grid-column:4 / -1}
}
@media (max-width:699px){
  .work-row{grid-template-columns:minmax(0,1fr)}
  .work-row > .project-card__body,.work-row--flip > .project-card__body{grid-template-columns:minmax(0,1fr);margin-top:20px;padding-top:14px}
  .work-row__top{grid-column:1;flex-direction:row;align-items:baseline;justify-content:space-between}
  .work-row__type{text-align:right}
  .work-row__main{grid-column:1}
  .work-row__num{font-size:2.5rem}
  .work-row .project-card__line{font-size:var(--fs-body)}
}

/* "Next project" block at the end of a case study (a .work-row on a band of its own) */
.case-next .work-row__kicker{margin-bottom:var(--space-6)}

/* 3 ─ Case head ────────────────────────────────────────────────────────── */
/* Title on its own line; under it, the line (left) and the facts (right), each on an Ink rule */
.case-head{border-bottom:0;padding-bottom:var(--space-7)}
.case-head .page-head__title{grid-column:1 / -1}
.case-head .page-head__intro{grid-column:1 / span 6;align-self:start;margin-top:40px;padding-top:16px;border-top:1px solid var(--line-strong)}
.case-head .page-head__aside{justify-self:stretch;margin-top:32px}
@media (min-width:1100px){
  .case-head .page-head__aside{grid-column:8 / span 5;grid-row:3;align-self:start;margin-top:40px}
}
@media (max-width:1099px){ .case-head .page-head__intro{grid-column:1 / -1} }
@media (max-width:699px){ .case-head .page-head__intro{margin-top:28px} }
.case-meta{border-top:1px solid var(--line-strong)}
.case-meta__row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;min-height:52px;padding:10px 0;border-bottom:1px solid var(--line)}
.case-meta dt{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.case-meta dd{margin:0;font-size:16px;line-height:1.45;color:var(--text)}
/* Link buttons: an even grid (2 x 2 beside the title, one row of 4 on tablet) */
.case-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
.case-links .btn{justify-content:space-between;padding:0 16px}
.btn--ext:hover .btn__icon{transform:translate(2px,-2px)}
@media (min-width:700px) and (max-width:1099px){ .case-links{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:399px){ .case-links .btn{padding:0 12px} }

/* 4 ─ Case device frames ───────────────────────────────────────────────── */
/* Phone with a fixed phone shape. The screen keeps the app's own background
   (--screen) below an image that is shorter than the frame (NearBlend's screens
   are cut below the status bar). */
.case-device--fill{display:flex;flex-direction:column;aspect-ratio:9 / 16}
.case-screen{flex:1 1 auto;min-height:0;overflow:hidden;border-radius:clamp(12px,10%,32px);background:var(--screen,#101115)}
/* The bezel, as on .device--phone > img in site.css: 2.6% of the phone's own width */
.case-device--fill > .case-screen{margin:2.6%}
.case-screen > img{width:100%;height:auto}
/* Dark frame for dark screens (on a Canvas plate, or on an Ink plate inside .on-dark) */
.case-device--dark{background:var(--moss);border-color:var(--ink)}
.on-dark .case-device--dark{border-color:var(--rule-dark);box-shadow:none}
.device--browser.case-device--dark::before{background:radial-gradient(circle at 4px 4px,var(--rule-dark) 3px,transparent 3.5px) 0 0 / 14px 8px repeat-x}
/* A cut-out detail of a screen */
.case-crop{padding:0;border-radius:14px;overflow:hidden}

/* 5 ─ Fig. 01: the device wall ─────────────────────────────────────────── */
/* A row of phones rising from the bottom edge of the plate, in a shallow arch.
   The plate crops the phones at the bottom only, never at the sides. Each phone
   sets --k: how far it sits below the top, in phone widths. Phones marked
   .case-wall__extra drop out on phones. */
.case-figure{padding-bottom:var(--section-pad)}
.case-wall{--wall-ratio:2.2;--wall-w:27%;--wall-gap:4%;--wall-top:2.4%}
.case-wall__clip{
  position:relative;overflow:hidden;aspect-ratio:var(--wall-ratio);
  display:flex;justify-content:center;align-items:flex-start;gap:var(--wall-gap);padding-top:var(--wall-top);
}
.case-wall__clip > .device{flex:none;width:var(--wall-w);margin-top:calc(var(--k,0) * var(--wall-w))}
.case-wall--five{--wall-ratio:2.8;--wall-w:17%;--wall-gap:2.5%}
@media (max-width:1099px){ .case-wall{--wall-ratio:2;--wall-w:28%} .case-wall--five{--wall-ratio:2.8;--wall-w:17%} }
@media (max-width:699px){
  .case-wall{--wall-ratio:1.85;--wall-w:30%;--wall-gap:3%}
  .case-wall--five{--wall-ratio:1.6;--wall-w:30%;--wall-gap:3%}
  .case-wall__extra{display:none}
}

/* 6 ─ Overview facts and scope grid ────────────────────────────────────── */
.case-facts{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px}
.case-facts__item{grid-column:span 3;min-width:0;padding-top:14px;border-top:1px solid var(--line)}
.case-facts__item:first-child{grid-column:4 / span 3}
.case-facts__title{margin-bottom:14px}
.case-facts__text{color:var(--text)}
@media (max-width:1099px){
  .case-facts__item{grid-column:span 4}
  .case-facts__item:first-child{grid-column:1 / span 4}
}
@media (max-width:699px){
  .case-facts{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .case-facts__item,.case-facts__item:first-child{grid-column:1 / -1}
}
.case-list li{display:flex;align-items:baseline;gap:14px;padding:8px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.4;color:var(--text)}
.case-list li:first-child{border-top:0;padding-top:0}
.case-list__no{flex:none;font:500 var(--fs-micro)/16px var(--font-mono);letter-spacing:.08em;color:var(--text-3)}

/* Scope: a ruled grid of facts (same rules as the product grid) */
.case-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line-strong)}
.case-spec__item{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-width:0;min-height:236px;padding:24px 24px 26px;background:var(--surface)}
.case-spec__no{font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text-3)}
.case-spec__body{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.case-spec__icon{display:grid;place-items:center;width:64px;height:64px;background:var(--paper);border:1px solid var(--rule);color:var(--ink)}
.case-spec__icon svg{width:36px;height:36px}
.case-spec__fig{display:block;height:64px;font:300 5.25rem/.74 var(--font-serif);letter-spacing:-.05em;color:var(--text);margin-left:-.05em}
.case-spec__label{display:block;font:600 1.1875rem/1.3 var(--font-sans);letter-spacing:-.012em;color:var(--text)}
.case-spec__label::first-letter{text-transform:uppercase}
@media (max-width:899px){ .case-spec{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:699px){
  .case-spec__item{min-height:0;gap:32px;padding:20px 16px 22px}
  .case-spec__icon{width:56px;height:56px}
  .case-spec__icon svg{width:32px;height:32px}
  .case-spec__fig{height:56px;font-size:4.5rem}
}
@media (max-width:399px){ .case-spec__label{font-size:1.0625rem} }

/* 7 ─ Gallery heads and plates ─────────────────────────────────────────── */
.case-block + .case-block{margin-top:clamp(72px,8vw,112px)}
.case-sub{display:flex;align-items:baseline;gap:16px;margin-bottom:24px;padding-top:14px;border-top:1px solid var(--line-strong)}
.case-sub__no{flex:none;font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;color:var(--text)}
.case-sub__title{font:400 var(--fs-h3)/1.1 var(--font-serif);letter-spacing:-.018em}
.case-plate{display:grid;place-items:center;padding:clamp(20px,5%,56px)}

/* 8 ─ NearBlend galleries ──────────────────────────────────────────────── */
/* iOS: the Discover screen beside two details cut from the iOS screens */
.nb-ios{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:36px}
.nb-ios > .figure{display:grid;grid-template-rows:1fr auto}
.nb-ios__main{grid-column:1 / span 5;grid-row:1 / span 2}
.nb-ios__a{grid-column:6 / span 7;grid-row:1}
.nb-ios__b{grid-column:6 / span 7;grid-row:2}
.nb-ios__main .device{width:min(72%,380px)}
.nb-ios__a .case-crop{width:min(64%,460px)}
.nb-ios__b .case-crop{width:min(86%,640px)}
@media (max-width:1099px){
  .nb-ios__main{grid-column:1 / span 6;grid-row:1}
  .nb-ios__a{grid-column:7 / span 6;grid-row:1}
  .nb-ios__b{grid-column:1 / -1;grid-row:2}
  .nb-ios__main .device{width:min(70%,300px)}
  .nb-ios__a .case-crop{width:min(88%,420px)}
}
@media (max-width:699px){
  .nb-ios{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .nb-ios__main,.nb-ios__a,.nb-ios__b{grid-column:1;grid-row:auto}
  .nb-ios__main .device{width:min(66%,280px)}
  .nb-ios__a .case-crop,.nb-ios__b .case-crop{width:100%}
}
/* Android: four phones, one figure each */
.nb-android{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px var(--gutter)}
.nb-android .case-plate{padding:clamp(24px,11%,44px) 0}
.nb-android .device{width:68%}
@media (max-width:1099px){
  .nb-android{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-android .device{width:min(56%,250px)}
}
@media (max-width:699px){
  .nb-android{column-gap:12px;row-gap:28px}
  .nb-android .device{width:74%}
}
/* Store listing: the Google Play screenshots */
.nb-store{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,28px);width:100%}
.nb-store img{width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow-1)}
@media (max-width:699px){ .nb-store{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 9 ─ Zer0 galleries ───────────────────────────────────────────────────── */
/* One plate per area: phones in a row with a mono label under each */
.z-screens{--n:5;--g:clamp(14px,2.2vw,32px);display:flex;flex-wrap:wrap;justify-content:center;gap:28px var(--g);width:100%}
.z-screens--4{--n:4}
.z-screens__item{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.z-screens__item > .device{width:100%;max-width:224px}
.z-screens__label{font:500 var(--fs-micro)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--text-3)}
@media (max-width:1099px){ .z-screens{--n:3} .z-screens--4{--n:4} }
@media (max-width:699px){ .z-screens,.z-screens--4{--n:2;--g:16px} }
/* Desktop: browser frames in two columns */
.z-desk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(16px,3vw,40px);width:100%}
.z-desk__item{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.z-desk__item > .device{width:100%}
@media (max-width:699px){ .z-desk{grid-template-columns:minmax(0,1fr)} }

/* 10 ─ Light and dark comparison ───────────────────────────────────────── */
.case-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.case-compare__half{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px);min-width:0;padding:clamp(20px,4%,48px) clamp(16px,4%,48px) clamp(28px,5.5%,64px)}
.case-compare__half--light{background:var(--canvas)}
.case-compare__label{color:var(--text)}
.case-compare__row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,3vw,32px)}
.case-compare__row > .device--phone{flex:0 1 46%;max-width:240px}
.case-compare__row > .device--browser{flex:1 1 auto}
@media (max-width:699px){ .case-compare{grid-template-columns:minmax(0,1fr)} }

/* 11 ─ Round 3 case components ─────────────────────────────────────────── */
/* Shared by the round 3 case pages. Markup and rules: SYSTEM.md 13. Specimen:
   design/round3/components.html.
   11.1 Browser frame       .case-browser, scroll variant .case-browser--scroll
   11.2 Store block         .case-store
   11.3 Listing strip       .case-listing
   11.4 Web-and-app pair    .case-pair
   11.5 Phone flow row      .case-flow
   work.js (section 2) adds click-to-scroll and the drift to the scroll frame,
   and keeps the two strips out of the tab order where they do not scroll.
   Without it every image shows and every frame and strip still scrolls. */

/* 11.1 Browser frame. Window chrome (three dots, an address pill with the
   domain as text) above the screen; .device gives the Paper frame, Ink hairline
   and shadow. The frame is a size container, so the chrome scales with the
   frame's own width. It fills its parent; set a width or max-width to narrow it.
   --view-ratio sets the screen's shape (16 / 10; "auto" keeps the image's own
   shape) and --screen the colour behind the image. */
.case-browser{container-type:inline-size;display:flex;flex-direction:column;width:100%;border-radius:8px}
.case-browser__bar{
  display:flex;align-items:center;gap:12px;flex:none;
  height:36px;height:clamp(26px,3.6cqi,40px);
  padding:0 14px;padding:0 clamp(10px,1.5cqi,16px);
  border-bottom:1px solid var(--rule);
}
/* The dots are three cells of one gradient. The bar's ::after is a spacer of the
   same width, so the pill sits in the middle of the bar. */
.case-browser__dots,.case-browser__bar::after{flex:none;height:8px;height:clamp(6px,.8cqi,9px);aspect-ratio:9 / 2}
.case-browser__dots{background:radial-gradient(circle closest-side,var(--rule-2) 80%,transparent 100%) 0 0 / calc(100% / 3) 100% repeat-x}
.case-browser__bar::after{content:""}
/* The pill fits its text but never narrows below 46% of the bar, so it reads as
   an address field; past the free space the domain ends in an ellipsis */
.case-browser__url{
  flex:0 1 auto;min-width:46%;margin-inline:auto;
  height:24px;height:clamp(18px,2.4cqi,26px);padding:0 12px;
  border:1px solid var(--rule);border-radius:var(--radius-pill);background:var(--bone);
  font:500 11px/22px var(--font-mono);font-size:clamp(10px,1.1cqi,12px);line-height:calc(clamp(18px,2.4cqi,26px) - 2px);
  letter-spacing:.02em;color:var(--ink-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.case-browser__view{position:relative;flex:none;aspect-ratio:var(--view-ratio,16 / 10);overflow:hidden;border-radius:0 0 7px 7px;background:var(--screen,var(--paper))}
.case-browser__view > img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* Dark chrome for dark screens: add .case-device--dark (section 4) */
.case-browser.case-device--dark .case-browser__bar{border-bottom-color:var(--rule-dark)}
.case-browser.case-device--dark .case-browser__dots{background-image:radial-gradient(circle closest-side,var(--ink-2) 80%,transparent 100%)}
.case-browser.case-device--dark .case-browser__url{border-color:var(--rule-dark);background:var(--ink);color:var(--on-dark-2)}
/* Keyboard focus on the scroll window rings the whole frame */
.case-browser__view:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@supports selector(:has(*)){
  .case-browser__view:focus-visible{outline:0}
  .case-browser:has(> .case-browser__view:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
}
/* Scroll variant: a full-page screenshot in a window the visitor scrolls (a
   focusable region). With work.js the window ignores the wheel and swipes until
   it is clicked, tapped or focused (.is-idle), so it never traps a page scroll;
   with data-drift the page inside follows the page scroll until then. */
.case-browser--scroll .case-browser__view{overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:var(--field) transparent}
.case-browser--scroll .case-browser__view > img{height:auto;object-fit:fill}
.case-browser--scroll .case-browser__view.is-idle{overflow-y:hidden}
/* "Click to scroll" / "Tap to scroll": added by work.js, shown while idle */
.case-browser__hint{
  position:absolute;right:12px;bottom:12px;z-index:1;display:none;align-items:center;gap:8px;height:26px;padding:0 10px 0 9px;
  background:var(--ink);color:var(--on-dark);box-shadow:0 0 0 1px var(--rule-dark);
  font:500 10px/1 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;pointer-events:none;
}
.case-browser__hint::before{content:"";flex:none;width:6px;height:10px;background:var(--lime)}
.case-browser__view.is-idle + .case-browser__hint{display:inline-flex}
/* Lenis's rules (site.css 14) set overscroll-behavior:contain on every
   [data-lenis-prevent*] element. A taken window still hands the scroll to the
   page at its ends, and a sideways strip never holds a vertical swipe: with
   contain, a swipe that starts on a strip would not scroll the page. */
html .case-browser__view[data-lenis-prevent]{overscroll-behavior:auto}
html :is(.case-listing,.case-flow)[data-lenis-prevent-horizontal]{overscroll-behavior-y:auto}
@media (max-width:699px){
  .case-browser--scroll{--view-ratio:1 / 1}
  .case-browser__hint{right:8px;bottom:8px}
}

/* 11.2 Store block. App Store and Google Play badges side by side, then a note
   (for example India only). A badge whose link is not known yet is a span with
   role="link", aria-disabled="true" and a hidden "(link coming soon)": it looks
   the same and does nothing. --store-h sets the badge height (48, 44 on phones). */
.case-store{--store-h:48px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.case-store__list{display:flex;flex-wrap:wrap;gap:12px}
.case-store__list > li{display:flex}
.case-store__badge{display:inline-flex;border-radius:9px;transition:box-shadow var(--dur-2) var(--ease-arrive)}
.case-store__badge > img{width:auto;height:var(--store-h)}
a.case-store__badge:hover{box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--text)}
.case-store__badge[aria-disabled="true"]{cursor:default}
/* Fallback when an official badge file is missing: a button in the site's style.
   Pending, it takes the site's disabled look (.btn[aria-disabled="true"]). */
.case-store__btn{--btn-h:var(--store-h);gap:10px;padding:0 20px 0 16px}
.case-store__btn > svg{width:18px;height:18px;flex:none}
.case-store__note{
  display:flex;align-items:center;min-height:var(--store-h);padding-left:24px;border-left:1px solid var(--line);
  font:500 var(--fs-label)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
}
@media (max-width:699px){
  .case-store{--store-h:44px;gap:12px}
  .case-store__note{flex-basis:100%;min-height:0;padding-left:0;border-left:0}
}

/* 11.3 Listing strip. 4 or 5 portrait store-listing images, each with a short
   caption, on a plate (.plate.case-listing). --n sets the count (5). At 899 px
   and below it becomes a sideways scroll-snap strip: a labelled, focusable region
   (role, aria-label and tabindex are in the markup). */
.case-listing{--n:5;padding:clamp(24px,4%,56px)}
.case-listing__list{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:20px clamp(12px,1.6vw,28px)}
.case-listing__item{display:flex;flex-direction:column;gap:14px;min-width:0}
.case-listing__item > img{width:100%;height:auto;border-radius:10px;background:var(--paper);box-shadow:var(--shadow-1)}
.case-listing__cap{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-small);line-height:1.4;color:var(--text-2)}
.case-listing__no{flex:none;font:500 var(--fs-micro)/16px var(--font-mono);letter-spacing:.08em;color:var(--text)}
@media (max-width:899px){
  .case-listing{--strip-pad:clamp(20px,4vw,32px);padding-inline:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--strip-pad)}
  .case-listing__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(56vw,236px);width:max-content;padding-inline:var(--strip-pad)}
  .case-listing__item{scroll-snap-align:start}
}

/* 11.4 Web-and-app pair. One browser frame with one phone over its lower right
   corner, on a plate (.plate.case-pair): the same product on web and phone. The
   browser sets the height; the phone is placed over it. --flip puts the phone
   on the left. */
.case-pair{position:relative;padding:clamp(24px,5%,64px) 18% clamp(36px,8%,96px) clamp(20px,5%,64px)}
.case-pair__phone{position:absolute;right:4%;bottom:clamp(20px,5%,56px);width:22%;box-shadow:var(--shadow-3)}
.case-pair--flip{padding-right:clamp(20px,5%,64px);padding-left:18%}
.case-pair--flip > .case-pair__phone{right:auto;left:4%}
@media (max-width:699px){
  .case-pair{padding-right:20%}
  .case-pair--flip{padding-right:20px;padding-left:20%}
  .case-pair__phone{width:28%}
}

/* 11.5 Phone flow row. 2 to 4 phone screens in order, an arrow between them and
   a numbered step caption under each, on a plate (.plate.case-flow). --n sets
   the count (3). On phones it becomes a sideways strip, as in 11.3. */
.case-flow{--n:3;--flow-gap:clamp(36px,4.5vw,72px);padding:clamp(28px,5%,64px) clamp(20px,5%,64px)}
.case-flow__list{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--flow-gap);max-width:calc(var(--n) * 256px + (var(--n) - 1) * var(--flow-gap));margin-inline:auto}
.case-flow__step{display:flex;flex-direction:column;gap:24px;min-width:0}
.case-flow__shot{position:relative}
.case-flow__shot > .device{width:100%}
.case-flow__step:not(:last-child) > .case-flow__shot::after{
  content:"";position:absolute;top:50%;left:100%;width:var(--flow-gap);height:14px;margin-top:-7px;background:var(--text-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M1 7h24.5M20 1.5 25.5 7 20 12.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 50% 50% / 28px 14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M1 7h24.5M20 1.5 25.5 7 20 12.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 50% 50% / 28px 14px no-repeat;
}
.case-flow__cap{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;padding-top:14px;border-top:1px solid var(--line-strong)}
.case-flow__cap::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--text)}
.case-flow__no{grid-row:1 / span 2;font:500 var(--fs-micro)/22px var(--font-mono);letter-spacing:.08em;color:var(--text)}
.case-flow__title{grid-column:2;font:600 1.0625rem/22px var(--font-sans);letter-spacing:-.01em;color:var(--text)}
.case-flow__text{grid-column:2;font-size:15px;line-height:1.45;color:var(--text-2)}
@media (max-width:699px){
  .case-flow{--flow-gap:40px;padding-inline:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px}
  .case-flow__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(52vw,220px);width:max-content;max-width:none;margin-inline:0;padding-inline:20px}
  .case-flow__step{scroll-snap-align:start}
}

/* 12 ─ Case pages: WorkDail and NearBlend */
/* Owner: pages-1. Rules for work/workdail/ and work/nearblend/ only, prefixed
   wd- and nb-. Put them between this line and "end 12". */

/* 12.1 WorkDail. The web-and-app pairs (11.4) carry a full-height phone
   (.device--phone with the image inside, no 9:16 fill), so the phone is
   narrower than the component's: it stays inside the plate. Fig. 07 is a short,
   wide section shot, so its phone is smaller again and needs less space. */
.wd-pair > .case-pair__phone{width:19%}
.wd-pair--worker{padding-left:14%}
.wd-pair--worker > .case-pair__phone{width:15%}
@media (max-width:699px){
  .wd-pair > .case-pair__phone{width:21%}
  .wd-pair--worker{padding-left:21%}
  .wd-pair--worker > .case-pair__phone{width:19%}
}
/* Case head: on phones the Platforms row puts its badges under the label, so
   the joined App Store | Google Play | India only group fits the width */
@media (max-width:699px){
  .case-meta__row.wd-platforms{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:14px 0}
}
/* Store block (11.2) in the case head of both pages: beside the title the facts
   column is narrow, so the note goes under the badges, as it does on phones */
@media (min-width:1100px){
  :is(.wd-store,.nb-store-head) .case-store__note{flex-basis:100%;min-height:0;padding-left:0;border-left:0}
}
/* Section shots (How it works, the 16 groups) fill their plate, up to half
   their 2400 px width, so they stay sharp at 2x */
.wd-crop{width:100%;max-width:1200px}
/* Fig. 06: two phones and two menu details, all at one height. A phone is
   2.107 x its width tall and a 560 x 744 detail 1.329 x, so a detail is 1.586
   phones wide and the row is 5.172 phones plus three gaps. At most 1010 px wide,
   so the 560 px details are never shown wider than 280 px (sharp at 2x). */
.wd-lang{--g:clamp(16px,2.4vw,40px);display:flex;align-items:flex-end;justify-content:center;gap:var(--g);width:100%;max-width:1010px}
.wd-lang__phone{flex:0 0 calc((100% - 3 * var(--g)) / 5.172)}
.wd-lang__menu{flex:0 0 calc((100% - 3 * var(--g)) * 1.586 / 5.172)}
@media (max-width:899px){
  .wd-lang{flex-wrap:wrap}
  .wd-lang__phone{flex-basis:calc(50% - var(--g) / 2);max-width:260px}
  .wd-lang__menu{flex-basis:calc(50% - var(--g) / 2);max-width:280px}
}
/* Section 05: the two lists from the store listing, under the section head's text */
.wd-lists{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px;margin-top:clamp(56px,6vw,88px)}
.wd-lists__item{grid-column:9 / span 4;min-width:0;padding-top:14px;border-top:1px solid var(--line)}
.wd-lists__item:first-child{grid-column:4 / span 4}
@media (max-width:1099px){
  .wd-lists__item{grid-column:7 / span 6}
  .wd-lists__item:first-child{grid-column:1 / span 6}
}
@media (max-width:699px){
  .wd-lists{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .wd-lists__item,.wd-lists__item:first-child{grid-column:1 / -1}
}

/* 12.2 NearBlend. 2.1: full-height iPhone screens in a row, a mono label under
   each (five on desktop, three on tablets, two on phones) */
.nb-phones{--n:5;--g:clamp(14px,2vw,28px);display:flex;flex-wrap:wrap;justify-content:center;gap:28px var(--g);width:100%}
.nb-phones__item{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.nb-phones__item > .device{width:100%;max-width:236px}
.nb-phones__label{font:500 var(--fs-micro)/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--text-3)}
@media (max-width:1099px){ .nb-phones{--n:3} }
@media (max-width:699px){ .nb-phones{--n:2;--g:16px} }
/* 2.3: the web app in two browser frames */
.nb-web{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px var(--gutter)}
@media (max-width:899px){ .nb-web{grid-template-columns:minmax(0,1fr)} }
/* 2.4: the Google Play strip has three images; on desktop they take the width
   of the App Store strip's four, so both strips' images are the same size */
@media (min-width:900px){
  .nb-listing--3 .case-listing__list{max-width:calc(75% - clamp(12px,1.6vw,28px) / 4);margin-inline:auto}
}

/* end 12 */

/* 13 ─ Case pages: AnyTool, Chai Mahel, Dabba, Lumen Greens */
/* Owner: pages-2. Rules for work/anytool/, chai-mahel/, dabba/ and lumen-greens/
   only, prefixed at-, cm-, db- and lg-. Put them between this line and "end 13". */

/* 13.1 Shared by the four pages */
/* The one link under the case facts (a single button, so not the 2 x 2 .case-links grid) */
.at-links,.cm-links{margin-top:20px}
/* Phones keep the screens' own shape (390 x 844), so no screen is cut off: in the
   web-and-app pairs, the flow rows and the phone rows */
:is(.at-pair,.cm-pair,.db-pair,.lg-pair) > .case-pair__phone,
:is(.at-phones,.cm-flow,.db-flow) .case-device--fill{aspect-ratio:390 / 844}
/* Scroll windows and single frames at a comfortable reading width */
.at-frame,.cm-frame,.lg-frame{max-width:960px}

/* 13.2 AnyTool */
.at-cats{margin-bottom:var(--space-7)}
/* The light Word Counter screen is shorter than its phone: it sits at the bottom,
   under a band of the screen's own white the height of a status bar */
.at-screen--end{display:flex;flex-direction:column;justify-content:flex-end}
.at-screen--end > img{flex:none}

/* 13.3 Chai Mahel: the pour (Fig. 03). Five steps, each a web-and-app pair
   (.case-pair) with a caption. As markup, without JavaScript and with reduced
   motion, it is a plain list. The page's own script adds .is-pinned when motion is
   allowed and one step fits the window: the list then sticks in the middle of the
   space under the header (--pin-top) while the page scrolls on by --pin-run (both
   set by the script), the steps lie on top of one another, and each step's screens
   fade in over the ones before (inline opacity on .cm-pour__pair), so the glass
   fills as the visitor scrolls. The step most in view gets .is-current and the ones
   before it .is-past. Wide screens show the captions as a rail that builds as the
   steps arrive (--i on each step sets its place); narrow ones show the current one. */
.cm-pour{padding:clamp(20px,4%,56px) clamp(12px,3%,40px)}
.cm-pour__list{display:grid;row-gap:clamp(32px,5vw,72px)}
.cm-pour__step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.cm-pour__pair{grid-column:4 / -1;grid-row:1}
.cm-pour__cap{
  grid-column:1 / span 3;grid-row:1;position:relative;margin-top:clamp(24px,4vw,56px);padding-top:14px;
  border-top:1px solid var(--line-strong);font:600 1.0625rem/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--text);
}
.cm-pour__cap::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--text)}
.cm-pour__cap > span{padding:1px 4px;margin:0 -4px;transition:background-color var(--dur-2) linear,color var(--dur-2) linear}
/* Pinned */
.cm-pour.is-pinned::after{content:"";display:block;height:var(--pin-run,0px)}
.cm-pour.is-pinned .cm-pour__list{position:sticky;top:var(--pin-top,calc(var(--header-h) + 24px));display:block}
.cm-pour.is-pinned .cm-pour__step + .cm-pour__step{position:absolute;inset:0}
.cm-pour.is-pinned .cm-pour__step + .cm-pour__step .cm-pour__pair{opacity:0;will-change:opacity}
.cm-pour.is-pinned .cm-pour__step + .cm-pour__step .device{box-shadow:none}
/* The captions: a rail, one under the other; earlier steps in Stone, the current one
   marked in Lime, later ones not there yet */
.cm-pour.is-pinned .cm-pour__cap{
  margin-top:calc(clamp(24px,4vw,56px) + var(--i,0) * 60px);opacity:0;color:var(--text-3);
  transition:opacity var(--dur-3) var(--ease-arrive),color var(--dur-2) linear;
}
.cm-pour.is-pinned .cm-pour__cap::before{background:var(--text-3)}
.cm-pour.is-pinned :is(.is-past,.is-current) .cm-pour__cap{opacity:1}
.cm-pour.is-pinned .is-current .cm-pour__cap{color:var(--text)}
.cm-pour.is-pinned .is-current .cm-pour__cap::before{background:var(--text)}
.cm-pour.is-pinned .is-current .cm-pour__cap > span{background:var(--lime);color:var(--ink)}
@media (max-width:899px){
  .cm-pour__step{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .cm-pour__pair,.cm-pour__cap{grid-column:1}
  .cm-pour__cap{grid-row:2;margin-top:0}
  /* One caption at a time, in the same place: the current one */
  .cm-pour.is-pinned .cm-pour__cap{margin-top:0;transition:none}
  .cm-pour.is-pinned .is-past .cm-pour__cap{opacity:0}
}
@media (max-width:699px){
  /* Pinned on a phone: the phone screens alone, large enough to watch the pour */
  .cm-pour.is-pinned .cm-pour__pair{padding:0 0 12px}
  .cm-pour.is-pinned .cm-pour__web{display:none}
  .cm-pour.is-pinned .cm-pour__pair > .case-pair__phone{position:relative;right:auto;bottom:auto;width:min(58%,240px);margin-inline:auto}
}

/* 13.4 Dabba */
/* Fig. 04: three phones in a row at every width, kept close together */
.z-screens.db-trio{--n:3;max-width:860px;margin-inline:auto}
@media (max-width:699px){ .z-screens.db-trio{--g:12px} }
/* Boards (Dabba's component set, the Lumen Greens identity and UI kit): an image
   on the plate, framed like a card */
.db-board,.lg-board{width:100%;max-width:1120px;height:auto;border-radius:var(--radius-2);background:var(--paper);box-shadow:var(--shadow-2)}

/* 13.5 Lumen Greens */
/* UI kit: the square foundations board is held narrower than the wide buttons board */
.lg-kit{display:grid;row-gap:var(--space-8)}
.lg-kit > .figure:first-child .lg-board{max-width:860px}

/* end 13 */