/*
 * home-top.css: the nav, hero, partners, stats and features header of the home page.
 * Every selector sits under the root class .h-top.
 * The nav root also carries .s-top and .top-hdr, so the Pricing nav rules in top.css apply to it.
 * Override them here under .h-top (for example .h-top.top-hdr or .h-top .top-cta).
 * Own class names, custom properties and keyframes start with ht- (--ht-*, @keyframes ht-*).
 * Shared pieces come from base.css (tokens, breakpoints, data-appear presets) and home-base.css (.hb-*).
 * Breakpoints: desktop as the base rule, then @media (min-width: 810px) and (max-width: 1199.98px),
 * then @media (max-width: 809.98px).
 * Values are the computed values of the original page at 1440, 1024 and 390.
 *
 *   1. Section tokens
 *   2. Nav (the Pricing nav, home variant)
 *   3. Text wrapper and gradient text
 *   4. Hero
 *   5. Chip bands (the two moving rows; home-top.js adds the copies and the motion)
 *   6. Partners (업계의 선택)
 *   7. Stats (비교할 수 없는 국내 1위)
 *   8. Features header
 *   9. Tablet  (810 to 1199.98)
 *  10. Mobile  (809.98 and below)
 */

/* 1. Section tokens ------------------------------------------------------------ */

.h-top {
  --ht-hero-bg: linear-gradient(180deg, rgba(255, 255, 255, 0), rgb(245, 252, 246));
  --ht-title-fill: linear-gradient(270deg, rgb(98, 211, 119) 0%, rgb(27, 207, 144) 100%);
  --ht-title-lead: linear-gradient(270deg, rgb(98, 211, 119) 0%, rgb(27, 207, 60) 100%);
  --ht-fh-fill: linear-gradient(281deg, rgb(115, 153, 250) 38%, rgb(99, 185, 255) 107%);
  --ht-band-mask: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
  --ht-sub: rgb(120, 120, 120);   /* hero and partners subtitle */
  --ht-note: rgb(184, 184, 184);  /* chip second line */
  --ht-ink: rgb(0, 17, 34);       /* HYGGE FOREST and the features header title color */
  --ht-card-bg: #f9fdfa;          /* stats card */
}

/* 2. Nav -------------------------------------------------------------------------
 * Same component as the Pricing nav. On the home page the link boxes follow the text width
 * (홈 10.98, 요금제 32.94, 캠지기센터 54.89), so no fixed width classes and 홈 is auto wide.
 * The original 홈 text box does not wrap (white-space pre, Pricing uses pre-wrap).
 */
.h-top .top-home { width: auto; white-space: pre; }

/* 3. Text wrapper and gradient text ------------------------------------------------
 * .ht-tw is the original rich text box. data-appear goes on it (base.css owns the motion).
 * .ht-fill is the original gradient text span: an inline-block whose background is cut to the
 * glyphs. Width words: .ht-d shows from 810 up, .ht-m below (one copy of each in the markup).
 */
.h-top .ht-tw {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start;
  flex: 0 0 auto; width: auto; max-width: 100%; height: auto; white-space: pre-wrap;
  word-break: break-word; overflow-wrap: break-word; outline: none;
}
.h-top .ht-fill {
  display: inline-block;
  background-image: var(--ht-title-fill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h-top .ht-m { display: none; }

/* 4. Hero ---------------------------------------------------------------------------
 * Two flex children share the height below the 120px top padding: the text box and the band
 * group (its 33px paddings come on top, so 345 and 411 at 900px).
 */
.h-top.ht-hero {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 24px; flex: 0 0 auto; width: 100%; height: 100vh; padding: 120px 0 0;
  overflow: hidden; background: var(--ht-hero-bg);
}
.h-top .ht-text {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 1 0 0px; width: 100%; height: 1px; padding: 0;
  overflow: hidden;
}
.h-top .ht-h1 {
  font-family: var(--font-bold); font-style: normal; font-weight: 400; font-size: 50px;
  line-height: 1.4em; letter-spacing: -0.6px; color: var(--c-brand); text-align: center;
  text-transform: none; text-decoration: none;
}
.h-top .ht-lead { background-image: var(--ht-title-lead); }
.h-top .ht-s32 { font-size: 32px; line-height: 1.3em; }
.h-top .ht-ls8 { letter-spacing: -0.8px; }
.h-top .ht-h4 {
  font-family: var(--font-semibold); font-style: normal; font-weight: 400; font-size: 19px;
  line-height: 1.4em; letter-spacing: 0; color: var(--ht-sub); text-align: start;
}

/* 5. Chip bands -----------------------------------------------------------------------
 * .ht-mask is the band box (padding 10, edges faded by the mask). .ht-list is the moving row.
 * Before home-top.js has added the copies, the band stays hidden like the original (opacity 0
 * until its script runs). If the script never runs, the band shows after 2s with the five chips.
 */
.h-top .ht-bands {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 1 0 0px; width: 100%; height: 1px; padding: 33px 0;
  overflow: hidden;
}
.h-top .ht-band { position: relative; flex: 0 0 auto; width: 100%; height: 48%; }
.h-top .ht-mask {
  display: flex; place-items: center; width: 100%; height: 100%; max-width: 100%;
  max-height: 100%; margin: 0; padding: 10px; list-style-type: none; overflow: hidden;
  -webkit-mask-image: var(--ht-band-mask); mask-image: var(--ht-band-mask);
}
html.js .h-top .ht-mask:not(.ht-ready) { opacity: 0; animation: ht-reveal 0s linear 2s forwards; }
@keyframes ht-reveal { to { opacity: 1; } }
.h-top .ht-list {
  position: relative; display: flex; flex-direction: row; place-items: center; gap: 20px;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0;
  list-style-type: none; will-change: transform; transform: translateX(0px);
}
/* The copies keep will-change transform, as the original sets it on each copied item. */
.h-top .ht-clone { will-change: transform; }
.h-top .ht-chip {
  position: relative; flex-shrink: 0; width: 253px; height: 135px; overflow: hidden;
  background-color: rgb(255, 255, 255); border-radius: 16px;
}
/* Chip name: body preset (Medium 13px / 1.6em / -0.02em). */
.h-top .ht-lab {
  position: absolute; left: 32px; bottom: 25px;
  font-family: var(--font-medium); font-style: normal; font-weight: 400;
  font-size: var(--text-body-size); line-height: var(--text-body-line);
  letter-spacing: var(--text-body-spacing); color: var(--c-text); text-align: start; white-space: pre;
}
.h-top .ht-lab-up { bottom: 34px; }
.h-top .ht-note {
  position: absolute; left: 32px; bottom: 17px;
  font-family: var(--font-semibold); font-style: normal; font-weight: 400; font-size: 11px;
  line-height: 1.6em; letter-spacing: -0.02em; color: var(--ht-note); text-align: start;
  white-space: pre;
}
/* Emoji: heading preset (Bold 22px / 1.5em). */
.h-top .ht-emo {
  position: absolute; left: 32px; top: 22px;
  font-family: var(--font-bold); font-style: normal; font-weight: 400; font-size: 22px;
  line-height: 1.5em; letter-spacing: 0; color: var(--c-text); text-align: start; white-space: pre;
}
.h-top .ht-emo-2 { left: 60px; }
.h-top .ht-emo-3 { left: 88px; }

/* 6. Partners --------------------------------------------------------------------------
 * Title and subtitle use the shared head text (.hb-title, .hb-sub). The subtitle is gray 120 and
 * starts at the left of its own box. Five 96px cells per row, 80px apart. The image box is 4:3
 * with 20px corners, except the first logo (square corners). Chips and logo boxes get no
 * will-change: the original asks for it through an override variable (fallback transform) but sets
 * that variable to none on body, so Chrome computes none there (a layer would shift the logos 0.5px).
 */
.h-top.ht-partners {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 74px; flex: 0 0 auto; width: 100%; height: min-content;
  padding: 100px 0; overflow: hidden;
}
.h-top .ht-phead {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; width: 1000px; height: min-content; padding: 0;
  overflow: hidden;
}
.h-top .ht-psub { color: var(--ht-sub); text-align: start; }
.h-top .ht-grid {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 12px; flex: 0 0 auto; width: 1000px; height: min-content; padding: 0;
  overflow: hidden; background-color: rgb(255, 255, 255);
}
.h-top .ht-row {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 80px; flex: 0 0 auto; width: 100%; height: min-content; padding: 0;
  overflow: hidden;
}
.h-top .ht-cell {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; width: 96px; height: auto; aspect-ratio: 1 / 1;
  padding: 0; overflow: hidden; background-color: rgb(255, 255, 255);
}
.h-top .ht-logo {
  position: relative; flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 20px;
}
.h-top .ht-logo-flat { border-radius: 0; }
.h-top .ht-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
/* The logo image sits in a .hb-pic wrapper that draws no box, so it fills .ht-img. */
.h-top .ht-img img {
  display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center;
}
.h-top .ht-cover { object-fit: cover; }
.h-top .ht-contain { object-fit: contain; }
/* The first cell is a text logo: Radley 13px, line 1.2em (the heading default). */
.h-top .ht-hyg {
  font-family: "Radley", "Radley Placeholder", serif; font-style: normal; font-weight: 400;
  font-size: 13px; line-height: 1.2em; letter-spacing: 1.2px; color: var(--ht-ink);
  text-align: center; text-transform: none; text-decoration: none;
}
/* The empty Features box under the logos (it only adds height). */
.h-top .ht-feat {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 56px; flex: 0 0 auto; width: 1000px; max-width: 100%;
  height: min-content; min-height: 145px; padding: 0; overflow: visible;
}

/* 7. Stats -------------------------------------------------------------------------------
 * The numbers do not count up (the original does not either). The metric group appears with
 * rise-30. The icons are Phosphor bold (Users, Tent, ChartLineUp) in brand green.
 */
.h-top.ht-stats {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 40px; flex: 0 0 auto; width: 100%; height: min-content;
  padding: 100px 0; overflow: hidden;
}
.h-top .ht-card {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 56px; flex: 0 0 auto; width: 1000px; max-width: 100%;
  height: min-content; padding: 60px; overflow: visible; background-color: var(--ht-card-bg);
  border-radius: 30px;
}
.h-top .ht-shead {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; width: 1000px; height: min-content; padding: 0;
  overflow: hidden;
}
.h-top .ht-metrics {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 0; flex: 0 0 auto; width: 100%; height: min-content; padding: 0;
  overflow: visible;
}
.h-top .ht-metric {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 8px; flex: 1 0 0px; width: 1px; height: min-content; padding: 30px 0;
  border-radius: 30px;
}
.h-top .ht-mrow {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 10px; flex: 0 0 auto; width: 100%; height: min-content; padding: 0;
  overflow: hidden;
}
.h-top .ht-micon {
  position: relative; display: block; flex: 0 0 auto; width: 32px; height: 32px;
  color: var(--c-brand);
}
.h-top .ht-micon > svg { display: block; width: 100%; height: 100%; fill: currentColor; user-select: none; }
.h-top .ht-mlab {
  position: relative; flex: 0 0 auto; font-family: var(--font-semibold); font-style: normal;
  font-weight: 400; font-size: 19px; line-height: 1.4em; letter-spacing: 0; color: var(--c-text);
  text-align: center; white-space: pre;
}
.h-top .ht-mval {
  position: relative; display: flex; flex-flow: row nowrap; place-content: center;
  align-items: center; gap: 4px; flex: 0 0 auto; width: min-content; height: min-content;
  padding: 0; overflow: hidden;
}
.h-top .ht-mnum {
  position: relative; flex: 0 0 auto; font-family: var(--font-bold); font-style: normal;
  font-weight: 400; font-size: 36px; line-height: 1.4em; letter-spacing: 0; color: var(--c-text);
  text-align: center; white-space: pre;
}
.h-top .ht-green { color: var(--c-brand); }
.h-top .ht-ink { color: var(--c-text); }
.h-top .ht-start { text-align: start; }

/* 8. Features header ----------------------------------------------------------------------
 * The title is 140px tall in a 308px box with 100px padding: it spills 16px into each padding.
 */
.h-top.ht-fhead {
  position: relative; display: flex; flex-flow: column nowrap; place-content: center;
  align-items: center; gap: 20px; flex: 0 0 auto; width: 100%; height: 308px; padding: 100px;
  overflow: hidden;
}
.h-top .ht-fh1 {
  font-family: var(--font-bold); font-style: normal; font-weight: 400; font-size: 50px;
  line-height: 1.4em; letter-spacing: -0.6px; color: var(--ht-ink); text-align: center;
  text-transform: none; text-decoration: none;
}
.h-top .ht-fh-fill { background-image: var(--ht-fh-fill); }

/* 9. Tablet ------------------------------------------------------------------------------- */

@media (min-width: 810px) and (max-width: 1199.98px) {
  /* The original span is 50px in a 50px heading with 1.3em lines (65px). */
  .h-top .ht-h1 { line-height: 1.3em; }
  .h-top .ht-h4 { font-size: 15px; }
  .h-top .ht-bands { flex: 0 0 auto; height: min-content; }
  .h-top .ht-band { height: 156px; }
  .h-top .ht-emo { font-size: 20px; }

  .h-top.ht-partners { padding: 100px 50px; }
  .h-top .ht-phead,
  .h-top .ht-grid { width: 100%; }

  .h-top.ht-stats { padding: 100px 50px; }
  .h-top .ht-shead { width: 100%; }
  .h-top .ht-mlab { font-size: 15px; }
  .h-top .ht-mnum { font-size: 28px; }

  /* A 40px heading with 50px spans inside: 65px lines. */
  .h-top.ht-fhead { height: min-content; padding: 80px 40px; }
  .h-top .ht-fh1 { font-size: 40px; line-height: 1.3em; }
  .h-top .ht-fhl { font-size: 50px; line-height: 1.3em; }
}

/* 10. Mobile --------------------------------------------------------------------------------
 * Hero title: the heading is 0px (lines 0), so the two gradient spans set the line box. The first
 * one holds one 32px space: invisible, but it moves both lines 3.29px to the right, as in the
 * original. Its baseline sits on the last line of the second span.
 */
@media (max-width: 809.98px) {
  .h-top .ht-d { display: none; }
  .h-top .ht-m { display: inline-block; }

  .h-top.ht-hero { padding: 40px 0 0; }
  .h-top .ht-text { flex: 0 0 auto; height: min-content; order: 0; padding: 16px; }
  .h-top .ht-h1 { font-size: 0; line-height: 1.3em; }
  .h-top .ht-h4 { font-size: 14px; }
  .h-top .ht-bands { flex: 0 0 auto; height: min-content; order: 1; }
  .h-top .ht-band { height: 144px; }
  .h-top .ht-emo { font-size: 16px; }

  .h-top.ht-partners { gap: 24px; padding: 60px 16px; }
  .h-top .ht-phead { width: 100%; }
  .h-top .ht-grid { gap: 16px; width: 100%; }
  .h-top .ht-row { gap: 12px; }
  .h-top .ht-cell { flex: 1 0 0px; width: 1px; }

  .h-top.ht-stats { gap: 24px; padding: 40px 16px; }
  .h-top .ht-card { gap: 16px; padding: 40px; border-radius: 14px; }
  .h-top .ht-shead { width: 100%; }
  .h-top .ht-metrics { flex-direction: column; }
  .h-top .ht-metric { flex: 0 0 auto; width: 100%; padding: 16px 0; }
  .h-top .ht-mrow { gap: 4px; }
  .h-top .ht-micon { width: 20px; height: 20px; }
  .h-top .ht-mlab { font-size: 16px; }
  .h-top .ht-mnum { font-size: 26px; }

  .h-top.ht-fhead { height: min-content; padding: 60px 20px; }
  .h-top .ht-fh1 { font-size: 28px; line-height: 1.3em; letter-spacing: -0.8px; }
}