/* Approved TOP Figma 2404:745. Keep the paper tile independent of the white
   section so adjacent elastic boundaries can inherit the correct surface. */
.top-security-cta {
  --security-cta-orange: #ff4f00;
  position: relative;
  background: #fff;
  color: var(--ink);
  padding: 0 40px 80px;
  scroll-margin-top: 112px;
}
.top-security-cta__card {
  position: relative;
  z-index: 3;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 1360px;
  min-height: 344px;
  margin-inline: auto;
  padding: 32px 48px;
  border-radius: 32px;
  background: var(--paper);
  overflow: hidden;
}
.top-security-cta__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("assets/security/paper-grain.png") 0 0 / 50px 50px repeat;
  opacity: .9;
  pointer-events: none;
}
/* Inserting the banner enables the next section's elastic top. Keep the
   title's padded motion canvas inside its own header, not the elastic edge. */
.top-security-cta + .chatbot-intro .chatbot-intro-header {
  overflow-x: clip;
  overflow-y: visible;
}
.top-security-cta__mascot {
  display: block;
  width: 280px;
  height: 280px;
  flex: 0 0 280px;
  object-fit: contain;
}
.top-security-cta__copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1; }
.top-security-cta__eyebrow { color: var(--security-cta-orange); font: 700 24px/1.5 var(--font-en); }
.top-security-cta h2 { font: 700 40px/1.4 var(--font-ja); word-break: keep-all; overflow-wrap: anywhere; }
.top-security-cta__description { font: 400 16px/1.8 var(--font-ja); }
.top-security-cta__action { padding-top: 8px; }
.top-security-cta__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 376px;
  max-width: 100%;
  min-height: 56px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 700 16px/1.5 var(--font-ja);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease;
}
.top-security-cta__link > span:first-child { min-width: 0; }
.top-security-cta__arrow { flex: 0 0 24px; color: var(--security-cta-orange); font-size: 24px; font-weight: 400; line-height: 1; transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
.top-security-cta__link:focus-visible { outline: 3px solid var(--security-cta-orange); outline-offset: 5px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .top-security-cta__link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 7 31 / 12%); }
  .top-security-cta__link:hover .top-security-cta__arrow { transform: translateX(5px); }
}
.top-security-cta__link:active { transform: scale(.985); }
@media (max-width:1199px) and (min-width:768px) {
  .top-security-cta { padding-inline: 32px; }
  .top-security-cta__card { gap: 32px; padding: 32px; }
  .top-security-cta__mascot { width: 220px; height: 220px; flex-basis: 220px; }
  .top-security-cta h2 { font-size: clamp(28px, 3.33vw, 40px); }
}
@media (max-width:767px) {
  .top-security-cta { padding: 0 16px 56px; }
  .top-security-cta__card { flex-direction: column; gap: 24px; padding: 24px; border-radius: 24px; }
  .top-security-cta__mascot { width: 200px; height: 200px; flex: 0 0 200px; }
  .top-security-cta__copy { width: 100%; gap: 12px; }
  .top-security-cta__eyebrow { font-size: 20px; }
  .top-security-cta h2 { font-size: clamp(25px, 6.4vw, 32px); }
  .top-security-cta__description { font-size: 14px; line-height: 1.9; }
  .top-security-cta__link { width: 100%; padding: 14px 20px; font-size: 13px; gap: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .top-security-cta__link, .top-security-cta__arrow { transition: none; transform: none; }
}
html[data-motion-paused="true"] .top-security-cta__link,
html[data-motion-paused="true"] .top-security-cta__arrow { transition: none; transform: none; }