/* ROLE_TALK_TOP_FEATURE_SHOWCASE_20261015
   Top page feature cards only.
*/

#top .bottom-grid.section {
  display: block !important;
  margin-top: 12px !important;
  margin-bottom: 28px !important;
}

/* Remove the old large NEWS panel appearance. */
#top .bottom-grid #news.top-feature-showcase {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#top .top-feature-showcase::before,
#top .top-feature-showcase::after {
  display: none !important;
  content: none !important;
}

#top .top-feature-heading {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-bottom: 15px;
}

#top .top-feature-showcase
.top-feature-heading h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: clamp(19px,2vw,25px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: .01em;
  color: #482f21 !important;
  text-align: left !important;
}

#top .top-feature-more {
  position: relative;
  flex-shrink: 0;
  font-size: 13px;
}

#top .top-feature-more summary {
  color: #805334;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  font-weight: 650;
}

#top .top-feature-more summary::-webkit-details-marker {
  display: none;
}

#top .top-feature-more summary span {
  display: inline-block;
  margin-left: 5px;
  font-size: 18px;
  text-decoration: none;
}

#top .top-feature-more > p {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  width: min(320px, 75vw);
  margin: 9px 0 0 !important;
  padding: 14px 17px;
  border: 1px solid #e2c9ae;
  border-radius: 10px;
  background: #fffaf4;
  color: #634c3b;
  font-size: 13px;
  line-height: 1.8;
  box-shadow: 0 9px 20px #432a1a18;
}

#top .top-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}

#top .top-feature-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  min-height: 106px;
  margin: 0;
  padding: 19px 15px;
  border: 1px solid #ecddca;
  border-radius: 13px;
  background: #fffdfa;
  box-shadow: 0 3px 12px #60412b08;
}

#top .top-feature-card svg {
  display: block;
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  fill: none;
  stroke: #dc7b25;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#top .top-feature-card > div {
  min-width: 0;
}

#top .top-feature-card h3 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #4d3425 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
}

#top .top-feature-card p {
  margin: 0 !important;
  color: #79695a !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

@media (max-width: 900px) {
  #top .top-feature-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 520px) {
  #top .top-feature-heading {
    align-items: flex-start;
  }

  #top .top-feature-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 9px;
  }

  #top .top-feature-card {
    min-height: 0;
    padding: 15px;
  }

  #top .top-feature-more > p {
    width: min(280px,75vw);
  }
}

/* ROLE_TALK_TOP_FONT_UNIFICATION_20261015
   Use the existing approved Role & Talk body font.
   Active only while the Top page is displayed.
*/

body:has(main#top),
body:has(main#top)
  :is(.site-chrome, main#top, footer, dialog),
body:has(main#top)
  :is(.site-chrome, main#top, footer, dialog) * {
  font-family:
    var(
      --rtb-body,
      "Hiragino Kaku Gothic ProN",
      "Yu Gothic",
      Meiryo,
      sans-serif
    ) !important;
}

/* ROLE_TALK_SEVEN_CARDS_UNIFIED_20261015
   One visual system for the 3 steps + 4 features.
   Top only. Existing copy and actions unchanged.
*/

/* Layout: three steps / four features */
#top .how .steps {
  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

#top .top-feature-grid {
  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* Same outer treatment for all seven cards */
#top .how .steps > article,
#top .top-feature-grid > article.top-feature-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns:
    52px minmax(0, 1fr) !important;
  grid-template-rows:
    minmax(52px, auto) 1fr !important;
  grid-template-areas:
    "badge title"
    "description description" !important;

  column-gap: 13px !important;
  row-gap: 13px !important;
  align-items: center !important;
  align-content: start !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 168px !important;
  height: auto !important;

  margin: 0 !important;
  padding: 21px !important;

  border: 1px solid #bf915d !important;
  border-radius: 16px !important;
  outline: none !important;

  background:
    linear-gradient(
      145deg,
      #fffdf8 0%,
      #f7ecdf 100%
    ) !important;

  box-shadow:
    0 6px 15px rgba(60, 35, 19, .10),
    inset 0 0 0 3px #fffaf2
    !important;

  transform: none !important;
}

/* Identical inner gold frame */
#top .how .steps > article::before,
#top .top-feature-grid > article.top-feature-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;

  inset: 5px !important;
  border: 1.5px solid #dfc19c !important;
  border-radius: 11px !important;
  background: none !important;
  box-shadow: none !important;

  pointer-events: none !important;
}

#top .how .steps > article::after,
#top .top-feature-grid > article.top-feature-card::after {
  display: none !important;
  content: none !important;
}

/* Keep text and icons above the decorative frame */
#top .how .steps > article > *,
#top .top-feature-grid > article.top-feature-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* The feature-card wrapper must not interrupt the grid */
#top .top-feature-grid
> article.top-feature-card > div {
  display: contents !important;
}

/* Matching medallions, same size and same material */
#top .how .steps > article > .step-number,
#top .top-feature-grid
> article.top-feature-card > svg {
  grid-area: badge !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: start !important;
  align-self: center !important;

  border: 2px solid #c99c62 !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 35% 25%,
      #775039,
      #422719 80%
    ) !important;

  color: #f9dcaa !important;

  box-shadow:
    0 0 0 2px #fffaf2,
    0 0 0 3px #a97b45,
    0 3px 7px rgba(49, 28, 15, .18)
    !important;
}

/* Step numbers */
#top .how .steps > article > .step-number {
  font-family: var(--rtb-body, sans-serif) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* SVGs use the same medallion with padded artwork */
#top .top-feature-grid
> article.top-feature-card > svg {
  display: block !important;
  box-sizing: border-box !important;
  padding: 13px !important;

  fill: none !important;
  stroke: #f9dcaa !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Shared title treatment */
#top .how .steps > article > h3,
#top .top-feature-grid
> article.top-feature-card h3 {
  grid-area: title !important;

  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--rtb-body, sans-serif) !important;
  color: #3e281d !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: .01em !important;

  align-self: center !important;
  overflow-wrap: anywhere;
}

/* Shared description treatment */
#top .how .steps > article > p,
#top .top-feature-grid
> article.top-feature-card p {
  grid-area: description !important;

  display: block !important;
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--rtb-body, sans-serif) !important;
  color: #715a46 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;

  text-align: left !important;
  text-wrap: pretty;
  overflow-wrap: break-word !important;

  align-self: start !important;
}

/* Keep the section heading consistent */
#top .top-feature-showcase
.top-feature-heading h2 {
  font-family: var(--rtb-body, sans-serif) !important;
  color: #422b1d !important;
  font-size: clamp(20px, 2vw, 25px) !important;
  font-weight: 700 !important;
}

/* Responsive layouts */
@media (max-width: 1050px) {
  #top .top-feature-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 850px) {
  #top .how .steps {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #top .how .steps,
  #top .top-feature-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #top .how .steps > article,
  #top .top-feature-grid > article.top-feature-card {
    min-height: 0 !important;
    padding: 19px !important;
    row-gap: 12px !important;
  }
}