@charset "utf-8";

/* =========================================================
   portfolio — LEAH, Choi.
   Styles matched to https://www.choihayeon.com/
   (webflow CSS + inline styles), assets from Figma.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --blue:        #0559F6;
  --blue-light:  #508AFF;
  --blue-deep:   #1A53BE;
  --blue-navy:   #16459C;   /* toggle bar (off) */
  --blue-load:   #15459B;   /* page load curtain */
  --gray-bg:     #F6F7F6;
  --white:       #FFFFFF;
  --line-white:  rgba(255, 255, 255, .3);
  --line-blue:   rgba(22, 69, 156, .5);
  --pink: #ff7ab1;
  --pink-soft: #f6e9ee;
  --pink-tag-bg: #f6e9ee;
  --gray-bg: #f5f5f5;
  --text-dark: #111111;
  --text-mid: #676767;
  --default: #222222;

  /* "Lovelace (Script) Trial" is served via Adobe Fonts on the live site
     and can't be embedded here — Playfair Display Italic is the stand-in.
     Swap the @font-face in if you have the licensed webfont. */
  --ff-display: "Lovelace Script Trial", "Lovelac Trial", "Playfair Display", Cormorant, serif;
  --ff-serif:   Cormorant, "Times New Roman", serif;
  --ff-sans:    Poppins, Pretendard, system-ui, sans-serif;
  --ff-kr:      Pretendard, "Noto Sans KR", system-ui, sans-serif;

  --content: 1204px;
  /* site: side padding 20px, bumped to 50px only at ≥1920 */
  --gutter-x: 20px;
  --pad-y: clamp(88px, 10.42vw, 200px);
}
@media (min-width: 1920px) {
  :root { --gutter-x: 50px; }
}

/* ---------- responsive rem scale (site's html font-size steps) ---------- */
html { font-size: 16px; }
@media (max-width: 1279px) { html { font-size: calc(13.0048px + 0.156vw); } }
@media (max-width: 766px)  { html { font-size: calc(15.5216px + 0.0389vw); } }
@media (max-width: 548px)  { html { font-size: 14px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--default);
  font-family: var(--ff-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  padding: 12px 20px; background: var(--blue); color: #fff;
}
.skip-link:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* =========================================================
   PAGE LOAD CURTAIN  (.load-left / .load-right, bg #15459B)
   ========================================================= */
.page-load-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
}
.load-left, .load-right {
  background-color: var(--blue-load);
  width: 50%;
  height: 100vh;
  transition: transform .8s cubic-bezier(.77, 0, .18, 1);
}
.page-load-wrap.is-done .load-left  { transform: translateX(-101%); }
.page-load-wrap.is-done .load-right { transform: translateX(101%); }
.page-load-wrap.is-hidden { display: none; }

.main-body {
    color: var(--blue);
}

/* =========================================================
   CUSTOM CURSOR  (site: 20px, #ccdef1 / border #a1bff7)
   ========================================================= */
.cursor-wrapper {
  z-index: 1000;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.cursor {
  background-color: #ccdef1;
  border: 1px solid #a1bff7;
  border-radius: 20px;
  width: 20px;
  height: 20px;
  transition: width .25s ease-out, height .25s ease-out, opacity .25s;
}
.cursor-wrapper.is-link .cursor { width: 36px; height: 36px; }
@media (hover: none) { .cursor-wrapper { display: none; } }

/* site: body { cursor: none } — hide the native cursor everywhere
   while the custom one is active (.has-cursor set by js/main.js) */
.has-cursor,
.has-cursor * { cursor: none !important; }

/* =========================================================
   NAV  (.content-nav — fixed full width, blur, scrolled → white)
   ========================================================= */
.content-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.nav-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--gutter-x);
}
@media (max-width: 991px) {
  .nav-layout { padding-top: 12px; padding-bottom: 12px; }
}
.nav-logo { display: block; width: 40px; }
.nav-logo img { width: 100%; height: auto; }
.main-menu { display: flex; gap: 40px; }
/* .nav-link1: Cormorant 600 1rem (1.25rem on ≤767, 1rem on ≤479) */
.main-menu a {
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--blue);
  transition: color .35s, opacity .2s;
}
@media (max-width: 767px) { .main-menu a { font-size: 1.25rem; } }
@media (max-width: 479px) { .main-menu a { font-size: 1rem; }.nav-layout{padding: 16px;} }
.main-menu a:hover { opacity: .6; }
.content-nav.scrolled a { color: var(--white); }

/* =========================================================
   HERO  (100vh, marquee pinned to bottom)
   Pinned like the site (.content-hero: sticky top 0) — the hero
   stays fixed while the sections after it scroll up over it.
   ========================================================= */
.hero {
  position: sticky;
  top: 0;
  min-height: 100svh;
  background: var(--gray-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main, .footer {
  position: relative;
  z-index: 1;
}
main { background: var(--white); }
.hero__inner {
  position: relative;
  width: 100%;
  /* symmetric padding so flex centering lands on the true middle;
     min values keep clearance from the fixed nav / bottom marquee */
  padding: clamp(140px, 21vh, 230px) var(--gutter-x);
}

/* hero visual — disco ball top right */
.hero__visual {
  position: absolute;
  top: clamp(120px, 17vh, 190px);
  right: clamp(-40px, 4.69vw, 90px);
  width: clamp(180px, 25vw, 363px);
  height: auto;
  pointer-events: none;
}

/* title — .heading: Cormorant 300 / .heading-type2: Lovelace 600 italic
   site sizes: 7.25/6.75rem → ≥1280: 8.25/7.75 → ≥1440: 12/10 → ≤767: 5rem */
.hero__title {
  position: relative;
  color: var(--blue);
  text-transform: uppercase;
  line-height: 1.5;
}
.hero__line1 {
  display: block;
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: 7.25rem;
}
.hero__line2 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: -20px;
}
.hero__line2 em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: 6.75rem;
  line-height: 1.1;
}
@media (min-width: 1440px) {
  .hero__line1 { font-size: 8.25rem; }
  .hero__line2 em { font-size: 8rem; }
}
@media (min-width: 1920px) {
  .hero__line1 { font-size: 12rem; }
  .hero__line2 em { font-size: 11rem; }
  .hero__line2 { margin-top: -30px; }
}

/* toggle switch — identical to site (.switch/.slider) */
.switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 46px;
  height: 7px;
  margin-top: 2.2rem;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
  border-radius: 36px;
  background-color: var(--blue-navy);
}
.slider::before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 0px;
  bottom: -9px;
  background-color: #ffffff;
  transition: .4s;
  border-radius: 50%;
  border: 1px solid var(--blue);
}
input:checked + .slider { background-color: #dddddd; }
input:checked + .slider::before { transform: translateX(22px); }
.switch input:focus-visible + .slider {
  outline: 2px solid var(--blue);
  outline-offset: 6px;
}

/* intro — 3 columns, top rule (.hero-text: Poppins 300 1.1rem #1A53BE .7) */
.hero__intro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  margin-top: clamp(48px, 9vh, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--line-blue);
}
.hero__intro p {
  color: var(--blue-deep);
  opacity: .7;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}

/* location — absolute bottom 8% (.hero-text2) + blinking dot */
.hero__location {
  position: absolute;
  bottom: 8%;
  left: var(--gutter-x);
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--blue-deep);
}
.dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background-color: var(--blue);
  animation: 1s ease-in-out infinite alternate blink;
}
@keyframes blink {
  from { opacity: 1; }
  to   { opacity: .15; }
}
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* =========================================================
   MARQUEE  (.text-loop-wrap: pt 11 / pb 10, item 1.25rem italic)
   ========================================================= */
.marquee {
  overflow: hidden;
  padding: 11px 0 10px;
  -webkit-user-select: none;
  user-select: none;
}
.hero__marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.marquee--solid { background: var(--blue-light); color: var(--white); }
.marquee--outline {
  background: var(--white);
  color: var(--blue-deep);
  border-top: 1px solid var(--blue-deep);
}
/* track is animated by js/main.js (rAF + lerp); static without JS */
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
}
.marquee__group {
  flex: none;
  display: inline-flex;
  padding-right: 72px;
  gap: 72px;
}
.marquee__group > span {
  flex: none;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 1920px) { .marquee__group > span { font-size: 1.25rem; } }

/* =========================================================
   WORK  (.contant-project: 200px top / 176px bottom)
   ========================================================= */
.work {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 7.5vw, 144px);
  max-width: calc(var(--content) + 48px);
  margin-inline: auto;
  padding: 200px 24px;
}
.work__group { display: flex; flex-direction: column; }
.work__list  { display: flex; flex-direction: column; gap: 56px; }

/* section heading — .heading-2: Lovelace 600, 3rem (3.5rem ≥1920), pb 72 */
.section-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue);
  padding-bottom: 72px;
}
.section-title--invert { color: var(--white); }
@media (min-width: 1920px) { .section-title { font-size: 3.5rem; } }
@media (max-width: 479px) {
  .section-title { font-size: 2rem; padding-bottom: 48px; }
  .section-title--invert { font-size: 2.75rem; }
}

/* card */
.card { display: flex; flex-direction: column; gap: 12px; }
.card__thumb {
  display: block;
  position: relative;
  overflow: hidden;
  background: #D9D9D9;
  aspect-ratio: 590 / 332;
}
.card--wide .card__thumb { aspect-ratio: 1204 / 677; }
.card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* hover swap — site: .hover-image sits on top, fades out on hover
   revealing the second thumbnail beneath */
.hover-image {
  position: absolute;
  inset: 0;
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.card__thumb--swap:hover .hover-image,
.card__thumb--swap:focus-visible .hover-image { opacity: 0; }

/* caption — .heading-3: Cormorant 600 1.5rem */
.card__caption { padding-top: 0; }
.card__caption h3 {
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--blue);
}
.card__caption p {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--blue);
}

/* 2-up grid — site: 24px gaps */
.work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}

/* =========================================================
   ABOUT  (.content-about: bg #0559F6)
   ========================================================= */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--pad-y) 20px;
  background: var(--blue);
  color: var(--white);
}
.about__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(30px, 4vw, 50px);
  width: 100%;
  max-width: 1201px;
}
.about__photo { flex: 0 1 480px; }
.about__photo img { width: 100%; height: auto; }

.about__body {
  flex: 0 1 671px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.5vw, 48px);
}
.about__heading {
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.4;
}
.about__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: clamp(0px, 4vw, 77px);
}
.about__text p {
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.55;
}
.about__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  font-weight: 400;
  line-height: 1.4;
}
.about__links a { font-size: 1.125rem; transition: opacity .2s; }
.about__links a:hover { opacity: .7; }
.about__links .is-underline { text-decoration: underline; }

/* =========================================================
   SKILLS / EXPERIENCE  (.content-more: bg #0559F6, gap 48)
   ========================================================= */
.resume {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 200px 24px;
  background: var(--blue);
  color: var(--white);
}
.resume__col { flex: 0 1 580px; }
.resume__title {
  margin-bottom: 24px;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 2.92vw, 3.5rem);
  line-height: 1.4;
  text-transform: uppercase;
}

/* skills list */
.skills li {
  padding: 32px 8PX;
  border-bottom: 1px solid var(--line-white);
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.4;
}

/* experience list */
.exp__item {
  padding: 32px 8px;
  border-bottom: 1px solid var(--line-white);
}
.exp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  line-height: 1.4;
}
.exp__company { font-weight: 600; }
.exp__role {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}
.exp__role img { width: 24px; height: 24px; }

/* bullets — site .experience-list-item:before (3px dot at 13px/0) */
.exp__desc {
  padding: 12px 0;
}
.exp__desc li {
  position: relative;
  padding: 4px 0 4px 19px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
}
.exp__desc li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 17px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--white);
}

.exp__period {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 12px;
  text-transform: uppercase;
  font-size: .875rem;
  line-height: 1.4;
}
.exp__period .num  { font-family: var(--ff-kr); font-weight: 300; }
.exp__period .unit { font-family: var(--ff-serif); font-weight: 600; }

/* =========================================================
   FOOTER  (.footer-bottom 50% / .footer-copyright Cormorant #0559F6)
   ========================================================= */
.footer {
  display: flex;
  flex-wrap: wrap;
}
.footer p {
  flex: 1 1 50%;
  padding: 28px 20px;
  background: var(--gray-bg);
  color: var(--default);
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.4;
  text-align: center;
}

.footer.footer-main p {
  color: var(--blue);
}

/* =========================================================
   SCROLL REVEAL  (class added by js/main.js)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .about__inner { flex-direction: column; align-items: flex-start; }
  .about__photo { flex: none; width: min(100%, 420px); align-self: center; }
  .about__body  { flex: none; width: 100%; }
  .about__text  { padding-left: 0; }

  .resume { flex-direction: column; align-items: stretch; }
  .resume__col { flex: none; }

}

@media (max-width: 767px) {
  .hero__inner { padding-top: 140px; padding-bottom: 200px; }
  .hero__line1 { font-size: 5rem; }
  .hero__line2 em { font-size: 5rem; letter-spacing: -3px; }
  .hero__line2 { margin-top: 0; gap: 10px; }
  .switch { margin-top: 1.4rem; }
  .hero__visual { top: 96px; right: -30px; opacity: .7; display: none;}
  .hero__intro { grid-template-columns: 1fr; gap: 24px; }
  .hero__intro p { padding-right: 0; }

  .work {padding: 120px 24px}
  .work__grid { grid-template-columns: 1fr; }

  .section-title {padding-bottom: 48px;}

  .skills li { font-size: 24px; padding: 18px 0; }
  .exp__head { font-size: 1.25rem; }

  .footer p { flex: 1 1 100%; padding: 16px 20px;}
}

@media (max-width: 479px) {
  .hero__line1,
  .hero__line2 em { font-size: 5.25rem; }
}

/* =========================================================
                      portfolio pages
   ========================================================= */
.cs-head {
  background: var(--white);
}

.cs-head-in {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  max-width: calc(var(--content) + 48px);
  padding: 120px 24px;
  margin: 0 auto;
}

.cs-head-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.3;
  margin: 0 0 10px;
  max-width: 900px;
}

.cs-head-subtitle {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 28px;
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 29px;
  font-family: var(--ff-sans);
  font-size: .875rem;
  width: fit-content;
}
.cs-btn img { filter: brightness(0) invert(1); }

.cs-body {
  display: flex;
  flex-direction: column;
  gap: 160px;
  width: 100%;
  max-width: calc(var(--content) + 48px);
  padding: 120px 24px;
  margin: 0 auto;
}

.cs-thumb img {width: 100%;}

.cs-tag {
  display: inline-block;
  color: #fff;
  font-family: var(--ff-sans);
  font-size: .75rem;
  padding: 4px 8px;
  margin-bottom: 10px;
}

.cs-highlights {
  padding-top: 40px;
}

.cs-highlights-title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.75rem;
  margin: 0 0 12px;
}

.cs-highlights-list {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
  padding-left: 26px;
  list-style: disc;
}

.cs-highlights-list li { padding: 2px 0; }
.cs-highlights-list b { font-weight: 500; }

.cs-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  opacity: .85;
  max-width: calc(var(--content) + 40px);
  margin: 0 auto;
  width: 100%;
}

.cs-meta-col { flex: 1 1 220px; padding: 0 20px; }
.cs-meta-col:first-child { border-left: none; }
.cs-meta-label { font-family: var(--ff-sans); font-size: .875rem; margin: 0 0 6px; }
.cs-meta-value { font-family: var(--ff-serif); font-size: 1.2rem; margin: 0; }

.cs-row { display: flex; gap: 24px; align-items: flex-start; }
.cs-row-label { flex: 0 0 190px; }
.cs-row-label span {
  display: block;
  padding-left: 8px;
  font-family: var(--ff-sans);
  font-size: .875rem;
  line-height: 1.7;
}

.cs-row-text {
  flex: 1;
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.cs-row-text i { font-style: italic; }
.cs-row-text b { font-weight: 500; }
.cs-row-heading-only .cs-row-label { margin-bottom: -40px; }

.cs-row-title { color: var(--pink); font-family: var(--ff-sans); font-weight: 500; font-size: .875rem; margin: 0; width: 100%; }

.cs-img {margin-top: -80px; display: flex; justify-content: center;}


/* =========================================================
                   gloam landing page
   ========================================================= */
.gloam-landing-page { background: var(--gray-bg); }
.gloam-landing-btn {background: var(--pink);}
.cs-tag-gloam-landing {background: var(--pink);}
.cs-gloam-landing-label span {border-left: 2px solid var(--pink); color: var(--pink);}

.cs-funnel { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cs-funnel img {width: 628px;}

/* product framing cards */
.cs-framing { flex: 1; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.cs-framing-no {padding-top: 16px;}
.cs-card-grid { display: flex; gap: 16px; width: 100%; align-items: stretch; }
.cs-card { flex: 1; border-radius: 8px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.cs-card-pink { background: var(--pink-soft); }
.cs-card-white { background: var(--white); }
.cs-card-icon { width: 32px; height: 32px; }
.cs-card-title { font-family: var(--ff-sans); font-weight: 500; font-size: 1rem; margin: 0; }
.cs-card-text { font-family: var(--ff-sans); font-style: italic; font-size: .875rem; font-weight: 300; line-height: 1.6; margin: 0; }
.cs-card-text b { font-weight: 500; }

/* ux list */
.cs-ux-list { margin: 0 0 16px; padding-left: 22px; list-style: disc; font-family: var(--ff-sans); }
.cs-ux-list li { margin-bottom: 4px; }
.cs-ux-para { margin: 0; font-family: var(--ff-sans); }
.cs-ux-img>div {display: flex; gap: 24px; justify-content: center;}
.cs-ux-img-main {width: 553px;}
.cs-ux-img-mobile {width: 145px;}

/* flowchart */
.cs-flowchart {flex-direction: column; align-items: center;}
.cs-flowchart img {width: 826px;}
.cs-flow-track { position: absolute; left: 0; right: 0; top: 70px; height: 10px; background: #e4e4e4; border-radius: 100px; }
.cs-flow-seg { position: absolute; top: 58px; height: 34px; border-radius: 100px; }
.cs-seg1 { left: 5%; width: 32%; background: rgba(255,121,177,.2); }
.cs-seg2 { left: 37%; width: 15%; background: rgba(255,121,177,.5); }
.cs-seg2.cs-dashed { border: 1px dashed rgba(255,121,177,.75); }
.cs-seg3 { left: 52%; width: 12%; background: rgba(255,121,177,.75); }
.cs-flow-dot { position: absolute; top: 70px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
.cs-dot1 { left: 4%; } .cs-dot2 { left: 23%; } .cs-dot3 { left: 37%; } .cs-dot4 { left: 52%; } .cs-dot5 { left: 75%; }
.cs-flow-label { position: absolute; top: 100px; font-family: var(--ff-sans); font-size: .8125rem; text-align: center; width: 100px; transform: translateX(-50%); }
.cs-label1 { left: 4%; } .cs-label2 { left: 23%; } .cs-label3 { left: 37%; } .cs-label4 { left: 52%; } .cs-label5 { left: 75%; }
.cs-flow-time { position: absolute; top: 0; font-family: var(--ff-sans); font-size: 1.125rem; transform: translateX(-50%); }
.cs-time1 { left: 12%; } .cs-time2 { left: 74%; }
.cs-flow-feedback { position: absolute; top: 64px; left: 44%; font-family: var(--ff-sans); font-size: .625rem; font-weight: 300; width: 60px; text-align: center; }

/* before/after mockups */
.cs-mockups { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cs-mockup-item { display: flex; flex-direction: column; align-items: center; width: 320px; }
.cs-mockup-item img { width: 100%; padding: 40px 0 12px; border-radius: 4px; }
.flowchart-btn { border-radius: 100px; width: 160px; padding: 12px 0; font-family: var(--ff-sans); font-size: .875rem; cursor: default; border: 2px solid var(--pink); background: var(--white); color: var(--pink); }
.flowchart-btn-filled { background: var(--pink); color: #fff; }
.flowchart-btn-group { display: flex; gap: 8px; }
.cs-mockup-tag { border-radius: 100px; padding: 3px 10px; font-family: var(--ff-sans); font-size: .75rem; letter-spacing: -0.6px; }
.cs-tag-before { background: #dfdfdf; color: #808080; }
.cs-tag-iter { background: #00ca9e; color: #bff4e9; }
.cs-tag-after { background: #bff4e9; color: #00ca9e; }

.cs-mockup-caption { max-width: 360px; font-family: var(--ff-sans); font-size: .75rem; color: var(--text-mid);padding-top: 8px; margin: 0; text-align: center;}
.cs-mockup-caption b { font-weight: 600; }
.cs-mockup-caption i { font-style: italic; }

.cs-flowchart-text {margin-left: 190px;}
.cs-flowchart-des {display: flex; flex-direction: column; gap: 80px;}

.cs-funnel-quote {margin-top: -80px; font-family: var(--ff-sans); font-style: italic; font-weight: 300; font-size: 1.2rem; text-align: center;}
.cs-pink-text { color: var(--pink); }

.cs-closing-text { font-family: var(--ff-sans); font-weight: 300; font-size: 1rem; line-height: 1.6; margin: 0 auto; max-width: 900px; text-align: center; }

@media (max-width: 767px) {
  .cs-head-in {gap: 48px; padding: 80px 24px;}
  .cs-head-subtitle {margin: 0 0 16px;}

  .cs-body {padding: 80px 24px; gap: 120px;}
  .cs-row { flex-direction: column; gap: 8px;}
  .cs-row-label {flex: 0;}
  .cs-card-grid { flex-direction: column; }
  .cs-head-title { font-size: 2rem; }
  .cs-meta-row { justify-content: flex-start; }
  .cs-mockup-tags { gap: 24px; }
  .cs-ux-img>div {flex-direction: column; align-items: center;}
  .cs-flowchart {display: none;}
  .cs-flowchart-text {margin-left: 0;}
  .cs-flowchart-des {gap: 32px;}
}

@media (max-width: 479px) {
  .cs-head-in {gap: 24px; padding: 80px 16px;}
  .cs-btn {padding: 8px 12px;}
  .cs-meta-row {gap: 16px;}
  .cs-meta-col {padding: 0;}
  .cs-highlights {padding-top: 24px;}

  .cs-body {gap: 40px; padding: 56px 16px;}
  .cs-img {margin-top: -32px;}
  .cs-funnel-quote {margin-top: -24px;}
  .cs-framing {gap: 8px;}
  .cs-card {padding: 12px; gap: 4px;}
  .cs-flowchart-des {gap: 8px;}
}