/* Corretores e Imobiliárias (#/corretores) — all selectors prefixed .cr- (spec-v3 §7).
   Every rule below is the final, readable state: motion (js/motion.js) only animates *into* it. */

/* ── Hero ────────────────────────────────────────────────── */
.cr-hero { padding-block: 64px 96px; }
.cr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.cr-hero-copy { position: sticky; top: 112px; display: grid; gap: 22px; align-content: start; padding-top: 24px; }
.cr-hero-copy h1 { font-size: clamp(2.75rem, 4.2vw, 3.6rem); }
.cr-key {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--fz-display), sans-serif; font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--fz-primary);
}
.cr-key::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fz-accent); box-shadow: 0 0 0 5px var(--fz-accent-dim); }
.cr-hero-points { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 20px; border-top: 1px solid var(--fz-line); }
.cr-hero-points li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fz-text-body-sm); color: var(--fz-ink-soft); }
.cr-hero-points svg { color: var(--fz-accent-deep); }
.cr-hero-visual { display: grid; justify-items: end; }

/* Conversation (Talhão-styled messenger: out = Verde-Mandato, in = white) */
.cr-chat {
  width: 100%; max-width: 540px; background: var(--fz-white); border: 1px solid var(--fz-line); border-radius: var(--fz-r-md); overflow: hidden;
  box-shadow: 0 50px 90px -56px rgba(8, 21, 13, .5), 0 2px 6px rgba(8, 21, 13, .04);
}
.cr-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--fz-line); background: var(--fz-white); }
.cr-chat-av {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fz-primary); color: var(--fz-on-primary); font-family: var(--fz-display), sans-serif; font-weight: 700; font-size: 17px;
}
.cr-chat-av.is-sm { width: 32px; height: 32px; font-size: 14px; }
.cr-chat-who { display: grid; line-height: 1.25; min-width: 0; }
.cr-chat-who strong { font-family: var(--fz-display), sans-serif; font-weight: 600; font-size: 1.05rem; }
.cr-chat-who small { font-size: var(--fz-text-caption); color: var(--fz-ink-soft); }
.cr-chat-head .demo-note { margin-left: auto; flex: none; }
.cr-chat-body { display: grid; gap: 10px; padding: 18px 16px 22px; background: var(--fz-paper-2); }
.cr-chat-foot { padding: 12px 18px; border-top: 1px solid var(--fz-line); font-size: var(--fz-text-caption); color: var(--fz-ink-soft); background: var(--fz-white); }
.cr-day {
  justify-self: center; margin: 6px 0 2px; padding: 4px 12px; border: 1px solid var(--fz-line); border-radius: var(--fz-r-full); background: var(--fz-white);
  font-weight: 600; font-size: var(--fz-text-label-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--fz-ink-soft);
}

.cr-msg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 86%; padding: 10px 12px 8px; border-radius: var(--fz-r-sm); font-size: 15px; line-height: 1.45; text-align: left; }
.cr-msg.is-out { justify-self: end; background: var(--fz-primary); color: var(--fz-on-primary); border-bottom-right-radius: var(--fz-r-xs); }
.cr-msg.is-in { justify-self: start; background: var(--fz-white); color: var(--fz-ink); border: 1px solid var(--fz-line); border-bottom-left-radius: var(--fz-r-xs); }
.cr-msg.has-dl { width: 92%; max-width: 420px; }
.cr-msg-time { justify-self: end; margin-top: -2px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--fz-ink-soft); }
.cr-msg.is-out .cr-msg-time { color: var(--fz-on-dark-soft); }
.cr-tx { font-size: var(--fz-text-body-sm); line-height: 1.45; }
.cr-msg.is-out .cr-tx { color: rgba(249, 253, 250, .82); }
.cr-msg.is-in .cr-tx { color: var(--fz-ink-soft); }

/* Audio bubble: play + waveform (progress = clip of a second, filled copy) + time */
.cr-au {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 300px; max-width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.cr-au.is-static { width: 240px; cursor: default; }
.cr-au-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fz-on-primary); color: var(--fz-primary); transition: transform .16s var(--fz-ease); }
.cr-msg.is-in .cr-au-btn { background: var(--fz-primary); color: var(--fz-on-primary); }
.cr-au:not(.is-static):hover .cr-au-btn { transform: scale(1.06); }
.cr-au svg + svg, .cr-au[aria-pressed="true"] svg:first-child { display: none; }
.cr-au[aria-pressed="true"] svg + svg { display: block; }
.cr-au-wave { position: relative; height: 28px; overflow: hidden; }
.cr-au-wave > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.cr-au-wave i { flex: 1; min-width: 1px; height: calc(var(--h) * 100%); border-radius: 2px; background: currentColor; opacity: .35; }
.cr-au-wave .is-fill { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.cr-au-wave .is-fill i { opacity: 1; background: var(--fz-accent-soft); }
.cr-msg.is-in .cr-au-wave .is-fill i { background: var(--fz-accent); }
.cr-au-time { min-width: 4ch; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Video bubble: real poster frame + play + duration */
.cr-vid { position: relative; display: block; width: 300px; max-width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--fz-r-xs); overflow: hidden; background: var(--fz-bg-deep); cursor: pointer; }
.cr-vid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--fz-ease); }
.cr-vid:hover img { transform: scale(1.04); }
.cr-vid-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(249, 253, 250, .92); color: var(--fz-primary); box-shadow: 0 8px 24px -8px rgba(5, 16, 9, .6); }
.cr-vid-play svg { width: 22px; height: 22px; margin-left: 2px; }
.cr-vid-dur { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--fz-r-full); background: rgba(5, 16, 9, .66); color: var(--fz-on-dark); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Delivery bubble: a card that scrolls to its offering */
.cr-dl {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px;
  border: 1px solid var(--fz-line); border-radius: var(--fz-r-xs); background: var(--fz-paper); color: var(--fz-ink); text-align: left; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.cr-dl:hover { border-color: var(--fz-accent-deep); background: var(--fz-white); }
.cr-dl-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--fz-r-xs); background: var(--fz-surface); color: var(--fz-primary); }
.cr-dl-copy { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.cr-dl-copy strong { font-weight: 600; font-size: 15px; }
.cr-dl-copy small { font-size: var(--fz-text-caption); color: var(--fz-ink-soft); }
.cr-dl-go { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--fz-accent-deep); white-space: nowrap; }
.cr-dl-go svg { transform: rotate(90deg); transition: transform .2s var(--fz-ease); }
.cr-dl:hover .cr-dl-go svg { transform: rotate(90deg) translateX(2px); }

.cr-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--fz-r-sm); background: var(--fz-bg-deep); }
.cr-chat-toggle { display: none; }
.cr-ic-line { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.cr-ic-line svg { margin-top: 3px; color: var(--fz-accent-deep); }
.cr-ic-line strong { font-weight: 600; word-break: break-word; }

/* ── O que oferecemos ────────────────────────────────────── */
.cr-oferta .section-head { max-width: 820px; }
.cr-oferta .section-head h2 { font-size: clamp(2.4rem, 4.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; }
.cr-oferta:focus { outline: none; }

/* Index: the 14 in literal order; the dot tells the block */
.cr-index-wrap { margin-bottom: 72px; padding: 24px 0; border-block: 1px solid var(--fz-line); }
.cr-index { columns: 3; column-gap: 40px; }
.cr-index li { display: flex; align-items: baseline; gap: 10px; break-inside: avoid; padding: 6px 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
.cr-index li span { flex: none; width: 22px; font-weight: 600; font-size: var(--fz-text-label); letter-spacing: .08em; color: var(--fz-ink-soft); font-variant-numeric: tabular-nums; }
/* Block marker: color + shape (block 3 is a ring) so color is not the only cue; the legend names the blocks */
.cr-oferta [data-g="1"], .cr-group[data-group="1"] { --g: var(--fz-primary); }
.cr-oferta [data-g="2"], .cr-group[data-group="2"] { --g: var(--fz-accent); }
.cr-oferta [data-g="3"], .cr-group[data-group="3"] { --g: var(--fz-white); --gr: var(--fz-accent-deep); }
.cr-oferta [data-g="4"], .cr-group[data-group="4"] { --g: var(--fz-ink-soft); }
.cr-gdot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--g); box-shadow: inset 0 0 0 2px var(--gr, var(--g)); }
.cr-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--fz-line); font-size: var(--fz-text-caption); font-weight: 500; color: var(--fz-ink-soft); }
.cr-legend li { display: inline-flex; align-items: center; gap: 8px; }

.cr-groups { display: grid; gap: 88px; }
.cr-group-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 6px 48px; margin-bottom: 24px; }
.cr-group-k { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fz-text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fz-ink-soft); }
.cr-group-k::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--g); box-shadow: inset 0 0 0 2px var(--gr, var(--g)), 0 0 0 4px var(--fz-accent-dim); }
.cr-group-t { font-size: clamp(1.75rem, 2.8vw, 2.25rem); line-height: 1.08; letter-spacing: -0.03em; }
.cr-group-sub { justify-self: end; max-width: 44ch; color: var(--fz-ink-soft); text-align: right; }

/* Bento: 6 columns; size classes from the page module (x = columns, y = rows) */
.cr-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row; gap: 16px; }
.cr-card.is-x2 { grid-column: span 2; }
.cr-card.is-x3 { grid-column: span 3; }
.cr-card.is-x4 { grid-column: span 4; }
.cr-card.is-x6 { grid-column: span 6; }
.cr-card.is-y2 { grid-row: span 2; }

.cr-card {
  position: relative; display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 28px;
  background: var(--fz-white); border: 1px solid var(--fz-line); border-radius: var(--fz-r-md); overflow: hidden;
  box-shadow: 0 1px 2px rgba(8, 21, 13, .04), 0 28px 56px -40px rgba(8, 21, 13, .32);
  scroll-margin-top: 96px;
}
.cr-card::before { content: ""; position: absolute; left: 28px; top: 0; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gr, var(--g)); }
.cr-card-copy { display: grid; gap: 8px; align-content: start; }
.cr-card-n { font-weight: 600; font-size: var(--fz-text-label); letter-spacing: .08em; color: var(--fz-accent-deep); font-variant-numeric: tabular-nums; }
.cr-card h3 { font-size: 1.4rem; line-height: 1.14; letter-spacing: -0.025em; max-width: 24ch; }
.cr-card.is-x4 h3, .cr-card.is-x6 h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.cr-card-desc { max-width: 54ch; font-size: 15px; line-height: 1.55; color: var(--fz-ink-soft); }
.cr-demo { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 22px; border-radius: var(--fz-r-sm); background: var(--fz-paper-2); }
:where(.cr-demo > div) { display: grid; gap: 14px; justify-items: center; width: 100%; min-width: 0; }
.cr-demo-note { justify-self: start; }

/* Wide card (11): copy left, demo right */
.cr-card.is-x6 { flex-direction: row; align-items: stretch; gap: 40px; }
.cr-card.is-x6 .cr-card-copy { flex: 0 0 30%; align-content: center; }
.cr-card.is-x6 .cr-demo { flex: 1; }

/* Ink card (07): Verde-Mandato */
.cr-card.is-ink { background: var(--fz-primary); border-color: var(--fz-primary); color: var(--fz-on-primary); }
.cr-card.is-ink .cr-card-n { color: var(--fz-accent-soft); }
.cr-card.is-ink .cr-card-desc { color: var(--fz-on-dark-soft); }
.cr-card.is-ink::before { background: var(--fz-accent-soft); }
.cr-card.is-ink .cr-demo { background: rgba(249, 253, 250, .06); }

/* Shared demo bits */
.cr-mark {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--fz-primary); color: var(--fz-on-primary); font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.cr-mark.is-sm { width: 26px; height: 26px; font-size: 10px; }
.cr-mini-h { justify-self: stretch; font-weight: 600; font-size: var(--fz-text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fz-ink-soft); }
.cr-mini-foot { justify-self: stretch; font-size: var(--fz-text-caption); color: var(--fz-ink-soft); }
.cr-demo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-par { will-change: transform; }

/* 01 · listing card */
.cr-d01 { max-width: 560px; }
.cr-d01-media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--fz-r-sm) var(--fz-r-sm) 0 0; background: var(--fz-surface); }
.cr-d01-media img { position: absolute; left: 0; top: -8%; height: 116%; }
.cr-d01-badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: var(--fz-r-full); background: rgba(249, 253, 250, .94); color: var(--fz-primary); font-weight: 600; font-size: 13px; box-shadow: 0 8px 20px -10px rgba(5, 16, 9, .5); }
.cr-d01-badge svg { color: var(--fz-accent-deep); }
.cr-d01-body { width: 100%; margin-top: -14px; padding: 18px 20px 20px; background: var(--fz-white); border: 1px solid var(--fz-line); border-top: 0; border-radius: 0 0 var(--fz-r-sm) var(--fz-r-sm); box-shadow: 0 24px 40px -30px rgba(8, 21, 13, .35); }
.cr-d01-title { display: grid; gap: 2px; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; }
.cr-d01-title small { font-weight: 400; font-size: var(--fz-text-caption); letter-spacing: 0; color: var(--fz-ink-soft); }
.cr-d01-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cr-d01-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--fz-line); border-radius: var(--fz-r-full); background: var(--fz-paper); font-size: 13px; font-weight: 500; }
.cr-d01-chips svg { color: var(--fz-accent-deep); }

/* 03 · phone with the broker's page */
.cr-phone { width: min(100%, 236px); padding: 12px 10px 14px; border: 1px solid var(--fz-line-strong); border-radius: 26px; background: var(--fz-white); box-shadow: 0 30px 50px -30px rgba(8, 21, 13, .45); }
.cr-phone-url { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 6px 12px; padding: 5px 8px; border-radius: var(--fz-r-full); background: var(--fz-paper-2); font-size: 11px; color: var(--fz-ink-soft); overflow: hidden; white-space: nowrap; }
.cr-phone-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 12px; border-bottom: 1px solid var(--fz-line); }
.cr-phone-brand span { display: grid; line-height: 1.2; min-width: 0; }
.cr-phone-brand strong { font-size: 13px; }
.cr-phone-brand small { font-size: 11px; color: var(--fz-ink-soft); }
.cr-phone-list { display: grid; gap: 8px; padding-top: 10px; }
.cr-phone-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px; border-radius: var(--fz-r-xs); }
.cr-phone-list li + li { border-top: 1px solid var(--fz-line); border-radius: 0; padding-top: 10px; }
.cr-phone-list img { width: 64px; height: 52px; border-radius: 6px; }
.cr-phone-list span { display: grid; line-height: 1.25; min-width: 0; }
.cr-phone-list strong { font-size: 12.5px; }
.cr-phone-list small { font-size: 11px; color: var(--fz-ink-soft); }

/* 04 · post + story */
.cr-d04 { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: center; justify-items: stretch; column-gap: 0; }
.cr-d04 .cr-demo-note { grid-column: 1 / -1; }
.cr-post { position: relative; z-index: 1; overflow: hidden; border: 1px solid var(--fz-line); border-radius: var(--fz-r-sm); background: var(--fz-white); box-shadow: 0 20px 40px -28px rgba(8, 21, 13, .4); }
.cr-post-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12px; font-weight: 600; }
.cr-post-head span { display: grid; line-height: 1.15; }
.cr-post-head small { font-weight: 400; font-size: 11px; color: var(--fz-ink-soft); }
.cr-post img { aspect-ratio: 1 / 1; height: auto; }
.cr-post-cap { padding: 8px 58px 10px 10px; font-size: 12px; line-height: 1.4; color: var(--fz-ink-soft); }
.cr-post-cap strong { color: var(--fz-ink); margin-right: 4px; }
.cr-story { position: relative; z-index: 2; margin-left: -48px; aspect-ratio: 9 / 16; overflow: hidden; border: 3px solid var(--fz-white); border-radius: 18px; background: var(--fz-bg-deep); box-shadow: 0 30px 50px -24px rgba(5, 16, 9, .55); }
.cr-story img { position: absolute; inset: 0; }
.cr-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 16, 9, .35) 0%, rgba(5, 16, 9, 0) 30%, rgba(5, 16, 9, 0) 45%, rgba(5, 16, 9, .82) 100%); }
.cr-story-bar { position: absolute; z-index: 1; left: 8px; right: 8px; top: 8px; display: flex; gap: 3px; }
.cr-story-bar i { flex: 1; height: 2px; border-radius: 2px; background: rgba(249, 253, 250, .5); }
.cr-story-bar i:first-child { background: var(--fz-on-dark); }
.cr-story figcaption { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 12px; display: grid; gap: 2px; color: var(--fz-on-dark); line-height: 1.15; }
.cr-story small { justify-self: start; margin-bottom: 4px; padding: 2px 8px; border-radius: var(--fz-r-full); background: var(--fz-accent); color: var(--fz-accent-ink); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.cr-story strong { font-size: 15px; letter-spacing: -0.01em; }
.cr-story span { font-size: 11px; color: var(--fz-on-dark-soft); }
.cr-story em { margin-top: 6px; font-style: normal; font-size: 10.5px; font-weight: 600; }

/* 09 · report sheet */
.cr-sheet { width: min(100%, 420px); padding: 20px 22px; border: 1px solid var(--fz-line); border-radius: var(--fz-r-xs); background: var(--fz-white); box-shadow: 0 24px 44px -30px rgba(8, 21, 13, .4); transform: rotate(-1.2deg); }
.cr-sheet-k { font-weight: 600; font-size: var(--fz-text-label-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--fz-ink-soft); }
.cr-sheet-t { padding-bottom: 12px; border-bottom: 2px solid var(--fz-ink); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; }
.cr-sheet-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--fz-line); }
.cr-sheet-kpis div { display: grid; gap: 2px; padding: 12px 8px 12px 0; }
.cr-sheet-kpis div + div { padding-left: 10px; border-left: 1px solid var(--fz-line); }
.cr-sheet-kpis dt { font-size: 11px; color: var(--fz-ink-soft); overflow: hidden; text-overflow: ellipsis; }
.cr-sheet-kpis dd { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cr-sheet-weeks { display: flex; align-items: flex-end; gap: 10px; height: 64px; margin: 14px 0 20px; border-bottom: 1px solid var(--fz-line-strong); }
.cr-sheet-weeks span { position: relative; display: flex; flex: 1; height: 100%; align-items: flex-end; }
.cr-sheet-weeks i { display: block; width: 100%; height: calc(var(--h) * 100%); border-radius: 2px 2px 0 0; background: var(--fz-accent); }
.cr-sheet-weeks small { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font-size: 10px; font-weight: 600; color: var(--fz-ink-soft); }
.cr-sheet-attn { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; }
.cr-sheet-attn span { font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fz-ink-soft); }

/* 11 · sponsored ad + targeting */
.cr-d11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
.cr-d11 .cr-demo-note { grid-column: 1 / -1; }
.cr-ad { width: 100%; max-width: 340px; justify-self: end; overflow: hidden; border: 1px solid var(--fz-line); border-radius: var(--fz-r-sm); background: var(--fz-white); box-shadow: 0 24px 44px -28px rgba(8, 21, 13, .45); }
.cr-ad-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cr-ad-media img { position: absolute; left: 0; top: -8%; height: 116%; }
.cr-ad-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--fz-line); }
.cr-ad-cta > span:first-child { display: grid; line-height: 1.25; min-width: 0; }
.cr-ad-cta strong { font-size: 13px; }
.cr-ad-cta small { font-size: 11.5px; color: var(--fz-ink-soft); }
.cr-ad-btn { flex: none; padding: 6px 10px; border: 1px solid var(--fz-line-strong); border-radius: var(--fz-r-xs); background: var(--fz-surface); color: var(--fz-ink-soft); font-size: 12px; font-weight: 600; }
.cr-ad-target { justify-self: start; display: grid; width: 100%; max-width: 320px; border-top: 1px solid var(--fz-line); }
.cr-ad-target li { display: grid; gap: 1px; padding: 10px 0; border-bottom: 1px solid var(--fz-line); font-size: 14px; font-weight: 500; }
.cr-ad-target span { font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fz-accent-deep); }

/* 06 · R$/ha bars */
.cr-d06 { justify-items: stretch; }
.cr-bars { display: grid; gap: 8px; }
.cr-bars li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) auto; align-items: center; gap: 12px; font-size: 13px; }
.cr-bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fz-ink-soft); }
.cr-bars .is-self > span:first-child { color: var(--fz-primary); font-weight: 600; }
.cr-bar { height: 12px; border-radius: 3px; background: var(--fz-surface-2); overflow: hidden; }
.cr-bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 3px; background: var(--fz-line-strong); }
.cr-bars .is-self .cr-bar i { background: var(--fz-accent); }
.cr-bars b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* 07 · public databases wall */
.cr-d07 { gap: 20px; justify-items: stretch; }
.cr-d07-count { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; color: var(--fz-on-primary); }
.cr-d07-count b { font-weight: 700; font-size: clamp(4rem, 7vw, 5.5rem); line-height: .9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.cr-d07-count span { font-size: 14px; line-height: 1.4; color: var(--fz-on-dark-soft); }
.cr-dbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cr-dbs li { display: grid; gap: 1px; padding: 9px 12px; border: 1px solid var(--fz-hair-strong); border-radius: var(--fz-r-xs); background: rgba(249, 253, 250, .04); line-height: 1.25; }
.cr-dbs strong { font-size: 14px; color: var(--fz-on-primary); }
.cr-dbs small { font-size: 12px; color: var(--fz-on-dark-soft); }

/* 10 · checklist */
.cr-d10 { justify-items: stretch; }
.cr-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cr-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--fz-line); border-radius: var(--fz-r-xs); background: var(--fz-white); }
.cr-tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fz-accent); color: var(--fz-accent-ink); }
.cr-tick svg { stroke-width: 2.4; }
.cr-checks span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.cr-checks strong { font-size: 14px; }
.cr-checks small { font-size: 12px; color: var(--fz-ink-soft); }

/* 02 · buyer profiles */
.cr-d02 { justify-items: stretch; }
.cr-buyers { display: grid; gap: 8px; }
.cr-buyers li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--fz-line); border-radius: var(--fz-r-sm); background: var(--fz-white); box-shadow: 0 12px 24px -20px rgba(8, 21, 13, .35); }
.cr-buyers li:nth-child(2) { margin-left: 14px; margin-right: -6px; }
.cr-buyers li:nth-child(3) { margin-left: 28px; margin-right: -12px; opacity: .9; }
.cr-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fz-surface-2); color: var(--fz-primary); font-weight: 700; font-size: 12px; }
.cr-buyers li > span:nth-child(2) { display: grid; line-height: 1.25; min-width: 0; }
.cr-buyers strong { font-size: 13.5px; }
.cr-buyers small { font-size: 12px; color: var(--fz-ink-soft); }
.cr-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--fz-accent-deep); white-space: nowrap; }

/* 13 · off-market demand ticket */
.cr-d13 { position: relative; }
.cr-ticket { position: relative; z-index: 1; width: min(100%, 380px); padding: 16px 18px; border: 1px solid var(--fz-line); border-radius: var(--fz-r-sm); background: var(--fz-white); box-shadow: 0 24px 44px -30px rgba(8, 21, 13, .45); }
.cr-ticket.is-back { position: absolute; z-index: 0; top: 10px; height: 70%; transform: rotate(3deg) translateX(10px); background: var(--fz-surface); box-shadow: none; }
.cr-ticket-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--fz-line-strong); }
.cr-ticket-h span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fz-primary); }
.cr-ticket-h span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fz-accent); }
.cr-ticket-h small { font-size: 12px; color: var(--fz-ink-soft); font-variant-numeric: tabular-nums; }
.cr-ticket dl { display: grid; gap: 0; }
.cr-ticket dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--fz-line); font-size: 13.5px; }
.cr-ticket dt { color: var(--fz-ink-soft); }
.cr-ticket dd { font-weight: 500; }
.cr-ticket-f { display: flex; align-items: center; gap: 8px; padding-top: 10px; font-size: 13px; color: var(--fz-ink-soft); }
.cr-ticket-f svg { flex: none; color: var(--fz-accent-deep); }

/* 05 · lead conversation + hand-off */
#cr-o-05 .cr-demo { align-items: flex-start; }
.cr-d05 { justify-items: stretch; }
.cr-lead { display: grid; gap: 8px; width: 100%; max-width: 440px; justify-self: center; }
.cr-lead .cr-msg { max-width: 88%; font-size: 14px; }
.cr-lead-who { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fz-ink-soft); justify-self: end; }
.cr-lead-who.is-team { justify-self: start; }
.cr-attach { display: grid; gap: 6px; }
.cr-attach img { aspect-ratio: 16 / 9; height: auto; border-radius: var(--fz-r-xs); border: 1px solid var(--fz-line); }
.cr-attach small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fz-ink-soft); }
.cr-attach svg { color: var(--fz-accent-deep); }
.cr-lead .cr-msg.is-out { background: var(--fz-surface-2); color: var(--fz-ink); }
.cr-handoff { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: var(--fz-r-sm); background: var(--fz-primary); color: var(--fz-on-primary); box-shadow: 0 20px 40px -26px rgba(0, 62, 32, .7); }
.cr-handoff svg { box-sizing: content-box; padding: 7px; border-radius: 50%; background: var(--fz-accent); color: var(--fz-accent-ink); transform: rotate(90deg); }
.cr-handoff span { display: grid; line-height: 1.3; }
.cr-handoff strong { font-size: 14px; }
.cr-handoff small { font-size: 12.5px; color: var(--fz-on-dark-soft); }

/* 08 · mini chat */
.cr-mini-chat { display: grid; gap: 8px; width: 100%; max-width: 300px; padding: 12px; border: 1px solid var(--fz-line); border-radius: var(--fz-r-sm); background: var(--fz-white); box-shadow: 0 20px 40px -28px rgba(8, 21, 13, .4); }
.cr-mini-chat-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--fz-line); }
.cr-mini-chat-h span:last-child { display: grid; line-height: 1.2; }
.cr-mini-chat-h strong { font-size: 13.5px; }
.cr-mini-chat-h small { font-size: 11.5px; color: var(--fz-ink-soft); }
.cr-mini-chat .cr-msg { max-width: 100%; font-size: 13.5px; }
.cr-mini-chat .cr-msg.is-in { background: var(--fz-paper-2); }
.cr-mini-chat .cr-au { width: 210px; max-width: 100%; }

/* 12 · Brazil network (illustrative) */
.cr-d12 { gap: 16px; }
.cr-br { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.cr-br-land { fill: var(--fz-surface-2); stroke: var(--fz-line-strong); stroke-width: 1.2; stroke-linejoin: round; }
.cr-net-line { fill: none; stroke: var(--fz-accent); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .8; }
.cr-net-dot { fill: var(--fz-primary); stroke: var(--fz-white); stroke-width: 1.5; }
.cr-net-dot.is-pulse { fill: var(--fz-accent); transform-box: fill-box; transform-origin: center; animation: cr-pulse 2.6s var(--fz-ease) infinite; }
@keyframes cr-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .7; } }
.cr-net-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
.cr-net-legend li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.35; }
.cr-net-legend i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--fz-primary); justify-self: center; }
.cr-net-legend i.is-line { width: 20px; height: 0; border-radius: 0; border-top: 2px dashed var(--fz-accent); background: none; }

/* 14 · training trail */
.cr-d14 { justify-items: stretch; }
.cr-trail { position: relative; display: grid; gap: 12px; }
.cr-trail::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--fz-line); }
.cr-trail li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; }
.cr-trail-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--fz-line-strong); background: var(--fz-white); font-weight: 600; font-size: 12px; color: var(--fz-ink-soft); }
.cr-trail .is-done .cr-trail-dot { border-color: var(--fz-accent); background: var(--fz-accent); color: var(--fz-accent-ink); }
.cr-trail .is-done .cr-trail-dot svg { stroke-width: 2.4; }
.cr-trail .is-now .cr-trail-dot { border-color: var(--fz-primary); background: var(--fz-primary); color: var(--fz-on-primary); box-shadow: 0 0 0 4px var(--fz-accent-dim); }
.cr-trail li > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.cr-trail strong { font-size: 13.5px; }
.cr-trail small { font-size: 11.5px; color: var(--fz-ink-soft); }

/* ── Como funciona pelo WhatsApp (lean) ──────────────────── */
.cr-wa-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; }
.cr-wa-steps > li { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr; gap: 8px; padding-top: 30px; border-top: 2px solid var(--fz-line); }
.cr-wa-dot { position: absolute; left: 0; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--fz-accent); box-shadow: 0 0 0 5px var(--fz-paper), 0 0 0 6px var(--fz-line); }
.cr-wa-n { font-weight: 600; font-size: var(--fz-text-label); letter-spacing: .08em; color: var(--fz-accent-deep); }
.cr-wa-steps h3 { font-size: 1.15rem; line-height: 1.22; letter-spacing: -0.015em; }
.cr-wa-steps p { font-size: var(--fz-text-body-sm); line-height: 1.55; color: var(--fz-ink-soft); }
.cr-wa-who { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fz-text-caption); font-weight: 500; color: var(--fz-ink); }
.cr-wa-who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fz-accent); }
.cr-wa-mini { align-self: end; display: grid; margin-top: 10px; }
.cr-wa-mini .cr-msg { max-width: 100%; font-size: var(--fz-text-body-sm); }
.cr-wa-mini .cr-msg.is-in { box-shadow: 0 12px 28px -22px rgba(8, 21, 13, .35); }
.cr-wa-mini .cr-au { width: 100%; }
.cr-wa-steps .cr-wa-mini p { color: inherit; }
.cr-wa-mini .cr-msg.is-out .cr-tx { color: rgba(249, 253, 250, .82); }
.cr-wa-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 24px; font-size: var(--fz-text-caption); color: var(--fz-ink-soft); }

/* ── FAQ + fechamento ────────────────────────────────────── */
.cr-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.cr-faq-intro { display: grid; gap: 8px; align-content: start; }
.cr-faq-intro h2 { font-size: var(--fz-text-headline); }
.cr-final { display: grid; gap: 16px; justify-items: start; margin-top: 24px; padding: 24px; background: var(--fz-white); border: 1px solid var(--fz-line); border-radius: var(--fz-r-sm); }
.cr-final p { color: var(--fz-ink-soft); }
.cr-final strong { display: block; margin-bottom: 4px; color: var(--fz-ink); font-size: 1.2rem; letter-spacing: -0.02em; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cr-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cr-hero-copy { position: static; padding-top: 0; }
  .cr-hero-copy h1 { max-width: 16ch; }
  .cr-hero-visual { justify-items: start; }
  .cr-chat { max-width: 600px; }

  .cr-index { columns: 2; }
  .cr-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-card.is-x2, .cr-card.is-x3 { grid-column: span 1; }
  /* 2 columns, sparse flow: spans chosen so every block keeps numeric order */
  .cr-card.is-x4, .cr-card.is-x6, #cr-o-09, #cr-o-10, #cr-o-13, #cr-o-14 { grid-column: span 2; }
  #cr-o-07, #cr-o-12 { grid-column: span 1; }
  .cr-card.is-y2 { grid-row: span 1; }
  .cr-card.is-x6 { flex-direction: column; gap: 22px; }
  .cr-card.is-x6 .cr-card-copy { flex: none; }
  .cr-bars li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .cr-bar { grid-column: 1 / -1; grid-row: 2; }
  .cr-buyers li { grid-template-columns: 32px minmax(0, 1fr); }
  .cr-buyers .cr-ok { grid-column: 2; }
  .cr-buyers li:nth-child(n) { margin: 0; }
  .cr-av { width: 32px; height: 32px; }

  .cr-wa-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cr-wa-steps > li { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-rows: auto; column-gap: 32px; row-gap: 6px; align-content: start; padding: 0 0 36px 32px; border-top: 0; border-left: 2px solid var(--fz-line); }
  .cr-wa-steps > li:last-child { padding-bottom: 4px; }
  .cr-wa-steps > li > :not(.cr-wa-mini, .cr-wa-dot) { grid-column: 1; }
  .cr-wa-dot { left: -8px; top: 0; }
  .cr-wa-mini { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 0; }
  .cr-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 760px) {
  .cr-hero { padding-block: 40px 64px; }
  .cr-hero-copy h1 { font-size: clamp(2.4rem, 10vw, 2.9rem); }
  .cr-key { font-size: 1.25rem; }
  .cr-chat-head { flex-wrap: wrap; row-gap: 6px; padding: 12px 14px; }
  .cr-chat-head .demo-note { order: 3; margin-left: 52px; }
  .cr-chat-body { padding: 14px 10px 18px; }
  .cr-msg { max-width: 92%; }
  .cr-msg.has-dl { width: 100%; }
  .cr-dl { gap: 10px; padding: 8px 10px; }
  .cr-dl-go { font-size: 0; gap: 0; }
  .cr-chat-foot { padding: 10px 14px; }
  .cr-chat:not([data-open]) .cr-more { display: none; }
  .cr-chat-toggle {
    display: inline-flex; align-items: center; justify-self: center; min-height: 44px; padding: 0 18px;
    border: 1px solid var(--fz-line-strong); border-radius: var(--fz-r-full); background: var(--fz-white);
    font-size: var(--fz-text-body-sm); font-weight: 600; color: var(--fz-primary);
  }

  .cr-index { columns: 1; }
  .cr-index-wrap { margin-bottom: 48px; padding: 16px 0; }
  .cr-legend { flex-direction: column; gap: 6px; }
  .cr-index li { padding: 4px 0; font-size: 14px; }
  .cr-groups { gap: 64px; }
  .cr-group-head { grid-template-columns: minmax(0, 1fr); }
  .cr-group-sub { justify-self: start; text-align: left; }
  .cr-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cr-checks { grid-template-columns: minmax(0, 1fr); }
  .cr-card.is-x2, .cr-card.is-x3, .cr-card.is-x4, .cr-card.is-x6, #cr-o-07, #cr-o-09, #cr-o-10, #cr-o-12, #cr-o-13, #cr-o-14 { grid-column: auto; }
  .cr-card { gap: 18px; padding: 22px 18px 18px; }
  .cr-card::before { left: 18px; }
  .cr-card h3, .cr-card.is-x4 h3, .cr-card.is-x6 h3 { font-size: 1.3rem; }
  .cr-demo { min-height: 0; padding: 16px 12px; }
  .cr-d11, .cr-d07 { grid-template-columns: minmax(0, 1fr); }
  .cr-net-legend { justify-content: flex-start; flex-direction: column; }
  .cr-ad { justify-self: center; }
  .cr-d07-count b { font-size: 3.5rem; }
  .cr-dbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-dbs li { padding: 8px 10px; }
  .cr-sheet { padding: 16px; transform: none; }
  .cr-sheet-kpis dd { font-size: 1.25rem; }
  .cr-sheet-kpis dt { font-size: 10px; }
  .cr-sheet-kpis div + div { padding-left: 8px; }

  .cr-wa-steps > li { grid-template-columns: minmax(0, 1fr); padding-left: 24px; }
  .cr-wa-mini { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .cr-final { padding: 20px; justify-items: stretch; }
  .cr-final .btn { width: 100%; }
}
[data-motion="off"] .cr-net-dot.is-pulse { animation: none; }

.cr-show { padding-block: 64px 72px; background: var(--fz-paper); }
.cr-show-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.cr-show-head > div { max-width: 760px; }
.cr-show h1 { font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.cr-show .lead { margin-top: 18px; max-width: 52ch; }
  padding: 4px max(32px, calc((100vw - 1360px) / 2)) 24px; scrollbar-width: none; }
  border: 1px solid var(--fz-line); border-radius: var(--fz-r-md); background: var(--fz-white); box-shadow: 0 24px 50px -36px rgba(5, 16, 9, .35); }
  transition: background .2s var(--fz-ease), color .2s var(--fz-ease), border-color .2s var(--fz-ease); }
.cr-hero-t { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }
.cr-hero-visual .hm-wa { justify-self: stretch; }
@media (max-width: 760px) {
  .cr-show { padding-block: 40px 48px; }
}
.cr-show { padding-block: 48px 64px; }
.cr-show h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); max-width: 18ch; }
.cr-show { padding-bottom: 0; }

/* ═══ v3 layout ═══ */
  background: rgba(249, 253, 250, .04); color: var(--fz-on-dark); transition: background .25s var(--fz-ease), border-color .25s var(--fz-ease); }
/* 2 · scroll-driven iPhone */
.cr-hero { padding-block: 0; }
.cr-scene { padding-block: 64px; }
.cr-scene.is-pin { min-height: calc(100vh - 88px); display: grid; align-content: center; padding-block: 24px; }
.cr-hero-copy { position: static; padding-top: 0; }
.cr-hero-grid { align-items: center; }
.cr-hero-visual { justify-items: center; }
.cr-scene.is-pin .wa-phone .wa-chat { overflow: hidden; }
/* 3 · 13 big bullets + sign-up */
.cr-list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.cr-bul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.cr-bul li { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-top: 1px solid var(--fz-line); font-family: var(--fz-display), sans-serif; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 600; letter-spacing: -0.015em; }
.cr-bul li span { flex: none; min-width: 2ch; font-size: .85em; font-weight: 700; color: var(--fz-accent-deep); font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) {
}
@media (max-width: 760px) {
  .cr-bul { grid-template-columns: minmax(0, 1fr); }
}

  background: rgba(255, 255, 255, .94); color: var(--fz-ink); font-size: 13px; font-weight: 600; box-shadow: 0 8px 20px -10px rgba(5, 16, 9, .5); backdrop-filter: blur(6px); }

/* desktop: row 1 = 01–07, row 2 = 08–13; a compact head so both rows fit the first screen */
@media (min-width: 761px) {
  .cr-show { padding-top: 36px; }
  .cr-show-head h1 { font-size: clamp(2rem, 3vw, 2.8rem); max-width: 24ch; }
  .cr-show .lead { margin-top: 10px; }
}

/* ── Section 1: 12 thick 3D cards on the black band (depth like the home deck) ── */
.cr-show { padding-block: 40px 0; }
.cr-g3 { margin-top: 32px; padding-block: 48px 56px; background: var(--fz-bg-deep); }
.cr-g3-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; margin: 0 auto; list-style: none; }
.cr-g3-slot { perspective: 1200px; }
.cr-g3-card { position: relative; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -8deg));
  transition: transform .35s var(--fz-ease); animation: crFloat 7s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: calc(var(--i) * -.6s); }
.cr-g3-card:hover { animation-play-state: paused; }
@keyframes crFloat { 0% { translate: 0 0; } 100% { translate: 0 -8px; } }
.cr-g3-edge { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.cr-g3-edge i { position: absolute; inset: 0; border-radius: var(--fz-r-md); border: 1px solid #c5d4c8; background: var(--e); }
.cr-g3-edge i:nth-child(1) { transform: translateZ(-3px);  --e: #eef4ef; }
.cr-g3-edge i:nth-child(2) { transform: translateZ(-6px);  --e: #e2ebe4; }
.cr-g3-edge i:nth-child(3) { transform: translateZ(-9px);  --e: #d6e1d8; }
.cr-g3-edge i:nth-child(4) { transform: translateZ(-12px); --e: #cfdbd1; }
.cr-g3-edge i:nth-child(5) { transform: translateZ(-15px); --e: #c6d4c9; }
.cr-g3-edge i:nth-child(6) { transform: translateZ(-18px); --e: #b9cabd; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6); }
.cr-g3-face { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .75); border-radius: var(--fz-r-md);
  background: var(--fz-white); box-shadow: 0 0 0 1px rgba(165, 227, 180, .35), 0 0 26px -8px rgba(165, 227, 180, .4); }
.cr-g3-demo { flex: none; height: 168px; min-height: 0; margin: 0; padding: 12px; overflow: hidden; border-radius: 0; border-bottom: 1px solid var(--fz-line); }
.cr-g3-demo > * { zoom: .56; }
.cr-g3-demo:has(.cr-d07) { background: var(--fz-primary); }
.cr-g3-copy { display: grid; gap: 4px; padding: 14px 16px 18px; }
.cr-g3-n { font-size: 12px; font-weight: 700; color: var(--fz-accent-deep); font-variant-numeric: tabular-nums; }
.cr-g3-copy h2 { font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.015em; }
.cr-g3-copy p { font-size: 12.5px; line-height: 1.45; color: var(--fz-ink-soft); }
@media (max-width: 1080px) { .cr-g3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .cr-g3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } }
@media (max-width: 560px) { .cr-g3-grid { grid-template-columns: minmax(0, 1fr); } .cr-g3-card { transform: rotateX(3deg) rotateY(-4deg); } }
@media (prefers-reduced-motion: reduce) { .cr-g3-card { animation: none; transition: none; } }

/* first screen: copy + CTA on the left, the 12 small 3D cards fill the dark right side */
.cr-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); min-height: calc(100dvh - 88px); padding: 0; }
.cr-show-head { display: grid; align-content: center; gap: 18px; padding: 40px 32px 40px max(32px, calc((100vw - 1360px) / 2)); }
.cr-show-head h1 { font-size: clamp(2rem, 2.9vw, 3rem); line-height: 1.04; max-width: none; }
.cr-show-head .lead { margin: 0; font-size: 1rem; }
.cr-show-head .btn-row { margin-top: 6px; }
.cr-g3 { display: grid; align-content: center; margin: 0; padding: 28px max(32px, calc((100vw - 1360px) / 2)) 28px 36px; }
.cr-g3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; padding: 0; }
.cr-g3-demo { height: 96px; padding: 8px; }
.cr-g3-demo > * { zoom: .38; }
.cr-g3-copy { gap: 2px; padding: 9px 11px 11px; }
.cr-g3-n { font-size: 10.5px; }
.cr-g3-copy h2 { font-size: .9rem; line-height: 1.2; }
.cr-g3-copy p { font-size: 11px; line-height: 1.35; }
.cr-g3-edge i { border-radius: var(--fz-r-sm); }
.cr-g3-face { border-radius: var(--fz-r-sm); }
@media (max-width: 1080px) {
  .cr-show { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cr-show-head { padding: 40px 32px 28px; }
  .cr-g3 { padding: 32px; }
  .cr-g3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cr-show-head { padding: 32px 16px 24px; }
  .cr-g3 { padding: 24px 16px 32px; }
  .cr-g3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .cr-g3-demo { height: 88px; }
}
@media (min-width: 1081px) and (max-height: 820px) {
  .cr-g3 { padding-block: 18px; }
  .cr-g3-grid { gap: 12px 14px; }
  .cr-g3-demo { height: 76px; }
  .cr-g3-demo > * { zoom: .32; }
  .cr-g3-copy { padding: 7px 10px 9px; }
  .cr-g3-copy h2 { font-size: .84rem; }
  .cr-g3-copy p { display: none; }
}

/* section 1: wider copy column, dark panel from the page top, cards filling the panel */
.cr-show { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.75fr); min-height: calc(100dvh - var(--cr-top, 88px)); }
.cr-show-head { padding-right: 48px; }
.cr-show-head h1 { font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
.cr-g3 { display: flex; margin-top: calc(-1 * var(--cr-top, 0px)); padding: calc(var(--cr-top, 0px) + 20px) max(24px, calc((100vw - 1360px) / 2)) 24px 28px; }
.cr-g3-grid { flex: 1; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cr-g3-slot, .cr-g3-card { min-height: 0; }
.cr-g3-face { min-height: 0; }
.cr-g3-demo { flex: 1 1 auto; height: auto; min-height: 70px; }
.cr-g3-demo > * { zoom: .42; }
/* green hover: the face lifts, its border and glow turn green, the edge tints */
.cr-g3-face { transition: border-color .3s var(--fz-ease), box-shadow .3s var(--fz-ease), transform .3s var(--fz-ease); }
.cr-g3-card:hover .cr-g3-face { transform: translateZ(14px); border-color: var(--fz-accent); box-shadow: 0 0 0 2px rgba(0, 161, 81, .55), 0 0 40px -6px rgba(0, 161, 81, .75), 0 24px 40px -20px rgba(0, 0, 0, .6); }
.cr-g3-card:hover .cr-g3-copy h2 { color: var(--fz-primary); }
.cr-g3-card:hover .cr-g3-edge i { border-color: #4fbf7f; background: color-mix(in srgb, var(--e) 70%, #00a151); }
@media (max-width: 1080px) {
  .cr-show { grid-template-columns: minmax(0, 1fr); }
  .cr-g3 { margin-top: 0; padding: 32px; }
  .cr-g3-grid { grid-template-rows: none; }
  .cr-g3-demo { flex: none; height: 110px; }
}
@media (max-width: 760px) { .cr-g3 { padding: 24px 16px 32px; } .cr-g3-demo { height: 88px; } }
@media (min-width: 1081px) {
  .cr-show { height: calc(100dvh - var(--cr-top, 88px)); min-height: 620px; }
  .cr-g3 { box-sizing: border-box; height: calc(100% + var(--cr-top, 0px)); }
  .cr-g3-grid { min-height: 0; height: 100%; }
  .cr-g3-slot { height: 100%; }
  .cr-g3-demo { flex: 1 1 0; min-height: 0; }
}

/* cards reach the right edge of the page; each card is a link to the sign-up */
@media (min-width: 1081px) { .cr-g3 { padding-right: 16px; padding-left: 24px; } .cr-g3-grid { gap: 16px 14px; } }
.cr-g3-card { cursor: pointer; }
.cr-g3-card:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 6px; border-radius: var(--fz-r-sm); }
.cr-show-head .hm-intro-ctas { margin-top: 8px; max-width: 380px; }