/* The New chat card mosaic (Frances, 2026-09-23; K1 in docs/design-things-to-try.html): the starter tiles under the New
   chat page's message box (templates/index.html) and, the same tiles, at the foot of /demos
   (templates/landing/demo_library.html). Loaded right after app.css, where these rules used to sit.
   Wide enough for four tiles in a row. Colors (Frances, 2026-09-24): Build funnel on soft teal, Drive revenue on soft
   blue, Follow the science (last) on warm sand; white tiles lifted by a light shadow. Each zone is a 4-column grid
   packed DENSE: a tile's size in routes/things_to_try_data.py plus its order IS the layout (big = 2x2, wide = 2x1 with
   the outcome line, plain = 1x1; every tile carries a paper object from templates/_use_case_object.html). Tiles are
   links; hover adds the border only (no fades). */
.uc-mosaic { max-width: 72rem; margin: 3rem auto 0; }
.uc-zone { margin-top: 1.25rem; padding: 1rem; border-radius: 1.125rem; }
.uc-zone--funnel { background: #EAF1F0; --uc-ink: #1A6B6A; --uc-tint: #E0F0EF; --uc-mid: #7CC5BF; }
.uc-zone--science { background: #F3EFE8; --uc-ink: #8A5A12; --uc-tint: #F3E9D8; --uc-mid: #D9B98A; }
.uc-zone--revenue { background: #E6EBF2; --uc-ink: #1E4E8C; --uc-tint: #E6EEF9; --uc-mid: #9DB9E0; }
.uc-zone-head { margin: 0 .125rem .75rem; }
.uc-zone-head h2, .uc-zone-head h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; color: #1A1814; margin: 0; }
.uc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 8.5rem; grid-auto-flow: row dense; gap: .625rem; }
.uc-tile { position: relative; display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .75rem .875rem; overflow: hidden;
    background: #fff; border: 1px solid transparent; border-radius: .875rem; color: inherit; text-decoration: none;
    box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 1px 1px rgba(15,23,42,.03); }
.uc-tile:hover { border-color: #b3b9c2; }  /* a step darker than gray-300 (Frances, 2026-09-28) */
/* Keyboard focus: a 2px ring in the zone's own ink (teal / blue) instead of a heavy gray one — visible enough for
   keyboard users (WCAG 1.4.11 wants 3:1; the hover edge alone was ~1.5:1) without the gray border (Frances, 2026-09-28). */
.uc-tile:focus-visible { outline: 2px solid var(--uc-ink); outline-offset: 2px; }
.uc-tile--wide { grid-column: span 2; }
.uc-tile--big { grid-column: span 2; grid-row: span 2; }
.uc-title { font-size: 1rem; font-weight: 600; line-height: 1.3; color: #111827; }
.uc-get { font-size: .8125rem; line-height: 1.45; color: #6b7280; }
/* Each tile's paper object (templates/_use_case_object.html; Frances, 2026-09-24): tilted
   into a small tile's corner and clipped by it, on the right of a wide tile, centred and larger on the big tile.
   The tile's text stays above it. Zone colours arrive as --uc-ink / --uc-tint / --uc-mid.
   Flat: no drop shadows or edges on the objects, stickers and pills — the 1px border is the edge (Frances, 2026-09-28). */
.uc-title, .uc-get { position: relative; z-index: 1; }
.uc-tile--wide .uc-get { max-width: 52%; }
.uc-ob { position: absolute; right: -8px; bottom: -14px; transform: rotate(-7deg); pointer-events: none; font-size: 10.5px; line-height: 1.35; color: #374151; }
.uc-tile--wide .uc-ob { right: 26px; bottom: 50%; transform: translateY(50%) rotate(-6deg); }
.uc-tile--big .uc-ob { right: 50%; bottom: 58px; transform: translateX(50%) rotate(-5deg) scale(1.45); }
.uc-ob b { font-weight: 700; color: #111827; }
.uc-ob-paper, .uc-ob-badge, .uc-ob-post, .uc-ob-sheet, .uc-ob-twin, .uc-ob-award, .uc-ob-pipe,
.uc-ob-methods, .uc-ob-brief, .uc-ob-cmp, .uc-ob-receipt { background: #fff; border: 1px solid #e5e7eb; }
.uc-ob-paper i, .uc-ob-methods i { display: block; height: 5px; margin: 5px 0; border-radius: 3px; background: #d1d5db; }
/* territory: the territory as a dashed outline with three pins inside — no paper under it (Frances, 2026-09-28) */
.uc-ob-terr { right: 12px; bottom: 6px; width: 120px; height: 84px; }
.uc-ob-terr svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
/* The fill is an element clipped to the same outline (not the SVG's own fill) so the grain block can speck it like the
   badge; the SVG draws only the dashed edge and the pins on top. Keep the clip-path points in step with the path. */
.uc-ob-terr-fill { position: absolute; inset: 0; background: var(--uc-tint); clip-path: polygon(8.3% 35.7%, 18.3% 16.7%, 31.7% 21.4%, 43.3% 7.1%, 58.3% 14.3%, 70.0% 4.8%, 83.3% 19.0%, 93.3% 35.7%, 86.7% 52.4%, 95.0% 71.4%, 80.0% 88.1%, 65.0% 81.0%, 50.0% 95.2%, 33.3% 85.7%, 20.0% 92.9%, 6.7% 73.8%, 13.3% 54.8%); }
.uc-ob-terr-zone { fill: none; stroke: var(--uc-ink); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 3.5 3; }
.uc-ob-terr-pin { fill: var(--uc-ink); }
.uc-ob-terr-dot { fill: #fff; }
/* outreach: fresh buying signals — a dated news clipping, and two signal tags pinned over it */
.uc-ob-signals { width: 206px; height: 116px; }
/* Smaller than the big tile's usual 1.45x — the clipping plus two chips read noisy at full size (Frances, 2026-09-25). */
.uc-tile--big .uc-ob-signals { transform: translateX(50%) rotate(-5deg) scale(1.25); }
/* That 1.25x would thicken its outlines to 1.25px; drawn at 0.8px they land at 1px like every other tile's. Chrome
   rounds a border under 1px back up to 1px, so the pills draw theirs as a 0.8px inset line instead (+1px padding). */
.uc-tile--big .uc-ob-sig { border: 0; padding: 5px 10px; box-shadow: inset 0 0 0 .8px #e5e7eb; }
/* The downward copy is heavier (1.6px): on the torn zigzag the sideways copies add almost nothing, so the teeth read
   fainter than the straight edges without it (Frances, 2026-09-28). */
.uc-tile--big .uc-ob-clip { filter: drop-shadow(.8px 0 0 #e5e7eb) drop-shadow(-.8px 0 0 #e5e7eb) drop-shadow(0 1.6px 0 #e5e7eb) drop-shadow(0 -.8px 0 #e5e7eb); }
/* The torn edge is a clip-path, which clips a border off — four 1px offset copies draw the same #e5e7eb edge around it. */
.uc-ob-clip { position: absolute; left: 0; top: 0; width: 152px;
    filter: drop-shadow(1px 0 0 #e5e7eb) drop-shadow(-1px 0 0 #e5e7eb) drop-shadow(0 1px 0 #e5e7eb) drop-shadow(0 -1px 0 #e5e7eb); }
.uc-ob-clip > div { padding: 9px 11px 15px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 92% 100%, 84% calc(100% - 5px), 76% 100%, 68% calc(100% - 5px), 60% 100%, 52% calc(100% - 5px), 44% 100%, 36% calc(100% - 5px), 28% 100%, 20% calc(100% - 5px), 12% 100%, 4% calc(100% - 5px), 0 100%); }
.uc-ob-clip-date { display: block; margin-bottom: 3px; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--uc-ink); }
.uc-ob-clip b { display: block; margin-bottom: 5px; font-family: Georgia, 'Times New Roman', serif; font-size: 11.5px; line-height: 1.2; }
.uc-ob-clip i { display: block; height: 4px; margin: 4px 0; border-radius: 2px; background: #d1d5db; }
.uc-ob-clip i:last-child { width: 70%; }
.uc-ob-sig { position: absolute; right: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 9999px; background: #fff; border: 1px solid #e5e7eb; font-size: 9px; font-weight: 700; color: #111827; white-space: nowrap; }
.uc-ob-sig i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #FBBF24; }  /* small speckled yellow dots (grain block) */
.uc-ob-sig span { font-weight: 500; color: #6b7280; }
/* Low enough to clear the clipping's text lines and overlap only its torn edge (Frances, 2026-09-28). */
.uc-ob-sig--1 { top: 74px; transform: rotate(3deg); }
.uc-ob-sig--2 { top: 102px; right: 16px; transform: rotate(-2deg); }
/* kols: a paper with a star sticker, just text lines — further in and lower than the other corner objects so the star
   isn't cut off by the tile's edge (Frances). */
.uc-ob-paper { right: 6px; bottom: -24px; width: 104px; height: 118px; padding: 10px; border-radius: 3px; }
.uc-ob-paper i:nth-of-type(2n) { width: 75%; }
.uc-ob-star { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FBBF24; color: #fff; font-size: 17px; }
/* conference: a name badge, no lanyard */
.uc-ob-badge { right: 12px; bottom: -10px; width: 100px; padding-bottom: 35px; border-radius: 8px; text-align: center; }  /* the blank lower half runs off the tile */
.uc-ob-badge-top { padding: 5px 0 5px; border-radius: 7px 7px 0 0; background: var(--uc-ink); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.uc-ob-badge-top::before { content: ''; display: block; width: 18px; height: 4px; margin: 0 auto 5px; border-radius: 2px; background: rgba(255,255,255,.75); }
.uc-ob-badge b { display: block; margin-top: 7px; font-size: 11px; }
/* posts: a LinkedIn post draft — the LinkedIn logo where the author's photo would be (Frances, 2026-09-28) */
.uc-ob-post { width: 150px; padding: 8px 10px; border-radius: 9px; }
.uc-ob-post-h { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.uc-ob-post-li { flex: 0 0 auto; width: 16px; height: 16px; fill: #0A66C2; }
.uc-ob-post p { margin: 0; }
/* enrich: a spreadsheet filling in */
.uc-ob-sheet { width: 128px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 7px; border-radius: 5px; }  /* no file-name label (Frances, 2026-09-28) */
.uc-ob-sheet i { height: 10px; border-radius: 2px; background: #f3f4f6; }
.uc-ob-sheet i.on { background: color-mix(in srgb, var(--uc-mid) 72%, #6b7280); }  /* the zone teal, calmed toward gray to sit with the other pictures (Frances, 2026-09-28) */
/* people: the RIGHT contacts, not an org chart (Frances, 2026-09-28) — three people by role, no paper; each pill hugs
   its role. The person is the header's signed-out avatar (.account-btn .avatar-circle-anon: gray circle, gray outline
   person, the same icon path), shrunk — one person glyph across the app. */
.uc-ob-contacts { right: 12px; bottom: -3px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.uc-ob-contact { display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 9999px; background: #fff;
    border: 1px solid #e5e7eb; white-space: nowrap; font-size: 9px; }
.uc-ob-contact:nth-child(2) { margin-left: 10px; }
.uc-ob-contact:nth-child(3) { margin-left: 4px; }
.uc-ob-contact-av { flex: 0 0 auto; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #f3f4f6; border: 1px solid #d1d5db; color: #9ca3af; }
.uc-ob-contact-av svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* grants: a notice of award — the amount, and who funded it how recently */
.uc-ob-award { bottom: -2px; width: 156px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 11px; border-radius: 3px; }
.uc-ob-award b { font-family: Georgia, 'Times New Roman', serif; font-size: 12px; }
.uc-ob-award em { font-style: normal; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--uc-ink); }
.uc-ob-award span { font-size: 9.5px; color: #6b7280; }
/* drugs: a pipeline chart */
.uc-ob-pipe { width: 170px; padding: 8px 10px 9px; border-radius: 8px; }
.uc-ob-pipe-h { display: grid; grid-template-columns: 52px repeat(4, 1fr); margin-bottom: 4px; font-size: 8px; font-weight: 700; color: #9ca3af; }
.uc-ob-pipe-r { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; height: 17px; font-size: 9.5px; }
.uc-ob-pipe-r i { height: 7px; border-radius: 4px; background: var(--uc-mid); }
.uc-ob-pipe-r:nth-of-type(2) i { width: 72%; }
.uc-ob-pipe-r:nth-of-type(3) i { width: 44%; }
.uc-ob-pipe-r:nth-of-type(4) i { width: 58%; background: var(--uc-ink); }
/* competitor: a paper's Methods with the competitor's instrument highlighted */
.uc-ob-methods { width: 160px; padding: 10px 11px; border-radius: 3px; }
.uc-ob-methods b { display: block; margin-bottom: 3px; font-family: Georgia, 'Times New Roman', serif; font-size: 11px; }
.uc-ob-methods p { margin: 4px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 9.5px; line-height: 1.45; color: #374151; }
.uc-ob-methods mark { padding: 0 2px; border-radius: 2px; background: #FDE68A; color: #111827; font-weight: 700; }
.uc-ob-methods i:last-of-type { width: 60%; }
/* lookalike: your customer beside its look-alike, no arrow between them (Frances, 2026-09-28) */
.uc-ob-twins { bottom: -16px; width: 190px; height: 98px; }
.uc-ob-twin { position: absolute; width: 114px; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 7px; }
.uc-ob-twin span { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; }
.uc-ob-twin b { font-size: 12.5px; }
.uc-ob-twin--a { left: 0; top: 16px; transform: rotate(-4deg); }
.uc-ob-twin--b { right: 0; top: 0; transform: rotate(5deg); border-color: var(--uc-mid); }
.uc-ob-twin--b span { color: var(--uc-ink); }
/* prep: a clipped one-page brief */
.uc-ob-brief { width: 118px; display: flex; flex-direction: column; padding: 22px 10px 10px; border-radius: 3px; }
/* A wire paperclip over the top edge, with a little depth (a darker shade under the wire, a thin highlight along it);
   the text starts below it, and there are no placeholder lines (Frances, 2026-09-28). */
.uc-ob-brief::before { content: ''; position: absolute; top: -11px; left: 11px; width: 14px; height: 30px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 14 30'><path d='M4 19V7a2 2 0 0 1 4 0v15a3.5 3.5 0 0 1-7 0V5a5 5 0 0 1 10 0v11' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' transform='translate(.35 .45)'/><path d='M4 19V7a2 2 0 0 1 4 0v15a3.5 3.5 0 0 1-7 0V5a5 5 0 0 1 10 0v11' fill='none' stroke='%23a3a9b3' stroke-width='1.7' stroke-linecap='round'/><path d='M4 19V7a2 2 0 0 1 4 0v15a3.5 3.5 0 0 1-7 0V5a5 5 0 0 1 10 0v11' fill='none' stroke='%23f3f4f6' stroke-width='.55' stroke-linecap='round' transform='translate(-.35 -.35)'/></svg>") no-repeat center / contain; }
.uc-ob-brief span { margin-bottom: 3px; font-size: 9.5px; color: #6b7280; }
.uc-ob-brief em { margin-top: 10px; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--uc-ink); }
/* compete: a comparison grid */
.uc-ob-cmp { width: 118px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 5px 6px; align-items: center; padding: 7px 9px; border-radius: 7px; text-align: center; }
.uc-ob-cmp b { font-size: 9.5px; color: #6b7280; }
.uc-ob-cmp b:first-of-type { color: var(--uc-ink); }
.uc-ob-cmp i { height: 5px; border-radius: 3px; background: #d1d5db; }
.uc-ob-cmp .yes { font-weight: 800; color: #047857; }
.uc-ob-cmp .no { color: #9ca3af; }
/* reengage: a sticky note */
.uc-ob-sticky { width: 112px; min-height: 92px; padding: 14px 10px 10px; border-radius: 2px 2px 2px 14px; background: #FEF3C7; color: #5d4300; }
.uc-ob-sticky b { display: block; margin-bottom: 3px; font-size: 12px; color: #3f2d00; }
.uc-ob-tape { position: absolute; top: -7px; left: 50%; width: 42px; height: 14px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,255,255,.6); }
/* The brief and the sticky note sit further in on their wide tiles, closing the gap after the short text (Frances,
   2026-09-28). Phones keep the corner position (the media rule below comes later in the file). */
.uc-tile--wide .uc-ob-brief, .uc-tile--wide .uc-ob-sticky { right: 15%; }
/* The competitor card's Methods page rises from the bottom-right corner, cut off by the card's edge like the small
   tiles' pictures (Frances, 2026-10-12), instead of centring on the right; it sits low enough to clear the card's
   long title at every desktop width. Phones keep the media rule below. */
.uc-tile--wide .uc-ob-methods { right: -8px; bottom: -28px; transform: rotate(-7deg); }
/* files: a fanned hand of three files, each a solid card in a muted version of the color people know it by, with
   its format in large white letters near the top and one small white mark (Frances, 2026-10-09: option B3 in
   docs/design-file-card-art.html, muted, smaller, peeking in from the corner like the other pictures). White text
   is 4.3:1 or better on all three. */
.uc-ob-files { width: 128px; height: 92px; }
.uc-ob-file { position: absolute; bottom: 0; border-radius: 4px; transform-origin: 0 100%; color: #fff;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); }
.uc-ob-file::after { content: ''; position: absolute; top: 0; right: 0; width: 11px; height: 11px;
    background: linear-gradient(225deg, transparent 50%, rgba(255,255,255,.4) 50%); }
.uc-ob-file em { position: absolute; left: 7px; top: 7px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .05em; line-height: 1; }
.uc-ob-file--xls { left: 2px; width: 52px; height: 70px; transform: rotate(-14deg); background: #4F7F63; }
.uc-ob-file--doc { left: 32px; width: 52px; height: 72px; transform: rotate(-2deg); background: #50709E; }
.uc-ob-file--ppt { left: 54px; width: 74px; height: 52px; transform: rotate(8deg); background: #B5654D; }
.uc-ob-file-grid { position: absolute; left: 7px; right: 9px; top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.uc-ob-file-grid i { height: 6px; border-radius: 1px; background: rgba(255,255,255,.45); }
.uc-ob-file-lines { position: absolute; left: 7px; right: 10px; top: 26px; display: flex; flex-direction: column; gap: 4px; }
.uc-ob-file-lines i { height: 3px; border-radius: 2px; background: rgba(255,255,255,.5); }
.uc-ob-file-lines i:last-child { width: 65%; }
.uc-ob-file-bars { position: absolute; right: 10px; top: 20px; display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.uc-ob-file-bars i { width: 6px; border-radius: 1px 1px 0 0; background: rgba(255,255,255,.55); }
.uc-ob-file-bars i:nth-child(1) { height: 40%; }
.uc-ob-file-bars i:nth-child(2) { height: 70%; }
.uc-ob-file-bars i:nth-child(3) { height: 100%; }
/* In the message box and the sent bubble every picture is gray (Jason, 2026-09-27); these colors don't come from the
   zone inks, so they're grayed here. */
.card-staged-art .uc-ob-file--xls, .card-line-art .uc-ob-file--xls { background: #9ca3af; }
.card-staged-art .uc-ob-file--doc, .card-line-art .uc-ob-file--doc { background: #6b7280; }
.card-staged-art .uc-ob-file--ppt, .card-line-art .uc-ob-file--ppt { background: #4b5563; }
/* upsell: a receipt (no company name on top), raised so all of it shows (Frances, 2026-09-28) */
.uc-ob-receipt { bottom: 12px; width: 142px; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 11px; border-radius: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; }
.uc-ob-receipt span { display: flex; justify-content: space-between; gap: 8px; }
.uc-ob-receipt em { font-style: normal; }
.uc-ob-receipt .add { font-weight: 700; color: var(--uc-ink); }
/* Grain (Frances): speckle + gradient on the badge band, the KOL star and the signal dots, speckle on the territory.
   Each speckle tile is fractal noise thresholded into dark and light specks: tune baseFrequency (speck size) and the
   rects' opacity (strength). Defined on .uc-mosaic only, so the staged card's mini art never gets it. */
.uc-mosaic {
    --uc-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='d' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 0 0 0 -3.1'/></filter><filter id='l' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='23' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 5 0 0 0 -3.1'/></filter><rect width='240' height='240' filter='url(%23d)' opacity='0.5'/><rect width='240' height='240' filter='url(%23l)' opacity='0.5'/></svg>");
    --uc-grain-soft: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='d' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 0 0 0 -3.1'/></filter><filter id='l' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='23' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 5 0 0 0 -3.1'/></filter><rect width='240' height='240' filter='url(%23d)' opacity='0.28'/><rect width='240' height='240' filter='url(%23l)' opacity='0.28'/></svg>");
    --uc-shade: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,0) 45%, rgba(0,0,0,.14)); }
.uc-ob-badge-top, .uc-ob-sig i { background-image: var(--uc-grain), var(--uc-shade); }
.uc-ob-star { background-image: var(--uc-grain-soft), var(--uc-shade); }
.uc-ob-terr-fill { background-image: var(--uc-grain-soft); }
/* Narrow windows: two columns (big and wide tiles then span the full row). Phones: one column; each tile keeps a
   minimum height and its text keeps to the left, so the paper object has room in the corner. */
@media (max-width: 900px) {
    .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .uc-zone { padding: .75rem; }
    .uc-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .uc-tile--wide, .uc-tile--big { grid-column: auto; grid-row: auto; }
    .uc-tile { min-height: 8.5rem; }
    /* A big tile's picture joins the flow UNDER its text: absolutely placed, it sat on top of the title and
       description once they wrapped at phone width. Centred, a touch larger than the phone's small-tile pictures. */
    .uc-tile--big { min-height: 0; }
    .uc-tile--big .uc-ob, .uc-tile--big .uc-ob-signals { position: relative; right: auto; bottom: auto; flex-shrink: 0;
        align-self: center; margin: 1.5rem 0 1.25rem; transform: rotate(-4deg) scale(1.1); }
    .uc-tile:not(.uc-tile--big) .uc-title, .uc-tile:not(.uc-tile--big) .uc-get { max-width: 60%; }
    .uc-tile--wide .uc-ob { right: -8px; bottom: -14px; transform: rotate(-7deg); }
    /* The Methods page (Find labs using a competitor's tools) is the tallest wide-tile picture: full size it sat under
       the title and description at every phone width (measured 360–430 px), so it shrinks into its corner. */
    .uc-tile--wide .uc-ob-methods { transform: rotate(-7deg) scale(.72); transform-origin: bottom right; }
}