@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root{
 --gold:#FFC13B;--gold-deep:#E8A21D;--gold-bg:#FDF5E2;--gold-border:#FDE4AF;
 --green:#3AC573;--green-deep:#0F5A30;--green-bg:#E8F7EE;--green-border:#C1EBD2;
 --orange:#FF6A1F;--orange-deep:#D94E0B;--orange-bg:#FDEBE2;--orange-border:#FDC9AF;
 --paper:#FBF8F1;--white:#fff;--ink:#1A1A1A;--body:#333;--muted:#6E6C66;--line:#E8E6E0;--outline:#262626;
 --error:#E0472C;--font:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
 --shadow-sm:0 1px 2px rgba(26,26,26,.06),0 1px 1px rgba(26,26,26,.04);
 --shadow-md:0 4px 12px rgba(26,26,26,.08),0 1px 2px rgba(26,26,26,.04);
 --shadow-lg:0 20px 60px rgba(26,26,26,.18),0 4px 14px rgba(26,26,26,.08);
 --focus:0 0 0 3px rgba(232,162,29,.35);
 --ink-300:#C6C4BD;--ink-700:#4A4A47;
 --duration-fast:.16s;--ease-standard:cubic-bezier(.2,.8,.2,1);
 --max:980px;--gutter:32px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{max-width:100%;display:block}
.container{width:min(calc(100% - var(--gutter)*2),var(--max));margin-inline:auto}
.reading{width:min(calc(100% - var(--gutter)*2),760px);margin-inline:auto}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-size:20px;line-height:1}

/* header */
.site-header{height:92px;display:flex;align-items:center;background:#fff}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{display:inline-flex;align-items:center}
.logo img{display:block;width:186px;height:auto}
.nav-links{display:flex;gap:38px;align-items:center;font-size:14px;font-weight:600}
.nav-links a{padding:7px 0;position:relative}
.nav-links a.active{color:var(--orange-deep)}
.nav-links a.active:after{content:"";position:absolute;height:2px;background:var(--orange);left:0;right:0;bottom:1px}
.menu-btn{display:none;border:0;background:transparent;width:44px;height:44px;align-items:center;justify-content:center}

/* shared */
.page-main{min-height:calc(100vh - 92px)}
.kicker{font-size:14px;font-weight:600;color:var(--gold-deep);margin-bottom:8px}
h1,h2,h3{color:var(--ink);margin:0;letter-spacing:-.015em}
h1{font-size:32px;line-height:1.3;font-weight:800}
h2{font-size:24px;line-height:1.35;font-weight:700}
h3{font-size:18px;line-height:1.4;font-weight:700}
.lead{font-size:17px;line-height:1.65;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;font-size:14px;transition:.18s cubic-bezier(.2,.8,.2,1)}
.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-secondary{background:#fff;border-color:var(--outline)}.btn-secondary:hover{background:var(--paper)}
.placeholder{position:relative;background:
 linear-gradient(45deg,#f1f1f1 25%,transparent 25%) 0 0/20px 20px,
 linear-gradient(45deg,transparent 75%,#f1f1f1 75%) 0 0/20px 20px,
 linear-gradient(45deg,transparent 75%,#f1f1f1 75%) 10px -10px/20px 20px,
 linear-gradient(45deg,#f1f1f1 25%,#fff 25%) 10px -10px/20px 20px;
border:1px solid var(--line)}
.placeholder:after{content:"IMAGE";position:absolute;inset:0;display:grid;place-items:center;color:#aaa;font-size:11px;font-weight:700;letter-spacing:.12em}
.site-footer{padding:32px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line);background:#fff}

/* home */
.hero{padding:78px 0 66px;text-align:center}
.hero-copy{max-width:760px;margin:0 auto}
.hero h1{font-size:48px;line-height:1.15;max-width:720px;margin:auto;font-style:italic}
.hero .lead{max-width:650px;margin:20px auto 0}
.hero-art{width:420px;height:250px;margin:50px auto 0;border-radius:var(--radius-lg)}
.meaning{max-width:780px;margin:0 auto;padding:28px 0;border-top:1px solid var(--outline);border-bottom:1px solid var(--outline);text-align:left}
.meaning h3{font-size:16px;text-transform:uppercase}
.meaning h3 em{font-style:normal;color:var(--orange)}
.meaning p{font-size:14px;color:var(--muted);margin:12px 0 6px}
.meaning a{font-size:14px;font-weight:600}
.starter{margin-top:64px;background:var(--gold);padding:72px 0 88px;text-align:center}
.starter h2{font-size:34px;margin-top:6px}
.starter .intro{max-width:570px;margin:22px auto 38px}
.starter-card{max-width:780px;margin:auto;background:#fff;border:1.5px solid var(--outline);border-radius:var(--radius-sm);box-shadow:6px 7px 0 var(--outline);display:grid;grid-template-columns:.9fr 1.1fr;text-align:left;overflow:hidden}
.starter-visual{min-height:260px;border:0;border-right:1px solid var(--line)}
.starter-copy{padding:42px 38px}
.starter-copy h3{font-size:21px}.starter-copy h3 span{color:var(--orange)}
.checks{list-style:none;padding:0;margin:18px 0 24px;color:var(--muted);font-size:14px}.checks li:before{content:"✓";font-weight:800;color:var(--ink);margin-right:8px}

/* about */
.about-top{padding:74px 0 62px}
.about-intro{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.about-intro p{max-width:520px;color:var(--muted)}
.about-art{height:250px;border-radius:var(--radius-lg)}
.offer{padding-top:54px}
.offer>p{color:var(--muted);max-width:850px}
.offer-list{margin-top:28px;border-top:1px solid var(--outline)}
.offer-row{display:grid;grid-template-columns:50px 1fr 48px;gap:18px;align-items:center;padding:28px 14px;border-bottom:1px solid var(--outline)}
.offer-num{font-weight:800}.offer-row p{font-size:14px;color:var(--muted);margin:5px 0 0}.offer-icon{width:40px;height:40px;border-radius:50%;background:var(--gold-bg);display:grid;place-items:center}
.crew{background:var(--gold);padding:72px 0 88px}
.crew-head{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:end;margin-bottom:36px}
.crew-head h2{font-size:34px}.crew-head p{margin:0;color:#5d512f}
.crew-list{display:grid;gap:20px}
.crew-card{background:#fff;border:1.5px solid var(--outline);box-shadow:5px 5px 0 var(--outline);border-radius:var(--radius-sm);display:grid;grid-template-columns:1fr 250px;overflow:hidden}
.crew-copy{padding:28px 30px}.crew-copy h3{font-size:24px}.crew-copy .role{font-weight:600;font-style:italic;margin:7px 0 14px}.crew-copy .role span{color:var(--orange)}
.crew-copy p{font-size:14px;color:var(--muted);margin:0}.crew-art{min-height:180px;border:0;border-left:1px solid var(--line)}
.crew-card:nth-child(1) .crew-art{background-color:var(--gold-bg)}
.crew-card:nth-child(2) .crew-art{background-color:var(--green-bg)}
.crew-card:nth-child(3) .crew-art{background-color:#FBE7EF}

/* blog */
.blog-page{background:var(--paper);padding:90px 0 110px}
.blog-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:26px 0 44px}
.blog-controls .filters{margin:0}
.blog-search-wrap{flex:0 0 auto;width:280px;max-width:100%}
.blog-search-input{height:44px}
.post-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.post-tags{display:flex;gap:6px;flex-wrap:wrap}
.post-date{font-size:13px;color:var(--muted);white-space:nowrap;margin-top:2px}
.blog-page h1{font-size:40px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 44px}
.filter{height:36px;padding:0 15px;border:1px solid #bbb;background:transparent;border-radius:999px;font-size:13px;cursor:pointer}
.filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.post-list{border-top:1px solid var(--outline)}
.post-card{display:grid;grid-template-columns:1fr 200px;gap:30px;padding:24px 18px;border-bottom:1px solid var(--outline);background:#fff}
.post-card:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post-tag{display:inline-flex;background:#eee;padding:3px 8px;font-size:11px;font-weight:600;margin-bottom:9px}
.post-card h2{font-size:18px}.post-card p{font-size:14px;line-height:1.45;color:#9A9891;margin:8px 0 0}
.post-thumb{aspect-ratio:4/3}

/* contact */
.contact-page{padding:115px 0 140px}
.contact-wrap{max-width:760px;margin:auto}
.contact-page h1{font-size:48px}
.contact-page .lead{margin:28px 0 40px;max-width:520px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.contact-block h2{font-size:20px;margin-bottom:8px}
.contact-block p,.contact-block a{color:var(--muted)}
.socials{display:flex;gap:12px;margin-top:10px}
.social{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-weight:800;background:#fff}
.social:hover{border-color:var(--gold-deep);background:var(--gold-bg)}

@media(max-width:768px){
 :root{--gutter:20px}
 .site-header{height:72px;position:relative}.logo img{width:154px}
 .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);padding:8px var(--gutter) 16px;z-index:200}
 .nav-links.is-open{display:flex}
 .nav-links a{width:100%;padding:12px 0}
 .menu-btn{display:flex}
 .hero{padding:54px 0}.hero h1{font-size:36px}.hero-art{width:min(100%,360px);height:210px;margin-top:36px}
 .meaning{padding:24px 0}
 .starter{margin-top:48px;padding:52px 0 64px}.starter h2{font-size:28px}.starter-card{grid-template-columns:1fr}.starter-visual{border-right:0;border-bottom:1px solid var(--line);min-height:220px}.starter-copy{padding:28px 24px}
 .about-top{padding:50px 0}.about-intro{grid-template-columns:1fr;gap:28px}.about-art{height:220px}.offer{padding-top:38px}.offer-row{grid-template-columns:38px 1fr}.offer-icon{display:none}
 .crew{padding:52px 0 66px}.crew-head{grid-template-columns:1fr;gap:14px}.crew-head h2{font-size:28px}.crew-card{grid-template-columns:1fr}.crew-art{order:-1;min-height:190px;border-left:0;border-bottom:1px solid var(--line)}
 .blog-page{padding:58px 0 80px;background:#ffffff}.blog-page h1{font-size:34px}.blog-controls{flex-direction:column;align-items:stretch;margin-bottom:30px}.blog-search-wrap{width:100%}.post-card{grid-template-columns:1fr;gap:20px;padding:20px 0 40px;background:transparent}.post-thumb{order:-1;aspect-ratio:16/9}
 .contact-page{padding:70px 0 90px}.contact-page h1{font-size:38px}.contact-grid{grid-template-columns:1fr;gap:36px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* Contact follows the same 980px content container as About / Blog. */
.contact-wrap{
  max-width:none;
  width:100%;
  margin:0;
}

/* v4: Super Salad fully withdrawn; return crew names to v1 typography. */
.crew-copy h3{
  font-family:var(--font);
  font-size:24px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:-.015em;
}

/* Production images supplied for the home page. */
.hero-art{
  width:420px;
  height:auto;
  margin:50px auto 0;
  border-radius:0;
}
.hero-copy-wrap{
  position:relative;
  max-width:980px;
  margin:0 auto;
}
.hero-background-art{
  position:absolute;
  width:980px;
  max-width:100%;
  left:50%;
  top:-58px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
}
.hero-copy,
.hero-art{
  position:relative;
  z-index:1;
}
.starter-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:#fff;
}
.starter-visual img{
  width:100%;
  height:auto;
  object-fit:contain;
}
@media(max-width:768px){
  .hero-background-art{top:-28px}
  .hero-art{width:min(100%,360px);height:auto;margin-top:36px}
  .starter-visual{min-height:auto;padding:20px}
}


/* v5: more breathing room below the main character artwork */
.meaning{
  margin-top:48px;
}
@media(max-width:768px){
  .meaning{margin-top:36px}
}


/* v6 homepage refinements based on the supplied wireframe */
.hero-background-art{
  top:-92px;
}

.meaning h3{
  font-weight:800;
}

.starter .kicker{
  font-size:18px;
  line-height:1.4;
  font-weight:500;
}

.starter h2{
  font-size:42px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
}

@media(max-width:768px){
  .hero-background-art{
    top:-52px;
  }

  .starter .kicker{
    font-size:16px;
  }

  .starter h2{
    font-size:32px;
  }
}


/* v8 supplied About + social artwork */
.about-art{
  height:auto;
  display:flex;
  justify-content:center;
  align-items:center;
}
.about-art img{
  width:min(100%,360px);
  height:auto;
  object-fit:contain;
}

.offer-icon{
  width:44px;
  height:44px;
  border-radius:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.offer-icon img{
  width:40px;
  height:40px;
  object-fit:contain;
}

.crew-art{
  min-height:180px;
  border-left:1px solid var(--line);
  overflow:hidden;
}
.crew-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.crew-card:nth-child(1) .crew-art,
.crew-card:nth-child(2) .crew-art,
.crew-card:nth-child(3) .crew-art{
  background:none;
}

.socials{
  align-items:center;
}
.social.social-image{
  width:38px;
  height:38px;
  border:none;
  border-radius:0;
  background:transparent;
  padding:3px;
}
.social.social-image:hover{
  border:none;
  background:transparent;
  transform:translateY(-1px);
}
.social.social-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

@media(max-width:768px){
  .about-art img{width:min(100%,320px)}
  .crew-art{min-height:220px;border-left:0;border-bottom:1px solid var(--line)}
}


/* v9 layout polish */

/* 1) About us offer icons: approved 80px size */
.offer-icon{
  width:80px;
  height:80px;
}
.offer-icon img{
  width:80px;
  height:80px;
}

/* Keep offer rows balanced with larger icons */
.offer-row{
  grid-template-columns:50px 1fr 80px;
  gap:24px;
  padding-top:26px;
  padding-bottom:26px;
}

/* 2) Unified page titles */
.about-top h1,
.blog-page h1,
.contact-page h1{
  font-size:40px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
}

/* 3) Blog pagination: more breathing room + cleaner visual */
.pagination[hidden]{display:none}
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:56px;
  padding-top:28px;
  border-top:1px solid var(--line);
}

.page-link{
  min-width:40px;
  height:40px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(26,26,26,.03);
  transition:
    background .18s cubic-bezier(.2,.8,.2,1),
    border-color .18s cubic-bezier(.2,.8,.2,1),
    color .18s cubic-bezier(.2,.8,.2,1),
    transform .18s cubic-bezier(.2,.8,.2,1);
}

.page-link:hover{
  border-color:var(--gold-deep);
  background:var(--gold-bg);
  transform:translateY(-1px);
}

.page-link.active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  box-shadow:none;
}

.page-link[aria-disabled="true"]{
  color:#c6c4bd;
  background:#f7f6f3;
  border-color:#eceae5;
  pointer-events:none;
  box-shadow:none;
}

.page-link .material-symbols-outlined{
  font-size:18px;
}

.page-ellipsis{
  min-width:28px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  line-height:40px;
}

@media(max-width:768px){
  .offer-row{
    grid-template-columns:38px 1fr;
  }
  .offer-icon{
    display:none;
  }

  .about-top h1,
  .blog-page h1,
  .contact-page h1{
    font-size:34px;
  }

  .pagination{
    margin-top:40px;
    padding-top:22px;
    gap:6px;
  }
  .page-link{
    min-width:36px;
    height:36px;
    padding:0 9px;
  }
  .page-ellipsis{
    line-height:36px;
  }
}


/* v10 responsive consistency */

/* 1) Hero decorative background:
   Keep at its intended desktop size; once the viewport can no longer fit it,
   hide it instead of scaling it down. */
.hero-background-art{
  width:980px;
  max-width:none;
}

@media(max-width:1044px){
  .hero-background-art{
    display:none;
  }
}

/* 2) Unified page-title start position */
.about-top,
.blog-page,
.contact-page{
  padding-top:72px;
}

@media(max-width:768px){
  .about-top,
  .blog-page,
  .contact-page{
    padding-top:48px;
  }
}


/* v11 responsive image + About refinements */
@media(max-width:768px){
  .starter-visual img{
    width:100%;
    max-width:240px;
    margin-inline:auto;
  }

  /* About offer icons are desktop/tablet decorative support only. */
  .offer-icon{
    display:none !important;
  }
}


/* v12 inner-page content width
   Home remains on the existing 980px system.
   About / Blog / Contact use 760px on desktop. */
.about-top > .container,
.crew > .container,
.blog-page > .container,
.contact-page > .container{
  width:min(calc(100% - var(--gutter)*2),760px);
}


/* v13 mobile crew image ratio */
@media(max-width:768px){
  .crew-art{
    aspect-ratio:3 / 2;
    min-height:0;
    height:auto;
    overflow:hidden;
  }

  .crew-art img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
}


/* v14 Korea Starter Guide modal */
body.modal-open{
  overflow:hidden;
}

.modal-backdrop[hidden]{
  display:none;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(26,26,26,.55);
  backdrop-filter:blur(2px);
}

.guide-modal{
  position:relative;
  width:min(100%,640px);
  max-height:calc(100dvh - 40px);
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

.modal-scroll{
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:38px 44px 42px;
}

.modal-close{
  position:absolute;
  z-index:2;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard);
}

.modal-close:hover{
  background:var(--gold-bg);
}

.modal-head{
  padding-right:32px;
  margin-bottom:32px;
}

.modal-head h2{
  font-size:24px;
  line-height:1.35;
  font-weight:700;
  margin:0 0 8px;
}

.modal-head p{
  max-width:500px;
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.guide-form{
  display:grid;
  gap:32px;
}

.form-section{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}

.field-label-lg,
.form-section legend{
  display:block;
  margin:0 0 12px;
  padding:0;
  color:var(--ink);
  font-size:16px;
  line-height:1.4;
  font-weight:700;
}

.guide-input{
  width:100%;
  height:52px;
  padding:0 18px;
  border:1.5px solid var(--outline);
  border-radius:var(--radius-md);
  background:var(--white);
  color:var(--ink);
  font-size:16px;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.guide-input::placeholder{
  color:var(--ink-300);
}

.guide-input:hover{
  border-color:var(--ink-700);
}

.guide-input:focus{
  outline:none;
  border-color:var(--gold-deep);
  box-shadow:var(--focus);
}

.choice-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
}

.choice-pill{
  position:relative;
  cursor:pointer;
}

.choice-pill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.choice-pill span{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border:1px solid var(--ink-300);
  border-radius:999px;
  background:var(--white);
  color:var(--ink-700);
  line-height:1;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.choice-pill:hover span{
  border-color:var(--ink-700);
}

.choice-pill input:checked + span{
  border-color:var(--gold-deep);
  background:var(--gold-bg);
  color:var(--ink);
}

.choice-pill input:focus-visible + span{
  box-shadow:var(--focus);
}

.legend-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
  margin-bottom:12px;
}

.legend-row legend{
  margin:0;
}

.helper-inline{
  color:var(--ink-300);
  font-size:13px;
}

.guide-checks{
  display:grid;
  gap:14px;
}

.guide-check{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.guide-check input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--ink);
}

.field-helper-lg{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.modal-submit{
  justify-self:start;
  min-height:50px;
  padding-inline:20px;
}

@media(max-width:680px){
  .modal-backdrop{
    padding:20px;
    align-items:center;
  }

  .guide-modal{
    width:100%;
    max-height:calc(100dvh - 40px);
    border-radius:var(--radius-lg);
  }

  .modal-scroll{
    max-height:calc(100dvh - 40px);
    padding:34px 24px 32px;
  }

  .modal-head{
    padding-right:28px;
    margin-bottom:28px;
  }

  .modal-head h2{
    font-size:22px;
  }

  .guide-form{
    gap:28px;
  }

  .choice-pills{
    gap:9px;
  }

  .choice-pill span{
    min-height:38px;
    padding-inline:12px;
    font-size:14px;
  }
}


/* v15 homepage redesign */
.home-container{width:min(calc(100% - 64px),1200px);margin-inline:auto}
.hero-v15{background:var(--paper);padding:76px 0 0;overflow:hidden}
.hero-grid{min-height:560px;display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
.hero-copy-v15{padding-bottom:56px}
.hero-copy-v15 h1{font-size:56px;line-height:1.12;font-weight:800;font-style:italic;letter-spacing:-.035em;margin:0;color:var(--ink)}
.hero-copy-v15 p{margin:28px 0;font-size:17px;line-height:1.55;color:var(--ink-700)}
.hero-cta{min-height:52px;padding:0 20px;border:1.5px solid var(--outline);background:var(--gold);color:var(--ink);font-weight:700;box-shadow:2px 2px 0 rgba(26,26,26,.12)}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(26,26,26,.12)}
.hero-visual-v15{position:relative;min-height:560px}
.visual-placeholder{display:grid;place-items:center;border:1.5px dashed rgba(26,26,26,.25);background:rgba(255,255,255,.42);color:rgba(26,26,26,.38);font-size:12px;font-weight:800;letter-spacing:.12em}
.visual-main{position:absolute;width:520px;aspect-ratio:1.45/1;right:76px;top:96px;border-radius:24px}
.sticker-placeholder{position:absolute;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:800;border:1.5px dashed rgba(26,26,26,.3);background:rgba(255,255,255,.45);color:rgba(26,26,26,.45);transform:rotate(var(--rot,0deg));transition:transform .22s var(--ease-standard)}
.sticker-placeholder:hover{transform:rotate(var(--rot,0deg)) translateY(-6px) scale(1.03)}
.sticker-1{--rot:8deg;width:112px;height:72px;left:62px;top:28px;border-radius:50%}
.sticker-2{--rot:-10deg;width:88px;height:98px;right:10px;top:12px;border-radius:28px}
.sticker-3{--rot:10deg;width:170px;height:56px;left:152px;bottom:26px;border-radius:12px}
.sticker-4{--rot:-8deg;width:108px;height:108px;right:82px;bottom:10px;border-radius:50%}
.meaning-band-v15{background:#FFD064;padding:44px 0 42px}
.meaning-copy-v15{max-width:760px}
.meaning-copy-v15 h2{font-size:18px;line-height:1.35;font-weight:800;margin:0 0 14px}
.meaning-copy-v15 h2 span{color:#F36A42}
.meaning-copy-v15 p{margin:0 0 10px;color:#473D2B;font-size:15px;line-height:1.45}
.meaning-copy-v15 a{font-size:14px;font-weight:600}
.starter-v15{background:#0E6137;color:#fff;padding:76px 0 86px}
.starter-heading-v15{text-align:center}
.starter-kicker-v15{margin:0 0 6px;font-size:18px;color:#fff}
.starter-heading-v15 h2{margin:0;color:#fff;font-size:38px;line-height:1.2;font-weight:800;font-style:italic;letter-spacing:-.025em}
.starter-heading-v15>p:last-child{margin:24px 0 40px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.9)}
.starter-card-v15{max-width:980px;min-height:330px;margin:0 auto;display:grid;grid-template-columns:.78fr 1.22fr;background:#fff;color:var(--ink);border:1.5px solid var(--outline);border-radius:14px;overflow:hidden;box-shadow:8px 8px 0 #0A2E1F}
.starter-image-v15{min-height:330px;border:0;border-right:1px solid var(--line);background:#fff}
.starter-copy-v15{padding:62px 54px}
.starter-copy-v15 h3{margin:0 0 20px;font-size:21px;line-height:1.3;font-weight:800;color:#0E6137}
.starter-copy-v15 ul{list-style:none;padding:0;margin:0 0 24px;color:var(--ink-500);font-size:14px;line-height:1.55}
.starter-copy-v15 li::before{content:"✓";margin-right:8px;color:var(--ink);font-weight:800}
.reveal-item{opacity:0;transform:translateY(20px);transition:opacity .62s var(--ease-standard),transform .62s var(--ease-standard)}
.reveal-item.is-visible{opacity:1;transform:translateY(0)}
.hero-visual-v15 .reveal-item:nth-child(2){transition-delay:.08s}.hero-visual-v15 .reveal-item:nth-child(3){transition-delay:.16s}.hero-visual-v15 .reveal-item:nth-child(4){transition-delay:.24s}.hero-visual-v15 .reveal-item:nth-child(5){transition-delay:.32s}
@media(max-width:1040px){
 .home-container{width:min(calc(100% - 48px),1200px)}
 .hero-grid{grid-template-columns:1fr;gap:10px;padding-bottom:54px}
 .hero-copy-v15{text-align:center;padding-bottom:0}
 .hero-visual-v15{min-height:430px}
 .visual-main{left:50%;right:auto;transform:translateX(-50%);top:76px;width:min(520px,70vw)}
 .sticker-1{left:10%;top:14px}.sticker-2{right:8%;top:24px}.sticker-3{left:20%;bottom:12px}.sticker-4{right:17%;bottom:0}
}
@media(max-width:768px){
 .home-container{width:calc(100% - 40px)}
 .hero-v15{padding-top:48px}
 .hero-grid{min-height:auto;padding-bottom:46px}
 .hero-copy-v15 h1{font-size:40px}
 .hero-copy-v15 p{font-size:15px}
 .hero-visual-v15{min-height:320px}
 .visual-main{width:min(320px,78vw);top:56px}
 .sticker-1{width:78px;height:52px;left:5%}.sticker-2{width:62px;height:72px;right:2%}.sticker-3{width:124px;height:44px;left:10%}.sticker-4{width:78px;height:78px;right:9%}
 .meaning-band-v15{padding:34px 0}
 .starter-v15{padding:56px 0 64px}
 .starter-heading-v15 h2{font-size:30px}
 .starter-card-v15{grid-template-columns:1fr;max-width:560px}
 .starter-image-v15{min-height:230px;border-right:0;border-bottom:1px solid var(--line)}
 .starter-copy-v15{padding:30px 26px 34px}
}
@media(max-width:520px){
 .hero-copy-v15 h1{font-size:34px}
 .hero-copy-v15 p br,.meaning-copy-v15 p br,.starter-heading-v15>p:last-child br{display:none}
 .hero-visual-v15{min-height:270px}
 .visual-main{width:260px}
 .sticker-3,.sticker-4{display:none}
}


/* v16 supplied homepage artwork */
.visual-main{
  border:0;
  background:transparent;
}
.visual-main img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.sticker-art{
  position:absolute;
  z-index:2;
  display:block;
  transform:rotate(var(--rot,0deg));
  transition:transform .22s var(--ease-standard);
}
.sticker-art:hover{
  transform:rotate(var(--rot,0deg)) translateY(-6px) scale(1.04);
}
.sticker-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.starter-image-v15{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
}
.starter-image-v15 img{
  width:100%;
  max-width:390px;
  height:auto;
  display:block;
  object-fit:contain;
}

@media(max-width:768px){
  .starter-image-v15{
    min-height:260px;
    padding:28px 20px;
  }
  .starter-image-v15 img{
    max-width:240px;
  }
}


/* =========================================================
   v17 HOMEPAGE REBUILD — 1920 reference / 1200 max system
   ========================================================= */

/* Header alignment on all pages */
.site-header .container{
  width:min(calc(100% - 64px),1200px);
  max-width:1200px;
}

/* Home uses a true 1200px design canvas. */
.home-container{
  width:min(calc(100% - 64px),1200px);
  max-width:1200px;
  margin-inline:auto;
}

/* ---------- HERO ---------- */
.hero-v15{
  background:var(--paper);
  padding:64px 0 0;
  min-height:520px;
  overflow:hidden;
}

.hero-grid{
  min-height:456px;
  display:grid;
  grid-template-columns:500px 1fr;
  column-gap:72px;
  align-items:center;
}

.hero-copy-v15{
  align-self:center;
  padding:0 0 42px;
  text-align:left;
}

.hero-copy-v15 h1{
  margin:0;
  max-width:500px;
  color:var(--ink);
  font-size:58px;
  line-height:1.08;
  font-weight:800;
  font-style:italic;
  letter-spacing:-0.045em;
}

.hero-copy-v15 p{
  margin:30px 0 30px;
  max-width:430px;
  color:var(--ink-700);
  font-size:16px;
  line-height:1.45;
}

.hero-cta{
  min-height:54px;
  padding:0 21px;
  border:1.5px solid var(--outline);
  border-radius:6px;
  background:var(--gold);
  color:var(--ink);
  font-size:14px;
  font-weight:700;
  box-shadow:none;
}
.hero-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 7px 18px rgba(26,26,26,.12);
}

.hero-visual-v15{
  position:relative;
  min-height:456px;
}

/* Character image closely follows the supplied composition. */
.visual-main{
  position:absolute;
  width:520px;
  height:auto;
  aspect-ratio:auto;
  right:72px;
  top:50px;
  border:0;
  background:transparent;
}
.visual-main img{
  width:100%;
  height:auto;
  object-fit:contain;
}

/* Sticker placement + final sizes */
.sticker-art{
  position:absolute;
  z-index:3;
  display:block;
  transform-origin:center center;
}
.sticker-art img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.sticker-1{
  width:116px;
  height:auto;
  left:52px;
  top:8px;
  transform:rotate(8deg);
}
.sticker-3{
  width:190px;
  height:auto;
  left:145px;
  bottom:4px;
  transform:rotate(12deg);
}
.sticker-4{
  width:120px;
  height:auto;
  right:64px;
  bottom:8px;
  transform:rotate(-10deg);
}

/* ---------- FALLING STICKER INTERACTION ---------- */
@keyframes rpStickerDrop1{
  0%   {opacity:0; transform:translateY(-150px) rotate(-18deg) scale(.9)}
  66%  {opacity:1; transform:translateY(12px) rotate(12deg) scale(1.02)}
  84%  {transform:translateY(-5px) rotate(6deg) scale(.99)}
  100% {opacity:1; transform:translateY(0) rotate(8deg) scale(1)}
}
@keyframes rpStickerDrop2{
  0%   {opacity:0; transform:translateY(-180px) rotate(-8deg) scale(.9)}
  66%  {opacity:1; transform:translateY(14px) rotate(16deg) scale(1.02)}
  84%  {transform:translateY(-4px) rotate(10deg) scale(.99)}
  100% {opacity:1; transform:translateY(0) rotate(12deg) scale(1)}
}
@keyframes rpStickerDrop3{
  0%   {opacity:0; transform:translateY(-170px) rotate(8deg) scale(.9)}
  66%  {opacity:1; transform:translateY(12px) rotate(-14deg) scale(1.02)}
  84%  {transform:translateY(-5px) rotate(-8deg) scale(.99)}
  100% {opacity:1; transform:translateY(0) rotate(-10deg) scale(1)}
}
.sticker-drop{
  opacity:0;
  will-change:transform,opacity;
}
.sticker-drop-1{animation:rpStickerDrop1 .85s cubic-bezier(.2,.82,.2,1) .45s forwards}
.sticker-drop-2{animation:rpStickerDrop2 .95s cubic-bezier(.2,.82,.2,1) .68s forwards}
.sticker-drop-3{animation:rpStickerDrop3 .9s cubic-bezier(.2,.82,.2,1) .88s forwards}

.sticker-drop:hover{
  filter:drop-shadow(0 8px 8px rgba(26,26,26,.12));
}

/* ---------- MEANING BAND ---------- */
.meaning-band-v15{
  background:#FFD064;
  padding:42px 0 38px;
}
.meaning-copy-v15{
  max-width:780px;
}
.meaning-copy-v15 h2{
  margin:0 0 14px;
  color:var(--ink);
  font-size:18px;
  line-height:1.3;
  font-weight:800;
}
.meaning-copy-v15 h2 span{color:#F36A42}
.meaning-copy-v15 p{
  margin:0 0 12px;
  color:#473D2B;
  font-size:15px;
  line-height:1.45;
}
.meaning-copy-v15 a{
  color:var(--ink);
  font-size:14px;
  font-weight:600;
}

/* ---------- STARTER SECTION ---------- */
.starter-v15{
  background:#0D6338;
  color:#fff;
  padding:72px 0 86px;
}
.starter-heading-v15{
  text-align:center;
}
.starter-kicker-v15{
  margin:0 0 8px;
  color:#fff;
  font-size:18px;
  line-height:1.4;
  font-weight:400;
}
.starter-heading-v15 h2{
  margin:0;
  color:#fff;
  font-size:40px;
  line-height:1.18;
  font-style:italic;
  font-weight:800;
  letter-spacing:-.03em;
}
.starter-heading-v15>p:last-child{
  margin:26px 0 42px;
  color:rgba(255,255,255,.92);
  font-size:15px;
  line-height:1.5;
}

.starter-card-v15{
  width:100%;
  max-width:1000px;
  min-height:326px;
  margin:0 auto;
  display:grid;
  grid-template-columns:44% 56%;
  overflow:hidden;
  background:#fff;
  color:var(--ink);
  border:1.5px solid var(--outline);
  border-radius:14px;
  box-shadow:8px 8px 0 #092E1F;
}
.starter-image-v15{
  min-height:326px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 32px;
  border-right:1px solid var(--line);
  background:#fff;
}
.starter-image-v15 img{
  width:100%;
  max-width:410px;
  height:auto;
  object-fit:contain;
}
.starter-copy-v15{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:44px 54px;
}
.starter-copy-v15 h3{
  margin:0 0 18px;
  color:#0D6338;
  font-size:22px;
  line-height:1.25;
  font-weight:800;
}
.starter-copy-v15 ul{
  margin:0 0 24px;
  padding:0;
  list-style:none;
  color:var(--ink-500);
  font-size:14px;
  line-height:1.6;
}
.starter-copy-v15 li::before{
  content:"✓";
  margin-right:8px;
  color:var(--ink);
  font-weight:800;
}

/* Reveal remains subtle; stickers use their own drop sequence. */
.reveal-item{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s var(--ease-standard),transform .55s var(--ease-standard);
}
.reveal-item.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1264px){
  .site-header .container,
  .home-container{
    width:calc(100% - 48px);
  }
}

@media(max-width:1040px){
  .hero-v15{
    padding-top:52px;
  }
  .hero-grid{
    min-height:auto;
    grid-template-columns:1fr;
    row-gap:26px;
    padding-bottom:50px;
  }
  .hero-copy-v15{
    text-align:center;
    padding-bottom:0;
  }
  .hero-copy-v15 h1,
  .hero-copy-v15 p{
    margin-inline:auto;
  }
  .hero-visual-v15{
    min-height:410px;
  }
  .visual-main{
    width:min(500px,68vw);
    left:50%;
    right:auto;
    top:42px;
    transform:translateX(-50%);
  }
  .sticker-1{left:9%;top:2px}
  .sticker-3{left:18%;bottom:2px}
  .sticker-4{right:14%;bottom:6px}
}

@media(max-width:768px){
  .site-header .container,
  .home-container{
    width:calc(100% - 40px);
  }

  .hero-copy-v15 h1{
    font-size:40px;
    line-height:1.1;
  }
  .hero-copy-v15 p{
    font-size:15px;
  }
  .hero-visual-v15{
    min-height:300px;
  }
  .visual-main{
    width:min(330px,76vw);
    top:42px;
  }
  .sticker-1{
    width:82px;
    left:3%;
  }
  .sticker-3{
    width:132px;
    left:9%;
  }
  .sticker-4{
    width:86px;
    right:5%;
  }

  .meaning-band-v15{
    padding:34px 0;
  }

  .starter-v15{
    padding:56px 0 64px;
  }
  .starter-heading-v15 h2{
    font-size:30px;
  }
  .starter-card-v15{
    grid-template-columns:1fr;
    max-width:560px;
  }
  .starter-image-v15{
    min-height:auto;
    padding:28px 20px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .starter-image-v15 img{
    max-width:240px;
  }
  .starter-copy-v15{
    padding:30px 26px 34px;
  }
}

@media(max-width:520px){
  .hero-copy-v15 h1{
    font-size:34px;
  }
  .hero-copy-v15 p br,
  .meaning-copy-v15 p br,
  .starter-heading-v15>p:last-child br{
    display:none;
  }
  .hero-visual-v15{
    min-height:260px;
  }
  .visual-main{
    width:255px;
  }
  .sticker-3,
  .sticker-4{
    display:none;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .sticker-drop{
    opacity:1!important;
    animation:none!important;
  }
}


/* =========================================================
   v18 HERO TUNING
   - character artwork width = 442px
   - sticker 02 + 03 overlap
   - softer, more natural drop motion
   ========================================================= */

/* Character image: requested fixed desktop width */
.visual-main{
  width:442px;
  right:98px;
  top:64px;
}

/* Recompose the two lower stickers so they overlap like the reference.
   In markup these are sticker-3 = REAL LIFE IN KOREA,
   sticker-4 = CULTURE & TRENDS. */
.sticker-3{
  width:184px;
  left:auto;
  right:118px;
  bottom:5px;
  z-index:5;
  transform:rotate(11deg);
}

.sticker-4{
  width:116px;
  right:52px;
  bottom:28px;
  z-index:4;
  transform:rotate(-11deg);
}

/* Replace the previous exaggerated bounce with a short gravity-like landing.
   Only a slight overshoot on Y and rotation. */
@keyframes rpStickerDropSoft1{
  0%   {opacity:0; transform:translateY(-58px) rotate(2deg) scale(.98)}
  72%  {opacity:1; transform:translateY(4px) rotate(9deg) scale(1)}
  100% {opacity:1; transform:translateY(0) rotate(8deg) scale(1)}
}
@keyframes rpStickerDropSoft2{
  0%   {opacity:0; transform:translateY(-70px) rotate(5deg) scale(.98)}
  72%  {opacity:1; transform:translateY(5px) rotate(12deg) scale(1)}
  100% {opacity:1; transform:translateY(0) rotate(11deg) scale(1)}
}
@keyframes rpStickerDropSoft3{
  0%   {opacity:0; transform:translateY(-64px) rotate(-4deg) scale(.98)}
  72%  {opacity:1; transform:translateY(5px) rotate(-12deg) scale(1)}
  100% {opacity:1; transform:translateY(0) rotate(-11deg) scale(1)}
}

/* Override old animation definitions */
.sticker-drop{
  opacity:0;
  will-change:transform,opacity;
}
.sticker-drop-1{
  animation:rpStickerDropSoft1 .62s cubic-bezier(.20,.75,.28,1) .28s both;
}
.sticker-drop-2{
  animation:rpStickerDropSoft2 .68s cubic-bezier(.20,.75,.28,1) .48s both;
}
.sticker-drop-3{
  animation:rpStickerDropSoft3 .66s cubic-bezier(.20,.75,.28,1) .58s both;
}

/* Keep hover very subtle so it doesn't fight the landing motion */
.sticker-drop:hover{
  filter:drop-shadow(0 5px 6px rgba(26,26,26,.10));
}

/* Tablet */
@media(max-width:1040px){
  .visual-main{
    width:min(442px,64vw);
    left:50%;
    right:auto;
    top:50px;
    transform:translateX(-50%);
  }

  .sticker-3{
    width:164px;
    right:19%;
    left:auto;
    bottom:4px;
  }

  .sticker-4{
    width:104px;
    right:11%;
    bottom:24px;
  }
}

/* Mobile */
@media(max-width:768px){
  .visual-main{
    width:min(320px,76vw);
  }

  .sticker-3{
    width:126px;
    right:14%;
    bottom:0;
  }

  .sticker-4{
    width:78px;
    right:6%;
    bottom:18px;
  }
}

/* Very small screens: keep previous simplification */
@media(max-width:520px){
  .visual-main{
    width:255px;
  }
  .sticker-3,
  .sticker-4{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .sticker-drop{
    opacity:1!important;
    animation:none!important;
  }
}


/* =========================================================
   v19 GRID + CROSS-SECTION STICKER COMPOSITION
   ---------------------------------------------------------
   1) Every home section uses the same 1200px left/right grid.
   2) Lower sticker pair is one composition that overlaps into
      the yellow meaning band, matching the supplied reference.
   ========================================================= */

/* One shared 1200px page grid */
.site-header .container,
.home-container{
  width:min(calc(100% - 64px),1200px);
  max-width:1200px;
  margin-inline:auto;
}

/* Hero must allow the sticker group to extend below its section */
.hero-v15{
  position:relative;
  overflow:visible;
}

/* Keep the hero visual itself as the positioning context */
.hero-visual-v15{
  position:relative;
  overflow:visible;
}

/* Align hero text to the exact shared grid edge */
.hero-grid{
  grid-template-columns:500px 1fr;
  column-gap:72px;
}

.hero-copy-v15{
  margin:0;
  padding-left:0;
}

/* Meaning section text starts on the SAME left grid line.
   Leave the right side visually open for the overlapping stickers. */
.meaning-band-v15{
  position:relative;
  z-index:1;
}

.meaning-band-v15 .home-container{
  position:relative;
}

.meaning-copy-v15{
  width:760px;
  max-width:760px;
  margin:0;
}

/* Starter section uses the same 1200 grid.
   Heading may be centered, but the card aligns to the 1200 system. */
.starter-v15 .home-container{
  width:min(calc(100% - 64px),1200px);
  max-width:1200px;
}

.starter-card-v15{
  width:100%;
  max-width:1200px;
  margin-inline:0;
  grid-template-columns:46% 54%;
}

/* ---------------------------------------------------------
   Cross-section lower sticker group
   --------------------------------------------------------- */
.lower-sticker-group{
  position:absolute;
  z-index:8;
  right:44px;
  bottom:-92px; /* intentionally crosses into yellow band */
  width:270px;
  height:150px;
  pointer-events:auto;
}

/* Children are now positioned relative to the group, not the hero */
.lower-sticker-group .sticker-art{
  position:absolute;
}

.lower-sticker-group .sticker-3{
  width:190px;
  left:0;
  right:auto;
  bottom:0;
  z-index:2;
  transform:rotate(11deg);
}

.lower-sticker-group .sticker-4{
  width:118px;
  right:0;
  bottom:34px;
  z-index:1;
  transform:rotate(-11deg);
}

/* Natural drop: smaller travel and softer landing */
@keyframes rpStickerDropSoft2v19{
  0%   {opacity:0; transform:translateY(-44px) rotate(7deg)}
  78%  {opacity:1; transform:translateY(3px) rotate(12deg)}
  100% {opacity:1; transform:translateY(0) rotate(11deg)}
}
@keyframes rpStickerDropSoft3v19{
  0%   {opacity:0; transform:translateY(-38px) rotate(-6deg)}
  78%  {opacity:1; transform:translateY(3px) rotate(-12deg)}
  100% {opacity:1; transform:translateY(0) rotate(-11deg)}
}

.lower-sticker-group .sticker-drop-2{
  animation:rpStickerDropSoft2v19 .54s cubic-bezier(.22,.72,.28,1) .48s both;
}
.lower-sticker-group .sticker-drop-3{
  animation:rpStickerDropSoft3v19 .50s cubic-bezier(.22,.72,.28,1) .62s both;
}

/* Give yellow band enough top-room visually for the overhang */
.meaning-band-v15{
  padding-top:48px;
}

/* 1200 grid adaptation */
@media(max-width:1264px){
  .site-header .container,
  .home-container,
  .starter-v15 .home-container{
    width:calc(100% - 48px);
  }

  .starter-card-v15{
    max-width:none;
  }
}

@media(max-width:1040px){
  /* Tablet layout no longer uses the desktop cross-section overlap.
     Keep the composition visible but contained. */
  .lower-sticker-group{
    right:12%;
    bottom:-64px;
    width:240px;
    height:132px;
  }

  .lower-sticker-group .sticker-3{
    width:166px;
  }

  .lower-sticker-group .sticker-4{
    width:102px;
    bottom:30px;
  }

  .meaning-copy-v15{
    width:auto;
    max-width:760px;
  }

  .starter-card-v15{
    max-width:1000px;
    margin-inline:auto;
  }
}

@media(max-width:768px){
  .site-header .container,
  .home-container,
  .starter-v15 .home-container{
    width:calc(100% - 40px);
  }

  .lower-sticker-group{
    right:5%;
    bottom:-48px;
    width:190px;
    height:104px;
  }

  .lower-sticker-group .sticker-3{
    width:132px;
  }

  .lower-sticker-group .sticker-4{
    width:82px;
    bottom:22px;
  }

  .meaning-band-v15{
    padding-top:42px;
  }

  .starter-card-v15{
    max-width:560px;
    margin-inline:auto;
  }
}

@media(max-width:520px){
  /* Simplify decorative overlap on very small screens */
  .lower-sticker-group{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .lower-sticker-group .sticker-drop{
    opacity:1!important;
    animation:none!important;
  }
}


/* =========================================================
   v20 GRID / HERO / STICKER ALIGNMENT
   ========================================================= */

/* Shared home grid: 1080px */
.site-header .container,
.home-container,
.starter-v15 .home-container{
  width:min(calc(100% - 64px),1080px);
  max-width:1080px;
  margin-inline:auto;
}

/* Hero typography */
.hero-copy-v15 h1{
  font-size:56px;
}

/* Rebalance hero columns for 1080px grid */
.hero-grid{
  grid-template-columns:460px 1fr;
  column-gap:56px;
}

/* Keep character composition proportional inside narrower grid */
.visual-main{
  width:442px;
  right:52px;
  top:64px;
}

/* Lower sticker pair:
   - sits beneath the character
   - right edge aligns to the shared 1080px grid
   - still overlaps into yellow band */
.lower-sticker-group{
  right:0;
  bottom:-92px;
  width:260px;
  height:148px;
}

.lower-sticker-group .sticker-3{
  width:182px;
  left:0;
  bottom:0;
}

.lower-sticker-group .sticker-4{
  width:114px;
  right:0;
  bottom:34px;
}

/* Meaning band aligns to the same 1080px grid */
.meaning-band-v15 .home-container{
  width:min(calc(100% - 64px),1080px);
  max-width:1080px;
}

/* Starter section card stays inside the same 1080 grid */
.starter-card-v15{
  max-width:1080px;
}

/* Responsive adaptation */
@media(max-width:1144px){
  .site-header .container,
  .home-container,
  .starter-v15 .home-container,
  .meaning-band-v15 .home-container{
    width:calc(100% - 48px);
  }
}

@media(max-width:1040px){
  .hero-grid{
    grid-template-columns:1fr;
  }

  .visual-main{
    width:min(442px,64vw);
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }

  .lower-sticker-group{
    right:8%;
    bottom:-64px;
  }
}

@media(max-width:768px){
  .site-header .container,
  .home-container,
  .starter-v15 .home-container,
  .meaning-band-v15 .home-container{
    width:calc(100% - 40px);
  }

  .hero-copy-v15 h1{
    font-size:40px;
  }

  .visual-main{
    width:min(320px,76vw);
  }

  .lower-sticker-group{
    right:4%;
    bottom:-48px;
    width:188px;
    height:104px;
  }

  .lower-sticker-group .sticker-3{
    width:130px;
  }

  .lower-sticker-group .sticker-4{
    width:80px;
    bottom:22px;
  }
}


/* =========================================================
   v21 FIXES
   1) Move lower sticker set fully below character artwork.
   2) Remove divider line next to Korea Starter Guide image.
   ========================================================= */

/* Place the overlapping sticker pair lower so it no longer sits on top of the character artwork. */
.lower-sticker-group{
  right:0;
  bottom:-124px;
  width:260px;
  height:148px;
}

/* Slightly reduce overlap inside the sticker pair while keeping the intended stacked look. */
.lower-sticker-group .sticker-3{
  width:182px;
  left:0;
  bottom:0;
}

.lower-sticker-group .sticker-4{
  width:114px;
  right:0;
  bottom:28px;
}

/* Remove the thin vertical divider beside the starter guide artwork. */
.starter-image-v15{
  border-right:0 !important;
}

/* Mobile stacked card already uses a horizontal separation visually via layout, so keep border off there too. */
@media(max-width:768px){
  .starter-image-v15{
    border-right:0 !important;
    border-bottom:0 !important;
  }

  .lower-sticker-group{
    bottom:-66px;
  }
}

/* ===== v23 shared 1080 grid ===== */
:root{--max:1080px}
.container{width:min(calc(100% - 48px),1080px);max-width:1080px}
.site-header{height:82px;border:0}.nav{height:82px}.logo img{width:172px}.nav-links{gap:48px;font-size:16px;color:#333}.nav-links a.active{color:#333}.nav-links a.active:after{display:none}

/* ===== home rebuilt from latest Figma main ===== */
.home-page{background:#fff}.home-page .home-container{width:min(calc(100% - 48px),1080px);max-width:1080px;margin-inline:auto}
.home-hero-shell{position:relative;background:#FBF8F1;overflow:hidden}
.hero-main-row{height:490px;display:grid;grid-template-columns:680px 400px;align-items:start;padding-top:88px;position:relative}
.hero-copy-v23{display:flex;flex-direction:column;gap:48px;align-items:flex-start;position:relative;z-index:2}
.hero-copy-v23 h1{font-family:'Arial Black',var(--font);font-size:56px;line-height:1.2;font-style:italic;font-weight:900;letter-spacing:-.035em;color:#333;margin:0}
.hero-copy-v23 p{font-size:20px;line-height:1.3;color:#333;margin:32px 0 0}
.hero-cta-v23{height:60px;min-height:60px;border:1px solid #000;border-radius:8px;background:#FFC13B;color:#262626;font-size:18px;padding:0 20px;box-shadow:none}
.hero-art-v23{position:relative;width:400px;height:400px;z-index:3}.hero-characters-v23{position:absolute;top:10px;left:0;width:400px;height:276px;object-fit:contain}
.hero-sticker-bapsim{position:absolute;width:118px;top:-49px;right:-11px;transform:rotate(14deg)}
.hero-sticker-reallife{position:absolute;width:200px;left:-155px;top:332px;transform:rotate(16deg);z-index:4}.hero-sticker-culture{position:absolute;width:110px;left:12px;top:288px;transform:rotate(-2deg);z-index:3}
.hero-sticker-ricepower{position:absolute;right:8px;top:425px;padding:7px 13px;border:2px solid #1F66D0;border-radius:999px;background:white;color:#1F66D0;font-family:Impact,'Arial Narrow',sans-serif;font-size:16px;line-height:1;font-weight:800;letter-spacing:.04em;transform:rotate(-13.5deg);white-space:nowrap}
.meaning-band-v23{background:#FFC13B;padding:48px 0;min-height:233px}.meaning-copy-v23{display:flex;flex-direction:column;gap:20px;color:#111}.meaning-copy-v23 h2{font-family:Impact,'Arial Narrow',var(--font);font-size:28px;line-height:1.2;letter-spacing:.01em;color:#111;margin:0}.meaning-copy-v23 h2 span{color:#D94E0B}.meaning-copy-v23 p,.meaning-copy-v23 a{font-size:18px;line-height:1.35;color:#111;margin:0}.meaning-copy-v23 a{font-weight:600}
.starter-v23{background:#0F5A30;padding:120px 0;color:#fff}.starter-v23 .home-container{display:flex;flex-direction:column;gap:48px;align-items:center}.starter-heading-v23{text-align:center;width:100%}.starter-kicker-v23{font-size:24px;line-height:1.2;margin:0 0 8px}.starter-heading-v23 h2{font-family:'Arial Black',var(--font);font-style:italic;font-size:48px;line-height:1.2;color:#fff;letter-spacing:-.03em}.starter-heading-v23>p:last-child{font-size:18px;line-height:1.5;margin:28px 0 0;color:#fff}
.starter-card-v23{width:1080px;min-height:369px;background:#fff;border:2px solid #333;border-radius:16px;box-shadow:8px 8px 0 #000;padding:48px 64px;display:flex;align-items:center;gap:64px;color:#333}.starter-image-v23{width:348px;height:273px;flex:0 0 348px;overflow:hidden}.starter-image-v23 img{width:410px;max-width:none;height:274px;object-fit:cover;transform:translateX(-35px)}.starter-copy-v23{flex:1;display:flex;flex-direction:column;gap:40px;align-items:flex-start}.starter-copy-v23 h3{font-size:32px;line-height:1.2;color:#0F5A30;font-weight:900;margin:0 0 20px}.starter-copy-v23 ul{list-style:none;margin:0;padding:0;color:#555;font-size:16px;line-height:1.5}.starter-copy-v23 li:before{content:'✔';margin-right:7px;color:#333;font-weight:800}.starter-btn-v23{height:48px;min-height:48px;background:#333;color:#fff;border-radius:8px;padding:0 20px;font-size:16px}

/* ===== about from supplied reference ===== */
.about-page-v23 main{background:#FBF8F1}.about-top-v23{padding:74px 0 72px}.about-top-v23 h1{font-size:48px;line-height:1.2;font-weight:800;color:#333}.about-intro-v23{font-size:17px;line-height:1.42;color:#555;margin:32px 0 0;max-width:1000px}.offer-v23{margin-top:72px}.offer-v23>h2{font-size:30px;line-height:1.25;color:#333;margin-bottom:22px}
.offer-card-v23{background:#fff;border:2px solid #333;border-radius:16px;box-shadow:8px 8px 0 #000;display:grid;grid-template-columns:repeat(3,1fr);padding:40px 0}.offer-item-v23{padding:0 28px;min-height:205px}.offer-item-v23+.offer-item-v23{border-left:1px solid #444}.offer-item-v23 img{width:48px;height:48px;object-fit:contain;margin-bottom:26px}.offer-item-v23 h3{font-size:18px;line-height:1.35;color:#333;margin-bottom:12px}.offer-item-v23 p{font-size:14px;line-height:1.35;color:#666;margin:0}
.crew-v23{background:#FFC13B;padding:72px 0 92px}.crew-head-v23{display:grid;grid-template-columns:390px 1fr;align-items:center;gap:64px;margin-bottom:48px}.crew-head-v23 h2{font-size:48px;line-height:1.08;color:#333;font-weight:800}.crew-head-v23 p{font-size:16px;line-height:1.4;color:#5d512f;margin:0}.crew-panel-v23{background:#fff;border:2px solid #333;border-radius:16px;box-shadow:8px 8px 0 #000;padding:48px 28px 40px}.crew-row-v23{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center}.crew-row-v23+.crew-row-v23{margin-top:30px}.crew-art-v23{width:200px;height:200px;border-radius:16px;overflow:hidden}.crew-art-v23 img{width:100%;height:100%;object-fit:cover}.crew-copy-v23 h3{font-family:Impact,'Arial Narrow',var(--font);font-size:31px;line-height:1;color:#333;letter-spacing:.02em;margin:0 0 20px}.crew-copy-v23 .role{font-size:16px;line-height:1.3;font-style:italic;font-weight:700;margin-bottom:18px;color:#555}.crew-copy-v23 .role span{color:#FF6A1F}.crew-copy-v23 p{font-size:14px;line-height:1.3;color:#666;margin:0}

/* blog/contact: existing design, common 1080 grid */
.blog-page-v23 .blog-page>.container,.contact-page-v23 .contact-page>.container{width:min(calc(100% - 48px),1080px);max-width:1080px}.contact-page-v23 .contact-wrap{max-width:none;width:100%;margin:0}

@media(max-width:900px){
 .container,.home-page .home-container{width:calc(100% - 40px)}.site-header{height:72px}.nav{height:72px}.logo img{width:154px}.nav-links{display:none}.menu-btn{display:flex}
 .hero-main-row{height:auto;display:flex;flex-direction:column;padding:56px 0 86px;gap:48px}.hero-copy-v23 h1{font-size:44px}.hero-copy-v23 p{font-size:18px}.hero-art-v23{align-self:center;width:360px;height:300px}.hero-characters-v23{width:360px}.hero-sticker-bapsim{width:92px;right:0}.hero-sticker-reallife,.hero-sticker-culture,.hero-sticker-ricepower{display:none}
 .meaning-band-v23{min-height:0}.meaning-copy-v23 h2{font-size:24px}.meaning-copy-v23 p,.meaning-copy-v23 a{font-size:16px}.starter-v23{padding:80px 0}.starter-heading-v23 h2{font-size:38px}.starter-card-v23{width:min(100%,680px);min-height:0;flex-direction:column;padding:40px}.starter-copy-v23{align-items:center;text-align:center}.starter-copy-v23 h3{font-size:28px}
 .about-top-v23{padding:54px 0}.about-top-v23 h1{font-size:40px}.about-intro-v23{font-size:16px}.offer-v23{margin-top:52px}.offer-card-v23{grid-template-columns:1fr;padding:12px 28px}.offer-item-v23{padding:28px 0;min-height:0}.offer-item-v23+.offer-item-v23{border-left:0;border-top:1px solid #444}.offer-item-v23 img{margin-bottom:16px}.crew-v23{padding:56px 0 72px}.crew-head-v23{grid-template-columns:1fr;gap:20px}.crew-head-v23 h2{font-size:38px}.crew-panel-v23{padding:30px}.crew-row-v23{grid-template-columns:160px 1fr;gap:24px}.crew-art-v23{width:150px;height:150px}.crew-copy-v23 h3{font-size:26px;margin-bottom:12px}.crew-copy-v23 p{font-size:13px}
}
@media(max-width:600px){.hero-copy-v23 h1{font-size:38px}.hero-art-v23{width:300px;height:240px}.hero-characters-v23{width:300px}.hero-sticker-bapsim{width:80px;top:-35px}.starter-kicker-v23{font-size:19px}.starter-heading-v23 h2{font-size:32px}.starter-heading-v23>p:last-child{font-size:16px}.starter-card-v23{padding:32px 24px}.starter-image-v23{width:240px;height:189px;flex-basis:auto}.starter-image-v23 img{width:283px;height:189px;transform:translateX(-24px)}.crew-row-v23{grid-template-columns:1fr}.crew-row-v23+.crew-row-v23{margin-top:40px}}


/* =========================================================
   v24 — supplied blue sticker + unified inner titles + Super Salad
   ========================================================= */

/* Use the user's supplied sticker artwork instead of a CSS recreation. */
.hero-sticker-ricepower{
  position:absolute;
  right:-2px;
  top:416px;
  width:144px;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  transform:rotate(0deg);
  object-fit:contain;
}

/* About / Blog / Contact title system must be identical. */
.about-page-v23 .about-top-v23,
.blog-page-v23 .blog-page,
.contact-page-v23 .contact-page{
  padding-top:72px;
}
.about-page-v23 .about-top-v23 h1,
.blog-page-v23 .blog-page h1,
.contact-page-v23 .contact-page h1{
  margin:0;
  font-size:40px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
  color:#333;
}

/* Super Salad display typography. The page uses the locally available
   Super Salad face when installed/hosted, with a safe fallback. */
.crew-copy-v23 h3,
.meaning-copy-v23 h2,
.starter-copy-v23 h3{
  font-family:'Super Salad','Super_Salad',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  letter-spacing:0;
}

/* Match the intended display sizes while changing only the typeface. */
.crew-copy-v23 h3{font-size:31px;line-height:1;}
.meaning-copy-v23 h2{font-size:28px;line-height:1.2;}
.starter-copy-v23 h3{font-size:36px;line-height:1.2;}

@media(max-width:768px){
  .about-page-v23 .about-top-v23,
  .blog-page-v23 .blog-page,
  .contact-page-v23 .contact-page{
    padding-top:48px;
  }
  .about-page-v23 .about-top-v23 h1,
  .blog-page-v23 .blog-page h1,
  .contact-page-v23 .contact-page h1{
    font-size:34px;
  }
}


/* =========================================================
   v25 — HOME BASE STRUCTURE ONLY
   Stickers intentionally removed. This pass establishes the
   Figma-derived skeleton first; decorative stickers come later.
   ========================================================= */
.home-page .home-hero-shell{
  background:#FBF8F1;
  overflow:visible;
}

/* Exact shared desktop grid */
.home-page .home-container,
.home-page .site-header .container{
  width:min(calc(100% - 48px),1080px);
  max-width:1080px;
  margin-inline:auto;
}

/* Figma main content: 1080 wide, 88px vertical padding,
   flexible copy column + fixed 400px character column. */
.home-page .hero-main-row{
  height:auto;
  min-height:490px;
  display:grid;
  grid-template-columns:minmax(0,680px) 400px;
  align-items:start;
  padding:88px 0;
  position:relative;
}
.home-page .hero-copy-v23{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:48px;
  position:relative;
  z-index:1;
}
.home-page .hero-copy-v23 > div{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:32px;
}
.home-page .hero-copy-v23 h1{
  margin:0;
  font-size:56px;
  line-height:1.2;
  font-weight:800;
  font-style:italic;
  letter-spacing:-.03em;
  color:#333;
}
.home-page .hero-copy-v23 p{
  margin:0;
  font-size:20px;
  line-height:1.3;
  color:#333;
}
.home-page .hero-cta-v23{
  margin:0;
  height:60px;
  min-height:60px;
  padding:0 20px;
  border:1px solid #000;
  border-radius:8px;
  background:#FFC13B;
  box-shadow:none;
  color:#262626;
  font-size:18px;
  font-weight:600;
}

/* Character art only: no stickers in this pass */
.home-page .hero-art-v23{
  position:relative;
  width:400px;
  height:295px;
  align-self:start;
  overflow:visible;
}
.home-page .hero-characters-v23{
  position:absolute;
  inset:0;
  width:400px;
  height:295px;
  object-fit:contain;
  object-position:center;
}
.home-page .hero-art-v23 > img:not(.hero-characters-v23),
.home-page .hero-sticker-bapsim,
.home-page .hero-sticker-reallife,
.home-page .hero-sticker-culture,
.home-page .hero-sticker-ricepower{
  display:none !important;
}

/* Meaning band is a normal document-flow section, not positioned
   relative to any decoration. */
.home-page .meaning-band-v23{
  position:relative;
  min-height:233px;
  padding:48px 0;
  background:#FFC13B;
  overflow:visible;
}
.home-page .meaning-copy-v23{
  width:100%;
  max-width:none;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.home-page .meaning-copy-v23 h2,
.home-page .meaning-copy-v23 p,
.home-page .meaning-copy-v23 a{
  margin:0;
}

/* Starter section/card are also pure flow layout. */
.home-page .starter-v23{
  position:relative;
  padding:120px 0;
  background:#0F5A30;
}
.home-page .starter-v23 .home-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:48px;
}
.home-page .starter-card-v23{
  width:100%;
  max-width:1080px;
  min-height:369px;
  margin:0;
  display:flex;
  align-items:center;
  gap:64px;
  padding:48px 64px;
  border:2px solid #333;
  border-radius:16px;
  box-shadow:8px 8px 0 #000;
  background:#fff;
}

@media(max-width:900px){
  .home-page .hero-main-row{
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:48px;
    padding:56px 0 72px;
  }
  .home-page .hero-art-v23{
    width:min(400px,100%);
    height:auto;
    aspect-ratio:400/295;
    align-self:center;
  }
  .home-page .hero-characters-v23{
    width:100%;
    height:100%;
  }
}


/* =========================================================
   v26 — LOCKED HOME SKELETON + STICKER OVERLAY
   - Keeps v25 hero/meaning/starter geometry unchanged.
   - Stickers are a separate absolute layer on top.
   - Meaning section is explicitly locked to the same 1080 grid.
   - Stable scrollbar prevents Contact-only horizontal shift.
   ========================================================= */

/* Keep the horizontal viewport geometry identical on short/long pages. */
html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
}

/* Contact, Blog, About and Home header/content all share one exact grid. */
.site-header .container,
.home-page .home-container,
.about-page-v23 .container,
.blog-page-v23 .container,
.contact-page-v23 .container{
  width:min(calc(100% - 48px),1080px);
  max-width:1080px;
  margin-inline:auto;
}

/* Meaning must use the SAME 1080 grid and left edge as the hero copy. */
.home-page .meaning-band-v23 > .home-container,
.home-page .meaning-copy-v23{
  width:min(calc(100% - 48px),1080px);
  max-width:1080px;
  margin-inline:auto;
}
.home-page .meaning-copy-v23{
  margin-left:auto;
  margin-right:auto;
}

/* The skeleton remains untouched; only allow the overlay to cross sections. */
.home-page .home-hero-shell{
  position:relative;
  overflow:visible;
}
.home-page .hero-main-row{
  position:relative;
  z-index:2;
}
.home-page .meaning-band-v23{
  position:relative;
  z-index:1;
}

/* Figma sticker layer, coordinates measured from the 1080px grid. */
.home-page .hero-stickers-v26{
  position:absolute;
  left:50%;
  top:0;
  height:600px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:6;
}
.home-page .hero-stickers-v26 .sticker-v26{
  display:block !important;
  position:absolute;
  max-width:none;
  object-fit:contain;
  margin:0;
}

/* Latest Figma desktop coordinates converted from the 1920 canvas:
   grid left = 420px, so x positions below are relative to the 1080 grid. */
.home-page .sticker-bapsim-v26{
  left:979px;
  top:39px;
  width:133px;
  height:102px;
  transform:rotate(14deg);
}
.home-page .sticker-reallife-v26{
  left:480px;
  top:417px;
  width:206px;
  height:103px;
  transform:rotate(16deg);
}
.home-page .sticker-culture-v26{
  left:637px;
  top:376px;
  width:110px;
  height:110px;
}
.home-page .sticker-ricepower-v26{
  left:929px;
  top:508px;
  width:144px;
  height:81px;
  transform:rotate(-13.5deg);
}

/* Remove the v25 blanket hide only for the new independent sticker layer. */
.home-page .hero-art-v23 > img:not(.hero-characters-v23){
  display:none !important;
}

/* Contact layout: no width auto-expansion or centering differences. */
.contact-page-v23 .contact-page,
.contact-page-v23 .contact-wrap{
  width:100%;
  max-width:none;
}
.contact-page-v23 .contact-wrap{
  margin:0;
}

@media(max-width:1140px){
  .site-header .container,
  .home-page .home-container,
  .about-page-v23 .container,
  .blog-page-v23 .container,
  .contact-page-v23 .container,
  .home-page .meaning-band-v23 > .home-container,
  .home-page .meaning-copy-v23{
    width:calc(100% - 48px);
  }
  /* Keep sticker geometry tied to the right side of the shrinking grid. */
  .home-page .sticker-bapsim-v26{left:auto;right:-31px}
  .home-page .sticker-ricepower-v26{left:auto;right:7px}
}

@media(max-width:900px){
  /* Decorative stickers are desktop composition; hide them when hero stacks. */
  .home-page .hero-stickers-v26{display:none}
}

@media(max-width:600px){
  .site-header .container,
  .home-page .home-container,
  .about-page-v23 .container,
  .blog-page-v23 .container,
  .contact-page-v23 .container,
  .home-page .meaning-band-v23 > .home-container,
  .home-page .meaning-copy-v23{
    width:calc(100% - 40px);
  }
}


/* =========================================================
   v28 — RICEPOWER WEB DESIGN SYSTEM ALIGNMENT
   Applied on top of the COMPLETE v26 stylesheet.
   Layout geometry remains unchanged.
   ========================================================= */

:root{
  /* Brand colors */
  --rp-gold:#FFC13B;
  --rp-gold-deep:#E8A21D;
  --rp-gold-light:#FDF5E2;

  --rp-kim-green:#3AC573;
  --rp-kim-green-deep:#1F9D5C;
  --rp-kim-green-light:#E7F7EE;

  --rp-dugi-orange:#FF6A1F;
  --rp-dugi-orange-deep:#D94E10;
  --rp-dugi-orange-light:#FFEDE2;

  /* Neutral system */
  --rp-paper:#FBF8F1;
  --rp-white:#FFFFFF;
  --rp-line:#E8E6E0;
  --rp-ink-900:#1A1A1A;
  --rp-ink-700:#333333;
  --rp-ink-500:#6E6C66;
  --rp-ink-300:#ABA89F;

  /* Radius / elevation */
  --rp-radius-card:12px;
  --rp-radius-pill:999px;
  --rp-radius-sm:6px;

  --rp-shadow-sm:0 1px 2px rgba(26,26,26,.06), 0 1px 1px rgba(26,26,26,.05);
  --rp-shadow-md:0 10px 24px -8px rgba(26,26,26,.16), 0 2px 8px -2px rgba(26,26,26,.08);
  --rp-shadow-lift:0 16px 32px -10px rgba(26,26,26,.22), 0 4px 10px -2px rgba(26,26,26,.10);
}

/* Brand / neutral color normalization */
body{ color:var(--rp-ink-700); }
.home-page .home-hero-shell,
.about-page-v23 main{ background:var(--rp-paper); }

.home-page .meaning-band-v23{ background:var(--rp-gold); }
.home-page .meaning-copy-v23{ color:var(--rp-ink-900); }
.home-page .meaning-copy-v23 h2,
.home-page .meaning-copy-v23 p,
.home-page .meaning-copy-v23 a{ color:var(--rp-ink-900); }
.home-page .meaning-copy-v23 h2 span{ color:var(--rp-dugi-orange-deep); }

.home-page .starter-v23{ background:var(--rp-kim-green-deep); }

/* Buttons follow the DS hover / active / focus logic. */
.btn{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}
.btn:focus-visible,
button:focus-visible,
a:focus-visible{
  outline:2px solid var(--rp-gold-deep);
  outline-offset:2px;
}

.home-page .hero-cta-v23{
  background:var(--rp-gold);
  color:var(--rp-ink-900);
  border-color:var(--rp-ink-900);
}
.home-page .hero-cta-v23:hover{
  background:var(--rp-gold-deep);
  transform:translateY(-2px);
  box-shadow:var(--rp-shadow-md);
}
.home-page .hero-cta-v23:active{
  transform:translateY(0);
  box-shadow:var(--rp-shadow-sm);
}

.home-page .starter-btn-v23{
  background:var(--rp-ink-700);
  color:var(--rp-white);
}
.home-page .starter-btn-v23:hover{
  background:var(--rp-ink-900);
  transform:translateY(-2px);
  box-shadow:var(--rp-shadow-md);
}
.home-page .starter-btn-v23:active{
  transform:translateY(0);
  box-shadow:var(--rp-shadow-sm);
}

/* Cards retain the site's intentional graphic hard shadow,
   while borders/radii use DS neutral tokens. */
.home-page .starter-card-v23,
.about-page-v23 .offer-card-v23,
.about-page-v23 .crew-panel-v23{
  background:var(--rp-white);
  border-color:var(--rp-ink-700);
  border-radius:var(--rp-radius-card);
}
.about-page-v23 .offer-item-v23 + .offer-item-v23{
  border-color:var(--rp-line);
}

/* Neutral text hierarchy */
.hero-copy-v23 h1,
.about-top-v23 h1,
.offer-v23 > h2,
.crew-head-v23 h2{
  color:var(--rp-ink-700);
}
.about-intro-v23,
.offer-item-v23 p,
.crew-copy-v23 p{
  color:var(--rp-ink-500);
}

/* Link interaction */
.home-page .meaning-copy-v23 a{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
  transition:color .16s ease,text-decoration-color .16s ease;
}
.home-page .meaning-copy-v23 a:hover{
  color:var(--rp-ink-900);
  text-decoration-color:var(--rp-gold-deep);
}

/* Sticker 2 + 3 are a deliberately overlapping cluster.
   No hero/grid geometry is changed here. */
.home-page .sticker-reallife-v26{
  left:480px;
  top:417px;
  width:206px;
  height:103px;
  transform:rotate(16deg);
  z-index:5;
}
.home-page .sticker-culture-v26{
  left:590px;
  top:392px;
  width:110px;
  height:110px;
  transform:rotate(-4deg);
  z-index:4;
}

/* Design-system selection and reduced-motion behavior */
::selection{
  background:var(--rp-gold-light);
  color:var(--rp-ink-900);
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* =========================================================
   v29 — requested finishing adjustments
   - Keep v28 layout geometry locked.
   - Restore Starter section to the site's DEEP GREEN.
   - Re-compose stickers 2 + 3 with restrained angles.
   - Make the current top navigation item clearly active.
   ========================================================= */

/* Starter section: deep green, not the brighter Kim green. */
.home-page .starter-v23{
  background:#0F5A30;
}

/* Natural sticker cluster: gentle opposing angles and a controlled overlap. */
.home-page .sticker-reallife-v26{
  left:486px;
  top:408px;
  width:200px;
  height:auto;
  transform:rotate(-5deg);
  transform-origin:center center;
  z-index:5;
}
.home-page .sticker-culture-v26{
  left:590px;
  top:431px;
  width:112px;
  height:auto;
  transform:rotate(4deg);
  transform-origin:center center;
  z-index:4;
}

/* Primary navigation / current-page state */
.site-header .nav-links a{
  color:var(--rp-ink-700,#333);
  padding:10px 2px 9px;
  position:relative;
  transition:color .16s ease;
}
.site-header .nav-links a:hover{
  color:var(--rp-ink-900,#1A1A1A);
}
.site-header .nav-links a.active,
.site-header .nav-links a[aria-current="page"]{
  color:var(--rp-dugi-orange-deep,#D94E10);
}
.site-header .nav-links a.active::after,
.site-header .nav-links a[aria-current="page"]::after{
  display:block;
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:3px;
  border-radius:999px;
  background:var(--rp-gold,#FFC13B);
}

@media(max-width:900px){
  /* Desktop sticker composition is intentionally hidden once the hero stacks. */
  .home-page .hero-stickers-v26{display:none}
}

/* =========================================================
   v30 — screenshot-matched hero finishing
   Reference: user-supplied current Figma screenshot.
   The v29 layout skeleton remains locked.
   ========================================================= */

/* Requested hero title size. */
.home-page .hero-copy-v23 h1{
  font-size:52px;
}

/*
  Sticker assets already contain their own visual tilt.
  Keep CSS rotation minimal and match the screenshot composition:
  01 upper-right / 02+03 lower-left cluster / 04 crossing lower-right edge.
*/
.home-page .sticker-bapsim-v26{
  left:979px;
  top:42px;
  width:133px;
  height:auto;
  transform:rotate(0deg);
  z-index:5;
}

.home-page .sticker-reallife-v26{
  left:490px;
  top:416px;
  width:206px;
  height:auto;
  transform:rotate(0deg);
  transform-origin:center center;
  z-index:6;
}

.home-page .sticker-culture-v26{
  left:642px;
  top:378px;
  width:110px;
  height:auto;
  transform:rotate(0deg);
  transform-origin:center center;
  z-index:5;
}

.home-page .sticker-ricepower-v26{
  left:950px;
  top:510px;
  width:144px;
  height:auto;
  transform:rotate(0deg);
  z-index:5;
}

@media(max-width:1140px){
  .home-page .sticker-bapsim-v26{left:auto;right:-31px}
  .home-page .sticker-ricepower-v26{left:auto;right:-14px}
}

@media(max-width:900px){
  .home-page .hero-copy-v23 h1{font-size:44px}
}

@media(max-width:600px){
  .home-page .hero-copy-v23 h1{font-size:38px}
}


/* =========================================================
   v31 — restore hero squiggle + survey pill borders
   ========================================================= */

/* Decorative white squiggle from the Figma hero, behind characters.
   Absolute positioning keeps the locked hero skeleton unchanged. */
.home-page .hero-art-v23 .hero-squiggle-v31{
  display:block !important;
  position:absolute;
  z-index:0;
  width:430px;
  height:430px;
  max-width:none;
  object-fit:contain;
  left:-132px;
  top:-66px;
  pointer-events:none;
  user-select:none;
}
.home-page .hero-art-v23 .hero-characters-v23{
  z-index:1;
}

/* Override the old blanket hide: the squiggle is intentional hero art. */
.home-page .hero-art-v23 > img.hero-squiggle-v31{
  display:block !important;
}

/* Survey / Korea-reason chips: visible neutral outline at rest,
   stronger outline on hover, Gold system state when selected. */
.guide-modal .choice-pill span{
  border:1px solid #ABA89F !important;
  background:#FFFFFF;
  color:#333333;
  box-shadow:none;
}
.guide-modal .choice-pill:hover span{
  border-color:#6E6C66 !important;
}
.guide-modal .choice-pill input:checked + span{
  border-color:#E8A21D !important;
  background:#FDF5E2;
  color:#1A1A1A;
  box-shadow:0 0 0 1px rgba(232,162,29,.08);
}
.guide-modal .choice-pill input:focus-visible + span{
  outline:2px solid #E8A21D;
  outline-offset:2px;
}

@media(max-width:900px){
  .home-page .hero-art-v23 .hero-squiggle-v31{
    width:360px;
    height:360px;
    left:-90px;
    top:-45px;
  }
}


/* =========================================================
   v32 — MOBILE HOME COMPOSITION
   Figma source: node 1969:447
   Desktop/tablet geometry stays unchanged.
   Mobile breakpoint only: <= 600px.
   ========================================================= */

@media (max-width:600px){

  .home-page .home-container,
  .home-page .meaning-band-v23 > .home-container,
  .home-page .meaning-copy-v23{
    width:calc(100% - 40px);
    max-width:none;
    margin-inline:auto;
  }

  .home-page .home-hero-shell{
    position:relative;
    overflow:hidden;
    background:#FBF8F1;
  }

  .home-page .hero-main-row{
    height:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    padding:88px 0 48px;
    position:relative;
    z-index:2;
  }

  .home-page .hero-copy-v23{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }

  .home-page .hero-copy-v23 h1{
    width:100%;
    margin:0;
    font-size:44px;
    line-height:1.2;
    letter-spacing:-.035em;
  }

  .home-page .hero-copy-v23 p{
    width:100%;
    margin:32px 0 0;
    font-size:18px;
    line-height:normal;
  }

  .home-page .hero-cta-v23{
    height:52px;
    min-height:52px;
    margin-top:48px;
    padding:0 20px;
    border-radius:8px;
    font-size:16px;
    line-height:1.2;
  }

  .home-page .hero-art-v23{
    align-self:center;
    width:280px;
    height:206.516px;
    position:relative;
    overflow:visible;
    z-index:3;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    position:absolute;
    left:0;
    top:3.21%;
    width:280px;
    height:93.58%;
    max-width:none;
    object-fit:contain;
    z-index:2;
  }

  .home-page .hero-art-v23 .hero-squiggle-v31{
    display:none !important;
  }

  .home-page .hero-stickers-v26{
    display:block !important;
    position:absolute;
    left:50%;
    top:0;
    width:100%;
    height:820px;
    max-width:none;
    transform:translateX(-50%);
    pointer-events:none;
    z-index:6;
    overflow:visible;
  }

  .home-page .hero-stickers-v26 .sticker-v26{
    display:block !important;
    position:absolute;
    max-width:none;
    height:auto;
  }

  .home-page .sticker-bapsim-v26{
    left:auto;
    right:4px;
    top:23px;
    width:96px;
    transform:rotate(13.95deg);
    z-index:7;
  }

  .home-page .sticker-culture-v26{
    left:auto;
    right:-15px;
    top:437px;
    width:80px;
    transform:rotate(-90deg);
    z-index:6;
  }

  .home-page .sticker-reallife-v26{
    left:auto;
    right:-58px;
    top:485px;
    width:160px;
    transform:rotate(16.03deg);
    z-index:7;
  }

  .home-page .sticker-ricepower-v26{
    left:16px;
    right:auto;
    top:734px;
    width:120px;
    transform:rotate(-13.54deg);
    z-index:8;
  }

  .home-page .meaning-band-v23{
    min-height:0;
    padding:48px 0;
    overflow:visible;
    position:relative;
    z-index:1;
  }

  .home-page .meaning-copy-v23{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .home-page .meaning-copy-v23 h2{
    margin:0;
    font-size:28px;
    line-height:1.2;
  }

  .home-page .meaning-copy-v23 p{
    margin:0;
    font-size:16px;
    line-height:normal;
    white-space:normal;
  }

  .home-page .meaning-copy-v23 a{
    margin:0;
    font-size:18px;
    line-height:normal;
  }

  .home-page .starter-v23{
    padding:120px 20px;
    background:#0F5A30;
  }

  .home-page .starter-v23 .home-container{
    width:100%;
    max-width:none;
    gap:48px;
  }

  .home-page .starter-heading-v23{
    width:100%;
    text-align:center;
  }

  .home-page .starter-kicker-v23{
    margin:0 0 8px;
    font-size:20px;
    line-height:1.2;
  }

  .home-page .starter-heading-v23 h2{
    margin:0;
    font-size:40px;
    line-height:1.2;
    letter-spacing:-.03em;
  }

  .home-page .starter-heading-v23 > p:last-child{
    margin:28px 0 0;
    font-size:18px;
    line-height:1.5;
  }

  .home-page .starter-heading-v23 br{
    display:none;
  }

  .home-page .starter-card-v23{
    width:100%;
    min-height:0;
    padding:48px 20px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:20px;
    border:2px solid #333;
    border-radius:16px;
    box-shadow:8px 8px 0 #000;
  }

  .home-page .starter-image-v23{
    width:100%;
    height:auto;
    aspect-ratio:348 / 273;
    flex:0 0 auto;
    overflow:hidden;
  }

  .home-page .starter-image-v23 img{
    width:117.89%;
    height:100.22%;
    max-width:none;
    object-fit:cover;
    transform:translateX(-10.13%);
  }

  .home-page .starter-copy-v23{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    text-align:center;
  }

  .home-page .starter-copy-v23 h3{
    width:100%;
    margin:0 0 20px;
    font-size:36px;
    line-height:1.2;
    color:#0F5A30;
  }

  .home-page .starter-copy-v23 ul{
    width:100%;
    margin:0;
    padding:0;
    font-size:16px;
    line-height:1.5;
    text-align:center;
  }

  .home-page .starter-btn-v23{
    height:48px;
    min-height:48px;
    padding:0 20px;
    font-size:16px;
  }
}


/* =========================================================
   v33 — FLUID RESPONSIVE HERO + SAFE DECORATIVE LAYERS
   - White squiggle is always behind character art and clipped to art area.
   - Art/stickers scale fluidly with viewport width.
   - Decorative elements never cover hero copy or CTA.
   - Adds restrained hover/motion behavior with reduced-motion fallback.
   ========================================================= */

/* Squiggle: deepest visual layer, contained inside hero art only. */
.home-page .hero-art-v23{
  isolation:isolate;
}
.home-page .hero-art-v23 .hero-squiggle-v31{
  z-index:-1 !important;
  pointer-events:none;
}
.home-page .hero-copy-v23{
  position:relative;
  z-index:10;
}
.home-page .hero-cta-v23{
  position:relative;
  z-index:11;
}

/* Prevent decorative art from ever crossing into copy/button space. */
@media (min-width:901px){
  .home-page .hero-art-v23{
    overflow:clip;
  }
}

/* Fluid tablet / small-desktop composition.
   The 1080 desktop grid remains the cap, but art grows with available width. */
@media (min-width:601px) and (max-width:1140px){

  .home-page .hero-main-row{
    grid-template-columns:minmax(0,1fr) clamp(320px,38vw,400px);
    column-gap:clamp(28px,4vw,64px);
  }

  .home-page .hero-art-v23{
    width:clamp(320px,38vw,400px);
    height:clamp(300px,36vw,400px);
    overflow:clip;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100%;
    height:auto;
    top:clamp(6px,.8vw,10px);
    left:0;
  }

  .home-page .hero-art-v23 .hero-squiggle-v31{
    display:block !important;
    width:clamp(340px,43vw,430px);
    height:clamp(340px,43vw,430px);
    left:clamp(-132px,-11vw,-82px);
    top:clamp(-66px,-5vw,-34px);
    opacity:.96;
  }

  /* Sticker scale follows viewport growth rather than staying fixed. */
  .home-page .sticker-bapsim-v26{
    width:clamp(84px,10.5vw,118px);
    right:clamp(-18px,-1.2vw,-4px);
    top:clamp(18px,3vw,39px);
  }

  .home-page .sticker-reallife-v26{
    width:clamp(146px,18vw,206px);
    left:auto;
    right:clamp(72px,10vw,118px);
    top:clamp(385px,39vw,428px);
    transform:rotate(7deg);
  }

  .home-page .sticker-culture-v26{
    width:clamp(82px,9.5vw,110px);
    left:auto;
    right:clamp(30px,5vw,64px);
    top:clamp(356px,36vw,395px);
    transform:rotate(-2deg);
  }

  .home-page .sticker-ricepower-v26{
    width:clamp(112px,13vw,144px);
    left:auto;
    right:clamp(0px,2vw,26px);
    top:clamp(480px,47vw,515px);
    transform:rotate(-10deg);
  }
}

/* Mobile layout:
   art grows fluidly from compact phones to wide phones.
   Stickers use the same scale logic so the canvas does not feel emptier
   as the screen gets wider. */
@media (max-width:600px){

  .home-page .hero-main-row{
    gap:clamp(32px,8vw,44px);
  }

  .home-page .hero-copy-v23 h1{
    font-size:clamp(38px,11.2vw,44px);
  }

  .home-page .hero-copy-v23 p{
    font-size:clamp(16px,4.6vw,18px);
  }

  .home-page .hero-art-v23{
    width:clamp(240px,74vw,320px);
    height:auto;
    aspect-ratio:280 / 206.516;
    overflow:clip;
    isolation:isolate;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100%;
    height:93.58%;
    left:0;
    top:3.21%;
    object-fit:contain;
    z-index:2;
  }

  /* Restore the line art on mobile, but keep it strictly inside art bounds. */
  .home-page .hero-art-v23 .hero-squiggle-v31{
    display:block !important;
    width:clamp(265px,82vw,350px);
    height:clamp(265px,82vw,350px);
    left:clamp(-88px,-20vw,-54px);
    top:clamp(-38px,-8vw,-20px);
    opacity:.9;
    z-index:0 !important;
  }

  /* Sticker layer becomes a fluid decorative canvas. */
  .home-page .hero-stickers-v26{
    height:clamp(690px,190vw,820px);
  }

  .home-page .sticker-bapsim-v26{
    width:clamp(70px,24vw,96px);
    right:clamp(2px,2vw,10px);
    top:clamp(18px,6vw,28px);
    transform:rotate(10deg);
  }

  .home-page .sticker-culture-v26{
    width:clamp(62px,20vw,80px);
    right:clamp(-16px,-2vw,-6px);
    top:clamp(400px,112vw,445px);
    transform:rotate(-86deg);
  }

  .home-page .sticker-reallife-v26{
    width:clamp(126px,42vw,160px);
    right:clamp(-54px,-10vw,-24px);
    top:clamp(446px,124vw,492px);
    transform:rotate(13deg);
  }

  .home-page .sticker-ricepower-v26{
    width:clamp(94px,31vw,120px);
    left:clamp(12px,4vw,20px);
    top:clamp(676px,188vw,738px);
    transform:rotate(-11deg);
  }

  /* Starter artwork/card also grows naturally on wider phones. */
  .home-page .starter-card-v23{
    padding-inline:clamp(20px,6vw,28px);
  }

  .home-page .starter-image-v23{
    width:100%;
    max-width:420px;
    margin-inline:auto;
  }
}

/* Subtle interaction:
   keep decorative motion restrained and only on devices that actually hover. */
@media (hover:hover) and (pointer:fine){

  .home-page .hero-art-v23 .hero-characters-v23{
    transition:none;
    transform-origin:50% 85%;
  }

  .home-page .hero-stickers-v26 .sticker-v26{
    transition:filter .22s ease, translate .22s ease;
  }

  .home-page .hero-stickers-v26:hover .sticker-v26{
    filter:drop-shadow(0 5px 7px rgba(26,26,26,.10));
  }

  .home-page .starter-card-v23{
    transition:transform .22s ease, box-shadow .22s ease;
  }

  .home-page .starter-card-v23:hover{
    transform:translateY(-3px);
    box-shadow:10px 11px 0 #000;
  }
}

@media (prefers-reduced-motion:reduce){
  .home-page .hero-art-v23 .hero-characters-v23,
  .home-page .hero-stickers-v26 .sticker-v26,
  .home-page .starter-card-v23{
    transition:none !important;
    transform:none;
  }
}


/* =========================================================
   v34 — TRUE FLUID HERO ART
   Fixes:
   1) remove white squiggle entirely
   2) never hide stickers at intermediate widths
   3) character + sticker sizing responds visibly to viewport width
   ========================================================= */

/* White decorative squiggle removed on all breakpoints. */
.home-page .hero-art-v23 .hero-squiggle-v31{
  display:none !important;
}

/* Kill any older breakpoint rule that hid the sticker layer. */
.home-page .hero-stickers-v26{
  display:block !important;
}

/* -------------------- Desktop >= 1141 -------------------- */
@media (min-width:1141px){
  .home-page .hero-art-v23{
    width:clamp(400px,24vw,460px);
    height:auto;
    aspect-ratio:400 / 295;
    overflow:visible;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100%;
    height:auto;
    left:0;
    top:3.21%;
  }

  .home-page .sticker-bapsim-v26{
    width:clamp(110px,7.5vw,145px);
  }
  .home-page .sticker-reallife-v26{
    width:clamp(185px,12vw,225px);
  }
  .home-page .sticker-culture-v26{
    width:clamp(100px,6.8vw,125px);
  }
  .home-page .sticker-ricepower-v26{
    width:clamp(132px,8.6vw,160px);
  }
}

/* -------------------- Tablet / small desktop 601–1140 -------------------- */
@media (min-width:601px) and (max-width:1140px){
  .home-page .hero-main-row{
    grid-template-columns:minmax(0,1fr) minmax(340px,46vw);
    column-gap:clamp(24px,4vw,56px);
  }

  .home-page .hero-art-v23{
    width:min(46vw,430px);
    min-width:340px;
    height:auto;
    aspect-ratio:400 / 295;
    overflow:visible;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100%;
    height:auto;
    left:0;
    top:3.21%;
  }

  /* Make sticker sizes visibly scale with viewport width. */
  .home-page .sticker-bapsim-v26{
    display:block !important;
    width:clamp(86px,11vw,126px);
    right:clamp(-20px,-1vw,4px);
    top:clamp(18px,3vw,36px);
  }

  .home-page .sticker-culture-v26{
    display:block !important;
    width:clamp(78px,10vw,112px);
    right:clamp(22px,4.5vw,58px);
    top:clamp(345px,39vw,398px);
    transform:rotate(-2deg);
  }

  .home-page .sticker-reallife-v26{
    display:block !important;
    width:clamp(140px,19vw,210px);
    right:clamp(64px,10vw,112px);
    top:clamp(375px,42vw,432px);
    transform:rotate(7deg);
  }

  .home-page .sticker-ricepower-v26{
    display:block !important;
    width:clamp(108px,14vw,150px);
    right:clamp(-2px,1.5vw,18px);
    top:clamp(458px,49vw,520px);
    transform:rotate(-10deg);
  }
}

/* -------------------- Mobile <= 600 -------------------- */
@media (max-width:600px){
  .home-page .hero-art-v23{
    /* 300px phone -> ~236px art, 600px -> ~390px art */
    width:clamp(236px,65vw,390px);
    height:auto;
    aspect-ratio:400 / 295;
    overflow:visible;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100%;
    height:auto;
    left:0;
    top:3.21%;
  }

  .home-page .hero-stickers-v26{
    display:block !important;
    height:clamp(690px,155vw,900px);
  }

  /* Scale much more aggressively than v33. */
  .home-page .sticker-bapsim-v26{
    display:block !important;
    width:clamp(72px,20vw,118px);
    right:clamp(0px,2vw,12px);
    top:clamp(18px,5vw,30px);
    transform:rotate(10deg);
  }

  .home-page .sticker-culture-v26{
    display:block !important;
    width:clamp(64px,18vw,106px);
    right:clamp(-18px,-2vw,-4px);
    top:clamp(398px,103vw,482px);
    transform:rotate(-86deg);
  }

  .home-page .sticker-reallife-v26{
    display:block !important;
    width:clamp(130px,38vw,210px);
    right:clamp(-56px,-9vw,-22px);
    top:clamp(440px,115vw,530px);
    transform:rotate(13deg);
  }

  .home-page .sticker-ricepower-v26{
    display:block !important;
    width:clamp(96px,28vw,154px);
    left:clamp(12px,3vw,22px);
    top:clamp(666px,166vw,790px);
    transform:rotate(-11deg);
  }
}

/* Optional polish: image growth should feel smooth between layout widths. */
.home-page .hero-art-v23,
.home-page .hero-art-v23 .hero-characters-v23,
.home-page .hero-stickers-v26 .sticker-v26{
  transition:
    width .18s ease,
    height .18s ease,
    top .18s ease,
    left .18s ease,
    right .18s ease;
}

@media (prefers-reduced-motion:reduce){
  .home-page .hero-art-v23,
  .home-page .hero-art-v23 .hero-characters-v23,
  .home-page .hero-stickers-v26 .sticker-v26{
    transition:none !important;
  }
}


/* =========================================================
   v35 — STICKER04 BOUNDARY ANCHOR + SQUIGGLE HARD REMOVAL
   ========================================================= */

/* Squiggle was removed from HTML. This is only a defensive fallback. */
.home-page .hero-squiggle-v31,
.home-page .hero-art-v23 > img.hero-squiggle-v31{
  display:none !important;
}

/* sticker04 is no longer positioned in the hero overlay canvas.
   It is anchored to the top edge of the yellow meaning section,
   so changes in hero height cannot make it jump vertically. */
.home-page .meaning-band-v23{
  position:relative;
  overflow:visible;
}

.home-page .meaning-band-v23 .sticker-ricepower-boundary-v35{
  display:block !important;
  position:absolute;
  z-index:8;
  width:clamp(120px,8.5vw,156px);
  height:auto;
  top:-34px;
  right:max(18px, calc((100vw - 1080px) / 2));
  left:auto;
  transform:rotate(-10deg);
  pointer-events:none;
  user-select:none;
}

/* Tablet: same vertical anchor, only horizontal composition changes. */
@media (min-width:601px) and (max-width:900px){
  .home-page .meaning-band-v23 .sticker-ricepower-boundary-v35{
    width:clamp(116px,16vw,148px);
    top:-38px;
    right:24px;
    left:auto;
    transform:rotate(-10deg);
  }
}

/* Mobile Figma composition: sticker bridges the top-left of the yellow band. */
@media (max-width:600px){
  .home-page .meaning-band-v23 .sticker-ricepower-boundary-v35{
    width:clamp(96px,28vw,132px);
    top:-42px;
    left:clamp(12px,4vw,20px);
    right:auto;
    transform:rotate(-11deg);
  }
}

/* Neutralize all legacy sticker04 rules from older versions.
   The boundary class above is now the single source of truth. */
.home-page .hero-stickers-v26 .sticker-ricepower-v26{
  display:none !important;
}

@media (prefers-reduced-motion:reduce){
  .home-page .meaning-band-v23 .sticker-ricepower-boundary-v35{
    transition:none !important;
  }
}


/* =========================================================
   v36 — MOBILE STICKER SCALE + SAFE CTA STACKING
   ========================================================= */

/* Sticker01: make the default/mobile presence noticeably larger. */
@media (max-width:600px){
  .home-page .sticker-bapsim-v26{
    width:clamp(84px,24vw,128px);
    right:clamp(-2px,1vw,8px);
  }

  /* CTA/copy must always sit above decorative sticker02/03
     when narrow widths make their visual areas overlap. */
  .home-page .hero-copy-v23{
    position:relative;
    z-index:20;
  }

  .home-page .hero-cta-v23{
    position:relative;
    z-index:21;
  }

  .home-page .hero-stickers-v26{
    z-index:5;
  }

  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26{
    z-index:5 !important;
  }

  /* Character stays above the stickers, as in the intended composition. */
  .home-page .hero-art-v23{
    position:relative;
    z-index:8;
  }
}

/* Keep the same stacking behavior through the narrow-tablet transition,
   so there is no breakpoint where sticker02/03 suddenly cover the CTA. */
@media (min-width:601px) and (max-width:760px){
  .home-page .hero-copy-v23{
    position:relative;
    z-index:20;
  }

  .home-page .hero-cta-v23{
    position:relative;
    z-index:21;
  }

  .home-page .hero-stickers-v26{
    z-index:5;
  }

  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26{
    z-index:5 !important;
  }
}


/* =========================================================
   v37 — MOBILE CENTERED COMPOSITION (Figma 1975:413)
   Desktop/tablet remain as v36.
   Mobile <= 600px:
   - centered hero copy/CTA
   - sticker02/03 removed
   - sticker01 top-right
   - sticker04 bridges yellow band top-left
   ========================================================= */

@media (max-width:600px){

  .home-page .hero-main-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    padding:88px 0 48px;
  }

  .home-page .hero-copy-v23{
    width:100%;
    align-items:center;
    text-align:center;
  }

  .home-page .hero-copy-v23 h1{
    width:100%;
    margin:0;
    font-size:44px;
    line-height:1.2;
    text-align:center;
    letter-spacing:-.035em;
  }

  .home-page .hero-copy-v23 p{
    width:100%;
    margin:32px 0 0;
    font-size:18px;
    line-height:normal;
    text-align:center;
  }

  .home-page .hero-cta-v23{
    margin-top:48px;
    align-self:center;
    height:52px;
    min-height:52px;
    padding:0 20px;
    font-size:16px;
  }

  .home-page .hero-art-v23{
    width:clamp(260px,72vw,320px);
    height:auto;
    aspect-ratio:280 / 206.516;
    margin-inline:auto;
    overflow:visible;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100%;
    height:93.58%;
    left:0;
    top:3.21%;
    object-fit:contain;
  }

  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26{
    display:none !important;
  }

  .home-page .sticker-bapsim-v26{
    display:block !important;
    width:clamp(88px,24vw,110px);
    right:0;
    top:10px;
    transform:rotate(13.95deg);
    z-index:7;
  }

  .home-page .hero-stickers-v26{
    display:block !important;
    height:100%;
    z-index:6;
  }

  .home-page .meaning-band-v23{
    padding:48px 20px;
    overflow:visible;
  }

  .home-page .meaning-band-v23 > .home-container,
  .home-page .meaning-copy-v23{
    width:100%;
    max-width:none;
  }

  .home-page .meaning-copy-v23{
    align-items:center;
    gap:20px;
    text-align:center;
  }

  .home-page .meaning-copy-v23 h2{
    width:100%;
    margin:0;
    font-size:28px;
    line-height:1.2;
    text-align:center;
  }

  .home-page .meaning-copy-v23 p{
    width:100%;
    margin:0;
    font-size:16px;
    line-height:normal;
    text-align:center;
    white-space:normal;
  }

  .home-page .meaning-copy-v23 a{
    margin:0;
    font-size:18px;
    text-align:center;
  }

  .home-page .meaning-band-v23 .sticker-ricepower-boundary-v35{
    display:block !important;
    width:clamp(100px,29vw,126px);
    left:16px;
    right:auto;
    top:-36px;
    transform:rotate(-13.54deg);
  }

  .home-page .starter-heading-v23{
    text-align:center;
  }

  .home-page .starter-heading-v23 h2,
  .home-page .starter-heading-v23 > p:last-child{
    text-align:center;
  }
}


/* =========================================================
   v38 — BREAKPOINT RESTRUCTURE
   <= 470px   : centered layout + sticker02/03 hidden
   471–1079px : centered layout + sticker02/03 visible
   >= 1080px  : desktop layout
   ========================================================= */

/* ---------- Centered composition through 1079px ---------- */
@media (max-width:1079px){

  .home-page .hero-main-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:40px !important;
    padding:88px 0 48px !important;
  }

  .home-page .hero-copy-v23{
    width:100% !important;
    align-items:center !important;
    text-align:center !important;
  }

  .home-page .hero-copy-v23 h1,
  .home-page .hero-copy-v23 p{
    width:100% !important;
    text-align:center !important;
  }

  .home-page .hero-copy-v23 h1{
    margin:0 !important;
    font-size:clamp(44px,5vw,52px) !important;
    line-height:1.2 !important;
  }

  .home-page .hero-copy-v23 p{
    margin:32px 0 0 !important;
    font-size:18px !important;
  }

  .home-page .hero-cta-v23{
    align-self:center !important;
    margin-top:48px !important;
  }

  .home-page .hero-art-v23{
    width:clamp(280px,42vw,430px) !important;
    min-width:0 !important;
    height:auto !important;
    aspect-ratio:400 / 295 !important;
    margin-inline:auto !important;
    overflow:visible !important;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100% !important;
    height:auto !important;
    left:0 !important;
    top:3.21% !important;
  }

  /* Keep sticker01 in the top-right corner of the centered composition */
  .home-page .sticker-bapsim-v26{
    display:block !important;
    width:clamp(92px,11vw,126px) !important;
    right:clamp(0px,3vw,28px) !important;
    top:10px !important;
    transform:rotate(13.95deg) !important;
  }

  /* sticker02/03 remain visible above 470px, positioned around the art */
  .home-page .sticker-reallife-v26{
    display:block !important;
    width:clamp(150px,18vw,210px) !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:78px !important;
    transform:translateX(-8%) rotate(8deg) !important;
    z-index:5 !important;
  }

  .home-page .sticker-culture-v26{
    display:block !important;
    width:clamp(82px,10vw,112px) !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:102px !important;
    transform:translateX(70%) rotate(-4deg) !important;
    z-index:4 !important;
  }

  /* Center the yellow explanation area too */
  .home-page .meaning-copy-v23{
    align-items:center !important;
    text-align:center !important;
  }

  .home-page .meaning-copy-v23 h2,
  .home-page .meaning-copy-v23 p,
  .home-page .meaning-copy-v23 a{
    text-align:center !important;
  }

  /* Starter remains centered until desktop breakpoint */
  .home-page .starter-heading-v23{
    text-align:center !important;
  }
}

/* ---------- Compact mobile: remove sticker02/03 ---------- */
@media (max-width:470px){
  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26{
    display:none !important;
  }
}

/* ---------- Desktop begins at 1080px ---------- */
@media (min-width:1080px){

  .home-page .hero-main-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 400px !important;
    align-items:center !important;
    column-gap:64px !important;
    padding:88px 0 !important;
  }

  .home-page .hero-copy-v23{
    width:auto !important;
    align-items:flex-start !important;
    text-align:left !important;
  }

  .home-page .hero-copy-v23 h1,
  .home-page .hero-copy-v23 p{
    text-align:left !important;
  }

  .home-page .hero-copy-v23 h1{
    font-size:52px !important;
  }

  .home-page .hero-cta-v23{
    align-self:flex-start !important;
  }

  .home-page .hero-art-v23{
    width:400px !important;
    min-width:400px !important;
    height:295px !important;
    aspect-ratio:auto !important;
    margin-inline:0 !important;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100% !important;
    height:93.58% !important;
  }

  /* Revert sticker02/03 to the desktop cluster */
  .home-page .sticker-reallife-v26{
    display:block !important;
    left:480px !important;
    right:auto !important;
    top:417px !important;
    bottom:auto !important;
    width:206px !important;
    transform:rotate(7deg) !important;
    z-index:5 !important;
  }

  .home-page .sticker-culture-v26{
    display:block !important;
    left:590px !important;
    right:auto !important;
    top:392px !important;
    bottom:auto !important;
    width:110px !important;
    transform:rotate(-4deg) !important;
    z-index:4 !important;
  }

  .home-page .meaning-copy-v23{
    align-items:flex-start !important;
    text-align:left !important;
  }

  .home-page .meaning-copy-v23 h2,
  .home-page .meaning-copy-v23 p,
  .home-page .meaning-copy-v23 a{
    text-align:left !important;
  }
}


/* =========================================================
   v39 — FINAL RESPONSIVE BREAKPOINTS
   <= 640px   : centered layout, sticker02/03 hidden, hero title 44px
   641–1079px : centered layout, sticker02/03 visible, hero title 48px
   >= 1080px  : existing desktop layout
   Figma ref for mid layout: 1976:456
   ========================================================= */

/* ---------- Shared centered layout below desktop ---------- */
@media (max-width:1079px){

  .home-page .hero-main-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:40px !important;
    padding:88px 0 48px !important;
  }

  .home-page .hero-copy-v23{
    width:100% !important;
    align-items:center !important;
    text-align:center !important;
  }

  .home-page .hero-copy-v23 h1,
  .home-page .hero-copy-v23 p{
    width:100% !important;
    text-align:center !important;
  }

  .home-page .hero-copy-v23 p{
    margin:32px 0 0 !important;
    font-size:18px !important;
    line-height:normal !important;
  }

  .home-page .hero-cta-v23{
    align-self:center !important;
    margin-top:48px !important;
    height:52px !important;
    min-height:52px !important;
    padding:0 20px !important;
    font-size:16px !important;
  }

  .home-page .hero-art-v23{
    width:clamp(280px,36vw,360px) !important;
    min-width:0 !important;
    height:auto !important;
    aspect-ratio:280 / 206.516 !important;
    margin-inline:auto !important;
    overflow:visible !important;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100% !important;
    height:93.58% !important;
    left:0 !important;
    top:3.21% !important;
    object-fit:contain !important;
  }

  .home-page .meaning-copy-v23{
    align-items:center !important;
    text-align:center !important;
  }

  .home-page .meaning-copy-v23 h2,
  .home-page .meaning-copy-v23 p,
  .home-page .meaning-copy-v23 a{
    text-align:center !important;
  }

  .home-page .starter-heading-v23,
  .home-page .starter-heading-v23 h2,
  .home-page .starter-heading-v23 > p:last-child{
    text-align:center !important;
  }

  /* sticker01 follows centered composition */
  .home-page .sticker-bapsim-v26{
    display:block !important;
    width:96px !important;
    top:10px !important;
    right:auto !important;
    left:calc(50% + 188px) !important;
    transform:translateX(-50%) rotate(13.95deg) !important;
    z-index:7 !important;
  }
}

/* ---------- Compact mobile <= 640px ---------- */
@media (max-width:640px){

  .home-page .hero-copy-v23 h1{
    font-size:44px !important;
    line-height:1.2 !important;
    letter-spacing:-.035em !important;
  }

  /* remove sticker02 + sticker03 entirely on compact mobile */
  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26{
    display:none !important;
  }

  /* keep sticker01 tucked into upper-right like mobile Figma */
  .home-page .sticker-bapsim-v26{
    left:auto !important;
    right:0 !important;
    width:clamp(88px,22vw,104px) !important;
  }
}

/* ---------- Mid layout 641–1079px ---------- */
@media (min-width:641px) and (max-width:1079px){

  .home-page .hero-copy-v23 h1{
    font-size:48px !important;
    line-height:1.2 !important;
    letter-spacing:-.035em !important;
  }

  /* Mid Figma composition:
     sticker03 sits left of the centered character cluster,
     sticker02 overlaps slightly below it. */
  .home-page .sticker-culture-v26{
    display:block !important;
    width:78px !important;
    left:calc(50% - 216px) !important;
    right:auto !important;
    top:calc(50% + 94px) !important;
    bottom:auto !important;
    transform:translate(-50%,-50%) rotate(-90deg) !important;
    z-index:5 !important;
  }

  .home-page .sticker-reallife-v26{
    display:block !important;
    width:146px !important;
    left:calc(50% - 276px) !important;
    right:auto !important;
    top:calc(50% + 119px) !important;
    bottom:auto !important;
    transform:translate(-50%,-50%) rotate(16.03deg) !important;
    z-index:6 !important;
  }

  /* sticker04 on the right edge of yellow band, based on Figma */
  .home-page .meaning-band-v23 .sticker-ricepower-boundary-v35{
    width:120px !important;
    left:auto !important;
    right:calc(50% - 295px) !important;
    top:-42px !important;
    transform:rotate(-13.54deg) !important;
  }
}

/* ---------- Desktop >= 1080px ---------- */
@media (min-width:1080px){

  .home-page .hero-main-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 400px !important;
    align-items:center !important;
    column-gap:64px !important;
    padding:88px 0 !important;
  }

  .home-page .hero-copy-v23{
    width:auto !important;
    align-items:flex-start !important;
    text-align:left !important;
  }

  .home-page .hero-copy-v23 h1,
  .home-page .hero-copy-v23 p{
    text-align:left !important;
  }

  .home-page .hero-copy-v23 h1{
    font-size:52px !important;
  }

  .home-page .hero-cta-v23{
    align-self:flex-start !important;
  }

  .home-page .hero-art-v23{
    width:400px !important;
    min-width:400px !important;
    height:295px !important;
    aspect-ratio:auto !important;
    margin-inline:0 !important;
  }

  .home-page .hero-art-v23 .hero-characters-v23{
    width:100% !important;
    height:93.58% !important;
  }

  .home-page .meaning-copy-v23{
    align-items:flex-start !important;
    text-align:left !important;
  }

  .home-page .meaning-copy-v23 h2,
  .home-page .meaning-copy-v23 p,
  .home-page .meaning-copy-v23 a{
    text-align:left !important;
  }
}


/* =========================================================
   v40 — 601–640px sticker safety fix
   Hide sticker02/03 in this narrow transition range so they
   never overlap the centered hero CTA.
   ========================================================= */

@media (min-width:601px) and (max-width:640px){
  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26{
    display:none !important;
  }
}


/* =========================================================
   v42 — RESPONSIVE DECORATION SAFETY PASS
   Goal: decorative stickers must never cover functional/content text.
   ========================================================= */

/* Keep all hero copy / CTA above decorative layers at every non-desktop size. */
@media (max-width:1079px){
  .home-page .hero-copy-v23{
    position:relative !important;
    z-index:20 !important;
  }

  .home-page .hero-cta-v23{
    position:relative !important;
    z-index:21 !important;
  }

  .home-page .hero-art-v23{
    position:relative !important;
    z-index:10 !important;
  }

  .home-page .hero-stickers-v26{
    z-index:6 !important;
    pointer-events:none !important;
  }
}

/* =========================================================
   COMPACT MOBILE <= 640
   - sticker02 / sticker03: never render
   - sticker04: allowed to bridge the section edge, but a reserved
     top-safe-area keeps it away from heading/body/link.
   ========================================================= */
@media (max-width:640px){

  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* sticker01 remains in the empty top decoration zone only */
  .home-page .sticker-bapsim-v26{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:clamp(88px,22vw,104px) !important;
    left:auto !important;
    right:clamp(0px,2vw,8px) !important;
    top:10px !important;
    transform:rotate(13.95deg) !important;
    z-index:7 !important;
  }

  /* Reserve vertical space for sticker04 before meaning content begins. */
  .home-page .meaning-band-v23{
    position:relative !important;
    overflow:visible !important;
    padding-top:72px !important;
    padding-bottom:48px !important;
  }

  .home-page .meaning-band-v23 .sticker-ricepower-boundary-v35{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:clamp(96px,27vw,120px) !important;
    height:auto !important;
    left:clamp(12px,4vw,20px) !important;
    right:auto !important;
    top:-22px !important;
    transform:rotate(-11deg) !important;
    z-index:8 !important;
    pointer-events:none !important;
  }

  /* Meaning content becomes its own protected content layer. */
  .home-page .meaning-copy-v23{
    position:relative !important;
    z-index:12 !important;
    gap:20px !important;
  }

  .home-page .meaning-copy-v23 h2,
  .home-page .meaning-copy-v23 p,
  .home-page .meaning-copy-v23 a{
    position:relative !important;
    z-index:12 !important;
  }
}

/* =========================================================
   MID 641–1079
   Keep centered layout, sticker02/03 visible, but force them
   below functional copy/CTA and keep sticker04 out of meaning text.
   ========================================================= */
@media (min-width:641px) and (max-width:1079px){

  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26{
    pointer-events:none !important;
    z-index:6 !important;
  }

  .home-page .meaning-band-v23{
    position:relative !important;
    overflow:visible !important;
    padding-top:56px !important;
  }

  .home-page .meaning-band-v23 .sticker-ricepower-boundary-v35{
    width:120px !important;
    height:auto !important;
    top:-30px !important;
    z-index:8 !important;
    pointer-events:none !important;
  }

  .home-page .meaning-copy-v23{
    position:relative !important;
    z-index:12 !important;
  }
}

/* Desktop keeps the approved PC composition. */
@media (min-width:1080px){
  .home-page .meaning-copy-v23{
    position:relative;
    z-index:10;
  }
}


/* =========================================================
   v43 — HERO SPACING + STICKER01 SCALE FIX
   ========================================================= */

/* 1) Hero heading → practical copy:
   use one 32px gap only, not gap + margin. */
@media (max-width:1079px){
  .home-page .hero-copy-v23{
    gap:32px !important;
  }

  .home-page .hero-copy-v23 h1{
    margin:0 !important;
  }

  .home-page .hero-copy-v23 p{
    margin:0 !important;
  }

  /* CTA follows the same flex flow: remove the extra top margin. */
  .home-page .hero-cta-v23{
    margin-top:0 !important;
  }
}

/* Compact mobile keeps sticker01 responsive. */
@media (max-width:639px){
  .home-page .sticker-bapsim-v26{
    width:clamp(88px,22vw,104px) !important;
  }
}

/* 2) From 640px upward, sticker01 never becomes smaller than 104px.
   It can continue to grow naturally toward desktop. */
@media (min-width:640px) and (max-width:1079px){
  .home-page .sticker-bapsim-v26{
    width:clamp(104px,11vw,126px) !important;
  }
}

@media (min-width:1080px){
  .home-page .sticker-bapsim-v26{
    width:max(110px, min(7.5vw,145px)) !important;
  }
}


/* =========================================================
   v44 — MID-BREAKPOINT POSITION / STARTER GAP / PARALLAX
   ========================================================= */

/* 1) sticker01: preserve the same right-edge anchoring through
   the entire centered layout. No leftward jump at 641px. */
@media (min-width:641px) and (max-width:1079px){
  .home-page .sticker-bapsim-v26{
    left:auto !important;
    right:clamp(0px,2vw,18px) !important;
    top:10px !important;
    width:clamp(104px,11vw,126px) !important;
    transform:rotate(13.95deg) !important;
  }
}

/* 2) Starter card: keep image → copy spacing at a stable 20px
   throughout the centered 641–1079px composition. */
@media (min-width:641px) and (max-width:1079px){
  .home-page .starter-card-v23{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
  }

  .home-page .starter-image-v23{
    margin:0 auto !important;
  }

  .home-page .starter-copy-v23{
    margin:0 !important;
  }

  .home-page .starter-copy-v23 h3{
    margin-top:0 !important;
  }
}

/* Scroll interaction uses CSS custom properties written by JS.
   Combines a vertical settle (starts higher, drifts down) with a tilt on top of
   each sticker's existing fixed rotation, for a clearly noticeable motion. */
.home-page .sticker-bapsim-v26,
.home-page .sticker-reallife-v26,
.home-page .sticker-culture-v26,
.home-page .sticker-ricepower-boundary-v35{
  translate:0 var(--rp-scroll-y, 0px);
  rotate:var(--rp-scroll-rot, 0deg);
  will-change:transform;
}

/* Give each sticker a slightly different visual depth. */
.home-page .sticker-bapsim-v26{ --rp-depth:.20; }
.home-page .sticker-reallife-v26{ --rp-depth:.12; }
.home-page .sticker-culture-v26{ --rp-depth:.28; }
.home-page .sticker-ricepower-boundary-v35{ --rp-depth:.09; }

@media (prefers-reduced-motion:reduce){
  .home-page .sticker-bapsim-v26,
  .home-page .sticker-reallife-v26,
  .home-page .sticker-culture-v26,
  .home-page .sticker-ricepower-boundary-v35{
    translate:none !important;
    rotate:none !important;
    will-change:auto;
  }
}


/* =========================================================
   v45 — ABOUT / MEET THE RICEPOWER CREW
   Figma node 1898:429
   ========================================================= */

.about-crew-inner-v45{
  width:min(1080px, calc(100% - 40px));
  margin:0 auto;
  padding:80px 0;
}

.about-crew-heading-v45{
  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:end;
  gap:64px;
  margin-bottom:80px;
}

.about-crew-heading-v45 h2{
  margin:0;
  color:#333;
  font-family:Pretendard, sans-serif;
  font-size:48px;
  line-height:1.2;
  font-weight:800;
}

.about-crew-heading-v45 p{
  margin:0;
  padding:8px 0;
  color:#555;
  font-family:Pretendard, sans-serif;
  font-size:18px;
  line-height:1.5;
  font-weight:400;
}

.about-crew-card-v45{
  background:#fff;
  border:2px solid #333;
  border-radius:16px;
  box-shadow:8px 8px 0 #000;
  padding:20px 0;
  overflow:hidden;
}

.crew-member-v45{
  display:flex;
  align-items:center;
  gap:40px;
  padding:28px 40px 28px 28px;
  min-width:0;
  opacity:.9;
}

.crew-portrait-wrap-v45{
  width:216px;
  height:216px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 216px;
}

.crew-portrait-v45{
  width:200px;
  height:200px;
  border:2px solid #000;
  border-radius:16px;
  box-shadow:8px 8px 0 #000;
  overflow:hidden;
  background:#fff;
  transform-origin:center;
}

.crew-portrait-v45 img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:14px;
}

.crew-portrait-bob-v45{ transform:rotate(-4.68deg); }
.crew-portrait-kim-v45{ transform:rotate(3.57deg); }
.crew-portrait-dugi-v45{ transform:rotate(-4.37deg); }

.crew-copy-v45{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.crew-copy-v45 h3{
  margin:0;
  color:#1A1A1A;
  font-family:'Super Salad','Super_Salad',Impact,'Arial Narrow',sans-serif;
  font-size:40px;
  line-height:1;
  font-weight:400;
}

.crew-role-v45{
  margin:0;
  color:#555;
  font-family:'Google Sans Flex',Arial,sans-serif;
  font-size:18px !important;
  line-height:1.45 !important;
  font-weight:600;
  font-style:italic;
}

.crew-role-v45 span{
  color:#FF6A1F;
}

.crew-copy-v45 > p:last-child{
  margin:0;
  color:#555;
  font-family:Pretendard, sans-serif;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
}

/* Figma section background */
.about-page .crew-section,
.about-page .about-crew,
.about-page section:has(.about-crew-inner-v45){
  background:#FFC13B;
}

/* Tablet */
@media (max-width:1079px){
  .about-crew-inner-v45{
    width:min(100% - 40px, 820px);
  }

  .about-crew-heading-v45{
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
    margin-bottom:56px;
  }

  .about-crew-heading-v45 h2{
    font-size:42px;
  }

  .crew-member-v45{
    gap:32px;
    padding:26px 28px;
  }

  .crew-portrait-wrap-v45{
    width:190px;
    height:190px;
    flex-basis:190px;
  }

  .crew-portrait-v45{
    width:176px;
    height:176px;
  }
}

/* Mobile */
@media (max-width:640px){
  .about-crew-inner-v45{
    width:calc(100% - 40px);
    padding:64px 0;
  }

  .about-crew-heading-v45{
    margin-bottom:40px;
  }

  .about-crew-heading-v45 h2{
    font-size:36px;
  }

  .about-crew-heading-v45 p{
    font-size:16px;
    padding:0;
  }

  .about-crew-card-v45{
    padding:14px 0;
  }

  .crew-member-v45{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    padding:28px 20px 36px;
  }

  .crew-portrait-wrap-v45{
    width:100%;
    height:auto;
    flex-basis:auto;
  }

  .crew-portrait-v45{
    width:min(200px, 66vw);
    height:min(200px, 66vw);
  }

  .crew-copy-v45{
    gap:16px;
  }

  .crew-copy-v45 h3{
    font-size:36px;
  }

  .crew-role-v45{
    font-size:17px !important;
  }

  .crew-copy-v45 > p:last-child{
    font-size:15px;
  }
}
/* ===== Post detail page ===== */
.post-page{padding:56px 0 100px}
.post-back{display:inline-block;margin-bottom:24px;font-size:14px;color:var(--muted)}
.post-back:hover{color:var(--ink)}
.post-title{font-size:clamp(26px,4vw,38px);line-height:1.3;font-weight:800;margin:14px 0 12px;letter-spacing:-.02em}
.post-cover{width:100%;border-radius:var(--radius-lg);margin-bottom:28px;aspect-ratio:16/9;object-fit:cover}
.post-body{font-size:16px;line-height:1.75;color:var(--body)}
.post-link-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:#eef4ff;color:#1a56cc;
  font-size:13px;font-weight:600;
  padding:2px 10px;border-radius:999px;
  text-decoration:none;
  vertical-align:middle;
  transition:background .12s ease;
}
.post-link-btn:hover{background:#dbe8ff}
.post-link-btn:visited{color:#1a56cc}
.post-body p{margin:0 0 24px}
.post-body br{content:"";display:block;margin-bottom:10px}
.post-body h2{font-size:24px;font-weight:700;margin:34px 0 14px;letter-spacing:-.015em}
.post-body h3{font-size:20px;font-weight:700;margin:28px 0 12px}
.post-body h4{font-size:17px;font-weight:600;margin:22px 0 10px}
.post-body ul,.post-body ol{margin:0 0 18px 8px;padding-left:12px}
.post-body li{margin-bottom:6px}
.post-body ul ul,.post-body ol ol,.post-body ul ol,.post-body ol ul{margin:8px 0 8px 8px;padding-left:12px}
.post-body blockquote{border-left:3px solid var(--gold);padding-left:8px;color:var(--muted);font-style:italic;margin:20px 0}
.post-body img{max-width:100%;border-radius:var(--radius-md);margin:20px 0}
.post-body hr{border:none;border-top:1px solid var(--line);margin:48px 0}
.post-body pre{background:#f6f6f4;border-radius:var(--radius-md);padding:16px;overflow-x:auto;margin-bottom:18px}
.post-body code{font-family:monospace;font-size:14px}
.notion-callout{display:flex;gap:10px;border-radius:var(--radius-md);padding:14px 16px;margin:20px 0}
.notion-callout-icon{font-size:20px;line-height:1.5}
.notion-toggle{margin:18px 0}
.notion-toggle summary{cursor:pointer;font-weight:700}
.notion-toggle .toggle-body{margin-top:10px;padding-left:8px}
.notion-table{border-collapse:collapse;width:100%;margin:0;font-size:15px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0}
.notion-table td,.notion-table th{border:1px solid var(--line);padding:8px 12px;text-align:left}
.notion-table th{background:#f7f6f3;font-weight:700}
.notion-todo{margin-bottom:10px}
.post-page .post-tag{display:inline-flex;background:#eee;padding:3px 8px;font-size:11px;font-weight:600}


/* 히어로 CTA 버튼 클릭 시 스크롤 이동할 때, 고정 헤더에 가려지지 않도록 여백 확보 */
#starterGuide{scroll-margin-top:110px}





/* ===== Shop pages · Blog frame + Figma detail ===== */
/* Shop main intentionally shares Blog's outer layout, title and controls. */
.shop-page-v23 .shop-page>.container{
  width:min(calc(100% - 48px),1080px);
  max-width:1080px;
  margin-inline:auto;
}
.shop-page-v23 .shop-page{
  padding-top:72px;
  padding-bottom:110px;
  background:#fff;
}
.shop-page-v23 .shop-page h1{
  margin:0;
  font-size:40px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
  color:#333;
}
.shop-page .shop-controls{margin:26px 0 44px}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,300px));
  gap:48px 24px;
}
.shop-card{display:block;min-width:0}
.shop-thumb{width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden}
.shop-card-copy{padding-top:20px}
.shop-card .post-tags{display:flex;gap:6px;flex-wrap:wrap;min-height:20px;margin-bottom:12px}
.shop-card .post-tag{margin:0;border-radius:4px}
.shop-card h2{margin:0;font-size:18px;line-height:1.4;font-weight:600;color:#333}
.shop-price{margin:10px 0 0;font-size:18px;line-height:1.4;font-weight:600;color:var(--orange-deep)}
.shop-price.free{color:var(--green-deep)}
.shop-card:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Detail is a separate 920px frame, exactly as in Figma. */
.shop-detail-page{padding:56px 0 120px;background:#fff}
.shop-detail-shell{width:min(920px,calc(100% - 48px));margin:0 auto}
.shop-back{display:inline-block;margin:0 0 40px;color:#6e6c66;font-size:14px;line-height:1.4}
.shop-detail-top{display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:40px;align-items:stretch;width:100%}
.shop-cover{width:100%;height:auto;aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#d3d3d3;color:#333;font-size:28px;font-weight:700}
.shop-summary{height:auto;padding:20px 0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-width:0}
.shop-summary .post-tags{display:flex;gap:8px;align-items:center;margin:0 0 12px}
.shop-summary .post-tag{margin:0;min-height:20px;padding:1px 8px;border:0;border-radius:4px;background:#eee;color:#555;font-size:12px;line-height:18px}
.shop-summary h1{margin:0 0 4px;font-size:32px;line-height:1.3;font-weight:700;letter-spacing:-.32px;color:#333}
.shop-detail-price{margin:0 0 8px;font-size:24px;line-height:1.35;font-weight:700;letter-spacing:-.12px;color:#d94e0b}
.shop-detail-price.free{color:var(--green-deep)}
.shop-short{margin:0;color:#6e6c66;font-size:18px;line-height:28px;letter-spacing:-.72px}
.shop-url-btn{display:inline-flex;width:max-content;height:50px;align-items:center;justify-content:center;padding:0 20px;border:1px solid #000;border-radius:8px;background:#ffc13b;color:#262626;font-size:16px;line-height:1.2;font-weight:600}
.shop-detail-body{width:100%;margin-top:40px;padding-top:40px;border-top:1px solid #262626}
.shop-detail-body p{margin:0;color:#6e6c66;font-size:16px;line-height:1.7}

@media(max-width:768px){
  .shop-page-v23 .shop-page{padding-top:48px;padding-bottom:80px}
  .shop-page-v23 .shop-page h1{font-size:34px}
  .shop-page-v23 .shop-page>.container{width:calc(100% - 40px)}
  .shop-detail-page{padding:40px 0 80px}
  .shop-detail-shell{width:calc(100% - 40px)}
  .shop-back{margin-bottom:28px}
  .shop-detail-top{grid-template-columns:1fr;gap:28px}
  .shop-cover{width:100%;height:auto;aspect-ratio:1}
  .shop-summary{height:auto;min-height:300px;padding:0;gap:36px}
}
@media(max-width:480px){.shop-grid{gap:32px 16px}}