/* Scoped to ztf-* so this patch does not alter existing homepage components. */
.ztf-latest {
  --ztf-ink: #071a29;
  --ztf-text: #405a6a;
  --ztf-muted: #667b87;
  --ztf-line: #dce6eb;
  --ztf-teal: #078b84;
  --ztf-teal-strong: #006f6a;
  --ztf-mint: #e3f7f3;
  width: min(calc(100% - 40px), 1180px);
  margin: clamp(30px, 5vw, 68px) auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}

.ztf-latest__card {
  position: relative;
  min-height: 430px;
  padding: clamp(34px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
  overflow: hidden;
  color: var(--ztf-text);
  border: 1px solid var(--ztf-line);
  border-radius: 34px;
  background:
    radial-gradient(circle at 87% 8%, rgba(81, 210, 198, .17), transparent 28%),
    #fff;
  box-shadow: 0 22px 64px rgba(17, 52, 72, .08);
  text-decoration: none;
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease;
}

.ztf-latest__card:hover {
  border-color: rgba(7,139,132,.37);
  box-shadow: 0 28px 74px rgba(17, 52, 72, .12);
  transform: translateY(-4px);
}

.ztf-latest__eyebrow {
  margin: 0 0 18px;
  color: var(--ztf-teal-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.ztf-latest__eyebrow span {
  margin-right: 8px;
  padding: 5px 7px;
  color: #fff;
  background: var(--ztf-teal-strong);
  border-radius: 6px;
}

.ztf-latest h2 {
  margin: 0;
  color: var(--ztf-ink);
  font-size: clamp(2.5rem, 4.4vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: 1.05;
}

.ztf-latest h2 em {
  color: var(--ztf-teal-strong);
  font-style: normal;
}

.ztf-latest__copy > p:not(.ztf-latest__eyebrow) {
  max-width: 650px;
  margin: 23px 0 0;
  color: var(--ztf-text);
  font-size: .96rem;
  line-height: 1.85;
}

.ztf-latest__facts {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ztf-latest__facts span {
  padding: 7px 10px;
  color: var(--ztf-muted);
  border: 1px solid var(--ztf-line);
  border-radius: 999px;
  background: #fff;
  font-size: .66rem;
  font-weight: 800;
}

.ztf-latest__cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ztf-ink);
  font-size: .82rem;
}

.ztf-latest__cta i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--ztf-teal-strong);
  font-style: normal;
  transition: transform .25s ease;
}

.ztf-latest__card:hover .ztf-latest__cta i { transform: translateX(4px); }

.ztf-latest__visual {
  min-height: 310px;
  display: grid;
  place-items: center;
}

.ztf-latest__ring {
  position: relative;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(7,139,132,.25);
  border-radius: 50%;
  background: rgba(227,247,243,.42);
}

.ztf-latest__ring::before {
  content: "";
  position: absolute;
  inset: 54px;
  border: 1px dashed rgba(7,139,132,.24);
  border-radius: 50%;
  background: #fff;
}

.ztf-latest__ring strong {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  color: var(--ztf-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  line-height: 1.25;
  text-align: center;
  transform: translate(-50%,-50%);
}

.ztf-latest__ring strong i { color: var(--ztf-teal); font-style: normal; }

.ztf-latest__node {
  position: absolute;
  z-index: 3;
  min-width: 82px;
  padding: 8px 9px;
  color: var(--ztf-ink);
  border: 1px solid var(--ztf-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20,54,74,.07);
  font-size: .65rem;
  font-weight: 850;
  text-align: center;
}

.ztf-latest__node--1 { left: 50%; top: -11px; transform: translateX(-50%); }
.ztf-latest__node--2 { right: -28px; top: 50%; transform: translateY(-50%); }
.ztf-latest__node--3 { left: 50%; bottom: -11px; transform: translateX(-50%); }
.ztf-latest__node--4 { left: -28px; top: 50%; transform: translateY(-50%); }

.ztf-latest__dot {
  position: absolute;
  top: -6px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ztf-teal);
  box-shadow: 0 0 0 5px rgba(7,139,132,.12);
  transform-origin: 6px 146px;
  animation: ztf-orbit 10s linear infinite;
}

@keyframes ztf-orbit { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .ztf-latest__card { grid-template-columns: 1fr; }
  .ztf-latest__visual { min-height: 325px; }
}

@media (max-width: 560px) {
  .ztf-latest { width: min(calc(100% - 28px), 1180px); }
  .ztf-latest__card {
    min-height: 0;
    padding: 30px 20px;
    border-radius: 24px;
  }
  .ztf-latest h2 { font-size: 2.7rem; }
  .ztf-latest__copy > p:not(.ztf-latest__eyebrow) { font-size: .86rem; }
  .ztf-latest__visual { min-height: 280px; transform: scale(.82); margin-block: -24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ztf-latest__dot { display: none; }
  .ztf-latest__card, .ztf-latest__cta i { transition: none; }
}