/* ════════════════════════════════════════════════════════════════════
   CELL 6 — THE STRAIGHT DEAL · the rubber-stamped Restoration Agreement
   ALL selectors scoped under #cell-6 (no leak into siblings).
   Authority: picks.json cell:6 + WOW_CONTRACTS cell:6 + DESIGN.md.

   Palette from tokens.css ONLY:
     --breath  #E9E6E1  Primer Gray (this cell's field — the breath continues)
     --base    #222222  Shop-Floor Charcoal (document ink / lines on light)
     --accent  #C2231B  Signal Red (thin service-stripe + CTA plate + stamp — NEVER a field)
     --support #B7BCC1  Polished Steel · --ink-deep #141414
   Radius 0 = machined edge everywhere. On-light section: text-on-light tokens.
   ════════════════════════════════════════════════════════════════════ */

/* Primer-breath field. data-bg="marble" already paints --breath; this restates
   it explicitly and adds a whisper of paper-grain vignette so the document panel
   reads as sitting ON a shop-manual page, not floating in flat gray. The base
   stays neutral (DESIGN.md) — no warm bg field; warmth lives only in grade/glow. */
#cell-6 {
  background: var(--ink-850);
  color: var(--text-on-dark);
  overflow: clip;
  isolation: isolate;
  /* DENSITY (T2.30 / anti-fail #7): the document block must read in ONE viewport
     (offsetHeight ≤ 900 @1440×900). The shared .section pad (up to 9rem) alone
     overran; step this Primer-breath cell's own vertical pad down — primary lever
     per the density law (section-pad → headline → bulk). Calm breath keeps air. */
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  position: relative;
}

/* ---- WARM-GLOW AMBIENT OVERLAY (site-wide aliveness contract) ----
   The shared .tungsten-idle--dim hook (base.css) lives HERE, on a dedicated
   non-content overlay layer — never on the honest document or copy. A whisper of
   warm worklight breathing over the Primer field so the whole section is alive at
   rest (T2.33), softened to the DIM register for the Primer exhale. Behind all
   content (z-index 0; content sits above via the natural flow / z-index:1 wraps).
   Compositor-cheap: the shared keyframe animates opacity only. */
#cell-6 .deal-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* two off-center warm worklight pools — the shop's tungsten wash, kept faint so
     it lifts the Primer field without tinting it into a warm bg (base stays
     neutral, DESIGN.md: warmth lives in grade/glow, never the field). Warm-over-
     light reads as a gentle tungsten warming; the .tungsten-idle--dim opacity
     breath (0.73→0.95) then makes the wash visibly pulse at rest. */
  /* R88c: orange tungsten pools KILLED (David: kill the orange; gradients get
     viewport-cut and read silly). Section is a clean dark-gray field now. */
  display: none;
}
#cell-6 .deal { position: relative; z-index: 1; }

/* ---- LAYOUT — copy left / document plate right (T2.25: this section's ONE job
   is the honest-process explanation; the document IS the proof). ---- */
#cell-6 .deal {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  /* TOP-ALIGN the columns so the eyebrow and the document header share a top
     baseline and read as two balanced full-height columns (board slice / T2.7 —
     centering stranded the shorter content-fit panel with dead space above it). */
  align-items: start;
}

/* ════════════════════════════════════════════════════════════════════
   LEFT — the proud plain-spoken explanation
   ════════════════════════════════════════════════════════════════════ */
#cell-6 .deal__copy { max-width: 34rem; }

/* eyebrow — Plex Mono caps + steel hairline lead-in (DESIGN.md text system).
   TRUTH-SWAP: real eyebrow, not the mockup spec-leak. */
#cell-6 .deal__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  color: var(--support);             /* muted-on-dark (R88c gray flip) */
  margin-bottom: var(--space-s);
}
#cell-6 .deal__eyebrow-rule {
  display: inline-block;
  width: clamp(1.5rem, 3.5vw, 2.6rem);
  height: 1px;
  background: var(--support);
  flex: none;
}

/* headline — H2 display caps (section step). Dark ink on the Primer field. */
#cell-6 .deal__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--step-section);
  line-height: 0.94;
  letter-spacing: 0.004em;
  color: var(--breath);              /* bone on the dark-gray field (R88c) */
}
/* the one thin Signal-Red service-stripe regrip (DESIGN.md rhythm plan:
   red as thin service-stripe, never a field). Machined 0px bar under the head. */
#cell-6 .deal__title-stripe {
  display: block;
  width: clamp(3.5rem, 8vw, 5.5rem);
  height: 4px;
  margin-top: var(--space-s);
  background: var(--accent);
  border-radius: var(--radius);
}

/* prose — their voice, ordered concrete process -> reassurance -> the ask
   (T2.15). Plex Sans, measured, on-light. */
#cell-6 .deal__prose {
  margin-top: var(--space-m);
  max-width: 33rem;
}
#cell-6 .deal__prose p {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text-on-dark); /* R88c: white copy on the dark-gray field (David) */
}
#cell-6 .deal__prose p + p { margin-top: var(--space-s); }

/* ---- CTA — red stamped-steel plate, 0px machined edge, pressed-steel drop
   (matches the hero/nav plate language exactly for site cohesion). ---- */
#cell-6 .deal__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-l);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 1rem 1.6rem;
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--terracotta-deep);
  transition: transform 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out),
              background 140ms var(--ease-out);
}
/* small red-thread arrow, drawn (no hand-authored icon file) */
#cell-6 .deal__cta::after {
  content: '';
  width: 1.15em; height: 0.7em; flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
          mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  transition: transform 140ms var(--ease-out);
}
/* plate-press — scale-not-shift, ≤150ms, hover-capable only (T2.27) */
@media (hover: hover) {
  #cell-6 .deal__cta:hover {
    transform: translateY(2px) scale(1.01);
    box-shadow: 0 1px 0 var(--terracotta-deep);
  }
  #cell-6 .deal__cta:hover::after { transform: translateX(3px); }
}

/* ════════════════════════════════════════════════════════════════════
   RIGHT — the rubber-stamped Restoration Agreement document plate
   The single best element in the corpus (picks.json) — built exactly:
   a machined document plate, mono spec labels, three ruled process rows,
   the rotated red inspection stamp. Warm paper over the Primer field.
   ════════════════════════════════════════════════════════════════════ */
/* ---- P2 row 10 (T2.40): TILT WRAPPER ----
   The wrapper is the grid cell and carries the whole-sheet tilt + the metal
   paper-clip. Putting the tilt here (not on the figure) lets the clip — which
   lives OUTSIDE the figure's overflow:hidden ink box — tilt WITH the sheet and
   overhang the top edge. transform-origin near the clipped top-left corner so
   the sheet pivots from where it's pinned (reads as a real hung page, not a
   free-rotated card). No overflow clip here (the clip must be free to overhang);
   the section's own overflow:clip (cell-6.css:21) contains any bleed. */
#cell-6 .deal__doc-wrap {
  position: relative;
  transform: rotate(-1.4deg);
  transform-origin: 14% 8%;
  /* a touch of top margin so the tilted top edge + the clip never kiss the
     section top / the copy column's baseline. */
  margin-top: clamp(0.4rem, 1vw, 0.9rem);
  will-change: transform;
}

#cell-6 .deal__doc {
  position: relative;
  /* vertical pad trimmed a step (density law · bulk lever) so the whole sheet
     reads inside one viewport with comfortable headroom under 900px @1440×900. */
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.5rem, 3vw, 2.8rem);
  /* the document paper: a hair warmer + lighter than the Primer field so it
     lifts off the page as a physical sheet; machined 0px edge, now with a WORN
     edge (row 10) — the crisp 1px steel rule is softened to an irregular, faded
     border drawn as layered inset shadows (a light-catch top, aged-shadow sides)
     instead of a hard vector line, killing the flat-AI tell. */
  background:
    linear-gradient(180deg, #f4f2ee 0%, #ece9e3 100%);
  border: 1px solid rgba(178,171,159,0.55);   /* faded, not crisp */
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,       /* top light-catch (paper curl) */
    0 0 0 0.5px rgba(120,112,100,0.18) inset,  /* soft aged inner rule */
    0 -6px 14px -12px rgba(120,110,96,0.5) inset, /* worn/shaded bottom edge */
    0 22px 44px -30px rgba(20,20,20,0.45),
    0 3px 10px -6px rgba(20,20,20,0.25);
  overflow: hidden;                  /* the stamp ink never bleeds past the sheet */
}

/* ---- paper grain (row 10) — a very-low-opacity tiling SVG-noise wash over the
   sheet (multiply) so the paper reads as fibrous stock, not flat gradient. Sits
   above the paper fill but BELOW the copy/stamp (z-index 0; content is z:1+ or
   natural flow above this absolutely-positioned layer). aria-hidden by nature. */
#cell-6 .deal__doc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
/* the sheet's real content sits above the grain layer */
#cell-6 .deal__doc-head,
#cell-6 .deal__meta,
#cell-6 .deal__doc-intro,
#cell-6 .deal__rows,
#cell-6 .deal__doc-foot { position: relative; z-index: 1; }

/* ---- dog-eared corner (row 10) — a small folded corner, bottom-right, drawn as
   a triangular light/shadow so the sheet reads hand-handled. Inside the overflow
   box (it's a corner of the sheet, correct to clip). ---- */
#cell-6 .deal__doc::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(1.3rem, 2.4vw, 1.9rem);
  height: clamp(1.3rem, 2.4vw, 1.9rem);
  pointer-events: none;
  /* the lifted fold: a lighter under-face wedge + a soft cast shadow at the crease */
  background: linear-gradient(135deg, transparent 50%, #e2ded7 50%, #f6f4f0 74%);
  box-shadow: -3px -3px 6px -3px rgba(20,20,20,0.28);
}

/* ---- metal paper-clip (row 10) — a real steel clip pinched over the top-left
   corner. Two nested rounded steel loops drawn with masks; lives on the WRAPPER
   (outside the figure's overflow box) so it overhangs the sheet's top edge. ---- */
#cell-6 .deal__clip {
  position: absolute;
  z-index: 5;
  /* straddle the sheet's top edge: ~the top third of the clip overhangs ABOVE
     the paper (negative top), the rest grips the sheet. The wrapper's -1.4deg
     tilt lowers this left-side point a touch, so bias the overhang firmer. */
  top: clamp(-1.15rem, -0.4vw - 0.7rem, -0.9rem);
  left: clamp(1.4rem, 4vw, 2.4rem);
  width: clamp(1.2rem, 1.9vw, 1.55rem);
  height: clamp(2.6rem, 4.4vw, 3.4rem);
  pointer-events: none;
  transform: rotate(6deg);
  /* Wire paper-clip drawn as two nested steel loops via BORDER (reliable across
     browsers — the prior mask-composite approach subtracted the whole shape and
     rendered nothing, David row 10). Outer loop = this element's border; inner
     loop = ::before. Solid steel reads on the cream sheet. */
  /* R90c — the border-drawn loops retired for a REAL wire-clip vector
     (pinhead, CC0 — harvested, not generated). Steel gradient rides through
     the mask; the drop-shadow stays on the element so the clip still casts
     onto the sheet. */
  background: linear-gradient(155deg, #b7bcc1 0%, #878d93 45%, #6e747a 100%);
  -webkit-mask: url('../../assets/icons/paperclip.svg') no-repeat center / contain;
  mask: url('../../assets/icons/paperclip.svg') no-repeat center / contain;
  filter: drop-shadow(0 2px 2px rgba(20,20,20,0.4));
}

/* ---- the red rubber inspection stamp ----
   Top-right, rotated, ink-textured. Alive at t0: seated at rest, correct.
   The scroll-in press + tungsten ink-breath are additive (cell-6.js / motion). */
#cell-6 .deal__stamp {
  position: absolute;
  top: clamp(0.7rem, 1.6vw, 1.4rem);
  right: clamp(0.7rem, 1.6vw, 1.4rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
  width: clamp(6.5rem, 12vw, 8.5rem);
  padding: 0.55rem 0.7rem;
  transform: rotate(-9deg);          /* the crooked hand-stamped angle */
  transform-origin: 70% 40%;
  color: var(--accent);
  border: 2.5px solid var(--accent);
  border-radius: var(--radius);
  /* double-ruled stamp frame (an inspection stamp has an inner line) */
  box-shadow: inset 0 0 0 1px rgba(194,35,27,0.55);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.98;
  letter-spacing: 0.02em;
  /* ink imperfection: slightly translucent + a grain mask so it reads as
     rubber-stamped ink, not printed vector (T2.24 / T2.26 kill the clean-AI tell) */
  opacity: 0.9;
  mix-blend-mode: multiply;
  pointer-events: none;
}
#cell-6 .deal__stamp-line { display: block; }
#cell-6 .deal__stamp-line--1 { font-size: clamp(0.82rem, 1.5vw, 1.05rem); }
#cell-6 .deal__stamp-line--2 { font-size: clamp(1.05rem, 2vw, 1.4rem); letter-spacing: 0.06em; }
#cell-6 .deal__stamp-line--3 { font-size: clamp(0.62rem, 1.1vw, 0.78rem); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; }

/* ---- document header ---- */
#cell-6 .deal__doc-head {
  padding-right: clamp(6rem, 13vw, 9rem);   /* clear the stamp corner (T2.8) */
  margin-bottom: var(--space-m);            /* airier head, matches the board's
                                               generous gap below the doc title */
}
#cell-6 .deal__doc-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--stone-700);
}

/* ---- meta row — mono spec labels (the mockup's AGREEMENT NO. / DATE LOOK,
   non-claiming values). Repeated units identical by default (T2.2). ---- */
#cell-6 .deal__meta {
  display: flex;
  gap: clamp(1.5rem, 5vw, 3rem);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid #cbc6bd;
}
#cell-6 .deal__meta-pair { display: flex; flex-direction: column; gap: 0.2rem; }
#cell-6 .deal__meta dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-500);
}
#cell-6 .deal__meta dd {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 1.3vw, 0.94rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--stone-700);
}

/* ---- intro paragraph — Plex Mono, the datasheet register ---- */
#cell-6 .deal__doc-intro {
  margin-top: var(--space-s);
  font-family: var(--font-mono);
  font-size: clamp(0.76rem, 1.15vw, 0.86rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--stone-700);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid #cbc6bd;
}

/* ---- the three ruled process rows ---- */
#cell-6 .deal__rows {
  list-style: none;
  display: flex;
  flex-direction: column;
}
#cell-6 .deal__row {
  display: grid;
  grid-template-columns: clamp(3.2rem, 6vw, 4.4rem) 1fr;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: center;
  /* row rhythm trimmed a hair (density · bulk lever) — still airy, three rows now
     clear the one-viewport budget with margin (anti-fail #7). */
  padding-block: clamp(0.85rem, 1.6vw, 1.1rem);
  border-bottom: 1px solid #cbc6bd;
}
#cell-6 .deal__row:last-child { border-bottom: none; }

/* the engraved icon plate — CSS/inline-SVG-mask glyphs (no hand-authored icon
   files per §4.7 reproduction contract). Each glyph is a crisp line-drawing in
   the document-ink color, sitting behind a thin ruled divider (mockup's ruled
   gap between glyph and title). Distinctive per row so they aren't generic chips
   (T2.4 — the icons carry meaning: stopwatch / camera / clipboard). */
#cell-6 .deal__row-icon {
  position: relative;
  width: clamp(3.2rem, 6vw, 4.4rem);
  height: clamp(3.2rem, 6vw, 4.4rem);
  align-self: center;
  color: var(--stone-700);
}
#cell-6 .deal__row-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#cell-6 .deal__row-icon--time::after  { background-image: url("../../assets/icons/icon-time.png"); }
#cell-6 .deal__row-icon--photo::after { background-image: url("../../assets/icons/icon-photo.png"); }
#cell-6 .deal__row-icon--sign::after  { background-image: url("../../assets/icons/icon-sign.png"); }
/* thin ruled divider to the RIGHT of the glyph plate (mockup's vertical rule) */
#cell-6 .deal__row-icon::before {
  content: '';
  position: absolute;
  top: 8%; bottom: 8%; right: calc(clamp(1rem, 2.2vw, 1.6rem) / -2 - 0.5px);
  width: 1px;
  background: #cbc6bd;
}

/* row text — title (display caps, mini-ish) + spec line (mono datasheet) */
#cell-6 .deal__row-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--stone-700);
  margin-bottom: 0.35rem;
}
#cell-6 .deal__row-spec {
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--stone-500);
}

/* ---- document footer line ---- */
#cell-6 .deal__doc-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid #cbc6bd;
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-500);
}
#cell-6 .deal__doc-foot-page { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════
   ALIVE AT t0 (inviolable) — every content element is fully visible on a fresh
   load at scrollY=0, with NO exception (no motion / reduced-motion / ?solo).
   Per David's standing no-scroll-reveal law + this build's hard constraint: the
   copy is NEVER gated behind a scroll-reveal opacity fade. All aliveness here is
   AMBIENT (the tungsten warm-glow overlay + the stamp ink-breath, both running at
   rest) and STATE-DRIVEN (the one-shot stamp press on scroll-in — a decorative,
   aria-hidden flourish, never content). The old .deal-ready content-hide cascade
   was removed for exactly this reason: content must not depend on a reveal firing.
   ════════════════════════════════════════════════════════════════════ */

/* The stamp: at rest it sits pressed + settled (this is its t0 state — correct and
   complete). Under motion it starts a hair lifted then presses down ONCE on
   scroll-in (cell-6.js drives the scale via a CSS var — a stamp never loops). The
   tungsten ink-breath is a compositor-cheap opacity idle on a ::before ink layer,
   DIM in the Primer breath. The stamp is aria-hidden decoration — animating it
   never gates content. */
#cell-6 .deal__stamp {
  /* base resting transform declared above (rotate -9deg); JS composes scale on
     top via a CSS var so the rotate is never lost. */
  transform: rotate(-9deg) scale(var(--stamp-s, 1));
}
/* quiet tungsten ink-breath: a faint red inner glow that breathes at rest so the
   stamp is alive without moving (T2.33 aliveness at rest). Own the opacity via
   the shared tungsten idle keyframe, DIM register (Primer breath). Never a blur
   animation — opacity only. */
#cell-6 .deal__stamp::before {
  content: '';
  position: absolute;
  inset: -14px;                      /* wider halo so the breath moves real luma
                                         around the stamp (T2.24 — felt, not
                                         technically-firing-but-invisible) */
  z-index: -1;
  border-radius: var(--radius);
  pointer-events: none;
  background: radial-gradient(62% 62% at 50% 50%,
    rgba(194,35,27,0.34) 0%, rgba(194,35,27,0.10) 45%, rgba(194,35,27,0.0) 72%);
  opacity: 0;
}
/* engage the ink-breath only when motion is live (dim tungsten register — the
   glow BREATHES .73→.95 of this base, a felt warm pulse behind the ink, kept
   calm for the Primer exhale, never seen-first, T2.22). */
.motion-ready #cell-6 .deal__stamp::before {
  animation: tungsten-idle 8.2s ease-in-out infinite;
  opacity: 0.72;
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready #cell-6 .deal__stamp::before { animation: none; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile is desktop RECOMPOSED, not squished (T2.31).
   The two columns stack: explanation first, then the document plate. One
   viewport-density read per column; the document stays legible + the stamp
   scales with it (never clipped).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #cell-6 .deal {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
    align-items: start;
  }
  #cell-6 .deal__copy { max-width: 40rem; }
  /* row 10: the sheet goes full-width when stacked — gentle the tilt so a rotated
     full-width sheet never pushes past the section (overflow:clip would shear it)
     and pivot from the top so the bottom edge doesn't swing wide. */
  #cell-6 .deal__doc-wrap {
    transform: rotate(-0.9deg);
    transform-origin: 50% 0%;
    /* small inset so the tilt's ~few-px corner swing stays inside the gutter and
       the sheet edge + dog-ear read fully (never shorn by section overflow:clip). */
    margin-inline: clamp(0.4rem, 2vw, 0.7rem);
  }
}

@media (max-width: 560px) {
  /* keep the icon plate + text side-by-side but tighten the track so the spec
     lines never crush; the stamp shrinks with the sheet (clamp handles it). */
  #cell-6 .deal__row {
    grid-template-columns: clamp(2.6rem, 12vw, 3.4rem) 1fr;
    gap: 0.9rem;
  }
  #cell-6 .deal__row-icon { width: clamp(2.6rem, 12vw, 3.4rem); height: clamp(2.6rem, 12vw, 3.4rem); }
  #cell-6 .deal__meta { gap: 1.5rem; }
  #cell-6 .deal__cta { width: 100%; justify-content: center; }
  /* the stamp tucks a touch tighter on the smallest sheets so it clears the head */
  #cell-6 .deal__doc-head { padding-right: clamp(5rem, 30vw, 7rem); }
  /* row 10: near-flat tilt + clip pulled in on the smallest sheets so nothing
     overhangs the viewport at 390px (section overflow:clip would otherwise shear
     the clip / a rotated corner). */
  #cell-6 .deal__doc-wrap { transform: rotate(-0.6deg); }
  #cell-6 .deal__clip {
    left: clamp(1rem, 6vw, 1.8rem);
    top: -0.3rem;
  }
  /* R98: the doc title read overkill at phone width (a wide-screen fit reflex) —
     a touch smaller and slimmer, still the letterhead of the sheet */
  #cell-6 .deal__doc-title {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
}