/* ============================================================
   YIZZOO - Homepage
   Hero (16-17), Questboard (19-24), starter pack (12.7).
   ============================================================ */

/* ============================================================
   HERO (blueprint 16)
   580-640px tall. 52% text / 48% illustration.
   Parchment with an extremely subtle map grid behind it.
   ============================================================ */
.yz-hero{
  position: relative;
  overflow: hidden;
  background: var(--color-parchment);
}
/* Subtle map grid. Two hairline grids offset, plus a warm vignette,
   so the hero does not read as a flat beige slab. */
.yz-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(36,94,99,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36,94,99,0.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(36,94,99,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(36,94,99,0.10) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
}
/* Warm light falling from the upper right, as if over a desk. */
.yz-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 78% 8%,
              rgba(255,253,247,0.85) 0%,
              rgba(244,236,217,0.25) 45%,
              rgba(234,223,196,0.55) 100%);
}
.yz-hero__inner{
  position: relative;
  z-index: 1;
  min-height: 600px;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  gap: var(--sp-7);
  padding-block: var(--sp-10);
}
.yz-hero__copy{ max-width: 560px; }
.yz-hero__title{
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 48;
  letter-spacing: -0.018em;
  margin: 0 0 var(--sp-4);
  color: var(--color-midnight);
}
/* A hand-drawn underline under the last word, one decorative idea. */
.yz-hero__title em{
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.yz-hero__title em::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -0.06em;
  height: 0.22em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5C52 5.5 108 3.4 160 5.2c38 1.3 88 4.6 137 8.6' fill='none' stroke='%23D3A446' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}
.yz-hero__lead{
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  color: var(--color-soft-ink);
  margin: 0 0 var(--sp-7);
  max-width: 500px;
}
.yz-hero__ctas{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Trust line under the CTAs. Facts, not marketing noise. */
.yz-hero__trust{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  font-size: var(--fs-small);
  color: var(--color-soft-ink);
}
.yz-hero__trust span{ display: inline-flex; align-items: center; gap: 7px; }
.yz-hero__trust svg{ width: 16px; height: 16px; color: var(--color-sage); flex: none; }

/* --- Hero illustration (blueprint 17) ------------------------
   One composed overhead desk scene. Objects may break their box. */
.yz-hero__art{
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 620px;
}
.yz-hero__art svg{ width: 100%; height: auto; overflow: visible; }

@media (max-width: 1023px){
  .yz-hero__inner{
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--sp-8);
    padding-block: var(--sp-9);
  }
  .yz-hero__copy{ max-width: 620px; }
  .yz-hero__art{ max-width: 520px; }
}
@media (max-width: 639px){
  .yz-hero__ctas .yz-btn{ width: 100%; }
  .yz-hero__lead{ margin-bottom: var(--sp-6); }
}

/* ============================================================
   QUESTBOARD (blueprint 19-24)
   1180 x 620 board. Muted dark teal-green fabric, subtle dark
   frame. Paper pieces sit in PREDEFINED SLOTS (blueprint 60),
   so the composition can never collide and stays responsive.
   ============================================================ */
.yz-qb-section{ background: var(--color-parchment-deep); }

.yz-qb{
  position: relative;
  padding: 28px;
  border-radius: var(--radius-panel);
  /* Dark frame, subtle. Two inset rings read as a wooden edge. */
  box-shadow:
    inset 0 0 0 3px rgba(23,49,58,0.55),
    inset 0 0 0 11px #4A3A2C,
    inset 0 0 0 13px rgba(23,49,58,0.45),
    inset 0 18px 48px rgba(0,0,0,0.30),
    0 22px 60px rgba(23,49,58,0.28);
  /* Muted dark teal-green fabric/cork hybrid. Never office orange. */
  background-color: #2B4A44;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,253,247,0.045) 0 1.5px, transparent 2px),
    radial-gradient(circle at 62% 71%, rgba(0,0,0,0.20) 0 1.5px, transparent 2px),
    radial-gradient(circle at 84% 34%, rgba(255,253,247,0.035) 0 1px, transparent 1.6px),
    linear-gradient(140deg, #31534C 0%, #2B4A44 42%, #24403B 100%);
  background-size: 23px 23px, 31px 31px, 17px 17px, 100% 100%;
}

.yz-qb__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: var(--sp-4);
}

/* Slots. Named so the admin can later map an item to a slot by name.
   Row and column spans are chosen so every piece lands near its
   blueprint-21 size, with one open run of board left bottom-centre
   for the route to cross. */
.yz-qb__slot--feature{ grid-area: 1 / 7 / 5 / 13; } /* ~554 x 368 */
.yz-qb__slot--photo  { grid-area: 1 / 1 / 4 / 4;  } /* ~269 x 288 */
.yz-qb__slot--clue   { grid-area: 1 / 4 / 3 / 7;  } /* ~269 x 176 */
.yz-qb__slot--product{ grid-area: 3 / 4 / 6 / 7;  } /* ~269 x 288 */
.yz-qb__slot--note   { grid-area: 4 / 1 / 6 / 4;  } /* ~269 x 176 */
.yz-qb__slot--guide  { grid-area: 5 / 7 / 8 / 10; } /* ~269 x 288 */
.yz-qb__slot--trend  { grid-area: 5 / 10 / 8 / 13;} /* ~269 x 288 */
.yz-qb__slot--map    { grid-area: 6 / 1 / 8 / 4;  } /* ~269 x 176 */

/* A slot is only a frame: it must not grow to fit its contents,
   or a long title pushes the piece off the bottom of the board. */
.yz-qb__slot{ min-height: 0; min-width: 0; }

/* --- A pinned paper piece ------------------------------------
   Rotation is deterministic per slot, never random on reload.
   Hover: raise 5px, rotate toward 0, deepen the shadow. */
.yz-pin{
  position: relative;
  /* The piece is exactly the size of its slot. Content clips rather
     than pushing the paper off the board. */
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border-radius: 4px;
  box-shadow: var(--shadow-pinned);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--t-enter) var(--ease),
              box-shadow var(--t-enter) var(--ease);
}
.yz-pin:hover{
  transform: translateY(-5px) rotate(0deg) !important;
  box-shadow: var(--shadow-pinned-hover);
  color: inherit;
  z-index: 5;
}
/* Torn/soft paper edge on the bottom of note-style pieces. */
.yz-pin--torn{
  border-radius: 4px 4px 2px 2px;
  clip-path: polygon(0 0, 100% 0, 100% 97.5%, 86% 100%, 71% 97.8%, 55% 100%, 38% 97.6%, 21% 100%, 7% 98%, 0 100%);
}

/* Fasteners (blueprint 22). At most two types per composition:
   a brass push pin and a tiny tape strip. */
.yz-pin__fastener{
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.yz-pin__fastener--pin{
  top: -9px; left: 50%;
  margin-left: -11px;
  width: 22px; height: 22px;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.42));
}
.yz-pin__fastener--tape{
  top: -11px; left: 50%;
  margin-left: -36px;
  width: 72px; height: 26px;
  opacity: 0.92;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.30));
}
.yz-pin__fastener--tape-tl{
  top: -13px; left: -13px;
  width: 64px; height: 30px;
  transform: rotate(-38deg);
  opacity: 0.92;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.30));
}

/* --- Piece internals -----------------------------------------
   The art takes the slack, the body sizes to its text, and both
   clip. min-height:0 is what lets a flex child actually shrink. */
/* The art absorbs whatever height is left over; the body sizes to its
   own text. The other way round splits the pin 50/50 and clips the
   title mid-word. min-height:0 is what lets the art actually shrink. */
.yz-pin__art{
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  background: var(--color-parchment-deep);
}
.yz-pin__art svg{ width: 100%; height: 100%; object-fit: cover; }
.yz-pin__body{
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  flex: none;
  min-height: 0;
  overflow: hidden;
}
/* Pieces with no artwork: the body is the whole piece. */
.yz-pin--note .yz-pin__body,
.yz-pin--clue .yz-pin__body{ flex: 1; }

/* Titles and copy on the board are clamped: a piece of paper has a
   fixed size, so the text has to live inside it. */
.yz-pin__title,
.yz-pin__text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yz-pin__title{ -webkit-line-clamp: 2; }
.yz-pin__text{ -webkit-line-clamp: 2; }
/* The feature poster is wide enough for a third line of copy. */
.yz-pin--feature .yz-pin__text{ -webkit-line-clamp: 3; }
.yz-pin__kicker{
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-coral);
  margin: 0;
}
.yz-pin__title{
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 22px;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 22;
  color: var(--color-midnight);
  margin: 0;
}
.yz-pin__text{
  font-size: var(--fs-meta);
  line-height: 17px;
  color: var(--color-soft-ink);
  margin: 0;
}
.yz-pin__foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

/* Feature poster: the centrepiece. Bigger type, real CTA. */
.yz-pin--feature .yz-pin__art{ flex: 1; min-height: 0; }
.yz-pin--feature .yz-pin__body{ flex: none; padding: var(--sp-4) var(--sp-5) var(--sp-5); gap: var(--sp-2); }
.yz-pin--feature .yz-pin__title{ font-size: 25px; line-height: 30px; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 30; }
.yz-pin--feature .yz-pin__text{ font-size: var(--fs-small); line-height: var(--lh-small); }

/* Photo card: image-heavy, white lower band, Polaroid-adjacent
   without literally copying it (blueprint 21). */
.yz-pin--photo{ background: #FFFFFF; padding: 9px 9px 0; }
.yz-pin--photo .yz-pin__art{ flex: 1; min-height: 0; border-radius: 2px; }
.yz-pin--photo .yz-pin__body{ flex: none; padding: 10px 2px 12px; gap: 3px; }
.yz-pin--photo .yz-pin__title{ font-size: 15px; line-height: 19px; -webkit-line-clamp: 2; }

/* Note: freebies, announcements, tips. Warm cream, torn edge. */
.yz-pin--note{ background: #FBF3DC; }
.yz-pin--note .yz-pin__body{ justify-content: center; gap: var(--sp-2); }

/* Clue card: a scrap with a monospaced cipher on it. */
.yz-pin--clue{ background: #FFFDF7; }
.yz-pin--clue .yz-pin__body{ justify-content: center; }
.yz-pin__cipher{
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 15px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-red);
  margin: 0;
}

/* Product piece: price is the point. */
.yz-pin--product .yz-pin__art{ flex: 1; min-height: 0; }
.yz-pin--product .yz-pin__body{ flex: none; }
.yz-pin__price{
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 22;
  color: var(--color-midnight);
}

/* Map fragment: decorative, but the marker is a real link. */
.yz-pin--map{
  background: #EFE3C6;
  box-shadow: 0 3px 10px rgba(23,49,58,0.30);
}
.yz-pin--map .yz-pin__art{ flex: 1; background: transparent; }

/* Deterministic rotations, applied per slot (blueprint 2, 22). */
.yz-qb__slot--photo   .yz-pin{ transform: rotate(-1.6deg); }
.yz-qb__slot--clue    .yz-pin{ transform: rotate(1.4deg); }
.yz-qb__slot--feature .yz-pin{ transform: rotate(-0.5deg); }
.yz-qb__slot--note    .yz-pin{ transform: rotate(1.8deg); }
.yz-qb__slot--map     .yz-pin{ transform: rotate(-2deg); }
.yz-qb__slot--guide   .yz-pin{ transform: rotate(0.9deg); }
.yz-qb__slot--trend   .yz-pin{ transform: rotate(-1.2deg); }
.yz-qb__slot--product .yz-pin{ transform: rotate(1.1deg); }

/* --- Connecting route (blueprint 20, 23) ---------------------
   A dotted path drawn once on entry, then left alone. It never
   animates continuously and never intercepts a click. */
.yz-qb__path{
  position: absolute;
  inset: 28px;
  z-index: 1;
  pointer-events: none;
}
.yz-qb__path path{
  fill: none;
  stroke: rgba(211,164,70,0.55);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 13;
}
/* Draw-on once when the section arrives. */
.yz-qb__path path{
  stroke-dashoffset: 0;
  transition: none;
}
.yz-qb.is-drawn .yz-qb__path path{
  animation: yz-draw 900ms var(--ease) both;
}
@keyframes yz-draw{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* --- Board entrance (blueprint 23): pieces settle, 150-250ms,
   no bouncing. Only runs once, and only if motion is allowed. */
.yz-qb.is-animating .yz-pin{
  animation: yz-settle 220ms var(--ease) both;
}
.yz-qb.is-animating .yz-qb__slot--photo   .yz-pin{ animation-delay:  0ms; }
.yz-qb.is-animating .yz-qb__slot--feature .yz-pin{ animation-delay: 40ms; }
.yz-qb.is-animating .yz-qb__slot--clue    .yz-pin{ animation-delay: 80ms; }
.yz-qb.is-animating .yz-qb__slot--note    .yz-pin{ animation-delay:120ms; }
.yz-qb.is-animating .yz-qb__slot--map     .yz-pin{ animation-delay:150ms; }
.yz-qb.is-animating .yz-qb__slot--guide   .yz-pin{ animation-delay:180ms; }
.yz-qb.is-animating .yz-qb__slot--trend   .yz-pin{ animation-delay:210ms; }
.yz-qb.is-animating .yz-qb__slot--product .yz-pin{ animation-delay:240ms; }
@keyframes yz-settle{
  from{ opacity: 0; transform: translateY(-7px) rotate(0deg); }
  to{   opacity: 1; }
}

/* --- Questboard mobile (blueprint 24) ------------------------
   Do not reproduce a corkboard on a 390px phone. It becomes a
   horizontal snap carousel, one card visible plus a hint of next.
   ============================================================ */
.yz-qb__hint{
  display: none;
  margin-top: var(--sp-4);
  font-size: var(--fs-meta);
  color: var(--color-soft-ink);
  text-align: center;
}

@media (max-width: 1023px){
  .yz-qb__grid{ grid-auto-rows: 74px; gap: var(--sp-3); }
  .yz-pin--feature .yz-pin__title{ font-size: 21px; line-height: 26px; }
}

@media (max-width: 767px){
  .yz-qb{
    padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
    border-radius: var(--radius-card);
    box-shadow:
      inset 0 0 0 3px rgba(23,49,58,0.5),
      inset 0 0 0 8px #4A3A2C,
      inset 0 12px 30px rgba(0,0,0,0.28),
      0 14px 34px rgba(23,49,58,0.24);
  }
  /* Grid becomes a snap rail. Slot areas stop applying. */
  .yz-qb__grid{
    display: flex;
    grid-auto-rows: auto;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: var(--sp-2) var(--sp-3);
    padding-right: var(--sp-8);
  }
  .yz-qb__grid::-webkit-scrollbar{ display: none; }
  .yz-qb__grid > [class*="yz-qb__slot"]{
    grid-area: auto !important;
    flex: 0 0 auto;
    width: 79vw;
    max-width: 320px;
    min-height: 300px;
    scroll-snap-align: start;
  }
  /* The decorative map fragment earns no carousel slide. */
  .yz-qb__slot--map{ display: none; }
  .yz-qb__path{ display: none; }
  .yz-qb__hint{ display: block; }
  .yz-pin{ height: 100%; }
  .yz-pin--feature .yz-pin__title{ font-size: 22px; line-height: 27px; }
}

/* ============================================================
   STARTER PACK / EMAIL CAPTURE (blueprint 12.7, 43)
   ============================================================ */
.yz-starter{
  position: relative;
  overflow: hidden;
  background: var(--color-midnight);
  color: rgba(255,253,247,0.80);
}
.yz-starter::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(36,94,99,0.55) 0%, transparent 60%),
    radial-gradient(70% 100% at 100% 100%, rgba(211,164,70,0.14) 0%, transparent 62%);
}
.yz-starter__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--sp-9);
  padding-block: var(--sp-10);
}
.yz-starter h2{ color: #FFFDF7; margin-bottom: var(--sp-4); }
.yz-starter__lead{
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  margin: 0 0 var(--sp-5);
}
.yz-starter__list{
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-4);
}
.yz-starter__list li{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: rgba(255,253,247,0.88);
}
.yz-starter__list svg{ width: 17px; height: 17px; color: var(--color-gold); flex: none; }
.yz-starter__form{ display: flex; gap: var(--sp-3); max-width: 520px; }
.yz-starter__input{
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--sp-4);
  border: 1px solid rgba(255,253,247,0.25);
  border-radius: var(--radius-button);
  background: rgba(255,253,247,0.08);
  color: #FFFDF7;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  outline: none;
}
.yz-starter__input::placeholder{ color: rgba(255,253,247,0.48); }
.yz-starter__input:focus{ border-color: var(--color-gold); background: rgba(255,253,247,0.12); }
.yz-starter__fineprint{
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  color: rgba(255,253,247,0.55);
}
/* Overlapping printable pages, as the freebie preview. */
.yz-starter__art{ position: relative; justify-self: center; width: 100%; max-width: 420px; }
.yz-starter__art svg{ width: 100%; height: auto; overflow: visible; }

@media (max-width: 1023px){
  .yz-starter__inner{ grid-template-columns: 1fr; gap: var(--sp-8); }
  .yz-starter__art{ max-width: 340px; order: -1; }
}
@media (max-width: 639px){
  .yz-starter__list{ grid-template-columns: 1fr; }
  .yz-starter__form{ flex-direction: column; }
}

/* ============================================================
   RESERVED ADVERTISING AREAS (blueprint 76)
   Designed in from day one. Restrained on the homepage.
   The slot holds its own height so late-loading ads cannot
   shove content around.
   ============================================================ */
.yz-ad{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  background: rgba(255,253,247,0.45);
  color: var(--color-soft-ink);
  font-size: var(--fs-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.yz-ad--leaderboard{ max-width: 970px; min-height: 90px; }
.yz-ad--placeholder::after{ content: "Reserved ad space"; }

/* ============================================================
   404 (blueprint 70)
   ============================================================ */
.yz-404{
  background: var(--color-parchment);
  padding-block: var(--sp-11) var(--sp-10);
  text-align: center;
}
.yz-404__inner{ max-width: 620px; }
.yz-404__art{ width: 100%; max-width: 320px; margin: 0 auto var(--sp-7); }
.yz-404 h1{
  font-size: var(--fs-page);
  line-height: var(--lh-page);
  margin: 0 0 var(--sp-4);
}
.yz-404__lead{
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  color: var(--color-soft-ink);
  margin: 0 0 var(--sp-7);
}
.yz-404__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
@media (max-width: 639px){
  .yz-404__ctas .yz-btn{ width: 100%; }
}

/* ============================================================
   HERO REASSURANCE CHIPS
   Two separate facts, and they must read as two things rather
   than one run-on line.
   ============================================================ */
.yz-hero__trust{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
}
.yz-hero__trust li{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255,253,247,0.72);
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 600;
  color: var(--color-soft-ink);
}
.yz-hero__trust svg{ color: var(--color-sage); flex: none; }

/* ============================================================
   BUILT BY A GAME DESIGNER
   Compact on purpose. It is a credential, not a biography.
   ============================================================ */
.yz-creator{
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-7);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  /* One gold edge rather than a box full of decoration. */
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.yz-creator__mark{
  flex: none;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-teal-08);
  color: var(--color-teal);
}
.yz-creator__body{ min-width: 0; }
.yz-creator__body .yz-eyebrow{ margin-bottom: var(--sp-2); }
.yz-creator__text{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  margin: 0 0 var(--sp-3);
}
.yz-creator__text strong{ color: var(--color-midnight); font-weight: 700; }

@media (max-width: 639px){
  .yz-creator{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .yz-creator__mark{ width: 58px; height: 58px; }
  .yz-creator__mark svg{ width: 30px; height: 30px; }
}