/*
Theme Name: Honey Pop Society Live
Theme URI: https://honeypopsociety.com/
Author: OpenAI
Description: Complete responsive Honey Pop Society website with giveaway homepage, live Klaviyo signup, official rules, privacy, terms, FAQ, about and contact pages.
Version: 18.0
Text Domain: hps-live
*/

:root{
  --pink:#f64b9a;
  --pink2:#ff85bd;
  --hot:#e93081;
  --lilac:#baa1ff;
  --purple:#5e3f87;
  --aqua:#8fe7ec;
  --mint:#9de6da;
  --yellow:#ffe58b;
  --ink:#4f356f;
  --cream:#fff9fc;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff8fc;
  color:var(--ink);
  font-family:'Fredoka',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

/* ---------- GLOBAL HEADER ---------- */
.hps-site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:
    linear-gradient(180deg,#ffd9ec 0%,#ffb9d9 42%,#ff98c8 100%);
  border-bottom:1px solid rgba(232,74,145,.22);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.60),
    0 8px 24px rgba(188,65,125,.12);
}
.hps-head{
  width:min(1520px,100%);
  margin:auto;
  min-height:112px;
  padding:12px 24px;
  display:grid;
  grid-template-columns:minmax(255px,320px) 1fr auto;
  align-items:center;
  gap:18px;
  position:relative;
}
.hps-head:after{
  content:none;
  display:none;
}
.hps-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.hps-brand .bear{
  width:72px;
  flex:0 0 auto;
  filter:drop-shadow(0 7px 6px rgba(117,55,88,.12));
}
.hps-brand .logo{
  width:238px;
  max-height:92px;
  object-fit:contain;
  filter:drop-shadow(0 7px 7px rgba(124,50,86,.10));
}
.hps-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
}
.hps-nav a{
  padding:12px 17px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#583a73;
  border:3px solid rgba(255,255,255,.78);
  background:linear-gradient(#fff,#f6efff);
  box-shadow:
    inset 0 4px 7px rgba(255,255,255,.85),
    0 6px 12px rgba(91,55,120,.13);
  transition:.18s ease;
}
.hps-nav a:nth-child(1){background:linear-gradient(#ff77b8,#ed3489);color:#fff}
.hps-nav a:nth-child(2){background:linear-gradient(#eee7ff,#c8b6ff)}
.hps-nav a:nth-child(3){background:linear-gradient(#e5fbff,#9fe6f1)}
.hps-nav a:nth-child(4){background:linear-gradient(#fff8ce,#ffe27a)}
.hps-nav a:nth-child(5){background:linear-gradient(#eafff9,#a9eadf)}
.hps-nav a:hover{transform:translateY(-2px) scale(1.03)}

.hps-socials{display:flex;gap:9px;align-items:center}
.hps-social{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:18px;
  border:3px solid rgba(255,255,255,.75);
  box-shadow:0 6px 12px rgba(89,51,110,.15),inset 0 4px 6px rgba(255,255,255,.22);
}
.hps-social.tt{background:#1b1726}
.hps-social.ig{background:linear-gradient(145deg,#ff744d,#ff2187 48%,#7550ff)}
.hps-menu-toggle{
  display:none;
  width:50px;height:50px;border:0;border-radius:50%;
  background:linear-gradient(#ff72b2,#ed3288);
  color:#fff;font-size:24px;font-weight:800;
  box-shadow:0 6px 12px rgba(89,51,110,.16),inset 0 4px 6px rgba(255,255,255,.28);
}

/* ---------- HERO ---------- */
.hps-hero{
  position:relative;
  background:linear-gradient(180deg,#dff3ff,#fff0f7);
  overflow:hidden;
}
.hps-hero-picture{
  display:block;
  line-height:0;
  width:100%;
}
.hps-hero-picture img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.hps-enter-hotspot{
  position:absolute;
  left:9.2%;
  top:61.5%;
  width:31.9%;
  height:11.0%;
  border-radius:999px;
  z-index:4;
}
.hps-enter-hotspot:focus-visible{outline:5px solid #fff;outline-offset:2px}

.hps-hero-mobile{display:none}

/* ---------- SHARED SECTIONS ---------- */
.hps-section{
  position:relative;
  padding:88px 24px;
  overflow:hidden;
}
.hps-wrap{
  width:min(1180px,100%);
  margin:auto;
  position:relative;
  z-index:2;
}
.hps-eyebrow{
  display:table;
  margin:0 auto 10px;
  background:#fff;
  color:var(--hot);
  border-radius:999px;
  border:3px solid #fff;
  padding:8px 18px;
  font-weight:700;
  box-shadow:0 7px 20px rgba(138,66,118,.11);
}
.hps-section-title{
  text-align:center;
  margin:0 0 38px;
  font-size:clamp(44px,5vw,68px);
  color:var(--hot);
  line-height:1;
  text-shadow:0 5px 0 #fff,0 10px 18px rgba(178,69,128,.10);
}

/* HOW TO ENTER */
#how-to-enter{
  background:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.85),transparent 17%),
    linear-gradient(180deg,#fff9fc,#fff0f8 60%,#f8efff);
}
.hps-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hps-step{
  padding:38px 30px 32px;
  border:5px solid rgba(255,255,255,.98);
  border-radius:44px;
  text-align:center;
  box-shadow:0 18px 38px rgba(97,62,131,.11),inset 0 5px 12px rgba(255,255,255,.5);
}
.hps-step:nth-child(1){background:linear-gradient(145deg,#ffdced,#ffb6d9)}
.hps-step:nth-child(2){background:linear-gradient(145deg,#eee4ff,#c7b1ff)}
.hps-step:nth-child(3){background:linear-gradient(145deg,#ddfbff,#96e8ec)}
.hps-step-icon{
  width:94px;height:94px;border-radius:30px;
  display:grid;place-items:center;
  margin:0 auto 20px;
  color:#fff;font-size:40px;font-weight:800;
  box-shadow:inset 0 5px 10px rgba(255,255,255,.3),0 9px 20px rgba(80,54,112,.12);
}
.hps-step:nth-child(1) .hps-step-icon{background:linear-gradient(#ff6cb4,#ed2c82)}
.hps-step:nth-child(2) .hps-step-icon{background:linear-gradient(#a379ff,#6d46d8)}
.hps-step:nth-child(3) .hps-step-icon{background:linear-gradient(#70dff0,#34b9d2)}
.hps-step h3{font-size:31px;line-height:1;margin:0 0 12px;color:#5f3d8f}
.hps-step:nth-child(1) h3{color:#e82f85}
.hps-step:nth-child(3) h3{color:#078fa0}
.hps-step p{margin:0;font-size:20px;line-height:1.35;font-weight:500}
.hps-social-row{display:flex;justify-content:center;gap:10px;margin-top:18px}
.hps-social-row a{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:700;font-size:14px
}
.hps-social-row .ig{background:linear-gradient(145deg,#ff744d,#ff2187 48%,#7550ff)}
.hps-social-row .tt{background:#1b1726}

/* KLAVIYO */
#hps-signup{
  background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.8),transparent 16%),
    radial-gradient(circle at 80% 30%,rgba(255,255,255,.72),transparent 19%),
    linear-gradient(135deg,#ffe6f3,#f6eaff 45%,#e8f8ff);
}
.hps-signup-grid{
  display:grid;
  grid-template-columns:250px 1fr 220px;
  gap:34px;
  align-items:center;
}
.hps-signup-bear img{
  width:100%;
  filter:drop-shadow(0 16px 18px rgba(117,68,95,.12));
}
.hps-signup-card{
  background:rgba(255,255,255,.78);
  border:5px solid #fff;
  border-radius:48px;
  padding:44px;
  box-shadow:0 18px 44px rgba(104,62,131,.11),inset 0 4px 16px rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  text-align:center;
}
.hps-signup-card h2{
  margin:0;
  color:var(--hot);
  font-size:clamp(38px,4.2vw,60px);
  line-height:1;
}
.hps-signup-card p{font-size:19px;line-height:1.4;margin:14px 0 24px}
.klaviyo-form-WF3TsQ{min-height:130px}
.hps-consent{
  font-size:13px!important;
  opacity:.72;
  margin:18px 0 0!important;
}
.hps-heart-card{
  min-height:215px;
  display:grid;place-items:center;
  text-align:center;
  padding:28px;
  color:#df3a86;
  font-size:27px;
  line-height:1.15;
  font-weight:600;
  background:linear-gradient(145deg,#fff,#ffd8eb);
  border:5px solid #fff;
  border-radius:48% 48% 46% 46%;
  box-shadow:0 17px 34px rgba(173,67,126,.11);
}

/* NEXT DROP */
#next-drop{background:linear-gradient(180deg,#f8efff,#ffe5f3)}
.hps-drop-grid{
  display:grid;
  grid-template-columns:270px 1fr 230px;
  gap:32px;
  align-items:center;
}
.hps-drop-copy h2{font-size:52px;color:#7350d9;line-height:1;margin:0 0 12px}
.hps-drop-copy p{font-size:22px;line-height:1.3;margin:0}
.hps-mystery-wrap{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  padding:28px;
  background:rgba(255,255,255,.86);
  border:5px solid #fff;
  border-radius:42px;
  box-shadow:0 16px 34px rgba(101,67,135,.10);
}
.hps-mystery{
  aspect-ratio:.72;
  border-radius:35% 35% 32% 32%;
  display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:44px;
  box-shadow:inset 0 5px 10px rgba(255,255,255,.27)
}
.hps-mystery:nth-child(1),.hps-mystery:nth-child(5){background:#e66ea7}
.hps-mystery:nth-child(2){background:#9b70de}
.hps-mystery:nth-child(3){background:#6ed0c8}
.hps-mystery:nth-child(4){background:#ffc55c}
.hps-weekly{
  aspect-ratio:1;
  border-radius:50%;
  display:grid;place-items:center;
  text-align:center;
  padding:24px;
  background:#ffe895;
  border:5px solid #fff;
  color:#ec3486;
  font-size:28px;
  font-weight:700;
  line-height:1.05;
  box-shadow:0 16px 30px rgba(165,105,48,.11);
}

/* FOOTER */
.hps-footer{
  background:linear-gradient(180deg,#f8b5d5,#f2a3ca);
  padding:56px 24px 36px;
  border-top:10px solid #ffd5e8;
}
.hps-footer-inner{
  width:min(1180px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:280px 1fr 180px;
  gap:30px;
  align-items:center;
}
.hps-footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.hps-footer-brand img:first-child{width:74px}
.hps-footer-brand img:last-child{width:185px}
.hps-footer-nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-weight:600}
.hps-footer-social{display:flex;justify-content:flex-end;gap:12px}
.hps-footer-social a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:800}
.hps-footer-social .tt{background:#1b1726}
.hps-footer-social .ig{background:linear-gradient(145deg,#ff744d,#ff2187 48%,#7550ff)}
.hps-footer-copy{grid-column:1/-1;text-align:center;font-size:13px;opacity:.7}

/* generic pages */
.hps-page{
  min-height:70vh;
  padding:80px 24px;
  background:linear-gradient(180deg,#fff,#fff2f9);
}
.hps-page article{
  width:min(900px,100%);
  margin:auto;
  background:#fff;
  padding:44px;
  border-radius:32px;
  box-shadow:0 16px 40px rgba(86,54,116,.08);
}
.hps-page h1{color:var(--hot);font-size:48px}

/* ---------- MOBILE ---------- */
@media(max-width:1180px){
  .hps-head{
    grid-template-columns:225px 1fr auto;
    min-height:105px;
    padding:10px 18px;
    gap:10px;
  }
  .hps-brand{gap:5px}
  .hps-brand .bear{width:54px}
  .hps-brand .logo{width:166px}
  .hps-nav{gap:5px}
  .hps-nav a{
    padding:10px 11px;
    font-size:12.5px;
    border-width:2px;
  }
  .hps-socials{gap:6px}
  .hps-social{
    width:40px;
    height:40px;
    font-size:14px;
    border-width:2px;
  }
}

@media(max-width:820px){
  .hps-head{
    grid-template-columns:minmax(0,1fr) auto;
    min-height:92px;
    padding:9px 12px;
    gap:8px;
  }
  .hps-brand{
    min-width:0;
    overflow:hidden;
  }
  .hps-brand .bear{
    width:48px;
    flex:0 0 48px;
  }
  .hps-brand .logo{
    width:min(175px,36vw);
    min-width:0;
  }
  .hps-nav{
    position:absolute;
    left:14px;right:14px;top:100%;
    display:none;
    padding:16px;
    border-radius:0 0 28px 28px;
    background:#ffacd1;
    box-shadow:0 12px 22px rgba(107,58,103,.14);
  }
  .hps-nav.open{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .hps-nav a{
    text-align:center;
    padding:12px 16px;
    font-size:14px;
  }
  .hps-socials{
    gap:5px;
    flex:0 0 auto;
  }
  .hps-social{
    width:40px;
    height:40px;
    font-size:13px;
  }
  .hps-menu-toggle{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    font-size:20px;
    flex:0 0 40px;
  }
}

@media(max-width:900px){
  .hps-hero-picture{display:block}
  .hps-enter-hotspot{display:block}
  .hps-hero-mobile{display:none}
  .hps-mobile-art{
    position:relative;
    line-height:0;
    width:100%;
    overflow:hidden;
    background:#fff1f8;
  }
  .hps-mobile-art img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
  }
  .hps-mobile-art-full{
    width:100%;
  }
  .hps-mobile-enter{
    position:absolute;
    left:8.5%;
    top:58.8%;
    width:32%;
    height:12%;
    z-index:3;
    border-radius:999px;
  }
  .hps-steps{grid-template-columns:1fr}
  .hps-signup-grid{grid-template-columns:1fr}
  .hps-signup-bear{max-width:220px;margin:auto}
  .hps-heart-card{max-width:260px;width:100%;margin:auto;min-height:170px}
  .hps-drop-grid{grid-template-columns:1fr}
  .hps-drop-copy{text-align:center}
  .hps-weekly{max-width:220px;width:100%;margin:auto}
  .hps-footer-inner{grid-template-columns:1fr;text-align:center}
  .hps-footer-brand{justify-content:center}
  .hps-footer-social{justify-content:center}
  .hps-footer-copy{grid-column:auto}
}

@media(max-width:600px){
  .hps-head{
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
    min-height:82px;
    padding:8px 10px;
  }
  .hps-brand{gap:3px;min-width:0}
  .hps-brand .bear{
    width:40px;
    flex-basis:40px;
  }
  .hps-brand .logo{
    width:min(140px,34vw);
  }
  .hps-socials{gap:4px}
  .hps-social{
    width:36px;
    height:36px;
    font-size:12px;
  }
  .hps-menu-toggle{
    width:36px;
    height:36px;
    font-size:18px;
    flex-basis:36px;
  }
  .hps-section{padding:62px 16px}
  .hps-section-title{font-size:44px;margin-bottom:28px}
  .hps-step{padding:30px 20px;border-radius:32px}
  .hps-step h3{font-size:28px}
  .hps-step p{font-size:18px}
  .hps-signup-card{padding:30px 18px;border-radius:34px}
  .hps-signup-card h2{font-size:39px}
  .hps-mystery-wrap{padding:12px;gap:6px}
  .hps-mystery{font-size:28px}
  .hps-footer-nav{gap:12px;font-size:14px}
}

@media(max-width:410px){
  .hps-brand .bear{width:34px;flex-basis:34px}
  .hps-brand .logo{width:min(112px,31vw)}
  .hps-social{width:32px;height:32px;font-size:11px}
  .hps-menu-toggle{width:32px;height:32px;font-size:16px;flex-basis:32px}
}

/* V16: one complete responsive hero image on every device */
.hps-hero-mobile{display:none!important}
.hps-hero-picture{display:block!important}
.hps-hero-picture img{
  width:100%!important;
  height:auto!important;
  max-width:none;
  object-fit:contain!important;
}

/* V17 hero quality lock */
.hps-hero{
  overflow:hidden;
  background:#fff3fa;
}
.hps-hero-picture{
  display:block!important;
  width:100%;
  line-height:0;
}
.hps-hero-picture img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  filter:none!important;
  image-rendering:auto;
}


/* =========================================================
   V18 INNER PAGES + FINAL SITE SYSTEM
   ========================================================= */

.hps-rules-link-wrap{
  text-align:center;
  margin-top:34px;
}
.hps-rules-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(#ff72b2,#ed3288);
  border:3px solid #fff;
  font-weight:700;
  box-shadow:
    inset 0 4px 7px rgba(255,255,255,.35),
    0 7px 0 #d82b78,
    0 14px 25px rgba(207,55,125,.16);
  transition:.18s ease;
}
.hps-rules-link:hover{
  transform:translateY(-2px);
  color:#fff;
}

.hps-subpage{
  min-height:70vh;
  background:
    radial-gradient(circle at 8% 10%,rgba(255,255,255,.82),transparent 14%),
    radial-gradient(circle at 90% 12%,rgba(223,248,255,.74),transparent 17%),
    linear-gradient(145deg,#fff5fb 0%,#f7efff 48%,#eafaff 100%);
}

.hps-subpage-hero{
  position:relative;
  overflow:hidden;
  padding:76px 24px 62px;
  text-align:center;
  background:
    radial-gradient(circle at 15% 30%,rgba(255,255,255,.86),transparent 13%),
    radial-gradient(circle at 80% 10%,rgba(255,255,255,.74),transparent 15%),
    linear-gradient(135deg,#ffd9ec,#f0e5ff 53%,#dff8ff);
  border-bottom:1px solid rgba(233,83,151,.10);
}
.hps-subpage-hero:before,
.hps-subpage-hero:after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  opacity:.5;
}
.hps-subpage-hero:before{
  width:210px;height:210px;
  background:#ffc4e1;
  left:-85px;top:-80px;
}
.hps-subpage-hero:after{
  width:240px;height:240px;
  background:#c8efff;
  right:-95px;bottom:-120px;
}
.hps-subpage-icon{
  width:82px;height:82px;
  margin:0 auto 16px;
  border-radius:28px;
  display:grid;
  place-items:center;
  font-size:36px;
  color:#fff;
  background:linear-gradient(145deg,#ff72b2,#ef348b);
  border:4px solid #fff;
  box-shadow:
    inset 0 5px 9px rgba(255,255,255,.32),
    0 12px 25px rgba(155,58,118,.14);
  position:relative;
  z-index:2;
}
.hps-subpage-hero h1{
  margin:0;
  position:relative;
  z-index:2;
  color:#e82f85;
  font-size:clamp(44px,6vw,76px);
  line-height:.98;
  text-shadow:0 5px 0 #fff,0 10px 20px rgba(174,71,127,.10);
}
.hps-subpage-hero p{
  width:min(760px,100%);
  margin:18px auto 0;
  position:relative;
  z-index:2;
  font-size:20px;
  line-height:1.45;
  color:#5b4076;
  font-weight:500;
}

.hps-content-shell{
  width:min(1040px,calc(100% - 36px));
  margin:0 auto;
  padding:56px 0 80px;
}
.hps-content-card{
  background:rgba(255,255,255,.88);
  border:4px solid #fff;
  border-radius:34px;
  padding:38px;
  margin-bottom:24px;
  box-shadow:
    0 18px 45px rgba(91,55,118,.08),
    inset 0 4px 14px rgba(255,255,255,.82);
}
.hps-content-card h2,
.hps-content-card h3{
  color:#e62f84;
  line-height:1.1;
}
.hps-content-card h2{
  font-size:31px;
  margin:0 0 16px;
}
.hps-content-card h3{
  font-size:22px;
  margin:26px 0 10px;
}
.hps-content-card p,
.hps-content-card li{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.72;
  color:#4e4260;
}
.hps-content-card ul,
.hps-content-card ol{
  padding-left:24px;
}
.hps-content-card a{
  color:#d92e7d;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.hps-content-card strong{
  color:#49366a;
}
.hps-updated{
  display:inline-block;
  margin-bottom:18px;
  padding:7px 13px;
  border-radius:999px;
  background:#f8eaff;
  color:#7047a4;
  font-size:13px;
  font-weight:700;
}

.hps-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:24px;
}
.hps-summary-box{
  border:4px solid #fff;
  border-radius:28px;
  padding:24px;
  text-align:center;
  background:linear-gradient(145deg,#fff,#ffeaf5);
  box-shadow:0 14px 30px rgba(105,67,128,.08);
}
.hps-summary-box:nth-child(2){
  background:linear-gradient(145deg,#fff,#efe7ff);
}
.hps-summary-box:nth-child(3){
  background:linear-gradient(145deg,#fff,#e3fbff);
}
.hps-summary-box span{
  display:block;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7a6590;
  font-weight:700;
  margin-bottom:8px;
}
.hps-summary-box strong{
  font-size:21px;
  line-height:1.2;
  color:#553a78;
}

.hps-notice{
  padding:20px 22px;
  border-radius:24px;
  background:#fff3c9;
  border:3px solid #fff;
  color:#5d4774;
  box-shadow:0 10px 24px rgba(146,111,61,.08);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
}
.hps-notice strong{color:#e03483}

.hps-faq-list{
  display:grid;
  gap:15px;
}
.hps-faq-item{
  background:#fff;
  border:4px solid #fff;
  border-radius:28px;
  padding:0;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(91,57,117,.07);
}
.hps-faq-item details{
  padding:0;
}
.hps-faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:23px 28px;
  color:#563878;
  font-size:20px;
  font-weight:700;
  position:relative;
}
.hps-faq-item summary::-webkit-details-marker{display:none}
.hps-faq-item summary:after{
  content:"+";
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  width:34px;height:34px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#ffe2f0;
  color:#e52e84;
}
.hps-faq-item details[open] summary:after{content:"–"}
.hps-faq-answer{
  padding:0 28px 24px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#51445d;
  font-size:16px;
  line-height:1.65;
}

.hps-about-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:28px;
  align-items:center;
}
.hps-about-mascot{
  background:linear-gradient(145deg,#fff,#ffe7f4);
  border:4px solid #fff;
  border-radius:38px;
  padding:24px;
  box-shadow:0 14px 35px rgba(105,64,120,.09);
}
.hps-about-mascot img{
  width:100%;
  filter:drop-shadow(0 14px 16px rgba(128,67,103,.11));
}
.hps-values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:24px;
}
.hps-value{
  text-align:center;
  padding:20px 16px;
  border-radius:24px;
  border:3px solid #fff;
  font-weight:700;
  color:#563b76;
}
.hps-value:nth-child(1){background:#ffd8eb}
.hps-value:nth-child(2){background:#e9e0ff}
.hps-value:nth-child(3){background:#dcfaff}

.hps-contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.hps-contact-box{
  background:#fff;
  border:4px solid #fff;
  border-radius:30px;
  padding:32px;
  box-shadow:0 15px 34px rgba(98,60,125,.08);
}
.hps-contact-box h2{
  color:#e52f84;
  margin:0 0 12px;
}
.hps-contact-email{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:14px 20px;
  border-radius:999px;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:700;
  background:linear-gradient(#ff73b2,#ed3187);
  box-shadow:0 7px 0 #d52b78;
}
.hps-contact-socials{
  display:flex;
  gap:12px;
  margin-top:18px;
}
.hps-contact-socials a{
  width:54px;height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:800;
}
.hps-contact-socials .ig{
  background:linear-gradient(145deg,#ff744d,#ff2187 48%,#7550ff);
}
.hps-contact-socials .tt{background:#1b1726}

.hps-small-print{
  font-size:13px!important;
  color:#776b80!important;
}
.hps-skill{
  display:inline-block;
  margin:10px 0;
  padding:12px 18px;
  border-radius:18px;
  background:#f4eaff;
  color:#5a3a81!important;
  font-size:20px!important;
  font-weight:700;
  letter-spacing:.02em;
}

@media(max-width:800px){
  .hps-summary-grid,
  .hps-values,
  .hps-contact-grid{
    grid-template-columns:1fr;
  }
  .hps-about-grid{
    grid-template-columns:1fr;
  }
  .hps-about-mascot{
    max-width:300px;
    margin:auto;
  }
  .hps-content-card{
    padding:28px 22px;
    border-radius:28px;
  }
  .hps-subpage-hero{
    padding:58px 18px 48px;
  }
}