/* case-crm.css — the CRM case, rebuilt on the layout of the original Framer
   presentation of this project (olgaux.framer.website/crm).

   Two things are inherited from there and must not drift:

   1 · WHITE GROUND, NO BANDS. Every other case on this site alternates paper
   with two full-bleed ink runs. This product is a white-and-green interface;
   on ink its captures read as holes, and on a tinted stage they read as
   swatches. So the case body is plain white end to end, and the only dark
   surfaces on the page are the shared nav and the shared footer — the brand
   frame stays, the argument runs on paper.

   2 · THE MOCKUP PLACEMENT IS THE ORIGINAL'S. Three solution chapters, three
   shapes, in the order and the proportions the Framer page used:
       01  one full-bleed workspace capture across the column
       02  a narrow list beside a wide matrix, tops aligned, ~1 : 1.98
       03  a tablet offset right with a phone overlapping it from the left
   Column width, image widths and the collage offsets below are taken from the
   original's geometry at 1200px and re-expressed as percentages.

   What is new is everything between the pictures: the problem chapter, the
   research ledger, scope and result — the blocks every Interfacet case carries
   — plus reworked headlines that state a conclusion instead of naming a screen.

   Cards get a hairline here, which they do not elsewhere. `.bx`, `.did-item`
   and the media frames are white surfaces separated from a shade-down ground
   by shadow alone; on a pure white ground that shadow has nothing to sit
   against, so a 1px edge does the work the ground used to do. */

.case-crm{--ground:#FFFFFF;--card:#FFFFFF}
html:has(.case-crm){background:#fff}

/* the hairline the white ground makes necessary */
.case-crm .bx,
.case-crm .did-item{border:1px solid rgba(9,10,11,.09)}
.case-crm .bx-lime{border-color:transparent}

/* ── media sits on the ground, unframed ───────────────────────────
   Every capture in this case was exported with its own container already on
   it: the workspace, the client card and the task screens each carry a white
   card with rounded corners and a pale outer edge, and the tablet and phone
   carry device frames with their own shadow. Drawing a border or a shadow
   round any of them produces a frame inside a frame, which is what the first
   pass did. So the figures get nothing — no background, no edge, no lift. The
   exports supply their own separation from the white ground. */
.case-crm .fig-shot{background:none;border:0;box-shadow:none}

/* ── solution 02 · list beside matrix ─────────────────────────────
   1 : 1.98 is the original's ratio (399px beside 791px in a 1200 column). The
   crops disagree by design — the list is portrait at 0.781, the matrix
   landscape at 1.658 — so the tops align and the bottoms are allowed to run
   ragged, exactly as they do in the original. An earlier pass evened them up
   with a grey plate under the matrix; the matrix export already has a panel
   of its own, so that plate read as a second frame. */
@media(min-width:900px){
  .case-crm #s2 .figs{
    grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
    gap:clamp(12px,1.2vw,18px);align-items:start;
  }
  .case-crm #s2 .f-2,
  .case-crm #s2 .f-4{grid-column:auto}
}

/* ── solution 03 · the device collage ─────────────────────────────
   The original's geometry, as percentages of the column: tablet 71.7% wide
   pushed to the right edge, phone 41.6% wide at the left, dropped 22.7% of the
   tablet's height so the two overlap rather than sit side by side. The phone
   runs past the tablet's bottom edge, which is what the container's
   padding-bottom is reserving room for. */
.case-crm .crm-collage{position:relative;padding-bottom:4.6%}
.case-crm .crm-collage img{width:100%;height:auto;display:block}
.case-crm .crm-collage .c-tab{width:71.7%;margin-left:auto}
.case-crm .crm-collage .c-ph{position:absolute;left:0;top:22.7%;width:41.6%;z-index:2}
/* Below the fold of a tablet the overlap stops being a composition and starts
   being an occlusion: the phone would cover a third of the dashboard. */
@media(max-width:759px){
  .case-crm .crm-collage{padding-bottom:0}
  .case-crm .crm-collage .c-tab{width:100%}
  .case-crm .crm-collage .c-ph{
    position:static;width:62%;margin:clamp(18px,3vw,28px) auto 0;
  }
}

/* ── research ledger ──────────────────────────────────────────────
   Two marker lists in a row would repeat the problem bento above and read as
   a template. A ledger compares the two readings line for line instead. */
/* On a white page a table of white cells separated by 1px gaps has no outer
   edge at all — only the internal hairlines show, and the whole thing floats.
   So the ledger becomes an object: cells a shade down from the page, one
   hairline around the outside, and the ink conclusion bar closing it at the
   bottom. The gap-plus-background trick still draws the internal rules. */
.case-crm .mx{
  display:grid;gap:1px;background:var(--line);
  border:1px solid rgba(9,10,11,.11);
  border-radius:var(--radius-card);overflow:hidden;
  margin-top:clamp(30px,3.6vw,50px);
  grid-template-columns:minmax(0,1fr);
  box-shadow:0 1px 2px rgba(9,10,11,.04),0 18px 40px -28px rgba(9,10,11,.22);
}
@media(min-width:820px){.case-crm .mx{grid-template-columns:repeat(2,minmax(0,1fr))}}
.case-crm .mx-c{background:#F7F9FB;padding:clamp(20px,2.2vw,32px)}
.case-crm .mx-t{
  display:block;font-size:clamp(17px,1.5vw,22px);font-weight:500;
  letter-spacing:-.04em;margin-bottom:7px;
}
.case-crm .mx-s{
  display:block;font-family:var(--mono);font-size:var(--t-lab);letter-spacing:.1em;
  color:var(--dim);margin-bottom:clamp(18px,2vw,26px);
}
.case-crm .mx dl{display:grid;gap:1px;margin:0}
.case-crm .mx dl > div{
  display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr);gap:16px;
  align-items:baseline;padding:11px 0;border-top:1px solid var(--line-2);
}
.case-crm .mx dl > div:first-child{border-top:0;padding-top:0}
.case-crm .mx dt{
  font-family:var(--mono);font-size:var(--t-lab);letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}
.case-crm .mx dd{margin:0;font-size:var(--t-body);line-height:1.5}
/* ink rather than lime: the scope and result chapters already spend the page's
   lime slabs, and stacking a third reads as shouting */
.case-crm .mx-gap{
  grid-column:1/-1;background:var(--ink);color:var(--paper);
  padding:clamp(16px,1.7vw,24px);
  font-size:clamp(15px,1.3vw,18px);font-weight:500;letter-spacing:-.03em;
}

/* ── where the lime goes ──────────────────────────────────────────
   Five lime slabs had ended up on the page and two pairs landed in the same
   viewport, which reads as shouting twice. The page keeps exactly two, and
   they rhyme: the 5 tools an agent juggled in Problem, and the 5 -> 1 they
   collapsed into in Result, plus the ledger's closing bar on the ink chapter,
   where lime is the house device for a conclusion. On the white chapters the
   conclusion bar goes ink instead — `.scope-more` — so the two grounds each
   keep one voice. */
.case-crm #research .nums-lead b{background:none;padding:0}

/* ── the grids that were floating ─────────────────────────────────
   The research ledger is built from 1px gaps over a `--line` background with
   cells sitting in them. That works on the shade-down ground the other cases
   use — on white the cells matched the page exactly, so only the internal
   hairlines showed and the table hung in mid-air with no outer edge. It now
   lives on the ink chapter, where the same construction reads correctly. */

/* ── result on the ink band ───────────────────────────────────────
   The one dark run on the page, and it is the shared `.band` component rather
   than a local background: `.band` re-grounds --muted/--dim/--line and case.css
   already restyles `.bx` and `.note` inside it. Nothing here to maintain but
   switching off the hairline the white ground needed. */
.case-crm .band .bx{border-color:transparent}

/* ── the ink chapters ─────────────────────────────────────────────
   The rule this page follows: anything carrying a product capture stays on
   white, because these exports are white and a dark ground turns them into
   holes. Everything that is argument rather than evidence — the problem and
   the research behind it, then the result — goes on the ink band for contrast.
   Problem and Research are adjacent, so they read as one dark act at the top;
   their own band padding keeps the two chapter heads apart.

   `.band` already re-grounds --muted/--dim/--line and case.css restyles `.bx`
   and `.note` inside it. What it cannot know about is the ledger, which is
   built from a --line background showing through 1px gaps: the gaps invert on
   their own, the cell fill and the outer edge do not. */
.case-crm .band .mx{
  background:rgba(240,241,235,.11);border-color:transparent;box-shadow:none;
}
/* The cells must read as exactly the same surface as the `.bx` cards in the
   Problem chapter above — case.css fills those with rgba(240,241,235,.055)
   over --ink. Repeating that rgba here made them lighter than the cards
   instead of equal: `.mx` already paints rgba(...,.11) as the ground its 1px
   gaps show through, so a translucent cell composited over a translucent
   parent and the two alphas stacked. The solid equivalent is the fix — same
   colour as the cards, and it cannot stack with anything. */
.case-crm .band .mx-c{background:#161717}
/* lime closes the dark chapter, as the conclusion slabs do in the other cases.
   It is far enough below the lime 5 in Problem that the two never share a
   viewport, which is the only thing the one-lime rule is protecting. */
.case-crm .band .mx-gap{background:var(--lime);color:var(--ink)}

/* ── scope as a spec list, not a third grid ───────────────────────
   Scope used to be nine bordered cells, which put a table between the ledger
   above and two card grids below — three block grids in a row, and the tail of
   the page read as one long inventory. The same nine lines as a two-column
   list with hairline rows change the texture without losing a word, and the
   closing sentence is plain type rather than a fourth slab. The client-card
   figure that opened the chapter went with them: it was the only capture
   outside the three solution chapters and nothing in the copy asked for it. */
.case-crm .crm-scope{
  display:grid;grid-template-columns:minmax(0,1fr);
  margin-top:clamp(26px,3vw,40px);
}
@media(min-width:760px){
  .case-crm .crm-scope{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(32px,4.4vw,76px);
  }
}
.case-crm .crm-scope > div{
  display:grid;grid-template-columns:minmax(130px,auto) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);align-items:baseline;
  padding:13px 0;border-top:1px solid var(--line);
}
.case-crm .crm-scope b{font-size:var(--t-body);font-weight:500;letter-spacing:-.025em}
.case-crm .crm-scope span{color:var(--muted);font-size:13px;line-height:1.5}
.case-crm .crm-scope-end{
  margin-top:clamp(22px,2.6vw,34px);max-width:58ch;
  font-size:clamp(15px,1.3vw,18px);font-weight:500;letter-spacing:-.03em;
}

/* ── hero balance ─────────────────────────────────────────────────
   The shared hero sets .92fr of copy against 1.08fr of image and an 82px cap
   on the headline. This case's headline is long enough to run to four lines at
   that size, which pushed the copy column past the mockup. A step down on the
   type and a step across on the split give the capture the room. */
.case-crm .chero h1{font-size:clamp(31px,4.6vw,72px)}
@media(min-width:1000px){
  .case-crm .chero-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
}