/* YTMP3 service pages only. The homepage and editorial blog retain their own layout. */
.service-home{
  --svc-edge:#bfd8ef;
  --svc-wash:#edf6ff;
  --svc-deep:#12365b;
  --svc-bright:#006cbb;
  --svc-elevation:0 18px 48px rgba(13,60,107,.09);
}
html.dark .service-home{
  --svc-edge:#3b5c7d;
  --svc-wash:#1b314d;
  --svc-deep:#10233d;
  --svc-bright:#8bcfff;
  --svc-elevation:0 18px 48px rgba(0,0,0,.22);
}
.service-home #text{
  box-sizing:border-box;
  /* Match the homepage content rail; inner grids stay within this width. */
  width:auto;
  max-width:600px;
  margin:0 auto 30px;
  padding-bottom:40px;
}
.service-home .converter-hero,
.service-home .converter-hero .search-form{max-width:600px}
.service-home #text article,
.service-home #text article>section,
.service-home #text article>header{min-width:0}
.service-home #text article>header.service-intro{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:6px 0 22px;
  padding:32px clamp(22px,4vw,46px);
  border:1px solid var(--svc-edge);
  border-radius:24px;
  background:linear-gradient(128deg,var(--yt-card),var(--svc-wash));
  box-shadow:var(--svc-elevation);
  text-align:start;
}
.service-home #text .service-intro h1{
  max-width:19ch;
  margin:0 auto;
  color:var(--yt-ink);
  font-size:clamp(31px,5vw,54px);
  font-weight:800;
  line-height:1.09;
  letter-spacing:-.045em;
  text-align:center;
  text-wrap:balance;
}
.service-home #text .service-intro>p:not(.service-kicker){
  max-width:66ch;
  margin:16px auto 0;
  color:var(--yt-muted);
  font-size:clamp(16px,1.9vw,18px);
  line-height:1.65;
  text-align:center;
}
.service-home #text .service-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:fit-content;
  max-width:100%;
  margin:0 0 15px;
  padding:7px 11px;
  border:1px solid var(--svc-edge);
  border-radius:999px;
  background:var(--yt-card);
  color:var(--svc-bright);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.07em;
  text-align:start;
  text-transform:uppercase;
}
.service-home #text .service-kicker svg{
  display:block;
  flex:none;
  width:18px;
  height:18px;
}
.service-home #text .trending-panel{
  overflow:hidden;
  margin:0 0 28px;
  padding:clamp(16px,3vw,24px);
  border:1px solid var(--svc-edge);
  border-radius:22px;
  background:var(--yt-card);
  box-shadow:var(--svc-elevation);
}
.service-home #text .trending-panel .trending-title{
  color:var(--yt-ink);
  font-size:clamp(20px,3vw,25px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.025em;
}
.service-home #text .trending-panel .list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:9px;
  margin:18px 0 0;
}
.service-home #text .trending-panel .list>div{
  box-sizing:border-box;
  min-width:0;
  min-height:64px;
  margin:0;
  padding:9px 11px;
  border:1px solid var(--yt-line);
  border-radius:13px;
  background:var(--yt-soft);
}
.service-home #text .trending-panel .list a.trending-download{
  min-width:78px;
  min-height:44px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
}
.service-home #text article>section.service-howto{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  margin:0 0 24px;
  padding:clamp(19px,3vw,28px);
  border:1px solid var(--svc-edge);
  border-radius:22px;
  background:var(--yt-card);
  box-shadow:var(--svc-elevation);
}
.service-home #text .service-howto>h2{
  margin:0;
  color:var(--yt-ink);
  font-size:clamp(22px,3vw,30px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.035em;
  text-align:start;
}
.service-home #text .service-motif{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:170px;
  overflow:hidden;
  padding:12px;
  border:1px solid var(--svc-edge);
  border-radius:18px;
  background:linear-gradient(135deg,var(--svc-wash),var(--yt-card));
  color:var(--svc-bright);
}
.service-home #text .service-motif svg{
  position:relative;
  z-index:1;
  display:block;
  width:min(100%,420px);
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
}
.service-home #text .service-howto ol{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
.service-home #text .service-howto ol>li{
  min-width:0;
  min-height:62px;
  margin:0;
  padding:14px;
  padding-inline-start:55px;
  border:1px solid var(--yt-line);
  border-radius:13px;
  background:var(--yt-soft);
  color:var(--yt-ink);
  font-size:16px;
  line-height:1.5;
  text-align:start;
}
.service-home #text .service-howto ol>li::before{
  top:14px;
  left:auto;
  right:auto;
  inset-inline-start:14px;
  border-radius:9px;
}
.service-home #text #guide.service-howto .guide-visuals{
  grid-column:1/-1;
  width:100%;
  min-width:0;
  margin:6px 0 0;
}
.service-home #text #guide.service-howto .guide-visual{
  min-width:0;
  border-radius:14px;
}
.service-home #text #guide.service-howto .guide-visual figcaption strong,
.service-home #text #guide.service-howto .guide-visual figcaption small{font-size:12px}
.service-home #text article>section.service-details{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  margin:0 0 24px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.service-home #text .service-detail{
  min-width:0;
  margin:0;
  padding:clamp(18px,2.5vw,24px);
  border:1px solid var(--yt-line);
  border-radius:18px;
  background:var(--yt-card);
  box-shadow:var(--yt-shadow);
}
.service-home #text .service-detail-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:35px;
  margin:0 0 13px;
  padding:0 9px;
  border:1px solid var(--svc-edge);
  border-radius:10px;
  background:var(--svc-wash);
  color:var(--svc-bright);
  font-size:13px;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.service-home #text .service-detail-number span{display:block}
.service-home #text .service-detail h2,
.service-home #text .service-detail h3{
  margin:0 0 9px;
  color:var(--yt-ink);
  font-size:clamp(19px,2.5vw,23px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.025em;
  text-align:start;
}
.service-home #text .service-detail p{
  margin:0;
  color:var(--yt-muted);
  font-size:16px;
  line-height:1.68;
  text-align:start;
}
.service-home #text .service-detail p+p{margin-top:12px}
.service-home #text article>section#features{
  margin:0 0 24px;
  padding:clamp(19px,3vw,27px);
  border-radius:22px;
  border-color:var(--svc-edge);
  background:linear-gradient(145deg,var(--yt-card),var(--svc-wash));
}
.service-home #text #features>h2{
  margin:0 0 9px;
  color:var(--yt-ink);
  font-size:clamp(22px,3vw,29px);
  font-weight:800;
  letter-spacing:-.03em;
}
.service-home #text #features .feature-grid{gap:12px}
.service-home #text #features .feature-card{min-height:0}
.service-home #text #features .feature-card p{font-size:15px}
.service-home #text .home-tools,
.service-home #text .home-guides{
  margin-top:22px;
  border-radius:18px;
}
.service-home #text a:focus-visible{
  outline:3px solid #ffbf47;
  outline-offset:3px;
}
.service-home #text .editorial-service-links a{
  align-items:center;
  min-height:44px;
  box-sizing:border-box;
  touch-action:manipulation;
}

/* Mp3Juice: numbered cobalt tracklist and a broad lead editorial detail. */
.service-home--mp3juice #text article>header.service-intro{
  padding-bottom:44px;
  border-color:#264f77;
  background:radial-gradient(circle at 100% 0%,#295a87 0%,transparent 46%),linear-gradient(128deg,#123154,#0c2948);
}
.service-home--mp3juice #text .service-intro::after{
  content:'';
  position:absolute;
  right:32px;
  bottom:19px;
  left:32px;
  height:5px;
  border-radius:99px;
  background:repeating-linear-gradient(90deg,#5ab7ff 0 42px,rgba(255,255,255,.2) 42px 48px);
}
.service-home--mp3juice #text .service-intro h1{color:#fff}
.service-home--mp3juice #text .service-intro>p:not(.service-kicker){color:#d7eaff}
.service-home--mp3juice #text .service-kicker{border-color:#41749e;background:#22486f;color:#fff}
.service-home--mp3juice #text .trending-panel .list{counter-reset:svc-track}
.service-home--mp3juice #text .trending-panel .list>div{counter-increment:svc-track;gap:9px;background:var(--yt-card)}
.service-home--mp3juice #text .trending-panel .list>div::before{
  content:counter(svc-track,decimal-leading-zero);
  flex:0 0 25px;
  color:var(--svc-bright);
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.service-home--mp3juice #text .service-motif{
  background:repeating-linear-gradient(90deg,rgba(0,108,187,.08) 0 1px,transparent 1px 30px),linear-gradient(135deg,var(--svc-wash),var(--yt-card));
}
.service-home--mp3juice #text .service-details .service-detail:first-child{
  border-color:var(--svc-edge);
  background:linear-gradient(145deg,var(--yt-card),var(--svc-wash));
}

/* Y2Mate: a paired-format frame with two balanced information columns. */
.service-home--y2mate #text article>header.service-intro{
  border-inline-start:7px solid var(--yt-blue);
  background:linear-gradient(90deg,var(--yt-card) 0 52%,var(--svc-wash) 52% 100%);
}
.service-home--y2mate #text .service-motif{
  min-height:200px;
  background:linear-gradient(90deg,#dcefff 0 50%,#cce9ff 50% 100%);
}
html.dark .service-home--y2mate #text .service-motif{
  background:linear-gradient(90deg,#1a3454 0 50%,#244667 50% 100%);
}
.service-home--y2mate #text .service-motif::before{
  content:'';
  position:absolute;
  top:12%;
  bottom:12%;
  left:50%;
  width:1px;
  background:var(--svc-edge);
}
.service-home--y2mate #text .service-detail{
  border-top:4px solid var(--yt-blue);
}
.service-home--y2mate #text #features .feature-card--1{
  grid-column:auto;
}

/* Tubidy: compact, mobile-device proportions and a softer vertical rhythm. */
.service-home--tubidy #text article>header.service-intro{
  border-radius:30px;
  background:radial-gradient(circle at 90% 0%,rgba(0,134,231,.15),transparent 36%),var(--yt-card);
}
.service-home--tubidy #text .service-intro h1{max-width:24ch}
.service-home--tubidy #text .trending-panel,
.service-home--tubidy #text article>section.service-howto,
.service-home--tubidy #text .service-detail{border-radius:25px}
.service-home--tubidy #text .service-motif{
  width:min(100%,320px);
  min-height:240px;
  margin-inline:auto;
  border:8px solid var(--svc-deep);
  border-radius:30px;
  background:var(--svc-wash);
  box-shadow:0 14px 28px rgba(12,43,75,.14);
}
.service-home--tubidy #text .service-motif::before{
  content:'';
  position:absolute;
  top:7px;
  left:50%;
  width:66px;
  height:5px;
  border-radius:99px;
  background:var(--svc-deep);
  transform:translateX(-50%);
}
.service-home--tubidy #text article>section.service-details{grid-template-columns:minmax(0,1fr)}
.service-home--tubidy #text .service-detail{padding:20px 23px}
.service-home--tubidy #text .trending-panel .list>div{border-radius:15px}

/* YouTube to MP3: audio-studio motif above an ordered listening workflow. */
.service-home--youtube-to-mp3 #text article>header.service-intro{
  border-color:#29567f;
  background:linear-gradient(125deg,#102944,#1b4770);
}
.service-home--youtube-to-mp3 #text .service-intro h1{color:#fff}
.service-home--youtube-to-mp3 #text .service-intro>p:not(.service-kicker){color:#d9eaff}
.service-home--youtube-to-mp3 #text .service-kicker{border-color:#4178a5;background:#234c72;color:#fff}
.service-home--youtube-to-mp3 #text .service-motif{
  min-height:260px;
  background:repeating-linear-gradient(90deg,rgba(124,202,255,.13) 0 2px,transparent 2px 26px),linear-gradient(135deg,#102946,#204b73);
  color:#bfe9ff;
}
.service-home--youtube-to-mp3 #text .service-howto ol>li{
  border-inline-start:3px solid var(--yt-blue);
}
.service-home--youtube-to-mp3 #text .service-detail-number{
  border-radius:99px;
}

/* YouTube to MP4: cinematic visual with a two-by-two sequence on wider screens. */
.service-home--youtube-to-mp4 #text article>header.service-intro{
  background:linear-gradient(130deg,#112b49,#173f65);
  border-color:#315d82;
}
.service-home--youtube-to-mp4 #text .service-intro h1{max-width:21ch;color:#fff}
.service-home--youtube-to-mp4 #text .service-intro>p:not(.service-kicker){color:#dcecff}
.service-home--youtube-to-mp4 #text .service-kicker{border-color:#4b799f;background:#254f73;color:#fff}
.service-home--youtube-to-mp4 #text .service-motif{
  min-height:0;
  aspect-ratio:16/9;
  padding:4%;
  border:8px solid #193856;
  border-radius:20px;
  background:radial-gradient(circle at 50% 35%,#315b83,#0d2239 74%);
  box-shadow:0 20px 36px rgba(8,29,53,.18);
  color:#d9f1ff;
}
.service-home--youtube-to-mp4 #text .service-motif::after{
  content:'';
  position:absolute;
  right:12%;
  bottom:5px;
  left:12%;
  height:3px;
  border-radius:99px;
  background:#7ac7ff;
}
.service-home--youtube-to-mp4 #text .service-motif svg{max-width:690px}
.service-home--youtube-to-mp4 #text .trending-panel .list img{
  width:70px;
  height:48px;
  border-radius:8px;
  object-fit:cover;
}

/* YouTube Downloader: connected vertical process and a leading wide feature. */
.service-home--youtube-downloader #text article>header.service-intro{
  border-inline-start:7px solid var(--yt-blue);
  background:linear-gradient(145deg,var(--yt-card),var(--svc-wash));
}
.service-home--youtube-downloader #text .service-howto ol{
  position:relative;
  gap:0;
  padding-inline-start:25px;
}
.service-home--youtube-downloader #text .service-howto ol::before{
  content:'';
  position:absolute;
  top:19px;
  bottom:19px;
  inset-inline-start:12px;
  width:3px;
  border-radius:99px;
  background:var(--svc-edge);
}
.service-home--youtube-downloader #text .service-howto ol>li{
  margin:0 0 11px;
  padding-inline-start:20px;
  background:var(--yt-card);
}
.service-home--youtube-downloader #text .service-howto ol>li:last-child{margin-bottom:0}
.service-home--youtube-downloader #text .service-howto ol>li::before{
  top:17px;
  inset-inline-start:-39px;
  z-index:1;
  border:3px solid var(--yt-card);
  border-radius:50%;
  box-sizing:content-box;
}
.service-home--youtube-downloader #text .service-motif{
  min-height:220px;
  border-style:dashed;
  background:linear-gradient(145deg,var(--svc-wash),var(--yt-card));
}
.service-home--youtube-downloader #text #features .feature-card--1{
  grid-column:1/-1;
}

/* A 600px content rail supports two cards, never a second tracklist column. */
@media(min-width:601px){
  .service-home #text article>section.service-details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-home--mp3juice #text .service-howto ol,
  .service-home--y2mate #text .service-howto ol,
  .service-home--youtube-to-mp4 #text .service-howto ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-home--mp3juice #text .service-details .service-detail:first-child{grid-column:1/-1}
  .service-home--mp3juice #text article>section.service-details{grid-template-columns:1.15fr .85fr}
  .service-home--y2mate #text #features .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-home--y2mate #text .service-details .service-detail:last-child,
  .service-home--youtube-to-mp4 #text .service-details .service-detail:last-child{grid-column:1/-1}
  .service-home--youtube-to-mp4 #text .service-howto ol>li{padding:50px 13px 14px}
  .service-home--youtube-to-mp4 #text .service-howto ol>li::before{top:13px;inset-inline-start:13px}
  .service-home--youtube-downloader #text .service-detail:first-child{grid-column:1/-1}
}

@media(max-width:759px){
  .service-home #text .service-intro h1{font-size:clamp(28px,7vw,39px)}
  .service-home #text article>header.service-intro{margin-top:4px;padding:24px 20px}
  .service-home #text .service-motif{min-height:160px}
  .service-home--tubidy #text .service-motif{min-height:230px}
  .service-home--youtube-to-mp4 #text .service-motif{min-height:0}
}

@media(max-width:600px){
  .service-home #text{width:92%}
  .service-home #text #features .feature-grid{grid-template-columns:minmax(0,1fr)}
  .service-home #text #features .feature-card--1{grid-column:auto}
}

@media(max-width:390px){
  .service-home #text article>header.service-intro{padding:21px 16px}
  .service-home #text .trending-panel{padding:13px}
  .service-home #text .trending-panel .list>div{gap:8px;padding:8px}
  .service-home #text .trending-panel .list img{width:40px;height:40px}
  .service-home #text .trending-panel .list a.trending-download{min-width:67px;padding:0 8px;font-size:11px}
  .service-home--mp3juice #text .trending-panel .list>div::before{flex-basis:20px;font-size:11px}
  .service-home #text article>section.service-howto,
  .service-home #text article>section#features{padding:16px}
  .service-home #text .service-detail{padding:17px}
}

html[dir=rtl] .service-home #text .service-detail,
html[dir=rtl] .service-home #text .service-detail p,
html[dir=rtl] .service-home #text .service-detail h2,
html[dir=rtl] .service-home #text .service-detail h3,
html[dir=rtl] .service-home #text .service-howto ol>li{text-align:right}
@media(prefers-reduced-motion:reduce){
  .service-home #text .trending-panel a.trending-download,
  .service-home #text .editorial-service-links a{transition:none}
}

/* Tool-specific editorial benefits replace the shared homepage feature copy. */
.service-home #text article>header.service-intro{text-align:center}
.service-home #text article>section#features.service-details{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.service-home #text .service-details>h2{grid-column:1/-1;margin:0 0 3px}
.service-home #text .service-detail.feature-card{min-height:0;padding:clamp(18px,2.5vw,24px);overflow:visible}
.service-home #text .service-detail.feature-card p{max-width:none!important;font-size:16px;text-align:start!important}
.service-home #text .service-detail-number{align-self:flex-start}
.service-home #text .service-detail a{color:var(--svc-bright)!important;text-decoration:underline;text-underline-offset:3px}
.service-home--mp3juice #text .service-details .service-detail:first-of-type,
.service-home--youtube-downloader #text .service-details .service-detail:first-of-type{grid-column:1/-1}
.service-home--tubidy #text article>section#features.service-details{grid-template-columns:minmax(0,1fr)}
.service-home #text .service-return{display:flex;justify-content:center;margin-top:22px}
.service-home #text .service-return a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 28px;border:1px solid #0067a4;border-radius:12px;color:#fff!important;background:#086dad;font-size:16px;font-weight:700;text-decoration:none}
.service-home #text .service-return a:hover{background:#075887}
.service-home #text .service-motif{box-sizing:border-box}
.service-home #text .service-disclaimer{font-size:13px;color:var(--yt-muted);text-align:start;line-height:1.6}