/* Figma eRtvwdrIaaublxQxCg87xO / 3:8101, 2026-10-21.
 * Requested visual treatment only: preserve the original header, nine views,
 * item order, actual portfolio imagery, prices, links and checkout controls.
 * Keep the existing leaf/sky colours per the user's palette constraint.
 * Subscriptions remain directly after this compact introduction.
 */
body.site-refresh.figma-hero-style #hero {
  background: #f7faf8;
  border-color: #dce4df;
  padding-top: 48px;
}

.figma-hero-style .home-intro {
  --hero-ink: #202b28;
  --hero-muted: #555e59;
  --hero-line: #dce4df;
  --hero-accent: #456e25;
  --hero-accent-hover: #39591f;
  --hero-money: #1d6398;
  align-items: center;
  gap: 40px;
}

.figma-hero-style .home-intro-copy { min-width: 0; }
body.site-refresh.figma-hero-style .home-intro-copy h1 {
  max-width: 100%;
  color: var(--hero-ink);
  font-size: clamp(36px, 3.5vw, 48px);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.035em;
  word-break: keep-all;
}
.figma-hero-style .hero-style-emphasis { color: var(--hero-accent); }
.figma-hero-style .home-intro-copy > p:first-of-type {
  max-width: 500px;
  margin-top: 24px;
  color: var(--hero-muted);
  font-size: 18px;
  line-height: 1.65;
}
.figma-hero-style .home-intro-price {
  margin-top: 24px;
  color: var(--hero-money);
  font-size: 28px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: -.02em;
}
.figma-hero-style .home-intro-price + p {
  max-width: 500px;
  margin-top: 8px;
  color: var(--hero-muted);
  font-size: 14px;
  line-height: 1.65;
}
/* 첫 화면 단추는 흰 부 단추다(2026-10-28 확정). 여기서는 크기·모서리만 정하고, 바탕·테두리·글자 색은
 * figma-simple-style.css 의 부 단추 규칙(흰 바탕 · --figma-control 테두리)이 정한다.
 * 전에는 이 자리에 초록 채움이 적혀 있었지만 그 규칙이 늘 이겨 한 번도 보인 적이 없다. */
.figma-hero-style .home-intro-link {
  min-height: 54px;
  padding: 14px 24px;
  border-radius: 6px;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.figma-hero-style .home-intro-link:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 4px;
  box-shadow: none;
}

/* Browser chrome is a surface treatment around the existing single carousel.
 * Do not introduce the reference's example cards as extra content or replace
 * real customer screenshots. Controls keep their existing DOM/focus order.
 */
body.site-refresh.figma-hero-style [data-work-hero] {
  position: relative;
  min-width: 0;
  padding: 30px 0 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgb(32 34 31 / .06);
}
.figma-hero-style [data-work-hero]::before {
  position: absolute;
  inset: 0 0 auto;
  height: 30px;
  background: #f0f0ec;
  content: "";
  pointer-events: none;
}
body.site-refresh.figma-hero-style [data-hero-stage] {
  border: 0;
  border-radius: 0;
  background: #edeee7;
  box-shadow: none;
}
body.site-refresh.figma-hero-style [data-work-hero] figcaption { padding: 18px 20px 16px; }
.figma-hero-style [data-hero-title] {
  color: var(--hero-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.figma-hero-style [data-hero-desc] {
  min-height: 0;
  color: var(--hero-muted);
  font-size: 14px;
  line-height: 1.65;
}
.figma-hero-style [data-hero-controls] { margin-top: 12px; }
.figma-hero-style [data-hero-controls] > button {
  border-color: var(--hero-line);
  color: var(--hero-ink);
}
.figma-hero-style [data-hero-controls] > button:hover {
  border-color: var(--hero-accent);
  color: var(--hero-accent);
}
body.site-refresh.figma-hero-style [data-work-hero] figcaption > p:last-child {
  margin-top: 8px;
  color: var(--hero-muted);
  font-size: 12px;
  line-height: 1.65;
}
.figma-hero-style .home-intro ::selection { background: #d5eac3; color: var(--hero-ink); }

/* The reference's preview supports the offer instead of setting the height of
 * the whole opening. Keep the real 16:9 case images and every carousel control,
 * but cap the frame on wide screens so the subscription prices appear sooner.
 */
body.site-refresh.figma-hero-style [data-work-hero] {
  width: 100%;
  max-width: 540px;
  justify-self: end;
}
body.site-refresh.figma-hero-style [data-work-hero] figcaption {
  padding: 16px 20px 14px;
}
/* Include caption padding and the page count when fitting the 44px controls.
 * At narrow frame widths keep the existing arrows/play/count; the optional dot
 * shortcuts return when all seven targets fit without clipping the count.
 */
@container home-proof (max-width: 530px) {
  .figma-hero-style [data-hero-controls] > div { display: none; }
}
body.site-refresh.figma-site-style .home-plans-title {
  margin-top: 24px;
  padding-top: 20px;
  font-size: 21px;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .figma-hero-style .home-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  body.site-refresh.figma-hero-style #hero { padding-top: 36px; }
  .figma-hero-style .home-intro-copy h1 { max-width: 760px; }
}
@media (max-width: 767px) {
  body.site-refresh.figma-hero-style #hero { padding-top: 28px; }
  body.site-refresh.figma-hero-style .home-intro-copy h1 {
    font-size: clamp(27px, 7.5vw, 32px);
    line-height: 1.35;
    letter-spacing: -.035em;
  }
  .figma-hero-style .home-intro-copy > p:first-of-type { margin-top: 16px; font-size: 16px; }
  .figma-hero-style .home-intro-price { margin-top: 16px; font-size: 26px; }
  .figma-hero-style .home-intro-price + p { font-size: 14px; }
  body.site-refresh.figma-site-style .home-plans-title { font-size: 20px; }
}