/* widget: Hero with build animation */
@charset "UTF-8";
.dyn-widget-scope[data-widget="hero-margin"] {
  /* padding gives descenders room inside the box the wipe clips to;
     the negative margins cancel it so the layout does not move */
  /* ---------- the illustration: brief, build, approve ----------
     A 10:9 stage that is its own size container: everything inside is sized in
     cqw (never on .st itself, where cqw would measure the viewport), so the
     picture scales as one. The window is 88 x 60.3 cqw. Its six widget blocks are
     pseudo-elements of elements that already hold content, so they carry no text. */
  /* browser bar: three dots drawn as backgrounds, then the address */
  /* the six blocks: pseudo-elements placed from the window's top-left corner */
  /* hero block: headline bars and a button */
  /* three feature cards */
  /* two lines of text */
  /* call-to-action strip */
  /* your brief, above the window: as wide as its text, up to 72% */
  /* ready for review, below the window */
  /* cursors: a zero-size anchor at the arrow's tip; the arrow is a background
     image on a pseudo-element, the name tag sits below-right of it */
  /* resting places: the agent on the last block it placed, clear of the
     Published chip; you on Approve */
  /* ---------- the loop: 10 s, everything keyed to the same clock ----------
     0.2 s brief appears, 0.5–1.5 s it is typed, 1.8 s the agent arrives,
     2.2–5 s widgets drop in as its cursor visits each spot, 5.2 s ready for review,
     6.2 s you approve, 6.5 s published, 9.2 s fade and start again.
     Without motion the finished picture simply stands. */
}
.dyn-widget-scope[data-widget="hero-margin"] .hero {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: clamp(48px, 8vw, 104px) 0 clamp(64px, 8vw, 112px);
}
@media (min-width: 1000px) {
  .dyn-widget-scope[data-widget="hero-margin"] .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
}
.dyn-widget-scope[data-widget="hero-margin"] .hero-title {
  font-weight: 700;
  font-size: clamp(2.6rem, 5.4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  padding: 0.08em 0.08em 0.24em;
  margin: -0.08em -0.08em calc(28px - 0.24em);
}
.dyn-widget-scope[data-widget="hero-margin"] .hero-title :is(h1, h2, h3, p) {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  text-wrap: balance;
}
.dyn-widget-scope[data-widget="hero-margin"] .hero-intro {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: 32px;
}
.dyn-widget-scope[data-widget="hero-margin"] .hero-intro p {
  margin: 0 0 0.8em;
}
.dyn-widget-scope[data-widget="hero-margin"] .st {
  position: relative;
  width: 100%;
  max-width: 600px;
  justify-self: center;
  aspect-ratio: 10/9;
  container-type: inline-size;
}
.dyn-widget-scope[data-widget="hero-margin"] .st > * {
  position: absolute;
  font-size: max(11px, 2.4cqw);
  line-height: 1.3;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-win {
  left: 6%;
  top: 17%;
  width: 88%;
  height: 67%;
  background: var(--card);
  border-radius: 2.6cqw;
  box-shadow: 0 0 0 1px var(--rule), 0 4cqw 8cqw -4cqw rgba(20, 26, 46, 0.4);
  overflow: hidden;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 5.4cqw;
  display: flex;
  align-items: center;
  padding: 0 3cqw 0 13cqw;
  border-bottom: 1px solid #EEF1F5;
  background: radial-gradient(circle, #E3E8EF 0.8cqw, transparent 0.85cqw) 3cqw 50%/2.9cqw 2.9cqw no-repeat, radial-gradient(circle, #E3E8EF 0.8cqw, transparent 0.85cqw) 5.9cqw 50%/2.9cqw 2.9cqw no-repeat, radial-gradient(circle, #E3E8EF 0.8cqw, transparent 0.85cqw) 8.8cqw 50%/2.9cqw 2.9cqw no-repeat;
  font-size: max(10px, 2cqw);
  color: var(--graphite);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-win::before, .dyn-widget-scope[data-widget="hero-margin"] .st-win::after,
.dyn-widget-scope[data-widget="hero-margin"] .st-bar::before, .dyn-widget-scope[data-widget="hero-margin"] .st-bar::after,
.dyn-widget-scope[data-widget="hero-margin"] .st-url::before, .dyn-widget-scope[data-widget="hero-margin"] .st-url::after {
  content: "";
  position: absolute;
  border-radius: 1.6cqw;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-win::before {
  left: 4.4cqw;
  top: 8.4cqw;
  width: 79.2cqw;
  height: 18cqw;
  background: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) 4.8cqw 4.2cqw/46cqw 2.6cqw no-repeat, linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) 4.8cqw 8.2cqw/32cqw 1.7cqw no-repeat, linear-gradient(var(--ink), var(--ink)) 4.8cqw 11.8cqw/15cqw 3.2cqw no-repeat, var(--block-green);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-bar::before, .dyn-widget-scope[data-widget="hero-margin"] .st-bar::after, .dyn-widget-scope[data-widget="hero-margin"] .st-url::before {
  top: 28.9cqw;
  width: 25.2cqw;
  height: 10.9cqw;
  background: radial-gradient(circle at 4.6cqw 3.6cqw, rgba(255, 255, 255, 0.85) 1.7cqw, transparent 1.75cqw), linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)) 2.9cqw 7.2cqw/15cqw 1.4cqw no-repeat, var(--c);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-bar::before {
  left: 4.4cqw;
  --c: var(--block-lilac);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-bar::after {
  left: 31.4cqw;
  --c: var(--block-sky);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-url::before {
  left: 58.4cqw;
  --c: var(--block-rose);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-url::after {
  left: 4.4cqw;
  top: 42.8cqw;
  width: 52.8cqw;
  height: 6cqw;
  border-radius: 0;
  background: linear-gradient(#E3E8EF, #E3E8EF) 0 0/100% 2cqw no-repeat, linear-gradient(#E3E8EF, #E3E8EF) 0 3.9cqw/72% 2cqw no-repeat;
  transform-origin: left center;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-win::after {
  left: 4.4cqw;
  top: 51.3cqw;
  width: 79.2cqw;
  height: 5.4cqw;
  background: var(--ink);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-brief {
  left: 2%;
  top: 1%;
  max-width: 72%;
  padding: 1.8cqw 2.6cqw 1.6cqw;
  background: var(--card);
  border-radius: 2.2cqw;
  box-shadow: var(--shadow-card), 0 0 0 1px var(--rule);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-brief-k {
  font-size: max(10px, 1.9cqw);
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: 0.4cqw;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-brief-t {
  font-size: max(12px, 2.8cqw);
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 0.2em;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-ok {
  right: 2%;
  top: 87%;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 1.3cqw 1.3cqw 1.3cqw 2.6cqw;
  background: var(--card);
  border-radius: 2.2cqw;
  box-shadow: var(--shadow-card), 0 0 0 1px var(--rule);
  font-weight: 500;
  white-space: nowrap;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-approve {
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  padding: 1cqw 2.2cqw;
  border-radius: 1.4cqw;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-pub {
  right: 4%;
  top: 77%;
  display: flex;
  gap: 1cqw;
  padding: 1cqw 2.4cqw;
  border-radius: 99px;
  background: var(--mark);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 2cqw 4cqw -2cqw rgba(14, 60, 64, 0.5);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-pub::before {
  content: "✓";
}
.dyn-widget-scope[data-widget="hero-margin"] .st-cur {
  width: 0;
  height: 0;
  z-index: 2;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-cur::before {
  content: "";
  position: absolute;
  left: -0.5cqw;
  top: -0.4cqw;
  width: 4.6cqw;
  height: 5.5cqw;
  background: no-repeat center/contain;
  transform-origin: 0 0;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-agent::before {
  background-image: url(https://cdn.margentik.com/hSmTmzLQK-NnEhDqgV2MZ-2XkxJTyocce1v3SEwWg0o/w:3840/plain/3/52ae65ad-def0-409d-b077-48edb882fb9e/cursor-you.svg);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-you::before {
  background-image: url(https://cdn.margentik.com/P0jpgecfEO3kbcEyX_yMMc-qbH6daXudkxiQkO04E9Q/w:3840/plain/3/9aa760aa-fe9c-4c10-9b4b-962725ba7c5b/cursor-agent.svg);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-tag {
  position: absolute;
  left: 3.6cqw;
  top: 4.6cqw;
  white-space: nowrap;
  padding: 0.4cqw 1.5cqw;
  border-radius: 99px;
  font-size: max(10px, 2cqw);
  font-weight: 700;
  color: #fff;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-agent {
  left: 36%;
  top: 77%;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-agent .st-tag {
  background: var(--agent);
}
.dyn-widget-scope[data-widget="hero-margin"] .st-you {
  left: 92%;
  top: 92%;
}
.dyn-widget-scope[data-widget="hero-margin"] .st-you .st-tag {
  background: var(--ink);
}
@keyframes st-brief {
  0%, 2% {
    opacity: 0;
    transform: translateY(1.5cqw) scale(0.96);
  }
  5%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-type {
  0%, 5% {
    clip-path: inset(0 100% 0 0);
  }
  15%, 100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes st-b-hero {
  0%, 22% {
    opacity: 0;
    transform: scale(0.85);
  }
  26%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-b-f1 {
  0%, 31% {
    opacity: 0;
    transform: translateY(-2cqw);
  }
  34%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-b-f2 {
  0%, 34% {
    opacity: 0;
    transform: translateY(-2cqw);
  }
  37%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-b-f3 {
  0%, 37% {
    opacity: 0;
    transform: translateY(-2cqw);
  }
  40%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-b-tx {
  0%, 42% {
    opacity: 0;
    transform: scaleX(0.4);
  }
  45%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-b-cta {
  0%, 47% {
    opacity: 0;
    transform: scale(0.85);
  }
  50%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-ok {
  0%, 51% {
    opacity: 0;
    transform: translateY(1.5cqw);
  }
  54%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-press {
  0%, 61%, 65%, 100% {
    transform: none;
  }
  63% {
    transform: scale(0.9);
  }
}
@keyframes st-pub {
  0%, 64% {
    opacity: 0;
    transform: scale(0.4);
  }
  67% {
    opacity: 1;
    transform: scale(1.1);
  }
  69%, 92% {
    opacity: 1;
    transform: none;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes st-agent {
  0%, 17% {
    left: 104%;
    top: 22%;
    opacity: 0;
  }
  19% {
    opacity: 1;
  }
  22%, 27% {
    left: 72%;
    top: 38%;
  }
  31%, 32% {
    left: 23%;
    top: 54%;
  }
  35% {
    left: 50%;
    top: 54%;
  }
  38%, 39% {
    left: 77%;
    top: 54%;
  }
  43%, 44% {
    left: 42%;
    top: 65%;
  }
  48%, 92% {
    left: 36%;
    top: 77%;
    opacity: 1;
  }
  96%, 100% {
    left: 36%;
    top: 77%;
    opacity: 0;
  }
}
@keyframes st-you {
  0%, 1% {
    left: 74%;
    top: 14%;
    opacity: 0;
  }
  4%, 15% {
    left: 70%;
    top: 10%;
    opacity: 1;
  }
  21% {
    left: 30%;
    top: -6%;
    opacity: 0;
  }
  50% {
    left: 100%;
    top: 104%;
    opacity: 0;
  }
  53% {
    opacity: 1;
  }
  58%, 92% {
    left: 92%;
    top: 92%;
    opacity: 1;
  }
  96%, 100% {
    left: 92%;
    top: 92%;
    opacity: 0;
  }
}
@keyframes st-tap {
  0%, 60%, 64%, 100% {
    transform: none;
  }
  62% {
    transform: scale(0.8);
  }
}
@keyframes hero-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dyn-widget-scope[data-widget="hero-margin"] .hero-title {
    animation: hero-wipe 0.8s 0.2s cubic-bezier(0.65, 0, 0.35, 1) both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-brief {
    animation: st-brief 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-brief-t {
    animation: st-type 10s linear infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-win::before {
    animation: st-b-hero 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-bar::before {
    animation: st-b-f1 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-bar::after {
    animation: st-b-f2 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-url::before {
    animation: st-b-f3 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-url::after {
    animation: st-b-tx 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-win::after {
    animation: st-b-cta 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-ok {
    animation: st-ok 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-approve {
    animation: st-press 10s ease-in-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-pub {
    animation: st-pub 10s ease-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-agent {
    animation: st-agent 10s ease-in-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-you {
    animation: st-you 10s ease-in-out infinite both;
  }
  .dyn-widget-scope[data-widget="hero-margin"] .st-you::before {
    animation: st-tap 10s ease-in-out infinite both;
  }
}

/* widget: Card grid */
.dyn-widget-scope[data-widget="annotated-rows"] {
  /* each card is a widget placed on the canvas */
  /* the card's kind, shown as a chip like a block label in the editor */
  /* what the agent does here, pinned to the bottom so lines align across a row */
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid {
  padding: clamp(48px, 7vw, 96px) 0;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-title {
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-title :is(h1, h2, h3, p) {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-intro {
  color: var(--graphite);
  max-width: 36em;
  font-size: 1.125rem;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-intro p {
  margin: 0;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
}
@media (min-width: 760px) {
  .dyn-widget-scope[data-widget="annotated-rows"] .cgrid-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 28px);
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-kicker {
  align-self: flex-start;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 10px;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-card-title {
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-body {
  color: var(--graphite);
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-body p {
  margin: 0;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-out {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-body + .cgrid-out {
  margin-top: auto;
}
.dyn-widget-scope[data-widget="annotated-rows"] .cgrid-card > .cgrid-body {
  margin-bottom: 10px;
}

/* widget: Suggestion demo */
@charset "UTF-8";
.dyn-widget-scope[data-widget="suggestion-demo"] {
  /* the one saturated block on the page: full-width deep green */
  /* padding keeps descenders inside the box the wipe clips to */
  /* the agent's reasons: white on the band (5.3:1), led by an arrow, not a tick */
  /* the edit replays as the card scrolls up from the bottom of the screen;
     it is finished by the time the card reaches the middle */
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg {
  display: grid;
  gap: 40px;
  align-items: center;
  color: #fff;
  background: var(--agent);
  box-shadow: 0 0 0 100vmax var(--agent);
  clip-path: inset(0 -100vmax);
  padding: clamp(64px, 9vw, 112px) 0;
}
@media (min-width: 1000px) {
  .dyn-widget-scope[data-widget="suggestion-demo"] .sugg {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
  }
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-title {
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-title :is(h1, h2, h3, p) {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  text-wrap: balance;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-intro {
  font-size: 1.125rem;
  max-width: 30em;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-intro p {
  margin: 0;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-card {
  margin: 0;
  color: var(--ink);
  background: #fff;
  border-radius: 12px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.5);
  view-timeline: --sugg-card block;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  font-size: 0.875rem;
  color: var(--graphite);
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px dashed var(--rule);
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-before,
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-after {
  font-weight: 600;
  font-size: clamp(1.2rem, 2.3vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-before {
  color: var(--graphite);
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-before > * {
  display: inline;
  background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 58%/100% 3px;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-after {
  margin-top: 12px;
  padding: 0 0 0.15em 14px;
  border-left: 3px solid var(--mark);
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-weight: 600;
  font-size: 0.875rem;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-actions > div {
  padding: 7px 12px;
  border-radius: 6px;
  line-height: 1.55;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-accept {
  background: var(--mark);
  color: var(--ink);
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-keep {
  border: 1px solid var(--rule);
  color: var(--graphite);
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-stamp {
  margin-left: auto;
  color: var(--agent);
  border: 2px solid var(--agent);
  font-weight: 700;
  transform: rotate(-4deg);
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-reasons {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-reason {
  color: #fff;
}
.dyn-widget-scope[data-widget="suggestion-demo"] .sugg-reason::before {
  content: "→";
}
@keyframes sugg-strike {
  from {
    background-size: 0% 3px;
  }
  to {
    background-size: 100% 3px;
  }
}
@keyframes sugg-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes sugg-stamp {
  from {
    opacity: 0;
    transform: rotate(-4deg) scale(1.7);
  }
  to {
    opacity: 1;
    transform: rotate(-4deg) scale(1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dyn-widget-scope[data-widget="suggestion-demo"] .sugg-before > * {
      animation: sugg-strike linear both;
      animation-timeline: --sugg-card;
      animation-range: cover 12% cover 20%;
    }
    .dyn-widget-scope[data-widget="suggestion-demo"] .sugg-after {
      animation: sugg-wipe linear both;
      animation-timeline: --sugg-card;
      animation-range: cover 20% cover 28%;
    }
    .dyn-widget-scope[data-widget="suggestion-demo"] .sugg-stamp {
      animation: sugg-stamp linear both;
      animation-timeline: --sugg-card;
      animation-range: cover 28% cover 32%;
    }
  }
}

/* widget: Closing call to action */
.dyn-widget-scope[data-widget="closing-cta"] {
  /* bookend: the hero's wallpaper again, as a panel on the canvas */
  /* agent output on the wash sits on a solid chip: deep green fails on the washes */
}
.dyn-widget-scope[data-widget="closing-cta"] .close {
  padding: clamp(32px, 6vw, 72px) 0 clamp(56px, 8vw, 104px);
}
.dyn-widget-scope[data-widget="closing-cta"] .close-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--rule);
  padding: clamp(36px, 7vw, 88px) clamp(24px, 6vw, 80px);
  background: var(--paper);
}
.dyn-widget-scope[data-widget="closing-cta"] .close-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80px;
  background-image: var(--wash);
  filter: blur(32px);
}
.dyn-widget-scope[data-widget="closing-cta"] .close-title {
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.dyn-widget-scope[data-widget="closing-cta"] .close-title :is(h1, h2, h3, p) {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.dyn-widget-scope[data-widget="closing-cta"] .close-body {
  color: var(--ink-soft);
  font-size: 1.125rem;
  max-width: 32em;
  margin-bottom: 30px;
}
.dyn-widget-scope[data-widget="closing-cta"] .close-body p {
  margin: 0;
}
.dyn-widget-scope[data-widget="closing-cta"] .close-outs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.dyn-widget-scope[data-widget="closing-cta"] .close-out {
  background: var(--card);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}