:root{
  --navy:#18345f;
  --blue:#5576ff;
  --lavender:#846cff;
  --pink:#ef5ea8;
  --sky:#eaf7ff;
  --paper:#fffefd;
  --muted:#5c6d88;
  --line:#dfe8f4;
  --max:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--navy);
  background:
    radial-gradient(circle at 10% 10%, rgba(121,205,255,.15), transparent 34%),
    radial-gradient(circle at 92% 42%, rgba(245,127,190,.12), transparent 30%),
    linear-gradient(180deg,#fbfdff 0%,#ffffff 100%);
  font-family:"M PLUS Rounded 1c",system-ui,sans-serif;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(24px,calc((100vw - var(--max))/2));
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(38,76,128,.08);
}

.brand{
  font-family:"Nunito",sans-serif;
  font-weight:800;
  font-size:24px;
  letter-spacing:.02em;
}

.desktop-nav{
  display:flex;
  gap:36px;
  align-items:center;
  font-family:"Nunito",sans-serif;
  font-weight:800;
  font-size:13px;
}
.desktop-nav a{transition:.2s ease}
.desktop-nav a:hover{color:var(--blue)}

.menu-button,.mobile-menu{display:none}

.hero{
  position:relative;
  min-height:760px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(460px,.97fr);
  align-items:center;
  gap:28px;
  max-width:1480px;
  margin:0 auto;
  padding:74px 56px 88px;
}

.watercolor{
  position:absolute;
  width:420px;
  height:420px;
  filter:blur(22px);
  opacity:.45;
  border-radius:50%;
  pointer-events:none;
}
.watercolor-blue{
  left:-180px; top:80px;
  background:radial-gradient(circle,rgba(96,190,255,.32),rgba(122,110,255,.12) 44%,transparent 72%);
}
.watercolor-pink{
  right:-130px; bottom:-90px;
  background:radial-gradient(circle,rgba(255,117,184,.26),rgba(136,111,255,.12) 46%,transparent 72%);
}

.hero-copy{position:relative;z-index:2;max-width:690px}
.eyebrow,.section-label{
  margin:0 0 24px;
  color:#5f74a1;
  font-family:"Nunito",sans-serif;
  font-weight:800;
  letter-spacing:.15em;
  font-size:13px;
}

.hero-title{
  margin:0;
  line-height:1.15;
  letter-spacing:.01em;
  font-size:clamp(44px,4.7vw,74px);
  font-weight:800;
}
.hero-line{display:block}
.hero-line.secondary{margin-top:8px}
.koe{
  font-family:"Nunito",sans-serif;
  font-weight:800;
  color:var(--blue);
  letter-spacing:-.025em;
}
.hero-cross{
  display:block;
  width:max-content;
  margin:12px 0 6px 22%;
  font-family:"Nunito",sans-serif;
  font-size:.9em;
  font-weight:700;
  line-height:1;
  background:linear-gradient(135deg,var(--blue),var(--lavender),var(--pink));
  -webkit-background-clip:text;
  color:transparent;
}
.creator{
  display:block;
  width:max-content;
  margin-top:6px;
  font-family:"Nunito",sans-serif;
  font-weight:800;
  font-size:.94em;
  line-height:1;
  letter-spacing:.02em;
  background:linear-gradient(90deg,var(--blue) 0%,var(--lavender) 52%,var(--pink) 100%);
  -webkit-background-clip:text;
  color:transparent;
}

.hero-lead{
  max-width:610px;
  margin:36px 0 0;
  color:#465d7c;
  font-size:17px;
  line-height:2;
  font-weight:500;
}

.hero-visual{
  position:relative;
  z-index:2;
  margin:0;
  width:100%;
  border-radius:34px 10px 38px 16px;
  overflow:hidden;
  filter:drop-shadow(0 24px 40px rgba(62,91,142,.12));
}
.hero-visual:after{
  content:"";
  position:absolute;inset:0;
  box-shadow:inset 0 0 72px 24px rgba(255,255,255,.32);
  pointer-events:none;
}
.hero-visual img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}

.about{
  position:relative;
  max-width:var(--max);
  margin:20px auto 0;
  padding:110px 54px 130px;
}
.about:before{
  content:"";
  position:absolute;
  inset:24px -20px 0;
  border-radius:44px;
  background:
    radial-gradient(circle at 12% 80%,rgba(100,202,255,.11),transparent 32%),
    radial-gradient(circle at 84% 28%,rgba(246,100,179,.09),transparent 32%),
    rgba(255,255,255,.78);
  border:1px solid rgba(92,124,177,.1);
  z-index:-1;
}

.section-head{
  text-align:center;
  margin-bottom:72px;
}
.section-head .section-label{margin-bottom:14px}
.section-head h2{
  margin:0;
  font-size:clamp(34px,4vw,54px);
  line-height:1.45;
  letter-spacing:.04em;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 100px 1fr;
  align-items:start;
  gap:18px;
}

.about-side{padding:8px 10px}
.about-title-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.about-key{
  font-family:"Nunito",sans-serif;
  font-size:50px;
  font-weight:800;
  line-height:1;
}
.koe-side .about-key,.koe-side .about-jp{color:var(--blue)}
.create-side .about-key,.create-side .about-jp{color:var(--pink)}
.about-jp{font-size:22px;font-weight:700}
.about-description{
  text-align:center;
  margin:22px auto 36px;
  max-width:430px;
  color:#49617e;
  line-height:1.9;
}

.about-cross{
  align-self:center;
  justify-self:center;
  margin-top:86px;
  font-family:"Nunito",sans-serif;
  font-size:84px;
  font-weight:700;
  line-height:1;
  background:linear-gradient(135deg,var(--blue),var(--lavender),var(--pink));
  -webkit-background-clip:text;
  color:transparent;
}

.role-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.role-list li{
  min-height:128px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  gap:7px;
  padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center;
}
.role-icon{
  width:34px;
  height:34px;
  margin-bottom:6px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.koe-side .role-icon{color:var(--blue)}
.create-side .role-icon{color:var(--pink)}
.role-list span{font-weight:700;font-size:14px}
.role-list small{
  color:#71819a;
  font-family:"Nunito",sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
}

.placeholder-section{
  max-width:var(--max);
  margin:0 auto;
  padding:120px 54px 180px;
}
.placeholder-section h2{font-size:44px;margin:0 0 18px}
.placeholder-section p{line-height:1.9}

@media (max-width: 980px){
  .desktop-nav{display:none}
  .menu-button{
    display:block;border:0;background:none;color:var(--navy);
    font-family:"Nunito",sans-serif;font-weight:800;font-size:13px;
  }
  .mobile-menu{
    position:fixed;inset:78px 0 auto 0;z-index:45;
    display:none;flex-direction:column;
    padding:30px 24px 40px;background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a{padding:13px 0;font-family:"Nunito",sans-serif;font-weight:800}

  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:54px 24px 72px;
  }
  .hero-copy{max-width:none}
  .hero-visual{order:2;max-width:760px;justify-self:center}
  .hero-title{font-size:clamp(42px,9vw,68px)}
  .hero-cross{margin-left:12%}

  .about{padding:90px 24px 110px}
  .about-grid{grid-template-columns:1fr}
  .about-cross{margin:20px auto;font-size:66px}
  .role-list{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 620px){
  .site-header{height:66px;padding:0 18px}
  .brand{font-size:20px}
  .mobile-menu{inset:66px 0 auto}
  .hero{padding:38px 18px 64px}
  .eyebrow{margin-bottom:18px;font-size:11px}
  .hero-title{font-size:clamp(38px,11vw,54px);line-height:1.22}
  .hero-cross{margin:12px 0 6px 14%;font-size:.78em}
  .creator{font-size:.86em}
  .hero-lead{margin-top:28px;font-size:15px;line-height:1.95}
  .hero-visual{border-radius:28px 8px 32px 12px}

  .about{padding:76px 18px 90px}
  .about:before{inset:14px 8px 0;border-radius:30px}
  .section-head{margin-bottom:54px;text-align:left}
  .section-head h2{font-size:36px}
  .about-title-row{justify-content:flex-start}
  .about-description{text-align:left;margin-left:0}
  .role-list{grid-template-columns:repeat(2,1fr)}
  .role-list li{align-items:flex-start;text-align:left;min-height:88px}
  .placeholder-section{padding:90px 18px 130px}
  .placeholder-section h2{font-size:34px}
}


/* =========================
   HOW IT WORKS / CHALLENGE FLOW
========================= */
.how-intro,
.challenge-flow{
  max-width:var(--max);
  margin:0 auto;
  padding:112px 54px 126px;
  position:relative;
}
.how-intro{
  background:
    radial-gradient(circle at 8% 16%,rgba(105,197,255,.08),transparent 28%),
    radial-gradient(circle at 92% 14%,rgba(243,127,183,.08),transparent 28%);
}
.how-copy,
.challenge-lead{
  margin:22px auto 0;
  max-width:820px;
  text-align:center;
  color:#536985;
  font-size:16px;
  line-height:1.95;
}

.how-steps{
  margin-top:68px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.how-step{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:24px;
  align-items:center;
  min-height:150px;
  padding:0 34px;
}
.how-step + .how-step{border-left:1px dashed #d8deed}
.how-icon{
  width:108px;height:108px;border-radius:50%;
  display:grid;place-items:center;
}
.how-icon svg{
  width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.how-step h3{
  margin:0 0 12px;
  font-size:31px;
}
.how-step p{
  margin:0;
  padding-top:12px;
  font-size:15px;
  color:#546984;
  line-height:1.8;
  border-top:2px dotted currentColor;
}
.pink{--accent:#ef6797;--accent-soft:rgba(239,103,151,.09)}
.purple{--accent:#8d63de;--accent-soft:rgba(141,99,222,.09)}
.blue{--accent:#4d87ee;--accent-soft:rgba(77,135,238,.09)}
.how-step .how-icon,
.challenge-card .challenge-icon{color:var(--accent);background:var(--accent-soft)}
.how-step h3,
.challenge-card h3,
.challenge-card h4,
.challenge-no{color:var(--accent)}

.challenge-flow{
  padding-top:86px;
  padding-bottom:138px;
}
.challenge-flow:before{
  content:"";
  position:absolute;
  inset:24px 10px 32px;
  border-radius:44px;
  background:
    radial-gradient(circle at 8% 82%,rgba(239,103,151,.06),transparent 24%),
    radial-gradient(circle at 50% 18%,rgba(141,99,222,.06),transparent 22%),
    radial-gradient(circle at 92% 80%,rgba(77,135,238,.06),transparent 24%),
    rgba(255,255,255,.74);
  border:1px solid rgba(92,124,177,.09);
  z-index:-1;
}
.challenge-grid{
  margin-top:58px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.challenge-card{
  position:relative;
  padding:30px 28px 34px;
  border:1.5px solid color-mix(in srgb,var(--accent) 44%,white);
  border-radius:28px;
  background:rgba(255,255,255,.78);
  min-height:520px;
}
.challenge-card + .challenge-card:before{
  content:"";
  position:absolute;
  left:-22px;
  top:50%;
  transform:translateY(-50%);
  width:0;height:0;
  border-top:18px solid transparent;
  border-bottom:18px solid transparent;
  border-left:16px solid color-mix(in srgb,var(--accent) 72%,white);
  opacity:.82;
}
.challenge-top{
  display:flex;
  align-items:center;
  gap:18px;
}
.challenge-no{
  font-family:"Nunito",sans-serif;
  font-weight:800;
  font-size:50px;
  line-height:1;
  padding-right:18px;
  border-right:1px solid color-mix(in srgb,var(--accent) 34%,white);
}
.challenge-card h3{
  margin:0;
  font-size:29px;
}
.challenge-icon{
  width:130px;height:130px;border-radius:50%;
  display:grid;place-items:center;
  margin:30px auto 28px;
}
.challenge-icon svg{
  width:66px;height:66px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.challenge-card h4{
  margin:0 0 18px;
  text-align:center;
  font-size:21px;
}
.challenge-card p{
  margin:0;
  color:#495e79;
  font-size:15px;
  line-height:2;
  text-align:center;
}
.challenge-footer{
  margin:64px 0 0;
  text-align:center;
  font-size:28px;
  font-weight:700;
  letter-spacing:.05em;
  background:linear-gradient(90deg,#ef6797,#9b67ed,#4d87ee);
  -webkit-background-clip:text;
  color:transparent;
}

@media (max-width:980px){
  .how-intro,.challenge-flow{padding:94px 24px 108px}
  .how-steps{grid-template-columns:1fr;gap:22px}
  .how-step{padding:24px 0;grid-template-columns:96px 1fr}
  .how-step + .how-step{border-left:0;border-top:1px dashed #d8deed}
  .how-icon{width:84px;height:84px}
  .how-icon svg{width:44px;height:44px}
  .challenge-grid{grid-template-columns:1fr}
  .challenge-card{min-height:auto}
  .challenge-card + .challenge-card:before{
    left:50%; top:-24px; transform:translateX(-50%) rotate(90deg);
  }
}

@media (max-width:620px){
  .how-intro,.challenge-flow{padding:78px 18px 92px}
  .how-copy,.challenge-lead{text-align:left;font-size:15px}
  .how-steps{margin-top:44px}
  .how-step{grid-template-columns:78px 1fr;gap:16px}
  .how-icon{width:70px;height:70px}
  .how-icon svg{width:38px;height:38px}
  .how-step h3{font-size:26px}
  .challenge-grid{margin-top:42px}
  .challenge-card{padding:26px 20px 30px}
  .challenge-no{font-size:42px}
  .challenge-card h3{font-size:25px}
  .challenge-icon{width:108px;height:108px}
  .challenge-footer{font-size:22px;line-height:1.7}
}


/* =========================
   HOW IT WORKS unified v13
========================= */
.how-unified{
  max-width:var(--max);
  margin:0 auto;
  padding:112px 54px 138px;
  position:relative;
}
.how-unified:before{
  content:"";
  position:absolute;
  inset:24px 8px 26px;
  z-index:-1;
  border-radius:44px;
  background:
    radial-gradient(circle at 10% 82%,rgba(239,103,151,.055),transparent 24%),
    radial-gradient(circle at 50% 16%,rgba(141,99,222,.055),transparent 24%),
    radial-gradient(circle at 90% 82%,rgba(77,135,238,.055),transparent 24%),
    rgba(255,255,255,.76);
  border:1px solid rgba(92,124,177,.09);
}

.how-unified-lead{
  margin:18px 0 0;
  text-align:center;
  color:#50627d;
  font-size:21px;
  letter-spacing:.08em;
}

.how-unified-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:60px;
}

.how-unified-card{
  position:relative;
  min-height:500px;
  padding:30px 28px 34px;
  border:1.5px solid color-mix(in srgb,var(--accent) 42%,white);
  border-radius:28px;
  background:rgba(255,255,255,.8);
}

.how-unified-card + .how-unified-card:before{
  content:"";
  position:absolute;
  left:-23px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:17px solid transparent;
  border-bottom:17px solid transparent;
  border-left:15px solid color-mix(in srgb,var(--accent) 70%,white);
  opacity:.72;
}

.how-unified-top{
  display:flex;
  align-items:center;
  gap:18px;
}
.how-unified-no{
  font-family:"Nunito",sans-serif;
  font-size:50px;
  font-weight:800;
  line-height:1;
  color:var(--accent);
  padding-right:18px;
  border-right:1px solid color-mix(in srgb,var(--accent) 34%,white);
}
.how-unified-card h3{
  margin:0;
  color:var(--accent);
  font-size:29px;
}
.how-unified-icon{
  width:126px;
  height:126px;
  margin:30px auto 28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--accent);
  background:var(--accent-soft);
}
.how-unified-icon svg{
  width:64px;
  height:64px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.how-unified-card h4{
  margin:0 0 18px;
  color:var(--accent);
  text-align:center;
  font-size:21px;
}
.how-unified-card p{
  margin:0;
  text-align:center;
  color:#4c607c;
  font-size:15px;
  line-height:2;
}
.how-unified-footer{
  margin:64px 0 0;
  text-align:center;
  font-size:28px;
  font-weight:700;
  letter-spacing:.05em;
  background:linear-gradient(90deg,#ef6797,#9b67ed,#4d87ee);
  -webkit-background-clip:text;
  color:transparent;
}

@media (max-width:980px){
  .how-unified{padding:94px 24px 108px}
  .how-unified-grid{grid-template-columns:1fr}
  .how-unified-card{min-height:auto}
  .how-unified-card + .how-unified-card:before{
    left:50%;
    top:-24px;
    transform:translateX(-50%) rotate(90deg);
  }
}

@media (max-width:620px){
  .how-unified{padding:78px 18px 92px}
  .how-unified-lead{
    text-align:left;
    font-size:17px;
  }
  .how-unified-grid{margin-top:42px}
  .how-unified-card{padding:26px 20px 30px}
  .how-unified-no{font-size:42px}
  .how-unified-card h3{font-size:25px}
  .how-unified-icon{width:106px;height:106px}
  .how-unified-icon svg{width:54px;height:54px}
  .how-unified-footer{
    font-size:22px;
    line-height:1.7;
  }
}


/* v15 category list + hero factory tweaks */
.hero-visual{
  background:transparent;
  box-shadow:none;
  filter:none;
}
.hero-visual:after{
  display:none;
}
.hero-visual img{
  width:100%;
  height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.role-list{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 14px;
}
.role-list li{
  min-height:96px;
  padding:16px 8px 10px;
}
.role-list span{
  font-size:13px;
  line-height:1.45;
}
.role-list small{
  font-size:9px;
  line-height:1.3;
}

@media (max-width:980px){
  .role-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media (max-width:620px){
  .role-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* v16: hero illustration swap */
.hero-visual img{
  width:100%;
  height:auto;
  object-fit:contain;
  mix-blend-mode:normal;
}


/* =========================
   HERO fixes v17
========================= */
.hero{
  align-items:center;
}

.hero-visual{
  overflow:visible;
  border-radius:0;
  background:transparent;
}
.hero-visual img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  mix-blend-mode:normal;
}

/* Steps under HERO */
.hero-steps{
  max-width:var(--max);
  margin:-18px auto 0;
  padding:0 54px 74px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}

.hero-step{
  display:grid;
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:24px;
  min-height:145px;
  padding:0 34px;
}
.hero-step + .hero-step{
  border-left:1px dashed #d9deed;
}

.hero-step-icon{
  width:108px;
  height:108px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.hero-step-icon svg{
  width:58px;
  height:58px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hero-step-copy h3{
  margin:0;
  font-size:30px;
  line-height:1.2;
  font-weight:800;
}
.hero-step-copy span{
  display:block;
  margin-top:14px;
  height:2px;
  width:100%;
  border-radius:999px;
  background:currentColor;
  opacity:.65;
  position:relative;
}
.hero-step-copy span:after{
  content:"✦";
  position:absolute;
  right:-5px;
  top:50%;
  transform:translateY(-54%);
  font-size:14px;
  background:#fff;
  padding-left:6px;
}

.hero-step-pink{color:#ef6797}
.hero-step-purple{color:#8d63de}
.hero-step-blue{color:#4d87ee}

.hero-step-pink .hero-step-icon{background:rgba(239,103,151,.09)}
.hero-step-purple .hero-step-icon{background:rgba(141,99,222,.09)}
.hero-step-blue .hero-step-icon{background:rgba(77,135,238,.09)}

@media (max-width:980px){
  .hero-steps{
    padding:0 24px 60px;
    grid-template-columns:1fr;
  }
  .hero-step{
    padding:22px 0;
    grid-template-columns:88px 1fr;
  }
  .hero-step + .hero-step{
    border-left:0;
    border-top:1px dashed #d9deed;
  }
  .hero-step-icon{
    width:80px;
    height:80px;
  }
  .hero-step-icon svg{
    width:44px;
    height:44px;
  }
}

@media (max-width:620px){
  .hero-steps{
    padding:0 18px 48px;
  }
  .hero-step{
    grid-template-columns:70px 1fr;
    gap:16px;
    min-height:auto;
  }
  .hero-step-icon{
    width:64px;
    height:64px;
  }
  .hero-step-icon svg{
    width:36px;
    height:36px;
  }
  .hero-step-copy h3{
    font-size:24px;
  }
}


/* =========================
   HERO reference layout v18
========================= */
.hero-reference{
  position:relative;
  max-width:1480px;
  margin:0 auto;
  padding:74px 58px 76px;
  overflow:hidden;
}

.hero-reference-bg{
  position:absolute;
  pointer-events:none;
  z-index:-2;
  border-radius:50%;
  filter:blur(36px);
}
.hero-bg-blue{
  width:520px;height:520px;
  left:-220px;top:60px;
  background:radial-gradient(circle,rgba(102,198,255,.20),rgba(130,154,255,.06) 48%,transparent 74%);
}
.hero-bg-pink{
  width:460px;height:460px;
  right:-180px;bottom:-100px;
  background:radial-gradient(circle,rgba(248,130,190,.15),rgba(161,124,255,.05) 48%,transparent 74%);
}

.hero-reference-main{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
  gap:40px;
  align-items:center;
}

.hero-reference-copy{
  padding-left:20px;
}
.hero-reference-copy h1{
  margin:0;
  font-size:clamp(52px,5.25vw,84px);
  line-height:1.2;
  letter-spacing:.02em;
  font-weight:700;
  color:#273653;
}
.hero-reference-copy h1 > span{
  display:inline;
}
.hero-reference-copy h1 strong{
  display:block;
  margin-top:14px;
  font-size:1.08em;
  font-weight:700;
  color:#2f3b52;
}
.hero-gradient{
  font-weight:800;
  background:linear-gradient(90deg,#ef6e9b 0%,#c76ce8 48%,#6e8fff 100%);
  -webkit-background-clip:text;
  color:transparent;
}
.hero-reference-body{
  margin-top:34px;
  color:#3e4f69;
  font-size:17px;
  line-height:1.95;
  font-weight:500;
}
.hero-reference-body p{
  margin:0 0 22px;
}
.hero-reference-body p:last-child{margin-bottom:0}

.hero-reference-visual{
  margin:0;
  align-self:center;
}
.hero-reference-visual img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.hero-sparkle{
  position:absolute;
  z-index:1;
  font-size:24px;
  opacity:.75;
  background:linear-gradient(180deg,#ef7ca4,#8da4ff);
  -webkit-background-clip:text;
  color:transparent;
  pointer-events:none;
}
.hs1{left:46px;top:108px}
.hs2{left:82px;bottom:90px}
.hs3{right:58px;top:92px}
.hs4{right:112px;bottom:72px}

.hero-reference-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:22px;
  padding:0 36px;
}
.hero-ref-step{
  display:grid;
  grid-template-columns:128px 1fr;
  align-items:center;
  gap:24px;
  min-height:150px;
  padding:0 28px;
}
.hero-ref-step + .hero-ref-step{
  border-left:1px dashed #d9deed;
}
.hero-ref-icon{
  width:116px;
  height:116px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.hero-ref-icon svg{
  width:60px;height:60px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-ref-label h3{
  margin:0;
  font-size:31px;
  line-height:1.2;
  font-weight:800;
}
.hero-ref-label i{
  display:block;
  position:relative;
  height:2px;
  margin-top:14px;
  border-radius:999px;
  background:currentColor;
  opacity:.65;
}
.hero-ref-label i:after{
  content:"✦";
  position:absolute;
  right:-4px;
  top:50%;
  transform:translateY(-55%);
  background:#fff;
  padding-left:7px;
  font-style:normal;
  font-size:14px;
}

.pink-step{color:#ef6797}
.purple-step{color:#8d63de}
.blue-step{color:#4d87ee}
.pink-step .hero-ref-icon{background:rgba(239,103,151,.09)}
.purple-step .hero-ref-icon{background:rgba(141,99,222,.09)}
.blue-step .hero-ref-icon{background:rgba(77,135,238,.09)}

@media (max-width:980px){
  .hero-reference{
    padding:56px 24px 64px;
  }
  .hero-reference-main{
    grid-template-columns:1fr;
    gap:28px;
  }
  .hero-reference-copy{padding-left:0}
  .hero-reference-visual{
    max-width:760px;
    margin:0 auto;
  }
  .hero-reference-steps{
    grid-template-columns:1fr;
    padding:0;
    margin-top:34px;
  }
  .hero-ref-step{
    padding:22px 0;
    grid-template-columns:92px 1fr;
  }
  .hero-ref-step + .hero-ref-step{
    border-left:0;
    border-top:1px dashed #d9deed;
  }
  .hero-ref-icon{
    width:82px;height:82px;
  }
  .hero-ref-icon svg{
    width:44px;height:44px;
  }
}

@media (max-width:620px){
  .hero-reference{
    padding:38px 18px 52px;
  }
  .hero-reference-copy h1{
    font-size:clamp(40px,11vw,56px);
    line-height:1.22;
  }
  .hero-reference-copy h1 strong{
    font-size:1em;
    margin-top:10px;
  }
  .hero-reference-body{
    margin-top:26px;
    font-size:15px;
    line-height:1.9;
  }
  .hero-ref-step{
    grid-template-columns:70px 1fr;
    gap:16px;
    padding:18px 0;
  }
  .hero-ref-icon{
    width:64px;height:64px;
  }
  .hero-ref-icon svg{
    width:36px;height:36px;
  }
  .hero-ref-label h3{
    font-size:24px;
  }
}


/* =========================
   HERO image + typography refinement v20
========================= */
.hero-reference{
  padding-top:68px;
  padding-bottom:68px;
}

.hero-reference-main{
  grid-template-columns:minmax(0,.94fr) minmax(560px,1.06fr);
  gap:44px;
}

.hero-reference-copy{
  padding-left:18px;
  min-width:0;
}

.hero-v20-title{
  margin:0;
  color:#273653;
  font-weight:700;
  line-height:1.16;
  letter-spacing:.012em;
}

.hero-v20-line{
  display:block;
  white-space:nowrap;
  font-size:clamp(48px,4.25vw,70px);
}

.hero-v20-second{
  margin-top:12px;
  color:#2f3b52;
  font-size:clamp(52px,4.65vw,76px);
  font-weight:700;
}

.hero-reference-body{
  margin-top:32px;
  max-width:590px;
  font-size:16px;
  line-height:1.95;
}

.hero-reference-visual{
  width:100%;
  max-width:760px;
  justify-self:end;
  align-self:center;
  overflow:hidden;
  border-radius:28px;
}

.hero-reference-visual img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}

.hero-reference-steps{
  margin-top:26px;
}

@media (max-width:1180px){
  .hero-reference-main{
    grid-template-columns:minmax(0,.92fr) minmax(500px,1.08fr);
    gap:34px;
  }
  .hero-v20-line{
    font-size:clamp(44px,4.2vw,60px);
  }
  .hero-v20-second{
    font-size:clamp(48px,4.5vw,66px);
  }
}

@media (max-width:980px){
  .hero-reference-main{
    grid-template-columns:1fr;
  }
  .hero-reference-copy{
    padding-left:0;
  }
  .hero-v20-line,
  .hero-v20-second{
    white-space:normal;
  }
  .hero-reference-visual{
    justify-self:center;
    max-width:760px;
  }
}

@media (max-width:620px){
  .hero-v20-line{
    font-size:clamp(36px,10.3vw,48px);
    line-height:1.2;
  }
  .hero-v20-second{
    margin-top:8px;
    font-size:clamp(40px,11vw,52px);
    line-height:1.2;
  }
}


/* =========================
   v21 HERO hierarchy
========================= */
.hero-v20-line{
  font-size:clamp(54px,4.95vw,80px);
  font-weight:800;
}
.hero-v20-second{
  margin-top:12px;
  font-size:clamp(48px,4.25vw,70px);
  font-weight:700;
}
@media (max-width:1180px){
  .hero-v20-line{
    font-size:clamp(48px,4.7vw,68px);
  }
  .hero-v20-second{
    font-size:clamp(44px,4.2vw,62px);
  }
}
@media (max-width:620px){
  .hero-v20-line{
    font-size:clamp(40px,11.4vw,54px);
  }
  .hero-v20-second{
    font-size:clamp(36px,10.2vw,48px);
  }
}


/* =========================
   v21 ABOUT role icons
========================= */
.role-list li{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.role-icon{
  width:34px;
  height:34px;
  margin:0 0 9px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.koe-side .role-icon{
  color:#5a76ff;
}
.create-side .role-icon{
  color:#ef5ea8;
}


/* =========================
   TEAM / VOICE ACTORS v22
========================= */
.team-section{
  max-width:var(--max);
  margin:0 auto;
  padding:118px 54px 140px;
  position:relative;
}
.team-section:before{
  content:"";
  position:absolute;
  inset:28px 4px 22px;
  z-index:-1;
  border-radius:46px;
  background:
    radial-gradient(circle at 8% 12%,rgba(239,103,151,.07),transparent 24%),
    radial-gradient(circle at 50% 8%,rgba(141,99,222,.06),transparent 22%),
    radial-gradient(circle at 92% 18%,rgba(77,135,238,.07),transparent 24%),
    rgba(255,255,255,.78);
  border:1px solid rgba(92,124,177,.09);
}
.team-head{margin-bottom:64px}
.team-head h2{
  font-family:"Nunito",sans-serif;
  font-weight:800;
  letter-spacing:.015em;
}
.team-lead{
  margin:16px 0 0;
  text-align:center;
  color:#536985;
  font-size:18px;
  letter-spacing:.05em;
}
.voice-actor-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.voice-actor-card{
  --actor:#ef6797;
  --actor-soft:rgba(239,103,151,.09);
  border:1.5px solid color-mix(in srgb,var(--actor) 38%,white);
  border-radius:30px;
  padding:18px;
  background:rgba(255,255,255,.84);
  box-shadow:0 18px 44px rgba(56,88,142,.05);
}
.actor-pink{--actor:#ef6797;--actor-soft:rgba(239,103,151,.09)}
.actor-purple{--actor:#8d63de;--actor-soft:rgba(141,99,222,.09)}
.actor-blue{--actor:#4d87ee;--actor-soft:rgba(77,135,238,.09)}
.voice-actor-portrait{
  position:relative;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.88),transparent 20%),
    linear-gradient(145deg,var(--actor-soft),rgba(255,255,255,.85));
  color:var(--actor);
}
.voice-actor-portrait:before,
.voice-actor-portrait:after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--actor) 22%,white);
}
.voice-actor-portrait:before{
  width:210px;height:210px;top:18%;left:50%;transform:translateX(-50%);
}
.voice-actor-portrait:after{
  width:140px;height:140px;top:28%;left:50%;transform:translateX(-50%);
}
.portrait-mark{
  position:relative;z-index:2;
  font-family:"Nunito",sans-serif;
  font-size:72px;line-height:1;font-weight:800;opacity:.72;
}
.voice-actor-portrait > span{
  position:relative;z-index:2;
  font-family:"Nunito",sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.18em;
}
.voice-actor-info{padding:22px 8px 8px}
.voice-actor-index{
  margin:0 0 7px;color:var(--actor);
  font-family:"Nunito",sans-serif;font-size:11px;font-weight:800;letter-spacing:.13em;
}
.voice-actor-info h3{margin:0;color:#273653;font-size:27px}
.voice-actor-note{
  margin:10px 0 22px;color:#64758e;font-size:13px;line-height:1.75;
}
.voice-sample-list{display:grid;gap:9px}
.voice-sample{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(92px,1fr) minmax(70px,1.2fr) 38px;
  gap:10px;align-items:center;
  padding:12px;border:1px solid color-mix(in srgb,var(--actor) 20%,white);
  border-radius:14px;background:#fff;color:#42536d;cursor:pointer;text-align:left;
  transition:.2s ease;font:inherit;
}
.voice-sample:hover{
  border-color:color-mix(in srgb,var(--actor) 50%,white);
  background:color-mix(in srgb,var(--actor-soft) 55%,white);
}
.voice-sample.is-playing{border-color:var(--actor);background:var(--actor-soft)}
.sample-play{
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--actor-soft);color:var(--actor);font-size:11px;
}
.sample-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.sample-meta strong{
  color:#273653;font-family:"Nunito",sans-serif;font-size:11px;letter-spacing:.06em;
}
.sample-meta small{
  color:#75859c;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sample-progress{height:3px;border-radius:999px;background:#e7ebf3;overflow:hidden}
.sample-progress i{
  display:block;width:0%;height:100%;border-radius:inherit;background:var(--actor);
}
.sample-time{
  color:#8090a6;font-family:"Nunito",sans-serif;font-size:10px;text-align:right;
}
.team-organize{
  margin-top:92px;padding-top:46px;border-top:1px solid #e3e8f1;
}
.organize-heading{
  display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px;
}
.organize-heading .section-label{margin:0}
.organize-heading h3{margin:0;color:#273653;font-size:27px}
.organize-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.organize-grid article{padding:25px 0 10px;border-top:2px solid #dce4f0}
.organize-no{
  display:block;margin-bottom:16px;color:#9aabc2;
  font-family:"Nunito",sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em;
}
.organize-grid h4{margin:0 0 8px;color:#273653;font-size:24px}
.organize-grid p{
  margin:0;color:#72839a;font-family:"Nunito",sans-serif;
  font-size:11px;font-weight:700;line-height:1.7;letter-spacing:.035em;
}
@media (max-width:980px){
  .team-section{padding:96px 24px 114px}
  .voice-actor-grid{
    display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 14px;
  }
  .voice-actor-card{flex:0 0:min(78vw,390px);scroll-snap-align:start}
  .organize-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .team-section{padding:80px 18px 96px}
  .team-head{text-align:left}
  .team-lead{text-align:left;font-size:16px}
  .voice-actor-card{flex-basis:84vw}
  .voice-actor-info h3{font-size:24px}
  .voice-sample{grid-template-columns:32px minmax(88px,1fr) 34px}
  .sample-progress{grid-column:2 / -1;grid-row:2}
  .sample-time{grid-column:3;grid-row:1}
  .organize-heading{align-items:start;flex-direction:column}
}


/* =========================
   v23 real portrait photos
========================= */
.voice-actor-portrait{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:24px;
  background:#f8fafc;
}
.voice-actor-portrait img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.voice-actor-portrait:before,
.voice-actor-portrait:after{
  display:none;
}
.portrait-mark{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 24px rgba(29,51,89,.10);
  font-size:18px;
  font-weight:800;
  opacity:1;
}
.actor-pink .portrait-mark{color:#ef6797}
.actor-purple .portrait-mark{color:#8d63de}
.actor-blue .portrait-mark{color:#4d87ee}

.voice-actor-card{
  padding:18px;
}


/* =========================
   v24 organizer photos
========================= */
.organize-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.organize-card{
  padding:0 0 14px;
  border-top:none !important;
}

.organize-photo{
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:24px;
  margin-bottom:18px;
  background:#f8fafc;
  box-shadow:0 14px 34px rgba(56,88,142,.06);
}
.organize-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.organize-no{
  margin-bottom:12px;
}

.organize-card h4{
  margin:0 0 8px;
}

.organize-card p{
  margin:0;
}

@media (max-width:980px){
  .organize-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .organize-card{
    max-width:420px;
  }
}


/* =========================
   v25 responsive + voice toggle
========================= */

/* Toggle area for voice samples */
.voice-samples-toggle{
  margin-top:8px;
  border:1px solid color-mix(in srgb,var(--actor) 18%,white);
  border-radius:16px;
  background:rgba(255,255,255,.76);
  overflow:hidden;
}
.voice-samples-toggle summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  cursor:pointer;
  user-select:none;
  color:#31435f;
  font-family:"Nunito",sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
}
.voice-samples-toggle summary::-webkit-details-marker{
  display:none;
}
.voice-samples-toggle summary b{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--actor-soft);
  color:var(--actor);
  font-size:18px;
  line-height:1;
  transition:transform .2s ease;
}
.voice-samples-toggle[open] summary b{
  transform:rotate(45deg);
}
.voice-samples-toggle .voice-sample-list{
  padding:0 12px 12px;
}

/* Keep card spacing neat */
.voice-actor-note{
  margin:10px 0 16px;
}

/* Organizer photo card tidy */
.organize-card{
  padding:0 0 14px;
}
.organize-photo{
  aspect-ratio:1 / 1;
}
.organize-photo img{
  object-fit:cover;
  object-position:center;
}

/* Mobile: stack actor cards instead of horizontal scroll */
@media (max-width:980px){
  .voice-actor-grid{
    display:grid !important;
    grid-template-columns:1fr;
    gap:22px;
    overflow:visible;
    padding:0;
  }
  .voice-actor-card{
    flex:none;
    width:100%;
    max-width:none;
  }
}

/* Slightly tighter portrait blocks on narrow screens */
@media (max-width:620px){
  .voice-actor-card{
    padding:16px;
  }
  .voice-actor-portrait{
    border-radius:20px;
  }
  .organize-card{
    max-width:100%;
  }
}


/* =========================
   v26 social links
========================= */
.social-links{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 18px;
}
.social-link{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #dfe5ef;
  background:rgba(255,255,255,.88);
  color:#42536d;
  transition:.2s ease;
}
.social-link:hover{
  transform:translateY(-2px);
  border-color:currentColor;
  background:#fff;
}
.social-link svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.social-x:hover{color:#111}
.social-instagram:hover{color:#d94d86}
.social-tiktok:hover{color:#5b55e8}

/* Actor cards inherit their accent a little more softly */
.voice-actor-card .social-link{
  border-color:color-mix(in srgb,var(--actor) 18%,white);
}
.voice-actor-card .social-link:hover{
  color:var(--actor);
  border-color:var(--actor);
}

/* Organizer cards */
.organize-card .social-links{
  margin:14px 0 0;
}
.organize-card .social-link{
  width:34px;
  height:34px;
}

@media (max-width:620px){
  .social-link{
    width:38px;
    height:38px;
  }
}


/* =========================
   v27 ABOUT icon cards
========================= */
.role-list-large{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:28px;
}

.role-list-large li{
  list-style:none;
  min-height:186px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:18px 14px 16px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(112,138,183,.14);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(85, 104, 148, .06);
  transition:transform .2s ease, box-shadow .2s ease;
}

.role-list-large li:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(85, 104, 148, .10);
}

.role-visual{
  width:88px;
  height:88px;
  border-radius:24px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
}
.role-koe{
  background:linear-gradient(180deg, rgba(113,153,255,.14), rgba(123,106,248,.07));
}
.role-create{
  background:linear-gradient(180deg, rgba(255,112,170,.14), rgba(194,114,255,.08));
}
.role-visual img{
  max-width:72px;
  max-height:72px;
  width:auto;
  height:auto;
  display:block;
}

.role-list-large li span{
  display:block;
  color:#173159;
  font-size:24px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:6px;
}
.role-list-large li small{
  display:block;
  color:#697d9e;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.08em;
  font-weight:800;
}

.koe-side .role-list-large li span{ color:#3b66ec; }
.create-side .role-list-large li span{ color:#ea5a9a; }

/* Make ABOUT layout breathe a bit more */
.about-grid{
  gap:42px;
}
.about-side{
  min-width:0;
}
.about-cross{
  align-self:center;
  font-size:74px;
  color:#8c72ef;
  opacity:.8;
}
.about-description{
  margin-bottom:4px;
}

@media (max-width:1200px){
  .role-list-large li{
    min-height:174px;
  }
  .role-list-large li span{
    font-size:21px;
  }
}

@media (max-width:980px){
  .role-list-large{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .about-cross{
    display:none;
  }
}

@media (max-width:620px){
  .role-list-large{
    grid-template-columns:1fr;
    gap:14px;
  }
  .role-list-large li{
    min-height:auto;
    padding:16px 12px 14px;
    border-radius:20px;
  }
  .role-visual{
    width:78px;
    height:78px;
    margin-bottom:12px;
  }
  .role-visual img{
    max-width:64px;
    max-height:64px;
  }
  .role-list-large li span{
    font-size:20px;
  }
}


/* =========================
   v28 ABOUT finish pass
========================= */
.about-grid{
  gap:46px;
  align-items:start;
}

.about-side{
  padding:34px 28px 30px;
  border-radius:34px;
  border:1px solid rgba(118,140,180,.12);
  box-shadow:0 18px 44px rgba(84,106,148,.06);
}

.koe-side{
  background:
    linear-gradient(180deg, rgba(219,239,255,.92), rgba(244,248,255,.86)),
    #f7fbff;
}

.create-side{
  background:
    linear-gradient(180deg, rgba(255,231,241,.92), rgba(255,247,251,.88)),
    #fff8fb;
}

.about-title-row{
  justify-content:flex-start;
  gap:14px;
}
.about-key{
  font-size:52px;
}
.about-jp{
  font-size:24px;
}

.about-description{
  text-align:left;
  margin:18px 0 26px;
  max-width:none;
  font-size:16px;
  line-height:1.85;
}

.role-list-large{
  gap:18px;
}

.role-list-large li{
  min-height:194px;
  padding:16px 14px 18px;
  border-radius:24px;
  border:1px solid rgba(112,138,183,.12);
  box-shadow:0 10px 26px rgba(85,104,148,.05);
}

.koe-side .role-list-large li{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(237,245,255,.86));
}

.create-side .role-list-large li{
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,239,246,.88));
}

.role-visual{
  width:96px;
  height:96px;
  margin-bottom:16px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.role-koe{
  background:linear-gradient(180deg, rgba(118,157,255,.20), rgba(146,123,252,.12));
}
.role-create{
  background:linear-gradient(180deg, rgba(255,112,170,.20), rgba(205,110,251,.13));
}

.role-visual img{
  max-width:78px;
  max-height:78px;
}

.role-list-large li span{
  font-size:22px;
  letter-spacing:.01em;
}

.role-list-large li small{
  font-size:11px;
  letter-spacing:.10em;
}

.koe-side .role-list-large li span{
  color:#3d65e6;
}
.create-side .role-list-large li span{
  color:#e65b96;
}

.about-cross{
  margin-top:108px;
  font-size:72px;
  opacity:.92;
}

@media (max-width:1200px){
  .about-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
  .about-cross{
    display:none;
  }
}

@media (max-width:980px){
  .about-side{
    padding:24px 18px 22px;
    border-radius:28px;
  }
  .role-list-large{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:620px){
  .about-side{
    padding:20px 14px 18px;
  }
  .about-key{
    font-size:42px;
  }
  .about-jp{
    font-size:20px;
  }
  .about-description{
    font-size:14px;
  }
  .role-list-large{
    grid-template-columns:1fr;
    gap:12px;
  }
  .role-list-large li{
    min-height:auto;
    padding:14px 12px 16px;
  }
  .role-visual{
    width:82px;
    height:82px;
    border-radius:24px;
  }
  .role-visual img{
    max-width:68px;
    max-height:68px;
  }
  .role-list-large li span{
    font-size:20px;
  }
}


/* =========================
   v29 about 9-item balance
========================= */
.role-list-large{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.role-list-large li span{
  word-break:keep-all;
}
.role-list-large li small{
  min-height:2.8em;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
}


/* =========================
   v30 ABOUT exact 9 + 9
========================= */
.koe-side .role-list-large,
.create-side .role-list-large{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.role-list-large li{
  min-height:194px;
}

@media (max-width:980px){
  .koe-side .role-list-large,
  .create-side .role-list-large{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:620px){
  .koe-side .role-list-large,
  .create-side .role-list-large{
    grid-template-columns:1fr !important;
  }
}


/* =========================
   v31 ABOUT softer old-style feeling
========================= */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:42px;
  align-items:start;
}
.about-side{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.koe-side{
  padding:0 8px 0 0 !important;
}
.create-side{
  padding:0 0 0 8px !important;
}
.about-title-row{
  justify-content:flex-start;
  gap:14px;
  margin-bottom:18px;
}
.about-key{
  font-size:54px;
  line-height:1;
  letter-spacing:-0.03em;
}
.about-jp{
  font-size:26px;
  font-weight:800;
  line-height:1.2;
}
.koe-side .about-key,
.koe-side .about-jp{
  color:#5a75ff;
}
.create-side .about-key,
.create-side .about-jp{
  color:#ef5ca2;
}
.about-description{
  margin:0 0 26px !important;
  font-size:17px;
  line-height:1.8;
  color:#30486f;
}
.about-cross{
  align-self:center;
  margin-top:190px;
  font-size:78px;
  color:#8a71ef;
  opacity:.95;
}

.role-list-soft{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.role-list-soft li{
  list-style:none;
  min-height:180px;
  padding:18px 12px 14px;
  text-align:center;
  border-top:1px solid rgba(120,150,198,.22);
  background:transparent;
}
.koe-side .role-list-soft li{
  background:linear-gradient(180deg, rgba(217,236,255,.26), rgba(255,255,255,0));
}
.create-side .role-list-soft li{
  background:linear-gradient(180deg, rgba(255,226,238,.28), rgba(255,255,255,0));
}
.role-icon{
  width:72px;
  height:72px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
}
.role-icon img{
  width:64px;
  height:64px;
  object-fit:contain;
  display:block;
}
.role-list-soft li span{
  display:block;
  font-size:15px;
  line-height:1.45;
  font-weight:800;
  color:#163159;
  margin-bottom:6px;
  min-height:2.9em;
}
.role-list-soft li small{
  display:block;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.10em;
  font-weight:800;
  color:#6e81a0;
  min-height:2.9em;
}

.koe-side .role-list-soft li span{ color:#123fba; }
.create-side .role-list-soft li span{ color:#ef5ca2; }

.role-list-soft .role-more{
  opacity:.92;
}
.role-list-soft .role-more span{
  font-size:14px;
}
.role-list-soft .role-more small{
  letter-spacing:.14em;
}

@media (max-width:1100px){
  .about-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .about-cross{
    display:none;
  }
}
@media (max-width:700px){
  .role-list-soft{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }
}
@media (max-width:520px){
  .role-list-soft{
    grid-template-columns:1fr;
  }
  .about-key{
    font-size:44px;
  }
  .about-jp{
    font-size:22px;
  }
  .about-description{
    font-size:15px;
  }
}


/* =========================
   v32 ABOUT lighter / flatter
========================= */
.role-list-soft{
  gap:22px !important;
}

.role-list-soft li{
  min-height:172px !important;
  padding:6px 10px 10px !important;
  border-top:1px solid rgba(120,150,198,.22) !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.koe-side .role-list-soft li,
.create-side .role-list-soft li{
  background:transparent !important;
}

.role-icon{
  width:96px !important;
  height:96px !important;
  margin:2px auto 12px !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  display:grid;
  place-items:center;
}

.role-icon img{
  width:82px !important;
  height:82px !important;
  object-fit:contain;
  display:block;
  filter:none !important;
  box-shadow:none !important;
}

.role-list-soft li span{
  font-size:15px !important;
  margin-bottom:6px !important;
  min-height:2.8em !important;
}

.role-list-soft li small{
  font-size:10px !important;
  min-height:2.6em !important;
}

.role-list-soft .role-more{
  opacity:.78;
}

.role-list-soft .role-more .role-icon img{
  width:72px !important;
  height:72px !important;
}

@media (max-width:700px){
  .role-list-soft{
    gap:16px !important;
  }
  .role-icon{
    width:86px !important;
    height:86px !important;
  }
  .role-icon img{
    width:74px !important;
    height:74px !important;
  }
}


/* =========================
   v33 about + flow image icons
========================= */
.role-list-soft .role-more{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-top:1px dashed rgba(138,148,178,.35) !important;
}
.role-list-soft .role-more .role-more-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:34px;
  padding:0 16px;
  margin:18px 0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px dashed rgba(153,160,194,.55);
  font-size:18px;
  line-height:1;
  font-weight:800;
  color:#9d8fe6;
  letter-spacing:.02em;
}
.role-list-soft .role-more .role-icon{display:none !important;}
.role-list-soft .role-more span{
  min-height:auto !important;
  margin-bottom:6px !important;
}
.role-list-soft .role-more small{
  min-height:auto !important;
}

.hero-ref-icon img{
  width:62px;
  height:62px;
  object-fit:contain;
  display:block;
}
.how-unified-icon img{
  width:70px;
  height:70px;
  object-fit:contain;
  display:block;
}
.hero-ref-icon svg,
.how-unified-icon svg{
  display:none !important;
}
@media (max-width:980px){
  .hero-ref-icon img{width:46px;height:46px;}
}
@media (max-width:620px){
  .hero-ref-icon img{width:38px;height:38px;}
}


/* =========================
   v34 simplified etc + clearer flow images
========================= */
.role-list-soft .role-more{
  display:flex !important;
  align-items:center;
  justify-content:center;
  border-top:1px dashed rgba(138,148,178,.28) !important;
  min-height:168px;
}
.role-list-soft .role-more .role-more-note{
  display:block;
  margin:0;
  padding:0;
  min-width:auto;
  height:auto;
  border:none;
  background:transparent;
  font-size:30px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  color:#9c90e9;
}
.create-side .role-list-soft .role-more .role-more-note{
  color:#f07db1;
}

.hero-ref-icon img{
  width:76px;
  height:76px;
  object-fit:contain;
  display:block;
}
.how-unified-icon img{
  width:88px;
  height:88px;
  object-fit:contain;
  display:block;
}

/* tone alignment */
.hero-ref-step img,
.how-unified-card img{
  filter:saturate(.88) brightness(1.02);
}
.hero-ref-step.blue-step img,
.how-unified-card.blue img{
  filter:saturate(.78) brightness(1.03);
}

@media (max-width:980px){
  .hero-ref-icon img{width:60px;height:60px;}
  .how-unified-icon img{width:72px;height:72px;}
  .role-list-soft .role-more .role-more-note{font-size:26px;}
}
@media (max-width:620px){
  .hero-ref-icon img{width:48px;height:48px;}
  .how-unified-icon img{width:60px;height:60px;}
  .role-list-soft .role-more .role-more-note{font-size:22px;}
}


/* =========================
   v35 flow icons simplified + etc cleaner
========================= */
.hero-ref-icon,
.how-unified-icon{
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.hero-ref-icon{
  width:92px !important;
  height:92px !important;
}
.how-unified-icon{
  width:96px !important;
  height:96px !important;
  margin:26px auto 22px !important;
}

.hero-ref-icon img,
.hero-ref-icon svg,
.how-unified-icon img,
.how-unified-icon svg{
  width:84px !important;
  height:84px !important;
  object-fit:contain;
  display:block;
  filter:none !important;
}

.hero-ref-step img,
.hero-ref-step svg,
.how-unified-card img,
.how-unified-card svg{
  filter:none !important;
}

.role-list-soft .role-more{
  display:flex !important;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(120,150,198,.22) !important;
  min-height:172px !important;
  padding:6px 10px 10px !important;
  background:transparent !important;
}
.role-list-soft .role-more .role-more-note{
  margin:0 !important;
  padding:0 !important;
  min-width:auto !important;
  height:auto !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:26px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  color:#9c90e9 !important;
}
.create-side .role-list-soft .role-more .role-more-note{
  color:#f07db1 !important;
}

@media (max-width:980px){
  .hero-ref-icon{width:76px !important;height:76px !important;}
  .how-unified-icon{width:82px !important;height:82px !important;}
  .hero-ref-icon img,
  .hero-ref-icon svg,
  .how-unified-icon img,
  .how-unified-icon svg{width:68px !important;height:68px !important;}
}
@media (max-width:620px){
  .hero-ref-icon{width:62px !important;height:62px !important;}
  .how-unified-icon{width:70px !important;height:70px !important;}
  .hero-ref-icon img,
  .hero-ref-icon svg,
  .how-unified-icon img,
  .how-unified-icon svg{width:54px !important;height:54px !important;}
  .role-list-soft .role-more .role-more-note{font-size:22px !important;}
}


/* =========================
   v37 hero step icons + works toggle cleanup
========================= */

/* HERO step row: keep simple line icons visible, no circle plate */
.hero-ref-icon,
.how-unified-icon{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.hero-ref-icon svg,
.how-unified-icon svg{
  display:block !important;
  width:84px !important;
  height:84px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:none !important;
}

.hero-ref-icon img,
.how-unified-icon img{
  display:none !important;
}

.hero-ref-icon{
  width:92px !important;
  height:92px !important;
}

.how-unified-icon{
  width:96px !important;
  height:96px !important;
  margin:26px auto 22px !important;
}

.hero-ref-label i:after{
  content:none !important;
  display:none !important;
}

.hero-ref-label i{
  opacity:.72;
}

@media (max-width:980px){
  .hero-ref-icon{width:76px !important;height:76px !important;}
  .how-unified-icon{width:82px !important;height:82px !important;}
  .hero-ref-icon svg,
  .how-unified-icon svg{width:68px !important;height:68px !important;}
}

@media (max-width:620px){
  .hero-ref-icon{width:62px !important;height:62px !important;}
  .how-unified-icon{width:70px !important;height:70px !important;}
  .hero-ref-icon svg,
  .how-unified-icon svg{width:54px !important;height:54px !important;}
}

/* WORKS toggle: match VOICE SAMPLE toggle card style */
.voice-works-toggle{
  margin-top:8px;
  border:1px solid color-mix(in srgb,var(--actor) 18%,white);
  border-radius:16px;
  background:rgba(255,255,255,.76);
  overflow:hidden;
}

.voice-works-toggle summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  cursor:pointer;
  user-select:none;
  color:#31435f;
  font-family:"Nunito",sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
}

.voice-works-toggle summary::-webkit-details-marker{
  display:none;
}

.voice-works-toggle summary b{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:50%;
  background:var(--actor-soft);
  color:var(--actor);
  font-size:18px;
  line-height:1;
  transition:transform .2s ease;
}

.voice-works-toggle[open] summary b{
  transform:rotate(45deg);
}

.voice-works-toggle .voice-works-list{
  padding:0 12px 12px;
  display:grid;
  gap:8px;
}

.voice-works-toggle .voice-works-list p{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px;
  align-items:start;
  margin:0;
  padding:12px 14px;
  border:1px solid rgba(91,111,145,.08);
  border-radius:14px;
  background:rgba(248,250,255,.92);
  color:#64758e;
  font-size:12px;
  line-height:1.75;
}

.voice-works-toggle .voice-works-list p + p{
  margin-top:0;
}

.voice-works-toggle .voice-works-list p span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  border-radius:999px;
  background:var(--actor-soft);
  color:var(--actor);
  font-family:"Nunito",sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.works-note {
  margin: 12px 4px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(239, 103, 151, 0.14);
  color: #7b8799;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .02em;
}


/* =========================
   v38 use external flow icon image files
========================= */
.hero-ref-icon img,
.how-unified-icon img{
  display:block !important;
  object-fit:contain;
  filter:none !important;
}

.hero-ref-icon svg,
.how-unified-icon svg{
  display:none !important;
}

.hero-ref-icon img{
  width:62px !important;
  height:62px !important;
}

.how-unified-icon img{
  width:76px !important;
  height:76px !important;
}

@media (max-width:980px){
  .hero-ref-icon img{width:52px !important;height:52px !important;}
  .how-unified-icon img{width:64px !important;height:64px !important;}
}

@media (max-width:620px){
  .hero-ref-icon img{width:42px !important;height:42px !important;}
  .how-unified-icon img{width:54px !important;height:54px !important;}
}



/* =========================
   v39 generated flow icon images
========================= */
.hero-ref-icon img{
  width:86px !important;
  height:86px !important;
  object-fit:contain;
  display:block !important;
}
.how-unified-icon img{
  width:94px !important;
  height:94px !important;
  object-fit:contain;
  display:block !important;
}
@media (max-width:980px){
  .hero-ref-icon img{width:72px !important;height:72px !important;}
  .how-unified-icon img{width:80px !important;height:80px !important;}
}
@media (max-width:620px){
  .hero-ref-icon img{width:58px !important;height:58px !important;}
  .how-unified-icon img{width:66px !important;height:66px !important;}
}


/* =========================
   v40 smartphone layout refinement
========================= */
@media (max-width:700px){
  /* HERO */
  .hero-reference{
    padding:26px 18px 42px !important;
  }
  .hero-reference-main{
    gap:18px !important;
  }
  .hero-reference-copy{
    padding-left:0 !important;
  }
  .hero-sparkle{
    display:none !important;
  }
  .hero-reference-copy h1,
  .hero-v20-title{
    max-width:320px;
    line-height:1.1 !important;
    letter-spacing:.01em !important;
  }
  .hero-v20-line{
    white-space:normal !important;
    font-size:clamp(33px,10.6vw,42px) !important;
    line-height:1.14 !important;
  }
  .hero-v20-second{
    margin-top:8px !important;
    font-size:clamp(31px,9.8vw,40px) !important;
    line-height:1.14 !important;
  }
  .hero-reference-body{
    margin-top:22px !important;
    font-size:15px !important;
    line-height:1.95 !important;
  }
  .hero-reference-body p{
    margin-bottom:18px !important;
  }
  .hero-reference-visual{
    max-width:315px !important;
    margin:4px auto 0 !important;
  }
  /* hide mobile top step row */
  .hero-reference-steps{
    display:none !important;
  }

  /* ABOUT */
  .about{
    margin-top:8px !important;
    padding:70px 18px 84px !important;
  }
  .about:before{
    inset:12px 0 0 !important;
    border-radius:28px !important;
  }
  .section-head{
    margin-bottom:40px !important;
  }
  .section-head h2{
    font-size:clamp(28px,8.4vw,38px) !important;
    line-height:1.34 !important;
    letter-spacing:.02em !important;
  }
  .about-side{
    padding:0 !important;
    text-align:center;
  }
  .about-title-row{
    gap:10px !important;
    justify-content:center !important;
  }
  .about-key{
    font-size:32px !important;
  }
  .about-jp{
    font-size:18px !important;
  }
  .about-description{
    margin:12px auto 24px !important;
    max-width:320px !important;
    font-size:15px !important;
    line-height:1.8 !important;
    text-align:center !important;
  }
  .role-list-soft{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }
  .role-list-soft li{
    min-height:148px !important;
    padding:16px 8px 14px !important;
    text-align:center !important;
  }
  .role-icon{
    width:60px !important;
    height:60px !important;
    margin:0 auto 10px !important;
  }
  .role-icon img{
    width:52px !important;
    height:52px !important;
  }
  .role-list-soft li span{
    min-height:auto !important;
    margin-bottom:4px !important;
    font-size:14px !important;
    line-height:1.35 !important;
    text-align:center !important;
  }
  .role-list-soft li small{
    min-height:auto !important;
    font-size:10px !important;
    line-height:1.35 !important;
    text-align:center !important;
  }
  .role-list-soft .role-more{
    grid-column:1 / -1;
    min-height:84px !important;
    padding:8px 10px 6px !important;
  }
  .role-list-soft .role-more .role-more-note{
    font-size:22px !important;
  }
}



/* =========================
   v41 mobile TEAM / HOW / hamburger navigation
========================= */

/* Hamburger button */
.menu-button{
  width:42px;
  height:42px;
  padding:9px;
  border:0;
  background:transparent;
  color:var(--navy);
  cursor:pointer;
  position:relative;
  z-index:60;
}
.menu-button .hamburger-line{
  position:absolute;
  left:9px;
  width:24px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform .25s ease, top .25s ease, opacity .18s ease;
}
.menu-button .hamburger-line:nth-child(1){top:12px}
.menu-button .hamburger-line:nth-child(2){top:20px}
.menu-button .hamburger-line:nth-child(3){top:28px}
.menu-button[aria-expanded="true"] .hamburger-line:nth-child(1){top:20px;transform:rotate(45deg)}
.menu-button[aria-expanded="true"] .hamburger-line:nth-child(2){opacity:0}
.menu-button[aria-expanded="true"] .hamburger-line:nth-child(3){top:20px;transform:rotate(-45deg)}

@media (max-width:980px){
  .site-header{
    z-index:70;
  }
  .mobile-menu{
    display:flex !important;
    position:fixed;
    inset:78px 0 0 0 !important;
    z-index:55;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    padding:24px 24px 36px;
    background:rgba(248,252,255,.98);
    backdrop-filter:blur(20px);
    border-top:1px solid rgba(91,111,145,.08);
    border-bottom:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  }
  .mobile-menu.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .mobile-menu a{
    display:flex;
    align-items:center;
    min-height:58px;
    padding:0 4px;
    border-bottom:1px solid rgba(91,111,145,.10);
    color:#243d63;
    font-size:15px;
    letter-spacing:.06em;
  }
  body.menu-open{
    overflow:hidden;
  }
}

@media (max-width:700px){
  .mobile-menu{
    inset:66px 0 0 0 !important;
    padding:16px 22px 30px;
  }

  /* HOW IT WORKS: compact, readable mobile cards */
  .how-unified{
    padding:70px 18px 82px !important;
  }
  .how-unified:before{
    inset:12px 0 12px !important;
    border-radius:28px !important;
  }
  .how-unified .section-head{
    margin-bottom:0 !important;
  }
  .how-unified-lead{
    margin-top:12px !important;
    text-align:center !important;
    font-size:15px !important;
    letter-spacing:.04em !important;
  }
  .how-unified-grid{
    margin-top:30px !important;
    gap:14px !important;
  }
  .how-unified-card{
    min-height:0 !important;
    display:grid;
    grid-template-columns:66px 1fr;
    grid-template-areas:
      "icon top"
      "icon title"
      "body body";
    column-gap:14px;
    row-gap:5px;
    padding:20px 18px 18px !important;
    border-radius:22px !important;
    text-align:left;
  }
  .how-unified-card + .how-unified-card:before{
    display:none !important;
  }
  .how-unified-top{
    grid-area:top;
    gap:9px !important;
    align-self:end;
  }
  .how-unified-no{
    font-size:22px !important;
    padding-right:9px !important;
  }
  .how-unified-card h3{
    font-size:21px !important;
    line-height:1.2 !important;
  }
  .how-unified-icon{
    grid-area:icon;
    width:64px !important;
    height:64px !important;
    margin:0 !important;
    align-self:center;
  }
  .how-unified-icon img{
    width:60px !important;
    height:60px !important;
  }
  .how-unified-card h4{
    grid-area:title;
    margin:0 !important;
    text-align:left !important;
    font-size:15px !important;
    line-height:1.45 !important;
    align-self:start;
  }
  .how-unified-card p{
    grid-area:body;
    margin-top:9px !important;
    text-align:left !important;
    font-size:13px !important;
    line-height:1.8 !important;
  }
  .how-unified-footer{
    margin-top:30px !important;
    font-size:18px !important;
    line-height:1.6 !important;
  }

  /* TEAM: no horizontal-scroll cards; use clean single column */
  .team-section{
    padding:70px 18px 82px !important;
  }
  .team-section:before{
    inset:12px 0 12px !important;
    border-radius:28px !important;
  }
  .team-head{
    margin-bottom:34px !important;
    text-align:center !important;
  }
  .team-lead{
    margin-top:10px !important;
    text-align:center !important;
    font-size:15px !important;
  }
  .voice-actor-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    overflow:visible !important;
    padding:0 !important;
  }
  .voice-actor-card{
    width:100% !important;
    max-width:420px !important;
    margin:0 auto !important;
    padding:14px !important;
    border-radius:24px !important;
  }
  .voice-actor-portrait{
    border-radius:18px !important;
  }
  .voice-actor-info{
    padding:17px 4px 4px !important;
  }
  .voice-actor-info h3{
    font-size:23px !important;
  }
  .voice-actor-note{
    margin:8px 0 14px !important;
    font-size:12px !important;
    line-height:1.7 !important;
  }
  .social-links{
    margin:10px 0 13px !important;
  }
  .voice-samples-toggle,
  .voice-works-toggle{
    margin-top:8px !important;
  }
  .voice-samples-toggle summary,
  .voice-works-toggle summary{
    padding:13px 14px !important;
  }
  .team-organize{
    margin-top:54px !important;
    padding-top:30px !important;
  }
  .organize-heading{
    margin-bottom:22px !important;
    align-items:center !important;
    text-align:center;
  }
  .organize-heading h3{
    font-size:23px !important;
  }
  .organize-grid{
    gap:16px !important;
  }
  .organize-card{
    padding-bottom:12px !important;
  }
}


/* =========================
   v42 ACTIVITY section
========================= */
.activity-section{
  max-width:var(--max);
  margin:0 auto;
  padding:116px 54px 124px;
  position:relative;
}
.activity-section:before{
  content:"";
  position:absolute;
  inset:24px 0 0;
  z-index:-1;
  border-radius:44px;
  background:
    radial-gradient(circle at 10% 18%,rgba(99,154,255,.07),transparent 24%),
    radial-gradient(circle at 85% 16%,rgba(239,103,151,.07),transparent 24%),
    radial-gradient(circle at 50% 100%,rgba(141,99,222,.05),transparent 26%),
    rgba(255,255,255,.72);
  border:1px solid rgba(92,124,177,.08);
}
.activity-head{
  margin-bottom:58px;
}
.activity-lead{
  margin:14px 0 0;
  text-align:center;
  color:#556b87;
  font-size:18px;
  letter-spacing:.08em;
}
.activity-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}
.activity-card{
  --activity:#8d63de;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  border:1.5px solid color-mix(in srgb,var(--activity) 22%, white);
  background:rgba(255,255,255,.86);
  box-shadow:0 18px 44px rgba(56,88,142,.06);
}
.activity-connect{--activity:#ef6797;}
.activity-event{--activity:#8d63de;}
.activity-create{--activity:#4d87ee;}
.activity-produce{--activity:#7a77e8;}
.activity-visual{
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#eef3fb;
}
.activity-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.activity-body{
  padding:22px 24px 24px;
}
.activity-index{
  margin:0 0 9px;
  color:var(--activity);
  font-family:"Nunito",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
}
.activity-card h3{
  margin:0;
  color:#273653;
  font-size:34px;
  line-height:1.15;
}
.activity-copy{
  margin:16px 0 0;
  color:#5f718c;
  font-size:14px;
  line-height:1.9;
  font-weight:700;
}
.activity-card:after{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:color-mix(in srgb,var(--activity) 20%, white);
  box-shadow:0 0 0 7px rgba(255,255,255,.48);
}

@media (max-width:980px){
  .activity-section{
    padding:96px 24px 108px;
  }
  .activity-grid{
    gap:20px;
  }
  .activity-card h3{
    font-size:30px;
  }
}

@media (max-width:700px){
  .activity-section{
    padding:74px 18px 88px !important;
  }
  .activity-section:before{
    inset:12px 0 0 !important;
    border-radius:28px !important;
  }
  .activity-head{
    margin-bottom:36px !important;
  }
  .activity-lead{
    margin-top:10px;
    font-size:15px;
    line-height:1.8;
    letter-spacing:.05em;
  }
  .activity-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .activity-card{
    border-radius:24px;
  }
  .activity-body{
    padding:18px 18px 20px;
  }
  .activity-index{
    margin-bottom:8px;
    font-size:10px;
  }
  .activity-card h3{
    font-size:28px;
  }
  .activity-copy{
    margin-top:12px;
    font-size:13px;
    line-height:1.8;
  }
}


/* =========================
   v44 CONTENT section
========================= */
.content-section{
  max-width:var(--max);
  margin:0 auto;
  padding:116px 54px 128px;
  position:relative;
}
.content-section:before{
  content:"";
  position:absolute;
  inset:26px 0 0;
  z-index:-1;
  border-radius:44px;
  background:
    radial-gradient(circle at 12% 12%,rgba(239,103,151,.06),transparent 22%),
    radial-gradient(circle at 88% 10%,rgba(77,135,238,.06),transparent 24%),
    radial-gradient(circle at 52% 100%,rgba(141,99,222,.05),transparent 28%),
    rgba(255,255,255,.72);
  border:1px solid rgba(92,124,177,.08);
}
.content-head{
  margin-bottom:30px;
}
.content-lead{
  margin:14px 0 0;
  text-align:center;
  color:#556b87;
  font-size:18px;
  letter-spacing:.08em;
}
.content-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:34px;
}
.content-chip{
  appearance:none;
  border:1px solid rgba(128,145,177,.18);
  background:rgba(255,255,255,.8);
  color:#60738f;
  border-radius:999px;
  padding:10px 16px;
  font-family:"Nunito",sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.2s ease;
}
.content-chip:hover{
  border-color:rgba(128,145,177,.35);
  transform:translateY(-1px);
}
.content-chip.is-active{
  background:linear-gradient(90deg, rgba(239,103,151,.12), rgba(141,99,222,.12), rgba(77,135,238,.12));
  border-color:rgba(128,145,177,.34);
  color:#273653;
}
.content-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.content-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
  border:1.5px solid rgba(128,145,177,.12);
  background:rgba(255,255,255,.84);
  box-shadow:0 18px 44px rgba(56,88,142,.06);
  transition:.24s ease;
}
.content-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(56,88,142,.08);
}
.content-card.is-hidden{
  display:none;
}
.content-visual{
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#eff3fb;
}
.content-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.content-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:20px 20px 22px;
}
.content-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.content-kind,
.content-year{
  font-family:"Nunito",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.content-kind{color:#7f66dd;}
.content-year{color:#9aa9bf;}
.content-card h3{
  margin:0;
  color:#273653;
  font-size:24px;
  line-height:1.2;
}
.content-sub{
  margin:8px 0 0;
  color:#7b8ca4;
  font-family:"Nunito",sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
}
.content-copy{
  margin:14px 0 0;
  color:#60738f;
  font-size:13px;
  line-height:1.82;
  flex:1;
}
.content-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.content-tags span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(122,119,232,.09);
  color:#6d73b0;
  font-family:"Nunito",sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}
@media (max-width:1100px){
  .content-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:980px){
  .content-section{
    padding:96px 24px 112px;
  }
}
@media (max-width:700px){
  .content-section{
    padding:74px 18px 90px !important;
  }
  .content-section:before{
    inset:12px 0 0 !important;
    border-radius:28px !important;
  }
  .content-head{
    margin-bottom:22px !important;
  }
  .content-lead{
    margin-top:10px;
    font-size:15px;
    line-height:1.8;
    letter-spacing:.05em;
  }
  .content-filter{
    justify-content:flex-start;
    gap:8px;
    margin-bottom:22px;
  }
  .content-chip{
    padding:9px 14px;
    font-size:11px;
  }
  .content-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .content-card{
    border-radius:24px;
  }
  .content-body{
    padding:18px 18px 20px;
  }
  .content-card h3{
    font-size:20px;
  }
  .content-copy{
    font-size:13px;
    line-height:1.78;
  }
}


/* =========================
   v45 CONTACT section
========================= */
.contact-section{
  max-width:var(--max);
  margin:0 auto;
  padding:112px 54px 132px;
  position:relative;
}
.contact-section:before{
  content:"";
  position:absolute;
  inset:24px 0 18px;
  z-index:-1;
  border-radius:46px;
  background:
    radial-gradient(circle at 12% 16%,rgba(239,103,151,.08),transparent 25%),
    radial-gradient(circle at 86% 18%,rgba(77,135,238,.08),transparent 25%),
    radial-gradient(circle at 50% 100%,rgba(141,99,222,.06),transparent 28%),
    rgba(255,255,255,.8);
  border:1px solid rgba(92,124,177,.09);
}
.contact-shell{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:72px;
  align-items:start;
}
.contact-intro h2{
  margin:14px 0 0;
  color:#273653;
  font-size:clamp(42px,4.4vw,64px);
  line-height:1.25;
  letter-spacing:.03em;
}
.contact-lead{
  margin:26px 0 0;
  color:#5d708c;
  font-size:15px;
  line-height:1.95;
}
.contact-topics{
  display:grid;
  gap:12px;
  margin-top:36px;
}
.contact-topic{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid rgba(128,145,177,.14);
}
.contact-topic > span{
  font-family:"Nunito",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:#9b8ee6;
}
.contact-topic div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.contact-topic strong{
  color:#31435f;
  font-family:"Nunito",sans-serif;
  font-size:13px;
  letter-spacing:.08em;
}
.contact-topic small{
  color:#7b8ba3;
  font-size:12px;
}
.contact-form{
  padding:28px;
  border-radius:28px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(128,145,177,.13);
  box-shadow:0 20px 48px rgba(56,88,142,.06);
}
.contact-field{
  display:grid;
  gap:8px;
  margin-bottom:18px;
}
.contact-field label{
  color:#42536d;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}
.contact-field input,
.contact-field select,
.contact-field textarea{
  width:100%;
  border:1px solid rgba(128,145,177,.18);
  border-radius:14px;
  background:rgba(249,251,255,.96);
  color:#31435f;
  padding:13px 14px;
  font:inherit;
  outline:none;
  transition:.2s ease;
  box-sizing:border-box;
}
.contact-field textarea{
  resize:vertical;
  min-height:150px;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  border-color:#8d63de;
  box-shadow:0 0 0 3px rgba(141,99,222,.08);
  background:#fff;
}
.contact-submit{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:999px;
  padding:15px 20px;
  background:linear-gradient(90deg,#ef6797,#9b67ed,#4d87ee);
  color:#fff;
  font-family:"Nunito",sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  cursor:pointer;
  transition:.2s ease;
}
.contact-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(117,96,213,.18);
}
.contact-note{
  margin:12px 0 0;
  text-align:center;
  color:#98a5b7;
  font-size:10px;
  line-height:1.7;
}
@media (max-width:980px){
  .contact-section{padding:94px 24px 112px}
  .contact-shell{
    grid-template-columns:1fr;
    gap:40px;
  }
  .contact-intro h2{
    font-size:clamp(38px,7vw,54px);
  }
}
@media (max-width:700px){
  .contact-section{
    padding:74px 18px 90px !important;
  }
  .contact-section:before{
    inset:12px 0 12px !important;
    border-radius:28px !important;
  }
  .contact-shell{
    gap:28px;
  }
  .contact-intro{
    text-align:center;
  }
  .contact-intro h2{
    font-size:clamp(32px,9vw,42px);
    line-height:1.28;
  }
  .contact-lead{
    margin-top:18px;
    font-size:14px;
  }
  .contact-topics{
    margin-top:26px;
    text-align:left;
  }
  .contact-form{
    padding:20px 16px;
    border-radius:22px;
  }
  .contact-field input,
  .contact-field select,
  .contact-field textarea{
    font-size:14px;
  }
}


/* =========================
   v46 TEAM mobile carousels
========================= */
.team-carousel-controls{
  display:none;
}

@media (max-width:700px){
  /* Voice actors: one card per view, swipeable */
  .voice-actor-grid,
  .organize-grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:14px !important;
    overflow-x:auto !important;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 2px 8px !important;
  }
  .voice-actor-grid::-webkit-scrollbar,
  .organize-grid::-webkit-scrollbar{
    display:none;
  }
  .voice-actor-grid > .voice-actor-card,
  .organize-grid > .organize-card{
    flex:0 0 calc(100% - 4px) !important;
    width:calc(100% - 4px) !important;
    max-width:none !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    box-sizing:border-box;
  }

  .team-organize{
    margin-top:64px !important;
  }
  .organize-heading{
    margin-bottom:24px !important;
  }

  /* slider controls */
  .team-carousel-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:14px;
  }
  .team-carousel-arrow{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(117,132,167,.18);
    border-radius:50%;
    background:rgba(255,255,255,.88);
    color:#536985;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(56,88,142,.05);
  }
  .team-carousel-arrow:disabled{
    opacity:.28;
    cursor:default;
  }
  .team-carousel-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  .team-carousel-dot{
    appearance:none;
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:999px;
    background:#d7ddea;
    cursor:pointer;
    transition:.2s ease;
  }
  .team-carousel-dot.is-active{
    width:22px;
    background:linear-gradient(90deg,#ef6797,#8d63de,#4d87ee);
  }
}

/* =========================
   v47 mobile carousel polish + CONTENT carousel
========================= */
@media (max-width:700px){
  /* TEAM dots: same-size, quiet indicator instead of stretched gradient pill */
  .team-carousel-dots{
    gap:9px;
  }
  .team-carousel-dot{
    width:7px;
    height:7px;
    border:1px solid transparent;
    background:#d5dbe7;
    opacity:.9;
    transform:scale(1);
  }
  .team-carousel-dot.is-active{
    width:7px;
    height:7px;
    background:#6f79a8;
    border-color:#6f79a8;
    box-shadow:0 0 0 3px rgba(111,121,168,.12);
    transform:scale(1.05);
  }

  /* CONTENT: horizontal snap carousel on mobile */
  .content-grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:14px !important;
    overflow-x:auto !important;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 18px 10px 0 !important;
  }
  .content-grid::-webkit-scrollbar{
    display:none;
  }
  .content-grid > .content-card{
    flex:0 0 calc(92% - 8px) !important;
    width:calc(92% - 8px) !important;
    max-width:none !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    box-sizing:border-box;
  }
  .content-grid > .content-card.is-hidden{
    display:none !important;
  }

  .content-carousel-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:14px;
  }
  .content-carousel-arrow{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(117,132,167,.18);
    border-radius:50%;
    background:rgba(255,255,255,.88);
    color:#536985;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(56,88,142,.05);
  }
  .content-carousel-arrow:disabled{
    opacity:.28;
    cursor:default;
  }
  .content-carousel-count{
    min-width:48px;
    text-align:center;
    color:#77869d;
    font-family:"Nunito",sans-serif;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
  }
}

@media (min-width:701px){
  .content-carousel-controls{
    display:none !important;
  }
}

/* =========================
   v48 desktop width + spacing harmonization
========================= */
@media (min-width:981px){
  :root{
    --max:1280px;
  }

  /* Every major desktop section uses the same outer frame. */
  .hero-reference,
  .about,
  .how-unified,
  .activity-section,
  .content-section,
  .team-section,
  .contact-section{
    width:calc(100% - 48px);
    max-width:var(--max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-reference{
    padding:62px 48px 66px !important;
  }

  .about,
  .how-unified,
  .activity-section,
  .content-section,
  .team-section,
  .contact-section{
    padding-left:48px !important;
    padding-right:48px !important;
  }

  .about{
    margin-top:18px !important;
    padding-top:102px !important;
    padding-bottom:112px !important;
  }
  .how-unified{
    padding-top:102px !important;
    padding-bottom:112px !important;
  }
  .activity-section,
  .content-section,
  .team-section{
    padding-top:104px !important;
    padding-bottom:112px !important;
  }
  .contact-section{
    padding-top:104px !important;
    padding-bottom:118px !important;
  }

  /* Background panels now line up exactly section-to-section. */
  .about:before,
  .how-unified:before,
  .activity-section:before,
  .content-section:before,
  .team-section:before,
  .contact-section:before{
    inset:18px 0 18px !important;
    border-radius:38px !important;
  }

  /* Consistent heading rhythm. */
  .section-head{
    margin-bottom:54px !important;
  }
  .section-head .section-label{
    margin-bottom:12px !important;
  }
  .section-head h2{
    line-height:1.35 !important;
  }
  .how-unified-lead,
  .activity-lead,
  .content-lead,
  .team-lead{
    margin-top:14px !important;
  }

  /* HERO should feel related to the sections instead of wider than all of them. */
  .hero-reference-main{
    grid-template-columns:minmax(0,.94fr) minmax(500px,1.06fr) !important;
    gap:38px !important;
  }
  .hero-reference-copy{
    padding-left:0 !important;
  }
  .hero-reference-visual{
    max-width:700px !important;
  }
  .hero-reference-steps{
    margin-top:20px !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .hero-ref-step{
    padding-left:20px !important;
    padding-right:20px !important;
    gap:20px !important;
  }

  /* ABOUT */
  .about-grid{
    grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr) !important;
    gap:16px !important;
  }
  .about-side{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .about-description{
    margin-top:18px !important;
    margin-bottom:30px !important;
  }
  .role-list-soft{
    gap:14px !important;
  }

  /* HOW IT WORKS */
  .how-unified-grid{
    margin-top:50px !important;
    gap:24px !important;
  }
  .how-unified-card{
    min-height:474px !important;
    padding:28px 26px 30px !important;
  }
  .how-unified-footer{
    margin-top:48px !important;
  }

  /* ACTIVITY / CONTENT / TEAM use the same grid gutter. */
  .activity-grid,
  .content-grid,
  .voice-actor-grid{
    gap:24px !important;
  }
  .activity-head{
    margin-bottom:50px !important;
  }
  .content-head{
    margin-bottom:26px !important;
  }
  .content-filter{
    margin-bottom:30px !important;
  }

  /* TEAM had noticeably more whitespace than the surrounding sections. */
  .team-head{
    margin-bottom:54px !important;
  }
  .team-organize{
    margin-top:70px !important;
    padding-top:38px !important;
  }
  .organize-heading{
    margin-bottom:28px !important;
  }
  .organize-grid{
    gap:24px !important;
  }

  /* CONTACT: slightly tighter relationship between copy and form. */
  .contact-shell{
    gap:56px !important;
  }
  .contact-topics{
    margin-top:30px !important;
  }
  .contact-form{
    padding:26px !important;
  }
}

@media (min-width:1281px){
  .site-header{
    padding-left:max(28px,calc((100vw - var(--max))/2));
    padding-right:max(28px,calc((100vw - var(--max))/2));
  }
}

/* =========================
   v49 flatter section treatment
   - no large rounded section frames
   - width stays unified
   - separation comes from whitespace + subtle color air
========================= */
@media (min-width:981px){
  .hero-reference,
  .about,
  .how-unified,
  .activity-section,
  .content-section,
  .team-section,
  .contact-section{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }

  .about:before,
  .how-unified:before,
  .activity-section:before,
  .content-section:before,
  .team-section:before,
  .contact-section:before{
    inset:0 !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    pointer-events:none;
  }

  .about:before{
    background:
      radial-gradient(circle at 12% 74%,rgba(89,164,255,.065),transparent 29%),
      radial-gradient(circle at 88% 30%,rgba(239,103,151,.055),transparent 28%) !important;
  }
  .how-unified:before{
    background:
      radial-gradient(circle at 14% 70%,rgba(239,103,151,.045),transparent 27%),
      radial-gradient(circle at 52% 14%,rgba(141,99,222,.05),transparent 25%),
      radial-gradient(circle at 88% 72%,rgba(77,135,238,.045),transparent 27%) !important;
  }
  .activity-section:before{
    background:
      radial-gradient(circle at 9% 16%,rgba(99,154,255,.045),transparent 25%),
      radial-gradient(circle at 90% 82%,rgba(239,103,151,.04),transparent 27%) !important;
  }
  .content-section:before{
    background:
      radial-gradient(circle at 86% 12%,rgba(77,135,238,.042),transparent 25%),
      radial-gradient(circle at 17% 88%,rgba(141,99,222,.04),transparent 28%) !important;
  }
  .team-section:before{
    background:
      radial-gradient(circle at 9% 12%,rgba(239,103,151,.045),transparent 25%),
      radial-gradient(circle at 90% 16%,rgba(77,135,238,.045),transparent 25%) !important;
  }
  .contact-section:before{
    background:
      radial-gradient(circle at 18% 18%,rgba(141,99,222,.045),transparent 27%),
      radial-gradient(circle at 84% 82%,rgba(239,103,151,.04),transparent 28%) !important;
  }

  /* Keep the page open and airy; cards do the visual grouping. */
  .about,
  .how-unified,
  .activity-section,
  .content-section,
  .team-section,
  .contact-section{
    padding-top:96px !important;
    padding-bottom:104px !important;
  }

  .about{margin-top:0 !important;}

  /* Slightly reduce the visual weight of card shadows after removing section frames. */
  .how-unified-card,
  .activity-card,
  .content-card,
  .voice-actor-card,
  .contact-form,
  .organize-card{
    box-shadow:0 12px 32px rgba(56,88,142,.045) !important;
  }

  /* A subtle hairline between major sections gives structure without a box. */
  .how-unified,
  .activity-section,
  .content-section,
  .team-section,
  .contact-section{
    border-top:1px solid rgba(117,138,174,.075) !important;
  }
}

/* =========================
   v50 alternating full-width section backgrounds
   white / soft gradient rhythm instead of section frames
========================= */
html,body{
  overflow-x:hidden;
}

.about,
.how-unified,
.activity-section,
.content-section,
.team-section,
.contact-section{
  position:relative;
  isolation:isolate;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.about:before,
.how-unified:before,
.activity-section:before,
.content-section:before,
.team-section:before,
.contact-section:before{
  content:"";
  position:absolute !important;
  z-index:-1 !important;
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
  right:auto !important;
  width:100vw !important;
  transform:translateX(-50%) !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* 01 ABOUT — clean white */
.about:before{
  background:#fff !important;
}

/* 02 HOW IT WORKS — cool lavender / blue */
.how-unified:before{
  background:
    radial-gradient(circle at 10% 16%,rgba(239,103,151,.10),transparent 31%),
    radial-gradient(circle at 52% 10%,rgba(141,99,222,.10),transparent 34%),
    radial-gradient(circle at 92% 76%,rgba(77,135,238,.11),transparent 32%),
    linear-gradient(135deg,#fbf8ff 0%,#f5f5ff 48%,#f3f8ff 100%) !important;
}

/* 03 ACTIVITY — white */
.activity-section:before{
  background:#fff !important;
}

/* 04 CONTENT — warmer pink / purple */
.content-section:before{
  background:
    radial-gradient(circle at 14% 18%,rgba(239,103,151,.11),transparent 31%),
    radial-gradient(circle at 82% 16%,rgba(179,112,225,.09),transparent 32%),
    radial-gradient(circle at 92% 88%,rgba(77,135,238,.06),transparent 28%),
    linear-gradient(135deg,#fff8fb 0%,#fbf6ff 52%,#f7f6ff 100%) !important;
}

/* 05 TEAM — white */
.team-section:before{
  background:#fff !important;
}

/* 06 CONTACT — a slightly stronger closing gradient */
.contact-section:before{
  background:
    radial-gradient(circle at 12% 18%,rgba(239,103,151,.13),transparent 30%),
    radial-gradient(circle at 48% 8%,rgba(141,99,222,.12),transparent 33%),
    radial-gradient(circle at 90% 82%,rgba(77,135,238,.14),transparent 34%),
    linear-gradient(135deg,#fbf7ff 0%,#f4f5ff 52%,#eef6ff 100%) !important;
}

/* Remove v49 hairlines; background changes now create the section boundary. */
.how-unified,
.activity-section,
.content-section,
.team-section,
.contact-section{
  border-top:none !important;
}

@media (min-width:981px){
  .about,
  .how-unified,
  .activity-section,
  .content-section,
  .team-section,
  .contact-section{
    padding-top:104px !important;
    padding-bottom:112px !important;
  }
}

@media (max-width:980px){
  .about:before,
  .how-unified:before,
  .activity-section:before,
  .content-section:before,
  .team-section:before,
  .contact-section:before{
    inset:auto !important;
    top:0 !important;
    bottom:0 !important;
    left:50% !important;
    width:100vw !important;
    transform:translateX(-50%) !important;
    border-radius:0 !important;
  }
}


/* =========================
   v51 section label + typography refinement
========================= */
.section-label{
  margin:0 !important;
  color:#516b9a !important;
  font-family:"Nunito",sans-serif !important;
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.13em !important;
}
.section-head .section-label{
  margin-bottom:18px !important;
}
.section-head h2{
  font-size:clamp(38px,3.7vw,52px) !important;
  line-height:1.34 !important;
  letter-spacing:.025em !important;
}
.how-unified-lead,
.activity-lead,
.content-lead,
.team-lead{
  margin-top:16px !important;
  font-size:17px !important;
  line-height:1.75 !important;
}

/* TEAM subheading remains secondary, not a main section label. */
.subsection-label{
  margin:0;
  color:#71819a;
  font-family:"Nunito",sans-serif;
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.14em;
}
.organize-heading .subsection-label{
  margin:0;
}

/* CONTACT follows the same hierarchy as all other sections. */
.contact-intro .section-label{
  margin-bottom:18px !important;
}
.contact-intro h2{
  margin:0 !important;
  font-size:clamp(40px,4vw,56px) !important;
  line-height:1.28 !important;
  letter-spacing:.025em !important;
}
.contact-lead{
  margin-top:22px !important;
}

/* Slightly rebalance internal headline sizes after enlarging section labels. */
.about-key{
  font-size:46px;
}
.how-unified-card h3{
  font-size:28px;
}
.activity-card h3{
  font-size:32px;
}
.content-card h3{
  font-size:20px;
}
.voice-actor-info h3{
  font-size:26px;
}

@media (max-width:700px){
  .section-label{
    font-size:15px !important;
    letter-spacing:.12em !important;
  }
  .section-head .section-label{
    margin-bottom:14px !important;
  }
  .section-head h2{
    font-size:clamp(29px,8.1vw,37px) !important;
    line-height:1.32 !important;
  }
  .how-unified-lead,
  .activity-lead,
  .content-lead,
  .team-lead{
    margin-top:11px !important;
    font-size:14px !important;
    line-height:1.7 !important;
  }
  .contact-intro .section-label{
    margin-bottom:14px !important;
  }
  .contact-intro h2{
    font-size:clamp(31px,8.6vw,40px) !important;
    line-height:1.3 !important;
  }
  .about-key{
    font-size:32px !important;
  }
  .how-unified-card h3{
    font-size:24px !important;
  }
  .activity-card h3{
    font-size:27px !important;
  }
  .content-card h3{
    font-size:20px !important;
  }
  .voice-actor-info h3{
    font-size:23px !important;
  }
}

/* =========================
   v52 typography hierarchy + simpler CONTACT
========================= */
/* Main section title is always the dominant type inside each section. */
.section-head h2,
.contact-intro h2{
  font-size:clamp(44px,4.15vw,58px) !important;
  line-height:1.28 !important;
  letter-spacing:.02em !important;
  font-weight:800 !important;
}

.section-label{
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
}

/* Secondary titles stay clearly below the section headline. */
.about-key{
  font-size:38px !important;
}
.about-jp{
  font-size:20px !important;
}
.how-unified-card h3{
  font-size:26px !important;
}
.how-unified-card h4{
  font-size:20px !important;
}
.activity-card h3{
  font-size:29px !important;
}
.content-card h3{
  font-size:20px !important;
}
.voice-actor-info h3{
  font-size:25px !important;
}
.organize-heading h3,
.organize-grid h4{
  font-size:24px !important;
}

/* Body / lead text hierarchy. */
.how-unified-lead,
.activity-lead,
.content-lead,
.team-lead,
.contact-lead{
  font-size:16px !important;
  line-height:1.8 !important;
}

/* CONTACT: without the topic list, keep the intro concise and balanced. */
.contact-shell{
  grid-template-columns:minmax(0,.82fr) minmax(440px,1.18fr) !important;
  gap:64px !important;
  align-items:center !important;
}
.contact-intro{
  max-width:470px;
}
.contact-lead{
  margin-top:22px !important;
}
.contact-topics{
  display:none !important;
}

@media (max-width:980px){
  .contact-shell{
    grid-template-columns:1fr !important;
    gap:34px !important;
    align-items:start !important;
  }
  .contact-intro{
    max-width:620px;
  }
}

@media (max-width:700px){
  .section-head h2,
  .contact-intro h2{
    font-size:clamp(31px,8.7vw,40px) !important;
    line-height:1.3 !important;
  }
  .section-label{
    font-size:14px !important;
  }
  .about-key{
    font-size:30px !important;
  }
  .about-jp{
    font-size:17px !important;
  }
  .how-unified-card h3{
    font-size:23px !important;
  }
  .how-unified-card h4{
    font-size:18px !important;
  }
  .activity-card h3{
    font-size:25px !important;
  }
  .content-card h3{
    font-size:20px !important;
  }
  .voice-actor-info h3{
    font-size:23px !important;
  }
  .how-unified-lead,
  .activity-lead,
  .content-lead,
  .team-lead,
  .contact-lead{
    font-size:14px !important;
  }
  .contact-intro{
    max-width:none;
  }
}


/* =========================
   v53 ACTIVITY heading hierarchy
========================= */
.activity-head .section-label{
  margin-bottom:16px !important;
  font-size:clamp(40px,4.1vw,58px) !important;
  line-height:1.05 !important;
  letter-spacing:.06em !important;
  color:#273653 !important;
}
.activity-head h2{
  font-size:clamp(28px,2.45vw,36px) !important;
  line-height:1.42 !important;
  letter-spacing:.025em !important;
  font-weight:800 !important;
}
.activity-head .activity-lead{
  margin-top:14px !important;
  font-size:15px !important;
  line-height:1.8 !important;
}

@media (max-width:700px){
  .activity-head .section-label{
    margin-bottom:12px !important;
    font-size:clamp(30px,9vw,38px) !important;
  }
  .activity-head h2{
    font-size:clamp(23px,6.6vw,29px) !important;
    line-height:1.42 !important;
  }
  .activity-head .activity-lead{
    margin-top:10px !important;
    font-size:13px !important;
  }
}

/* =========================
   v54 unified section headings
   English section name + small Japanese subtitle
========================= */
.section-head{
  text-align:center !important;
  margin-bottom:52px !important;
}
.section-title{
  margin:0 !important;
  color:#273653 !important;
  font-family:"Nunito",sans-serif !important;
  font-size:clamp(46px,4.45vw,64px) !important;
  line-height:1.02 !important;
  font-weight:800 !important;
  letter-spacing:.055em !important;
}
.section-jp{
  margin:12px 0 0 !important;
  color:#71819a !important;
  font-size:13px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
}

/* Remove older section-head copy spacing rules from the visual hierarchy. */
.activity-head .section-title,
.content-head .section-title,
.team-head .section-title,
.contact-head .section-title{
  font-size:clamp(46px,4.45vw,64px) !important;
  line-height:1.02 !important;
  letter-spacing:.055em !important;
}
.activity-head,
.content-head,
.team-head{
  margin-bottom:52px !important;
}

/* CONTACT now follows the same heading system and uses a single centered form column. */
.contact-shell{
  display:block !important;
}
.contact-head{
  max-width:none !important;
  margin:0 0 44px !important;
  text-align:center !important;
}
.contact-form{
  width:min(100%, 820px) !important;
  margin:0 auto !important;
}
.contact-intro{
  display:none !important;
}

@media (max-width:700px){
  .section-head{
    margin-bottom:34px !important;
  }
  .section-title,
  .activity-head .section-title,
  .content-head .section-title,
  .team-head .section-title,
  .contact-head .section-title{
    font-size:clamp(34px,10.2vw,44px) !important;
    line-height:1.04 !important;
    letter-spacing:.045em !important;
  }
  .section-jp{
    margin-top:8px !important;
    font-size:12px !important;
    letter-spacing:.08em !important;
  }
  .activity-head,
  .content-head,
  .team-head{
    margin-bottom:34px !important;
  }
  .contact-head{
    margin-bottom:28px !important;
  }
}


/* final specificity guard for unified main section titles */
.section-head .section-title{
  font-family:"Nunito",sans-serif !important;
  font-size:clamp(46px,4.45vw,64px) !important;
  line-height:1.02 !important;
  font-weight:800 !important;
  letter-spacing:.055em !important;
  color:#273653 !important;
}
@media (max-width:700px){
  .section-head .section-title{
    font-size:clamp(34px,10.2vw,44px) !important;
    line-height:1.04 !important;
    letter-spacing:.045em !important;
  }
}


/* =========================
   v55 TEAM group headings
========================= */
.team-subhead{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 26px;
  text-align:center;
}
.team-subhead h3{
  position:relative;
  margin:0;
  padding:0 18px;
  color:#334767;
  font-size:22px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.06em;
}
.team-subhead h3:before,
.team-subhead h3:after{
  content:"";
  position:absolute;
  top:50%;
  width:42px;
  height:1px;
  background:rgba(111,129,160,.28);
}
.team-subhead h3:before{
  right:100%;
}
.team-subhead h3:after{
  left:100%;
}
.team-organize{
  margin-top:78px !important;
}
.team-subhead-organize{
  margin-bottom:28px;
}

@media (max-width:700px){
  .team-subhead{
    margin-bottom:20px;
  }
  .team-subhead h3{
    font-size:18px;
    letter-spacing:.04em;
    padding:0 14px;
  }
  .team-subhead h3:before,
  .team-subhead h3:after{
    width:28px;
  }
  .team-organize{
    margin-top:58px !important;
  }
}

/* =========================
   v56 TEAM organizer text cleanup
========================= */
.organize-card .organizer-position{
  margin:10px 0 0;
  color:#4f607b;
  font-family:"Nunito",sans-serif;
  font-size:12px;
  font-weight:800;
  line-height:1.55;
  letter-spacing:.09em;
}
.organize-card .organizer-skills{
  margin:6px 0 0;
  color:#7a899f;
  font-family:"Nunito",sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1.7;
  letter-spacing:.045em;
}
.organize-no{display:none !important;}
@media (max-width:700px){
  .organize-card .organizer-position{font-size:11px;}
  .organize-card .organizer-skills{font-size:10px;line-height:1.65;}
}


/* =========================
   v57 voice actor numbering cleanup + HERO sizing
========================= */
.voice-actor-card .portrait-mark{
  display:none !important;
}

/* HERO title: slightly quieter so the illustration and body copy breathe */
.hero-v20-line{
  font-size:clamp(48px,4.35vw,70px) !important;
}
.hero-v20-second{
  font-size:clamp(44px,3.9vw,62px) !important;
}

@media (max-width:1180px){
  .hero-v20-line{
    font-size:clamp(44px,4.25vw,60px) !important;
  }
  .hero-v20-second{
    font-size:clamp(40px,3.9vw,54px) !important;
  }
}

@media (max-width:700px){
  .hero-v20-line{
    font-size:clamp(32px,9.6vw,40px) !important;
    line-height:1.14 !important;
  }
  .hero-v20-second{
    margin-top:7px !important;
    font-size:clamp(30px,8.9vw,38px) !important;
    line-height:1.14 !important;
  }
}

/* =========================
   v58 HERO title sizing refinement
========================= */
.hero-v20-line{
  font-size:clamp(42px,3.75vw,60px) !important;
}
.hero-v20-second{
  font-size:clamp(38px,3.35vw,52px) !important;
}

@media (max-width:1180px){
  .hero-v20-line{
    font-size:clamp(38px,3.8vw,52px) !important;
  }
  .hero-v20-second{
    font-size:clamp(35px,3.45vw,47px) !important;
  }
}

@media (max-width:700px){
  .hero-v20-line{
    font-size:clamp(29px,8.7vw,36px) !important;
    line-height:1.16 !important;
  }
  .hero-v20-second{
    margin-top:6px !important;
    font-size:clamp(28px,8.15vw,34px) !important;
    line-height:1.16 !important;
  }
}



/* v59 ABOUT heading alignment */
.about-title-row{
  justify-content:center !important;
  text-align:center !important;
}
.about-description{
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}


/* =========================
   v60 HERO title compact refinement
========================= */
.hero-v20-line{
  font-size:clamp(36px,3.2vw,52px) !important;
}
.hero-v20-second{
  font-size:clamp(34px,2.95vw,46px) !important;
}

@media (max-width:1180px){
  .hero-v20-line{
    font-size:clamp(34px,3.35vw,46px) !important;
  }
  .hero-v20-second{
    font-size:clamp(32px,3.05vw,42px) !important;
  }
}

@media (max-width:700px){
  .hero-v20-line{
    font-size:clamp(27px,8vw,32px) !important;
    line-height:1.17 !important;
  }
  .hero-v20-second{
    margin-top:5px !important;
    font-size:clamp(26px,7.55vw,31px) !important;
    line-height:1.17 !important;
  }
}


/* =========================
   v61 ACTIVITY card headings
========================= */
.activity-index{
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.10em !important;
  margin-bottom:12px !important;
}
.activity-card h3{
  font-size:32px !important;
  line-height:1.2 !important;
}
@media (max-width:700px){
  .activity-index{
    font-size:14px !important;
    margin-bottom:9px !important;
  }
  .activity-card h3{
    font-size:27px !important;
  }
}

/* =========================
   v64 HERO background reset
   Restore the soft, clean pink/blue atmosphere without muddy overlap.
========================= */
.hero-reference{
  isolation:isolate;
  background:transparent !important;
}
.hero-reference:before{
  content:"";
  position:absolute;
  z-index:-3;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 8% 24%, rgba(107,198,255,.13), transparent 30%),
    radial-gradient(circle at 91% 72%, rgba(239,103,151,.10), transparent 29%),
    radial-gradient(circle at 72% 20%, rgba(141,99,222,.045), transparent 24%),
    linear-gradient(180deg,#fcfeff 0%,#ffffff 100%);
  pointer-events:none;
}
.hero-reference-bg{
  opacity:.58 !important;
  filter:blur(46px) !important;
}
.hero-bg-blue{
  background:radial-gradient(circle,rgba(95,189,255,.15),rgba(107,139,255,.035) 48%,transparent 74%) !important;
}
.hero-bg-pink{
  background:radial-gradient(circle,rgba(244,120,183,.12),rgba(157,122,255,.03) 48%,transparent 74%) !important;
}



/* =========================
   v65 tighten hero step spacing
========================= */
.hero-reference-steps{
  padding:0 18px !important;
}
.hero-ref-step{
  grid-template-columns:96px 1fr !important;
  gap:12px !important;
  min-height:136px !important;
  padding:0 18px !important;
}
.hero-ref-icon{
  width:88px !important;
  height:88px !important;
}
.hero-ref-icon img,
.hero-ref-icon svg{
  width:72px !important;
  height:72px !important;
}
.hero-ref-label h3{
  font-size:27px !important;
}
.hero-ref-label i{
  margin-top:12px !important;
}

@media (max-width:980px){
  .hero-reference-steps{padding:0 10px !important;}
  .hero-ref-step{
    grid-template-columns:82px 1fr !important;
    gap:10px !important;
    min-height:124px !important;
    padding:0 14px !important;
  }
  .hero-ref-icon{
    width:74px !important;
    height:74px !important;
  }
  .hero-ref-icon img,
  .hero-ref-icon svg{
    width:58px !important;
    height:58px !important;
  }
  .hero-ref-label h3{font-size:24px !important;}
}


/* =========================
   v66 hero full-width background cleanup
========================= */
.hero-reference{
  max-width:none !important;
  margin:0 !important;
  background:
    radial-gradient(circle at 8% 24%, rgba(170,215,255,.22), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(245,193,224,.18), transparent 26%),
    linear-gradient(90deg, #edf7ff 0%, #ffffff 26%, #ffffff 74%, #fff5fb 100%) !important;
}
.hero-reference-main,
.hero-reference-steps{
  max-width:1320px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.hero-bg-blue{
  left:max(-220px, calc((100vw - 1320px) / 2 - 260px)) !important;
}
.hero-bg-pink{
  right:max(-180px, calc((100vw - 1320px) / 2 - 220px)) !important;
}
@media (max-width:700px){
  .hero-reference{
    background:
      radial-gradient(circle at 12% 10%, rgba(170,215,255,.18), transparent 24%),
      radial-gradient(circle at 88% 18%, rgba(245,193,224,.15), transparent 22%),
      linear-gradient(180deg, #f4fbff 0%, #ffffff 62%, #fff8fc 100%) !important;
  }
}


/* =========================
   v67 mobile hero line-break and image size refinement
========================= */
@media (max-width:700px){
  .hero-reference{
    padding:24px 16px 38px !important;
  }
  .hero-reference-copy h1,
  .hero-v20-title{
    max-width:360px !important;
  }
  .hero-v20-title .hero-v20-line:first-child{
    white-space:nowrap !important;
  }
  .hero-v20-line{
    font-size:clamp(24px,7.1vw,30px) !important;
    line-height:1.18 !important;
    letter-spacing:0 !important;
  }
  .hero-v20-second{
    margin-top:8px !important;
    font-size:clamp(25px,7.4vw,31px) !important;
    line-height:1.18 !important;
  }
  .hero-reference-body{
    margin-top:20px !important;
  }
  .hero-reference-visual{
    max-width:360px !important;
    width:100% !important;
    margin:10px auto 0 !important;
  }
  .hero-reference-visual img{
    width:100% !important;
  }
}


/* =========================
   v68 mobile hero emphasis and copy wrap fix
========================= */
@media (max-width:700px){
  .hero-v20-title .hero-v20-line:first-child{
    font-size:clamp(28px,8.2vw,34px) !important;
    line-height:1.16 !important;
  }
  .hero-v20-second{
    font-size:clamp(24px,7.2vw,30px) !important;
  }
  .hero-reference-body p:first-child{
    max-width:100% !important;
  }
}

/* =========================
   Voice sample seek controls
========================= */
.sample-progress{
  position:relative;
  height:14px;
  display:flex;
  align-items:center;
  overflow:visible;
  cursor:pointer;
  touch-action:none;
  background:transparent;
}
.sample-progress::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#e7ebf3;
}
.sample-progress i{
  position:relative;
  z-index:1;
  display:block;
  width:0%;
  height:4px;
  border-radius:999px;
  background:var(--actor);
  pointer-events:none;
}
.sample-progress i::after{
  content:"";
  position:absolute;
  right:-5px;
  top:50%;
  width:10px;
  height:10px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--actor);
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
  opacity:0;
  transition:opacity .15s ease;
}
.voice-sample:hover .sample-progress i::after,
.voice-sample.is-playing .sample-progress i::after{
  opacity:1;
}
.sample-time{
  min-width:72px;
  white-space:nowrap;
}
@media (max-width:620px){
  .sample-progress{
    height:18px;
  }
  .sample-time{
    min-width:78px;
    font-size:9px;
  }
}


/* =========================
   Voice sample mobile compact layout
   row 1: play + title/subtitle
   row 2: seek bar + time
========================= */
@media (max-width:620px){
  .voice-sample{
    grid-template-columns:32px minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:10px !important;
    row-gap:5px !important;
    padding:10px 12px !important;
    align-items:center !important;
  }
  .sample-play{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
  }
  .sample-meta{
    grid-column:2 / 4 !important;
    grid-row:1 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    gap:7px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }
  .sample-meta strong{
    flex:0 0 auto !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }
  .sample-meta small{
    min-width:0 !important;
    flex:1 1 auto !important;
    font-size:9px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .sample-progress{
    grid-column:2 !important;
    grid-row:2 !important;
    min-width:0 !important;
    width:100% !important;
    height:16px !important;
  }
  .sample-time{
    grid-column:3 !important;
    grid-row:2 !important;
    min-width:68px !important;
    width:auto !important;
    margin:0 !important;
    font-size:9px !important;
    text-align:right !important;
    white-space:nowrap !important;
  }
}


/* =========================
   Voice sample compact 2-row layout - desktop + mobile
   row 1: play + type + title
   row 2: seek bar + current / duration
========================= */
.voice-sample{
  grid-template-columns:34px minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  column-gap:10px !important;
  row-gap:6px !important;
  padding:11px 12px !important;
  align-items:center !important;
}
.sample-play{
  grid-column:1 !important;
  grid-row:1 / 3 !important;
  align-self:center !important;
}
.sample-meta{
  grid-column:2 / 4 !important;
  grid-row:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:8px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.sample-meta strong{
  flex:0 0 auto !important;
  font-size:11px !important;
  white-space:nowrap !important;
}
.sample-meta small{
  min-width:0 !important;
  flex:1 1 auto !important;
  font-size:10px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.sample-progress{
  grid-column:2 !important;
  grid-row:2 !important;
  min-width:0 !important;
  width:100% !important;
  height:16px !important;
}
.sample-time{
  grid-column:3 !important;
  grid-row:2 !important;
  min-width:74px !important;
  width:auto !important;
  margin:0 !important;
  font-size:9px !important;
  text-align:right !important;
  white-space:nowrap !important;
}
@media (max-width:620px){
  .voice-sample{
    grid-template-columns:32px minmax(0,1fr) auto !important;
    padding:10px 11px !important;
    column-gap:9px !important;
  }
  .sample-meta{gap:6px !important;}
  .sample-meta strong{font-size:10px !important;}
  .sample-meta small{font-size:9px !important;}
  .sample-time{min-width:68px !important;font-size:9px !important;}
}


/* =========================
   v4 remove sample category labels
========================= */
.sample-meta{
  gap:0 !important;
  align-items:center !important;
}
.sample-meta strong{
  display:none !important;
}
.sample-meta small{
  font-size:11px !important;
  line-height:1.35 !important;
}
@media (max-width:620px){
  .sample-meta small{
    font-size:10px !important;
  }
}


/* =========================
   WORKS categorized accordion
========================= */
.voice-works-categories{
  padding:2px 14px 16px;
}
.works-category{
  padding:16px 0 14px;
  border-top:1px solid color-mix(in srgb,var(--actor) 14%,#e7ebf3);
}
.works-category:first-child{
  border-top:none;
}
.works-category h4{
  margin:0 0 10px;
  color:var(--actor);
  font-family:"Nunito",sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
}
.works-category ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.works-category li{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(248,250,255,.72);
}
.works-category time{
  padding-top:1px;
  color:#97a5ba;
  font-family:"Nunito",sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  white-space:nowrap;
}
.works-category li > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.works-category strong{
  color:#31435f;
  font-size:12px;
  line-height:1.5;
  font-weight:700;
  overflow-wrap:anywhere;
}
.works-category li span{
  color:#7b8ba2;
  font-size:10px;
  line-height:1.5;
}

@media (max-width:620px){
  .voice-works-categories{
    padding:0 10px 12px;
  }
  .works-category{
    padding:14px 0 12px;
  }
  .works-category li{
    grid-template-columns:58px minmax(0,1fr);
    gap:8px;
    padding:9px 8px;
  }
  .works-category h4{
    font-size:11px;
    margin-bottom:8px;
  }
  .works-category time{
    font-size:9px;
  }
  .works-category strong{
    font-size:11px;
  }
  .works-category li span{
    font-size:9px;
  }
}


/* =========================
   Profile facts refinement
========================= */
.voice-profile-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:14px 0 20px;
  padding:0;
}
.profile-fact{
  min-width:0;
  padding:10px 11px;
  border:1px solid color-mix(in srgb,var(--actor) 12%,#e6ebf3);
  border-radius:12px;
  background:color-mix(in srgb,var(--actor-soft) 42%,white);
}
.profile-fact-wide{
  grid-column:span 3;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:baseline;
  gap:10px;
}
.profile-fact dt{
  margin:0 0 3px;
  color:var(--actor);
  font-family:"Nunito",sans-serif;
  font-size:9px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.11em;
}
.profile-fact dd{
  margin:0;
  color:#40536f;
  font-size:11px;
  line-height:1.55;
  font-weight:700;
}
.profile-fact-wide dt{margin:0;}

/* Slightly clearer categorized works */
.works-category h4{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--actor-soft);
}

@media (max-width:620px){
  .voice-profile-facts{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .profile-fact{padding:9px 8px;}
  .profile-fact-wide{
    grid-column:span 3;
    grid-template-columns:52px minmax(0,1fr);
    gap:8px;
  }
  .profile-fact dt{font-size:8px;}
  .profile-fact dd{font-size:10px;}
}


/* =========================
   Profile flat editorial style
========================= */
.voice-profile-block{
  margin:16px 0 22px;
  padding-top:2px;
}
.voice-profile-label{
  margin:0 0 12px;
  color:#6f7f99;
  font-family:"Nunito",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}
.voice-profile-facts{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  border-top:1px solid rgba(91,111,145,.14);
  border-bottom:1px solid rgba(91,111,145,.14);
}
.profile-fact{
  min-width:0;
  padding:13px 12px 12px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
.profile-fact:not(.profile-fact-wide){
  border-right:1px solid rgba(91,111,145,.10) !important;
}
.profile-fact:nth-child(3){
  border-right:0 !important;
}
.profile-fact-wide{
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:66px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:baseline !important;
  border-top:1px solid rgba(91,111,145,.10) !important;
}
.profile-fact dt{
  margin:0 0 4px !important;
  color:var(--actor) !important;
  font-family:"Nunito",sans-serif;
  font-size:9px !important;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.12em;
}
.profile-fact dd{
  margin:0 !important;
  color:#344b69 !important;
  font-size:11px !important;
  line-height:1.55;
  font-weight:700;
}
.profile-fact-wide dt{
  margin:0 !important;
}

@media (max-width:620px){
  .voice-profile-label{
    margin-bottom:10px;
    font-size:10px;
  }
  .profile-fact{
    padding:11px 8px 10px !important;
  }
  .profile-fact-wide{
    grid-template-columns:58px minmax(0,1fr) !important;
    gap:8px !important;
  }
  .profile-fact dt{font-size:8px !important;}
  .profile-fact dd{font-size:10px !important;}
}


/* =========================
   TEAM: organizer / collaborators split
========================= */
.team-member-group + .team-member-group{
  margin-top:54px;
}
.organizer-grid{
  grid-template-columns:minmax(0, 1fr) !important;
  max-width:430px;
  margin:0 auto;
}
.collaborator-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  max-width:900px;
  margin:0 auto;
}
.team-subhead-collaborators{
  margin-top:0;
}
@media (max-width:700px){
  .team-member-group + .team-member-group{
    margin-top:44px;
  }
  .organizer-grid{
    display:grid !important;
    max-width:none;
  }
  .collaborator-grid{
    max-width:none;
  }
  .organizer-grid > .organize-card{
    width:100% !important;
    flex:none !important;
  }
}

/* =========================================================
   HERO TITLE — FINAL ALIGNMENT
   ・1行目：「やってみたい」が
   ・「が」は2行目と同系統の濃紺
   ・2行目はタイトル領域の右端から1em左へ
   ・2行目は改行させない
========================================================= */
.hero-v20-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  width:100%;
  max-width:100%;
}

.hero-v20-tail{
  color:#273653 !important;
  font-weight:700 !important;
  font-size:.9em !important;
  letter-spacing:0 !important;
}

.hero-v20-second{
  align-self:flex-end !important;
  margin-left:0 !important;
  margin-right:1em !important;
  white-space:nowrap !important;
}

/* Tablet */
@media (max-width:980px){
  .hero-v20-second{
    margin-right:.6em !important;
  }
}

/* Smartphone */
@media (max-width:700px){
  .hero-v20-title{
    width:100%;
    max-width:360px !important;
  }

  .hero-v20-title .hero-v20-line:first-child{
    white-space:nowrap !important;
  }

  .hero-v20-second{
    margin-right:0em !important;
    white-space:nowrap !important;
  }
}

.profile-hobby {
  min-height: 72px;
}